@invisibleloop/pulse 0.2.15 → 0.4.0

package/CLAUDE.md

@@ -40,7 +40,6 @@ A spec is a plain JS object. Every property is optional except `route`, `state`,
 ```js
 export const mySpec = {
   route:   '/path',           // URL pattern, supports :params
-  hydrate: '/path/to/spec.js',// browser-importable path → enables hydration
 
   meta: {
     title:       'Page Title',
@@ -199,29 +198,41 @@ The server auto-detects the manifest from `staticDir/dist/manifest.json` when `s
 ```js
 import { createServer } from './src/server/index.js'
 
-createServer([specA, specB], {
-  port:         3000,
-  stream:       true,          // streaming SSR (default)
-  staticDir:    'public',      // serve static files + auto-load manifest
-  manifest:     null,          // explicit manifest path or object (overrides auto-detect)
-  defaultCache: 3600,          // default HTML cache TTL in seconds for all pages (prod only)
-                               // also accepts true (3600s + swr 86400s) or { public, maxAge, staleWhileRevalidate }
-                               // spec.cache overrides per-page; in-process + Cache-Control headers both set
-  fetcherTimeout:  5000,        // ms before any server fetcher times out (null = no limit)
-                                // spec.serverTimeout overrides per-page
-  shutdownTimeout: 30000,       // ms to wait for in-flight requests before force-exit on SIGTERM/SIGINT
-  healthCheck:     '/healthz',  // built-in health endpoint path, or false to disable
-  csp: {                        // extra sources merged into the framework's default CSP
-    'style-src': ['https://fonts.googleapis.com'],
-    'font-src':  ['https://fonts.gstatic.com'],
-  },
-  resolveBrand: async (host) => db.brands.findBySlug(host.split('.')[0]),
-                               // multi-brand: result cached 60s, attached to ctx.brand
-  onRequest:    (req, res) => { /* return false to short-circuit */ },
-  onError:      (err, req, res) => { /* custom error handling */ }
-})
+// Pass URL objects — hydrate is auto-derived, no need to set it in specs.
+// Specs with mutations/actions/persist are hydrated automatically.
+// Purely server-rendered specs get zero JavaScript.
+await createServer(
+  [
+    new URL('./src/pages/home.js',    import.meta.url),
+    new URL('./src/pages/contact.js', import.meta.url),
+  ],
+  {
+    port:         3000,
+    stream:       true,          // streaming SSR (default)
+    staticDir:    'public',      // serve static files + auto-load manifest
+    root:         new URL('.', import.meta.url),  // project root for deriving browser paths
+    manifest:     null,          // explicit manifest path or object (overrides auto-detect)
+    defaultCache: 3600,          // default HTML cache TTL in seconds for all pages (prod only)
+                                 // also accepts true (3600s + swr 86400s) or { public, maxAge, staleWhileRevalidate }
+                                 // spec.cache overrides per-page; in-process + Cache-Control headers both set
+    fetcherTimeout:  5000,        // ms before any server fetcher times out (null = no limit)
+                                  // spec.serverTimeout overrides per-page
+    shutdownTimeout: 30000,       // ms to wait for in-flight requests before force-exit on SIGTERM/SIGINT
+    healthCheck:     '/healthz',  // built-in health endpoint path, or false to disable
+    csp: {                        // extra sources merged into the framework's default CSP
+      'style-src': ['https://fonts.googleapis.com'],
+      'font-src':  ['https://fonts.gstatic.com'],
+    },
+    resolveBrand: async (host) => db.brands.findBySlug(host.split('.')[0]),
+                                 // multi-brand: result cached 60s, attached to ctx.brand
+    onRequest:    (req, res) => { /* return false to short-circuit */ },
+    onError:      (err, req, res) => { /* custom error handling */ }
+  }
+)
 ```
 
+`createServer` is async — always `await` it. Spec objects are still accepted alongside URL objects for backwards compatibility.
+
 All specs are validated at startup — bad specs throw before the server accepts connections.
 
 ## Multi-brand Sites

