fix(ui): make catalog mega menus interactive

packages/ui/components/MegaMenu.wrn

@@ -18,6 +18,7 @@ component MegaMenu {
     open(payload: { sourceEvent: Event })
     close(payload: { reason: string })
     select(payload: { item: object; value: string })
+    category(payload: { item: object; value: string; index: number })
   }
 
   props {
@@ -35,6 +36,7 @@ component MegaMenu {
     columnCount: number = 0
     fullWidth: boolean = false
     openOnHover: boolean = true
+    activeCategory: string = ""
     actionLabel: string = ""
     actionHref: string = ""
     actionIcon: string = "icon-[lucide--arrow-right]"
@@ -45,6 +47,8 @@ component MegaMenu {
 
   state visible = defaultOpen
   state closeTimer = null
+  state openTimer = null
+  state selectedCategory = activeCategory
 
   functions {
     shared function columnList() {
@@ -59,13 +63,44 @@ component MegaMenu {
       return Array.isArray(rail) ? rail : []
     }
 
+    shared function categoryValue(item) {
+      return item ? String(item.value || item.href || item.label || "") : ""
+    }
+
+    shared function activeCategoryIndex() {
+      const entries = railList()
+      if (!entries.length) {
+        return 0
+      }
+      if (!selectedCategory) {
+        return 0
+      }
+      for (let index = 0; index < entries.length; index += 1) {
+        if (categoryValue(entries[index]) === selectedCategory) {
+          return index
+        }
+      }
+      return 0
+    }
+
+    shared function visibleColumns() {
+      const entries = columnList()
+      if (variant !== "catalog") {
+        return entries
+      }
+      const selected = entries[activeCategoryIndex()]
+      return selected ? [selected] : []
+    }
+
     client function showPanel(sourceEvent) {
+      cancelScheduledOpen()
       cancelScheduledHide()
       visible = true
       output.open({ sourceEvent: sourceEvent })
     }
 
     client function hidePanel(reason) {
+      cancelScheduledOpen()
       cancelScheduledHide()
       visible = false
       output.close({ reason: reason })
@@ -78,6 +113,22 @@ component MegaMenu {
       }
     }
 
+    client function cancelScheduledOpen() {
+      if (openTimer) {
+        window.clearTimeout(openTimer)
+        openTimer = null
+      }
+    }
+
+    client function scheduleOpen(sourceEvent) {
+      cancelScheduledOpen()
+      cancelScheduledHide()
+      openTimer = window.setTimeout(function () {
+        openTimer = null
+        showPanel(sourceEvent)
+      }, 140)
+    }
+
     client function scheduleHide() {
       cancelScheduledHide()
       closeTimer = window.setTimeout(function () {
@@ -104,10 +155,15 @@ component MegaMenu {
 
     client function hoverPanel(sourceEvent) {
       if (openOnHover) {
-        showPanel(sourceEvent)
+        scheduleOpen(sourceEvent)
       }
     }
 
+    client function chooseCategory(item, index) {
+      selectedCategory = categoryValue(item)
+      output.category({ item: item, value: selectedCategory, index: index })
+    }
+
     client function handleKeydown(sourceEvent) {
       if (sourceEvent.key === "Escape" && visible) {
         sourceEvent.preventDefault()
@@ -148,7 +204,7 @@ component MegaMenu {
         aria-haspopup="true"
         aria-expanded='{visible}'
         @click='activatePanel(event)'
-        @mouseenter='hoverPanel(event)'
+        @mousemove='hoverPanel(event)'
       >
         <span class='wrn-mega__trigger-icon {icon}' data-show="icon" aria-hidden="true"></span>
         <span class="wrn-mega__trigger-label">{label}</span>
@@ -165,17 +221,24 @@ component MegaMenu {
         <div class="wrn-mega__layout">
           {#if railList().length > 0}
             <aside class="wrn-mega__rail">
-              {#each railList() as item}
-                <a class="wrn-mega__rail-link" href='{item.href || "#"}' @click='choose(item)'>
-                  {#if item.icon}<span class='wrn-mega__rail-icon {item.icon}' aria-hidden="true"></span>{/if}
-                  <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
-                </a>
+              {#each railList() as item, index}
+                {#if variant === "catalog"}
+                  <button type="button" class="wrn-mega__rail-link" data-active='{activeCategoryIndex() === index ? "true" : "false"}' aria-pressed='{activeCategoryIndex() === index ? "true" : "false"}' @click='chooseCategory(item, index)' @mouseenter='chooseCategory(item, index)'>
+                    {#if item.icon}<span class='wrn-mega__rail-icon {item.icon}' aria-hidden="true"></span>{/if}
+                    <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
+                  </button>
+                {:else}
+                  <a class="wrn-mega__rail-link" href='{item.href || "#"}' @click='choose(item)'>
+                    {#if item.icon}<span class='wrn-mega__rail-icon {item.icon}' aria-hidden="true"></span>{/if}
+                    <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
+                  </a>
+                {/if}
               {/each}
             </aside>
           {/if}
 
           <div class="wrn-mega__columns">
-            {#each columnList() as column}
+            {#each visibleColumns() as column}
               <section class="wrn-mega__column">
                 {#if column.eyebrow}<p class="wrn-mega__eyebrow">{column.eyebrow}</p>{/if}
                 <h3 class="wrn-mega__heading" data-show="column.heading">{column.heading}</h3>
@@ -310,6 +373,8 @@ component MegaMenu {
       max-width: min(60rem, calc(100vw - 2rem));
       max-height: calc(100dvh - 5.5rem);
       padding: 1rem;
+      display: flex;
+      flex-direction: column;
       overflow: hidden;
       border: 1px solid var(--wrn-color-border);
       border-radius: var(--wrn-radius-lg);
@@ -324,7 +389,7 @@ component MegaMenu {
     .wrn-mega[data-panel-align="center"] .wrn-mega__panel { left: 50%; transform: translateX(-50%); }
     .wrn-mega[data-panel-align="end"] .wrn-mega__panel { right: 0; left: auto; }
 
-    .wrn-mega__layout { display: grid; min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; overflow: hidden; }
+    .wrn-mega__layout { display: grid; min-height: 0; max-height: calc(100dvh - 8rem); flex: 1; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; overflow: hidden; }
 
     .wrn-mega__columns {
       display: grid;
@@ -341,8 +406,9 @@ component MegaMenu {
     .wrn-mega[data-column-count="5"] .wrn-mega__columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 
     .wrn-mega__rail { display: grid; min-width: 13rem; min-height: 0; padding: 0.75rem; align-content: start; gap: 0.25rem; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--wrn-radius-lg); background: var(--wrn-color-surface-soft); }
-    .wrn-mega__rail-link { display: flex; padding: 0.65rem; align-items: flex-start; gap: 0.65rem; color: var(--wrn-color-text); border-radius: var(--wrn-radius-sm); text-decoration: none; }
+    .wrn-mega__rail-link { appearance: none; display: flex; width: 100%; padding: 0.65rem; align-items: flex-start; gap: 0.65rem; color: var(--wrn-color-text); border: 0; border-radius: var(--wrn-radius-sm); background: transparent; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
     .wrn-mega__rail-link:hover { background: var(--wrn-color-surface); }
+    .wrn-mega__rail-link[data-active="true"] { color: var(--mega-accent); background: var(--wrn-color-surface); box-shadow: inset 3px 0 0 var(--mega-accent); }
     .wrn-mega__rail-link > span:last-child { display: grid; gap: 0.2rem; }
     .wrn-mega__rail-link strong { font-size: 0.82rem; }
     .wrn-mega__rail-link small { max-width: 18ch; color: var(--wrn-color-text-muted); font-size: 0.72rem; line-height: 1.45; }
@@ -398,6 +464,7 @@ component MegaMenu {
     .wrn-mega[data-variant="icon-grid"] .wrn-mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__link { padding-block: 0.28rem; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__heading { color: var(--wrn-color-text); font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
+    .wrn-mega[data-variant="catalog"] .wrn-mega__columns { grid-template-columns: minmax(0, 1fr); }
     .wrn-mega[data-variant="dark"] .wrn-mega__panel { color: #f8fafc; border-color: #2b2b2b; background: #151515; }
     .wrn-mega[data-variant="dark"] :is(.wrn-mega__heading, .wrn-mega__link, .wrn-mega__featured strong) { color: #f8fafc; }
     .wrn-mega[data-variant="dark"] :is(.wrn-mega__link-description, .wrn-mega__column-description, .wrn-mega__eyebrow, .wrn-mega__featured p) { color: #a3a3a3; }
@@ -468,7 +535,7 @@ component MegaMenu {
       .wrn-mega__columns {
         grid-template-columns: 1fr;
       }
-      .wrn-mega__layout { grid-template-columns: 1fr; overflow: visible; }
+      .wrn-mega__layout { max-height: none; grid-template-columns: 1fr; overflow: visible; }
       .wrn-mega__rail, .wrn-mega__columns { overflow: visible; }
       .wrn-mega__featured { width: auto; padding: 1rem 0 0; border-top: 1px solid var(--wrn-color-border); border-left: 0; }
       .wrn-mega[data-variant="icon-grid"] .wrn-mega__list { grid-template-columns: 1fr; }

packages/ui/components/Navbar.wrn

@@ -197,6 +197,7 @@ size: string = "default"
                   columnCount="{megaData(item).columnCount || 0}"
                   fullWidth="{megaData(item).fullWidth || false}"
                   openOnHover="{openOnHover}"
+                  activeCategory="{megaData(item).activeCategory || ''}"
                   actionLabel="{megaData(item).actionLabel || ''}"
                   actionHref="{megaData(item).actionHref || ''}"
                   actionIcon="{megaData(item).actionIcon || 'icon-[lucide--arrow-right]'}"