@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/scripts/extract-tokens.js

@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+import puppeteer from 'puppeteer';
+// @ts-ignore: No types for 'css' package
+import * as css from 'css'; // TODO: No @types/css found, so using 'any' where needed
+import * as fs from 'fs/promises';
+import * as path from 'path';
+// OpenAI will be dynamically imported
+// Launch headless browser, navigate to URL, and collect all CSS text (external + inline)
+async function extractCssFromUrl(url) {
+    const browser = await puppeteer.launch();
+    const page = await browser.newPage();
+    await page.goto(url, { waitUntil: 'networkidle0' });
+    const cssText = await page.evaluate(async () => {
+        const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map(l => l.href);
+        const styles = Array.from(document.querySelectorAll('style')).map(s => s.innerHTML || '');
+        const fetched = await Promise.all(links.map(u => fetch(u).then(r => r.text()).catch(() => '')));
+        return [...styles, ...fetched].join('\n');
+    });
+    await browser.close();
+    return cssText;
+}
+function parseCss(cssText) {
+    // @ts-ignore: No types for 'css' package
+    const ast = css.parse(cssText);
+    const categories = {
+        colors: new Set(),
+        backgrounds: new Set(),
+        fontSizes: new Set(),
+        lineHeights: new Set(),
+        spacings: new Set(),
+        borderRadiuses: new Set(),
+        shadows: new Set(),
+    };
+    if (ast.stylesheet && ast.stylesheet.rules) {
+        for (const rule of ast.stylesheet.rules) {
+            if (rule.type !== 'rule' || !rule.declarations)
+                continue;
+            for (const decl of rule.declarations) {
+                if (decl.type !== 'declaration' || !decl.property || !decl.value)
+                    continue;
+                const prop = decl.property;
+                const val = decl.value;
+                if (/^font-size$/.test(prop))
+                    categories.fontSizes.add(val);
+                else if (/^line-height$/.test(prop))
+                    categories.lineHeights.add(val);
+                else if (/margin|padding/.test(prop))
+                    categories.spacings.add(val);
+                else if (/border-radius/.test(prop))
+                    categories.borderRadiuses.add(val);
+                else if (/box-shadow/.test(prop))
+                    categories.shadows.add(val);
+                else if (/^background(-color)?/.test(prop))
+                    categories.backgrounds.add(val);
+                else if (/color/.test(prop))
+                    categories.colors.add(val);
+            }
+        }
+    }
+    // Convert Sets to Arrays
+    const entries = Object.entries(categories).map(([k, set]) => [k, Array.from(set)]);
+    const result = Object.fromEntries(entries);
+    return {
+        colors: result.colors ?? [],
+        backgrounds: result.backgrounds ?? [],
+        fontSizes: result.fontSizes ?? [],
+        lineHeights: result.lineHeights ?? [],
+        spacings: result.spacings ?? [],
+        borderRadiuses: result.borderRadiuses ?? [],
+        shadows: result.shadows ?? [],
+    };
+}
+// Use OpenAI to map grouped values into CSS custom properties
+async function generateTokensWithAI(groups) {
+    const systemMessage = `You are a **Brand Theming Assistant AI**. Your role is to generate a theme configuration for a web component library based on the design tokens provided in \`@cre8_dev/cre8-design-tokens\`. You will be given groups of raw CSS values (colors, font sizes, spacings, etc.) and you must output a CSS file containing a :root block with CSS custom properties using these tokens and ONLY these tokens.`;
+    const userPrompt = `Extracted values:\n` +
+        `Colors: ${groups.colors.join(', ')}\n` +
+        `Backgrounds: ${groups.backgrounds.join(', ')}\n` +
+        `Font sizes: ${groups.fontSizes.join(', ')}\n` +
+        `Line heights: ${groups.lineHeights.join(', ')}\n` +
+        `Spacings: ${groups.spacings.join(', ')}\n` +
+        `Border radiuses: ${groups.borderRadiuses.join(', ')}\n` +
+        `Shadows: ${groups.shadows.join(', ')}\n\n` +
+        `Please map each category to the appropriate CSS custom properties as defined in \`@cre8_dev/cre8-design-tokens\` and return a complete CSS snippet.`;
+    if (!process.env.OPENAI_API_KEY) {
+        console.error('Error: OPENAI_API_KEY environment variable is not set.');
+        process.exit(1);
+    }
+    // Dynamic import for ESM-only openai package
+    const { OpenAI } = await import('openai');
+    const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
+    const response = await client.chat.completions.create({
+        model: 'gpt-4.1',
+        messages: [
+            { role: 'system', content: systemMessage },
+            { role: 'user', content: userPrompt }
+        ]
+    });
+    return response.choices[0].message.content;
+}
+// Main execution
+(async () => {
+    const url = process.argv[2];
+    if (!url) {
+        console.error('Usage: node extract-tokens.ts <url>');
+        process.exit(1);
+    }
+    console.log(`Extracting CSS from: ${url}`);
+    const cssText = await extractCssFromUrl(url);
+    console.log('Parsing and categorizing CSS values...');
+    const groups = parseCss(cssText);
+    console.log('Generating token file via AI...');
+    const tokensCss = await generateTokensWithAI(groups);
+    const outputPath = path.resolve(process.cwd(), 'tokens.css');
+    await fs.writeFile(outputPath, tokensCss, 'utf-8');
+    console.log(`Tokens file written to ${outputPath}`);
+})();
+// If you add this file as 'css.d.ts' in the same directory or in a types directory, it will suppress the error.
+// declare module 'css'; 
+//# sourceMappingURL=extract-tokens.js.map

