juxscript 1.0.67 → 1.0.69

package/bin/cli.js

@@ -6,362 +6,121 @@ import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-
 const command = process.argv[2];
 
-// ═══════════════════════════════════════════════════════════════════
-// CREATE COMMAND - Runs BEFORE dependencies are installed
-// ═══════════════════════════════════════════════════════════════════
+function scaffoldProject(targetDir, packageRoot) {
+  const juxDir = path.join(targetDir, 'jux');
+  if (!fs.existsSync(juxDir)) fs.mkdirSync(juxDir, { recursive: true });
+  const presetDir = path.join(packageRoot, 'create');
+  let copied = 0;
+  if (fs.existsSync(presetDir)) {
+    fs.readdirSync(presetDir).forEach(file => {
+      if (file.startsWith('.')) return;
+      if (fs.statSync(path.join(presetDir, file)).isFile()) {
+        fs.copyFileSync(path.join(presetDir, file), path.join(juxDir, file));
+        copied++;
+      }
+    });
+  }
+  if (copied === 0 && !fs.existsSync(path.join(juxDir, 'index.jux'))) {
+    fs.writeFileSync(path.join(juxDir, 'index.jux'), `import { Element } from 'juxscript';\nElement('welcome', { tag: 'h1' }).text('Welcome to JUX!').render('app');\n`);
+  }
+  const configSrc = path.join(packageRoot, 'juxconfig.example.js');
+  const configDest = path.join(targetDir, 'juxconfig.js');
+  if (fs.existsSync(configSrc) && !fs.existsSync(configDest)) fs.copyFileSync(configSrc, configDest);
+  const gitIgnore = path.join(targetDir, '.gitignore');
+  if (!fs.existsSync(gitIgnore)) fs.writeFileSync(gitIgnore, `.jux-dist/\nnode_modules/\n.DS_Store\n.env\n*.log\n`);
+  const pkgPath = path.join(targetDir, 'package.json');
+  if (fs.existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+      pkg.scripts = pkg.scripts || {};
+      let modified = false;
+      if (!pkg.scripts.dev) { pkg.scripts.dev = 'jux serve'; modified = true; }
+      if (!pkg.scripts.build) { pkg.scripts.build = 'jux build'; modified = true; }
+      if (modified) fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    } catch (e) { }
+  }
+}
 
 if (command === 'create') {
-  // ✅ FIX: Removed timestamp fallback from default name
   const projectName = process.argv[3] || 'my-jux-app';
-
   const projectPath = path.join(process.cwd(), projectName);
-
-  console.log(`
-╔═══════════════════════════════════════════════════════╗
-║                                                       ║
-║   🎨  Welcome to JUX                                  ║
-║                                                       ║
-║   Creating your new JUX project...                   ║
-║                                                       ║
-╚═══════════════════════════════════════════════════════╝
-`);
-
-  if (fs.existsSync(projectPath)) {
-    console.error(`❌ Directory "${projectName}" already exists.`);
-    console.error(`   Please choose a different name or remove the existing directory.\n`);
-    process.exit(1);
-  }
-
+  if (fs.existsSync(projectPath)) { console.error(`❌ Directory "${projectName}" already exists.`); process.exit(1); }
   try {
     const { execSync } = await import('child_process');
-
-    console.log(`📁 Creating directory: ${projectName}`);
     fs.mkdirSync(projectPath, { recursive: true });
     process.chdir(projectPath);
-
-    console.log(`📦 Initializing package.json...`);
-    const packageJson = {
-      name: projectName,
-      version: '0.1.0',
-      type: 'module',
-      scripts: {
-        dev: 'jux serve',
-        build: 'jux build'
-      },
-      dependencies: {
-        juxscript: 'latest'
-      }
-    };
-    fs.writeFileSync('package.json', JSON.stringify(packageJson, null, 2));
-    console.log(`   ✓ package.json created`);
-
-    console.log(`\n📥 Installing juxscript...\n`);
-    try {
-      execSync('npm install', { stdio: 'inherit' });
-      console.log(`\n   ✓ Dependencies installed`);
-    } catch (err) {
-      console.error(`\n   ⚠️  npm install failed, but continuing...`);
-    }
-
-    execSync('npx jux init', { stdio: 'inherit' });
-
-    console.log(`\n📝 Creating .gitignore...`);
-    fs.writeFileSync('.gitignore', `.jux-dist/\nnode_modules/\n.DS_Store\n.env\n*.log\n`);
-    console.log(`   ✓ .gitignore created`);
-
-    console.log(`
-╔═══════════════════════════════════════════════════════╗
-║                                                       ║
-║   ✅  Project created successfully!                   ║
-║                                                       ║
-╚═══════════════════════════════════════════════════════╝
-
-📚 Resources:
-   Documentation:  [coming soon]
-   GitHub:         https://github.com/juxscript/jux
-   Examples:       https://github.com/juxscript/examples
-
-⭐ If you find JUX useful, please star us on GitHub!
-🔒 Security: Report issues to security@juxscript.com [placeholder]
-
-Say goodbye to markup </</>>>. 
-Happy javascripting your frontend! 🎉
-
-Next steps:
-   cd ${projectName}
-   npm run dev
-`);
-
-  } catch (err) {
-    console.error(`\n❌ Project creation failed:`, err.message);
-
-    if (fs.existsSync(projectPath)) {
-      try {
-        process.chdir('..');
-        fs.rmSync(projectPath, { recursive: true, force: true });
-        console.log(`   ✓ Cleaned up failed project directory\n`);
-      } catch (cleanupErr) {
-        console.error(`   ⚠️  Could not clean up directory\n`);
-      }
-    }
-
-    process.exit(1);
-  }
-
-  process.exit(0); // ✅ Exit after create completes
+    const pkg = { name: projectName, version: '0.1.0', type: 'module', scripts: { dev: 'jux serve', build: 'jux build' }, dependencies: { juxscript: 'latest' } };
+    fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2));
+    const packageRoot = path.resolve(__dirname, '..');
+    scaffoldProject(projectPath, packageRoot);
+    try { execSync('npm install', { stdio: 'inherit' }); } catch (err) { }
+    console.log(`\n✅ Project created! Run: cd ${projectName} && npm run dev\n`);
+  } catch (err) { console.error(`\n❌ Failed:`, err.message); process.exit(1); }
+  process.exit(0);
 }
 
