juxscript 1.0.21 → 1.0.22

package/bin/cli.js

@@ -49,6 +49,7 @@ console.log(`   Output:   ${PATHS.frontendDist}`);
 console.log(`   Lib:      ${PATHS.juxLib}\n`);
 
 const command = process.argv[2];
+const subCommand = process.argv[3]; // For serve <pagename>
 const watchMode = process.argv.includes('--watch');
 const bundleMode = process.argv.includes('--bundle');
 
@@ -233,41 +234,34 @@ async function buildProject(isServe = false) {
     // Create structure
     fs.mkdirSync(juxDir, { recursive: true });
 
-    // Create index.jux with proper imports
-    const indexContent = `// Welcome to JUX!
-import { jux } from 'juxscript';
-
-// Apply a layout preset (optional)
-// import 'juxscript/presets/notion.js';
-
-// Create your app structure
-jux.container('app-container')
-  .direction('column')
-  .gap(20)
-  .style('padding: 40px;')
-  .render('body');
-
-jux.hero('welcome-hero', {
-  title: 'Welcome to JUX',
-  subtitle: 'A JavaScript UX authorship platform'
-}).render('#app-container');
-
-jux.divider({}).render('#app-container');
-
-jux.write(\`
-  <h2>Getting Started</h2>
-  <p>Edit <code>jux/index.jux</code> to build your app.</p>
-  <ul>
-    <li>Run <code>npx jux build</code> to compile</li>
-    <li>Run <code>npx jux serve</code> for dev mode</li>
-    <li>Serve <code>jux-dist/</code> from your backend</li>
-  </ul>
-\`).render('#app-container');
-`;
+    // Copy hey.jux from presets as starter template
+    const heyTemplatePath = path.join(PATHS.packageRoot, 'presets', 'hey.jux');
+    const heyTargetPath = path.join(juxDir, 'hey.jux');
+
+    if (fs.existsSync(heyTemplatePath)) {
+      fs.copyFileSync(heyTemplatePath, heyTargetPath);
+      console.log('+ Created jux/hey.jux (starter template)');
+    } else {
+      console.warn('⚠️  hey.jux template not found in presets/');
+    }
 
-    const targetPath = path.join(juxDir, 'index.jux');
-    fs.writeFileSync(targetPath, indexContent);
-    console.log('✅ Created jux/index.jux');
+    // Copy over presets/*.css as styles/ to jux/
+    const presetsSrc = path.join(PATHS.packageRoot, 'presets');
+    const stylesDest = path.join(juxDir, 'styles');
+
+    if (fs.existsSync(presetsSrc)) {
+      fs.mkdirSync(stylesDest, { recursive: true });
+
+      const presetFiles = fs.readdirSync(presetsSrc);
+      presetFiles.forEach(file => {
+        if (file.endsWith('.css')) {
+          const srcFile = path.join(presetsSrc, file);
+          const destFile = path.join(stylesDest, file);
+          fs.copyFileSync(srcFile, destFile);
+          console.log(`+ Copied preset style: styles/${file}`);
+        }
+      });
+    }
 
     // Create package.json if it doesn't exist
     const pkgPath = path.join(PATHS.projectRoot, 'package.json');
@@ -297,15 +291,13 @@ node_modules/
 
     if (!fs.existsSync(gitignorePath)) {
       fs.writeFileSync(gitignorePath, gitignoreContent);
-      console.log('✅ Created .gitignore');
+      console.log('+ Created .gitignore');
     }
 
-    console.log('✅ Created jux/ directory\n');
+    console.log('+ Created jux/ directory\n');
     console.log('Next steps:');
-    console.log('  1. npm install              # Install juxscript');
-    console.log('  2. Edit jux/index.jux       # Build your app');
-    console.log('  3. npx jux build            # Compile to jux-dist/');
-    console.log('  4. Serve jux-dist/ from your backend\n');
+    console.log('  npx jux serve hey        # Start dev server for hey.jux\n');
+    console.log('Check out the docs: https://juxscript.com/docs\n');
 
   } else if (command === 'build') {
     // ✅ Always builds router bundle
@@ -313,28 +305,37 @@ node_modules/
     console.log(`✅ Build complete: ${PATHS.frontendDist}`);
 
   } else if (command === 'serve') {
-    // ✅ Always serves router bundle
+    // ✅ Serve with optional page parameter
+    const pageName = subCommand; // e.g., "hey" from "npx jux serve hey"
+
+    if (pageName) {
+      console.log(`🎯 Serving specific page: ${pageName}\n`);
+    }
+
     await buildProject(true);
 
-    const port = parseInt(process.argv[3]) || 3000;
-    await start(port);
+    const port = pageName ? 3000 : (parseInt(subCommand) || 3000);
+
+    // Start server
+    await start(port, pageName);
 
   } else {
     console.log(`
 JUX CLI - A JavaScript UX authorship platform
 
 Usage:
-  npx jux init          Initialize a new JUX project
-  npx jux build         Build router bundle to ./jux-dist/
-  npx jux serve [port]  Start dev server with hot reload (default: 3000)
+  npx jux init               Initialize a new JUX project
+  npx jux build              Build router bundle to ./jux-dist/
+  npx jux serve [page]       Start dev server (optionally for specific page)
+  npx jux serve [port]       Start dev server on custom port
 
 Project Structure:
   my-project/
   ├── jux/              # Your .jux source files
-  │   ├── index.jux    # Entry point
-  │   └── pages/       # Additional pages
-  ├── jux-dist/        # Build output (git-ignore this)
-  ├── server/          # Your backend
+  │   ├── hey.jux       # Starter page (created by init)
+  │   └── pages/        # Additional pages
+  ├── jux-dist/         # Build output (git-ignore this)
+  ├── server/           # Your backend
   └── package.json
 
 Import Style:
@@ -343,15 +344,17 @@ Import Style:
   import 'juxscript/presets/notion.js';
 
 Getting Started:
-  1. npx jux init      # Create project structure
-  2. npm install       # Install dependencies
-  3. npx jux serve     # Dev server with hot reload
-  4. Serve jux-dist/ from your backend
+  1. npx jux init          # Create project structure
+  2. npm install           # Install dependencies
+  3. npx jux serve hey     # Dev server for hey.jux at localhost:3000/hey
+  4. npx jux serve         # Dev server for all pages
+  5. Serve jux-dist/ from your backend
 
 Examples:
-  npx jux build        Build production bundle
-  npx jux serve        Start dev server on port 3000
-  npx jux serve 8080   Start dev server on port 8080
+  npx jux build            Build production bundle
+  npx jux serve            Start dev server on port 3000 (all pages)
+  npx jux serve hey        Start dev server at localhost:3000/hey
+  npx jux serve 8080       Start dev server on port 8080
     `);
   }
 })();

