@invisibleloop/pulse 0.2.15 → 0.4.0

package/src/spec/schema.js

@@ -371,13 +371,6 @@ export function validateSpec(spec) {
     }
   }
 
-  // hydrate — required whenever there is any client interactivity
-  if (!spec.hydrate && !spec.contentType) {
-    if (spec.mutations || spec.actions || spec.persist) {
-      warnings.push('spec.hydrate is missing — pages with mutations, actions, or persist need hydrate set to their browser-importable path, or client interactivity will silently do nothing')
-    }
-  }
-
   // meta quality
   if (!spec.meta) {
     warnings.push('spec.meta is missing — add at minimum title and description for SEO')

package/src/ui/nav.js

@@ -9,21 +9,69 @@
  * reveals an absolutely-positioned dropdown that overlays page content.
  * Wired automatically by pulse-ui.js — no extra JS needed.
  *
+ * Links may be plain links or mega-nav dropdowns:
+ *   { label: 'Docs', href: '/docs' }
+ *   { label: 'Products', mega: [
+ *     { heading: 'Solutions', items: [
+ *       { label: 'Analytics', href: '/analytics', description: 'Track metrics' },
+ *     ]},
+ *   ]}
+ *
  * @param {object}  opts
- * @param {string}  opts.logo      - Raw HTML slot — SVG, img, or text
- * @param {string}  opts.logoHref  - Logo link destination (default: '/')
- * @param {Array<{label: string, href: string}>} opts.links
- * @param {string}  opts.action    - Raw HTML slot — typically a button()
- * @param {boolean} opts.sticky      - Position sticky with backdrop blur
+ * @param {string}  opts.logo       - Raw HTML slot — SVG, img, or text
+ * @param {string}  opts.logoHref   - Logo link destination (default: '/')
+ * @param {Array<{label:string, href?:string, mega?:Array}>} opts.links
+ * @param {string}  opts.action     - Raw HTML slot — typically a button()
+ * @param {boolean} opts.sticky     - Position sticky with backdrop blur
  * @param {'right'|'left'} opts.burgerAlign - Mobile burger position (default: 'right')
  * @param {string}  opts.class
  */
 
 import { escHtml as e } from '../html.js'
-import { iconMenu, iconX } from './icons.js'
+import { iconMenu, iconX, iconChevronDown } from './icons.js'
 
 let _navId = 0
 
+function megaItem({ label = '', href = '', description = '' }) {
+  return `<div class="ui-nav-mega-item">
+    <a href="${e(href)}" class="ui-nav-mega-item-label">${e(label)}</a>
+    ${description ? `<span class="ui-nav-mega-item-desc">${e(description)}</span>` : ''}
+  </div>`
+}
+
+function megaPanel(columns, panelId) {
+  const cols = columns.map(col => `
+    <div class="ui-nav-mega-col">
+      ${col.heading ? `<p class="ui-nav-mega-heading">${e(col.heading)}</p>` : ''}
+      ${(col.items || []).map(megaItem).join('')}
+    </div>`).join('')
+  return `<div class="ui-nav-mega-panel" id="${panelId}" hidden>
+    <div class="ui-nav-mega-inner">${cols}
+    </div>
+  </div>`
+}
+
+function renderLink(link, navId, idx) {
+  if (link.mega) {
+    const panelId = `${navId}-mega-${idx}`
+    return `<div class="ui-nav-mega-wrap">
+    <button type="button" class="ui-nav-link ui-nav-mega-trigger" aria-expanded="false" aria-haspopup="true" aria-controls="${panelId}">
+      ${e(link.label || '')}${iconChevronDown({ size: 13, class: 'ui-nav-mega-chevron' })}
+    </button>
+    ${megaPanel(link.mega, panelId)}
+  </div>`
+  }
+  return `<a href="${e(link.href || '')}" class="ui-nav-link">${e(link.label || '')}</a>`
+}
+
+function renderMobileLink(link) {
+  if (link.mega) {
+    const items = link.mega.flatMap(col => col.items || [])
+    return `<p class="ui-nav-mobile-section">${e(link.label || '')}</p>` + items.map(item => megaItem(item)).join('')
+  }
+  return `<a href="${e(link.href || '')}" class="ui-nav-link">${e(link.label || '')}</a>`
+}
+
 export function nav({
   logo          = '',
   logoHref      = '/',
@@ -36,9 +84,8 @@ export function nav({
   const id      = `ui-nav-${++_navId}`
   const classes = ['ui-nav', sticky && 'ui-nav--sticky', burgerAlign === 'left' && 'ui-nav--burger-left', cls].filter(Boolean).join(' ')
 
-  const linksHtml = links.map(({ label = '', href = '' }) =>
-    `<a href="${e(href)}" class="ui-nav-link">${e(label)}</a>`
-  ).join('')
+  const linksHtml       = links.map((l, i) => renderLink(l, id, i)).join('')
+  const mobileLinksHtml = links.map(renderMobileLink).join('')
 
   const burgerHtml = links.length ? `
   <button class="ui-nav-burger" type="button" aria-label="Toggle menu" aria-expanded="false" aria-controls="${id}-mobile">
@@ -48,7 +95,7 @@ export function nav({
 
   const mobileMenuHtml = links.length ? `
   <div class="ui-nav-mobile" id="${id}-mobile" aria-label="Mobile navigation">
-    <nav>${linksHtml}</nav>
+    <nav>${mobileLinksHtml}</nav>
   </div>` : ''
 
   return `<header class="${e(classes)}">