makersclaw 0.2.0 → 0.3.0

package/registry/blocks/navigation-menu/README.md

@@ -0,0 +1,124 @@
+# Navigation Menu
+
+A site's top nav. Plain links sit in the bar; a trigger opens a panel — a
+mega-menu — of links, each with an icon, a title and a short
+description, and an optional featured card. The panel opens on hover
+(after a short delay, so a pointer passing by does not open it), on click
+and on Enter. One panel at a time: moving to the next trigger keeps it
+open, glides it under that trigger and slides the links across. Arrow
+keys move along the bar, Escape closes and returns focus to the trigger,
+Tab goes through the open panel in reading order. The current page is
+marked: its link carries `aria-current="page"` (a screen reader says
+"current page", and the row is filled to match), and its group's trigger
+is highlighted. Below
+the `md` breakpoint the bar is a menu button that opens a Sheet, each
+group a Collapsible.
+
+```jsx
+import { NavigationMenu } from "../components/blocks/navigation-menu";   // a Makersclaw app ("./blocks/navigation-menu" from components/)
+import { NavigationMenu } from "@/components/makersclaw/blocks/navigation-menu";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component (a
+layout's header is the usual place).
+
+## The data
+
+`items` is the bar, in order. Each entry is a link or a group:
+
+```js
+{ label: "Pricing", href: "/pricing" }                          // a link
+{
+  label: "Product",                                             // a group: a trigger and its panel
+  items: [{ label, href, icon?, description? }, …],             // the panel's links
+  featured?: { title, href?, description?, kicker?, icon?, cta? },   // a card before them
+  columns?: 1 | 2,                                              // default: 2 past three links
+  key?: "product",                                              // default: made from the position and label
+}
+```
+
+`icon` is a name from the kit's `Icon`. Keep a `description` short:
+the panel clips it at two lines.
+
+## Props
+
+- `items` — the bar, as above.
+- `currentHref` — the page you are on (`usePathname()` in a Next app). A
+  link whose `href` equals it, or is its parent path, is marked current;
+  a group holding it is highlighted. Hash links match exactly.
+- `onNavigate(link, event)` — called when any link in the bar, a panel or
+  the phone sheet is followed, before navigation. `event.preventDefault()`
+  stops it. The panel and the sheet close either way.
+- `brand` — the node on the left (a logo that links home). Shown at every
+  width.
+- `actions` — nodes on the right, e.g. "Sign in" and "Start free"
+  Buttons. In the bar from `md` up; in the sheet's footer on a phone.
+- `label` — what a screen reader calls the nav, default `"Main"`.
+- `menuLabel` — the phone's menu button and the sheet's title, default
+  `"Menu"`.
+- `openDelay` — ms the pointer rests on a trigger before it opens,
+  default `150`. Moving between triggers while one is open is immediate.
+- `closeDelay` — ms after the pointer leaves the trigger and panel before
+  it closes, default `300`.
+- `className` — layout around it (width, padding). Never colour.
+
+## Example
+
+```jsx
+// components/SiteHeader.jsx
+"use client";
+import { usePathname } from "next/navigation";
+import { Button, Icon } from "./ui";
+import { NavigationMenu } from "./blocks/navigation-menu";
+
+const NAV = [
+  {
+    label: "Product",
+    items: [
+      { label: "Analytics", href: "/product/analytics", icon: "chart", description: "See which accounts are warming up." },
+      { label: "Automations", href: "/product/automations", icon: "zap", description: "Route leads without a spreadsheet." },
+      { label: "Integrations", href: "/product/integrations", icon: "link", description: "Sync with your CRM and calendar." },
+      { label: "Security", href: "/product/security", icon: "lock", description: "SSO, audit logs and SOC 2." },
+    ],
+    featured: { kicker: "New", title: "Forecasts that explain themselves", href: "/changelog/forecasts", cta: "Read the release" },
+  },
+  { label: "Pricing", href: "/pricing" },
+  { label: "Docs", href: "/docs" },
+];
+
+export default function SiteHeader() {
+  const pathname = usePathname();
+  return (
+    <header className="border-b border-border bg-background px-4">
+      <NavigationMenu
+        items={NAV}
+        currentHref={pathname}
+        brand={
+          <Button href="/" variant="quiet" size="sm" className="gap-2 font-semibold">
+            <Icon name="zap" /> Fieldline
+          </Button>
+        }
+        actions={
+          <>
+            <Button href="/login" variant="quiet" size="sm">Sign in</Button>
+            <Button href="/signup" variant="primary" size="sm">Start free</Button>
+          </>
+        }
+      />
+    </header>
+  );
+}
+```
+
+## What it will not do
+
+- Nest: a panel holds links, not another menu. A deeper tree is a page.
+- Hold arbitrary content in a panel: links and one featured card. A
+  panel of your own is a `Popover` in your own component.
+- Stick to the top or blur on scroll: put `sticky top-0` on the element
+  around it.
+- Know the route by itself: pass `currentHref`.
+
+A nav it cannot be is your own component in `components/`, built from
+the kit — not an edit to this block. Its files are fixed: `npm run check`
+refuses a change, and `makersclaw add navigation-menu` restores them.

package/registry/blocks/navigation-menu/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "navigation-menu",
+  "title": "Navigation Menu",
+  "description": "A site's top nav: plain links, and triggers that open a mega-menu panel of links (icon, title, one-line description) with an optional featured card; hover with intent, click, arrow keys and Escape; a menu button and a sheet of collapsible groups on a phone.",
+  "useWhen": "The header of a public-facing site or a product with many destinations: a marketing site, a docs hub, a customer portal. Not for an app's own sidebar or a row of tabs that switch views on one page.",
+  "tags": ["navigation", "nav", "menu", "mega-menu", "header", "navbar", "top nav", "dropdown", "links", "site", "marketing", "mobile menu"],
+  "exports": ["NavigationMenu"],
+  "files": ["index.js", "navigation-menu.jsx"],
+  "requires": []
+}

package/registry/blocks/navigation-menu/demo.jsx

@@ -0,0 +1,84 @@
+"use client";
+
+// The NavigationMenu over a product site's pages — the gallery's and the
+// smoke test's surface. Not installed into apps: `makersclaw add
+// navigation-menu` lays index.js and navigation-menu.jsx only. Links are
+// #hashes and a followed one only moves the "current page".
+import { useState } from "react";
+import { Button, Icon } from "../components/ui";
+import { NavigationMenu } from "../components/blocks/navigation-menu";
+
+const NAV = [
+  {
+    label: "Product",
+    items: [
+      { label: "Analytics", href: "#analytics", icon: "chart", description: "See which accounts are warming up, week by week." },
+      { label: "Automations", href: "#automations", icon: "zap", description: "Route leads and follow up without a spreadsheet." },
+      { label: "Shared inbox", href: "#inbox", icon: "inbox", description: "Every reply from every rep, in one queue." },
+      { label: "Integrations", href: "#integrations", icon: "link", description: "Sync with your CRM, calendar and billing." },
+      { label: "Security", href: "#security", icon: "lock", description: "SSO, audit logs and SOC 2 Type II." },
+      { label: "Reports", href: "#reports", icon: "file", description: "Board-ready pipeline reports, every Monday." },
+    ],
+    featured: {
+      kicker: "New in 4.2",
+      icon: "sparkles",
+      title: "Forecasts that explain themselves",
+      description: "Every number now shows the deals behind it.",
+      href: "#forecasts",
+      cta: "Read the release",
+    },
+  },
+  {
+    label: "Solutions",
+    items: [
+      { label: "For founders", href: "#founders", icon: "star", description: "Run your first sales motion without hiring ops." },
+      { label: "For sales teams", href: "#sales", icon: "users", description: "One pipeline the whole team trusts." },
+      { label: "For agencies", href: "#agencies", icon: "folder", description: "A workspace per client, one login for you." },
+    ],
+  },
+  { label: "Pricing", href: "#pricing" },
+  { label: "Docs", href: "#docs" },
+  {
+    label: "Company",
+    items: [
+      { label: "About", href: "#about", icon: "info", description: "Twelve people in Lisbon and Toronto." },
+      { label: "Careers", href: "#careers", icon: "user", description: "Four open roles, all remote." },
+      { label: "Customers", href: "#customers", icon: "heart", description: "How Northwind doubled its reply rate." },
+      { label: "Contact", href: "#contact", icon: "mail", description: "Talk to a person, usually within an hour." },
+    ],
+  },
+];
+
+export default function NavigationMenuDemo() {
+  const [current, setCurrent] = useState("#pricing");
+  return (
+    <div className="grid gap-6">
+      <header className="rounded-lg border border-border bg-card px-3">
+        <NavigationMenu
+          items={NAV}
+          currentHref={current}
+          onNavigate={(link) => setCurrent(link.href)}
+          brand={
+            <Button href="#home" variant="quiet" size="sm" className="gap-2 text-base font-semibold">
+              <Icon name="zap" size={18} className="text-primary" />
+              Fieldline
+            </Button>
+          }
+          actions={
+            <>
+              <Button href="#signin" variant="quiet" size="sm">
+                Sign in
+              </Button>
+              <Button href="#signup" variant="primary" size="sm">
+                Start free
+              </Button>
+            </>
+          }
+        />
+      </header>
+      <p className="text-sm text-muted-foreground">
+        Current page: <span className="font-medium text-foreground">{current}</span>. Hover or click a trigger; arrow keys move along the bar.
+      </p>
+    </div>
+  );
+}