package/machinery/server.js

@@ -87,9 +87,12 @@ async function serve(port = 3000, distDir = './jux-dist') {
 
   // Start HTTP server
   server.listen(port, () => {
-    console.log(`🚀 JUX dev server running at http://localhost:${port}`);
-    console.log(`   Serving: ${absoluteDistDir}`);
-    console.log(`   Press Ctrl+C to stop\n`);
+    console.log(`\n🚀 JUX dev server running`);
+    console.log(`   Local: http://localhost:${port}${pageName ? '/' + pageName : ''}`);
+    if (pageName) {
+      console.log(`   (Root redirects to /${pageName})`);
+    }
+    console.log('');
   });
 
   // Start file watcher
@@ -113,6 +116,27 @@ async function serve(port = 3000, distDir = './jux-dist') {
   return { server };
 }
 
-export async function start(port = 3000) {
-  return serve(port, './jux-dist');
+export async function start(port = 3000, pageName = null) {
+  const app = express();
+
+  // ...existing code for static files...
+
+  // If pageName specified, redirect root to that page
+  if (pageName) {
+    app.get('/', (req, res) => {
+      res.redirect(`/${pageName}`);
+    });
+    console.log(`🎯 Root (/) redirects to /${pageName}`);
+  }
+
+  // ...existing code...
+
+  app.listen(port, () => {
+    console.log(`\n🚀 JUX dev server running`);
+    console.log(`   Local: http://localhost:${port}${pageName ? '/' + pageName : ''}`);
+    if (pageName) {
+      console.log(`   (Root redirects to /${pageName})`);
+    }
+    console.log('');
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",

package/presets/hey.jux

@@ -0,0 +1,46 @@
+import { jux } from 'juxscript';
+
+// Welcome page - edit this to build your app
+jux.hero('welcome-hero', {
+    title: 'Welcome to JUX',
+    subtitle: 'A JavaScript UX authorship platform'
+}).render('#app');
+
+jux.divider().render('#app');
+
+jux.container('getting-started')
+    .style('max-width: 800px; margin: 2rem auto; padding: 2rem;')
+    .render('#app');
+
+jux.heading('gs-title')
+    .level(2)
+    .text('Getting Started')
+    .render('#getting-started');
+
+jux.paragraph('gs-intro')
+    .text('Edit jux/hey.jux to start building your application.')
+    .style('margin: 1rem 0;')
+    .render('#getting-started');
+
+jux.list('gs-steps', {
+    items: [
+        'Run npx jux build to compile',
+        'Run npx jux serve to dev with hot reload',
+        'Run npx jux serve hey to serve just this page',
+        'Serve jux-dist/ from your backend in production'
+    ]
+}).render('#getting-started');
+
+jux.divider().render('#app');
+
+jux.button('demo-button')
+    .label('Click Me!')
+    .variant('primary')
+    .bind('click', () => {
+        jux.alert('demo-alert')
+            .type('success')
+            .message('Button clicked! You are ready to build with JUX.')
+            .render('#app');
+    })
+    .style('margin: 2rem auto; display: block;')
+    .render('#app');

package/presets/{base.css → styles/base.css}

@@ -45,8 +45,6 @@ body {
   align-items: center;
   padding: 0 var(--space-lg);
   height: 48px;
-  position: sticky;
-  top: 0;
   z-index: 100;
   transition: background-color var(--transition-base), border-color var(--transition-base);
 }
@@ -92,7 +90,8 @@ body {
 /* ============================================
    SIDEBAR - Left Navigation
    ============================================ */
-#appsidebar {
+.jux-sidebar,
+#appaside {
   grid-area: sidebar;
   width: 260px;
   background: var(--color-surface-base);
@@ -100,47 +99,95 @@ body {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  transition: width var(--transition-base), background-color var(--transition-base);
+  transition: width var(--transition-base);
+  position: relative;
 }
 
-#appsidebar-content {
+.jux-sidebar-collapsed,
+#appaside.jux-sidebar-collapsed {
+  width: 60px;
+}
+
+.jux-sidebar-expand-on-hover.jux-sidebar-collapsed.jux-sidebar-hover-expanded,
+#appaside.jux-sidebar-expand-on-hover.jux-sidebar-collapsed.jux-sidebar-hover-expanded {
+  width: 260px;
+  z-index: 1000;
+  /* box-shadow: var(--shadow-lg); */
+}
+
+.jux-sidebar-menu {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: var(--space-lg);
+  padding: var(--space-sm);
 }
 
-/* Custom scrollbar for sidebar */
-#appsidebar-content::-webkit-scrollbar {
+.jux-sidebar-menu::-webkit-scrollbar {
   width: 6px;
 }
 
-#appsidebar-content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-#appsidebar-content::-webkit-scrollbar-thumb {
+.jux-sidebar-menu::-webkit-scrollbar-thumb {
   background: var(--color-border);
   border-radius: var(--radius-full);
 }
 
-#appsidebar-content::-webkit-scrollbar-thumb:hover {
-  background: var(--color-border-hover);
+.jux-sidebar-toggle {
+  margin-top: auto;
+  order: 999;
+  width: 32px;
+  height: 32px;
+  margin-left: auto;
+  margin-right: var(--space-lg);
+  margin-bottom: var(--space-lg);
+  border: none;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+  border: var(--border-width) solid var(--color-border);
 }
 
-#appsidebar-menu {
+.jux-sidebar-toggle:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.jux-sidebar-collapsed .jux-sidebar-toggle,
+#appaside.jux-sidebar-collapsed .jux-sidebar-toggle {
+  margin-left: 14px;
+  margin-right: 14px;
+}
+
+.jux-sidebar-hover-expanded .jux-sidebar-toggle,
+#appaside.jux-sidebar-hover-expanded .jux-sidebar-toggle {
+  margin-left: auto;
+  margin-right: var(--space-lg);
+}
+
+.jux-sidebar-toggle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-lg);
+}
+
+/* Menu inside sidebar */
+.jux-sidebar .jux-menu {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
 }
 
