npm - @stacksjs/defaults - Versions diffs - 0.70.54 - Mend

@stacksjs/defaults 0.70.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (286) hide show

package/resources/views/index.stx ADDED Viewed

@@ -0,0 +1,2865 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Stacks.js - Coming Soon</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Tahoma:wght@400;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/assets/styles/main.css">
+  <style>
+    /* Submenu positioning handled in CSS file */
+  </style>
+</head>
+<body>
+  <!-- Windows XP Login Screen -->
+  <div id="login-screen" class="hidden login-screen">
+    <div class="login-background">
+      <div class="login-container">
+        <button class="login-close-btn" onclick="closeLoginScreens()">×</button>
+        <div class="login-header">
+          <div class="login-logo">STACKS</div>
+          <div class="login-subtitle">To begin, click your user name</div>
+        </div>
+        <div class="login-users">
+          <button class="login-user-button" id="email-login-btn">
+            <div class="login-user-icon">👤</div>
+            <div class="login-user-name">Email Login</div>
+          </button>
+          <button class="login-user-button" id="license-login-btn">
+            <div class="login-user-icon">🔑</div>
+            <div class="login-user-name">License Key</div>
+          </button>
+        </div>
+        <div class="login-footer">
+          <div class="login-footer-text">After you log in, you can access the STACKS Desktop</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Email/Password Login Form -->
+  <div id="email-login-form" class="hidden login-form">
+    <div class="login-form-background">
+      <div class="login-form-container">
+        <button class="login-close-btn" onclick="closeLoginScreens()">×</button>
+        <div class="login-form-header">
+          <button class="login-back-button" onclick="hideLoginForms()">← Back</button>
+          <div class="login-form-title">
+            <div class="login-form-icon">👤</div>
+            <h2>Email Login</h2>
+          </div>
+        </div>
+        <div class="login-form-content">
+          <div class="login-form-prompt">Type your email and password</div>
+          <div class="login-input-group">
+            <label>Email:</label>
+            <input type="email" id="email-input" class="login-input" placeholder="user@example.com">
+          </div>
+          <div class="login-input-group">
+            <label>Password:</label>
+            <input type="password" id="password-input" class="login-input" placeholder="Enter your password">
+          </div>
+          <div class="login-actions">
+            <button class="login-submit-btn" onclick="handleEmailLogin()">
+              <span class="login-btn-icon">→</span>
+              <span>Log In</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- License Key Login Form -->
+  <div id="license-login-form" class="hidden login-form">
+    <div class="login-form-background">
+      <div class="login-form-container">
+        <button class="login-close-btn" onclick="closeLoginScreens()">×</button>
+        <div class="login-form-header">
+          <button class="login-back-button" onclick="hideLoginForms()">← Back</button>
+          <div class="login-form-title">
+            <div class="login-form-icon">🔑</div>
+            <h2>License Key Login</h2>
+          </div>
+        </div>
+        <div class="login-form-content">
+          <div class="login-form-prompt">Enter your STACKS license key</div>
+          <div class="login-input-group">
+            <label>License Key:</label>
+            <input type="text" id="license-input" class="login-input" placeholder="XXXX-XXXX-XXXX-XXXX">
+          </div>
+          <div class="login-actions">
+            <button class="login-submit-btn" onclick="handleLicenseLogin()">
+              <span class="login-btn-icon">→</span>
+              <span>Log In</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="desktop">
+    <!-- Desktop Icons -->
+    <div class="desktop-icons">
+        <button
+          class="desktop-icon"
+          data-icon-id="welcome"
+          data-icon-type="window"
+          data-icon-section="welcome"
+          data-icon-url=""
+          style="left: 20px; top: 20px;"
+        >
+          <div class="desktop-icon-image">📃</div>
+          <div class="desktop-icon-label">Welcome.pdf</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="about"
+          data-icon-type="window"
+          data-icon-section="about"
+          data-icon-url=""
+          style="left: 140px; top: 20px;"
+        >
+          <div class="desktop-icon-image">📄</div>
+          <div class="desktop-icon-label">About</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="ecosystem"
+          data-icon-type="window"
+          data-icon-section="ecosystem"
+          data-icon-url=""
+          style="left: 260px; top: 20px;"
+        >
+          <div class="desktop-icon-image">🌐</div>
+          <div class="desktop-icon-label">Ecosystem</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="backend"
+          data-icon-type="window"
+          data-icon-section="backend"
+          data-icon-url=""
+          style="left: 380px; top: 20px;"
+        >
+          <div class="desktop-icon-image">⚙️</div>
+          <div class="desktop-icon-label">Backend</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="frontend"
+          data-icon-type="window"
+          data-icon-section="frontend"
+          data-icon-url=""
+          style="left: 500px; top: 20px;"
+        >
+          <div class="desktop-icon-image">🎨</div>
+          <div class="desktop-icon-label">Frontend</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="cloud"
+          data-icon-type="window"
+          data-icon-section="cloud"
+          data-icon-url=""
+          style="left: 620px; top: 20px;"
+        >
+          <div class="desktop-icon-image">☁️</div>
+          <div class="desktop-icon-label">Cloud</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="dashboard"
+          data-icon-type="window"
+          data-icon-section="dashboard"
+          data-icon-url=""
+          style="left: 20px; top: 140px;"
+        >
+          <div class="desktop-icon-image">📊</div>
+          <div class="desktop-icon-label">Dashboard</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="license"
+          data-icon-type="window"
+          data-icon-section="license"
+          data-icon-url=""
+          style="left: 140px; top: 140px;"
+        >
+          <div class="desktop-icon-image">🔑</div>
+          <div class="desktop-icon-label">License</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="login"
+          data-icon-type="action"
+          data-icon-section=""
+          data-icon-url=""
+          onclick="showLoginScreen()"
+          style="left: 260px; top: 140px;"
+        >
+          <div class="desktop-icon-image">🔐</div>
+          <div class="desktop-icon-label">Login</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="benchmarks"
+          data-icon-type="window"
+          data-icon-section="benchmarks"
+          data-icon-url=""
+          style="left: 380px; top: 140px;"
+        >
+          <div class="desktop-icon-image">📁</div>
+          <div class="desktop-icon-label">Benchmarks</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="libraries"
+          data-icon-type="window"
+          data-icon-section="libraries"
+          data-icon-url=""
+          style="left: 500px; top: 140px;"
+        >
+          <div class="desktop-icon-image">📁</div>
+          <div class="desktop-icon-label">Libraries & CLIs</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="plugins"
+          data-icon-type="window"
+          data-icon-section="plugins"
+          data-icon-url=""
+          style="left: 620px; top: 140px;"
+        >
+          <div class="desktop-icon-image">📁</div>
+          <div class="desktop-icon-label">Plugins & Actions</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="templates"
+          data-icon-type="window"
+          data-icon-section="templates"
+          data-icon-url=""
+          style="left: 20px; top: 260px;"
+        >
+          <div class="desktop-icon-image">📁</div>
+          <div class="desktop-icon-label">Templates</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="docs"
+          data-icon-type="link"
+          data-icon-section=""
+          data-icon-url="https://stacksjs.com/docs"
+          style="left: 140px; top: 260px;"
+        >
+          <div class="desktop-icon-image">📚</div>
+          <div class="desktop-icon-label">Documentation</div>
+        </button>
+                <button
+          class="desktop-icon"
+          data-icon-id="blog"
+          data-icon-type="window"
+          data-icon-section="blog"
+          data-icon-url=""
+          style="left: 260px; top: 260px;"
+        >
+          <div class="desktop-icon-image">📝</div>
+          <div class="desktop-icon-label">Blog</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="github"
+          data-icon-type="link"
+          data-icon-section=""
+          data-icon-url="https://github.com/stacksjs/stacks"
+          style="left: 380px; top: 260px;"
+        >
+          <div class="desktop-icon-image">💻</div>
+          <div class="desktop-icon-label">GitHub</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="sponsors"
+          data-icon-type="window"
+          data-icon-section="sponsors"
+          data-icon-url=""
+          style="left: 500px; top: 260px;"
+        >
+          <div class="desktop-icon-image">💖</div>
+          <div class="desktop-icon-label">Sponsors</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="discord"
+          data-icon-type="link"
+          data-icon-section=""
+          data-icon-url="https://discord.gg/stacksjs"
+          style="left: 620px; top: 260px;"
+        >
+          <div class="desktop-icon-image">💬</div>
+          <div class="desktop-icon-label">Discord</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="whitepaper"
+          data-icon-type="link"
+          data-icon-section=""
+          data-icon-url="https://github.com/stacksjs/white-paper"
+          style="left: 20px; top: 380px;"
+        >
+          <div class="desktop-icon-image">📄</div>
+          <div class="desktop-icon-label">White Paper</div>
+        </button>
+        <button
+          class="desktop-icon"
+          data-icon-id="contact"
+          data-icon-type="window"
+          data-icon-section="contact"
+          data-icon-url=""
+          style="left: 140px; top: 380px;"
+        >
+          <div class="desktop-icon-image">📫</div>
+          <div class="desktop-icon-label">Contact</div>
+        </button>
+    </div>
+    <!-- Sponsor Ad Space -->
+    <button
+      id="sponsor-icon"
+      class="desktop-icon"
+      data-icon-id="sponsor"
+      data-icon-type="link"
+      data-icon-section=""
+      data-icon-url="https://github.com/sponsors/stacksjs"
+    >
+      <div class="desktop-icon-image" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,0.3); border: 2px solid rgba(255,255,255,0.2); font-size: 28px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;">
+        🏢
+      </div>
+      <div class="desktop-icon-label" style="white-space: pre-line; line-height: 1.2; font-size: 10px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);">Your Brand
+Sponsor Here</div>
+    </button>
+    <!-- Trash Bin -->
+    <button
+      id="trash-icon"
+      class="desktop-icon"
+      data-icon-id="trash"
+      data-icon-type="window"
+      data-icon-section="trash"
+      data-icon-url=""
+    >
+      <div class="desktop-icon-image">🗑️</div>
+      <div class="desktop-icon-label">Recycle Bin</div>
+    </button>
+    <!-- Windows -->
+    <div id="window-about" class="window" style="left: 100px; top: 80px; width: 600px; height: 500px;">
+      <div class="window-titlebar">
+        <div class="window-icon">📄</div>
+        <div class="window-title">About Stacks</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('about')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('about')">□</button>
+          <button class="close window-control" onclick="closeWindow('about')">×</button>
+        </div>
+      </div>
+      <div class="window-content">
+        <h2>STACKS.JS</h2>
+        <h3>Rapid Development Framework</h3>
+        <p>
+          A TypeScript framework for building modern web applications, APIs, and cloud infrastructure.
+        </p>
+        <p>
+          Stacks provides an elegant, opinionated solution for common development needs with a focus on
+          developer experience and productivity.
+        </p>
+        <p>
+          Built on <strong>Bun</strong>, <strong>TypeScript</strong>, and <strong>Tauri</strong>.
+        </p>
+        <div style="margin-top: 24px; padding: 12px; background: #fffacd; border: 2px solid #ffd700;">
+          <p style="margin: 0; font-weight: bold;">✨ Convention over configuration, while staying wholly configurable</p>
+        </div>
+      </div>
+    </div>
+    <div id="window-ecosystem" class="window" style="left: 150px; top: 100px; width: 850px; height: 650px;">
+      <div class="window-titlebar">
+        <div class="window-icon">🌐</div>
+        <div class="window-title">Ecosystem</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('ecosystem')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('ecosystem')">□</button>
+          <button class="close window-control" onclick="closeWindow('ecosystem')">×</button>
+        </div>
+      </div>
+      <div class="window-content">
+        <h2>Ecosystem</h2>
+        <p style="margin-bottom: 20px;">The complete Stacks.js ecosystem—all open source, all TypeScript.</p>
+        <div class="feature-buttons" style="margin-bottom: 20px;">
+          <button class="active feature-btn" onclick="showEcosystemTab('core')">Core Packages</button>
+          <button class="feature-btn" onclick="showEcosystemTab('frameworks')">Frameworks</button>
+          <button class="feature-btn" onclick="showEcosystemTab('sponsorware')">Sponsorware</button>
+          <button class="feature-btn" onclick="showEcosystemTab('apps')">Apps</button>
+        </div>
+        <div id="ecosystem-tab-content" style="max-height: 450px; overflow-y: auto;">
+          <div id="tab-core" class="ecosystem-tab">
+            <h3>Core Packages</h3>
+            <div class="package-grid">
+    <div class="package-item">
+      <div class="package-emoji">🤖</div>
+      <div class="package-title">AI</div>
+      <div class="package-desc">Deep AI integrations for agentic workflows</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">🔌</div>
+      <div class="package-title">API</div>
+      <div class="package-desc">Build scalable REST APIs</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">🔐</div>
+      <div class="package-title">Auth</div>
+      <div class="package-desc">Authentication and authorization</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">⚡</div>
+      <div class="package-title">Cache</div>
+      <div class="package-desc">Multi-driver caching system</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">⌨️</div>
+      <div class="package-title">CLI</div>
+      <div class="package-desc">Beautiful command-line interfaces</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">☁️</div>
+      <div class="package-title">Cloud</div>
+      <div class="package-desc">Cloud infrastructure management</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">🗄️</div>
+      <div class="package-title">Database</div>
+      <div class="package-desc">Database connections & migrations</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">🗺️</div>
+      <div class="package-title">ORM</div>
+      <div class="package-desc">Elegant object-relational mapper</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">🧭</div>
+      <div class="package-title">Router</div>
+      <div class="package-desc">Fast & flexible routing</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">✅</div>
+      <div class="package-title">Validation</div>
+      <div class="package-desc">Type-safe validation</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">📬</div>
+      <div class="package-title">Queue</div>
+      <div class="package-desc">Background job processing</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">💾</div>
+      <div class="package-title">Storage</div>
+      <div class="package-desc">File storage abstraction</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">📫</div>
+      <div class="package-title">Email</div>
+      <div class="package-desc">Send emails with ease</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">📡</div>
+      <div class="package-title">Events</div>
+      <div class="package-desc">Event-driven architecture</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">🔔</div>
+      <div class="package-title">Notifications</div>
+      <div class="package-desc">Multi-channel notifications</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">🧪</div>
+      <div class="package-title">Testing</div>
+      <div class="package-desc">Testing utilities & helpers</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">🔍</div>
+      <div class="package-title">Search Engine</div>
+      <div class="package-desc">Full-text search capabilities</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">⚡</div>
+      <div class="package-title">Realtime</div>
+      <div class="package-desc">WebSocket & real-time features</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">🔬</div>
+      <div class="package-title">X-Ray</div>
+      <div class="package-desc">Debugging & monitoring tools</div>
+    </div>
+    <div class="package-item">
+      <div class="package-emoji">💳</div>
+      <div class="package-title">Payments</div>
+      <div class="package-desc">Payment processing integration</div>
+    </div>
+  </div>
+          </div>
+          <div id="tab-frameworks" class="ecosystem-tab" style="display: none;">
+            <h3 style="color: #0831d9; margin-bottom: 12px;">Frameworks</h3>
+            <p style="margin-bottom: 16px; color: #333;">Powerful frameworks for modern development.</p>
+            <div class="folder-list">
+                <a href="https://github.com/stacksjs/bunpress" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">🏗️</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">BunPress</div>
+                    <div class="folder-item-desc">Modern documentation-needs covered. Coming soon.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/stacksjs/clapp" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">🏗️</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">Clapp</div>
+                    <div class="folder-item-desc">A modern framework to build powerful & pretty CLI apps.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/cwcss/crosswind" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">🏗️</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">Crosswind</div>
+                    <div class="folder-item-desc">A Tailwind-like utility-first CSS framework. Powered by Bun.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/stacksjs/launchpad" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">🏗️</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">Launchpad</div>
+                    <div class="folder-item-desc">Performant system & project dependency management. Similar to Homebrew, just faster.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/stacksjs/stacks" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">🏗️</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">Stacks</div>
+                    <div class="folder-item-desc">Develop powerful apps, clouds & framework-agnostic libraries—faster.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/stacksjs/stx" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">🏗️</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">stx</div>
+                    <div class="folder-item-desc">A fast & powerful UI framework. Templating inspired by Laravel Blade & Vue.</div>
+                  </div>
+                </a>
+            </div>
+          </div>
+          <div id="tab-sponsorware" class="ecosystem-tab" style="display: none;">
+            <h3 style="color: #0831d9; margin-bottom: 12px;">Sponsorware</h3>
+            <p style="margin-bottom: 16px; color: #333;">Premium tools & services for sponsors.</p>
+            <div class="folder-list">
+                <a href="https://github.com/stacksjs/bun-queue" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">💎</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">bun-queue</div>
+                    <div class="folder-item-desc">A modern & powerful Queue / Messaging system. Optimized for Bun.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/stacksjs/bun-router" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">💎</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">bun-router</div>
+                    <div class="folder-item-desc">Powerful routing. High-performance, feature-rich.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/stacksjs/stacks" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">💎</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">Stacks Dashboard</div>
+                    <div class="folder-item-desc">The Stacks Dashboard. For developers, and their clients.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/stacksjs/stacks" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">💎</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">Stacks ORM - DynamoDB</div>
+                    <div class="folder-item-desc">More than a driver—automated Single Table Design. Cheap, fast, endless scalability.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/stacksjs/stacks" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">💎</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">Stacks Raycast</div>
+                    <div class="folder-item-desc">Stacks (and Buddy) integrated into Raycast.</div>
+                  </div>
+                </a>
+            </div>
+          </div>
+          <div id="tab-apps" class="ecosystem-tab" style="display: none;">
+            <h3 style="color: #0831d9; margin-bottom: 12px;">Apps</h3>
+            <p style="margin-bottom: 16px; color: #333;">Useful macOS utilities built with Stacks.</p>
+            <div class="folder-list">
+                <a href="https://github.com/stacksjs/barista" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">📱</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">Barista</div>
+                    <div class="folder-item-desc">A lightweight macOS utility that serves up a perfectly organized menubar.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/stacksjs/hush" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">📱</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">Hush</div>
+                    <div class="folder-item-desc">Lightweight macOS utility that ensures notifications are suppressed during meetings.</div>
+                  </div>
+                </a>
+                <a href="https://github.com/stacksjs/pomodoro" target="_blank" class="folder-item">
+                  <div class="folder-item-icon">📱</div>
+                  <div class="folder-item-content">
+                    <div class="folder-item-name">Pomodoro</div>
+                    <div class="folder-item-desc">Minimal, functional, yet simple Pomodoro menubar app, to help stay focussed. For Mac.</div>
+                  </div>
+                </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="window-backend" class="window" style="left: 200px; top: 120px; width: 700px; height: 550px;">
+      <div class="window-titlebar">
+        <div class="window-icon">⚙️</div>
+        <div class="window-title">Backend Features</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('backend')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('backend')">□</button>
+          <button class="close window-control" onclick="closeWindow('backend')">×</button>
+        </div>
+      </div>
+      <div class="window-content">
+        <h2>Backend</h2>
+        <p>Simple, elegant syntax powers amazing functionality.</p>
+        <div class="feature-buttons">
+          <button class="active feature-btn" onclick="showFeature('backend', 'auth')">Authentication</button>
+          <button class="feature-btn" onclick="showFeature('backend', 'orm')">ORM</button>
+          <button class="feature-btn" onclick="showFeature('backend', 'validation')">Validation</button>
+          <button class="feature-btn" onclick="showFeature('backend', 'storage')">Storage</button>
+          <button class="feature-btn" onclick="showFeature('backend', 'queue')">Queues</button>
+          <button class="feature-btn" onclick="showFeature('backend', 'events')">Events</button>
+        </div>
+        <div id="backend-feature-content">
+          <h3>Authentication</h3>
+          <div class="code-display">
+import { Auth } from '@stacksjs/auth'
+// Login user
+const user = await Auth.attempt({
+  email: 'user@example.com',
+  password: 'secret'
+}
+// Get authenticated user
+const current = await Auth.user()
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="window-frontend" class="window" style="left: 250px; top: 140px; width: 700px; height: 550px;">
+      <div class="window-titlebar">
+        <div class="window-icon">🎨</div>
+        <div class="window-title">Frontend Features</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('frontend')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('frontend')">□</button>
+          <button class="close window-control" onclick="closeWindow('frontend')">×</button>
+        </div>
+      </div>
+      <div class="window-content">
+        <h2>Frontend</h2>
+        <p>Develop dynamic UIs with helpers for atomic design, and much more.</p>
+        <p style="color: #333; font-size: 12px;">⚡️ Powered by TypeScript, Bun & Tauri</p>
+        <div class="feature-buttons">
+          <button class="active feature-btn" onclick="showFeature('frontend', 'components')">Components</button>
+          <button class="feature-btn" onclick="showFeature('frontend', 'ui-kit')">UI Kit</button>
+          <button class="feature-btn" onclick="showFeature('frontend', 'routing')">Routing</button>
+          <button class="feature-btn" onclick="showFeature('frontend', 'desktop')">Desktop</button>
+        </div>
+        <div id="frontend-feature-content">
+          <h3>Components</h3>
+          <div class="code-display">
+&lt;template&gt;
+  &lt;Card title="Hello"&gt;
+    &lt;p&gt;Reusable components&lt;/p&gt;
+  &lt;/Card&gt;
+&lt;/template&gt;
+&lt;script setup&gt;
+// Auto-imported
+&lt;/script&gt;
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="window-cloud" class="window" style="left: 300px; top: 160px; width: 700px; height: 550px;">
+      <div class="window-titlebar">
+        <div class="window-icon">☁️</div>
+        <div class="window-title">Cloud Features</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('cloud')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('cloud')">□</button>
+          <button class="close window-control" onclick="closeWindow('cloud')">×</button>
+        </div>
+      </div>
+      <div class="window-content">
+        <h2>Cloud</h2>
+        <p>Develop & maintain cloud infrastructure with ease.</p>
+        <p style="color: #333; font-size: 12px;">Imagine Vercel, Vapor and Forge having been unified.</p>
+        <div class="feature-buttons">
+          <button class="active feature-btn" onclick="showFeature('cloud', 'deployment')">Deployment</button>
+          <button class="feature-btn" onclick="showFeature('cloud', 'storage')">Storage</button>
+          <button class="feature-btn" onclick="showFeature('cloud', 'cdn')">CDN</button>
+          <button class="feature-btn" onclick="showFeature('cloud', 'dns')">DNS</button>
+        </div>
+        <div id="cloud-feature-content">
+          <h3>Deployment</h3>
+          <div class="code-display">
+export default {
+  provider: 'aws',
+  region: 'us-east-1',
+  compute: {
+    type: 'serverless',
+    memory: 1024
+  }
+}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="window-dashboard" class="window" style="left: 350px; top: 180px; width: 600px; height: 400px;">
+      <div class="window-titlebar">
+        <div class="window-icon">📊</div>
+        <div class="window-title">Dashboard</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('dashboard')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('dashboard')">□</button>
+          <button class="close window-control" onclick="closeWindow('dashboard')">×</button>
+        </div>
+      </div>
+      <div class="window-content">
+        <h2>Dashboard</h2>
+        <div style="margin-top: 40px; text-align: center;">
+          <div style="font-size: 64px; margin-bottom: 20px;">🚧</div>
+          <h3 style="color: #0831d9; margin-bottom: 12px;">Work in Progress</h3>
+          <p style="color: #333;">The Stacks Dashboard is currently under development.</p>
+          <p style="color: #333; margin-top: 8px;">Check back soon for exciting new features!</p>
+          <div style="margin-top: 32px; padding: 16px; background: #fffacd; border: 2px solid #ffd700; border-radius: 4px; display: inline-block;">
+            <p style="margin: 0; font-weight: bold; color: #333;">💡 Coming Soon: Real-time metrics, analytics, and insights</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="window-welcome" class="active window" style="left: 150px; top: 100px; width: 700px; height: 600px; z-index: 101;">
+      <div class="window-titlebar">
+        <div class="window-icon">📃</div>
+        <div class="window-title">Welcome.pdf - PDF Viewer</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('welcome')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('welcome')">□</button>
+          <button class="close window-control" onclick="closeWindow('welcome')">×</button>
+        </div>
+      </div>
+      <div class="window-content" style="background: #525659; padding: 0;">
+        <div style="background: #323639; padding: 8px 12px; border-bottom: 1px solid #222; display: flex; gap: 8px; align-items: center;">
+          <button onclick="printWelcome()" style="padding: 4px 12px; background: #3c3f41; border: 1px solid #555; color: #ccc; font-size: 11px; cursor: pointer;">Print</button>
+          <button onclick="downloadWelcome()" style="padding: 4px 12px; background: #3c3f41; border: 1px solid #555; color: #ccc; font-size: 11px; cursor: pointer;">Download</button>
+          <div style="flex: 1;"></div>
+          <span style="color: #ccc; font-size: 11px;">Page 1 of 1</span>
+          <div style="display: flex; align-items: center; gap: 4px;">
+            <button onclick="decreaseZoom()" style="padding: 4px 10px; background: #3c3f41; border: 1px solid #555; color: #ccc; font-size: 14px; cursor: pointer; font-weight: bold;">−</button>
+            <input id="zoom-level" type="number" min="25" max="400" step="25" value="100" onchange="setZoomFromInput()" style="width: 60px; padding: 4px 6px; background: #3c3f41; border: 1px solid #555; color: #ccc; font-size: 11px; text-align: center;">
+            <button onclick="increaseZoom()" style="padding: 4px 10px; background: #3c3f41; border: 1px solid #555; color: #ccc; font-size: 14px; cursor: pointer; font-weight: bold;">+</button>
+          </div>
+        </div>
+        <div id="welcome-pdf-content" style="background: white; margin: 20px auto; width: 90%; min-height: 500px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); padding: 40px 50px; transition: transform 0.2s ease;">
+          <div style="text-align: center; margin-bottom: 40px;">
+            <h1 style="color: #0831d9; font-size: 48px; margin: 0 0 10px 0; font-weight: bold;">STACKS.JS</h1>
+            <p style="color: #333; font-size: 18px; margin: 0;">The TypeScript Framework for Modern Development</p>
+            <p style="color: #4a4a4a; font-size: 14px; margin: 8px 0 0 0;">Version 1.0 • October 2025</p>
+          </div>
+          <div style="background: linear-gradient(135deg, #0831d9 0%, #245edb 100%); color: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; text-align: center;">
+            <h2 style="margin: 0 0 16px 0; font-size: 28px; font-weight: bold; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">Lightning Fast Performance</h2>
+            <p style="margin: 0 0 20px 0; font-size: 16px; font-weight: 500; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.2);">Built on Bun, the fastest JavaScript runtime</p>
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px;">
+              <div style="background: rgba(255,255,255,0.15); padding: 20px; border-radius: 6px; backdrop-filter: blur(10px);">
+                <div style="font-size: 36px; font-weight: bold; margin-bottom: 8px;">4.2x</div>
+                <div style="font-size: 13px; opacity: 0.9;">Faster than Next.js</div>
+                <div style="font-size: 11px; opacity: 0.7; margin-top: 4px;">Server startup time</div>
+              </div>
+              <div style="background: rgba(255,255,255,0.15); padding: 20px; border-radius: 6px; backdrop-filter: blur(10px);">
+                <div style="font-size: 36px; font-weight: bold; margin-bottom: 8px;">8.1x</div>
+                <div style="font-size: 13px; opacity: 0.9;">Faster than Express</div>
+                <div style="font-size: 11px; opacity: 0.7; margin-top: 4px;">Request throughput</div>
+              </div>
+              <div style="background: rgba(255,255,255,0.15); padding: 20px; border-radius: 6px; backdrop-filter: blur(10px);">
+                <div style="font-size: 36px; font-weight: bold; margin-bottom: 8px;">15x</div>
+                <div style="font-size: 13px; opacity: 0.9;">Faster than Laravel</div>
+                <div style="font-size: 11px; opacity: 0.7; margin-top: 4px;">Cold start time</div>
+              </div>
+            </div>
+          </div>
+          <h3 style="color: #0831d9; font-size: 24px; margin: 30px 0 16px 0; border-bottom: 2px solid #0831d9; padding-bottom: 8px;">What is Stacks?</h3>
+          <p style="line-height: 1.8; color: #333; margin-bottom: 16px;">
+            Stacks is a rapid development framework that enables you to build modern web applications, APIs, and cloud infrastructure with TypeScript.
+            It provides an elegant, opinionated solution for common development needs while maintaining complete configurability.
+          </p>
+          <h3 style="color: #0831d9; font-size: 24px; margin: 30px 0 16px 0; border-bottom: 2px solid #0831d9; padding-bottom: 8px;">Key Features</h3>
+          <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px;">
+            <div style="display: flex; align-items: start; gap: 12px;">
+              <span style="font-size: 24px;">⚡</span>
+              <div>
+                <strong style="color: #0831d9; display: block; margin-bottom: 4px;">Ultra-Fast Runtime</strong>
+                <span style="font-size: 13px; color: #333;">Built on Bun for maximum performance</span>
+              </div>
+            </div>
+            <div style="display: flex; align-items: start; gap: 12px;">
+              <span style="font-size: 24px;">🎯</span>
+              <div>
+                <strong style="color: #0831d9; display: block; margin-bottom: 4px;">Type-Safe Everything</strong>
+                <span style="font-size: 13px; color: #333;">Full TypeScript support throughout</span>
+              </div>
+            </div>
+            <div style="display: flex; align-items: start; gap: 12px;">
+              <span style="font-size: 24px;">🔋</span>
+              <div>
+                <strong style="color: #0831d9; display: block; margin-bottom: 4px;">Batteries Included</strong>
+                <span style="font-size: 13px; color: #333;">ORM, Auth, Queue, Cache, and more</span>
+              </div>
+            </div>
+            <div style="display: flex; align-items: start; gap: 12px;">
+              <span style="font-size: 24px;">🖥️</span>
+              <div>
+                <strong style="color: #0831d9; display: block; margin-bottom: 4px;">Cross-Platform</strong>
+                <span style="font-size: 13px; color: #333;">Web, Desktop & Mobile from one codebase</span>
+              </div>
+            </div>
+          </div>
+          <div style="background: #fffacd; border-left: 4px solid #ffd700; padding: 16px 20px; margin: 24px 0;">
+            <strong style="color: #333; display: block; margin-bottom: 8px;">🚀 Quick Start</strong>
+            <code style="display: block; background: #fff; padding: 12px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 13px; color: #0831d9; margin-top: 8px;">
+              bunx stacks new my-project
+            </code>
+          </div>
+          <div style="margin: 40px 0 30px 0;">
+            <h2 style="text-align: center; color: #0831d9; font-size: 32px; margin: 0 0 8px 0;">Pricing</h2>
+            <p style="text-align: center; color: #333; font-size: 16px; margin: 0 0 24px 0;">
+              <strong style="background: linear-gradient(135deg, #5eac56 0%, #3c873c 100%); color: white; padding: 4px 12px; border-radius: 4px;">🎉 Early Bird Special</strong>
+            </p>
+            <p style="text-align: center; color: #666; font-size: 13px; margin: 0 0 32px 0;">
+              We follow <strong>Big Mac Index Pricing</strong> – Fair pricing for everyone, everywhere
+            </p>
+            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 700px; margin: 0 auto;">
+              <!-- Hobby Edition -->
+              <div onclick="selectPlan('hobby')" style="border: 2px solid #0831d9; border-radius: 8px; padding: 24px; background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 12px rgba(8,49,217,0.2)'" onmouseout="this.style.transform=''; this.style.boxShadow=''">
+                <h3 style="color: #0831d9; font-size: 24px; margin: 0 0 8px 0; text-align: center;">💡 Hobby Edition</h3>
+                <p style="text-align: center; color: #666; font-size: 12px; margin: 0 0 20px 0;">Perfect for personal projects</p>
+                <div style="background: #e8f4f8; padding: 16px; border-radius: 6px; text-align: center; border: 2px solid #0831d9;">
+                  <div style="font-size: 28px; font-weight: bold; color: #0831d9; margin-bottom: 8px;">$9<span style="font-size: 16px; font-weight: normal;">/mo</span></div>
+                  <div style="font-size: 14px; color: #333; margin-bottom: 12px;">or</div>
+                  <div style="font-size: 24px; font-weight: bold; color: #0831d9;">$179<span style="font-size: 14px; font-weight: normal; color: #666;"> lifetime</span></div>
+                </div>
+                <p style="text-align: center; margin-top: 16px; font-size: 11px; color: #0831d9; font-weight: bold;">Click to purchase →</p>
+              </div>
+              <!-- Professional Edition -->
+              <div onclick="selectPlan('professional')" style="border: 3px solid #0831d9; border-radius: 8px; padding: 24px; background: linear-gradient(to bottom, #f0f7ff 0%, #e6f2ff 100%); position: relative; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 12px rgba(8,49,217,0.3)'" onmouseout="this.style.transform=''; this.style.boxShadow=''">
+                <div style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #0831d9 0%, #245edb 100%); color: white; padding: 4px 16px; border-radius: 12px; font-size: 11px; font-weight: bold;">POPULAR</div>
+                <h3 style="color: #0831d9; font-size: 24px; margin: 8px 0 8px 0; text-align: center;">🚀 Professional Edition</h3>
+                <p style="text-align: center; color: #666; font-size: 12px; margin: 0 0 20px 0;">For professionals & teams</p>
+                <div style="background: #e8f4f8; padding: 16px; border-radius: 6px; text-align: center; border: 2px solid #0831d9;">
+                  <div style="font-size: 28px; font-weight: bold; color: #0831d9; margin-bottom: 8px;">$29<span style="font-size: 16px; font-weight: normal;">/mo</span></div>
+                  <div style="font-size: 14px; color: #333; margin-bottom: 12px;">or</div>
+                  <div style="font-size: 24px; font-weight: bold; color: #0831d9;">$279<span style="font-size: 14px; font-weight: normal; color: #666;"> lifetime</span></div>
+                </div>
+                <p style="text-align: center; margin-top: 16px; font-size: 11px; color: #0831d9; font-weight: bold;">Click to purchase →</p>
+              </div>
+            </div>
+            <p style="text-align: center; color: #666; font-size: 11px; margin-top: 16px; font-style: italic;">
+              💳 All prices in USD. Prices may vary based on your location using Big Mac Index for fair global pricing.
+            </p>
+          </div>
+          <div style="text-align: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid #ddd;">
+            <p style="color: #333; font-size: 12px; margin-bottom: 8px;">Learn more at <strong style="color: #0831d9;">stacksjs.com</strong></p>
+            <p style="color: #4a4a4a; font-size: 11px;">© 2025 Stacks. Open source under MIT License.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="window-license" class="window" style="left: 400px; top: 180px; width: 520px; height: 600px;">
+      <div class="window-titlebar">
+        <div class="window-icon">🔑</div>
+        <div class="window-title">Software License Registration</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('license')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('license')">□</button>
+          <button class="close window-control" onclick="closeLicenseWindow()">×</button>
+        </div>
+      </div>
+      <div class="window-content" style="background: #c0c0c0;">
+        <div style="background: white; padding: 20px; border: 2px inset #999; margin-bottom: 20px;">
+          <h2 style="text-align: center; color: #000080; margin: 0 0 10px 0; font-size: 20px;">STACKS.JS Professional Edition</h2>
+          <p style="text-align: center; color: #333; font-size: 11px; margin: 0;">Version 1.0 - Build 2025.1</p>
+        </div>
+        <div style="background: #ece9d8; padding: 16px; border: 2px groove #999; margin-bottom: 16px;">
+          <p style="margin: 0 0 12px 0; font-size: 12px; line-height: 1.6;">
+            Thank you for choosing STACKS.JS Professional Edition! To unlock all features and receive lifetime updates, please purchase a license code.
+          </p>
+          <div style="background: #fff; padding: 12px; border: 1px solid #808080; margin: 12px 0;">
+            <div style="display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px;">
+              <span style="font-weight: bold;">License Type:</span>
+              <span class="license-type">Professional Edition</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px;">
+              <span style="font-weight: bold;">Regular Monthly:</span>
+              <span style="color: #666; text-decoration: line-through;">$49/mo</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px;">
+              <span style="font-weight: bold;">Founding Member Price:</span>
+              <span class="license-price" style="color: #16a34a; font-weight: bold;">$29/mo or $279 lifetime</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; padding: 6px; background: #dcfce7; border-radius: 4px;">
+              <span style="font-weight: bold; color: #15803d;">💰 Monthly Savings:</span>
+              <span style="color: #15803d; font-weight: bold;">$20/mo (41% off) + Exclusive Lifetime Access</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; font-size: 13px;">
+              <span style="font-weight: bold;">Features:</span>
+              <span class="license-features" style="text-align: right;">Unlimited Team Members<br>Priority Support<br>Lifetime Updates</span>
+            </div>
+          </div>
+          <div style="background: #fffacd; border: 2px solid #ffd700; padding: 10px; margin: 12px 0; font-size: 11px;">
+            <strong>🎉 Founding Member Exclusive:</strong> This lifetime pricing is a <strong style="color: #dc2626;">once-in-a-lifetime offer</strong> and will never be available again after launch. Lock in your access now!
+          </div>
+        </div>
+        <div id="payment-section" style="background: #ece9d8; padding: 16px; border: 2px groove #999; margin-bottom: 16px;">
+          <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
+            <label style="font-weight: bold; font-size: 12px; margin: 0;">💳 Payment Information</label>
+            <button onclick="togglePaymentSection()" style="background: linear-gradient(to bottom, #ffffff 0%, #ece9d8 100%); border: 2px outset #999; padding: 2px 8px; font-size: 11px; cursor: pointer;">
+              Toggle
+            </button>
+          </div>
+          <div id="payment-form" style="display: block;">
+            <div style="background: #ece9d8; padding: 12px; border: 2px groove #999; margin-bottom: 16px;">
+              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+                <span style="font-weight: bold; font-size: 12px;">Selected Edition:</span>
+                <span class="license-type" style="color: #0831d9; font-weight: bold; font-size: 13px;">Professional Edition</span>
+              </div>
+              <div style="font-size: 11px; color: #666;">
+                The edition pricing will be reflected in your plan options below.
+              </div>
+            </div>
+            <div style="margin-bottom: 16px;">
+              <label style="display: block; margin-bottom: 8px; font-size: 11px; font-weight: bold;">Select Your Plan</label>
+              <div style="display: flex; flex-direction: column; gap: 8px;">
+                <label style="display: flex; align-items: center; padding: 10px; background: white; border: 2px solid #0831d9; border-radius: 4px; cursor: pointer;">
+                  <input type="radio" name="pricing-plan" value="lifetime" checked style="margin-right: 8px; width: 16px; height: 16px;" />
+                  <div style="flex: 1;">
+                    <div style="font-weight: bold; font-size: 13px; color: #0831d9;">🎉 Lifetime Access - $279</div>
+                    <div style="font-size: 11px; color: #666; margin-top: 2px;">Pay once, own forever. Exclusive founding member offer!</div>
+                  </div>
+                </label>
+                <label style="display: flex; align-items: center; padding: 10px; background: white; border: 2px solid #999; border-radius: 4px; cursor: pointer;">
+                  <input type="radio" name="pricing-plan" value="monthly" style="margin-right: 8px; width: 16px; height: 16px;" />
+                  <div style="flex: 1;">
+                    <div style="font-weight: bold; font-size: 13px;">Monthly Subscription - $29/mo</div>
+                    <div style="font-size: 11px; color: #666; margin-top: 2px;">Billed monthly. Cancel anytime.</div>
+                  </div>
+                </label>
+              </div>
+            </div>
+            <div style="margin-bottom: 12px;">
+              <label style="display: block; margin-bottom: 4px; font-size: 11px; font-weight: bold;">Card Number</label>
+              <input
+                type="text"
+                id="card-number"
+                placeholder="1234 5678 9012 3456"
+                maxlength="19"
+                style="width: 100%; padding: 6px; font-size: 13px; border: 2px inset #999; font-family: 'Courier New', monospace;"
+                oninput="formatCardNumber(this)"
+              />
+            </div>
+            <div style="display: flex; gap: 12px; margin-bottom: 12px;">
+              <div style="flex: 1;">
+                <label style="display: block; margin-bottom: 4px; font-size: 11px; font-weight: bold;">Expiration Date</label>
+                <input
+                  type="text"
+                  id="card-expiry"
+                  placeholder="MM/YY"
+                  maxlength="5"
+                  style="width: 100%; padding: 6px; font-size: 13px; border: 2px inset #999; font-family: 'Courier New', monospace;"
+                  oninput="formatExpiry(this)"
+                />
+              </div>
+              <div style="flex: 1;">
+                <label style="display: block; margin-bottom: 4px; font-size: 11px; font-weight: bold;">CVV</label>
+                <input
+                  type="text"
+                  id="card-cvv"
+                  placeholder="123"
+                  maxlength="4"
+                  style="width: 100%; padding: 6px; font-size: 13px; border: 2px inset #999; font-family: 'Courier New', monospace;"
+                  oninput="formatCVV(this)"
+                />
+              </div>
+            </div>
+            <div style="margin-bottom: 12px;">
+              <label style="display: block; margin-bottom: 4px; font-size: 11px; font-weight: bold;">Cardholder Name</label>
+              <input
+                type="text"
+                id="card-name"
+                placeholder="JOHN DOE"
+                style="width: 100%; padding: 6px; font-size: 13px; border: 2px inset #999; text-transform: uppercase;"
+              />
+            </div>
+            <div style="margin-bottom: 12px;">
+              <label style="display: block; margin-bottom: 4px; font-size: 11px; font-weight: bold;">Billing Email</label>
+              <input
+                type="email"
+                id="billing-email"
+                placeholder="john@example.com"
+                style="width: 100%; padding: 6px; font-size: 13px; border: 2px inset #999;"
+              />
+            </div>
+            <div style="display: flex; align-items: center; gap: 6px; margin-top: 12px; margin-bottom: 16px;">
+              <input type="checkbox" id="terms-agree" style="width: 14px; height: 14px;" />
+              <label for="terms-agree" style="font-size: 11px; margin: 0;">I agree to the terms and conditions</label>
+            </div>
+            <div style="background: #f0f9ff; border: 1px solid #0284c7; padding: 8px 10px; border-radius: 4px;">
+              <p style="margin: 0; font-size: 11px; color: #0369a1; line-height: 1.4;">
+                🔒 <strong>Secure Payment:</strong> All payment data is securely processed by Stripe. Your card information is never stored on our servers.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div style="display: flex; gap: 12px; justify-content: center;">
+          <button
+            onclick="purchaseLicense()"
+            style="padding: 8px 24px; background: linear-gradient(to bottom, #5eac56 0%, #3c873c 100%); border: 2px outset #999; font-weight: bold; color: white; font-size: 13px; cursor: pointer; box-shadow: 1px 1px 2px rgba(0,0,0,0.3);"
+          >
+            💳 Purchase License
+          </button>
+          <button
+            onclick="closeLicenseWindow()"
+            style="padding: 8px 24px; background: linear-gradient(to bottom, #ffffff 0%, #ece9d8 100%); border: 2px outset #999; font-size: 13px; cursor: pointer; box-shadow: 1px 1px 2px rgba(0,0,0,0.3);"
+          >
+            Cancel
+          </button>
+        </div>
+        <div style="margin-top: 16px; text-align: center; font-size: 10px; color: #333;">
+          <p style="margin: 4px 0;">Need help? Contact support@stacksjs.com</p>
+          <p style="margin: 4px 0;">30-Day Money-Back Guarantee</p>
+        </div>
+      </div>
+    </div>
+    <div id="window-blog" class="window" style="left: 300px; top: 120px; width: 750px; height: 650px;">
+      <div class="window-titlebar">
+        <div class="window-icon">📝</div>
+        <div class="window-title">Stacks Blog - Coming Soon</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('blog')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('blog')">□</button>
+          <button class="close window-control" onclick="closeWindow('blog')">×</button>
+        </div>
+      </div>
+      <div class="window-content" style="overflow-y: auto;">
+        <div style="background: linear-gradient(to bottom, #0831d9 0%, #1c4ed8 100%); color: white; padding: 24px; margin: -16px -16px 20px -16px;">
+          <h1 style="margin: 0 0 8px 0; font-size: 32px; font-weight: bold;">Stacks Blog</h1>
+          <p style="margin: 0; font-size: 14px; opacity: 0.9;">Updates, tutorials, and insights from the Stacks team</p>
+        </div>
+        <!-- Blog Post 1 -->
+        <article style="background: white; padding: 20px; border: 2px groove #999; margin-bottom: 20px;">
+          <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
+            <h2 style="margin: 0; color: #0831d9; font-size: 20px;">Introducing Stacks 1.0: The Future of Full-Stack TypeScript</h2>
+            <span style="background: #0831d9; color: white; padding: 4px 12px; border-radius: 12px; font-size: 11px; white-space: nowrap;">Coming Soon</span>
+          </div>
+          <div style="color: #666; font-size: 12px; margin-bottom: 12px;">
+            📅 December 2025 • ✍️ Chris Breuer • 🏷️ Release, TypeScript, Framework
+          </div>
+          <p style="line-height: 1.6; color: #333;">
+            We're thrilled to announce that Stacks 1.0 is on the horizon! After months of development and community feedback,
+            we're ready to unveil a revolutionary full-stack TypeScript framework that makes building modern applications faster,
+            safer, and more enjoyable than ever before.
+          </p>
+          <p style="line-height: 1.6; color: #333;">
+            Stacks 1.0 brings together the best parts of modern web development: type-safe APIs, lightning-fast build times with Bun,
+            powerful CLI tools, and a batteries-included ecosystem that just works. Whether you're building a SaaS application,
+            a desktop app with Tauri, or a high-performance API, Stacks has you covered.
+          </p>
+          <a href="#" style="color: #0831d9; text-decoration: none; font-weight: bold; font-size: 13px;">Read more →</a>
+        </article>
+        <!-- Blog Post 2 -->
+        <article style="background: white; padding: 20px; border: 2px groove #999; margin-bottom: 20px;">
+          <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
+            <h2 style="margin: 0; color: #0831d9; font-size: 20px;">Building Type-Safe APIs with Stacks Router</h2>
+            <span style="background: #22c55e; color: white; padding: 4px 12px; border-radius: 12px; font-size: 11px; white-space: nowrap;">Tutorial</span>
+          </div>
+          <div style="color: #666; font-size: 12px; margin-bottom: 12px;">
+            📅 November 2025 • ✍️ Engineering Team • 🏷️ Tutorial, API, TypeScript
+          </div>
+          <p style="line-height: 1.6; color: #333;">
+            Learn how to build fully type-safe REST and RPC APIs using Stacks Router. In this comprehensive tutorial,
+            we'll walk through creating endpoints, validating requests, handling errors, and leveraging TypeScript's
+            type system to catch bugs before they reach production.
+          </p>
+          <p style="line-height: 1.6; color: #333;">
+            Stacks Router provides automatic OpenAPI documentation, built-in validation with Zod, and seamless integration
+            with your database models. Plus, with intelligent type inference, your frontend automatically knows about your
+            API's exact shape—no manual synchronization needed!
+          </p>
+          <a href="#" style="color: #0831d9; text-decoration: none; font-weight: bold; font-size: 13px;">Read more →</a>
+        </article>
+        <!-- Blog Post 3 -->
+        <article style="background: white; padding: 20px; border: 2px groove #999; margin-bottom: 20px;">
+          <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
+            <h2 style="margin: 0; color: #0831d9; font-size: 20px;">From Idea to Production in 10 Minutes</h2>
+            <span style="background: #f59e0b; color: white; padding: 4px 12px; border-radius: 12px; font-size: 11px; white-space: nowrap;">Guide</span>
+          </div>
+          <div style="color: #666; font-size: 12px; margin-bottom: 12px;">
+            📅 October 2025 • ✍️ Developer Advocate • 🏷️ Getting Started, Deployment
+          </div>
+          <p style="line-height: 1.6; color: #333;">
+            See how Stacks streamlines your development workflow from local development to production deployment.
+            With built-in database migrations, automatic TypeScript compilation, hot module reloading, and one-command
+            deployments, you'll ship faster than ever.
+          </p>
+          <p style="line-height: 1.6; color: #333;">
+            This guide covers scaffolding a new project, setting up your database, building your first API, creating
+            a frontend component, running tests, and deploying to your preferred hosting provider—all in under 10 minutes!
+          </p>
+          <a href="#" style="color: #0831d9; text-decoration: none; font-weight: bold; font-size: 13px;">Read more →</a>
+        </article>
+        <!-- Blog Post 4 -->
+        <article style="background: white; padding: 20px; border: 2px groove #999; margin-bottom: 20px;">
+          <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
+            <h2 style="margin: 0; color: #0831d9; font-size: 20px;">Meet the Ecosystem: 50+ Libraries & CLIs</h2>
+            <span style="background: #8b5cf6; color: white; padding: 4px 12px; border-radius: 12px; font-size: 11px; white-space: nowrap;">Ecosystem</span>
+          </div>
+          <div style="color: #666; font-size: 12px; margin-bottom: 12px;">
+            📅 September 2025 • ✍️ Chris Breuer • 🏷️ Ecosystem, Tools, Libraries
+          </div>
+          <p style="line-height: 1.6; color: #333;">
+            Explore the growing Stacks ecosystem with over 50 carefully crafted libraries and CLI tools. From image optimization
+            with imgx and pngx, to DNS management with dnsx, to queue processing with bun-queue—every tool is designed to work
+            seamlessly together while remaining independently useful.
+          </p>
+          <p style="line-height: 1.6; color: #333;">
+            Each package follows our core principles: type-safe, performant, well-documented, and developer-friendly.
+            Whether you need HTTP utilities, logging, testing, or deployment tools, the Stacks ecosystem has you covered.
+          </p>
+          <a href="#" style="color: #0831d9; text-decoration: none; font-weight: bold; font-size: 13px;">Read more →</a>
+        </article>
+        <!-- Newsletter Signup -->
+        <div id="blog-newsletter" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 24px; border-radius: 8px; border: 2px solid #5a67d8; text-align: center;">
+          <h3 style="margin: 0 0 8px 0; font-size: 20px;">Stay Updated</h3>
+          <p style="margin: 0 0 16px 0; font-size: 13px; opacity: 0.95;">
+            Subscribe to our newsletter for the latest updates, tutorials, and community highlights.
+          </p>
+          <div id="blog-newsletter-form" style="display: flex; gap: 8px; max-width: 400px; margin: 0 auto;">
+            <input
+              id="blog-newsletter-email"
+              type="email"
+              placeholder="your@email.com"
+              style="flex: 1; padding: 10px 14px; border: 2px inset #999; border-radius: 4px; font-size: 13px;"
+            />
+            <button onclick="handleBlogNewsletterSignup()" style="padding: 10px 20px; background: white; color: #667eea; border: 2px outset #999; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 13px;">
+              Subscribe
+            </button>
+          </div>
+          <div id="blog-newsletter-success" style="display: none; padding: 12px; background: rgba(255,255,255,0.2); border-radius: 4px;">
+            Thanks for subscribing! We'll keep you updated.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="window-sponsors" class="window" style="left: 250px; top: 100px; width: 800px; height: 650px;">
+      <div class="window-titlebar">
+        <div class="window-icon">💖</div>
+        <div class="window-title">Become a Stacks.js Sponsor</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('sponsors')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('sponsors')">□</button>
+          <button class="close window-control" onclick="closeWindow('sponsors')">×</button>
+        </div>
+      </div>
+      <div class="window-content" style="overflow-y: auto;">
+        <div style="background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%); color: white; padding: 24px; margin: -16px -16px 20px -16px;">
+          <h1 style="margin: 0 0 8px 0; font-size: 28px;">💖 Support Open Source</h1>
+          <p style="margin: 0; font-size: 14px; opacity: 0.95;">Help us maintain and develop the Stacks ecosystem</p>
+        </div>
+        <div style="background: white; padding: 20px; border: 2px groove #999; margin-bottom: 16px;">
+          <p style="line-height: 1.7; margin: 0 0 12px 0;">
+            Stacks.js is an <strong>MIT licensed open source project</strong> and completely free to use. The tremendous amount of effort needed to maintain such a large ecosystem and develop new features is only made sustainable thanks to the generous financial backing of our sponsors.
+          </p>
+        </div>
+        <div style="background: #f0f9ff; padding: 16px; border: 2px solid #0284c7; margin-bottom: 16px; border-radius: 4px;">
+          <h3 style="margin: 0 0 8px 0; color: #0369a1;">How to Sponsor</h3>
+          <p style="margin: 0; font-size: 13px; line-height: 1.6;">
+            Sponsorships can be done via <a href="https://github.com/sponsors/chrisbbreuer" target="_blank" style="color: #0831d9;">GitHub Sponsors</a> or <a href="https://opencollective.com/stacksjs" target="_blank" style="color: #0831d9;">OpenCollective</a>. Both monthly-recurring and one-time donations are accepted.
+          </p>
+          <p style="margin: 8px 0 0 0; font-size: 12px; color: #666;">
+            Questions? Contact <strong>sponsor@stacksjs.com</strong>
+          </p>
+        </div>
+        <h2 style="margin: 0 0 12px 0; font-size: 18px;">Sponsorship Tiers</h2>
+        <!-- Global Special Sponsor -->
+        <div style="background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); padding: 16px; border: 3px solid #d97706; margin-bottom: 12px; border-radius: 6px; color: #78350f;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+            <h3 style="margin: 0; font-size: 16px; color: #78350f;">⭐ Global Special Sponsor</h3>
+            <span style="background: #78350f; color: #fef3c7; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: bold;">EXCLUSIVE</span>
+          </div>
+          <p style="margin: 0; font-size: 12px; line-height: 1.5;">
+            Limited to one sponsor globally. <strong>Currently vacant.</strong> Above-the-fold logo placement on stacksjs.com, exclusive social media promotion, and top placement in all sponsorship locations.
+          </p>
+        </div>
+        <!-- Diamond -->
+        <div style="background: white; padding: 14px; border: 2px solid #a78bfa; margin-bottom: 10px; border-radius: 4px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+            <h3 style="margin: 0; font-size: 15px; color: #7c3aed;">💎 Diamond</h3>
+            <strong style="color: #7c3aed;">$2,500/mo</strong>
+          </div>
+          <p style="margin: 0; font-size: 11px; line-height: 1.4; color: #333;">
+            Prominent logo on stacksjs.com, 70+ library sites, and all GitHub READMEs. Maximum visibility across the entire ecosystem.
+          </p>
+        </div>
+        <!-- Platinum -->
+        <div style="background: white; padding: 14px; border: 2px solid #cbd5e1; margin-bottom: 10px; border-radius: 4px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+            <h3 style="margin: 0; font-size: 15px; color: #64748b;">🥈 Platinum</h3>
+            <strong style="color: #64748b;">$1,000/mo</strong>
+          </div>
+          <p style="margin: 0; font-size: 11px; line-height: 1.4; color: #333;">
+            Large logo placement across stacksjs.com, 70+ library sites, and GitHub READMEs.
+          </p>
+        </div>
+        <!-- Gold Tiers -->
+        <div style="background: white; padding: 14px; border: 2px solid #fbbf24; margin-bottom: 10px; border-radius: 4px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+            <h3 style="margin: 0; font-size: 15px; color: #d97706;">🥇 Double Gold / Gold</h3>
+            <strong style="color: #d97706;">$500 - $250/mo</strong>
+          </div>
+          <p style="margin: 0; font-size: 11px; line-height: 1.4; color: #333;">
+            Large logo on stacksjs.com and 70+ library sites/READMEs.
+          </p>
+        </div>
+        <!-- Silver -->
+        <div style="background: white; padding: 14px; border: 2px solid #9ca3af; margin-bottom: 10px; border-radius: 4px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+            <h3 style="margin: 0; font-size: 15px; color: #6b7280;">🥈 Silver</h3>
+            <strong style="color: #6b7280;">$100/mo</strong>
+          </div>
+          <p style="margin: 0; font-size: 11px; line-height: 1.4; color: #333;">
+            Medium logo on stacksjs.com, library sites, and BACKERS.md files.
+          </p>
+        </div>
+        <!-- Bronze -->
+        <div style="background: white; padding: 14px; border: 2px solid #d97706; margin-bottom: 10px; border-radius: 4px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+            <h3 style="margin: 0; font-size: 15px; color: #92400e;">🥉 Bronze</h3>
+            <strong style="color: #92400e;">$50/mo</strong>
+          </div>
+          <p style="margin: 0; font-size: 11px; line-height: 1.4; color: #333;">
+            Small logo placement across the ecosystem.
+          </p>
+        </div>
+        <!-- Individual Tiers -->
+        <div style="background: #f3f4f6; padding: 14px; border: 2px solid #d1d5db; margin-bottom: 10px; border-radius: 4px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+            <h3 style="margin: 0; font-size: 14px;">💚 Generous Backer</h3>
+            <strong>$25/mo</strong>
+          </div>
+          <p style="margin: 0; font-size: 11px; line-height: 1.4; color: #333;">
+            Private Discord access, free Dashboard account, social media follow, name in BACKERS.md.
+          </p>
+        </div>
+        <div style="background: #f3f4f6; padding: 14px; border: 2px solid #d1d5db; margin-bottom: 10px; border-radius: 4px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+            <h3 style="margin: 0; font-size: 14px;">🔐 Sponsorware Tier</h3>
+            <strong>$10/mo</strong>
+          </div>
+          <p style="margin: 0; font-size: 11px; line-height: 1.4; color: #333;">
+            Access to sponsorware projects (DynamoDB ORM driver, etc.) + name in BACKERS.md.
+          </p>
+        </div>
+        <div style="background: #f3f4f6; padding: 14px; border: 2px solid #d1d5db; margin-bottom: 16px; border-radius: 4px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+            <h3 style="margin: 0; font-size: 14px;">❤️ Individual Backer</h3>
+            <strong>$5/mo</strong>
+          </div>
+          <p style="margin: 0; font-size: 11px; line-height: 1.4; color: #333;">
+            Name listed in BACKERS.md across 70+ repositories.
+          </p>
+        </div>
+        <!-- CTA Buttons -->
+        <div style="display: flex; gap: 12px; justify-content: center; margin: 20px 0;">
+          <a href="https://github.com/sponsors/chrisbbreuer" target="_blank" style="padding: 12px 24px; background: linear-gradient(to bottom, #ec4899 0%, #db2777 100%); color: white; border: 2px outset #999; font-weight: bold; text-decoration: none; border-radius: 4px; font-size: 13px;">
+            💖 Sponsor on GitHub
+          </a>
+          <a href="https://opencollective.com/stacksjs" target="_blank" style="padding: 12px 24px; background: linear-gradient(to bottom, #8b5cf6 0%, #7c3aed 100%); color: white; border: 2px outset #999; font-weight: bold; text-decoration: none; border-radius: 4px; font-size: 13px;">
+            Support on OpenCollective
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- Benchmarks Window -->
+    <div id="window-benchmarks" class="window" style="left: 250px; top: 150px; width: 650px; height: 500px;">
+      <div class="window-titlebar">
+        <div class="window-icon">📁</div>
+        <div class="window-title">Benchmarks</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('benchmarks')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('benchmarks')">□</button>
+          <button class="close window-control" onclick="closeWindow('benchmarks')">×</button>
+        </div>
+      </div>
+      <div class="window-content" style="overflow-y: auto; padding: 20px;">
+        <div style="background: linear-gradient(to bottom, #0831d9 0%, #1c4ed8 100%); color: white; padding: 20px; margin: -20px -20px 20px -20px;">
+          <h2 style="margin: 0 0 8px 0; font-size: 24px; font-weight: bold;">Performance Benchmarks</h2>
+          <p style="margin: 0; font-size: 13px; opacity: 0.9;">Compare Stacks against popular frameworks and tools</p>
+        </div>
+        <!-- Benchmark Links Grid -->
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;">
+          <!-- Request Performance -->
+          <a href="https://github.com/stacksjs/benchmarks" target="_blank" style="background: white; border: 2px groove #999; padding: 16px; text-decoration: none; color: inherit; display: block; transition: all 0.2s;">
+            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
+              <div style="font-size: 24px;">⚡</div>
+              <div style="font-weight: bold; color: #0831d9; font-size: 14px;">Request Performance</div>
+            </div>
+            <div style="font-size: 11px; color: #666; line-height: 1.5;">
+              HTTP request/response benchmarks vs Express, Fastify, Hono, and more
+            </div>
+          </a>
+          <!-- Build Time -->
+          <a href="https://github.com/stacksjs/benchmarks" target="_blank" style="background: white; border: 2px groove #999; padding: 16px; text-decoration: none; color: inherit; display: block; transition: all 0.2s;">
+            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
+              <div style="font-size: 24px;">🔨</div>
+              <div style="font-weight: bold; color: #0831d9; font-size: 14px;">Build Performance</div>
+            </div>
+            <div style="font-size: 11px; color: #666; line-height: 1.5;">
+              Build time comparisons with Vite, esbuild, Turbopack, and others
+            </div>
+          </a>
+          <!-- Bundle Size -->
+          <a href="https://github.com/stacksjs/benchmarks" target="_blank" style="background: white; border: 2px groove #999; padding: 16px; text-decoration: none; color: inherit; display: block; transition: all 0.2s;">
+            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
+              <div style="font-size: 24px;">📦</div>
+              <div style="font-weight: bold; color: #0831d9; font-size: 14px;">Bundle Size</div>
+            </div>
+            <div style="font-size: 11px; color: #666; line-height: 1.5;">
+              Output size analysis and tree-shaking effectiveness
+            </div>
+          </a>
+          <!-- Memory Usage -->
+          <a href="https://github.com/stacksjs/benchmarks" target="_blank" style="background: white; border: 2px groove #999; padding: 16px; text-decoration: none; color: inherit; display: block; transition: all 0.2s;">
+            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
+              <div style="font-size: 24px;">💾</div>
+              <div style="font-weight: bold; color: #0831d9; font-size: 14px;">Memory Usage</div>
+            </div>
+            <div style="font-size: 11px; color: #666; line-height: 1.5;">
+              Runtime memory consumption and optimization metrics
+            </div>
+          </a>
+          <!-- Startup Time -->
+          <a href="https://github.com/stacksjs/benchmarks" target="_blank" style="background: white; border: 2px groove #999; padding: 16px; text-decoration: none; color: inherit; display: block; transition: all 0.2s;">
+            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
+              <div style="font-size: 24px;">🚀</div>
+              <div style="font-weight: bold; color: #0831d9; font-size: 14px;">Startup Time</div>
+            </div>
+            <div style="font-size: 11px; color: #666; line-height: 1.5;">
+              Cold start and hot reload performance measurements
+            </div>
+          </a>
+          <!-- Database Performance -->
+          <a href="https://github.com/stacksjs/benchmarks" target="_blank" style="background: white; border: 2px groove #999; padding: 16px; text-decoration: none; color: inherit; display: block; transition: all 0.2s;">
+            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
+              <div style="font-size: 24px;">🗄️</div>
+              <div style="font-weight: bold; color: #0831d9; font-size: 14px;">Database ORM</div>
+            </div>
+            <div style="font-size: 11px; color: #666; line-height: 1.5;">
+              Query performance vs Prisma, Drizzle, TypeORM, and Sequelize
+            </div>
+          </a>
+        </div>
+        <div style="background: #f0f4ff; border: 2px groove #0831d9; padding: 14px; border-radius: 4px; font-size: 11px; color: #666;">
+          <strong style="color: #0831d9;">Note:</strong> All benchmarks are open source and reproducible. Visit our
+          <a href="https://github.com/stacksjs/benchmarks" target="_blank" style="color: #0831d9; font-weight: bold;">GitHub repository</a>
+          to run them yourself or contribute new benchmarks.
+        </div>
+      </div>
+    </div>
+    <div id="window-trash" class="window" style="left: 300px; top: 120px; width: 500px; height: 550px;">
+      <div class="window-titlebar">
+        <div class="window-icon">🗑️</div>
+        <div class="window-title">Recycle Bin</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('trash')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('trash')">□</button>
+          <button class="close window-control" onclick="closeWindow('trash')">×</button>
+        </div>
+      </div>
+      <div class="window-content" style="padding: 16px;">
+        <div style="background: #fff3cd; border: 2px solid #ffc107; padding: 12px; margin-bottom: 16px; border-radius: 4px; font-size: 11px;">
+          <strong>⚠️ Note:</strong> These items are in the Recycle Bin. Stacks has native tooling built-in, to self-host a maintainable, performant & secure environment, in a zero-setup & zero-config way.
+        </div>
+        <div style="background: white; border: 2px inset #999; padding: 12px; height: 420px; overflow-y: auto;">
+          <table style="width: 100%; border-collapse: collapse;">
+            <thead>
+              <tr style="background: #ece9d8; border-bottom: 2px solid #999;">
+                <th style="text-align: left; padding: 8px; font-size: 11px; border-right: 1px solid #ccc;">Name</th>
+                <th style="text-align: left; padding: 8px; font-size: 11px; border-right: 1px solid #ccc;">Type</th>
+                <th style="text-align: right; padding: 8px; font-size: 11px;">Date Deleted</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🚂 Laravel</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">PHP Framework</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/15/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">💎 Ruby on Rails</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Ruby Framework</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/14/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🍺 Homebrew</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Package Manager</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/13/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🔭 Laravel Horizon</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Queue Dashboard</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/12/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🔬 Laravel Telescope</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Debug Assistant</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/11/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">⚒️ Laravel Forge</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Server Management</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/10/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">☁️ Laravel Vapor</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Serverless Platform</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/09/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🌥️ Laravel Cloud</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Cloud Platform</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/08/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">▲ Vercel</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Hosting Platform</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/07/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🎯 Netlify</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Hosting Platform</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/06/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">📦 Composer</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">PHP Package Manager</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/05/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🐳 Docker Desktop</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Container Platform</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/04/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🟢 Node.js</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">JavaScript Runtime</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/03/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">⚡ Vite</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Build Tool</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/02/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">📝 ESLint</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Linter</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">10/01/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">💅 Prettier</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Code Formatter</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">09/30/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🦀 Oxc</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Rust Toolchain</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">09/29/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">📖 VitePress</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Static Site Generator</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">09/28/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">📚 VuePress</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Static Site Generator</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">09/27/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🌐 Nginx</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Web Server</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">09/26/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🚇 Ngrok</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Tunneling Service</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">09/25/2025</td>
+              </tr>
+              <tr style="border-bottom: 1px solid #e0e0e0;">
+                <td style="padding: 8px; font-size: 11px;">🦌 Laravel Herd</td>
+                <td style="padding: 8px; font-size: 11px; color: #666;">Local Dev Environment</td>
+                <td style="padding: 8px; font-size: 11px; color: #666; text-align: right;">09/24/2025</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div id="window-contact" class="window" style="left: 200px; top: 100px; width: 700px; height: 650px;">
+      <div class="window-titlebar">
+        <div class="window-icon">�</div>
+        <div class="window-title">Contact Us</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('contact')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('contact')">□</button>
+          <button class="close window-control" onclick="closeWindow('contact')">×</button>
+        </div>
+      </div>
+      <div class="window-content" style="padding: 16px;">
+        <h2 style="margin: 0 0 16px 0; font-size: 18px;">Get in Touch</h2>
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
+          <!-- Map Section -->
+          <div>
+            <h3 style="margin: 0 0 12px 0; font-size: 14px;">📍 Our Location</h3>
+            <div style="background: white; border: 2px inset #999; padding: 4px;">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3307.1778389867547!2d-118.43344492378123!3d33.9838647731147!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2ba9c3f5f5f5f%3A0x1234567890abcdef!2s12665%20Village%20Ln%2C%20Playa%20Vista%2C%20CA%2090094!5e0!3m2!1sen!2sus!4v1234567890123!5m2!1sen!2sus"
+                width="100%"
+                height="250"
+                style="border:0;"
+                allowfullscreen=""
+                loading="lazy"
+                referrerpolicy="no-referrer-when-downgrade">
+              </iframe>
+            </div>
+            <p style="margin: 12px 0 0 0; font-size: 12px; line-height: 1.6;">
+              <strong>Stacks Headquarters</strong><br>
+              12665 Village Ln<br>
+              Playa Vista, CA 90094<br>
+              United States
+            </p>
+          </div>
+          <!-- Contact Form -->
+          <div>
+            <h3 style="margin: 0 0 12px 0; font-size: 14px;">✉️ Send us a message</h3>
+            <form onsubmit="submitContactForm(event)" style="display: flex; flex-direction: column; gap: 12px;">
+              <div>
+                <label style="display: block; margin-bottom: 4px; font-size: 11px; font-weight: bold;">Name</label>
+                <input
+                  type="text"
+                  id="contact-name"
+                  required
+                  style="width: 100%; padding: 6px; border: 2px inset #999; font-family: 'Tahoma', sans-serif; font-size: 11px;"
+                  placeholder="Your name"
+                />
+              </div>
+              <div>
+                <label style="display: block; margin-bottom: 4px; font-size: 11px; font-weight: bold;">Email</label>
+                <input
+                  type="email"
+                  id="contact-email"
+                  required
+                  style="width: 100%; padding: 6px; border: 2px inset #999; font-family: 'Tahoma', sans-serif; font-size: 11px;"
+                  placeholder="your.email@example.com"
+                />
+              </div>
+              <div>
+                <label style="display: block; margin-bottom: 4px; font-size: 11px; font-weight: bold;">Subject</label>
+                <input
+                  type="text"
+                  id="contact-subject"
+                  required
+                  style="width: 100%; padding: 6px; border: 2px inset #999; font-family: 'Tahoma', sans-serif; font-size: 11px;"
+                  placeholder="What's this about?"
+                />
+              </div>
+              <div>
+                <label style="display: block; margin-bottom: 4px; font-size: 11px; font-weight: bold;">Message</label>
+                <textarea
+                  id="contact-message"
+                  required
+                  rows="6"
+                  style="width: 100%; padding: 6px; border: 2px inset #999; font-family: 'Tahoma', sans-serif; font-size: 11px; resize: vertical;"
+                  placeholder="Tell us more about your inquiry..."
+                ></textarea>
+              </div>
+              <button
+                type="submit"
+                style="background: linear-gradient(to bottom, #ffffff 0%, #ece9d8 100%); border: 2px outset #999; padding: 8px 16px; font-family: 'Tahoma', sans-serif; font-size: 11px; font-weight: bold; cursor: pointer; align-self: flex-start;"
+              >
+                📤 Send Message
+              </button>
+            </form>
+          </div>
+        </div>
+        <div style="background: #e0f2ff; border: 2px solid #0284c7; padding: 12px; border-radius: 4px; font-size: 11px;">
+          <strong>💡 Quick Links:</strong> For general inquiries, email us at <a href="mailto:hello@stacksjs.com" style="color: #0831d9;">hello@stacksjs.com</a>
+          <br>For support questions, visit our <a href="https://discord.gg/stacksjs" target="_blank" style="color: #0831d9;">Discord community</a>
+        </div>
+      </div>
+    </div>
+    <div id="window-libraries" class="window" style="left: 120px; top: 100px; width: 700px; height: 600px;">
+      <div class="window-titlebar">
+        <div class="window-icon">📁</div>
+        <div class="window-title">Libraries & CLIs</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('libraries')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('libraries')">□</button>
+          <button class="close window-control" onclick="closeWindow('libraries')">×</button>
+        </div>
+      </div>
+      <div class="window-content">
+        <h2>Libraries & CLIs</h2>
+        <p style="margin-bottom: 16px;">Powerful TypeScript libraries and command-line tools for modern development.</p>
+        <div class="folder-list">
+            <a href="https://github.com/stacksjs/aax" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">aax</div>
+                <div class="folder-item-desc">A library to work with Audible's .aax files. Cross-platform app coming soon.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/audiox" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">audiox</div>
+                <div class="folder-item-desc">Powerful audio processing for your workflows.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/backupx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">backupx</div>
+                <div class="folder-item-desc">Comprehensive & performant database and file backup solution.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/besting" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">besting</div>
+                <div class="folder-item-desc">A modern & extremely performant testing framework. Browser, CLI, API testing-ready.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/buddy" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">buddy-bot</div>
+                <div class="folder-item-desc">Just like Renovate and Dependabot, just open source & self-hosted.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/bumpx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bumpx</div>
+                <div class="folder-item-desc">Bump your version numbers automatically.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/bun-git-hooks" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bun-git-hooks</div>
+                <div class="folder-item-desc">A simple git hooks manager for all-sized Bun projects.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/bun-query-builder" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bun-query-builder</div>
+                <div class="folder-item-desc">A safe, performant & fully-typed query builder.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/queue" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bun-queue</div>
+                <div class="folder-item-desc">A modern port of BullMQ. Optimized for Bun usage.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/router" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bun-router</div>
+                <div class="folder-item-desc">A powerful yet lightweight router for your server. Used by Stacks.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/bunfig" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bunfig</div>
+                <div class="folder-item-desc">Lightweight & smart Bun configuration loader.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/clarity" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">clarity</div>
+                <div class="folder-item-desc">Modern debugging & logging for browser & server.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/dtsx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">dtsx</div>
+                <div class="folder-item-desc">Extremely fast & configurable DTS emitter.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/dnsx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">dnsx</div>
+                <div class="folder-item-desc">A command-line & library DNS client. Like dig & dog, but for TypeScript.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/gitit" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">gitit</div>
+                <div class="folder-item-desc">A simple way to download templates stored using git.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/gitlint" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">gitlint</div>
+                <div class="folder-item-desc">Minimal & fast Git commit message linting & formatting.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/httx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">httx</div>
+                <div class="folder-item-desc">A modern, user-friendly command-line & library HTTP client for the API era.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/imgx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">imgx</div>
+                <div class="folder-item-desc">Make your images load faster. A better save for the web.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/jpgx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">jpgx</div>
+                <div class="folder-item-desc">A TypeScript JPEG encoder & decoder for Bun & Node.js.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/localtunnels" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">localtunnels</div>
+                <div class="folder-item-desc">A simple and smart tunneling alternative. Without or with self-hosting.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/logsmith" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">logsmith</div>
+                <div class="folder-item-desc">Forge beautiful changelogs from your commits.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/pickier" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">pickier</div>
+                <div class="folder-item-desc">Format, lint, and more—in a fraction of second.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/pngx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">pngx</div>
+                <div class="folder-item-desc">Modern PNG encoder & decoder.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/post" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">post</div>
+                <div class="folder-item-desc">The Post. A modern mail server & utilities. Ships with a CLI, library, and UI.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/qrx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">qrx</div>
+                <div class="folder-item-desc">QR & Bar Code generating & reading. Lightweight & powerful.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/rpx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">rpx</div>
+                <div class="folder-item-desc">A modern, fast reverse proxy. For a better local development environment.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/tlsx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">tlsx</div>
+                <div class="folder-item-desc">A TLS library with automation & HTTPS by default.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-avif" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-avif</div>
+                <div class="folder-item-desc">High quality & small file sizes.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-cache" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-cache</div>
+                <div class="folder-item-desc">A fast, type-safe, and feature-rich caching library for modern applications.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-clone" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-clone</div>
+                <div class="folder-item-desc">Deeply clone arbitrary objects using TypeScript.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-collect" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-collect</div>
+                <div class="folder-item-desc">A powerful, yet lightweight, Laravel-like Collections written for TypeScript.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-countries" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-countries</div>
+                <div class="folder-item-desc">Modern, lightweight, elegant country data management.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-datetime" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-datetime</div>
+                <div class="folder-item-desc">Performant & powerful datetime library. Carbon-API inspired.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-gif" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-gif</div>
+                <div class="folder-item-desc">Performant TypeScript implementation of a GIF encoder & decoder.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-i18n" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-i18n</div>
+                <div class="folder-item-desc">A fully-typed i18n experience.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-inputs" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-inputs</div>
+                <div class="folder-item-desc">Modern input masking.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-broadcasting" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-broadcasting</div>
+                <div class="folder-item-desc">Realtime the simple & performant way.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-maps" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-maps</div>
+                <div class="folder-item-desc">Modern & lightweight library for creating interactive vector maps.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-medium-editor" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-medium-editor</div>
+                <div class="folder-item-desc">A modern, minimal & performant Medium-like rich text editor.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-mocker" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-mocker</div>
+                <div class="folder-item-desc">Performance-focused & lightweight TypeScript faker library. Comprehensive locale support.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-ndarray" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-ndarray</div>
+                <div class="folder-item-desc">Multidimensional arrays for JavaScript & TypeScript.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-numbers" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-numbers</div>
+                <div class="folder-item-desc">Lightweight currencies, weights, phone numbers, and more. Localized.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-pkgx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-pkgx</div>
+                <div class="folder-item-desc">Automated Typed Pantry details.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-prompts" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-prompts</div>
+                <div class="folder-item-desc">Build modern & pretty CLI applications.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-punycode" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-punycode</div>
+                <div class="folder-item-desc">Lightweight Punycode converter. RFC 3492 & RFC 5891 supported.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-rate-limiter" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-rate-limiter</div>
+                <div class="folder-item-desc">High-performance, flexible rate limiting library. For TypeScript.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-security" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-security</div>
+                <div class="folder-item-desc">Performant & lightweight cryptography tooling.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-slug" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-slug</div>
+                <div class="folder-item-desc">Lightweight slug generation. Browser & Bun / Node.js compatible.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-spreadsheets" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-spreadsheets</div>
+                <div class="folder-item-desc">Easily generate spreadsheets, like CSVs and Excel files.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-svg" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-svg</div>
+                <div class="folder-item-desc">Powerful developer toolkit for working with SVGs.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-syntax-highlighter" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-syntax-highlighter</div>
+                <div class="folder-item-desc">A syntax highlighter for the modern web. Built for performance.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-validation" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-validation</div>
+                <div class="folder-item-desc">Lightweight & performant form & request data validation library.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-vat" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-vat</div>
+                <div class="folder-item-desc">Simply handle EU MOSS tax & VAT regulations & calculations.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-webp" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-webp</div>
+                <div class="folder-item-desc">A modern image format for the Web.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-web-scraper" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-web-scraper</div>
+                <div class="folder-item-desc">Powerful, type-safe web scraping tooling.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/vidx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📦</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">vidx</div>
+                <div class="folder-item-desc">Make your videos load faster. A better save for the web.</div>
+              </div>
+            </a>
+        </div>
+      </div>
+    </div>
+    <div id="window-plugins" class="window" style="left: 170px; top: 120px; width: 700px; height: 550px;">
+      <div class="window-titlebar">
+        <div class="window-icon">📁</div>
+        <div class="window-title">Plugins & Actions</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('plugins')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('plugins')">□</button>
+          <button class="close window-control" onclick="closeWindow('plugins')">×</button>
+        </div>
+      </div>
+      <div class="window-content">
+        <h2>Plugins & Actions</h2>
+        <p style="margin-bottom: 16px;">Build plugins and GitHub Actions to enhance your development workflow.</p>
+        <div class="folder-list">
+            <a href="https://github.com/stacksjs/launchpad" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">action-launchpad</div>
+                <div class="folder-item-desc">GitHub Action to install packages using Launchpad.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/logsmith" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">action-logsmith</div>
+                <div class="folder-item-desc">Forge beautiful changelogs from your commits.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/action-releaser" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">action-releaser</div>
+                <div class="folder-item-desc">Simply attach files, like binaries & distributables, to GitHub Releases.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/bun-plugin-auto-imports" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bun-plugin-auto-imports</div>
+                <div class="folder-item-desc">Auto Imports support for Bun.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/bun-plugin-dotenvx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bun-plugin-dotenvx</div>
+                <div class="folder-item-desc">A Bun plugin to seamlessly work with dotenvx.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/bun-plugin-dtsx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bun-plugin-dtsx</div>
+                <div class="folder-item-desc">Automatically generate your TypeScript DTS files, using Bun's bundler.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/bun-plugin-rpx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bun-plugin-rpx</div>
+                <div class="folder-item-desc">A modern, fast reverse proxy. For a better local development environment.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/bun-plugin-tlsx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bun-plugin-tlsx</div>
+                <div class="folder-item-desc">Bun plugin for a modern TLS library with automation & HTTPS by default.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/bun-plugin-unocss" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">bun-plugin-unocss</div>
+                <div class="folder-item-desc">Instant On-demand Atomic CSS Engine - UnoCSS</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/vite-plugin-dotenvx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">vite-plugin-dotenvx</div>
+                <div class="folder-item-desc">A Vite plugin to seamlessly work with dotenvx.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/vite-plugin-layouts" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">vite-plugin-layouts</div>
+                <div class="folder-item-desc">Router-based layouts for your application.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/vite-plugin-local" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">vite-plugin-local</div>
+                <div class="folder-item-desc">Pretty development URLs, and HTTPS. Zero config, zero setup.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/rpx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">vite-plugin-rpx</div>
+                <div class="folder-item-desc">A Vite plugin for a modern, fast reverse proxy. For a better local development environment.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/vite-plugin-tauri" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">vite-plugin-tauri</div>
+                <div class="folder-item-desc">Zero-setup, highly-configurable cross-platform development.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/tlsx" target="_blank" class="folder-item">
+              <div class="folder-item-icon">🔌</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">vite-plugin-tlsx</div>
+                <div class="folder-item-desc">Simple, yet powerful TLS library. With automation & HTTPS by default.</div>
+              </div>
+            </a>
+        </div>
+      </div>
+    </div>
+    <div id="window-templates" class="window" style="left: 220px; top: 140px; width: 650px; height: 400px;">
+      <div class="window-titlebar">
+        <div class="window-icon">📁</div>
+        <div class="window-title">Templates</div>
+        <div class="window-controls">
+          <button class="minimize window-control" onclick="minimizeWindow('templates')">_</button>
+          <button class="maximize window-control" onclick="toggleMaximizeWindow('templates')">□</button>
+          <button class="close window-control" onclick="closeWindow('templates')">×</button>
+        </div>
+      </div>
+      <div class="window-content">
+        <h2>Templates</h2>
+        <p style="margin-bottom: 16px;">Starter templates to jumpstart your TypeScript projects.</p>
+        <div class="folder-list">
+            <a href="https://github.com/stacksjs/projects" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📋</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">projects</div>
+                <div class="folder-item-desc">A minimal personal portfolio template.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-starter" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📋</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-starter</div>
+                <div class="folder-item-desc">A rather barebones Bun & TypeScript starting point for libraries & CLIs.</div>
+              </div>
+            </a>
+            <a href="https://github.com/stacksjs/ts-starter-monorepo" target="_blank" class="folder-item">
+              <div class="folder-item-icon">📋</div>
+              <div class="folder-item-content">
+                <div class="folder-item-name">ts-starter-monorepo</div>
+                <div class="folder-item-desc">Like our ts-starter, but optimized for monorepos.</div>
+              </div>
+            </a>
+        </div>
+      </div>
+    </div>
+    <!-- Start Menu -->
+    <div class="start-menu" id="start-menu">
+      <div class="start-menu-header">
+        STACKS.JS
+      </div>
+      <div class="start-menu-user">
+        <div class="start-menu-user-icon">👤</div>
+        <div>Developer</div>
+      </div>
+      <div class="start-menu-items">
+        <button class="start-menu-item" onclick="openWindow('about')">
+          <div class="start-menu-item-icon">📄</div>
+          <div>About Stacks</div>
+        </button>
+        <button class="start-menu-item" onclick="openWindow('ecosystem')">
+          <div class="start-menu-item-icon">🌐</div>
+          <div>Ecosystem</div>
+        </button>
+        <div class="start-menu-item has-submenu">
+          <div class="start-menu-item-icon">⚙️</div>
+          <div>Backend</div>
+          <div class="start-submenu">
+            <button class="start-menu-item" onclick="openWindow('backend'); setTimeout(() => showFeature('backend', 'auth'), 100)">
+              <div class="start-menu-item-icon">🔐</div>
+              <div>Authentication</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('backend'); setTimeout(() => showFeature('backend', 'orm'), 100)">
+              <div class="start-menu-item-icon">🗺️</div>
+              <div>ORM</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('backend'); setTimeout(() => showFeature('backend', 'validation'), 100)">
+              <div class="start-menu-item-icon">✅</div>
+              <div>Validation</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('backend'); setTimeout(() => showFeature('backend', 'storage'), 100)">
+              <div class="start-menu-item-icon">💾</div>
+              <div>Storage</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('backend'); setTimeout(() => showFeature('backend', 'queue'), 100)">
+              <div class="start-menu-item-icon">📬</div>
+              <div>Queues</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('backend'); setTimeout(() => showFeature('backend', 'events'), 100)">
+              <div class="start-menu-item-icon">📡</div>
+              <div>Events</div>
+            </button>
+          </div>
+        </div>
+        <div class="start-menu-item has-submenu">
+          <div class="start-menu-item-icon">🎨</div>
+          <div>Frontend</div>
+          <div class="start-submenu">
+            <button class="start-menu-item" onclick="openWindow('frontend'); setTimeout(() => showFeature('frontend', 'components'), 100)">
+              <div class="start-menu-item-icon">🧩</div>
+              <div>Components</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('frontend'); setTimeout(() => showFeature('frontend', 'ui-kit'), 100)">
+              <div class="start-menu-item-icon">🎨</div>
+              <div>UI Kit</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('frontend'); setTimeout(() => showFeature('frontend', 'routing'), 100)">
+              <div class="start-menu-item-icon">🧭</div>
+              <div>Routing</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('frontend'); setTimeout(() => showFeature('frontend', 'desktop'), 100)">
+              <div class="start-menu-item-icon">🖥️</div>
+              <div>Desktop</div>
+            </button>
+          </div>
+        </div>
+        <div class="start-menu-item has-submenu">
+          <div class="start-menu-item-icon">☁️</div>
+          <div>Cloud</div>
+          <div class="start-submenu">
+            <button class="start-menu-item" onclick="openWindow('cloud'); setTimeout(() => showFeature('cloud', 'deployment'), 100)">
+              <div class="start-menu-item-icon">🚀</div>
+              <div>Deployment</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('cloud'); setTimeout(() => showFeature('cloud', 'storage'), 100)">
+              <div class="start-menu-item-icon">💾</div>
+              <div>Storage</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('cloud'); setTimeout(() => showFeature('cloud', 'cdn'), 100)">
+              <div class="start-menu-item-icon">🌍</div>
+              <div>CDN</div>
+            </button>
+            <button class="start-menu-item" onclick="openWindow('cloud'); setTimeout(() => showFeature('cloud', 'dns'), 100)">
+              <div class="start-menu-item-icon">🔗</div>
+              <div>DNS</div>
+            </button>
+          </div>
+        </div>
+        <button class="start-menu-item" onclick="openWindow('dashboard')">
+          <div class="start-menu-item-icon">📊</div>
+          <div>Dashboard</div>
+        </button>
+        <div class="start-menu-separator"></div>
+        <div class="start-menu-item has-submenu">
+          <div class="start-menu-item-icon">💎</div>
+          <div>Sponsorware</div>
+          <div class="start-submenu">
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/bun-queue', '_blank')">
+              <div class="start-menu-item-icon">📬</div>
+              <div>bun-queue</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/bun-router', '_blank')">
+              <div class="start-menu-item-icon">🧭</div>
+              <div>bun-router</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/stacks-dashboard', '_blank')">
+              <div class="start-menu-item-icon">📊</div>
+              <div>Stacks Dashboard</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/stacks-orm-dynamodb', '_blank')">
+              <div class="start-menu-item-icon">🗄️</div>
+              <div>Stacks ORM - DynamoDB</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/stacks-raycast', '_blank')">
+              <div class="start-menu-item-icon">🔍</div>
+              <div>Stacks Raycast</div>
+            </button>
+          </div>
+        </div>
+        <div class="start-menu-item has-submenu">
+          <div class="start-menu-item-icon">📱</div>
+          <div>Apps</div>
+          <div class="start-submenu">
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/barista', '_blank')">
+              <div class="start-menu-item-icon">☕</div>
+              <div>Barista</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/hush', '_blank')">
+              <div class="start-menu-item-icon">🤫</div>
+              <div>Hush</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/pomodoro', '_blank')">
+              <div class="start-menu-item-icon">🍅</div>
+              <div>Pomodoro</div>
+            </button>
+          </div>
+        </div>
+        <div class="start-menu-item has-submenu">
+          <div class="start-menu-item-icon">🏗️</div>
+          <div>Frameworks</div>
+          <div class="start-submenu">
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/bunpress', '_blank')">
+              <div class="start-menu-item-icon">📚</div>
+              <div>BunPress</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/clapp', '_blank')">
+              <div class="start-menu-item-icon">⌨️</div>
+              <div>Clapp</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/cwcss/crosswind', '_blank')">
+              <div class="start-menu-item-icon">💨</div>
+              <div>Crosswind</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/launchpad', '_blank')">
+              <div class="start-menu-item-icon">🚀</div>
+              <div>Launchpad</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/stacks', '_blank')">
+              <div class="start-menu-item-icon">📚</div>
+              <div>Stacks</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/stx', '_blank')">
+              <div class="start-menu-item-icon">⚡</div>
+              <div>stx</div>
+            </button>
+          </div>
+        </div>
+        <div class="start-menu-separator"></div>
+        <div class="start-menu-item has-submenu">
+          <div class="start-menu-item-icon">🔗</div>
+          <div>Resources</div>
+          <div class="start-submenu">
+            <button class="start-menu-item" onclick="window.open('https://stacksjs.com/docs', '_blank')">
+              <div class="start-menu-item-icon">📚</div>
+              <div>Documentation</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/stacks', '_blank')">
+              <div class="start-menu-item-icon">💻</div>
+              <div>GitHub</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/sponsors/chrisbbreuer', '_blank')">
+              <div class="start-menu-item-icon">💖</div>
+              <div>Sponsor</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://discord.gg/stacksjs', '_blank')">
+              <div class="start-menu-item-icon">💬</div>
+              <div>Discord</div>
+            </button>
+            <button class="start-menu-item" onclick="openIconFromMenu('blog')">
+              <div class="start-menu-item-icon">📝</div>
+              <div>Blog</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/white-paper', '_blank')">
+              <div class="start-menu-item-icon">📄</div>
+              <div>White Paper</div>
+            </button>
+            <button class="start-menu-item" onclick="window.open('https://github.com/stacksjs/stacks/blob/main/LICENSE.md', '_blank')">
+              <div class="start-menu-item-icon">⚖️</div>
+              <div>License</div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- taskbar -->
+    <div class="taskbar">
+      <button class="start-button" id="start-button">
+        <span class="start-logo">🪟</span>
+        <span>start</span>
+      </button>
+      <div class="taskbar-divider"></div>
+      <div class="quick-launch">
+        <a href="https://stacksjs.com/docs" target="_blank" class="quick-launch-icon" title="Documentation">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/>
+          </svg>
+        </a>
+        <a href="https://github.com/stacksjs/stacks" target="_blank" class="quick-launch-icon" title="GitHub Repository">
+          <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+          </svg>
+        </a>
+        <a href="https://github.com/sponsors/chrisbbreuer" target="_blank" class="quick-launch-icon" title="Sponsor">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+        </a>
+        <a href="https://discord.gg/stacksjs" target="_blank" class="quick-launch-icon" title="Discord">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
+          </svg>
+        </a>
+      </div>
+      <div class="taskbar-divider"></div>
+      <div class="taskbar-tasks" id="taskbar-tasks"></div>
+      <div class="taskbar-clock" id="clock">12:00 PM</div>
+    </div>
+    <!-- Notification Popup -->
+    <div class="hidden notification-popup" id="notification-popup">
+      <div class="notification-header">
+        <div class="notification-icon">⭐</div>
+        <div class="notification-title">Build Anything</div>
+        <div class="notification-count">5</div>
+        <button class="notification-close" onclick="closeNotification()">×</button>
+      </div>
+      <div class="notification-features">
+        <div class="notification-feature">
+          <div class="notification-feature-icon"></div>
+          <div>Modern web applications & APIs</div>
+        </div>
+        <div class="notification-feature">
+          <div class="notification-feature-icon"></div>
+          <div>One UI. 3 apps. <em>Web, Desktop & Mobile.</em></div>
+        </div>
+        <div class="notification-feature">
+          <div class="notification-feature-icon"></div>
+          <div>Cloud infrastructure & serverless</div>
+        </div>
+        <div class="notification-feature">
+          <div class="notification-feature-icon"></div>
+          <div>Type-safe with TypeScript</div>
+        </div>
+        <div class="notification-feature">
+          <div class="notification-feature-icon"></div>
+          <div>Lightning fast with Bun</div>
+        </div>
+      </div>
+      <div class="notification-signup" id="notification-signup">
+        <div class="notification-separator"></div>
+        <div class="notification-signup-text">Get updates on new features & releases:</div>
+        <div class="notification-signup-form">
+          <input
+            type="email"
+            id="notification-email"
+            class="notification-email-input"
+            placeholder="your@email.com"
+            autocomplete="email"
+          />
+          <button class="notification-signup-btn" onclick="handleEmailSignup()">
+            Sign Up
+          </button>
+        </div>
+      </div>
+      <div class="notification-success" id="notification-success" style="display: none;">
+        <div class="notification-separator"></div>
+        <div class="notification-success-content">
+          <div class="notification-success-icon">✓</div>
+          <div class="notification-success-text">
+            <div class="notification-success-title">Thanks for subscribing!</div>
+            <div class="notification-success-subtitle">We'll keep you updated.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Context Menu (outside desktop div to avoid layout inheritance) -->
+  <div class="context-menu" id="context-menu" style="display: none;">
+    <div class="context-menu-item has-submenu">
+      <div class="context-menu-item-icon">📤</div>
+      <div>Share with a friend...</div>
+      <div class="context-submenu">
+        <button class="context-menu-item" onclick="shareVia('twitter')">
+          <div class="context-menu-item-icon">🐦</div>
+          <div>Share on Twitter</div>
+        </button>
+        <button class="context-menu-item" onclick="shareVia('bluesky')">
+          <div class="context-menu-item-icon">🦋</div>
+          <div>Share on Bluesky</div>
+        </button>
+        <button class="context-menu-item" onclick="shareVia('linkedin')">
+          <div class="context-menu-item-icon">💼</div>
+          <div>Share on LinkedIn</div>
+        </button>
+        <button class="context-menu-item" onclick="shareVia('email')">
+          <div class="context-menu-item-icon">�</div>
+          <div>Share via Email</div>
+        </button>
+        <button class="context-menu-item" onclick="shareVia('copy')">
+          <div class="context-menu-item-icon">📋</div>
+          <div>Copy Link</div>
+        </button>
+      </div>
+    </div>
+    <div class="context-menu-separator"></div>
+    <button class="context-menu-item" onclick="copyLogoSVG()">
+      <div class="context-menu-item-icon">🎨</div>
+      <div>Copy Logo as SVG</div>
+    </button>
+    <button class="context-menu-item" onclick="copyWordmarkSVG()">
+      <div class="context-menu-item-icon">✏️</div>
+      <div>Copy Wordmark as SVG</div>
+    </button>
+    <button class="context-menu-item" onclick="window.open('https://stacksjs.com/brand', '_blank')">
+      <div class="context-menu-item-icon">📖</div>
+      <div>Brand Guidelines</div>
+    </button>
+    <div class="context-menu-separator"></div>
+    <button class="context-menu-item" onclick="window.open('https://stacksjs.com/docs', '_blank')">
+      <div class="context-menu-item-icon">📚</div>
+      <div>Documentation</div>
+    </button>
+    <button class="context-menu-item" onclick="window.open('https://github.com/stacksjs/stacks', '_blank')">
+      <div class="context-menu-item-icon">💻</div>
+      <div>View on GitHub</div>
+    </button>
+    <div class="context-menu-separator"></div>
+    <button class="context-menu-item" onclick="changeBackgroundImage()">
+      <div class="context-menu-item-icon">🖼️</div>
+      <div>Change Background Image</div>
+    </button>
+    <div class="context-menu-separator"></div>
+    <button class="context-menu-item" onclick="window.location.reload()">
+      <div class="context-menu-item-icon">🔄</div>
+      <div>Refresh</div>
+    </button>
+  </div>
+  <!-- Icon Context Menu -->
+  <div class="context-menu" id="icon-context-menu" style="display: none;">
+    <button class="context-menu-item" onclick="openIconFromMenu()">
+      <div class="context-menu-item-icon">📂</div>
+      <div>Open</div>
+    </button>
+    <div class="context-menu-separator"></div>
+    <button class="context-menu-item" onclick="renameIcon()">
+      <div class="context-menu-item-icon">✏️</div>
+      <div>Rename</div>
+    </button>
+    <button class="context-menu-item" onclick="deleteIcon()">
+      <div class="context-menu-item-icon">🗑️</div>
+      <div>Delete</div>
+    </button>
+    <div class="context-menu-separator"></div>
+    <div class="context-menu-item has-submenu">
+      <div class="context-menu-item-icon">📤</div>
+      <div>Share with a friend...</div>
+      <div class="context-submenu">
+        <button class="context-menu-item" onclick="shareVia('twitter')">
+          <div class="context-menu-item-icon">🐦</div>
+          <div>Share on Twitter</div>
+        </button>
+        <button class="context-menu-item" onclick="shareVia('bluesky')">
+          <div class="context-menu-item-icon">🦋</div>
+          <div>Share on Bluesky</div>
+        </button>
+        <button class="context-menu-item" onclick="shareVia('linkedin')">
+          <div class="context-menu-item-icon">💼</div>
+          <div>Share on LinkedIn</div>
+        </button>
+        <button class="context-menu-item" onclick="shareVia('email')">
+          <div class="context-menu-item-icon">�</div>
+          <div>Share via Email</div>
+        </button>
+        <button class="context-menu-item" onclick="shareVia('copy')">
+          <div class="context-menu-item-icon">📋</div>
+          <div>Copy Link</div>
+        </button>
+      </div>
+    </div>
+    <div class="context-menu-separator"></div>
+    <button class="context-menu-item" onclick="copyLogoSVG()">
+      <div class="context-menu-item-icon">🎨</div>
+      <div>Copy Logo as SVG</div>
+    </button>
+    <button class="context-menu-item" onclick="copyWordmarkSVG()">
+      <div class="context-menu-item-icon">✏️</div>
+      <div>Copy Wordmark as SVG</div>
+    </button>
+    <button class="context-menu-item" onclick="window.open('https://stacksjs.com/brand', '_blank')">
+      <div class="context-menu-item-icon">📖</div>
+      <div>Brand Guidelines</div>
+    </button>
+    <div class="context-menu-separator"></div>
+    <button class="context-menu-item" onclick="window.open('https://stacksjs.com/docs', '_blank')">
+      <div class="context-menu-item-icon">📚</div>
+      <div>Documentation</div>
+    </button>
+    <button class="context-menu-item" onclick="window.open('https://github.com/stacksjs/stacks', '_blank')">
+      <div class="context-menu-item-icon">💻</div>
+      <div>View on GitHub</div>
+    </button>
+    <div class="context-menu-separator"></div>
+    <button class="context-menu-item" onclick="window.location.reload()">
+      <div class="context-menu-item-icon">🔄</div>
+      <div>Refresh</div>
+    </button>
+  </div>
+  <script type="module" src="/assets/scripts/main.ts"></script>
+</body>
+</html>