@howssatoshi/quantumcss 1.7.3 → 1.7.5

package/examples/travel/index.html

@@ -102,8 +102,15 @@
     <div class="hero-glow"></div>
 
     <!-- Navigation -->
-    <nav class="glass sticky top-0 z-50 border-b border-white/10">
+    <nav class="starlight-navbar">
         <div class="container mx-auto px-6 py-4 flex justify-between items-center">
+            <div class="md:hidden hamburger-left">
+                <div class="hamburger">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            </div>
             <div class="text-3xl font-black tracking-tighter text-gradient-starlight uppercase">NEBULA</div>
             <div class="hidden md:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
                 <a href="#" class="hover:text-starlight-blue transition-colors">Destinations</a>
@@ -119,32 +126,47 @@
                 <button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest">Book Now</button>
             </div>
         </div>
+
+        <!-- Mobile Menu -->
+        <div class="nav-menu-mobile">
+            <ul class="nav-list vertical">
+                <li><a href="#" class="nav-link">Destinations</a></li>
+                <li><a href="#" class="nav-link">Cruises</a></li>
+                <li><a href="#" class="nav-link">Excursions</a></li>
+                <li><a href="#" class="nav-link">Concierge</a></li>
+                <li class="pt-4 border-t border-white_5">
+                    <button class="btn-starlight w-full py-3">Book Now</button>
+                </li>
+            </ul>
+        </div>
     </nav>
 
     <!-- Hero Section -->
-    <header class="container mx-auto px-6 py-16 text-center">
-        <span class="badge badge-primary mb-8 animate-fade-in px-4 py-1.5 font-black tracking-[0.2em] text-[10px]">New Frontier: Titan IX</span>
-        <h1 class="text-7xl md:text-9xl font-black mb-10 leading-none uppercase italic tracking-tighter">
-            Travel Beyond <br>
-            <span class="text-gradient-starlight">The Horizon</span>
-        </h1>
-        <p class="text-xl text-slate-400 max-w-3xl mx-auto mb-16 font-medium leading-relaxed">
-            Experience the ethereal beauty of the outer rim with our exclusive Starlight-class lunar retreats and nebula cruises.
-        </p>
+    <header class="starlight-hero">
+        <div class="max-w-5xl mx-auto">
+            <span class="badge badge-primary mb-8 animate-fade-in px-4 py-1.5 font-black tracking-[0.2em] text-[10px]">New Frontier: Titan IX</span>
+            <h1 class="text-6xl font-black mb-10 leading-none uppercase italic tracking-tighter text-center">
+                Travel Beyond <br>
+                <span class="text-gradient-starlight">The Horizon</span>
+            </h1>
+            <p class="text-xl text-slate-400 max-w-4xl mx-auto mb-16 font-medium leading-relaxed">
+                Experience the ethereal beauty of the outer rim with our exclusive Starlight-class lunar retreats and nebula cruises.
+            </p>
         
         <!-- Search Bar -->
-        <div class="glass p-8 rounded-[2.5rem] max-w-5xl mx-auto flex flex-col md:flex-row gap-12 items-stretch shadow-2xl">
-            <div class="flex-1 flex flex-col items-start px-6">
+        <div class="glass p-6 md:p-8 rounded-[2rem] md:rounded-[2.5rem] max-w-5xl mx-auto flex flex-col md:flex-row gap-6 md:gap-12 items-stretch shadow-2xl">
+            <div class="flex-1 flex flex-col items-start px-4 md:px-6">
                 <label class="text-[10px] text-starlight-blue mb-3 font-black uppercase tracking-[0.3em]">Destination</label>
-                <input type="text" class="w-full bg-transparent border-none text-white focus:outline-none text-2xl font-black p-0 placeholder:text-white/10" placeholder="Where to?">
+                <input type="text" class="w-full bg-transparent border-none text-white focus:outline-none text-xl md:text-2xl font-black p-0 placeholder:text-white_10" placeholder="Where to?">
             </div>