package/lib/scripts/extract-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract-tokens.js","sourceRoot":"","sources":["../../scripts/extract-tokens.ts"],"names":[],"mappings":"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","sourcesContent":["#!/usr/bin/env node\n\nimport puppeteer from 'puppeteer';\n// @ts-ignore: No types for 'css' package\nimport * as css from 'css'; // TODO: No @types/css found, so using 'any' where needed\nimport * as fs from 'fs/promises';\nimport * as path from 'path';\n// OpenAI will be dynamically imported\n\n// Launch headless browser, navigate to URL, and collect all CSS text (external + inline)\nasync function extractCssFromUrl(url: string): Promise<string>{\n  const browser = await puppeteer.launch();\n  const page = await browser.newPage();\n  await page.goto(url, { waitUntil: 'networkidle0' });\n  const cssText = await page.evaluate(async () => {\n    const links = Array.from(document.querySelectorAll('link[rel=\"stylesheet\"]')).map(l => (l as HTMLLinkElement).href);\n    const styles = Array.from(document.querySelectorAll('style')).map(s => (s as HTMLStyleElement).innerHTML || '');\n    const fetched = await Promise.all(\n      links.map(u => fetch(u).then(r => r.text()).catch(() => ''))\n    );\n    return [...styles, ...fetched].join('\\n');\n  });\n  await browser.close();\n  return cssText;\n}\n\n// Parse CSS text and collect unique values by property category\ninterface CssTokenGroups {\n  colors: string[];\n  backgrounds: string[];\n  fontSizes: string[];\n  lineHeights: string[];\n  spacings: string[];\n  borderRadiuses: string[];\n  shadows: string[];\n}\n\nfunction parseCss(cssText: string): CssTokenGroups {\n  // @ts-ignore: No types for 'css' package\n  const ast = css.parse(cssText);\n  const categories = {\n    colors: new Set<string>(),\n    backgrounds: new Set<string>(),\n    fontSizes: new Set<string>(),\n    lineHeights: new Set<string>(),\n    spacings: new Set<string>(),\n    borderRadiuses: new Set<string>(),\n    shadows: new Set<string>(),\n  };\n\n  if (ast.stylesheet && ast.stylesheet.rules) {\n    for (const rule of ast.stylesheet.rules) {\n      if (rule.type !== 'rule' || !rule.declarations) continue;\n      for (const decl of rule.declarations) {\n        if (decl.type !== 'declaration' || !decl.property || !decl.value) continue;\n        const prop = decl.property;\n        const val = decl.value;\n        if (/^font-size$/.test(prop)) categories.fontSizes.add(val);\n        else if (/^line-height$/.test(prop)) categories.lineHeights.add(val);\n        else if (/margin|padding/.test(prop)) categories.spacings.add(val);\n        else if (/border-radius/.test(prop)) categories.borderRadiuses.add(val);\n        else if (/box-shadow/.test(prop)) categories.shadows.add(val);\n        else if (/^background(-color)?/.test(prop)) categories.backgrounds.add(val);\n        else if (/color/.test(prop)) categories.colors.add(val);\n      }\n    }\n  }\n\n  // Convert Sets to Arrays\n  const entries = Object.entries(categories).map(([k, set]) => [k, Array.from(set)]);\n  const result = Object.fromEntries(entries);\n  return {\n    colors: result.colors ?? [],\n    backgrounds: result.backgrounds ?? [],\n    fontSizes: result.fontSizes ?? [],\n    lineHeights: result.lineHeights ?? [],\n    spacings: result.spacings ?? [],\n    borderRadiuses: result.borderRadiuses ?? [],\n    shadows: result.shadows ?? [],\n  };\n}\n\n// Use OpenAI to map grouped values into CSS custom properties\nasync function generateTokensWithAI(groups: CssTokenGroups): Promise<string> {\n  const systemMessage = `You are a **Brand Theming Assistant AI**. Your role is to generate a theme configuration for a web component library based on the design tokens provided in \\`@cre8_dev/cre8-design-tokens\\`. You will be given groups of raw CSS values (colors, font sizes, spacings, etc.) and you must output a CSS file containing a :root block with CSS custom properties using these tokens and ONLY these tokens.`;\n\n  const userPrompt = `Extracted values:\\n` +\n    `Colors: ${groups.colors.join(', ')}\\n` +\n    `Backgrounds: ${groups.backgrounds.join(', ')}\\n` +\n    `Font sizes: ${groups.fontSizes.join(', ')}\\n` +\n    `Line heights: ${groups.lineHeights.join(', ')}\\n` +\n    `Spacings: ${groups.spacings.join(', ')}\\n` +\n    `Border radiuses: ${groups.borderRadiuses.join(', ')}\\n` +\n    `Shadows: ${groups.shadows.join(', ')}\\n\\n` +\n    `Please map each category to the appropriate CSS custom properties as defined in \\`@cre8_dev/cre8-design-tokens\\` and return a complete CSS snippet.`;\n\n  if (!process.env.OPENAI_API_KEY) {\n    console.error('Error: OPENAI_API_KEY environment variable is not set.');\n    process.exit(1);\n  }\n  // Dynamic import for ESM-only openai package\n  const { OpenAI } = await import('openai');\n  const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });\n  const response = await client.chat.completions.create({\n    model: 'gpt-4.1',\n    messages: [\n      { role: 'system', content: systemMessage },\n      { role: 'user', content: userPrompt }\n    ]\n  });\n  return response.choices[0].message.content as string;\n}\n\n// Main execution\n(async () => {\n  const url = process.argv[2];\n  if (!url) {\n    console.error('Usage: node extract-tokens.ts <url>');\n    process.exit(1);\n  }\n\n  console.log(`Extracting CSS from: ${url}`);\n  const cssText = await extractCssFromUrl(url);\n\n  console.log('Parsing and categorizing CSS values...');\n  const groups = parseCss(cssText);\n\n  console.log('Generating token file via AI...');\n  const tokensCss = await generateTokensWithAI(groups);\n\n  const outputPath = path.resolve(process.cwd(), 'tokens.css');\n  await fs.writeFile(outputPath, tokensCss, 'utf-8');\n  console.log(`Tokens file written to ${outputPath}`);\n})();\n\n// If you add this file as 'css.d.ts' in the same directory or in a types directory, it will suppress the error.\n// declare module 'css'; "]}

package/lib/scripts/generate-react-wrappers.js

