@float.js/core 2.0.2 → 2.0.4

package/dist/server/index.js

@@ -566,7 +566,7 @@ function generateDashboardHTML(state) {
         <div class="logo-icon">\u26A1</div>
         <div class="logo-text">
           <span class="logo-title">Float.js</span>
-          <span class="logo-version">v2.0.1</span>
+          <span class="logo-version">v2.0.4</span>
         </div>
       </div>
     </div>
@@ -1306,7 +1306,7 @@ var FLOAT_INDICATOR_SCRIPT = `
   
   var indicator = document.createElement('div');
   indicator.id = '__float-dev-indicator';
-  indicator.innerHTML = '<div class="float-btn" id="float-btn"><svg width="16" height="16" viewBox="0 0 200 200" fill="none"><path d="M50 145C50 136.716 56.7157 130 65 130H105C113.284 130 120 136.716 120 145C120 153.284 113.284 160 105 160H65C56.7157 160 50 153.284 50 145Z" fill="#3B82F6"/><path d="M50 100C50 91.7157 56.7157 85 65 85H135C143.284 85 150 91.7157 150 100C150 108.284 143.284 115 135 115H65C56.7157 115 50 108.284 50 100Z" fill="#6366F1"/><path d="M50 55C50 46.7157 56.7157 40 65 40H155C163.284 40 170 46.7157 170 55C170 63.2843 163.284 70 155 70H65C56.7157 70 50 63.2843 50 55Z" fill="#8B5CF6"/></svg><span class="float-dot" id="float-dot"></span></div><div class="float-panel" id="float-panel"><div class="float-panel-header"><svg width="20" height="20" viewBox="0 0 200 200" fill="none"><path d="M50 145C50 136.716 56.7157 130 65 130H105C113.284 130 120 136.716 120 145C120 153.284 113.284 160 105 160H65C56.7157 160 50 153.284 50 145Z" fill="#3B82F6"/><path d="M50 100C50 91.7157 56.7157 85 65 85H135C143.284 85 150 91.7157 150 100C150 108.284 143.284 115 135 115H65C56.7157 115 50 108.284 50 100Z" fill="#6366F1"/><path d="M50 55C50 46.7157 56.7157 40 65 40H155C163.284 40 170 46.7157 170 55C170 63.2843 163.284 70 155 70H65C56.7157 70 50 63.2843 50 55Z" fill="#8B5CF6"/></svg><span>Float.js</span><span class="float-version">v2.0.1</span></div><div class="float-panel-body"><div class="float-row"><span class="float-label">Estado</span><span class="float-value" id="float-state">Conectando...</span></div><div class="float-row"><span class="float-label">HMR</span><span class="float-value" id="float-hmr">\u2014</span></div><div class="float-row"><span class="float-label">Build</span><span class="float-value" id="float-build">\u2014</span></div></div><div class="float-panel-footer"><a href="/__float" class="float-link">Dashboard</a><a href="https://floatjs.dev/docs" target="_blank" class="float-link">Docs</a></div></div>';
+  indicator.innerHTML = '<div class="float-btn" id="float-btn"><svg width="16" height="16" viewBox="0 0 200 200" fill="none"><path d="M50 145C50 136.716 56.7157 130 65 130H105C113.284 130 120 136.716 120 145C120 153.284 113.284 160 105 160H65C56.7157 160 50 153.284 50 145Z" fill="#3B82F6"/><path d="M50 100C50 91.7157 56.7157 85 65 85H135C143.284 85 150 91.7157 150 100C150 108.284 143.284 115 135 115H65C56.7157 115 50 108.284 50 100Z" fill="#6366F1"/><path d="M50 55C50 46.7157 56.7157 40 65 40H155C163.284 40 170 46.7157 170 55C170 63.2843 163.284 70 155 70H65C56.7157 70 50 63.2843 50 55Z" fill="#8B5CF6"/></svg><span class="float-dot" id="float-dot"></span></div><div class="float-panel" id="float-panel"><div class="float-panel-header"><svg width="20" height="20" viewBox="0 0 200 200" fill="none"><path d="M50 145C50 136.716 56.7157 130 65 130H105C113.284 130 120 136.716 120 145C120 153.284 113.284 160 105 160H65C56.7157 160 50 153.284 50 145Z" fill="#3B82F6"/><path d="M50 100C50 91.7157 56.7157 85 65 85H135C143.284 85 150 91.7157 150 100C150 108.284 143.284 115 135 115H65C56.7157 115 50 108.284 50 100Z" fill="#6366F1"/><path d="M50 55C50 46.7157 56.7157 40 65 40H155C163.284 40 170 46.7157 170 55C170 63.2843 163.284 70 155 70H65C56.7157 70 50 63.2843 50 55Z" fill="#8B5CF6"/></svg><span>Float.js</span><span class="float-version">v2.0.4</span></div><div class="float-panel-body"><div class="float-row"><span class="float-label">Estado</span><span class="float-value" id="float-state">Conectando...</span></div><div class="float-row"><span class="float-label">HMR</span><span class="float-value" id="float-hmr">\u2014</span></div><div class="float-row"><span class="float-label">Build</span><span class="float-value" id="float-build">\u2014</span></div></div><div class="float-panel-footer"><a href="/__float" class="float-link">Dashboard</a><a href="https://floatjs.dev/docs" target="_blank" class="float-link">Docs</a></div></div>';
   
   var styles = document.createElement('style');
   styles.textContent = '#__float-dev-indicator{position:fixed;bottom:16px;left:16px;z-index:99999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:13px}.float-btn{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,0.05);cursor:pointer;transition:all 0.15s}.float-btn:hover{border-color:#d1d5db;box-shadow:0 2px 8px rgba(0,0,0,0.08)}.float-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;transition:background 0.2s}.float-dot.connected{background:#22c55e}.float-dot.error{background:#ef4444}.float-dot.building{background:#eab308;animation:blink 0.8s infinite}@keyframes blink{0%,100%{opacity:1}50%{opacity:0.4}}.float-panel{position:absolute;bottom:48px;left:0;width:240px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,0.1);opacity:0;visibility:hidden;transform:translateY(8px);transition:all 0.2s ease}.float-panel.open{opacity:1;visibility:visible;transform:translateY(0)}.float-panel-header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #f3f4f6;font-weight:600;color:#111827}.float-version{margin-left:auto;font-size:11px;font-weight:400;color:#9ca3af}.float-panel-body{padding:8px 0}.float-row{display:flex;justify-content:space-between;padding:8px 14px}.float-label{color:#6b7280}.float-value{color:#111827;font-weight:500}.float-value.success{color:#16a34a}.float-value.error{color:#dc2626}.float-panel-footer{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #f3f4f6}.float-link{flex:1;text-align:center;padding:8px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;color:#374151;text-decoration:none;font-size:12px;font-weight:500;transition:all 0.15s}.float-link:hover{background:#f3f4f6;border-color:#d1d5db}';
@@ -1729,6 +1729,499 @@ var FLOAT_ERROR_OVERLAY = `
 </script>
 `;
 
+// src/client/welcome-page.ts
+init_esm_shims();
+function generateWelcomePage() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Welcome to Float.js</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%236366f1'/><stop offset='100%25' stop-color='%23d946ef'/></linearGradient></defs><circle cx='16' cy='16' r='14' fill='url(%23g)'/></svg>">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+    
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    
+    :root {
+      --float-purple: #8b5cf6;
+      --float-indigo: #6366f1;
+      --float-pink: #d946ef;
+      --float-cyan: #06b6d4;
+    }
+    
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      background: #0a0a0b;
+      color: white;
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    
+    /* Animated background */
+    .bg-gradient {
+      position: fixed;
+      inset: 0;
+      background: 
+        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.3), transparent),
+        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139, 92, 246, 0.15), transparent),
+        radial-gradient(ellipse 40% 30% at 20% 80%, rgba(217, 70, 239, 0.1), transparent);
+      pointer-events: none;
+    }
+    
+    .bg-grid {
+      position: fixed;
+      inset: 0;
+      background-image: 
+        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+      background-size: 60px 60px;
+      pointer-events: none;
+    }
+    
+    /* Floating orbs */
+    .orb {
+      position: fixed;
+      border-radius: 50%;
+      filter: blur(80px);
+      opacity: 0.5;
+      animation: float 20s ease-in-out infinite;
+      pointer-events: none;
+    }
+    
+    .orb-1 {
+      width: 400px;
+      height: 400px;
+      background: var(--float-purple);
+      top: -100px;
+      right: -100px;
+      animation-delay: 0s;
+    }
+    
+    .orb-2 {
+      width: 300px;
+      height: 300px;
+      background: var(--float-pink);
+      bottom: -50px;
+      left: -50px;
+      animation-delay: -7s;
+    }
+    
+    .orb-3 {
+      width: 200px;
+      height: 200px;
+      background: var(--float-cyan);
+      top: 50%;
+      left: 50%;
+      animation-delay: -14s;
+    }
+    
+    @keyframes float {
+      0%, 100% { transform: translate(0, 0) scale(1); }
+      25% { transform: translate(30px, -30px) scale(1.1); }
+      50% { transform: translate(-20px, 20px) scale(0.9); }
+      75% { transform: translate(20px, 10px) scale(1.05); }
+    }
+    
+    /* Main content */
+    .container {
+      position: relative;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 60px 24px;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    /* Logo */
+    .logo {
+      margin-bottom: 48px;
+      animation: fadeInUp 0.8s ease-out;
+    }
+    
+    .logo svg {
+      width: 80px;
+      height: 80px;
+      filter: drop-shadow(0 0 40px rgba(139, 92, 246, 0.5));
+    }
+    
+    /* Hero */
+    .hero {
+      text-align: center;
+      margin-bottom: 64px;
+    }
+    
+    .hero h1 {
+      font-size: clamp(48px, 10vw, 80px);
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      line-height: 1.1;
+      margin-bottom: 24px;
+      animation: fadeInUp 0.8s ease-out 0.1s both;
+    }
+    
+    .hero h1 .gradient {
+      background: linear-gradient(135deg, var(--float-indigo), var(--float-purple), var(--float-pink));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    .hero p {
+      font-size: 20px;
+      color: rgba(255,255,255,0.6);
+      max-width: 600px;
+      margin: 0 auto;
+      line-height: 1.7;
+      animation: fadeInUp 0.8s ease-out 0.2s both;
+    }
+    
+    /* Features */
+    .features {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 20px;
+      width: 100%;
+      max-width: 900px;
+      margin-bottom: 64px;
+    }
+    
+    .feature {
+      background: rgba(255,255,255,0.03);
+      border: 1px solid rgba(255,255,255,0.06);
+      border-radius: 20px;
+      padding: 28px;
+      transition: all 0.3s ease;
+      animation: fadeInUp 0.8s ease-out both;
+    }
+    
+    .feature:nth-child(1) { animation-delay: 0.3s; }
+    .feature:nth-child(2) { animation-delay: 0.4s; }
+    .feature:nth-child(3) { animation-delay: 0.5s; }
+    
+    .feature:hover {
+      background: rgba(255,255,255,0.05);
+      border-color: rgba(139, 92, 246, 0.3);
+      transform: translateY(-4px);
+    }
+    
+    .feature-icon {
+      width: 48px;
+      height: 48px;
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
+      border-radius: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 16px;
+      font-size: 24px;
+    }
+    
+    .feature h3 {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    
+    .feature p {
+      font-size: 14px;
+      color: rgba(255,255,255,0.5);
+      line-height: 1.6;
+    }
+    
+    /* Code block */
+    .code-section {
+      width: 100%;
+      max-width: 600px;
+      animation: fadeInUp 0.8s ease-out 0.6s both;
+      margin-bottom: 48px;
+    }
+    
+    .code-header {
+      background: rgba(255,255,255,0.05);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-bottom: none;
+      border-radius: 16px 16px 0 0;
+      padding: 14px 20px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    
+    .code-dots {
+      display: flex;
+      gap: 6px;
+    }
+    
+    .code-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: rgba(255,255,255,0.1);
+    }
+    
+    .code-dot:nth-child(1) { background: #ff5f57; }
+    .code-dot:nth-child(2) { background: #febc2e; }
+    .code-dot:nth-child(3) { background: #28c840; }
+    
+    .code-title {
+      margin-left: auto;
+      font-size: 12px;
+      color: rgba(255,255,255,0.4);
+    }
+    
+    .code-block {
+      background: rgba(0,0,0,0.4);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 0 0 16px 16px;
+      padding: 24px;
+      font-family: 'Monaco', 'Menlo', monospace;
+      font-size: 14px;
+      line-height: 1.8;
+      overflow-x: auto;
+    }
+    
+    .code-line {
+      display: flex;
+    }
+    
+    .code-number {
+      color: rgba(255,255,255,0.2);
+      width: 40px;
+      flex-shrink: 0;
+      user-select: none;
+    }
+    
+    .code-content {
+      color: rgba(255,255,255,0.8);
+    }
+    
+    .code-keyword { color: #c792ea; }
+    .code-string { color: #c3e88d; }
+    .code-function { color: #82aaff; }
+    .code-comment { color: rgba(255,255,255,0.3); }
+    .code-tag { color: #f07178; }
+    .code-attr { color: #ffcb6b; }
+    
+    /* Quick start */
+    .quick-start {
+      text-align: center;
+      animation: fadeInUp 0.8s ease-out 0.7s both;
+    }
+    
+    .quick-start h2 {
+      font-size: 14px;
+      font-weight: 500;
+      color: rgba(255,255,255,0.4);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin-bottom: 20px;
+    }
+    
+    .quick-start-cmd {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      background: rgba(255,255,255,0.05);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 12px;
+      padding: 16px 24px;
+      font-family: 'Monaco', 'Menlo', monospace;
+      font-size: 15px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    
+    .quick-start-cmd:hover {
+      background: rgba(255,255,255,0.08);
+      border-color: rgba(139, 92, 246, 0.4);
+    }
+    
+    .quick-start-cmd .prompt {
+      color: var(--float-purple);
+    }
+    
+    .quick-start-cmd .text {
+      color: rgba(255,255,255,0.8);
+    }
+    
+    .quick-start-cmd .copy {
+      opacity: 0.4;
+      transition: opacity 0.2s;
+    }
+    
+    .quick-start-cmd:hover .copy {
+      opacity: 0.8;
+    }
+    
+    /* Links */
+    .links {
+      display: flex;
+      gap: 24px;
+      margin-top: 48px;
+      animation: fadeInUp 0.8s ease-out 0.8s both;
+    }
+    
+    .link {
+      color: rgba(255,255,255,0.5);
+      text-decoration: none;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: color 0.2s;
+    }
+    
+    .link:hover {
+      color: var(--float-purple);
+    }
+    
+    /* Footer */
+    .footer {
+      position: absolute;
+      bottom: 24px;
+      font-size: 12px;
+      color: rgba(255,255,255,0.3);
+      animation: fadeInUp 0.8s ease-out 0.9s both;
+    }
+    
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    
+    /* Responsive */
+    @media (max-width: 640px) {
+      .container { padding: 40px 20px; }
+      .hero h1 { font-size: 40px; }
+      .hero p { font-size: 16px; }
+      .features { gap: 16px; }
+      .feature { padding: 20px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="bg-gradient"></div>
+  <div class="bg-grid"></div>
+  <div class="orb orb-1"></div>
+  <div class="orb orb-2"></div>
+  <div class="orb orb-3"></div>
+  
+  <div class="container">
+    <div class="logo">
+      <svg viewBox="0 0 80 80" fill="none">
+        <defs>
+          <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#6366f1"/>
+            <stop offset="50%" stop-color="#8b5cf6"/>
+            <stop offset="100%" stop-color="#d946ef"/>
+          </linearGradient>
+        </defs>
+        <circle cx="40" cy="40" r="36" stroke="url(#logoGrad)" stroke-width="3" fill="none">
+          <animateTransform attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="20s" repeatCount="indefinite"/>
+        </circle>
+        <circle cx="40" cy="40" r="28" stroke="url(#logoGrad)" stroke-width="2" fill="none" opacity="0.5">
+          <animateTransform attributeName="transform" type="rotate" from="360 40 40" to="0 40 40" dur="15s" repeatCount="indefinite"/>
+        </circle>
+        <path d="M30 28 L54 40 L30 52 Z" fill="url(#logoGrad)"/>
+      </svg>
+    </div>
+    
+    <div class="hero">
+      <h1>Welcome to <span class="gradient">Float.js</span></h1>
+      <p>Tu framework ultramoderno est\xE1 listo. Comienza a crear experiencias web incre\xEDbles con SSR, routing inteligente y desarrollo instant\xE1neo.</p>
+    </div>
+    
+    <div class="features">
+      <div class="feature">
+        <div class="feature-icon">\u26A1</div>
+        <h3>Desarrollo Instant\xE1neo</h3>
+        <p>Hot reload ultrarr\xE1pido con esbuild. Ve tus cambios al instante sin perder el estado.</p>
+      </div>
+      <div class="feature">
+        <div class="feature-icon">\u{1F3AF}</div>
+        <h3>Routing Inteligente</h3>
+        <p>Sistema de rutas basado en archivos. Crea page.tsx y tu ruta est\xE1 lista autom\xE1ticamente.</p>
+      </div>
+      <div class="feature">
+        <div class="feature-icon">\u{1F30A}</div>
+        <h3>SSR Streaming</h3>
+        <p>Renderizado del lado del servidor con React 18 y soporte para streaming nativo.</p>
+      </div>
+    </div>
+    
+    <div class="code-section">
+      <div class="code-header">
+        <div class="code-dots">
+          <div class="code-dot"></div>
+          <div class="code-dot"></div>
+          <div class="code-dot"></div>
+        </div>
+        <span class="code-title">app/page.tsx</span>
+      </div>
+      <div class="code-block">
+        <div class="code-line">
+          <span class="code-number">1</span>
+          <span class="code-content"><span class="code-keyword">export default function</span> <span class="code-function">HomePage</span>() {</span>
+        </div>
+        <div class="code-line">
+          <span class="code-number">2</span>
+          <span class="code-content">  <span class="code-keyword">return</span> (</span>
+        </div>
+        <div class="code-line">
+          <span class="code-number">3</span>
+          <span class="code-content">    <span class="code-tag">&lt;h1&gt;</span>Hello, Float.js!<span class="code-tag">&lt;/h1&gt;</span></span>
+        </div>
+        <div class="code-line">
+          <span class="code-number">4</span>
+          <span class="code-content">  );</span>
+        </div>
+        <div class="code-line">
+          <span class="code-number">5</span>
+          <span class="code-content">}</span>
+        </div>
+      </div>
+    </div>
+    
+    <div class="quick-start">
+      <h2>Crea tu primera p\xE1gina</h2>
+      <div class="quick-start-cmd" onclick="navigator.clipboard.writeText('touch app/about/page.tsx')">
+        <span class="prompt">$</span>
+        <span class="text">touch app/about/page.tsx</span>
+        <span class="copy">\u{1F4CB}</span>
+      </div>
+    </div>
+    
+    <div class="links">
+      <a href="https://floatjs.dev/docs" target="_blank" class="link">
+        <span>\u{1F4D6}</span> Documentaci\xF3n
+      </a>
+      <a href="https://github.com/floatjs/float" target="_blank" class="link">
+        <span>\u2B50</span> GitHub
+      </a>
+      <a href="https://floatjs.dev/examples" target="_blank" class="link">
+        <span>\u{1F3A8}</span> Ejemplos
+      </a>
+    </div>
+    
+    <div class="footer">
+      Float.js v2.0.4 \u2014 Made with \u26A1 for the modern web
+    </div>
+  </div>
+</body>
+</html>`;
+}
+
 // src/server/dev-server.ts
 async function createDevServer(options) {
   const { port, host, open } = options;
@@ -1836,6 +2329,14 @@ ${FLOAT_ERROR_OVERLAY}
         return;
       }
       const { route, params } = matchRoute(pathname, routes);
+      if (!route && pathname === "/" && routes.length === 0) {
+        res.writeHead(200, {
+          "Content-Type": "text/html; charset=utf-8",
+          "Cache-Control": "no-cache"
+        });
+        res.end(generateWelcomePage());
+        return;
+      }
       if (!route) {
         res.writeHead(404, { "Content-Type": "text/html" });
         res.end(create404Page(pathname));