@zenithbuild/core 0.1.0

package/app/pages/navigation-demo.zen

@@ -0,0 +1,229 @@
+<script>
+// Navigation Demo Page
+// Phase 7: Demonstrates prefetch, navigation, and explicit data exposure
+
+// Sample loader data (simulated)
+state loaderData = {
+  user: { name: 'Alice', id: 1 },
+  posts: [
+    { id: 1, title: 'Welcome to Zenith', slug: 'welcome' },
+    { id: 2, title: 'Navigation Guide', slug: 'navigation' }
+  ]
+};
+
+// Sample page props
+state pageProps = {
+  title: 'Navigation Demo',
+  showBreadcrumbs: true
+};
+
+// Sample stores
+state storeData = {
+  cart: { items: 3, total: 99.99 },
+  notifications: [{ id: 1, message: 'Welcome!' }]
+};
+
+// Navigation handlers
+function navigateToAbout(event) {
+  console.log('[Navigation Demo] Navigate to About clicked');
+  if (typeof window !== 'undefined') {
+    if (window.__zenith_router && window.__zenith_router.navigate) {
+      console.log('[Navigation Demo] Using router.navigate');
+      window.__zenith_router.navigate('/about');
+    } else if (window.navigate) {
+      console.log('[Navigation Demo] Using window.navigate');
+      window.navigate('/about');
+    } else {
+      console.warn('[Navigation Demo] Navigation not available');
+    }
+  }
+}
+
+function navigateToBlog(event) {
+  console.log('[Navigation Demo] Navigate to Blog clicked');
+  if (typeof window !== 'undefined') {
+    if (window.__zenith_router && window.__zenith_router.navigate) {
+      console.log('[Navigation Demo] Using router.navigate');
+      window.__zenith_router.navigate('/blog');
+    } else if (window.navigate) {
+      console.log('[Navigation Demo] Using window.navigate');
+      window.navigate('/blog');
+    } else {
+      console.warn('[Navigation Demo] Navigation not available');
+    }
+  }
+}
+
+// Initialize - expose data for navigation
+if (typeof window !== 'undefined') {
+  console.log('[Navigation Demo] Initializing page');
+  console.log('[Navigation Demo] Exposing data:', {
+    loaderData: loaderData,
+    props: pageProps,
+    stores: storeData
+  });
+  
+  window.__ZENITH_LOADER_DATA__ = loaderData;
+  window.__ZENITH_PROPS__ = pageProps;
+  window.__ZENITH_STORES__ = storeData;
+  
+  // Listen for navigation events
+  window.addEventListener('zenith:navigate', function(event) {
+    console.log('[Navigation Demo] Navigation event received:', event.detail);
+  });
+  
+  // Check if router navigation is available
+  if (window.__zenith_router && window.__zenith_router.navigate) {
+    console.log('[Navigation Demo] Router navigation available:', typeof window.__zenith_router.navigate);
+  } else if (window.navigate) {
+    console.log('[Navigation Demo] Navigation function available:', typeof window.navigate);
+  } else {
+    console.warn('[Navigation Demo] Navigation not available');
+  }
+  
+  // Check if router prefetch is available
+  if (window.__zenith_router && window.__zenith_router.prefetch) {
+    console.log('[Navigation Demo] Router prefetch available:', typeof window.__zenith_router.prefetch);
+  } else {
+    console.warn('[Navigation Demo] Router prefetch not available');
+  }
+  
+  console.log('[Navigation Demo] Current route:', window.location.pathname);
+  console.log('[Navigation Demo] Initialization complete');
+}
+</script>
+
+<Main title="Navigation & Prefetch Demo">
+  <div style="max-width: 800px; margin: 0 auto; padding: 20px;">
+    <h1>Phase 7: Navigation & Prefetch Demo</h1>
+    
+    <div style="background: #f5f5f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
+      <h2>Current Route</h2>
+      <p><strong>Path:</strong> <code id="current-route-display">/navigation-demo</code></p>
+      <p style="color: #666; font-size: 0.9em;">Navigate using the links below to see route changes.</p>
+    </div>
+    
+    <div style="background: #e8f4f8; padding: 20px; border-radius: 8px; margin: 20px 0;">
+      <h2>Explicit Data Exposure</h2>
+      <div style="margin: 10px 0;">
+        <h3>Loader Data</h3>
+        <pre style="background: white; padding: 10px; border-radius: 4px; overflow-x: auto;">{JSON.stringify(loaderData, null, 2)}</pre>
+      </div>
+      <div style="margin: 10px 0;">
+        <h3>Props</h3>
+        <pre style="background: white; padding: 10px; border-radius: 4px; overflow-x: auto;">{JSON.stringify(pageProps, null, 2)}</pre>
+      </div>
+      <div style="margin: 10px 0;">
+        <h3>Stores</h3>
+        <pre style="background: white; padding: 10px; border-radius: 4px; overflow-x: auto;">{JSON.stringify(storeData, null, 2)}</pre>
+      </div>
+    </div>
+    
+    <div style="background: #fff4e6; padding: 20px; border-radius: 8px; margin: 20px 0;">
+      <h2>Navigation Examples</h2>
+      
+      <div style="margin: 15px 0;">
+        <h3>ZenLink with Prefetch</h3>
+        <p>These links prefetch on hover:</p>
+        <ul style="list-style: none; padding: 0;">
+          <li style="margin: 10px 0;">
+            <ZenLink href="/" preload={true}>Home (with prefetch)</ZenLink>
+          </li>
+          <li style="margin: 10px 0;">
+            <ZenLink href="/about" preload={true}>About (with prefetch)</ZenLink>
+          </li>
+          <li style="margin: 10px 0;">
+            <ZenLink href="/blog" preload={true}>Blog (with prefetch)</ZenLink>
+          </li>
+        </ul>
+      </div>
+      
+      <div style="margin: 15px 0;">
+        <h3>Programmatic Navigation</h3>
+        <p>Navigate with explicit data (check console for navigation logs):</p>
+        <button 
+          onclick="navigateToAbout"
+          style="padding: 10px 20px; margin: 5px; background: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer;"
+        >
+          Navigate to About
+        </button>
+        <button 
+          onclick="navigateToBlog"
+          style="padding: 10px 20px; margin: 5px; background: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer;"
+        >
+          Navigate to Blog
+        </button>
+      </div>
+      
+      <div style="margin: 15px 0;">
+        <h3>Browser History</h3>
+        <p>Use browser back/forward buttons to test history handling.</p>
+        <p style="color: #666; font-size: 0.9em;">
+          The navigation system handles popstate events and restores DOM state correctly.
+        </p>
+      </div>
+    </div>
+    
+    <div style="background: #f0f0f0; padding: 20px; border-radius: 8px; margin: 20px 0;">
+      <h2>Features Demonstrated</h2>
+      <ul>
+        <li>✅ Prefetch compiled output (HTML + JS)</li>
+        <li>✅ Safe SPA navigation with explicit data</li>
+        <li>✅ Browser back/forward support</li>
+        <li>✅ Route caching</li>
+        <li>✅ Explicit data exposure (loaderData, props, stores)</li>
+        <li>✅ No raw .zen files in browser</li>
+      </ul>
+    </div>
+    
+    <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd;">
+      <nav>
+        <h3>Quick Navigation</h3>
+        <ul style="list-style: none; padding: 0;">
+          <li style="margin: 5px 0;"><ZenLink preload={true} href="/">Home</ZenLink></li>
+          <li style="margin: 5px 0;"><ZenLink href="/about">About</ZenLink></li>
+          <li style="margin: 5px 0;"><ZenLink href="/blog">Blog</ZenLink></li>
+          <li style="margin: 5px 0;"><ZenLink href="/navigation-demo">This Page</ZenLink></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</Main>
+
+<style>
+h1 {
+  color: #333;
+  margin-bottom: 10px;
+}
+
+h2 {
+  color: #555;
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+h3 {
+  color: #666;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 1.1em;
+}
+
+code {
+  background: #f0f0f0;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9em;
+}
+
+pre {
+  font-size: 0.85em;
+  line-height: 1.4;
+}
+
+button:hover {
+  background: #0052a3 !important;
+}
+</style>
+

package/app/pages/posts/[...slug].zen

@@ -0,0 +1,61 @@
+<script>
+// Access route params from the global route state
+const route = window.__zenith_route || { params: {} };
+const slug = route.params.slug || '';
+const slugParts = slug.split('/');
+
+// Update the display when route changes
+if (window.__zenith_router) {
+  window.__zenith_router.onRouteChange(function(newRoute) {
+    const slugEl = document.getElementById('catch-all-slug');
+    const partsEl = document.getElementById('slug-parts');
+    if (slugEl) {
+      slugEl.textContent = newRoute.params.slug || '(empty)';
+    }
+    if (partsEl) {
+      const parts = (newRoute.params.slug || '').split('/');
+      partsEl.innerHTML = parts.map(function(p, i) {
+        return '<li>Part ' + (i + 1) + ': <code>' + p + '</code></li>';
+      }).join('');
+    }
+  });
+}
+</script>
+
+<Main title="Posts - Catch All">
+  <div>
+    <h1>Catch-All Route</h1>
+    
+    <div style="margin: 20px 0; padding: 20px; background: #f8e8f4; border-radius: 8px;">
+      <h2>Slug: <span id="catch-all-slug"></span></h2>
+      <h3>Slug Parts:</h3>
+      <ul id="slug-parts"></ul>
+    </div>
+    
+    <div style="margin: 20px 0; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
+      <h3>Route Information</h3>
+      <p>This page is rendered from <code>pages/posts/[...slug].zen</code></p>
+      <p>Route pattern: <code>/posts/*slug</code></p>
+      <p>This catches all paths starting with <code>/posts/</code></p>
+    </div>
+    
+    <div style="margin: 20px 0;">
+      <h3>Try Different Paths</h3>
+      <ul>
+        <li><a href="/posts/hello">posts/hello</a></li>
+        <li><a href="/posts/hello/world">posts/hello/world</a></li>
+        <li><a href="/posts/2024/01/my-post">posts/2024/01/my-post</a></li>
+        <li><a href="/posts/a/b/c/d/e">posts/a/b/c/d/e</a></li>
+      </ul>
+    </div>
+    
+    <nav style="margin-top: 20px;">
+      <h3>Navigation</h3>
+      <ul style="list-style: none; padding: 0;">
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/blog">Blog</a></li>
+      </ul>
+    </nav>
+  </div>
+</Main>

package/app/pages/primitives-demo.zen

@@ -0,0 +1,273 @@
+<script>
+// ============================================
+// Zen* Primitives Demo
+// ============================================
+// These primitives are AUTO-IMPORTED - no import statement needed!
+// The compiler detects usage and injects them automatically.
+
+// zenSignal - Atomic reactive value
+const count = zenSignal(0)
+const multiplier = zenSignal(2)
+
+function incrementCount() {
+  count(count() + 1)
+}
+
+function decrementCount() {
+  count(count() - 1)
+}
+
+// zenMemo - Computed/cached value
+const doubled = zenMemo(() => count() * 2)
+const multiplied = zenMemo(() => count() * multiplier())
+
+// zenEffect - Auto-tracked side effect
+zenEffect(() => {
+  console.log('[zenEffect] Count changed to:', count())
+  // Update display
+  const el = document.getElementById('count-display')
+  if (el) el.textContent = String(count())
+  
+  const dblEl = document.getElementById('doubled-display')
+  if (dblEl) dblEl.textContent = String(doubled())
+  
+  const mulEl = document.getElementById('multiplied-display')
+  if (mulEl) mulEl.textContent = String(multiplied())
+})
+
+// zenRef - DOM reference
+const inputRef = zenRef()
+
+function focusInput() {
+  if (inputRef.current) {
+    inputRef.current.focus()
+    inputRef.current.select()
+  }
+}
+
+// zenBatch - Batch updates
+function batchUpdate() {
+  zenBatch(() => {
+    count(count() + 1)
+    multiplier(multiplier() + 1)
+  })
+}
+
+// zenOnMount - Lifecycle hook
+zenOnMount(() => {
+  console.log('[zenOnMount] Page mounted!')
+  // Focus input on mount
+  setTimeout(() => {
+    if (inputRef.current) inputRef.current.focus()
+  }, 100)
+  
+  // Return cleanup function
+  return () => {
+    console.log('[zenOnMount cleanup] Page unmounting...')
+  }
+})
+
+// zenOnUnmount - Cleanup hook
+zenOnUnmount(() => {
+  console.log('[zenOnUnmount] Page is unmounting!')
+})
+</script>
+
+<style>
+  body {
+    font-family: system-ui, -apple-system, sans-serif;
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+    background: #f5f5f5;
+  }
+  
+  .demo-section {
+    background: white;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+  
+  .demo-section h2 {
+    margin-top: 0;
+    color: #333;
+    border-bottom: 2px solid #6366f1;
+    padding-bottom: 10px;
+  }
+  
+  .value-display {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    padding: 15px;
+    margin: 10px 0;
+    font-family: 'Monaco', 'Courier New', monospace;
+    font-size: 16px;
+  }
+  
+  .button-group {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin: 10px 0;
+  }
+  
+  button {
+    background: #6366f1;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.2s, transform 0.1s;
+  }
+  
+  button:hover {
+    background: #4f46e5;
+    transform: translateY(-1px);
+  }
+  
+  button:active {
+    transform: translateY(0);
+  }
+  
+  .success { background: #22c55e; }
+  .success:hover { background: #16a34a; }
+  
+  code {
+    background: #e5e7eb;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: 'Monaco', 'Courier New', monospace;
+    font-size: 13px;
+    color: #6366f1;
+  }
+  
+  .highlight {
+    color: #6366f1;
+    font-weight: 600;
+  }
+  
+  input {
+    padding: 10px;
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+    font-size: 14px;
+    width: 200px;
+  }
+  
+  input:focus {
+    border-color: #6366f1;
+    outline: none;
+  }
+  
+  .nav-link {
+    display: inline-block;
+    padding: 8px 16px;
+    background: #6366f1;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+    margin-right: 10px;
+    transition: background 0.2s;
+  }
+  
+  .nav-link:hover {
+    background: #4f46e5;
+  }
+</style>
+
+<Main title="Zen* Primitives Demo">
+  <div>
+    <h1>🎯 Zen* Primitives - Live Demo</h1>
+    <p>All primitives are <span class="highlight">auto-imported</span> - no import statements needed!</p>
+    
+    <!-- zenSignal Demo -->
+    <div class="demo-section">
+      <h2>📊 zenSignal - Reactive Counter</h2>
+      <p>Atomic reactive values with getter/setter pattern</p>
+      
+      <div class="value-display">
+        count() = <strong id="count-display">0</strong>
+      </div>
+      <div class="value-display">
+        doubled (zenMemo) = <strong id="doubled-display">0</strong>
+      </div>
+      <div class="value-display">
+        count × multiplier (zenMemo) = <strong id="multiplied-display">0</strong>
+      </div>
+      
+      <div class="button-group">
+        <button onclick="incrementCount">+1</button>
+        <button onclick="decrementCount">-1</button>
+        <button onclick="batchUpdate" class="success">Batch +1 Both</button>
+      </div>
+      
+      <p style="font-size: 13px; color: #666;">
+        <code>zenSignal(0)</code> creates a reactive value. 
+        <code>zenMemo</code> creates cached computed values.
+        <code>zenEffect</code> automatically updates the DOM when dependencies change.
+      </p>
+    </div>
+    
+    <!-- zenRef Demo -->
+    <div class="demo-section">
+      <h2>🎯 zenRef - DOM Reference</h2>
+      <p>Non-reactive container for DOM elements</p>
+      
+      <input ref="inputRef" type="text" placeholder="Type something here..." />
+      <div class="button-group" style="margin-top: 10px;">
+        <button onclick="focusInput">Focus & Select Input</button>
+      </div>
+      
+      <p style="font-size: 13px; color: #666;">
+        <code>zenRef()</code> creates a mutable container. 
+        Use <code>ref="inputRef"</code> in HTML to bind.
+      </p>
+    </div>
+    
+    <!-- Lifecycle Demo -->
+    <div class="demo-section">
+      <h2>🔄 Lifecycle Hooks</h2>
+      <p>Check the browser console for lifecycle logs!</p>
+      
+      <ul style="font-size: 14px; line-height: 1.8;">
+        <li><code>zenOnMount</code> - runs after page renders (check console)</li>
+        <li><code>zenOnUnmount</code> - runs when navigating away (check console)</li>
+      </ul>
+      
+      <p style="font-size: 13px; color: #666;">
+        Navigate to another page to see unmount logs.
+      </p>
+    </div>
+    
+    <!-- Navigation -->
+    <div class="demo-section">
+      <h2>🔗 Navigation</h2>
+      <p>Test SPA navigation (unmount hooks will fire):</p>
+      <ZenLink href="/" class="nav-link">← Home</ZenLink>
+      <ZenLink href="/about" class="nav-link">About</ZenLink>
+      <ZenLink href="/blog" class="nav-link">Blog</ZenLink>
+    </div>
+    
+    <!-- API Reference -->
+    <div class="demo-section">
+      <h2>📖 Auto-Imported Primitives</h2>
+      <p>These are automatically available in any <code>.zen</code> file:</p>
+      <ul style="font-size: 14px; line-height: 2;">
+        <li><code>zenSignal(value)</code> / <code>signal(value)</code></li>
+        <li><code>zenState(obj)</code> / <code>state(obj)</code></li>
+        <li><code>zenMemo(fn)</code> / <code>memo(fn)</code></li>
+        <li><code>zenEffect(fn)</code> / <code>effect(fn)</code></li>
+        <li><code>zenRef()</code> / <code>ref()</code></li>
+        <li><code>zenBatch(fn)</code> / <code>batch(fn)</code></li>
+        <li><code>zenUntrack(fn)</code> / <code>untrack(fn)</code></li>
+        <li><code>zenOnMount(fn)</code> / <code>onMount(fn)</code></li>
+        <li><code>zenOnUnmount(fn)</code> / <code>onUnmount(fn)</code></li>
+      </ul>
+    </div>
+  </div>
+</Main>