package/docs/public/pulse-ui.css

@@ -1280,6 +1280,82 @@ hr.ui-divider {
 }
 .ui-nav-mobile .ui-nav-link:last-child { border-bottom: none; }
 .ui-nav-mobile-action { padding-top: .75rem; }
+.ui-nav-mobile-section {
+  font-size:      .7rem;
+  font-weight:    600;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color:          var(--ui-muted, var(--muted, #6b6b80));
+  margin:         .75rem 0 .25rem;
+  padding:        0;
+}
+
+/* ─── Mega nav ───────────────────────────────────────────────────────────── */
+.ui-nav-mega-wrap { position: relative; }
+
+.ui-nav-mega-trigger {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: .3rem;
+  padding: 0;
+  font: inherit;
+  font-size: .875rem;
+}
+
+.ui-nav-mega-chevron { transition: transform .2s ease; flex-shrink: 0; }
+.ui-nav-mega-wrap--open .ui-nav-mega-chevron { transform: rotate(180deg); }
+
+.ui-nav-mega-panel {
+  position: absolute;
+  top: calc(100% + .875rem);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--ui-bg, var(--bg, #0d0d10));
+  border: 1px solid var(--ui-border, var(--border, #232329));
+  border-radius: var(--ui-radius, 8px);
+  box-shadow: 0 8px 40px rgba(0,0,0,.35);
+  padding: 1.5rem;
+  z-index: 200;
+  min-width: 360px;
+}
+.ui-nav-mega-panel[hidden] { display: none !important; }
+
+.ui-nav-mega-inner { display: flex; gap: 2rem; }
+
+.ui-nav-mega-col { flex: 1; min-width: 140px; }
+
+.ui-nav-mega-heading {
+  font-size: .7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--ui-muted, var(--muted, #6b6b80));
+  margin: 0 0 .5rem;
+  padding: 0 .5rem;
+}
+
+.ui-nav-mega-item {
+  display: flex;
+  flex-direction: column;
+  gap: .15rem;
+  padding: .5rem;
+  border-radius: calc(var(--ui-radius, 8px) * .65);
+  transition: background .15s;
+}
+.ui-nav-mega-item:hover { background: var(--ui-surface, var(--surface, #111116)); }
+.ui-nav-mega-item-label {
+  font-size: .875rem;
+  font-weight: 500;
+  color: var(--ui-text, var(--text, #e2e2ea));
+  text-decoration: none;
+}
+.ui-nav-mega-item-label:hover { color: var(--ui-accent, var(--accent, #9b8dff)); }
+.ui-nav-mega-item-desc  { font-size: .75rem; color: var(--ui-muted, var(--muted, #6b6b80)); }
+
+[data-theme="light"] .ui-nav-mega-panel { box-shadow: 0 8px 40px rgba(0,0,0,.12); }
 
 /* ─── App Badge ──────────────────────────────────────────────────────────── */
 .ui-app-badge {

package/docs/public/pulse-ui.js

@@ -131,19 +131,34 @@ document.addEventListener('keydown', (e) => {
 function initNav(el) {
   const burger = el.querySelector('.ui-nav-burger')
   const mobile = el.querySelector('.ui-nav-mobile')
-  if (!burger || !mobile) return
 
-  const open  = () => { el.classList.add('ui-nav--open');    burger.setAttribute('aria-expanded', 'true') }
-  const close = () => { el.classList.remove('ui-nav--open'); burger.setAttribute('aria-expanded', 'false') }
-  const toggle = () => el.classList.contains('ui-nav--open') ? close() : open()
+  // Mobile burger
+  if (burger && mobile) {
+    const open   = () => { el.classList.add('ui-nav--open');    burger.setAttribute('aria-expanded', 'true') }
+    const close  = () => { el.classList.remove('ui-nav--open'); burger.setAttribute('aria-expanded', 'false') }
+    const toggle = () => el.classList.contains('ui-nav--open') ? close() : open()
 
-  burger.addEventListener('click', toggle)
+    burger.addEventListener('click', toggle)
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close() })
+    document.addEventListener('click',   (e) => { if (!el.contains(e.target)) close() })
+    mobile.querySelectorAll('.ui-nav-link').forEach(a => a.addEventListener('click', close))
+  }
+
+  // Mega nav dropdowns
+  el.querySelectorAll('.ui-nav-mega-wrap').forEach(wrap => {
+    const trigger = wrap.querySelector('.ui-nav-mega-trigger')
+    const panel   = wrap.querySelector('.ui-nav-mega-panel')
+    if (!trigger || !panel) return
 
-  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close() })
-  document.addEventListener('click',   (e) => { if (!el.contains(e.target)) close() })
+    const openMega  = () => { panel.hidden = false; wrap.classList.add('ui-nav-mega-wrap--open');    trigger.setAttribute('aria-expanded', 'true') }
+    const closeMega = () => { panel.hidden = true;  wrap.classList.remove('ui-nav-mega-wrap--open'); trigger.setAttribute('aria-expanded', 'false') }
+    const toggleMega = () => panel.hidden ? openMega() : closeMega()
 
-  // Close when a mobile link is clicked (navigating away)
-  mobile.querySelectorAll('.ui-nav-link').forEach(a => a.addEventListener('click', close))
+    trigger.addEventListener('click', (e) => { e.stopPropagation(); toggleMega() })
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeMega() })
+    document.addEventListener('click',   (e) => { if (!wrap.contains(e.target)) closeMega() })
+    panel.querySelectorAll('.ui-nav-mega-item').forEach(a => a.addEventListener('click', closeMega))
+  })
 }
 
 function runNavs() { document.querySelectorAll('.ui-nav').forEach(initNav) }

package/docs/server.js

@@ -1,8 +1,8 @@
-import fs                 from 'fs'
-import { createServer }   from '../src/server/index.js'
-import { initLayoutManifest } from './src/lib/layout.js'
-import { metrics }        from './src/lib/stats.js'
-import { metricsStore }   from './src/lib/metrics-store.js'
+import fs                      from 'fs'
+import { createServer }        from '../src/server/index.js'
+import { initLayoutManifest }  from './src/lib/layout.js'
+import { metrics }             from './src/lib/stats.js'
+import { metricsStore }        from './src/lib/metrics-store.js'
 metricsStore.current = metrics
 
 // Populate hashed asset paths in layout.js before any page renders
@@ -10,194 +10,113 @@ try {
   const raw = fs.readFileSync(new URL('./public/dist/manifest.json', import.meta.url), 'utf8')
   initLayoutManifest(JSON.parse(raw))
 } catch { /* dev: no manifest yet, layout falls back to unhashed paths */ }
-import home               from './src/pages/home.js'
-import howItWorks        from './src/pages/how-it-works.js'
-import faq               from './src/pages/faq.js'
-import config             from './src/pages/config.js'
-import gettingStarted     from './src/pages/getting-started.js'
-import slashCommands      from './src/pages/slash-commands.js'
-import promptExamples     from './src/pages/prompt-examples.js'
-import components         from './src/pages/components.js'
-import projectStructure   from './src/pages/project-structure.js'
-import spec               from './src/pages/spec.js'
-import state              from './src/pages/state.js'
-import mutations          from './src/pages/mutations.js'
-import actions            from './src/pages/actions.js'
-import validation         from './src/pages/validation.js'
-import constraints        from './src/pages/constraints.js'
-import persist            from './src/pages/persist.js'
-import serverData         from './src/pages/server-data.js'
-import routing            from './src/pages/routing.js'
-import streaming          from './src/pages/streaming.js'
-import caching            from './src/pages/caching.js'
-import guard              from './src/pages/guard.js'
-import rawResponses       from './src/pages/raw-responses.js'
-import serverApi          from './src/pages/server-api.js'
-import hydration          from './src/pages/hydration.js'
-import navigation         from './src/pages/navigation.js'
-import images             from './src/pages/images.js'
-import extending          from './src/pages/extending.js'
-import deploy             from './src/pages/deploy.js'
-import supabase           from './src/pages/supabase.js'
-import auth               from './src/pages/auth.js'
-import stripe             from './src/pages/stripe.js'
-import meta               from './src/pages/meta.js'
-import performance        from './src/pages/performance.js'
-import accessibility      from './src/pages/accessibility.js'
-import testing           from './src/pages/testing.js'
-import store             from './src/pages/store.js'
 
-// Component pages
-import compButton      from './src/pages/components/button.js'
-import compBadge       from './src/pages/components/badge.js'
-import compCard        from './src/pages/components/card.js'
-import compInput       from './src/pages/components/input.js'
-import compSelect      from './src/pages/components/select.js'
-import compTextarea    from './src/pages/components/textarea.js'
-import compAlert       from './src/pages/components/alert.js'
-import compStat        from './src/pages/components/stat.js'
-import compAvatar      from './src/pages/components/avatar.js'
-import compEmpty       from './src/pages/components/empty.js'
-import compTable       from './src/pages/components/table.js'
-import compNav         from './src/pages/components/nav.js'
-import compHero        from './src/pages/components/hero.js'
-import compAppBadge    from './src/pages/components/app-badge.js'
-import compFeature     from './src/pages/components/feature.js'
-import compTestimonial from './src/pages/components/testimonial.js'
-import compPricing     from './src/pages/components/pricing.js'
-import compAccordion   from './src/pages/components/accordion.js'
-import compContainer   from './src/pages/components/container.js'
-import compSection     from './src/pages/components/section.js'
-import compGrid        from './src/pages/components/grid.js'
-import compStack       from './src/pages/components/stack.js'
-import compCluster     from './src/pages/components/cluster.js'
-import compDivider     from './src/pages/components/divider.js'
-import compBanner      from './src/pages/components/banner.js'
-import compMedia       from './src/pages/components/media.js'
-import compTooltip     from './src/pages/components/tooltip.js'
-import compModal       from './src/pages/components/modal.js'
-import compCarousel    from './src/pages/components/carousel.js'
-import compCta         from './src/pages/components/cta.js'
-import compFooter      from './src/pages/components/footer.js'
-import compCodeWindow  from './src/pages/components/code-window.js'
-import compFieldset    from './src/pages/components/fieldset.js'
-import compToggle      from './src/pages/components/toggle.js'
-import compCheckbox    from './src/pages/components/checkbox.js'
-import compFileUpload  from './src/pages/components/fileupload.js'
-import compSlider      from './src/pages/components/slider.js'
-import compSegmented   from './src/pages/components/segmented.js'
-import compRadio       from './src/pages/components/radio.js'
-import compRating      from './src/pages/components/rating.js'
-import compSearch      from './src/pages/components/search.js'
-import compSpinner     from './src/pages/components/spinner.js'
-import compProgress    from './src/pages/components/progress.js'
-import compBreadcrumbs from './src/pages/components/breadcrumbs.js'
-import compStepper     from './src/pages/components/stepper.js'
-import compImage       from './src/pages/components/image.js'
-import compPullquote   from './src/pages/components/pullquote.js'
-import compProse       from './src/pages/components/prose.js'
-import compHeading     from './src/pages/components/heading.js'
-import compList        from './src/pages/components/list.js'
-import compTimeline    from './src/pages/components/timeline.js'
-import compCharts      from './src/pages/components/charts.js'
-import compIcons       from './src/pages/components/icons.js'
-
-createServer(
+await createServer(
   [
-    home,
-    howItWorks,
-    faq,
-    config,
-    gettingStarted,
-    slashCommands,
-    promptExamples,
-    components,
-    projectStructure,
-    spec,
-    state,
-    mutations,
-    actions,
-    validation,
-    constraints,
-    persist,
-    serverData,
-    routing,
-    streaming,
-    caching,
-    guard,
-    rawResponses,
-    serverApi,
-    hydration,
-    navigation,
-    images,
-    extending,
-    deploy,
-    supabase,
-    auth,
-    stripe,
-    meta,
-    performance,
-    accessibility,
-    testing,
-    store,
-    // Component pages
-    compButton,
-    compBadge,
-    compCard,
-    compInput,
-    compSelect,
-    compTextarea,
-    compAlert,
-    compStat,
-    compAvatar,
-    compEmpty,
-    compTable,
-    compNav,
-    compHero,
-    compAppBadge,
-    compFeature,
-    compTestimonial,
-    compPricing,
-    compAccordion,
-    compContainer,
-    compSection,
-    compGrid,
-    compStack,
-    compCluster,
-    compDivider,
-    compBanner,
-    compMedia,
-    compTooltip,
-    compModal,
-    compCarousel,
-    compCta,
-    compFooter,
-    compCodeWindow,
-    compFieldset,
-    compToggle,
-    compCheckbox,
-    compFileUpload,
-    compSlider,
-    compSegmented,
-    compRadio,
-    compRating,
-    compSearch,
-    compSpinner,
-    compProgress,
-    compBreadcrumbs,
-    compStepper,
-    compImage,
-    compPullquote,
-    compProse,
-    compHeading,
-    compList,
-    compTimeline,
-    compCharts,
-    compIcons,
+    // Framework
+    new URL('./src/pages/home.js',              import.meta.url),
+    new URL('./src/pages/how-it-works.js',      import.meta.url),
+    new URL('./src/pages/faq.js',               import.meta.url),
+    new URL('./src/pages/config.js',            import.meta.url),
+    new URL('./src/pages/getting-started.js',   import.meta.url),
+    new URL('./src/pages/slash-commands.js',    import.meta.url),
+    new URL('./src/pages/prompt-examples.js',   import.meta.url),
+    new URL('./src/pages/components.js',        import.meta.url),
+    new URL('./src/pages/project-structure.js', import.meta.url),
+    new URL('./src/pages/spec.js',              import.meta.url),
+    // State & Behaviour
+    new URL('./src/pages/state.js',             import.meta.url),
+    new URL('./src/pages/mutations.js',         import.meta.url),
+    new URL('./src/pages/actions.js',           import.meta.url),
+    new URL('./src/pages/validation.js',        import.meta.url),
+    new URL('./src/pages/constraints.js',       import.meta.url),
+    new URL('./src/pages/persist.js',           import.meta.url),
+    // Server
+    new URL('./src/pages/server-data.js',       import.meta.url),
+    new URL('./src/pages/store.js',             import.meta.url),
+    new URL('./src/pages/routing.js',           import.meta.url),
+    new URL('./src/pages/streaming.js',         import.meta.url),
+    new URL('./src/pages/caching.js',           import.meta.url),
+    new URL('./src/pages/guard.js',             import.meta.url),
+    new URL('./src/pages/raw-responses.js',     import.meta.url),
+    new URL('./src/pages/server-api.js',        import.meta.url),
+    new URL('./src/pages/extending.js',         import.meta.url),
+    // Client
+    new URL('./src/pages/hydration.js',         import.meta.url),
+    new URL('./src/pages/navigation.js',        import.meta.url),
+    new URL('./src/pages/images.js',            import.meta.url),
+    // Deployment
+    new URL('./src/pages/deploy.js',            import.meta.url),
+    // Reference
+    new URL('./src/pages/meta.js',              import.meta.url),
+    new URL('./src/pages/performance.js',       import.meta.url),
+    new URL('./src/pages/accessibility.js',     import.meta.url),
+    new URL('./src/pages/testing.js',           import.meta.url),
+    // Integrations
+    new URL('./src/pages/supabase.js',          import.meta.url),
+    new URL('./src/pages/auth.js',              import.meta.url),
+    new URL('./src/pages/stripe.js',            import.meta.url),
+    // UI Components
+    new URL('./src/pages/components/alert.js',       import.meta.url),
+    new URL('./src/pages/components/avatar.js',      import.meta.url),
+    new URL('./src/pages/components/badge.js',       import.meta.url),
+    new URL('./src/pages/components/breadcrumbs.js', import.meta.url),
+    new URL('./src/pages/components/button.js',      import.meta.url),
+    new URL('./src/pages/components/card.js',        import.meta.url),
+    new URL('./src/pages/components/checkbox.js',    import.meta.url),
+    new URL('./src/pages/components/carousel.js',    import.meta.url),
+    new URL('./src/pages/components/charts.js',      import.meta.url),
+    new URL('./src/pages/components/empty.js',       import.meta.url),
+    new URL('./src/pages/components/fieldset.js',    import.meta.url),
+    new URL('./src/pages/components/fileupload.js',  import.meta.url),
+    new URL('./src/pages/components/heading.js',     import.meta.url),
+    new URL('./src/pages/components/icons.js',       import.meta.url),
+    new URL('./src/pages/components/image.js',       import.meta.url),
+    new URL('./src/pages/components/input.js',       import.meta.url),
+    new URL('./src/pages/components/list.js',        import.meta.url),
+    new URL('./src/pages/components/modal.js',       import.meta.url),
+    new URL('./src/pages/components/progress.js',    import.meta.url),
+    new URL('./src/pages/components/prose.js',       import.meta.url),
+    new URL('./src/pages/components/pullquote.js',   import.meta.url),
+    new URL('./src/pages/components/radio.js',       import.meta.url),
+    new URL('./src/pages/components/rating.js',      import.meta.url),
+    new URL('./src/pages/components/search.js',      import.meta.url),
+    new URL('./src/pages/components/segmented.js',   import.meta.url),
+    new URL('./src/pages/components/select.js',      import.meta.url),
+    new URL('./src/pages/components/slider.js',      import.meta.url),
+    new URL('./src/pages/components/spinner.js',     import.meta.url),
+    new URL('./src/pages/components/stat.js',        import.meta.url),
+    new URL('./src/pages/components/stepper.js',     import.meta.url),
+    new URL('./src/pages/components/table.js',       import.meta.url),
+    new URL('./src/pages/components/textarea.js',    import.meta.url),
+    new URL('./src/pages/components/timeline.js',    import.meta.url),
+    new URL('./src/pages/components/toggle.js',      import.meta.url),
+    new URL('./src/pages/components/tooltip.js',     import.meta.url),
+    // Landing Components
+    new URL('./src/pages/components/accordion.js',   import.meta.url),
+    new URL('./src/pages/components/app-badge.js',   import.meta.url),
+    new URL('./src/pages/components/cta.js',         import.meta.url),
+    new URL('./src/pages/components/feature.js',     import.meta.url),
+    new URL('./src/pages/components/hero.js',        import.meta.url),
+    new URL('./src/pages/components/nav.js',         import.meta.url),
+    new URL('./src/pages/components/pricing.js',     import.meta.url),
+    new URL('./src/pages/components/testimonial.js', import.meta.url),
+    // Layout Components
+    new URL('./src/pages/components/banner.js',      import.meta.url),
+    new URL('./src/pages/components/cluster.js',     import.meta.url),
+    new URL('./src/pages/components/code-window.js', import.meta.url),
+    new URL('./src/pages/components/container.js',   import.meta.url),
+    new URL('./src/pages/components/divider.js',     import.meta.url),
+    new URL('./src/pages/components/footer.js',      import.meta.url),
+    new URL('./src/pages/components/grid.js',        import.meta.url),
+    new URL('./src/pages/components/media.js',       import.meta.url),
+    new URL('./src/pages/components/section.js',     import.meta.url),
+    new URL('./src/pages/components/stack.js',       import.meta.url),
   ],
   {
     port:         process.env.PORT ? Number(process.env.PORT) : 4000,
     staticDir:    new URL('./public', import.meta.url).pathname,
+    root:         new URL('.', import.meta.url),
     defaultCache: true,
     csp: {
       'img-src': ['https://picsum.photos', 'https://images.unsplash.com'],

package/docs/src/pages/components/nav.js

@@ -41,6 +41,47 @@ export default {
 })`
       )}
 
+      <h2 class="doc-h2" id="mega">Mega nav</h2>
+      <p>Replace a link's <code>href</code> with a <code>mega</code> array to render a dropdown panel. Each entry is a column with an optional heading and a list of items. Items support an optional <code>description</code> line.</p>
+      ${demo(
+        uiNav({
+          logo:     '<strong>MyApp</strong>',
+          logoHref: '/',
+          links: [
+            { label: 'Products', mega: [
+              { heading: 'Platform', items: [
+                { label: 'Analytics',   href: '#',   description: 'Dashboards and usage metrics' },
+                { label: 'Automation',  href: '#',   description: 'Scheduled jobs and webhooks' },
+                { label: 'Storage',     href: '#',   description: 'Files, blobs, and databases' },
+              ]},
+              { heading: 'Integrations', items: [
+                { label: 'Supabase',  href: '#' },
+                { label: 'Stripe',    href: '#' },
+                { label: 'Auth0',     href: '#' },
+              ]},
+            ]},
+            { label: 'Pricing', href: '#pricing' },
+            { label: 'Docs',    href: '#docs'    },
+          ],
+          action: button({ label: 'Get started', size: 'sm' }),
+        }),
+        `nav({
+  links: [
+    { label: 'Products', mega: [
+      { heading: 'Platform', items: [
+        { label: 'Analytics',  href: '/analytics',  description: 'Dashboards and usage metrics' },
+        { label: 'Automation', href: '/automation', description: 'Scheduled jobs and webhooks' },
+      ]},
+      { heading: 'Integrations', items: [
+        { label: 'Supabase', href: '/supabase' },
+        { label: 'Stripe',   href: '/stripe'   },
+      ]},
+    ]},
+    { label: 'Pricing', href: '/pricing' },
+  ],
+})`
+      )}
+
       <h2 class="doc-h2" id="mobile">Mobile view</h2>
       <p>At &lt; 640px the links and action are hidden and replaced with a burger button. The panel opens as an overlay — no layout shift.</p>
 
@@ -73,12 +114,21 @@ export default {
       ${table(
         ['Prop', 'Type', 'Default', 'Description'],
         [
-          ['<code>logo</code>',     'string (HTML)', '—',     'Raw HTML slot — SVG, img, or text'],
-          ['<code>logoHref</code>', 'string',        "'/'",   ''],
-          ['<code>links</code>',   'array',          '[]',    '<code>{ label, href }[]</code>'],
-          ['<code>action</code>',  'string (HTML)',  '—',     'Raw HTML slot — shown in desktop bar and mobile menu'],
-          ['<code>sticky</code>',      'boolean', 'false',   'position: sticky with backdrop blur'],
-          ['<code>burgerAlign</code>', 'string',  "'right'", "'right' or 'left' — mobile burger position"],
+          ['<code>logo</code>',        'string (HTML)', '—',       'Raw HTML slot — SVG, img, or text'],
+          ['<code>logoHref</code>',    'string',        "'/'",     ''],
+          ['<code>links</code>',       'array',         '[]',      '<code>{ label, href }[]</code> or <code>{ label, mega: Column[] }</code>'],
+          ['<code>action</code>',      'string (HTML)', '—',       'Raw HTML slot — shown in desktop bar and mobile menu'],
+          ['<code>sticky</code>',      'boolean',       'false',   'position: sticky with backdrop blur'],
+          ['<code>burgerAlign</code>', 'string',        "'right'", "'right' or 'left' — mobile burger position"],
+        ]
+      )}
+
+      <h3 class="doc-h3" style="margin-top:2rem">Mega nav column</h3>
+      ${table(
+        ['Prop', 'Type', 'Description'],
+        [
+          ['<code>heading</code>', 'string', 'Optional column heading (uppercase label)'],
+          ['<code>items</code>',   'array',  '<code>{ label, href, description? }[]</code>'],
         ]
       )}
     `,