-// ═══════════════════════════════════════════════════════════════════
-// ALL OTHER COMMANDS - Require dependencies to be installed
-// ═══════════════════════════════════════════════════════════════════
-
-import {
-  copyLibToOutput,
-  copyProjectAssets,
-  transpileProjectTypeScript,
-  copyPresetsToOutput,
-  bundleJuxFilesToRouter,
-  generateIndexHtml
-} from '../machinery/compiler.js';
-import { verifyStaticBuild } from '../machinery/verifier.js'; // ✅ Import Verifier
-import { resolveConfig } from '../machinery/config.js'; // ✅ Import Config Resolver
+import { copyLibToOutput, copyProjectAssets, transpileProjectTypeScript, copyPresetsToOutput, bundleJuxFilesToRouter, generateIndexHtml } from '../machinery/compiler.js';
+import { verifyStaticBuild } from '../machinery/verifier.js';
+import { resolveConfig } from '../machinery/config.js';
 import { start } from '../machinery/server.js';
-// ❌ REMOVED static import of config to prevent crash on incorrect path
 
-/**
- * Dynamically load and normalize juxconfig.js from the user's project root
- */
 async function loadUserConfig(projectRoot) {
   const configPath = path.join(projectRoot, 'juxconfig.js');
   let rawConfig = {};
-
-  if (fs.existsSync(configPath)) {
-    try {
-      const module = await import(configPath);
-      // Support export default defineConfig({...}) OR export const config = {...}
-      rawConfig = module.default || module.config || {};
-    } catch (err) {
-      console.warn(`⚠️  Error loading juxconfig.js: ${err.message}. Using defaults.`);
-    }
-  }
-
-  // ✅ Normalize DX sugar (short paths, missing extensions, aliases) into strict config
+  if (fs.existsSync(configPath)) { try { const module = await import(configPath); rawConfig = module.default || module.config || {}; } catch (err) { } }
   return resolveConfig(rawConfig, projectRoot);
 }
 