-/* Menu items */
-#appsidebar-menu .jux-menu-item {
+.jux-sidebar .jux-menu-item {
   list-style: none;
 }
 
-#appsidebar-menu .jux-menu-button,
-#appsidebar-menu a {
+.jux-sidebar .jux-menu-link,
+.jux-sidebar .jux-menu-button {
   display: flex;
   align-items: center;
   gap: var(--space-md);
@@ -156,29 +203,83 @@ body {
   background: transparent;
   width: 100%;
   text-align: left;
+  white-space: nowrap;
+  position: relative;
 }
 
-#appsidebar-menu .jux-menu-button:hover,
-#appsidebar-menu a:hover {
+.jux-sidebar .jux-menu-link:hover,
+.jux-sidebar .jux-menu-button:hover {
   background: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
 
-#appsidebar-menu .jux-menu-button:active,
-#appsidebar-menu a:active {
-  background: var(--color-surface-active);
-}
-
-/* Active menu item */
-#appsidebar-menu .jux-menu-item.active .jux-menu-button,
-#appsidebar-menu .jux-menu-item.active a {
+.jux-sidebar .jux-menu-item-active > .jux-menu-link,
+.jux-sidebar .jux-menu-item-active > .jux-menu-button,
+.jux-sidebar .jux-menu-link-active {
   background: var(--color-brand-subtle);
   color: var(--color-brand);
   font-weight: var(--font-weight-semibold);
 }
 
-/* Submenu */
-#appsidebar-menu .jux-menu-submenu {
+.jux-sidebar .jux-menu-icon {
+  flex-shrink: 0;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.jux-sidebar .jux-menu-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.jux-sidebar .jux-menu-chevron {
+  flex-shrink: 0;
+  transition: transform var(--transition-fast);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+}
+
+.jux-sidebar .jux-menu-item-open > .jux-menu-button .jux-menu-chevron {
+  transform: rotate(90deg);
+}
+
+/* Collapsed state - hide labels and chevrons */
+.jux-sidebar-collapsed .jux-menu-label,
+.jux-sidebar-collapsed .jux-menu-chevron,
+#appaside.jux-sidebar-collapsed .jux-menu-label,
+#appaside.jux-sidebar-collapsed .jux-menu-chevron {
+  display: none;
+}
+
+.jux-sidebar-collapsed .jux-menu-link,
+.jux-sidebar-collapsed .jux-menu-button,
+#appaside.jux-sidebar-collapsed .jux-menu-link,
+#appaside.jux-sidebar-collapsed .jux-menu-button {
+  justify-content: center;
+  padding: var(--space-sm);
+}
+
+/* Hover-expanded state - show labels */
+.jux-sidebar-hover-expanded .jux-menu-label,
+.jux-sidebar-hover-expanded .jux-menu-chevron,
+#appaside.jux-sidebar-hover-expanded .jux-menu-label,
+#appaside.jux-sidebar-hover-expanded .jux-menu-chevron {
+  display: inline;
+}
+
+.jux-sidebar-hover-expanded .jux-menu-link,
+.jux-sidebar-hover-expanded .jux-menu-button,
+#appaside.jux-sidebar-hover-expanded .jux-menu-link,
+#appaside.jux-sidebar-hover-expanded .jux-menu-button {
+  justify-content: flex-start;
+  padding: var(--space-sm) var(--space-md);
+}
+
+/* Submenus */
+.jux-sidebar .jux-menu-submenu {
   display: none;
   flex-direction: column;
   gap: var(--space-xs);
@@ -188,21 +289,26 @@ body {
   margin-left: var(--space-lg);
 }
 
-#appsidebar-menu .jux-menu-submenu.open {
+.jux-sidebar .jux-menu-item-open > .jux-menu-submenu {
   display: flex;
 }
 
-#appsidebar-menu .jux-menu-submenu .jux-menu-button,
-#appsidebar-menu .jux-menu-submenu a {
+.jux-sidebar .jux-menu-submenu .jux-menu-link,
+.jux-sidebar .jux-menu-submenu .jux-menu-button {
   font-size: var(--font-size-xs);
   padding: var(--space-xs) var(--space-md);
 }
 
-#appsidebar-footer {
-  padding: var(--space-lg);
-  border-top: var(--border-width) solid var(--color-border);
-  background: var(--color-surface-elevated);
-  transition: border-color var(--transition-base);
+/* Hide submenus when collapsed */
+.jux-sidebar-collapsed .jux-menu-submenu,
+#appaside.jux-sidebar-collapsed .jux-menu-submenu {
+  display: none !important;
+}
+
+/* Show submenus when hover-expanded and open */
+.jux-sidebar-hover-expanded .jux-menu-item-open > .jux-menu-submenu,
+#appaside.jux-sidebar-hover-expanded .jux-menu-item-open > .jux-menu-submenu {
+  display: flex !important;
 }
 
 /* ============================================
@@ -245,29 +351,29 @@ body {
 }
 
 /* ============================================
-   RIGHT SIDEBAR (Aside) - Optional Panel
+   RIGHT SIDEBAR - Optional Panel
    ============================================ */
