microui-wc 0.1.0

package/lighthouse-audit.mjs

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+/**
+ * @fileoverview Lighthouse audit using puppeteer-core (no chrome-launcher)
+ * 
+ * This script bypasses chrome-launcher's mktemp issue by:
+ * 1. Launching Chrome ourselves with puppeteer-core
+ * 2. Connecting Lighthouse to the running instance
+ * 
+ * Requirements:
+ * - Global Lighthouse: npm install -g lighthouse
+ * - Chrome in ~/.cache/puppeteer
+ * - Run with Node 20+: node lighthouse-audit.mjs
+ */
+
+import { execSync } from 'child_process';
+import { existsSync, readdirSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { createRequire } from 'module';
+
+// Import Lighthouse from global installation
+const require = createRequire(import.meta.url);
+const globalNodeModules = execSync('npm root -g', { encoding: 'utf-8' }).trim();
+const lighthouse = (await import(`${globalNodeModules}/lighthouse/core/index.js`)).default;
+
+// Import puppeteer-core from project
+const puppeteer = (await import('puppeteer-core')).default;
+
+// Find Chrome in cache locations
+const findChrome = () => {
+    const cachePaths = [
+        join(process.env.HOME, '.cache', 'puppeteer'),
+        '/tmp/puppeteer'
+    ];
+
+    for (const cachePath of cachePaths) {
+        if (!existsSync(cachePath)) continue;
+        const dirs = readdirSync(cachePath);
+        for (const browserType of ['chrome-headless-shell', 'chrome']) {
+            for (const dir of dirs) {
+                if (dir.startsWith(browserType)) {
+                    const chromeDir = join(cachePath, dir);
+                    try {
+                        const versions = readdirSync(chromeDir).sort().reverse();
+                        for (const version of versions) {
+                            const armPath = join(chromeDir, version, `${browserType}-mac-arm64`, browserType);
+                            if (existsSync(armPath)) return armPath;
+                        }
+                    } catch (e) { /* skip */ }
+                }
+            }
+        }
+    }
+    return null;
+};
+
+const chromePath = findChrome();
+if (!chromePath) {
+    console.error('❌ Chrome not found');
+    process.exit(1);
+}
+
+console.log('🔍 Chrome:', chromePath);
+console.log('📊 Lighthouse loaded from global installation');
+
+// Launch Chrome with puppeteer-core (bypasses chrome-launcher!)
+const browser = await puppeteer.launch({
+    executablePath: chromePath,
+    headless: true,
+    args: [
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-dev-shm-usage',
+        '--remote-debugging-port=9222'
+    ],
+    userDataDir: `/tmp/lighthouse-${Date.now()}`  // In /tmp, not /var/folders
+});
+
+console.log('🚀 Chrome launched on port 9222');
+
+// URLs to audit
+const urls = [
+    { name: 'shell', url: 'http://localhost:5001/demo/shell.html' }
+];
+
+for (const { name, url } of urls) {
+    console.log(`\n${'='.repeat(60)}`);
+    console.log(`📊 Auditing: ${name}`);
+    console.log('='.repeat(60));
+
+    try {
+        const result = await lighthouse(url, {
+            port: 9222,
+            onlyCategories: ['accessibility', 'best-practices', 'seo', 'performance'],
+            output: 'json'
+        });
+
+        // Save report
+        writeFileSync(`/tmp/lighthouse-${name}.json`, JSON.stringify(result.lhr, null, 2));
+
+        // Display scores
+        console.log('\n📊 SCORES:');
+        for (const [key, cat] of Object.entries(result.lhr.categories)) {
+            const score = Math.round(cat.score * 100);
+            const emoji = score >= 90 ? '✅' : score >= 50 ? '⚠️' : '❌';
+            console.log(`  ${emoji} ${cat.title}: ${score}/100`);
+        }
+    } catch (e) {
+        console.error(`❌ Failed: ${e.message}`);
+    }
+}
+
+await browser.close();
+console.log('\n✓ Audit complete. Reports in /tmp/lighthouse-*.json');

package/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "microui-wc",
+    "version": "0.1.0",
+    "type": "module",
+    "description": "AI-Optimized UI Framework - Web Components Edition",
+    "main": "dist/microui.js",
+    "module": "src/index.js",
+    "exports": {
+        ".": {
+            "import": "./src/index.js",
+            "require": "./dist/microui.cjs"
+        },
+        "./components/*": "./src/components/*.js",
+        "./styles/*": "./src/styles/*"
+    },
+    "scripts": {
+        "dev": "bun server.js",
+        "test": "bun test tests/core tests/components tests/theme-toggle.test.js",
+        "test:isolated": "bun run scripts/test-isolated.js",
+        "test:e2e": "bun test tests/e2e",
+        "test:full": "bun run test:isolated && bun run test:e2e",
+        "test:all": "bun test",
+        "build": "bun run build:framework && bun run build:app",
+        "build:framework": "bun run scripts/build-framework.js",
+        "build:app": "bun run scripts/build-app.js"
+    },
+    "keywords": [
+        "ui",
+        "web-components",
+        "material-design-3",
+        "ai-optimized"
+    ],
+    "author": "Giuseppe Scotto Lavina",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "bun-types": "latest",
+        "jsdom": "^27.4.0",
+        "linkedom": "^0.18.5",
+        "puppeteer-core": "^24.0.0"
+    },
+    "dependencies": {
+        "cbor-x": "^1.6.0",
+        "crossbus": "^0.1.0"
+    }
+}