-            <div class="border-l border-white/10 hidden md:block"></div>
-            <div class="flex-1 flex flex-col items-start px-6">
+            <div class="border-l border-white_10 hidden md:block"></div>
+            <div class="flex-1 flex flex-col items-start px-4 md:px-6">
                 <label class="text-[10px] text-starlight-blue mb-3 font-black uppercase tracking-[0.3em]">Departure</label>
-                <input type="date" class="w-full bg-transparent border-none text-white focus:outline-none text-2xl font-black p-0" id="departure-date">
+                <input type="date" class="w-full bg-transparent border-none text-white focus:outline-none text-xl md:text-2xl font-black p-0" id="departure-date">
             </div>
-            <button class="btn-starlight px-16 py-6 h-auto md:h-full text-lg font-black uppercase tracking-widest shadow-2xl hover:glow-blue">Search</button>
+            <button class="btn-starlight px-8 md:px-16 py-4 md:py-6 h-auto md:h-full text-base md:text-lg font-black uppercase tracking-widest shadow-2xl hover:glow-blue">Search</button>
         </div>
+    </div>
     </header>
 
     <!-- Featured Destinations -->
@@ -155,22 +177,22 @@
                 <h2 class="text-5xl font-black mb-3 uppercase italic tracking-tighter">Popular Sectors</h2>
                 <p class="text-slate-400 text-lg font-medium">Curated experiences from our master explorers.</p>
             </div>
-            <a href="#" class="text-starlight-blue text-sm font-black uppercase tracking-widest hover:underline pb-2 border-b border-starlight-blue/30">View All Clusters</a>
+            <a href="#" class="text-starlight-blue text-sm font-black uppercase tracking-widest hover:underline pb-2 border-b border-starlight-blue_30">View All Clusters</a>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-16">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16">
             <!-- Card 1 -->
-            <div class="starlight-card group overflow-hidden p-0 border-white/5 hover:border-starlight-blue/30 transition-all duration-500">
+            <div class="starlight-card group overflow-hidden p-0 hover:border-starlight-blue_30 transition-all duration-500">
                 <div class="h-80 bg-gray-800 relative overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=800&q=80" alt="Saturn" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
-                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10"></div>
+                    <div class="absolute inset-0 bg-gradient-to-t from-black_90 via-black_20 to-transparent z-10"></div>
                     <div class="absolute bottom-8 left-8 z-20">
-                        <span class="badge badge-primary bg-blue-600/20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Orbit Sector</span>
+                        <span class="badge badge-primary bg-blue-600_20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Orbit Sector</span>
                         <h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">The Cassini</h3>
                     </div>
                 </div>
-                <div class="p-10">
-                    <p class="text-slate-400 font-medium leading-loose mb-10">Experience the majestic silence of the rings from our gold-plated observation deck. Artificial gravity enabled.</p>
+                <div class="p-10 flex flex-col flex-1">
+                    <p class="text-slate-400 font-medium leading-loose mb-10 flex-1">Experience the majestic silence of the rings from our gold-plated observation deck. Artificial gravity enabled.</p>
                     <div class="flex justify-between items-center">
                         <span class="text-starlight-blue font-black text-xl italic tracking-tighter">4.2 ETH <span class="text-[10px] text-slate-500 uppercase not-italic tracking-widest ml-2">/ night</span></span>
                         <button class="btn btn-outline px-8 h-12 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
@@ -179,17 +201,17 @@
             </div>
 
             <!-- Card 2 -->
-            <div class="starlight-card group overflow-hidden p-0 border-white/5 hover:border-starlight-blue/30 transition-all duration-500">
+            <div class="starlight-card group overflow-hidden p-0 hover:border-starlight-blue_30 transition-all duration-500">
                 <div class="h-80 bg-gray-700 relative overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=800&q=80" alt="Alpha Centauri" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