@@ -0,0 +1,229 @@
+import * as fs from 'fs';
+import * as path from 'path';
+/**
+ * Convert CEM v1 (modules/declarations) to the Tag[] format used by the generator.
+ */
+function cemToTags(manifest) {
+    if (manifest.tags)
+        return manifest.tags;
+    if (!manifest.modules)
+        return [];
+    const tags = [];
+    for (const mod of manifest.modules) {
+        if (!mod.declarations)
+            continue;
+        for (const decl of mod.declarations) {
+            if (decl.kind === 'class' && decl.tagName && decl.customElement) {
+                tags.push({
+                    name: decl.tagName,
+                    path: './' + mod.path,
+                    description: decl.description,
+                    attributes: decl.attributes?.map(a => ({
+                        ...a,
+                        type: typeof a.type === 'object' && a.type !== null ? a.type.text : a.type,
+                    })),
+                    events: decl.events,
+                    slots: decl.slots,
+                });
+            }
+        }
+    }
+    return tags;
+}
+function toPascalCase(str) {
+    return str
+        .split('-')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+function getReactPropType(type) {
+    if (!type)
+        return 'any';
+    // Handle truncated types (e.g., "... 5 more ...")
+    if (type.includes('...') && type.includes('more')) {
+        return 'string';
+    }
+    // Handle unknown/custom types that aren't standard
+    const unknownTypes = [
+        'ChartTypeRegistry', 'CalendarModal', 'status', 'Color', 'Shape',
+        'Cre8SelectOption', 'Cre8SelectOptionGroup', 'Chart'
+    ];
+    for (const unknownType of unknownTypes) {
+        if (type.includes(unknownType)) {
+            return 'any';
+        }
+    }
+    // Handle union types with only quoted strings
+    if (type.includes('|')) {
+        // Check if it's a valid union type (only strings, numbers, booleans, undefined, or quoted values)
+        const parts = type.split('|').map(p => p.trim());
+        const isValidUnion = parts.every(p => p === 'undefined' ||
+            p === 'string' ||
+            p === 'number' ||
+            p === 'boolean' ||
+            p.startsWith('"') ||
+            p === 'string | undefined' ||
+            p === 'number | undefined' ||
+            p === 'boolean | undefined');
+        if (isValidUnion) {
+            return type;
+        }
+        return 'any';
+    }
+    // Handle common types
+    switch (type.toLowerCase()) {
+        case 'string':
+            return 'string';
+        case 'number':
+            return 'number';
+        case 'boolean':
+        case 'boolean | undefined':
+            return 'boolean';
+        default:
+            // If it looks like a custom type (starts with capital letter), use any
+            if (/^[A-Z]/.test(type)) {
+                return 'any';
+            }
+            return type;
+    }
+}
+function toValidEventName(eventName) {
+    // Convert dots and dashes to camelCase
+    return eventName
+        .split(/[.-]/)
+        .map((part, index) => index === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+function generateReactWrapper(tag) {
+    const componentName = toPascalCase(tag.name);
+    const elementClassName = componentName;
+    const tagName = tag.name;
+    // Get the import path from the tag path
+    const importPath = tag.path
+        .replace('./components/', '')
+        .replace('.ts', '');
+    // Generate props interface
+    const propsLines = [];
+    if (tag.attributes) {
+        for (const attr of tag.attributes) {
+            const propName = attr.name.includes('-')
+                ? attr.name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+                : attr.name;
+            const propType = getReactPropType(attr.type);
+            const description = attr.description ? `  /** ${attr.description.trim().replace(/\n/g, ' ')} */\n` : '';
+            propsLines.push(`${description}  ${propName}?: ${propType};`);
+        }
+    }
+    // Add children prop for slots
+    if (tag.slots && tag.slots.length > 0) {
+        propsLines.push('  children?: React.ReactNode;');
+    }
+    // Generate event props
+    const eventProps = [];
+    if (tag.events) {
+        for (const event of tag.events) {
+            const validEventName = toValidEventName(event.name);
+            const eventPropName = 'on' + validEventName.charAt(0).toUpperCase() + validEventName.slice(1);
+            eventProps.push(`  ${eventPropName}?: (event: CustomEvent) => void;`);
+        }
+    }
+    const allProps = [...propsLines, ...eventProps].join('\n');
+    // Generate the component
+    return `import { createComponent } from '@lit/react';
+import { ${elementClassName} as ${elementClassName}Element } from '@tmorrow/cre8-wc/lib/components/${importPath}';
+import React from 'react';
+
+export interface ${componentName}Props {
+${allProps}
+}
+
+/**
+ * ${tag.description?.trim().split('\n')[0] || componentName + ' component'}
+ */
+export const ${componentName} = createComponent({
+  react: React,
+  tagName: '${tagName}',
+  elementClass: ${elementClassName}Element,
+${tag.events && tag.events.length > 0 ? `  events: {
+${tag.events.map(e => {
+        const validEventName = toValidEventName(e.name);
+        const eventPropName = 'on' + validEventName.charAt(0).toUpperCase() + validEventName.slice(1);
+        return `    ${eventPropName}: '${e.name}'`;
+    }).join(',\n')}
+  }` : ''}
+});
+
+export default ${componentName};
+`;
+}
+function generateIndexFile(tags) {
+    // Track which components are exported from which folder
+    const folderExports = new Map();
+    for (const tag of tags) {
+        if (!tag.name.startsWith('cre8-'))
+            continue;
+        const componentName = toPascalCase(tag.name);
+        const importPath = tag.path
+            .replace('./components/', '')
+            .replace('.ts', '');
+        const folderName = toPascalCase(importPath.split('/')[0]);
+        if (!folderExports.has(folderName)) {
+            folderExports.set(folderName, []);
+        }
+        folderExports.get(folderName).push(componentName);
+    }
+    const exports = [];
+    for (const [folderName, components] of folderExports) {
+        // Only export the main component (one matching folder name with Cre8 prefix)
+        const expectedName = 'Cre8' + folderName;
+        const mainComponent = components.find(c => c === expectedName) || components[0];
+        exports.push(`export { ${mainComponent} } from './components/${folderName}';`);
+    }
+    return `// Auto-generated React wrappers
+${exports.join('\n')}
+`;
+}
+async function main() {
+    const manifestPath = path.join(process.cwd(), 'custom-elements.json');
+    const outputDir = path.join(process.cwd(), 'react-wrappers');
+    // Read manifest
+    const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+    // Create output directory
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+    }
+    const componentsDir = path.join(outputDir, 'components');
+    if (!fs.existsSync(componentsDir)) {
+        fs.mkdirSync(componentsDir, { recursive: true });
+    }
+    // Convert manifest to tags format
+    const tags = cemToTags(manifest);
+    // Generate wrapper for each tag
+    const generatedComponents = [];
+    for (const tag of tags) {
+        if (!tag.name.startsWith('cre8-'))
+            continue;
+        const componentName = toPascalCase(tag.name);
+        const folderName = tag.path
+            .replace('./components/', '')
+            .replace('.ts', '')
+            .split('/')[0];
+        const componentDir = path.join(componentsDir, toPascalCase(folderName));
+        if (!fs.existsSync(componentDir)) {
+            fs.mkdirSync(componentDir, { recursive: true });
+        }
+        const wrapperCode = generateReactWrapper(tag);
+        const outputPath = path.join(componentDir, `${componentName}.tsx`);
+        fs.writeFileSync(outputPath, wrapperCode);
+        // Also create index.tsx
+        fs.writeFileSync(path.join(componentDir, 'index.tsx'), `export * from './${componentName}';\n`);
+        generatedComponents.push(componentName);
+        console.log(`Generated: ${componentName}`);
+    }
+    // Generate main index file
+    const indexContent = generateIndexFile(tags);
+    fs.writeFileSync(path.join(outputDir, 'index.ts'), indexContent);
+    console.log(`\nGenerated ${generatedComponents.length} React wrappers in ${outputDir}`);
+}
+main().catch(console.error);
+//# sourceMappingURL=generate-react-wrappers.js.map

package/lib/scripts/generate-react-wrappers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-react-wrappers.js","sourceRoot":"","sources":["../../scripts/generate-react-wrappers.ts"],"names":[],"mappings":"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","sourcesContent":["import * as fs from 'fs';\nimport * as path from 'path';\n\ninterface Attribute {\n  name: string;\n  description?: string;\n  type?: string;\n  default?: string;\n}\n\ninterface Event {\n  name: string;\n  description?: string;\n}\n\ninterface Slot {\n  name: string;\n  description?: string;\n}\n\ninterface Tag {\n  name: string;\n  path: string;\n  description?: string;\n  attributes?: Attribute[];\n  events?: Event[];\n  slots?: Slot[];\n}\n\ninterface CustomElementsManifest {\n  version?: string;\n  schemaVersion?: string;\n  tags?: Tag[];\n  modules?: CemModule[];\n}\n\ninterface CemModule {\n  kind: string;\n  path: string;\n  declarations?: CemDeclaration[];\n}\n\ninterface CemDeclaration {\n  kind: string;\n  name: string;\n  tagName?: string;\n  customElement?: boolean;\n  description?: string;\n  attributes?: Attribute[];\n  events?: Event[];\n  slots?: Slot[];\n}\n\n/**\n * Convert CEM v1 (modules/declarations) to the Tag[] format used by the generator.\n */\nfunction cemToTags(manifest: CustomElementsManifest): Tag[] {\n  if (manifest.tags) return manifest.tags;\n  if (!manifest.modules) return [];\n\n  const tags: Tag[] = [];\n  for (const mod of manifest.modules) {\n    if (!mod.declarations) continue;\n    for (const decl of mod.declarations) {\n      if (decl.kind === 'class' && decl.tagName && decl.customElement) {\n        tags.push({\n          name: decl.tagName,\n          path: './' + mod.path,\n          description: decl.description,\n          attributes: decl.attributes?.map(a => ({\n            ...a,\n            type: typeof a.type === 'object' && a.type !== null ? (a.type as any).text : a.type,\n          })),\n          events: decl.events,\n          slots: decl.slots,\n        });\n      }\n    }\n  }\n  return tags;\n}\n\nfunction toPascalCase(str: string): string {\n  return str\n    .split('-')\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join('');\n}\n\nfunction getReactPropType(type: string | undefined): string {\n  if (!type) return 'any';\n\n  // Handle truncated types (e.g., \"... 5 more ...\")\n  if (type.includes('...') && type.includes('more')) {\n    return 'string';\n  }\n\n  // Handle unknown/custom types that aren't standard\n  const unknownTypes = [\n    'ChartTypeRegistry', 'CalendarModal', 'status', 'Color', 'Shape',\n    'Cre8SelectOption', 'Cre8SelectOptionGroup', 'Chart'\n  ];\n  for (const unknownType of unknownTypes) {\n    if (type.includes(unknownType)) {\n      return 'any';\n    }\n  }\n\n  // Handle union types with only quoted strings\n  if (type.includes('|')) {\n    // Check if it's a valid union type (only strings, numbers, booleans, undefined, or quoted values)\n    const parts = type.split('|').map(p => p.trim());\n    const isValidUnion = parts.every(p =>\n      p === 'undefined' ||\n      p === 'string' ||\n      p === 'number' ||\n      p === 'boolean' ||\n      p.startsWith('\"') ||\n      p === 'string | undefined' ||\n      p === 'number | undefined' ||\n      p === 'boolean | undefined'\n    );\n    if (isValidUnion) {\n      return type;\n    }\n    return 'any';\n  }\n\n  // Handle common types\n  switch (type.toLowerCase()) {\n    case 'string':\n      return 'string';\n    case 'number':\n      return 'number';\n    case 'boolean':\n    case 'boolean | undefined':\n      return 'boolean';\n    default:\n      // If it looks like a custom type (starts with capital letter), use any\n      if (/^[A-Z]/.test(type)) {\n        return 'any';\n      }\n      return type;\n  }\n}\n\nfunction toValidEventName(eventName: string): string {\n  // Convert dots and dashes to camelCase\n  return eventName\n    .split(/[.-]/)\n    .map((part, index) =>\n      index === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1)\n    )\n    .join('');\n}\n\nfunction generateReactWrapper(tag: Tag): string {\n  const componentName = toPascalCase(tag.name);\n  const elementClassName = componentName;\n  const tagName = tag.name;\n\n  // Get the import path from the tag path\n  const importPath = tag.path\n    .replace('./components/', '')\n    .replace('.ts', '');\n\n  // Generate props interface\n  const propsLines: string[] = [];\n\n  if (tag.attributes) {\n    for (const attr of tag.attributes) {\n      const propName = attr.name.includes('-')\n        ? attr.name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())\n        : attr.name;\n      const propType = getReactPropType(attr.type);\n      const description = attr.description ? `  /** ${attr.description.trim().replace(/\\n/g, ' ')} */\\n` : '';\n      propsLines.push(`${description}  ${propName}?: ${propType};`);\n    }\n  }\n\n  // Add children prop for slots\n  if (tag.slots && tag.slots.length > 0) {\n    propsLines.push('  children?: React.ReactNode;');\n  }\n\n  // Generate event props\n  const eventProps: string[] = [];\n  if (tag.events) {\n    for (const event of tag.events) {\n      const validEventName = toValidEventName(event.name);\n      const eventPropName = 'on' + validEventName.charAt(0).toUpperCase() + validEventName.slice(1);\n      eventProps.push(`  ${eventPropName}?: (event: CustomEvent) => void;`);\n    }\n  }\n\n  const allProps = [...propsLines, ...eventProps].join('\\n');\n\n  // Generate the component\n  return `import { createComponent } from '@lit/react';\nimport { ${elementClassName} as ${elementClassName}Element } from '@tmorrow/cre8-wc/lib/components/${importPath}';\nimport React from 'react';\n\nexport interface ${componentName}Props {\n${allProps}\n}\n\n/**\n * ${tag.description?.trim().split('\\n')[0] || componentName + ' component'}\n */\nexport const ${componentName} = createComponent({\n  react: React,\n  tagName: '${tagName}',\n  elementClass: ${elementClassName}Element,\n${tag.events && tag.events.length > 0 ? `  events: {\n${tag.events.map(e => {\n    const validEventName = toValidEventName(e.name);\n    const eventPropName = 'on' + validEventName.charAt(0).toUpperCase() + validEventName.slice(1);\n    return `    ${eventPropName}: '${e.name}'`;\n  }).join(',\\n')}\n  }` : ''}\n});\n\nexport default ${componentName};\n`;\n}\n\nfunction generateIndexFile(tags: Tag[]): string {\n  // Track which components are exported from which folder\n  const folderExports = new Map<string, string[]>();\n\n  for (const tag of tags) {\n    if (!tag.name.startsWith('cre8-')) continue;\n\n    const componentName = toPascalCase(tag.name);\n    const importPath = tag.path\n      .replace('./components/', '')\n      .replace('.ts', '');\n    const folderName = toPascalCase(importPath.split('/')[0]);\n\n    if (!folderExports.has(folderName)) {\n      folderExports.set(folderName, []);\n    }\n    folderExports.get(folderName)!.push(componentName);\n  }\n\n  const exports: string[] = [];\n  for (const [folderName, components] of folderExports) {\n    // Only export the main component (one matching folder name with Cre8 prefix)\n    const expectedName = 'Cre8' + folderName;\n    const mainComponent = components.find(c => c === expectedName) || components[0];\n    exports.push(`export { ${mainComponent} } from './components/${folderName}';`);\n  }\n\n  return `// Auto-generated React wrappers\n${exports.join('\\n')}\n`;\n}\n\nasync function main() {\n  const manifestPath = path.join(process.cwd(), 'custom-elements.json');\n  const outputDir = path.join(process.cwd(), 'react-wrappers');\n\n  // Read manifest\n  const manifest: CustomElementsManifest = JSON.parse(\n    fs.readFileSync(manifestPath, 'utf-8')\n  );\n\n  // Create output directory\n  if (!fs.existsSync(outputDir)) {\n    fs.mkdirSync(outputDir, { recursive: true });\n  }\n\n  const componentsDir = path.join(outputDir, 'components');\n  if (!fs.existsSync(componentsDir)) {\n    fs.mkdirSync(componentsDir, { recursive: true });\n  }\n\n  // Convert manifest to tags format\n  const tags = cemToTags(manifest);\n\n  // Generate wrapper for each tag\n  const generatedComponents: string[] = [];\n\n  for (const tag of tags) {\n    if (!tag.name.startsWith('cre8-')) continue;\n\n    const componentName = toPascalCase(tag.name);\n    const folderName = tag.path\n      .replace('./components/', '')\n      .replace('.ts', '')\n      .split('/')[0];\n\n    const componentDir = path.join(componentsDir, toPascalCase(folderName));\n    if (!fs.existsSync(componentDir)) {\n      fs.mkdirSync(componentDir, { recursive: true });\n    }\n\n    const wrapperCode = generateReactWrapper(tag);\n    const outputPath = path.join(componentDir, `${componentName}.tsx`);\n\n    fs.writeFileSync(outputPath, wrapperCode);\n\n    // Also create index.tsx\n    fs.writeFileSync(\n      path.join(componentDir, 'index.tsx'),\n      `export * from './${componentName}';\\n`\n    );\n\n    generatedComponents.push(componentName);\n    console.log(`Generated: ${componentName}`);\n  }\n\n  // Generate main index file\n  const indexContent = generateIndexFile(tags);\n  fs.writeFileSync(path.join(outputDir, 'index.ts'), indexContent);\n\n  console.log(`\\nGenerated ${generatedComponents.length} React wrappers in ${outputDir}`);\n}\n\nmain().catch(console.error);\n"]}

package/lib/scripts/generateWesparkleThemes.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import postcss from 'postcss';
+// Helper to parse CSS variables into an object
+function parseVars(css) {
+    const root = postcss.parse(css);
+    const vars = {};
+    root.walkDecls(function (decl) {
+        const prop = decl.prop.trim();
+        const val = decl.value.trim();
+        if (prop.startsWith('--')) {
+            vars[prop] = val;
+        }
+    });
+    return vars;
+}
+// Generate theme CSS by merging templateVars and overrideVars
+function generateTheme(templateVars, overrideVars, themeName) {
+    const themeVars = {};
+    Object.keys(templateVars).forEach((prop) => {
+        // Map override key by stripping the "--cre8-" prefix
+        const overrideKey = prop.replace(/^--cre8-/, '--');
+        themeVars[prop] = overrideVars[overrideKey] ?? templateVars[prop];
+    });
+    let out = `/**\n * Generated ${themeName} Theme\n */\n\n:root {\n`;
+    Object.entries(themeVars).forEach(([prop, val]) => {
+        out += `  ${prop}: ${val};\n`;
+    });
+    out += `}\n`;
+    return out;
+}
+// Paths
+const baseDir = path.resolve(__dirname, '..');
+const templatePath = path.join(baseDir, 'tokens_brand.css');
+const lightPath = path.join(baseDir, 'css-tokens', 'wesparkle-light-theme.css');
+const darkPath = path.join(baseDir, 'css-tokens', 'wesparkle-dark-theme.css');
+// Read source files
+const templateCss = fs.readFileSync(templatePath, 'utf8');
+const lightCss = fs.readFileSync(lightPath, 'utf8');
+const darkCss = fs.readFileSync(darkPath, 'utf8');
+const templateVars = parseVars(templateCss);
+const lightOverride = parseVars(lightCss);
+const darkOverride = parseVars(darkCss);
+// Build new theme CSS
+const newLightCss = generateTheme(templateVars, lightOverride, 'Wesparkle Light');
+const newDarkCss = generateTheme(templateVars, darkOverride, 'Wesparkle Dark');
+// Write back
+fs.writeFileSync(lightPath, newLightCss, 'utf8');
+fs.writeFileSync(darkPath, newDarkCss, 'utf8');
+console.log('Wesparkle themes regenerated with all tokens.');
+//# sourceMappingURL=generateWesparkleThemes.js.map

package/lib/scripts/generateWesparkleThemes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateWesparkleThemes.js","sourceRoot":"","sources":["../../scripts/generateWesparkleThemes.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,OAAO,MAAM,SAAS,CAAC;AAK9B,+CAA+C;AAC/C,SAAS,SAAS,CAAC,GAAW;IAC5B,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAChC,MAAM,IAAI,GAAS,EAAE,CAAC;IACtB,IAAI,CAAC,SAAS,CAAC,UAAS,IAAsC;QAC5D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAC9B,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;QACnB,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,IAAI,CAAC;AACd,CAAC;AAED,8DAA8D;AAC9D,SAAS,aAAa,CAAC,YAAkB,EAAE,YAAkB,EAAE,SAAiB;IAC9E,MAAM,SAAS,GAAS,EAAE,CAAC;IAC3B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACzC,qDAAqD;QACrD,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACnD,SAAS,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,WAAW,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,IAAI,GAAG,GAAG,qBAAqB,SAAS,0BAA0B,CAAC;IACnE,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE;QAChD,GAAG,IAAI,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC;IAChC,CAAC,CAAC,CAAC;IACH,GAAG,IAAI,KAAK,CAAC;IACb,OAAO,GAAG,CAAC;AACb,CAAC;AAED,QAAQ;AACR,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAC9C,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;AAC5D,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,2BAA2B,CAAC,CAAC;AAChF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,0BAA0B,CAAC,CAAC;AAE9E,oBAAoB;AACpB,MAAM,WAAW,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1D,MAAM,QAAQ,GAAM,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AACvD,MAAM,OAAO,GAAO,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;AAEtD,MAAM,YAAY,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;AAC5C,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAC1C,MAAM,YAAY,GAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAEzC,sBAAsB;AACtB,MAAM,WAAW,GAAG,aAAa,CAAC,YAAY,EAAE,aAAa,EAAE,iBAAiB,CAAC,CAAC;AAClF,MAAM,UAAU,GAAI,aAAa,CAAC,YAAY,EAAE,YAAY,EAAG,gBAAgB,CAAC,CAAC;AAEjF,aAAa;AACb,EAAE,CAAC,aAAa,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;AACjD,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAG,UAAU,EAAG,MAAM,CAAC,CAAC;AAEjD,OAAO,CAAC,GAAG,CAAC,+CAA+C,CAAC,CAAC","sourcesContent":["#!/usr/bin/env node\nimport fs from 'fs';\nimport path from 'path';\nimport postcss from 'postcss';\n\n// A map of CSS custom properties to their values\ntype Vars = Record<string, string>;\n\n// Helper to parse CSS variables into an object\nfunction parseVars(css: string): Vars {\n  const root = postcss.parse(css);\n  const vars: Vars = {};\n  root.walkDecls(function(decl: { prop: string; value: string; }) {\n    const prop = decl.prop.trim();\n    const val = decl.value.trim();\n    if (prop.startsWith('--')) {\n      vars[prop] = val;\n    }\n  });\n  return vars;\n}\n\n// Generate theme CSS by merging templateVars and overrideVars\nfunction generateTheme(templateVars: Vars, overrideVars: Vars, themeName: string): string {\n  const themeVars: Vars = {};\n  Object.keys(templateVars).forEach((prop) => {\n    // Map override key by stripping the \"--cre8-\" prefix\n    const overrideKey = prop.replace(/^--cre8-/, '--');\n    themeVars[prop] = overrideVars[overrideKey] ?? templateVars[prop];\n  });\n\n  let out = `/**\\n * Generated ${themeName} Theme\\n */\\n\\n:root {\\n`;\n  Object.entries(themeVars).forEach(([prop, val]) => {\n    out += `  ${prop}: ${val};\\n`;\n  });\n  out += `}\\n`;\n  return out;\n}\n\n// Paths\nconst baseDir = path.resolve(__dirname, '..');\nconst templatePath = path.join(baseDir, 'tokens_brand.css');\nconst lightPath = path.join(baseDir, 'css-tokens', 'wesparkle-light-theme.css');\nconst darkPath = path.join(baseDir, 'css-tokens', 'wesparkle-dark-theme.css');\n\n// Read source files\nconst templateCss = fs.readFileSync(templatePath, 'utf8');\nconst lightCss    = fs.readFileSync(lightPath, 'utf8');\nconst darkCss     = fs.readFileSync(darkPath, 'utf8');\n\nconst templateVars = parseVars(templateCss);\nconst lightOverride = parseVars(lightCss);\nconst darkOverride  = parseVars(darkCss);\n\n// Build new theme CSS\nconst newLightCss = generateTheme(templateVars, lightOverride, 'Wesparkle Light');\nconst newDarkCss  = generateTheme(templateVars, darkOverride,  'Wesparkle Dark');\n\n// Write back\nfs.writeFileSync(lightPath, newLightCss, 'utf8');\nfs.writeFileSync(darkPath,  newDarkCss,  'utf8');\n\nconsole.log('Wesparkle themes regenerated with all tokens.'); "]}

package/lib/toBeAccessible.js

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import { expect } from '@jest/globals';
+import { axe, toHaveNoViolations } from 'jest-axe';
+const defaultAxeOptions = {
+    runOnly: {
+        type: 'tag',
+        // Note that although WCAG 2.1 is inclusive of WCAG 2.0 in their guidelines, axe-core currently
+        // still separates these tags so we must include them for coverage.
+        values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'],
+    },
+};
+// axeOptions: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter
+const toBeAccessible = async (html) => {
+    const results = await axe(html, { ...defaultAxeOptions, frameWaitTime: 10000 });
+    return toHaveNoViolations.toHaveNoViolations(results);
+};
+expect.extend({ toBeAccessible });
+//# sourceMappingURL=toBeAccessible.js.map

package/lib/toBeAccessible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toBeAccessible.js","sourceRoot":"","sources":["../toBeAccessible.ts"],"names":[],"mappings":"AAAA,oDAAoD;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,GAAG,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,MAAM,iBAAiB,GAAG;IACtB,OAAO,EAAE;QACL,IAAI,EAAE,KAAc;QACxB,+FAA+F;QAC/F,mEAAmE;QAC/D,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC;KACvD;CACJ,CAAC;AAEF,6FAA6F;AAC7F,MAAM,cAAc,GAAG,KAAK,EAAE,IAAiB,EAAE,EAAE;IAC/C,MAAM,OAAO,GAAG,MAAM,GAAG,CAAC,IAAI,EAAE,EAAE,GAAG,iBAAiB,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;IAChF,OAAO,kBAAkB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAC1D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/no-namespace */\n\nimport { expect } from '@jest/globals';\nimport { axe, toHaveNoViolations } from 'jest-axe';\n\nconst defaultAxeOptions = {\n    runOnly: {\n        type: 'tag' as const,\n    // Note that although WCAG 2.1 is inclusive of WCAG 2.0 in their guidelines, axe-core currently\n    // still separates these tags so we must include them for coverage.\n        values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'],\n    },\n};\n\n// axeOptions: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter\nconst toBeAccessible = async (html: HTMLElement) => {\n    const results = await axe(html, { ...defaultAxeOptions, frameWaitTime: 10000 });\n    return toHaveNoViolations.toHaveNoViolations(results);\n};\n\nexpect.extend({ toBeAccessible });\n\n\ndeclare global {\n  namespace jest {\n    interface Matchers<R> {\n      toBeAccessible(): R;\n    }\n  }\n}\n"]}

package/lib/utilities/is-mobile.js

@@ -0,0 +1,10 @@
+export const screenSizes = {
+    xsm: 375,
+    sm: 560,
+    md: 768,
+    lg: 960,
+    xl: 1200,
+    xxl: 1600,
+};
+export const isMobile = (screen = '768') => !window.matchMedia(`(min-width: ${screen}px)`).matches;
+//# sourceMappingURL=is-mobile.js.map

package/lib/utilities/is-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-mobile.js","sourceRoot":"","sources":["../../utilities/is-mobile.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAEpB;IACA,GAAG,EAAE,GAAG;IACR,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,IAAI;IACR,GAAG,EAAE,IAAI;CACZ,CAAC;AAGF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAM,GAAG,KAAK,EAAW,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,eAAe,MAAM,KAAK,CAAC,CAAC,OAAO,CAAC","sourcesContent":["export const screenSizes: {\n  [key: string]: number;\n} = {\n    xsm: 375,\n    sm: 560,\n    md: 768,\n    lg: 960,\n    xl: 1200,\n    xxl: 1600,\n};\n\n\nexport const isMobile = (screen = '768'): boolean => !window.matchMedia(`(min-width: ${screen}px)`).matches;\n"]}

package/lib/utilities/story-helpers.js

@@ -0,0 +1,14 @@
+import sanitizeHtml from 'sanitize-html';
+// Need to sanitize some fields we show in Storybook via `unsafeHTML` with user provided data
+export const sanitizeInput = (value, ...extraAllowedTags) => sanitizeHtml(value, {
+    allowedTags: [...sanitizeHtml.defaults.allowedTags, ...extraAllowedTags],
+    allowedAttributes: false,
+});
+/**
+ * Adding this default export to satisfy the `import/prefer-default-export` eslint rule.
+ *
+ * Remove this once more functions are added to this file, OR
+ * rename this from `story-helpers.ts` if the only planned function is for sanitizeInput
+ */
+export default sanitizeInput;
+//# sourceMappingURL=story-helpers.js.map

package/lib/utilities/story-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"story-helpers.js","sourceRoot":"","sources":["../../utilities/story-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,6FAA6F;AAC7F,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,GAAG,gBAA0B,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE;IAC/F,WAAW,EAAE,CAAC,GAAG,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,gBAAgB,CAAC;IACxE,iBAAiB,EAAE,KAAK;CAC3B,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAe,aAAa,CAAC","sourcesContent":["import sanitizeHtml from 'sanitize-html';\n\n// Need to sanitize some fields we show in Storybook via `unsafeHTML` with user provided data\nexport const sanitizeInput = (value: string, ...extraAllowedTags: string[]) => sanitizeHtml(value, {\n    allowedTags: [...sanitizeHtml.defaults.allowedTags, ...extraAllowedTags],\n    allowedAttributes: false,\n});\n\n/**\n * Adding this default export to satisfy the `import/prefer-default-export` eslint rule.\n *\n * Remove this once more functions are added to this file, OR\n * rename this from `story-helpers.ts` if the only planned function is for sanitizeInput\n */\nexport default sanitizeInput;\n"]}

package/lib/vite.config.cdn.js

@@ -0,0 +1,85 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+/**
+ * CDN Build Configuration
+ *
+ * This configuration creates a bundled build suitable for CDN deployment.
+ * It bundles all dependencies (lit, lit-html, classnames, design tokens)
+ * into a single file that can be loaded via <script> tag.
+ *
+ * Usage:
+ *   <script src="https://cdn.example.com/cre8-wc.min.js"></script>
+ *   <!-- All cre8-* components are now available -->
+ *   <cre8-button>Click me</cre8-button>
+ *
+ * Or as ES module:
+ *   <script type="module" src="https://cdn.example.com/cre8-wc.esm.js"></script>
+ */
+export default defineConfig({
+    build: {
+        lib: {
+            entry: resolve(__dirname, 'cdn-entry.ts'),
+            name: 'Cre8WC',
+            formats: ['es', 'iife'],
+            fileName: (format) => {
+                if (format === 'es')
+                    return 'cre8-wc.esm.js';
+                if (format === 'iife')
+                    return 'cre8-wc.min.js';
+                return `cre8-wc.${format}.js`;
+            },
+        },
+        outDir: 'cdn',
+        emptyOutDir: true,
+        minify: 'esbuild',
+        sourcemap: true,
+        rollupOptions: {
+            output: {
+                // Ensure all code is in one file
+                inlineDynamicImports: true,
+                // Global variable name for IIFE build
+                name: 'Cre8WC',
+                // Preserve exports for ES module build
+                exports: 'named',
+                assetFileNames: (assetInfo) => {
+                    if (/\.(css|scss)$/.test(assetInfo.name)) {
+                        return 'cre8-wc.css';
+                    }
+                    if (/\.(woff|woff2|eot|ttf|otf)$/.test(assetInfo.name)) {
+                        return `fonts/[name].[ext]`;
+                    }
+                    return `assets/[name].[ext]`;
+                },
+            },
+            // Don't mark anything as external - bundle everything
+            external: [],
+        },
+        // Increase chunk size warning limit since we're bundling everything
+        chunkSizeWarningLimit: 2000,
+        copyPublicDir: false,
+    },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                additionalData: `@import "./design-tokens/core/scss/theming/head.module.css";`,
+                includePaths: [
+                    resolve(__dirname, 'node_modules/@tmorrow/cre8-design-tokens'),
+                    resolve(__dirname, 'node_modules')
+                ]
+            }
+        }
+    },
+    resolve: {
+        extensions: ['.js', '.cjs', '.ts', '.jsx', '.tsx', '.scss', '.css', '.otf', '.ttf', '.yml']
+    },
+    esbuild: {
+        loader: 'ts',
+        include: /\.(ts|js)$/,
+        exclude: [],
+    },
+    define: {
+        // Ensure lit doesn't try to use dev mode in production
+        'process.env.NODE_ENV': JSON.stringify('production'),
+    },
+});
+//# sourceMappingURL=vite.config.cdn.js.map

package/lib/vite.config.cdn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.cdn.js","sourceRoot":"","sources":["../vite.config.cdn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAE/B;;;;;;;;;;;;;;GAcG;AACH,eAAe,YAAY,CAAC;IAC1B,KAAK,EAAE;QACL,GAAG,EAAE;YACH,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,cAAc,CAAC;YACzC,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC;YACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;gBACnB,IAAI,MAAM,KAAK,IAAI;oBAAE,OAAO,gBAAgB,CAAC;gBAC7C,IAAI,MAAM,KAAK,MAAM;oBAAE,OAAO,gBAAgB,CAAC;gBAC/C,OAAO,WAAW,MAAM,KAAK,CAAC;YAChC,CAAC;SACF;QACD,MAAM,EAAE,KAAK;QACb,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,IAAI;QACf,aAAa,EAAE;YACb,MAAM,EAAE;gBACN,iCAAiC;gBACjC,oBAAoB,EAAE,IAAI;gBAC1B,sCAAsC;gBACtC,IAAI,EAAE,QAAQ;gBACd,uCAAuC;gBACvC,OAAO,EAAE,OAAO;gBAChB,cAAc,EAAE,CAAC,SAAS,EAAE,EAAE;oBAC5B,IAAI,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,IAAK,CAAC,EAAE,CAAC;wBAC1C,OAAO,aAAa,CAAC;oBACvB,CAAC;oBACD,IAAI,6BAA6B,CAAC,IAAI,CAAC,SAAS,CAAC,IAAK,CAAC,EAAE,CAAC;wBACxD,OAAO,oBAAoB,CAAC;oBAC9B,CAAC;oBACD,OAAO,qBAAqB,CAAC;gBAC/B,CAAC;aACF;YACD,sDAAsD;YACtD,QAAQ,EAAE,EAAE;SACb;QACD,oEAAoE;QACpE,qBAAqB,EAAE,IAAI;QAC3B,aAAa,EAAE,KAAK;KACrB;IACD,GAAG,EAAE;QACH,mBAAmB,EAAE;YACnB,IAAI,EAAE;gBACJ,cAAc,EAAE,8DAA8D;gBAC9E,YAAY,EAAE;oBACZ,OAAO,CAAC,SAAS,EAAE,0CAA0C,CAAC;oBAC9D,OAAO,CAAC,SAAS,EAAE,cAAc,CAAC;iBACnC;aACF;SACF;KACF;IACD,OAAO,EAAE;QACP,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;KAC5F;IACD,OAAO,EAAE;QACP,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,EAAE;KACZ;IACD,MAAM,EAAE;QACN,uDAAuD;QACvD,sBAAsB,EAAE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;KACrD;CACF,CAAC,CAAC","sourcesContent":["import { defineConfig } from 'vite';\nimport { resolve } from 'path';\n\n/**\n * CDN Build Configuration\n *\n * This configuration creates a bundled build suitable for CDN deployment.\n * It bundles all dependencies (lit, lit-html, classnames, design tokens)\n * into a single file that can be loaded via <script> tag.\n *\n * Usage:\n *   <script src=\"https://cdn.example.com/cre8-wc.min.js\"></script>\n *   <!-- All cre8-* components are now available -->\n *   <cre8-button>Click me</cre8-button>\n *\n * Or as ES module:\n *   <script type=\"module\" src=\"https://cdn.example.com/cre8-wc.esm.js\"></script>\n */\nexport default defineConfig({\n  build: {\n    lib: {\n      entry: resolve(__dirname, 'cdn-entry.ts'),\n      name: 'Cre8WC',\n      formats: ['es', 'iife'],\n      fileName: (format) => {\n        if (format === 'es') return 'cre8-wc.esm.js';\n        if (format === 'iife') return 'cre8-wc.min.js';\n        return `cre8-wc.${format}.js`;\n      },\n    },\n    outDir: 'cdn',\n    emptyOutDir: true,\n    minify: 'esbuild',\n    sourcemap: true,\n    rollupOptions: {\n      output: {\n        // Ensure all code is in one file\n        inlineDynamicImports: true,\n        // Global variable name for IIFE build\n        name: 'Cre8WC',\n        // Preserve exports for ES module build\n        exports: 'named',\n        assetFileNames: (assetInfo) => {\n          if (/\\.(css|scss)$/.test(assetInfo.name!)) {\n            return 'cre8-wc.css';\n          }\n          if (/\\.(woff|woff2|eot|ttf|otf)$/.test(assetInfo.name!)) {\n            return `fonts/[name].[ext]`;\n          }\n          return `assets/[name].[ext]`;\n        },\n      },\n      // Don't mark anything as external - bundle everything\n      external: [],\n    },\n    // Increase chunk size warning limit since we're bundling everything\n    chunkSizeWarningLimit: 2000,\n    copyPublicDir: false,\n  },\n  css: {\n    preprocessorOptions: {\n      scss: {\n        additionalData: `@import \"./design-tokens/core/scss/theming/head.module.css\";`,\n        includePaths: [\n          resolve(__dirname, 'node_modules/@tmorrow/cre8-design-tokens'),\n          resolve(__dirname, 'node_modules')\n        ]\n      }\n    }\n  },\n  resolve: {\n    extensions: ['.js', '.cjs', '.ts', '.jsx', '.tsx', '.scss', '.css', '.otf', '.ttf', '.yml']\n  },\n  esbuild: {\n    loader: 'ts',\n    include: /\\.(ts|js)$/,\n    exclude: [],\n  },\n  define: {\n    // Ensure lit doesn't try to use dev mode in production\n    'process.env.NODE_ENV': JSON.stringify('production'),\n  },\n});\n"]}