-#appaside {
+#appsidebar {
   grid-area: aside;
   width: 280px;
   background: var(--color-surface-base);
   border-left: var(--border-width) solid var(--color-border);
-  display: none; /* Hidden by default */
+  display: none;
   flex-direction: column;
   overflow: hidden;
   transition: width var(--transition-base), background-color var(--transition-base);
 }
 
-#appaside.show {
+#appsidebar.show {
   display: flex;
 }
 
-#appaside.collapsed {
+#appsidebar.collapsed {
   width: 0;
   border: none;
 }
 
-#appaside-header {
+#appsidebar-header {
   padding: var(--space-lg);
   border-bottom: var(--border-width) solid var(--color-border);
   font-weight: var(--font-weight-semibold);
@@ -277,31 +383,31 @@ body {
   letter-spacing: 0.05em;
 }
 
-#appaside-content {
+#appsidebar-content {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   padding: var(--space-lg);
 }
 
-#appaside-content::-webkit-scrollbar {
+#appsidebar-content::-webkit-scrollbar {
   width: 6px;
 }
 
-#appaside-content::-webkit-scrollbar-track {
+#appsidebar-content::-webkit-scrollbar-track {
   background: transparent;
 }
 
-#appaside-content::-webkit-scrollbar-thumb {
+#appsidebar-content::-webkit-scrollbar-thumb {
   background: var(--color-border);
   border-radius: var(--radius-full);
 }
 