-                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10"></div>
+                    <div class="absolute inset-0 bg-gradient-to-t from-black_90 via-black_20 to-transparent z-10"></div>
                     <div class="absolute bottom-8 left-8 z-20">
-                        <span class="badge badge-primary bg-emerald-600/20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Deep Space</span>
+                        <span class="badge badge-primary bg-emerald-600_20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Deep Space</span>
                         <h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Biolume Forest</h3>
                     </div>
                 </div>
-                <div class="p-10">
-                    <p class="text-slate-400 font-medium leading-loose mb-10">Wander through the glowing flora of Proxima b in our climate-controlled bio-domes. Protective suits provided.</p>
+                <div class="p-10 flex flex-col flex-1">
+                    <p class="text-slate-400 font-medium leading-loose mb-10 flex-1">Wander through the glowing flora of Proxima b in our climate-controlled bio-domes. Protective suits provided.</p>
                     <div class="flex justify-between items-center">
                         <span class="text-starlight-blue font-black text-xl italic tracking-tighter">12.5 ETH <span class="text-[10px] text-slate-500 uppercase not-italic tracking-widest ml-2">/ stay</span></span>
                         <button class="btn btn-outline px-8 h-12 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
@@ -198,17 +220,17 @@
             </div>
 
             <!-- Card 3 -->
-            <div class="starlight-card group overflow-hidden p-0 border-white/5 hover:border-starlight-blue/30 transition-all duration-500">
+            <div class="starlight-card group overflow-hidden p-0 hover:border-starlight-blue_30 transition-all duration-500">
                 <div class="h-80 bg-gray-900 relative overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1614728894747-a83421e2b9c9?auto=format&fit=crop&w=800&q=80" alt="Mars" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
-                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10"></div>
+                    <div class="absolute inset-0 bg-gradient-to-t from-black_90 via-black_20 to-transparent z-10"></div>
                     <div class="absolute bottom-8 left-8 z-20">
-                        <span class="badge badge-primary bg-orange-600/20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Red Planet</span>
+                        <span class="badge badge-primary bg-orange-600_20 text-white border-none px-3 py-1 text-[9px] font-black uppercase tracking-widest mb-3 shadow-lg backdrop-blur-md">Red Planet</span>
                         <h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Valles Marineris</h3>
                     </div>
                 </div>
-                <div class="p-10">
-                    <p class="text-slate-400 font-medium leading-loose mb-10">Grand Canyon of Mars. Helicopter tours and dust-gliding available daily for elite members.</p>
+                <div class="p-10 flex flex-col flex-1">
+                    <p class="text-slate-400 font-medium leading-loose mb-10 flex-1">Grand Canyon of Mars. Helicopter tours and dust-gliding available daily for elite members.</p>
                     <div class="flex justify-between items-center">
                         <span class="text-starlight-blue font-black text-xl italic tracking-tighter">1.8 ETH <span class="text-[10px] text-slate-500 uppercase not-italic tracking-widest ml-2">/ tour</span></span>
                         <button class="btn btn-outline px-8 h-12 text-[10px] font-black uppercase tracking-widest hover:bg-white hover:text-black transition-all">Details</button>
@@ -220,19 +242,19 @@
 
     <!-- Newsletter -->
     <section class="container mx-auto px-6 py-16">
-        <div class="glass p-16 rounded-[3rem] text-center glow-blue border-white/5 relative overflow-hidden">
-            <div class="absolute inset-0 bg-gradient-to-br from-starlight-blue/5 to-transparent"></div>
+        <div class="glass p-16 rounded-[3rem] text-center glow-blue   relative overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-br from-starlight-blue_5 to-transparent"></div>
             <h2 class="text-5xl font-black mb-6 uppercase italic tracking-tighter relative z-10">Join the Voyager Network</h2>
             <p class="text-slate-400 text-xl font-medium mb-12 max-w-2xl mx-auto leading-relaxed relative z-10">Get early access to maiden voyages and exclusive stellar discounts directly in your comms link.</p>
             <div class="flex flex-col md:flex-row gap-6 max-w-xl mx-auto relative z-10 items-center">