package/registry/blocks/navigation-menu/index.js

@@ -0,0 +1,4 @@
+// The NavigationMenu block — `makersclaw add navigation-menu`. Fixed:
+// compose it through its props (README.md beside this file); a nav it
+// cannot be is your own component in components/.
+export { NavigationMenu } from "./navigation-menu";

package/registry/blocks/navigation-menu/navigation-menu.jsx

@@ -0,0 +1,448 @@
+"use client";
+
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Button, Collapsible, Icon, IconButton, Item, Kicker, Sheet, cx, panelClass, usePopoverPosition } from "../../ui";
+
+// NavigationMenu — a site's top nav: plain links, and triggers that open
+// one shared panel (a mega-menu) of links with an icon, a title and a
+// short description, plus an optional featured card. The block owns
+// what a hand-drawn nav gets wrong: hover with intent (a delay to open,
+// a longer one to close, so the pointer can cross the gap), click and
+// Enter too, one panel at a time that stays open and slides when the
+// pointer moves to the next trigger, arrow keys along the bar, Escape
+// back to the trigger, Tab through the open panel in reading order,
+// aria-expanded and aria-current. Below the md breakpoint it is a menu
+// button opening a Sheet, each group a Collapsible.
+//
+//   <NavigationMenu items={NAV} currentHref={pathname} brand={<Logo />}
+//                   actions={<Button href="/signup" variant="primary">Start free</Button>} />
+//
+// README.md beside this file lists every prop.
+
+const OPEN_DELAY = 150;
+const CLOSE_DELAY = 300;
+const SLIDE_PX = 24;
+const LINKS = "a[href]";
+
+function isActive(href, current) {
+  if (!href || current == null) return false;
+  if (href === current) return true;
+  return href !== "/" && !href.startsWith("#") && current.startsWith(href.endsWith("/") ? href : `${href}/`);
+}
+
+function reducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+
+// A group's featured card as onNavigate hears it: keyed inside the group.
+const featuredOf = (group) => ({ ...group.featured, key: `${group.key}/featured` });
+
+// Items as the block uses them: a key for each, a group's links keyed
+// inside it, and whether the current page is in it.
+function normalize(items, current) {
+  return (items ?? []).filter(Boolean).map((it, i) => {
+    const key = it.key ?? `${i}-${it.label}`;
+    if (!Array.isArray(it.items)) return { ...it, key, kind: "link", active: isActive(it.href, current) };
+    const links = it.items.filter(Boolean).map((l, j) => ({ ...l, key: `${key}/${l.key ?? j}`, active: isActive(l.href, current) }));
+    return { ...it, key, kind: "group", items: links, active: links.some((l) => l.active) || isActive(it.featured?.href, current) };
+  });
+}
+
+export function NavigationMenu({
+  items,
+  currentHref,
+  onNavigate,
+  brand,
+  actions,
+  label = "Main",
+  menuLabel = "Menu",
+  openDelay = OPEN_DELAY,
+  closeDelay = CLOSE_DELAY,
+  className,
+}) {
+  const entries = normalize(items, currentHref);
+  const groups = entries.filter((e) => e.kind === "group");
+
+  const id = useId();
+  const panelId = `${id}-panel`;
+  const root = useRef(null);
+  const list = useRef(null);
+  const panel = useRef(null);
+  const content = useRef(null);
+  const triggers = useRef(new Map());
+  const timer = useRef(0);
+  const hoverOpenedAt = useRef(0);
+  const focusOnOpen = useRef(null); // "first" | "last" once a key opened it
+  const was = useRef({ key: null, w: 0, h: 0, x: 0, index: -1 });
+
+  const [openKey, setOpenKey] = useState(null);
+  const [shownKey, setShownKey] = useState(null); // stays through the fade-out
+  const [sheetOpen, setSheetOpen] = useState(false);
+
+  const shown = groups.find((g) => g.key === (openKey ?? shownKey)) ?? null;
+
+  // The panel sits under the trigger that opened it (the bar, before any
+  // has). The hook reads the ref on every commit, so this re-anchors it.
+  const anchor = useRef(null);
+  anchor.current = triggers.current.get(openKey ?? shownKey) ?? list.current;
+  usePopoverPosition(anchor, panel, { side: "bottom", align: "start", offset: 6 });
+
+  function clearTimer() {
+    clearTimeout(timer.current);
+    timer.current = 0;
+  }
+  function show(key) {
+    clearTimer();
+    setOpenKey(key);
+    if (key) setShownKey(key);
+  }
+  function scheduleClose() {
+    clearTimer();
+    timer.current = setTimeout(() => setOpenKey(null), closeDelay);
+  }
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  // The panel follows the state; when it moves from one group to another
+  // its box eases to the new size and the links slide in from the side
+  // the pointer came from.
+  useLayoutEffect(() => {
+    const p = panel.current;
+    if (!p) return;
+    const isShown = p.matches(":popover-open");
+    if (!openKey) {
+      if (isShown) p.hidePopover();
+      was.current = { key: null, w: 0, h: 0, x: 0, index: -1 };
+      return;
+    }
+    if (!isShown) p.showPopover();
+    const index = entries.findIndex((e) => e.key === openKey);
+    const w = p.offsetWidth;
+    const h = p.offsetHeight;
+    const x = p.getBoundingClientRect().left;
+    const prev = was.current;
+    if (prev.key && prev.key !== openKey && !reducedMotion()) {
+      const from = index > prev.index ? 1 : -1;
+      p.animate(
+        [
+          { width: `${prev.w}px`, height: `${prev.h}px`, transform: `translateX(${prev.x - x}px)` },
+          { width: `${w}px`, height: `${h}px`, transform: "none" },
+        ],
+        { duration: 200, easing: "ease-out" },
+      );
+      content.current?.animate(
+        [
+          { transform: `translateX(${from * SLIDE_PX}px)`, opacity: 0 },
+          { transform: "none", opacity: 1 },
+        ],
+        { duration: 200, easing: "ease-out" },
+      );
+    }
+    was.current = { key: openKey, w, h, x, index };
+    const want = focusOnOpen.current;
+    focusOnOpen.current = null;
+    if (want) {
+      const links = [...p.querySelectorAll(LINKS)];
+      (want === "last" ? links.at(-1) : links[0])?.focus({ preventScroll: true });
+    }
+  });
+
+  // A press anywhere outside the bar and its panel closes it; Escape
+  // closes it wherever focus is (a hover-opened panel has none), and
+  // brings focus back to the trigger when it was inside.
+  useEffect(() => {
+    if (!openKey) return;
+    function onDown(e) {
+      if (!root.current?.contains(e.target)) setOpenKey(null);
+    }
+    function onKey(e) {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      if (root.current?.contains(document.activeElement)) closeAndFocus(openKey);
+      else setOpenKey(null);
+    }
+    document.addEventListener("pointerdown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [openKey]);
+
+  function tops() {
+    return [...(list.current?.querySelectorAll("[data-nav-top]") ?? [])];
+  }
+
+  function closeAndFocus(key) {
+    setOpenKey(null);
+    triggers.current.get(key)?.focus({ preventScroll: true });
+  }
+
+  // Along the bar: arrows and Home/End move between its items. While a
+  // panel is open, arriving on another trigger opens that one instead.
+  function onBarKeyDown(e) {
+    const all = tops();
+    const i = all.indexOf(e.target);
+    if (i < 0) return;
+    let next = null;
+    if (e.key === "ArrowRight") next = (i + 1) % all.length;
+    else if (e.key === "ArrowLeft") next = (i - 1 + all.length) % all.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = all.length - 1;
+    if (next === null) return;
+    e.preventDefault();
+    const el = all[next];
+    el.focus();
+    if (openKey) show(el.dataset.navGroup ?? null);
+  }
+
+  function onTriggerKeyDown(e, key) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      focusOnOpen.current = e.key === "ArrowUp" ? "last" : "first";
+      if (openKey === key) {
+        const links = [...(panel.current?.querySelectorAll(LINKS) ?? [])];
+        (e.key === "ArrowUp" ? links.at(-1) : links[0])?.focus();
+        focusOnOpen.current = null;
+      } else show(key);
+    } else if (e.key === "Tab" && !e.shiftKey && openKey === key) {
+      // The panel sits after the bar in the page; Tab goes into it first.
+      const first = panel.current?.querySelector(LINKS);
+      if (first) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  }
+
+  function onPanelKeyDown(e) {
+    if (!openKey) return;
+    const links = [...(panel.current?.querySelectorAll(LINKS) ?? [])];
+    const i = links.indexOf(document.activeElement);
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (e.key === "ArrowUp" && i <= 0) triggers.current.get(openKey)?.focus();
+      else links[e.key === "ArrowDown" ? Math.min(i + 1, links.length - 1) : i - 1]?.focus();
+    } else if (e.key === "Tab" && e.shiftKey && i === 0) {
+      e.preventDefault();
+      triggers.current.get(openKey)?.focus();
+    } else if (e.key === "Tab" && !e.shiftKey && i === links.length - 1) {
+      // Out of the panel's end: on to the bar's next item. After the bar's
+      // last one, the page's own order carries on and the blur closes it.
+      const all = tops();
+      const after = all[all.indexOf(triggers.current.get(openKey)) + 1];
+      if (after) {
+        e.preventDefault();
+        setOpenKey(null);
+        after.focus();
+      }
+    }
+  }
+
+
+  // Focus leaving the bar and its panel altogether closes the panel.
+  function onRootBlur(e) {
+    if (openKey && e.relatedTarget && !root.current?.contains(e.relatedTarget)) setOpenKey(null);
+  }
+
+  // A followed link: the surface hears of it (and may preventDefault),
+  // then the panel or the sheet closes. Only a link with an href is one.
+  function follow(link) {
+    if (!link.href) return undefined;
+    return (e) => {
+      onNavigate?.(link, e);
+      setOpenKey(null);
+      setSheetOpen(false);
+    };
+  }
+
+  function onTriggerEnter(e, key) {
+    if (e.pointerType !== "mouse") return;
+    clearTimer();
+    if (openKey) {
+      show(key);
+      return;
+    }
+    timer.current = setTimeout(() => {
+      hoverOpenedAt.current = Date.now();
+      show(key);
+    }, openDelay);
+  }
+
+  function onTriggerClick(key) {
+    // A click just after hover opened it confirms the hover, not a close.
+    if (openKey === key && Date.now() - hoverOpenedAt.current > 400) setOpenKey(null);
+    else show(key);
+  }
+
+  const topClass =
+    "aria-[current=page]:bg-accent data-[active=true]:bg-accent aria-expanded:bg-accent";
+
+  return (
+    <nav ref={root} aria-label={label} onBlur={onRootBlur} className={cx("flex min-h-14 items-center gap-2", className)}>
+      {brand ? <div className="flex shrink-0 items-center">{brand}</div> : null}
+
+      <ul ref={list} role="list" onKeyDown={onBarKeyDown} className="hidden items-center gap-1 md:flex">
+        {entries.map((e) =>
+          e.kind === "link" ? (
+            <li key={e.key} onPointerEnter={(ev) => ev.pointerType === "mouse" && openKey && scheduleClose()}>
+              <Button
+                href={e.href}
+                variant="quiet"
+                size="sm"
+                data-nav-top=""
+                aria-current={e.active ? "page" : undefined}
+                onClick={follow(e)}
+                className={topClass}
+              >
+                {e.label}
+              </Button>
+            </li>
+          ) : (
+            <li key={e.key} onPointerEnter={(ev) => onTriggerEnter(ev, e.key)} onPointerLeave={(ev) => ev.pointerType === "mouse" && scheduleClose()}>
+              <Button
+                ref={(el) => (el ? triggers.current.set(e.key, el) : triggers.current.delete(e.key))}
+                variant="quiet"
+                size="sm"
+                data-nav-top=""
+                data-nav-group={e.key}
+                data-active={e.active ? "true" : undefined}
+                aria-expanded={openKey === e.key}
+                aria-controls={panelId}
+                onClick={() => onTriggerClick(e.key)}
+                onKeyDown={(ev) => onTriggerKeyDown(ev, e.key)}
+                className={cx(topClass, "gap-1")}
+              >
+                {e.label}
+                <Icon
+                  name="chevron-down"
+                  size={14}
+                  className={cx("text-muted-foreground transition-transform duration-200 motion-reduce:transition-none", openKey === e.key && "rotate-180")}
+                />
+              </Button>
+            </li>
+          ),
+        )}
+      </ul>
+
+      {/* The one panel, after the bar so Tab reaches it in reading order. */}
+      <div
+        ref={panel}
+        id={panelId}
+        popover="manual"
+        role="region"
+        aria-label={shown?.label}
+        onKeyDown={onPanelKeyDown}
+        onPointerEnter={(ev) => ev.pointerType === "mouse" && clearTimer()}
+        onPointerLeave={(ev) => ev.pointerType === "mouse" && scheduleClose()}
+        onTransitionEnd={(ev) => ev.target === ev.currentTarget && !openKey && setShownKey(null)}
+        className={panelClass("auto", "overflow-hidden p-2")}
+      >
+        <div ref={content}>{shown ? <Panel group={shown} follow={follow} /> : null}</div>
+      </div>
+
+      <div className="ml-auto flex items-center gap-2">
+        {actions ? <div className="hidden items-center gap-2 md:flex">{actions}</div> : null}
+        <IconButton
+          icon="menu"
+          label={menuLabel}
+          aria-expanded={sheetOpen}
+          onClick={() => setSheetOpen(true)}
+          className="md:hidden"
+        />
+      </div>
+
+      <Sheet open={sheetOpen} onClose={() => setSheetOpen(false)} title={menuLabel} footer={actions ? <div className="flex w-full flex-wrap gap-2 [&>*]:flex-1">{actions}</div> : null}>
+        <div className="grid">
+          {entries.map((e) =>
+            e.kind === "link" ? (
+              <div key={e.key} className="-mx-2.5">
+                <Item size="sm" href={e.href} title={e.label} aria-current={e.active ? "page" : undefined} onClick={follow(e)} />
+              </div>
+            ) : (
+              <Collapsible key={e.key} title={e.label} defaultOpen={e.active}>
+                <ul role="list" className="-mx-2.5 grid gap-0.5">
+                  {e.items.map((l) => (
+                    <li key={l.key}>
+                      <Item
+                        size="sm"
+                        href={l.href}
+                        icon={l.icon}
+                        title={l.label}
+                        description={l.description}
+                        aria-current={l.active ? "page" : undefined}
+                        onClick={follow(l)}
+                      />
+                    </li>
+                  ))}
+                  {e.featured ? (
+                    <li>
+                      <Item
+                        size="sm"
+                        variant="muted"
+                        href={e.featured.href}
+                        icon={e.featured.icon ?? "sparkles"}
+                        title={e.featured.title}
+                        description={e.featured.description}
+                        onClick={follow(featuredOf(e))}
+                        className="mt-1"
+                      />
+                    </li>
+                  ) : null}
+                </ul>
+              </Collapsible>
+            ),
+          )}
+        </div>
+      </Sheet>
+    </nav>
+  );
+}
+
+// One group's panel (never wider than the window: panelClass caps it and
+// the grid shrinks): its links in a grid (two columns past three links,
+// or `columns`), the featured card first when there is one.
+function Panel({ group, follow }) {
+  const cols = group.columns ?? (group.items.length > 3 ? 2 : 1);
+  return (
+    <div className="flex gap-2">
+      {group.featured ? <Featured card={group.featured} onClick={follow(featuredOf(group))} /> : null}
+      <ul role="list" className={cx("grid min-w-0 content-start gap-1", cols === 2 ? "w-[38rem] grid-cols-2" : "w-80 grid-cols-1")}>
+        {group.items.map((l) => (
+          <li key={l.key}>
+            <Item
+              href={l.href}
+              icon={l.icon}
+              title={l.label}
+              description={l.description}
+              aria-current={l.active ? "page" : undefined}
+              onClick={follow(l)}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+// The featured card: a filled panel with a kicker, a title, a line and
+// its own link — the thing the group most wants read.
+function Featured({ card, onClick }) {
+  return (
+    <div className="flex w-56 shrink-0 flex-col justify-end gap-2 rounded-md bg-muted p-4">
+      {card.icon ? (
+        <span className="mb-auto flex size-9 items-center justify-center rounded-md bg-background text-foreground">
+          <Icon name={card.icon} size={18} />
+        </span>
+      ) : null}
+      {card.kicker ? <Kicker>{card.kicker}</Kicker> : null}
+      <p className="text-base font-semibold leading-tight text-foreground">{card.title}</p>
+      {card.description ? <p className="text-sm text-muted-foreground">{card.description}</p> : null}
+      {card.href ? (
+        <Button href={card.href} variant="link" size="sm" onClick={onClick}>
+          {card.cta ?? "Learn more"}
+          <Icon name="arrow-right" size={14} />
+        </Button>
+      ) : null}
+    </div>
+  );
+}