package/scripts/analyze-components.js

@@ -0,0 +1,105 @@
+/**
+ * @fileoverview MicroUI Component Analyzer
+ * 
+ * Scans source code to generate custom-elements.json manifest.
+ * Follows Custom Elements Manifest (CEM) schema.
+ * 
+ * Usage: node scripts/analyze-components.js
+ */
+
+import { readFileSync, writeFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+const SRC_DIR = './src/components';
+const OUT_FILE = './custom-elements.json';
+
+const manifest = {
+    schemaVersion: "1.0.0",
+    readme: "AGENTS.md",
+    modules: []
+};
+
+console.log('🔍 Analyzing components...');
+
+if (existsSync(SRC_DIR)) {
+    const files = readdirSync(SRC_DIR).filter(f => f.endsWith('.js'));
+
+    files.forEach(file => {
+        const content = readFileSync(join(SRC_DIR, file), 'utf-8');
+        const moduleDoc = {
+            kind: "javascript-module",
+            path: `src/components/${file}`,
+            declarations: [],
+            exports: []
+        };
+
+        // RegEx to find class definition
+        const classMatch = content.match(/class\s+(\w+)\s+extends\s+MuElement/);
+        if (classMatch) {
+            const className = classMatch[1];
+
+            // Find tag name
+            const tagMatch = content.match(/define\(['"]([\w-]+)['"]\s*,\s*\w+\)/);
+            const tagName = tagMatch ? tagMatch[1] : null;
+
+            // Find observed attributes
+            const obsAttrMatch = content.match(/static\s+observedAttributes\s*=\s*\[(.*?)\]/s);
+            const attributes = [];
+            if (obsAttrMatch) {
+                const attrs = obsAttrMatch[1].split(',').map(s => s.trim().replace(/['"]/g, ''));
+                attrs.forEach(attr => {
+                    if (attr) attributes.push({ name: attr, type: { text: "string" } });
+                });
+            }
+
+            // Find base class for component specific baseClass
+            const baseClassMatch = content.match(/static\s+baseClass\s*=\s*['"]([\w-]+)['"]/);
+            const cssBaseClass = baseClassMatch ? baseClassMatch[1] : null;
+
+            // Regex to find JSDoc before class
+            const jsdocMatch = content.match(/\/\*\*\s*([\s\S]*?)\s*\*\/\s*export\s+class/);
+            let description = `MicroUI component: ${tagName}`;
+
+            if (jsdocMatch) {
+                const jsdoc = jsdocMatch[1];
+                // Extract description (text before @tags)
+                const descMatch = jsdoc.match(/@fileoverview\s+([^\n]+)/); // Try fileoverview
+                if (descMatch) {
+                    description = descMatch[1].trim();
+                } else {
+                    // Fallback to first line of JSDoc inside
+                    const lines = jsdoc.split('\n').filter(l => !l.trim().startsWith('* @') && l.trim().length > 3);
+                    if (lines.length > 0) description = lines[0].replace(/\*\s*/, '').trim();
+                }
+            }
+
+            const declaration = {
+                kind: "class",
+                name: className,
+                tagName: tagName,
+                superclass: { name: "MuElement" },
+                attributes: attributes,
+                description: description,
+                members: [
+                    { kind: "field", name: "baseClass", privacy: "public", default: cssBaseClass }
+                ]
+            };
+
+            moduleDoc.declarations.push(declaration);
+
+            if (tagName) {
+                moduleDoc.exports.push({
+                    kind: "custom-element-definition",
+                    name: tagName,
+                    declaration: { name: className, module: `src/components/${file}` }
+                });
+            }
+        }
+
+        manifest.modules.push(moduleDoc);
+        console.log(`   ✅ ${file}`);
+    });
+}
+
+writeFileSync(OUT_FILE, JSON.stringify(manifest, null, 2));
+console.log(`\n✨ Manifest generated: ${OUT_FILE}`);

package/scripts/build-app.js

@@ -0,0 +1,193 @@
+/**
+ * @fileoverview App Build - Demo Site & Page-Based Apps
+ * 
+ * Builds apps that use the mu-page component system:
+ * - Scans app/pages/*.html for page components
+ * - Extracts dependencies from <script type="x-dependencies">
+ * - Generates route bundles automatically
+ * - Outputs to app-dist/
+ * 
+ * Run with: bun run build:app
+ * 
+ * @agent-pattern
+ * This is the build agents should use when creating apps with microUI.
+ * Just add pages to app/pages/ and run this build.
+ */
+
+import { build } from 'bun';
+import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync, statSync, copyFileSync, unlinkSync, rmdirSync } from 'fs';
+import { join, basename } from 'path';
+
+const appDir = './app';
+const pagesDir = join(appDir, 'pages');
+const outdir = './app-dist';
+const routesDir = join(outdir, 'routes');
+
+console.log('🚀 Building App...\n');
+
+// Ensure directories exist
+mkdirSync(outdir, { recursive: true });
+mkdirSync(routesDir, { recursive: true });
+
+// ============================================
+// 1. Discover Pages & Extract Dependencies
+// ============================================
+console.log('📄 Scanning pages...');
+
+const pages = [];
+
+if (existsSync(pagesDir)) {
+    const pageFiles = readdirSync(pagesDir).filter(f => f.endsWith('.html'));
+
+    for (const file of pageFiles) {
+        const filePath = join(pagesDir, file);
+        const content = readFileSync(filePath, 'utf-8');
+        const routeName = basename(file, '.html');
+
+        // Extract dependencies from <script type="x-dependencies">
+        const depsMatch = content.match(/<script type="x-dependencies">([\s\S]*?)<\/script>/);
+        const deps = depsMatch
+            ? depsMatch[1].split(/[\n,]/).map(d => d.trim()).filter(d => d && d.startsWith('mu-'))
+            : [];
+
+        // Extract title from <mu-page title="...">
+        const titleMatch = content.match(/<mu-page[^>]*title="([^"]+)"/);
+        const title = titleMatch ? titleMatch[1] : routeName;
+
+        pages.push({ name: routeName, file, deps, title });
+        console.log(`   📄 ${file} → ${deps.length} dependencies`);
+    }
+}
+
+console.log(`   Found ${pages.length} pages\n`);
+
+// ============================================
+// 2. Generate Route Entry Files
+// ============================================
+console.log('📦 Generating route bundles...');
+const generatedRoutesDir = './app/.generated/routes';
+mkdirSync(generatedRoutesDir, { recursive: true });
+
+for (const page of pages) {
+    // Generate import statements for dependencies (relative from app/.generated/routes/)
+    const imports = page.deps.map(dep =>
+        `import '../../../dist/components/${dep}.js';`
+    ).join('\n');
+
+    const routeContent = `/**
+ * Auto-generated route for: ${page.name}
+ * Dependencies: ${page.deps.join(', ')}
+ */
+${imports}
+`;
+
+    writeFileSync(join(generatedRoutesDir, `${page.name}.js`), routeContent);
+}
+
+// Build route bundles
+const routeEntryFiles = pages.map(p => join(generatedRoutesDir, `${p.name}.js`));
+
+if (routeEntryFiles.length > 0) {
+    const routeResult = await build({
+        entrypoints: routeEntryFiles,
+        outdir: routesDir,
+        target: 'browser',
+        format: 'esm',
+        minify: true,
+        splitting: true,
+        sourcemap: 'none'
+    });
+
+    if (!routeResult.success) {
+        console.error('❌ Route build failed:', routeResult.logs);
+    } else {
+        // Flatten nested structure if present
+        const nestedDir = join(routesDir, 'app', '.generated', 'routes');
+        if (existsSync(nestedDir)) {
+            const files = readdirSync(nestedDir).filter(f => f.endsWith('.js'));
+            for (const file of files) {
+                let content = readFileSync(join(nestedDir, file), 'utf-8');
+                content = content.replace(/from"\.\.\/\.\.\/\.\.\/\.\.\/dist\/components\//g, 'from"/dist/components/');
+                content = content.replace(/from"\.\.\/\.\.\/\.\.\/chunk-/g, 'from"./chunk-');
+                content = content.replace(/import"\.\.\/\.\.\/\.\.\/chunk-/g, 'import"./chunk-');
+                writeFileSync(join(routesDir, file), content);
+            }
+
+            // Cleanup
+            try {
+                const allFiles = readdirSync(nestedDir);
+                for (const f of allFiles) unlinkSync(join(nestedDir, f));
+                rmdirSync(nestedDir);
+                rmdirSync(join(routesDir, 'app', '.generated'));
+                rmdirSync(join(routesDir, 'app'));
+            } catch (e) { }
+        }
+
+        // Count files
+        const routeFiles = readdirSync(routesDir).filter(f => !f.startsWith('chunk-') && f.endsWith('.js'));
+        const chunkFiles = readdirSync(routesDir).filter(f => f.startsWith('chunk-'));
+
+        let routeSize = 0, chunkSize = 0;
+        for (const f of routeFiles) routeSize += statSync(join(routesDir, f)).size;
+        for (const f of chunkFiles) chunkSize += statSync(join(routesDir, f)).size;
+
+        console.log(`   ✅ ${routeFiles.length} routes (${(routeSize / 1024).toFixed(2)} KB)`);
+        console.log(`   ✅ ${chunkFiles.length} shared chunks (${(chunkSize / 1024).toFixed(2)} KB)`);
+    }
+}
+
+// ============================================
+// 3. Copy Pages (for runtime loading)
+// ============================================
+console.log('\n📋 Copying pages...');
+const appPagesDir = join(outdir, 'pages');
+mkdirSync(appPagesDir, { recursive: true });
+
+for (const page of pages) {
+    copyFileSync(join(pagesDir, page.file), join(appPagesDir, page.file));
+}
+console.log(`   ✅ ${pages.length} pages copied`);
+
+// ============================================
+// 4. Copy App Shell
+// ============================================
+console.log('\n🏠 Building app shell...');
+if (existsSync(join(appDir, 'index.html'))) {
+    copyFileSync(join(appDir, 'index.html'), join(outdir, 'index.html'));
+    console.log('   ✅ index.html');
+}
+
+// Copy assets
+const assetsDir = join(appDir, 'assets');
+const outAssetsDir = join(outdir, 'assets');
+if (existsSync(assetsDir)) {
+    mkdirSync(outAssetsDir, { recursive: true });
+    const assets = readdirSync(assetsDir);
+    for (const asset of assets) {
+        copyFileSync(join(assetsDir, asset), join(outAssetsDir, asset));
+    }
+    console.log(`   ✅ ${assets.length} assets`);
+}
+
+// ============================================
+// 5. Generate Page Manifest
+// ============================================
+console.log('\n📝 Generating manifest...');
+const manifest = {
+    pages: pages.map(p => ({
+        route: p.name,
+        title: p.title,
+        dependencies: p.deps
+    })),
+    generated: new Date().toISOString()
+};
+writeFileSync(join(outdir, 'pages.json'), JSON.stringify(manifest, null, 2));
+console.log('   ✅ pages.json');
+
+// ============================================
+// Summary
+// ============================================
+console.log('\n✨ App build complete!');
+console.log(`   Output: ${outdir}/`);
+console.log(`   Pages:  ${pages.length}`);
+console.log(`   Serve:  npx serve ${outdir}`);