-// Recursively find .jux files
-function findJuxFiles(dir, fileList = []) {
-  if (!fs.existsSync(dir)) return fileList;
-  const files = fs.readdirSync(dir);
-  files.forEach(file => {
-    const filePath = path.join(dir, file);
-    const stat = fs.statSync(filePath);
-    if (stat.isDirectory()) {
-      if (file !== 'node_modules' && file !== 'jux-dist' && file !== '.git' && file !== 'server') {
-        findJuxFiles(filePath, fileList);
-      }
-    } else if (file.endsWith('.jux')) {
-      fileList.push(filePath);
-    }
-  });
-  return fileList;
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// MAIN EXECUTION BLOCK (Async)
-// ═══════════════════════════════════════════════════════════════════
 (async () => {
-  // 1. Resolve Configuration relative to CWD
   const projectRoot = process.cwd();
   const config = await loadUserConfig(projectRoot);
-
-  // 2. Define PATHS Contract
   const PATHS = {
-    packageRoot: path.resolve(__dirname, '..'), // node_modules/juxscript
+    packageRoot: path.resolve(__dirname, '..'),
     projectRoot: projectRoot,
-
-    // Use config values
     get juxSource() { return path.join(this.projectRoot, config.directories?.source || 'jux'); },
     get juxLib() { return path.resolve(this.packageRoot, 'lib'); },
     get frontendDist() { return path.join(this.projectRoot, config.directories?.distribution || '.jux-dist'); }
   };
 
-  console.log('📍 JUX Paths:');
-  console.log(`   Package:  ${PATHS.packageRoot}`);
-  console.log(`   Project:  ${PATHS.projectRoot}`);
-  console.log(`   Source:   ${PATHS.juxSource}`);
-  console.log(`   Output:   ${PATHS.frontendDist}`);
-  console.log(`   Lib:      ${PATHS.juxLib}\n`);
-
-  /**
-   * Build the entire JUX project
-   */
   async function buildProject(isServe = false, wsPort = 3001) {
-    const buildStartTime = performance.now();
-    console.log('++ Building JUX frontend...\n');
+    if (!fs.existsSync(PATHS.juxSource)) { console.error(`❌ Source not found: ${PATHS.juxSource}`); process.exit(1); }
+    if (fs.existsSync(PATHS.frontendDist)) fs.rmSync(PATHS.frontendDist, { recursive: true, force: true });
+    fs.mkdirSync(PATHS.frontendDist, { recursive: true });
 
-    try {
-      // Verify jux source directory exists
-      if (!fs.existsSync(PATHS.juxSource)) {
-        console.error(`❌ Source directory not found: ${PATHS.juxSource}`);
-        console.error(`   Please create a directory named '${config.directories?.source || 'jux'}'`);
-        process.exit(1);
-      }
-
-      // Clean and create frontend dist
-      if (fs.existsSync(PATHS.frontendDist)) {
-        fs.rmSync(PATHS.frontendDist, { recursive: true, force: true });
-      }
-      fs.mkdirSync(PATHS.frontendDist, { recursive: true });
+    // ✅ Clean Log
+    process.stdout.write('🔨 Building JUX... ');
 
-      // Copy dependencies
-      const libStartTime = performance.now();
+    try {
       await copyLibToOutput(PATHS.juxLib, PATHS.frontendDist);
-      const libTime = performance.now() - libStartTime;
-      console.log(`⏱️  Lib copy time: ${libTime.toFixed(0)}ms\n`);
-
-      const presetsStartTime = performance.now();
       await copyPresetsToOutput(PATHS.packageRoot, PATHS.frontendDist);
-      const presetsTime = performance.now() - presetsStartTime;
-      console.log(`⏱️  Presets copy time: ${presetsTime.toFixed(0)}ms\n`);
-
-      const assetsStartTime = performance.now();
       await copyProjectAssets(PATHS.juxSource, PATHS.frontendDist);
-      const assetsTime = performance.now() - assetsStartTime;
-      console.log(`⏱️  Assets copy time: ${assetsTime.toFixed(0)}ms\n`);
-
-      const tsStartTime = performance.now();
       await transpileProjectTypeScript(PATHS.juxSource, PATHS.frontendDist);
-      const tsTime = performance.now() - tsStartTime;
-      console.log(`⏱️  TypeScript transpile time: ${tsTime.toFixed(0)}ms\n`);
-
-      // Bundle Routers
-      const projectJuxFiles = findJuxFiles(PATHS.juxSource);
-      console.log(`📝 Found ${projectJuxFiles.length} .jux file(s)\n`);
-
-      if (projectJuxFiles.length === 0) {
-        console.warn('⚠️  No .jux files found to bundle');
-        process.exit(1);
-      }
-
-      const bundleStartTime = performance.now();
-      const bundleResult = await bundleJuxFilesToRouter(PATHS.juxSource, PATHS.frontendDist, {
-        routePrefix: '',
-        config // Pass config to bundler
-      });
-      const bundleTime = performance.now() - bundleStartTime;
-
-      const indexStartTime = performance.now();
-      generateIndexHtml(PATHS.frontendDist, bundleResult, {
-        isDev: isServe,
-        wsPort: isServe ? wsPort : undefined
-      });
-      const indexTime = performance.now() - indexStartTime;
-
-      // ✅ NEW: Post-Compilation Verification
-      if (!verifyStaticBuild(PATHS.frontendDist)) {
-        console.error('🛑 Critical Build Failure. Aborting.');
-        process.exit(1);
-      }
-
-      const totalBuildTime = performance.now() - buildStartTime;
-      console.log(`\n✅ Bundled → ${PATHS.frontendDist}/${bundleResult.mainJsFilename}\n`);
-
-      // Build Summary Log
-      console.log(`📊 Build Summary:`);
-      console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
-      console.log(`   Library copy:      ${libTime.toFixed(0)}ms`);
-      console.log(`   Router bundle:     ${bundleTime.toFixed(0)}ms`);
-      console.log(`   Total build time:  ${totalBuildTime.toFixed(0)}ms\n`);
-
-      if (!isServe) {
-        // ...existing code...
-      }
+      const bundleResult = await bundleJuxFilesToRouter(PATHS.juxSource, PATHS.frontendDist, { routePrefix: '', config });
+      generateIndexHtml(PATHS.frontendDist, bundleResult, { isDev: isServe, wsPort: isServe ? wsPort : undefined });
+      if (!verifyStaticBuild(PATHS.frontendDist)) { console.error('🛑 Critical Build Failure.'); process.exit(1); }
 
+      const fileCount = fs.readdirSync(PATHS.juxSource).filter(f => f.endsWith('.jux')).length; // Approximate check
+      console.log(`✅ Done. (${fileCount} files, ${(fs.statSync(path.join(PATHS.frontendDist, 'main.js')).size / 1024).toFixed(1)}KB)`);
     } catch (err) {
-      console.error(`❌ Build error:`, err.message);
-      console.error(err.stack);
+      console.log('❌ Failed.');
+      console.error(err.message);
       process.exit(1);
     }
   }
 
-  // ═══════════════════════════════════════════════════════════════
-  // COMMAND DISPATCHER
-  // ═══════════════════════════════════════════════════════════════
-
-  if (command === 'init') {
-    console.log('🎨 Initializing JUX project...\n');
-    const juxDir = PATHS.juxSource;
-    if (fs.existsSync(juxDir)) {
-      console.error('❌ Source directory already exists');
-      process.exit(1);
-    }
-
-    fs.mkdirSync(juxDir, { recursive: true }); // create it.
-
-    let filesCopied = 0;
-    // Copy default presets
-    const defaultPresetSrc = path.join(PATHS.packageRoot, 'create');
-    if (fs.existsSync(defaultPresetSrc)) {
-      const entries = fs.readdirSync(defaultPresetSrc, { withFileTypes: true });
-      for (const entry of entries) {
-        if (entry.isFile()) {
-          fs.copyFileSync(path.join(defaultPresetSrc, entry.name), path.join(juxDir, entry.name));
-          filesCopied++;
-          // console.log(`+ Created ${entry.name}`);
-        }
-      }
-    }
-
-    // ✅ ADD: Safe fallback if presets are missing so build doesn't fail
-    if (filesCopied === 0) {
-      console.warn('⚠️  Install pages not available. Creating default index.jux...');
-      const indexContent = `import { jux } from 'juxscript';
-
-jux.hero('welcome', { 
-  title: 'Welcome to JUX',
-  subtitle: 'Start building in jux/index.jux' 
-}).render('#app');
-`;
-      fs.writeFileSync(path.join(juxDir, 'index.jux'), indexContent);
-      console.log('+ Created index.jux');
-    }
-
-    // Create juxconfig.js
-    const configExampleSrc = path.join(PATHS.packageRoot, 'juxconfig.example.js');
-    const configDest = path.join(PATHS.projectRoot, 'juxconfig.js');
-    if (fs.existsSync(configExampleSrc) && !fs.existsSync(configDest)) {
-      fs.copyFileSync(configExampleSrc, configDest);
-      console.log('+ Created juxconfig.js');
-    }
-
-    console.log('\n✅ JUX project initialized!');
-
+  if (command === 'init' || command === 'install') {
+    scaffoldProject(PATHS.projectRoot, PATHS.packageRoot);
+    console.log('✅ Initialized. Next: npm run dev');
   } else if (command === 'build') {
     await buildProject(false);
-    console.log(`✅ Build complete: ${PATHS.frontendDist}`);
-
   } else if (command === 'serve') {
     const httpPort = parseInt(process.argv[3]) || config.defaults?.httpPort || 3000;
     const wsPort = parseInt(process.argv[4]) || config.defaults?.wsPort || 3001;
-
     await buildProject(true, wsPort);
-    await start(httpPort, wsPort, PATHS.frontendDist, config); // Pass config to server
-
+    await start(httpPort, wsPort, PATHS.frontendDist, config);
   } else {
-    // ...existing code...
-    // (Help text)
-    console.log(`
-JUX CLI - A JavaScript UX authorship platform
-Usage:
-  npx jux create [name]
-  npx jux init
-  npx jux build
-  npx jux serve
-`);
+    console.log(`Usage: npx jux [create|init|build|serve]`);
   }
-
 })();

package/create/index.jux

@@ -1,90 +1,79 @@
-import { jux, state } from 'juxscript';
-import { initializeGrid } from 'layout.jux';
-
-// Initialize the grid layout - this executes the rendering
-const grid = initializeGrid();
-
-// ═══════════════════════════════════════════════════════════════════
-// HEADER CONTENT
-// ═══════════════════════════════════════════════════════════════════
-
-jux.heading('logo-text')
-    .level(1)
-    .text('JUX')
-    .render('#appheader-logo');
-
-// ═══════════════════════════════════════════════════════════════════
-// MAIN CONTENT
-// ═══════════════════════════════════════════════════════════════════
-
-jux.hero('welcome', {
-    title: 'Welcome to JUX',
-    subtitle: 'A JavaScript UX authorship platform'
-}).render('#appmain-content');
-
-jux.divider().render('#appmain-content');
-
-jux.heading('start-heading')
-    .level(2)
-    .text('Getting Started')
-    .render('#appmain-content');
-
-jux.paragraph('start-intro')
-    .text('Edit this file to build your app. Here are some quick tips:')
-    .style('margin: 1rem 0;')
-    .render('#appmain-content');
-
-jux.list('quick-tips', {
-    items: [
-        'Run npx jux serve for dev mode with hot reload',
-        'Run npx jux build to compile for production',
-        'Serve .jux-dist/ from your backend',
-        'Check out the docs at juxscript.com/docs'
-    ]
-}).render('#appmain-content');
-
-jux.divider().render('#appmain-content');
-
-jux.heading('example-heading')
-    .level(3)
-    .text('Quick Example')
-    .render('#appmain-content');
-
-jux.code('example-code')
-    .language('javascript')
-    .code(`import { jux, state } from 'juxscript';
-
-const count = state(0);
-
-jux.button('increment')
-  .label('Click me!')
-  .bind('click', () => count.set(count.value + 1))
-  .render('#app');
-
-jux.paragraph('counter')
-  .sync('text', count, val => \`Count: \${val}\`)
-  .render('#app');`)
-    .render('#appmain-content');
-
-// Create a reactive counter demo
-const count = state(0);
-
-jux.button('increment')
-    .label('Click me!')
-    .bind('click', () => count.set(count.value + 1))
-    .style('margin: 1rem 0;')
-    .render('#appmain-content');
-
-jux.paragraph('counter')
-    .sync('text', count, val => `Count: ${val}`)
-    .style('font-size: 1.25rem; font-weight: 600; color: var(--color-brand);')
-    .render('#appmain-content');
-
-// ═══════════════════════════════════════════════════════════════════
-// FOOTER CONTENT
-// ═══════════════════════════════════════════════════════════════════
-
-jux.paragraph('footer-text')
-    .text('© 2026 JUX Authoring Framework')
-    .style('color: var(--color-text-tertiary);')
-    .render('#appfooter-content');
+import { Element, List } from 'juxscript';
+import { LandingLayout } from './layout.jux';
+
+// 1. Initialize Layout
+LandingLayout();
+
+// 2. Header: Logo & Nav
+Element('logo', { tag: 'h2' })
+    .text('JUX STUDIO')
+    .style('margin: 0; padding: 25px 40px; font-weight: 800; letter-spacing: -1px; display: flex; align-items: center; height: 100%; box-sizing: border-box;')
+    .render('landing-layout-0-0');
+
+// 3. Hero Section
+const hero = Element('hero-content', { tag: 'div' })
+    .style('display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; background: #f8f9fa;')
+    .render('landing-layout-1-0');
+
+Element('hero-h1', { tag: 'h1' })
+    .text('Build Web Apps. Simply.')
+    .style('font-size: 4rem; margin: 0 0 20px 0; font-weight: 900; background: linear-gradient(45deg, #111, #555); -webkit-background-clip: text; -webkit-text-fill-color: transparent;')
+    .render('hero-content');
+
+Element('hero-p', { tag: 'p' })
+    .text('No complex build steps. No magic. Just standard JavaScript components.')
+    .style('font-size: 1.5rem; color: #666; max-width: 600px; line-height: 1.5;')
+    .render('hero-content');
+
+Element('cta-btn', { tag: 'button' })
+    .text('Get Started')
+    .style('margin-top: 30px; padding: 15px 40px; font-size: 1.2rem; background: #000; color: #fff; border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s;')
+    .render('hero-content');
+
+// 4. Features Section (Nested Content)
+const featuresWrapper = Element('features-wrapper', { tag: 'div' })
+    .style('max-width: 1000px; margin: 60px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; padding: 0 20px;')
+    .render('landing-layout-2-0');
+
+// Component Showcase within Landing Page
+const listDemo = Element('list-demo-card', { tag: 'div' })
+    .style('background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee;')
+    .render('features-wrapper');
+
+Element('list-label', { tag: 'h3' }).text('Interactive Components').render('list-demo-card');
+Element('list-desc', { tag: 'p' }).text('Try dragging or sorting this list:').style('color:#666; margin-bottom:20px;').render('list-demo-card');
+
+List('feature-list', { items: ['Zero Config', 'Standard Web APIs', 'Hot Reloading', 'TypeScript Ready'] })
+    .listType('unordered')
+    .enableSort()
+    .enableMove()
+    .render('list-demo-card');
+
+// Feature Cards
+const cardData = [
+    { title: 'Reactive State', desc: 'Granular binding means high performance without a virtual DOM.' },
+    { title: 'Time Travel', desc: 'Built-in undo/redo capabilities for complex application state.' }
+];
+
+cardData.forEach((f, i) => {
+    const card = Element(`card-${i}`, { tag: 'div' })
+        .style('background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee;')
+        .render('features-wrapper');
+
+    Element(`ct-${i}`, { tag: 'h3' }).text(f.title).render(`card-${i}`);
+    Element(`cd-${i}`, { tag: 'p' }).text(f.desc).style('color: #666; line-height: 1.6;').render(`card-${i}`);
+});
+
+// 5. Footer
+const footer = Element('footer-content', { tag: 'div' })
+    .html('© 2025 Jux Project. Open Source.')
+    .style('display:flex; align-items:center; justify-content:center; height:100%; background:#111; color:#666;')
+    .render('landing-layout-3-0');
+
+// 6. Global Reset (injected via Element)
+Element('reset-styles', { tag: 'style' })
+    .text(`
+        body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #fff; color: #111; }
+        button:hover { transform: scale(1.05); }
+    `)
+    .render('app');