-                <input type="email" class="input-starlight h-16 flex-1 bg-white/5 border-white/10 text-white px-8 placeholder:text-white/20" placeholder="explorer@nebula.io">
-                <button class="btn-starlight px-12 h-16 text-[11px] font-black uppercase tracking-widest shadow-2xl shadow-starlight-blue/20">Subscribe Link</button>
+                <input type="email" class="input-starlight h-16 flex-1 bg-white_5 border-white_10 text-white px-8 placeholder:text-white_20" placeholder="explorer@nebula.io">
+                <button class="btn-starlight px-12 h-16 text-[11px] font-black uppercase tracking-widest shadow-2xl shadow-starlight-blue_20">Subscribe Link</button>
             </div>
         </div>
     </section>
 
     <!-- Footer -->
-    <footer class="border-t border-white/10 py-12 mt-20">
+    <footer class="starlight-footer">
         <div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
             <div class="text-xl font-bold text-gradient-starlight">NEBULA</div>
             <div class="flex space-x-6 text-sm text-muted">

package/examples/verify_fixes.html

@@ -22,8 +22,8 @@
         </div>
 
         <div class="mt-8 grid grid-cols-1 lg:grid-cols-12 gap-4">
-            <div class="lg:col-span-8 bg-blue-500 p-4">lg:grid-cols-12 test (8/12)</div>
-            <div class="lg:col-span-4 bg-red-500 p-4">lg:grid-cols-12 test (4/12)</div>
+            <div class="lg="col-span-8" bg-blue-500 p-4">lg="grid-cols-12" test (8/12)</div>
+            <div class="lg="col-span-4" bg-red-500 p-4">lg="grid-cols-12" test (4/12)</div>
         </div>
 
         <div class="mt-8 flex gap-4">

package/examples/verify_presets.html

@@ -15,7 +15,7 @@
             <h2 class="text-xl font-semibold">Buttons</h2>
             <div class="flex gap-4">
                 <button class="btn-primary">Primary Preset</button>