-#appaside-content::-webkit-scrollbar-thumb:hover {
+#appsidebar-content::-webkit-scrollbar-thumb:hover {
   background: var(--color-border-hover);
 }
 
-#appaside-footer {
+#appsidebar-footer {
   padding: var(--space-lg);
   border-top: var(--border-width) solid var(--color-border);
   font-size: var(--font-size-xs);
@@ -380,6 +486,24 @@ body {
   transform: scale(0.95);
 }
 
+/* Mobile Sidebar Backdrop */
+.jux-sidebar-backdrop {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  backdrop-filter: blur(4px);
+  animation: fadeIn 0.2s ease-out;
+}
+
+.jux-sidebar-backdrop.show {
+  display: block;
+}
+
 /* ============================================
    RESPONSIVE DESIGN
    ============================================ */
@@ -391,24 +515,40 @@ body {
   #app {
     grid-template-columns: auto 1fr;
     grid-template-areas:
-      "header header"
+      "sidebar header"
       "sidebar main"
-      "footer footer";
+      "sidebar footer";
   }
 }
 
 @media (max-width: 768px) {
-  #appsidebar {
+  /* Move sidebar toggle to header on mobile */
+  .jux-sidebar-toggle,
+  #appaside .jux-sidebar-toggle {
+    position: fixed;
+    top: 8px;
+    left: var(--space-md);
+    z-index: 1001;
+    margin: 0;
+  }
+  
+  .jux-sidebar,
+  #appaside {
+    display: none;
     position: fixed;
     left: 0;
-    top: 48px;
+    top: 0;
     bottom: 0;
-    z-index: 90;
+    z-index: 1000;
+    width: 260px;
+    box-shadow: var(--shadow-xl);
     transform: translateX(-100%);
     transition: transform var(--transition-base);
   }
   
-  #appsidebar.open {
+  .jux-sidebar.open,
+  #appaside.open {
+    display: flex;
     transform: translateX(0);
   }
   
@@ -425,7 +565,7 @@ body {
   }
   
   #appheader {
-    padding: 0 var(--space-md);
+    padding: 0 var(--space-md) 0 calc(var(--space-md) + 48px);
   }
 }
 
@@ -466,6 +606,23 @@ body {
    JUX COMPONENT STYLES
    ============================================ */
 
+/* Icon Component */
+.jux-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  line-height: 1;
+}
+
+.jux-icon img,
+.jux-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 /* Hero Component */
 .jux-hero {
   padding: var(--space-3xl) 0;
@@ -519,6 +676,7 @@ body {
   background: linear-gradient(90deg, var(--color-brand), var(--color-info));
   transform: translateY(-100%);
   transition: transform var(--transition-base);
+  z-index: 1;
 }
 
 .jux-card:hover {
@@ -537,6 +695,9 @@ body {
   color: var(--color-text-primary);
   margin-bottom: var(--space-lg);
   letter-spacing: -0.01em;
+  position: relative;
+  z-index: 2;
+  padding-right: calc(var(--font-size-2xl) + var(--space-lg));
 }
 
 .jux-card-icon {
@@ -547,6 +708,7 @@ body {
   line-height: 1;
   opacity: 0.8;
   transition: opacity var(--transition-fast);
+  z-index: 2;
 }
 
 .jux-card:hover .jux-card-icon {
@@ -557,6 +719,8 @@ body {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   line-height: var(--line-height-relaxed);
+  position: relative;
+  z-index: 2;
 }
 
 .jux-card-body .jux-card-title {
@@ -579,51 +743,119 @@ body {
   font-weight: var(--font-weight-normal);
 }
 
+.jux-card-footer {
+  margin-top: var(--space-xl);
+  padding-top: var(--space-lg);
+  border-top: var(--border-width) solid var(--color-border);
+}
+
+.jux-card-actions {
+  display: flex;
+  gap: var(--space-md);
+  justify-content: flex-start;
+}
+
 /* List Component */
 .jux-list {
   display: flex;
   flex-direction: column;
-  gap: var(--space-sm);
+  gap: var(--space-md);
   list-style: none;
   padding: 0;
-  margin: 0;
+  margin: var(--space-lg);
 }
 
 .jux-list-wrapper {
-  /* No extra styling - list renders inside cards */
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
 }
 
 .jux-list-header {
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
+  color: var(--color-text-secondary);
   margin-bottom: var(--space-lg);
-  letter-spacing: -0.01em;
+  padding: 0 var(--space-lg);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .jux-list-item {
   display: flex;
   align-items: center;
-  gap: var(--space-md);
+  gap: var(--space-lg);
   padding: var(--space-lg);
-  background: var(--color-surface-base);
+  background: var(--color-surface-elevated);
   border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-base);
   cursor: pointer;
 }
 
 .jux-list-item:hover {
   background: var(--color-surface-hover);
   border-color: var(--color-border-hover);
-  transform: translateX(4px);
   box-shadow: var(--shadow-sm);
 }
 
-.jux-list-item::before {
-  content: attr(data-icon);
-  font-size: var(--font-size-xl);
+.jux-list-item.jux-list-item-selected {
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 3px var(--color-brand-subtle);
+}
+
+.jux-list-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-primary);
+}
+
+.jux-list-item-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.jux-list-item-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-tight);
+}
+
+.jux-list-item-body {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+}
+
+.jux-list-item-metadata {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  margin-left: auto;
+  padding-left: var(--space-lg);
+  white-space: nowrap;
+}
+
+.jux-list-item-success {
+  border-left: 3px solid var(--color-success);
+}
+
+.jux-list-item-warning {
+  border-left: 3px solid var(--color-warning);
+}
+
+.jux-list-item-error {
+  border-left: 3px solid var(--color-danger);
+}
+
+.jux-list-item-info {
+  border-left: 3px solid var(--color-info);
 }
 
 /* Container Component */
@@ -841,103 +1073,122 @@ body {
 
 /* File Upload Component */
 .jux-fileupload {
-  margin-bottom: var(--space-lg);
-  position: relative;
+  margin: var(--space-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  min-width: 200px;
+  flex: 1;
+  align-items: center;
+}
+
+.jux-fileupload-label {
+  display: block;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 2px;
+  width: fit-content;
+  text-align: center;
+  white-space: nowrap;
 }
 
 .jux-fileupload-input {
   display: none;
 }
 
-.jux-fileupload-dropzone {
-  border: 2px dashed var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-3xl) var(--space-2xl);
-  text-align: center;
+.jux-fileupload-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-lg);
+  padding: var(--space-2xl) var(--space-lg);
   background: var(--color-surface-elevated);
-  transition: all var(--transition-fast);
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius-xl);
+  color: var(--color-text-secondary);
+  font-family: inherit;
+  font-size: var(--font-size-sm);
   cursor: pointer;
+  transition: all var(--transition-base);
   position: relative;
+  overflow: wrap;
+  width: 100%;
 }
 
-.jux-fileupload-dropzone:hover {
-  border-color: var(--color-brand);
-  background: var(--color-surface-hover);
+.jux-fileupload-icon {
+  font-size: 2rem;
+  line-height: 1;
+  opacity: 0.6;
+  transition: opacity var(--transition-fast), transform var(--transition-bounce);
+}
+
+.jux-fileupload-button:hover .jux-fileupload-icon {
+  opacity: 1;
+  transform: translateY(-4px);
 }
 
-.jux-fileupload-dropzone-active {
+.jux-fileupload-text {
+  font-weight: var(--font-weight-medium);
+  margin-top: var(--space-xs);
+}
+
+.jux-fileupload-button:hover:not(:disabled) {
+  background: var(--color-surface-hover);
   border-color: var(--color-brand);
-  background: var(--color-brand-subtle);
-  transform: scale(1.02);
+  color: var(--color-brand);
+  box-shadow: var(--shadow-md);
 }
 
-.jux-fileupload-icon {
-  font-size: var(--font-size-3xl);
-  margin-bottom: var(--space-md);
-  opacity: 0.5;
+.jux-fileupload-button:active:not(:disabled) {
+  transform: scale(0.98);
 }
 
-.jux-fileupload-text {
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
+.jux-fileupload-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--color-surface-base);
 }
 
 .jux-fileupload-list {
-  margin-top: var(--space-lg);
   display: flex;
   flex-direction: column;
-  gap: var(--space-sm);
+  gap: var(--space-xs);
+  margin-top: var(--space-xs);
+  color: var(--color-text-tertiary);
+  font-style: italic;
+  font-size: var(--font-size-xs);
 }
 
-.jux-fileupload-file {
+.jux-fileupload-item {
   display: flex;
   align-items: center;
   gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  background: var(--color-surface-elevated);
+  padding: var(--space-sm) var(--space-md);
+  background: var(--color-surface-base);
   border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-style: normal;
+  animation: slideIn var(--transition-base) ease-out;
   transition: all var(--transition-fast);
 }
 
-.jux-fileupload-file:hover {
+.jux-fileupload-item:hover {
   background: var(--color-surface-hover);
   border-color: var(--color-border-hover);
+  transform: translateX(2px);
+  box-shadow: var(--shadow-xs);
 }
 
-.jux-fileupload-file-name {
-  flex: 1;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.jux-fileupload-file-size {
-  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
-}
-
-.jux-fileupload-file-remove {
-  padding: var(--space-xs) var(--space-sm);
-  border: none;
-  background: transparent;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-fast);
-  font-size: var(--font-size-xl);
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.jux-fileupload-file-remove:hover {
-  background: var(--color-surface-active);
-  color: var(--color-danger);
+.jux-fileupload-item::before {
+  content: '📄';
+  font-size: 1.1rem;
+  filter: saturate(0.5);
 }
 
 /* Progress Component */
@@ -1031,30 +1282,56 @@ body {
   align-items: flex-start;
   gap: var(--space-md);
   padding: var(--space-lg);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   border: var(--border-width) solid;
-  margin-bottom: var(--space-lg);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-  position: relative;
-  animation: slideIn var(--transition-base) ease-out;
+  animation: alertSlideIn var(--transition-base) ease-out;
   transition: all var(--transition-fast);
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-lg);
+  width: 100%;
+  position: relative;
+  z-index: 1000;
+  transform-origin: top center;
+  margin-bottom: 0;
 }
 
-.jux-alert-icon {
-  flex-shrink: 0;
-  font-size: var(--font-size-xl);
-  line-height: 1;
+/* Alert Stack Effect (Scoped to .jux-alert-stack container) */
+.jux-alert-stack {
+  position: relative;
+  min-height: 80px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column-reverse; /* Keep newest at bottom of DOM but appearing correctly */
 }
 
-.jux-alert-content {
-  flex: 1;
-  color: inherit;
-  font-weight: var(--font-weight-medium);
+/* Base stack state: Hidden for all */
+.jux-alert-stack .jux-alert {
+  display: none !important;
+  transition: all var(--transition-bounce), opacity var(--transition-base);
+  margin-bottom: 0;
+  transform-origin: top center;
+}
+
+/* Top Visible Alert: The one with no UN-HIDDEN siblings after it in the DOM */
+.jux-alert-stack .jux-alert:not([style*="display: none"]):not(:has(~ .jux-alert:not([style*="display: none"]))) {
+  display: flex !important;
+  position: relative;
+  z-index: 20;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+/* Second Visible Alert: The one with exactly one UN-HIDDEN sibling after it */
+.jux-alert-stack .jux-alert:not([style*="display: none"]):has(~ .jux-alert:not([style*="display: none"])):not(:has(~ .jux-alert:not([style*="display: none"]) ~ .jux-alert:not([style*="display: none"]))) {
+  display: flex !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  opacity: 0.5;
+  transform: translateY(var(--space-sm)) scale(0.98);
+  pointer-events: none;
 }
 
 .jux-alert-close {
@@ -1076,91 +1353,28 @@ body {
   opacity: 0.6;
 }
 
-.jux-alert-close:hover {
-  opacity: 1;
-  background: rgba(0, 0, 0, 0.1);
-  transform: scale(1.1);
-}
-
-.jux-alert-close:active {
-  transform: scale(0.95);
-}
 
 /* Alert Type Variants */
 .jux-alert-info {
-  background: rgba(59, 130, 246, 0.1);
-  border-color: rgba(59, 130, 246, 0.3);
-  color: #3b82f6;
+  background: var(--color-surface-elevated);
+  border-color: currentColor;
+  color: var(--color-info);
 }
 
 .jux-alert-success {
-  background: rgba(34, 197, 94, 0.1);
-  border-color: rgba(34, 197, 94, 0.3);
-  color: #22c55e;
+  background: var(--color-surface-elevated);
+  border-color: currentColor;
+  color: var(--color-success);
 }
 
 .jux-alert-warning {
-  background: rgba(251, 191, 36, 0.1);
-  border-color: rgba(251, 191, 36, 0.3);
-  color: #f59e0b;
+  background: var(--color-surface-elevated);
+  border-color: currentColor;
+  color: var(--color-warning);
 }
 
 .jux-alert-error {
-  background: rgba(239, 68, 68, 0.1);
-  border-color: rgba(239, 68, 68, 0.3);
-  color: #ef4444;
-}
-
-/* Dark mode adjustments for alerts */
-@media (prefers-color-scheme: dark) {
-  .jux-alert-info {
-    background: rgba(59, 130, 246, 0.15);
-    border-color: rgba(59, 130, 246, 0.4);
-    color: #60a5fa;
-  }
-
-  .jux-alert-success {
-    background: rgba(34, 197, 94, 0.15);
-    border-color: rgba(34, 197, 94, 0.4);
-    color: #4ade80;
-  }
-
-  .jux-alert-warning {
-    background: rgba(251, 191, 36, 0.15);
-    border-color: rgba(251, 191, 36, 0.4);
-    color: #fbbf24;
-  }
-
-  .jux-alert-error {
-    background: rgba(239, 68, 68, 0.15);
-    border-color: rgba(239, 68, 68, 0.4);
-    color: #f87171;
-  }
-}
-
-/* Alert animations */
-@keyframes alertSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes alertSlideOut {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-}
-
-.jux-alert[style*="display: none"] {
-  animation: alertSlideOut var(--transition-fast) ease-out forwards;
+  background: var(--color-surface-elevated);
+  border-color: currentColor;
+  color: var(--color-danger);
 }