-                <button class="md:btn-primary">Responsive Primary</button>
+                <button class="md="btn-primary"">Responsive Primary</button>
                 <button class="btn-secondary">Secondary Preset</button>
             </div>
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@howssatoshi/quantumcss",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "description": "Advanced utility-first CSS framework with JIT generation and modern components",
   "main": "dist/quantum.min.css",
   "bin": {
@@ -49,6 +49,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
+    "@playwright/test": "^1.58.2",
+    "@types/node": "^25.3.3",
     "eslint": "^9.39.2",
     "stylelint": "^17.1.1",
     "stylelint-config-standard": "^40.0.0"

package/src/cli.js

@@ -1,26 +1,118 @@
 #!/usr/bin/env node
 const { generateCSS } = require('./generator');
+const { defaultTheme, utilityMaps } = require('./defaults');
 const fs = require('fs');
 const path = require('path');
 const chokidar = require('chokidar');
+const pkg = require('../package.json');
 
-function build(outputPath) {
-  const configPath = './quantum.config.json';
+const CONFIG_FILE = 'quantum.config.json';
+
+function showHelp() {
+  console.log(`
+QuantumCSS CLI v${pkg.version}
+Usage:
+  quantumcss [command] [options]
+
+Commands:
+  build [output]      Build the JIT CSS (default command)
+  watch [output]      Build and watch for changes
+  init                Generate a default ${CONFIG_FILE}
+  scaffold <type>     Generate a template (gaming, blog, travel, etc.)
+  manifest [output]   Generate an AI-optimized design system catalog
+
+Options:
+  -w, --watch         Same as the 'watch' command
+  -v, --version       Show version
+  -h, --help          Show this help
+`);
+}
+
+function manifest(outputPath) {
+  console.log('📖 Generating AI Design System Manifest...');
+  
+  let userConfig = {};
+  if (fs.existsSync(CONFIG_FILE)) {
+    try {
+      userConfig = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
+    } catch (e) {
+      console.warn('⚠️  Could not parse quantum.config.json, using defaults only.');
+    }
+  }
+
+  const manifestData = {
+    version: pkg.version,
+    theme: {
+      colors: { ...defaultTheme.colors, ...(userConfig.theme?.extend?.colors || {}) },
+      spacing: { ...defaultTheme.spacing, ...(userConfig.theme?.extend?.spacing || {}) },
+      fontSize: defaultTheme.fontSize,
+      shadows: defaultTheme.shadows,
+      maxWidth: defaultTheme.maxWidth
+    },
+    utilityMaps: Object.keys(utilityMaps),
+    componentPresets: {
+      ...utilityMaps, // Default semantic presets are in utilityMaps
+      ...(userConfig.componentPresets || {})
+    },
+    variants: ['sm', 'md', 'lg', 'xl', '2xl', 'dark', 'light', 'hover', 'focus', 'active', 'group-hover'],
+    instructions: "Always use ':' for variants (e.g., md:flex). Prefer 'Attribute Mode' for complex layouts using sm=\"...\" md=\"...\" attributes."
+  };
+
+  const json = JSON.stringify(manifestData, null, 2);
+  if (outputPath) {
+    fs.writeFileSync(outputPath, json);
+    console.log(`✅ Manifest saved to ${outputPath}`);
+  } else {
+    console.log(json);
+  }
+}
+
+function init() {
+  if (fs.existsSync(CONFIG_FILE)) {
+    console.warn(`⚠️  ${CONFIG_FILE} already exists. Skipping.`);
+    return;
+  }
+
+  const defaultConfig = {
+    theme: {
+      extend: {
+        colors: {
+          primary: defaultTheme.colors.blue[500],
+          secondary: defaultTheme.colors.slate[600],
+          starlight: defaultTheme.colors.starlight.blue
+        }
+      }
+    },
+    content: ["./**/*.html"],
+    componentPresets: {
+      "btn-action": "btn-base theme-starlight px-8 py-3 focus-glow",
+      "card-premium": "card-base theme-glass-dark p-10 shadow-2xl"
+    },
+    darkMode: "media"
+  };
+
+  fs.writeFileSync(CONFIG_FILE, JSON.stringify(defaultConfig, null, 2));
+  console.log(`✅ Created ${CONFIG_FILE} with default settings.`);
+}
+
+function build(outputPath = 'dist/quantum.css') {
   console.log('✨ Quantum CSS: Generating styles...');
   try {
-    const css = generateCSS(configPath);
+    const css = generateCSS(CONFIG_FILE);
     const outputDir = path.dirname(outputPath);
     if (!fs.existsSync(outputDir)) {
       fs.mkdirSync(outputDir, { recursive: true });
     }
     fs.writeFileSync(outputPath, css);
     console.log(`✅ Success! Styles generated at ${outputPath}`);
+    return true;
   } catch (err) {
     console.error('❌ Error generating CSS:', err);
+    return false;
   }
 }
 
-function scaffold(template, targetPath) {
+function scaffold(template, targetPath = 'index.html') {
   const templatesDir = path.resolve(__dirname, '../examples');
   const templateMap = {
     gaming: 'gaming-template.html',
@@ -44,9 +136,12 @@ function scaffold(template, targetPath) {
     process.exit(1);
   }
 
+  // Ensure config exists for the new user
+  if (!fs.existsSync(CONFIG_FILE)) {
+    init();
+  }
+
   let content = fs.readFileSync(srcPath, 'utf8');
-  
-  // Adjust stylesheet path in template
   content = content.replace(/href="(\.\.\/)*dist\/quantum(\.min)?\.css"/, 'href="dist/quantum.css"');
 
   const fullTargetPath = path.resolve(targetPath);
@@ -62,34 +157,72 @@ function scaffold(template, targetPath) {
 
 function main() {
   const args = process.argv.slice(2);
+  const command = args[0];
 
-  if (args[0] === 'scaffold') {
-    const template = args[1];
-    const targetPath = args[2] || 'index.html';
-    if (!template) {
-      console.error('❌ Error: Please specify a template name (e.g., gaming, blog, travel)');
-      process.exit(1);
-    }
-    scaffold(template, targetPath);
+  if (args.includes('--help') || args.includes('-h')) {
+    showHelp();
     return;
   }
 
-  const watch = args.includes('--watch') || args.includes('-w');
-  const outputPath = args.find(a => !a.startsWith('-')) || 'dist/quantum.css';
+  if (args.includes('--version') || args.includes('-v')) {
+    console.log(`v${pkg.version}`);
+    return;
+  }
 
-  build(outputPath);
+  switch (command) {
+    case 'init':
+      init();
+      break;
+    
+    case 'manifest':
+      manifest(args[1]);
+      break;
+    
+    case 'scaffold':
+      if (!args[1]) {
+        console.error('❌ Error: Please specify a template name (e.g., gaming, blog, travel)');
+        process.exit(1);
+      }
+      scaffold(args[1], args[2]);
+      break;
+
+    case 'watch': {
+      const out = args[1] || 'dist/quantum.css';
+      build(out);
+      console.log(`👀 Watching for changes...`);
+      
+      // Load content globs from config if possible
+      let watchPaths = ['./**/*.html', CONFIG_FILE];
+      if (fs.existsSync(CONFIG_FILE)) {
+        try {
+          const config = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
+          if (config.content) watchPaths = [...config.content, CONFIG_FILE];
+        } catch (e) {}
+      }
+
+      const watcher = chokidar.watch(watchPaths, { ignored: '**/node_modules/**', persistent: true });
+      watcher.on('change', (p) => {
+        console.log(`File ${p} changed, rebuilding...`);
+        build(out);
+      });
+      break;
+    }
 
-  if (watch) {
-    console.log(`👀 Watching for changes...`);
-    const watcher = chokidar.watch(['index.html', 'src/**/*', 'quantum.config.json'], {
-      ignored: '**/.*',
-      persistent: true
-    });
+    case 'build':
+      build(args[1]);
+      break;
 
-    watcher.on('change', (path) => {
-      console.log(`File ${path} changed, rebuilding...`);
-      build(outputPath);
-    });
+    default:
+      if (args.includes('--watch') || args.includes('-w')) {
+        // Handle shorthand watch
+        const out = args.find(a => !a.startsWith('-')) || 'dist/quantum.css';
+        build(out);
+        console.log(`👀 Watching for changes...`);
+        chokidar.watch(['./**/*.html', CONFIG_FILE], { ignored: '**/node_modules/**' }).on('change', () => build(out));
+      } else {
+        // Default to build
+        build(command);
+      }
   }
 }
 

package/src/defaults.js

@@ -88,7 +88,7 @@ const utilityMaps = {
   'top-1/2': { property: 'top', value: '50%' },
   'left-4': { property: 'left', value: '1rem' },
   'pl-12': { property: 'padding-left', value: '3rem' },
-  '-translate-y-1/2': { property: 'transform', value: 'translateY(-50%)' },
+  '-translate-y-1_2': { property: 'transform', value: 'translateY(-50%)' },
   'pointer-events-none': { property: 'pointer-events', value: 'none' },
   'w-5': { property: 'width', value: '1.25rem' },
   'h-5': { property: 'height', value: '1.25rem' },
@@ -109,20 +109,20 @@ const utilityMaps = {
   'overlay-bottom-left': { property: ['position', 'bottom', 'left'], value: ['absolute', '0', '0'] },
   'overlay-bottom-right': { property: ['position', 'bottom', 'right'], value: ['absolute', '0', '0'] },
   'nav-base': {
-    property: ['display', 'flex-direction', 'align-items', 'width', 'position', 'top', 'z-index'],
-    value: ['flex', 'row', 'center', '100%', 'sticky', '0', '1000']
+    property: ['display', 'flex-direction', 'align-items', 'width', 'min-width', 'position', 'top', 'left', 'right', 'z-index'],
+    value: ['flex', 'row', 'center', '100%', '100%', 'sticky', '0', '0', '0', '1000']
   },
   'card-base': {
     property: ['display', 'flex-direction', 'align-items', 'padding', 'overflow', 'border-radius', 'transition', 'position'],
     value: ['flex', 'column', 'stretch', 'var(--q-space-10)', 'hidden', 'var(--q-radius-lg)', 'all 0.3s ease', 'relative']
   },
   'btn-base': {
-    property: ['display', 'align-items', 'justify-content', 'cursor', 'transition', 'font-weight', 'border-radius', 'border'],
-    value: ['inline-flex', 'center', 'center', 'pointer', 'all 0.2s ease', '600', 'var(--q-radius-md)', 'none']
+    property: ['display', 'align-items', 'justify-content', 'cursor', 'transition', 'font-weight', 'border-radius', 'border', 'height'],
+    value: ['inline-flex', 'center', 'center', 'pointer', 'all 0.2s ease', '600', 'var(--q-radius-md)', 'none', '3rem']
   },
   'input-base': {
-    property: ['display', 'width', 'appearance', 'transition', 'border-radius', 'border', 'line-height'],
-    value: ['block', '100%', 'none', 'all 0.2s ease', 'var(--q-radius-md)', 'none', 'normal']
+    property: ['display', 'width', 'appearance', 'transition', 'border-radius', 'border', 'line-height', 'height'],
+    value: ['block', '100%', 'none', 'all 0.2s ease', 'var(--q-radius-md)', 'none', '1.2', '3rem']
   },
   'dialog-base': {
     property: ['display', 'flex-direction', 'align-items', 'padding', 'overflow-y', 'border-radius', 'position'],
@@ -145,8 +145,8 @@ const utilityMaps = {
     value: ['absolute', '1.5rem', '1.5rem', '2rem', '2rem', '50%', 'flex', 'center', 'center', 'pointer']
   },
   'glass': {
-    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-width', 'border-color'], 
-    value: ['rgba(255, 255, 255, 0.03)', 'blur(16px)', 'blur(16px)', '1px', 'rgba(255, 255, 255, 0.1)'] 
+    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-width', 'border-style', 'border-color'], 
+    value: ['rgba(255, 255, 255, 0.03)', 'blur(16px)', 'blur(16px)', '1px', 'solid', 'rgba(255, 255, 255, 0.1)'] 
   },
   'bg-starlight': { property: 'background', value: 'linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%)' },
   'text-gradient-starlight': {
@@ -158,33 +158,50 @@ const utilityMaps = {
     value: ['linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%)', '#000', 'transparent', '0 0 30px rgba(0, 212, 255, 0.2)']
   },
   'theme-glass': {
-    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width'],
-    value: ['rgba(255, 255, 255, 0.05)', 'blur(16px)', 'blur(16px)', 'rgba(255, 255, 255, 0.1)', '1px']
+    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width', 'border-style'],
+    value: ['rgba(255, 255, 255, 0.05)', 'blur(16px)', 'blur(16px)', 'rgba(255, 255, 255, 0.1)', '1px', 'solid']
   },
   'theme-glass-dark': {
-    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width'],
-    value: ['rgba(255, 255, 255, 0.05)', 'blur(16px)', 'blur(16px)', 'rgba(255, 255, 255, 0.1)', '1px']
+    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width', 'border-style'],
+    value: ['rgba(255, 255, 255, 0.05)', 'blur(16px)', 'blur(16px)', 'rgba(255, 255, 255, 0.03)', '1px', 'solid']
+  },
+  'starlight-dialog-bg': { 
+    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter'], 
+    value: ['rgba(8, 8, 26, 0.4) !important', 'blur(24px) !important', 'blur(24px) !important'] 
   },
   'glow-blue': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
   'glow-starlight': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
   'glow-peach': { property: 'box-shadow', value: '0 0 30px rgba(255, 179, 138, 0.25)' },
   'glow-orange': { property: 'box-shadow', value: '0 0 30px rgba(255, 126, 95, 0.25)' },
-  'btn-starlight': 'btn-base theme-starlight h-12 px-6',
-  'btn-secondary': 'btn-base theme-glass-dark h-12 px-6 border-white/15',
-  'input-starlight': 'input-base theme-glass-dark h-12 px-4 border-white/15',
-  'textarea-starlight': 'input-base theme-glass-dark p-4 min-h-32 border-white/15',
-  'checkbox-starlight': 'btn-base theme-glass-dark w-5 h-5 border-white/20',
-  'search-container': 'relative block w-full',
-    'search-input': 'pl-12 w-full',
-    'search-icon': 'absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none z-10 w-5 h-5',
+  'focus-glow': {
+    property: ['outline', 'box-shadow'],
+    value: ['none !important', '0 0 0 4px rgba(0, 212, 255, 0.4), 0 0 35px rgba(0, 212, 255, 0.7) !important'],
+    variant: 'focus'
+  },
+  'btn-starlight': 'btn-base theme-starlight px-6',
+  'btn-secondary': 'btn-base theme-glass-dark px-6 border-white_15',
+  'input-starlight': 'input-base theme-glass-dark px-4 border-white_15',
+  'textarea-starlight': 'input-base theme-glass-dark p-4 min-h-32 border-white_15',
+  'checkbox-starlight': 'btn-base theme-glass-dark w-5 h-5 border-white_20',
+  'search-container': 'relative block w-full h-12',
+    'search-input': 'pl-12 w-full h-12',
+    'search-icon': 'absolute left-4 top-1_2 -translate-y-1_2 pointer-events-none z-10 w-5 h-5',
     'nav-glass': 'nav-base theme-glass-dark',
     'starlight-card': 'card-base theme-glass-dark',
+    'starlight-card-interactive': 'card-base theme-glass-dark hover:border-white_20 hover:-translate-y-1 transition-all duration-300',
     'starlight-nav': 'nav-base theme-glass-dark w-full',
+    'starlight-navbar': 'nav-base theme-glass-dark w-full sticky top-0 z-50 border-b border-white_10',
+    'starlight-hero': 'container mx-auto px-6 py-16 md:py-24 text-center relative overflow-hidden',
+    'starlight-footer': 'border-t border-white_10 py-12 mt-20 bg-black_20 backdrop-blur-md',
+    'starlight-sidebar-nav': 'flex flex-col h-full p-6 bg-black_40 backdrop-blur-xl border-r border-white_10',
+    'nav-reverse': { property: 'flex-direction', value: 'row-reverse' },
+    'nav-center': { property: 'display', value: 'grid' },
+    'hamburger-left': { property: 'order', value: '-1' },
     'starlight-search': 'search-container theme-glass-dark rounded-xl',
     'starlight-dashboard': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
     'starlight-gallery': 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
-    'starlight-form': 'starlight-card grid grid-cols-1 md:grid-cols-2 gap-8 items-start',
-    'starlight-dialog': 'dialog-base modal-fixed theme-glass-dark ani-scale-in'
+    'starlight-form': 'card-base theme-glass-dark grid grid-cols-1 md:grid-cols-2 gap-8 items-start',
+    'starlight-dialog': 'dialog-base modal-fixed theme-glass-dark starlight-dialog-bg ani-scale-in'
   };
   
   module.exports = { defaultTheme, utilityMaps };