@medialane/ui 0.61.0 → 0.62.0

package/dist/components/nav-command-menu.cjs

@@ -48,12 +48,106 @@ function useNavCommandMenu() {
     close: () => document.dispatchEvent(new CustomEvent(ML_NAV_CLOSE))
   };
 }
+const RECENT_KEY = "ml.nav.recent";
+const RECENT_MAX = 3;
+function readRecents() {
+  try {
+    const raw = localStorage.getItem(RECENT_KEY);
+    const ids = raw ? JSON.parse(raw) : [];
+    return Array.isArray(ids) ? ids.filter((x) => typeof x === "string") : [];
+  } catch {
+    return [];
+  }
+}
+function pushRecent(id) {
+  try {
+    const next = [id, ...readRecents().filter((x) => x !== id)].slice(0, RECENT_MAX);
+    localStorage.setItem(RECENT_KEY, JSON.stringify(next));
+  } catch {
+  }
+}
+function Kbd({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "kbd",
+    {
+      className: (0, import_cn.cn)(
+        "inline-flex min-w-[18px] items-center justify-center rounded-md bg-muted/60 px-1.5 py-0.5",
+        "font-sans text-[10px] leading-none text-muted-foreground",
+        className
+      ),
+      children
+    }
+  );
+}
+function CommandRow({ item, primary, onSelect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_cmdk.Command.Item,
+    {
+      value: [item.label, ...item.keywords ?? []].join(" "),
+      onSelect,
+      className: (0, import_cn.cn)(
+        "group/item flex cursor-pointer items-center gap-3 rounded-xl",
+        "transition-colors duration-150 aria-selected:bg-primary/10",
+        primary ? "px-2.5 py-2.5" : "px-2.5 py-2"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_cn.cn)(
+              "flex shrink-0 items-center justify-center rounded-lg transition-colors",
+              "bg-muted/50 group-aria-selected/item:bg-primary/15",
+              primary ? "h-9 w-9" : "h-8 w-8"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              item.icon,
+              {
+                className: (0, import_cn.cn)(
+                  "text-foreground/80 transition-colors group-aria-selected/item:text-primary",
+                  primary ? "h-[18px] w-[18px]" : "h-4 w-4"
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: (0, import_cn.cn)(
+                "block truncate leading-tight",
+                primary ? "text-[15px] font-medium" : "text-sm"
+              ),
+              children: item.label
+            }
+          ),
+          item.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-0.5 block truncate text-[11.5px] leading-tight text-muted-foreground", children: item.description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/30 transition-colors group-aria-selected/item:text-primary/70" })
+      ]
+    }
+  );
+}
+const GROUP_HEADING_CLASSES = (0, import_cn.cn)(
+  "[&_[cmdk-group-heading]]:px-2.5",
+  "[&_[cmdk-group-heading]]:pt-2",
+  "[&_[cmdk-group-heading]]:pb-1",
+  "[&_[cmdk-group-heading]]:text-[10.5px]",
+  "[&_[cmdk-group-heading]]:font-semibold",
+  "[&_[cmdk-group-heading]]:uppercase",
+  "[&_[cmdk-group-heading]]:tracking-[0.08em]",
+  "[&_[cmdk-group-heading]]:text-muted-foreground/60"
+);
 function NavCommandMenu({ commands, trigger, accountSlot, footerSlot }) {
   const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [recentIds, setRecentIds] = React.useState([]);
   const router = (0, import_navigation.useRouter)();
   const inputRef = React.useRef(null);
   React.useEffect(() => {
     if (!open) return;
+    setQuery("");
+    setRecentIds(readRecents());
     const t = setTimeout(() => inputRef.current?.focus(), 60);
     return () => clearTimeout(t);
   }, [open]);
@@ -78,12 +172,19 @@ function NavCommandMenu({ commands, trigger, accountSlot, footerSlot }) {
   }, []);
   const runCommand = React.useCallback(
     (cmd) => {
+      pushRecent(cmd.id);
       setOpen(false);
       if (cmd.href) router.push(cmd.href);
       else cmd.action?.();
     },
     [router]
   );
+  const recentItems = React.useMemo(() => {
+    if (recentIds.length === 0) return [];
+    const all = new Map(commands.flatMap((g) => g.items.map((it) => [it.id, it])));
+    return recentIds.map((id) => all.get(id)).filter((it) => Boolean(it));
+  }, [recentIds, commands]);
+  const showRecents = query === "" && recentItems.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     trigger,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -101,86 +202,101 @@ function NavCommandMenu({ commands, trigger, accountSlot, footerSlot }) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_framer_motion.motion.div,
         {
-          className: "fixed inset-0 z-[101] flex items-center justify-center p-4",
-          initial: { opacity: 0, scale: 0.97 },
-          animate: { opacity: 1, scale: 1 },
-          exit: { opacity: 0, scale: 0.97 },
-          transition: { duration: 0.15, ease: "easeOut" },
+          className: "fixed inset-0 z-[101] flex items-end justify-center sm:items-center sm:p-4",
+          initial: { opacity: 0, y: 24, scale: 1 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: 24 },
+          transition: { duration: 0.18, ease: "easeOut" },
           onClick: () => setOpen(false),
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {
-              className: "w-full max-w-lg bg-background/90 border border-border/40 rounded-2xl overflow-hidden shadow-2xl",
+              className: (0, import_cn.cn)(
+                "flex w-full max-h-[88dvh] flex-col overflow-hidden sm:max-h-[min(680px,88dvh)] sm:max-w-[620px]",
+                "rounded-t-[20px] sm:rounded-[20px]",
+                "border border-border/40 bg-background/90 shadow-2xl backdrop-blur-2xl backdrop-saturate-150"
+              ),
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command, { shouldFilter: true, label: "Medialane navigation", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3 px-4 py-3.5 border-b border-border/40", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { className: "h-[18px] w-[18px] text-muted-foreground shrink-0" }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command, { shouldFilter: true, label: "Medialane navigation", className: "flex min-h-0 flex-1 flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center pt-2.5 sm:hidden", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-1 w-9 rounded-full bg-muted-foreground/30" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3 border-b border-border/40 px-4 py-3.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_lucide_react.Search,
+                    {
+                      className: (0, import_cn.cn)(
+                        "h-[18px] w-[18px] shrink-0 transition-colors",
+                        query ? "text-primary" : "text-muted-foreground"
+                      )
+                    }
+                  ),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_cmdk.Command.Input,
                     {
                       ref: inputRef,
-                      placeholder: "Type a command or search\u2026",
+                      value: query,
+                      onValueChange: setQuery,
+                      placeholder: "Search or run a command\u2026",
                       className: "flex-1 bg-transparent text-[15px] outline-none placeholder:text-muted-foreground"
                     }
                   ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { className: "hidden sm:inline-flex", children: "esc" }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "button",
                     {
                       onClick: () => setOpen(false),
-                      className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
+                      className: "rounded-md p-1 transition-colors hover:bg-muted/50 sm:hidden",
                       "aria-label": "Close",
                       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-4 w-4 text-muted-foreground" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command.List, { className: "max-h-[60vh] overflow-y-auto p-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command.List, { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Empty, { className: "py-8 text-center text-sm text-muted-foreground", children: "No results found." }),
+                  showRecents && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Group, { heading: "Recent", className: GROUP_HEADING_CLASSES, children: recentItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    CommandRow,
+                    {
+                      item,
+                      primary: false,
+                      onSelect: () => runCommand(item)
+                    },
+                    `recent-${item.id}`
+                  )) }),
                   commands.map((group, i) => {
                     const primary = !group.heading;
                     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(React.Fragment, { children: [
-                      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Separator, { className: "my-1.5 h-px bg-border/40" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_cmdk.Command.Group,
+                      (i > 0 || showRecents) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Separator, { className: "my-1.5 h-px bg-border/40" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cmdk.Command.Group, { heading: group.heading, className: GROUP_HEADING_CLASSES, children: group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        CommandRow,
                         {
-                          heading: group.heading,
-                          className: (0, import_cn.cn)(
-                            "[&_[cmdk-group-heading]]:px-2",
-                            "[&_[cmdk-group-heading]]:pt-1.5",
-                            "[&_[cmdk-group-heading]]:pb-1",
-                            "[&_[cmdk-group-heading]]:text-[11px]",
-                            "[&_[cmdk-group-heading]]:font-semibold",
-                            "[&_[cmdk-group-heading]]:uppercase",
-                            "[&_[cmdk-group-heading]]:tracking-wider",
-                            "[&_[cmdk-group-heading]]:text-muted-foreground/70"
-                          ),
-                          children: group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                            import_cmdk.Command.Item,
-                            {
-                              value: [item.label, ...item.keywords ?? []].join(" "),
-                              onSelect: () => runCommand(item),
-                              className: (0, import_cn.cn)(
-                                "group/item flex items-center gap-3 rounded-xl cursor-pointer",
-                                "transition-colors duration-150",
-                                "aria-selected:bg-primary/10",
-                                primary ? "px-2.5 py-2.5 text-[15px] font-medium" : "px-3 py-2 text-sm"
-                              ),
-                              children: [
-                                primary ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-muted/50 group-aria-selected/item:bg-primary/15 transition-colors shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(item.icon, { className: "h-[18px] w-[18px] text-foreground/80 group-aria-selected/item:text-primary transition-colors" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(item.icon, { className: "h-4 w-4 text-muted-foreground group-aria-selected/item:text-foreground transition-colors shrink-0" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-1 truncate", children: item.label }),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5 text-muted-foreground/30 group-aria-selected/item:text-primary/70 transition-colors shrink-0" })
-                              ]
-                            },
-                            item.id
-                          ))
-                        }
-                      )
+                          item,
+                          primary,
+                          onSelect: () => runCommand(item)
+                        },
+                        item.id
+                      )) })
                     ] }, group.heading ?? `__primary-${i}`);
                   })
                 ] }),
-                accountSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-t border-border/40 bg-background/40 px-3 py-3", children: accountSlot }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-3 py-2 border-t border-border/40 flex items-center justify-between gap-3", children: [
-                  footerSlot ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] text-muted-foreground/50 pl-1", children: "medialane" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { className: "text-[10px] text-muted-foreground/50 font-mono shrink-0", children: "\u2318K" })
+                accountSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-t border-border/40 bg-muted/20 px-3 py-3", children: accountSlot }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 border-t border-border/40 bg-muted/20 px-3 py-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+                    footerSlot,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "hidden items-center gap-3 text-[10.5px] text-muted-foreground/70 sm:flex", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "\u2191" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "\u2193" }),
+                        " Navigate"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "\u21B5" }),
+                        " Open"
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex shrink-0 items-center gap-2 text-[10px] text-muted-foreground/50", children: [
+                    "medialane",
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { className: "hidden sm:inline-flex", children: "\u2318K" })
+                  ] })
                 ] })
               ] })
             }

package/dist/components/nav-command-menu.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/nav-command-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Command } from \"cmdk\";\nimport { useRouter } from \"next/navigation\";\nimport { Search, X, ArrowRight } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { cn } from \"../utils/cn.js\";\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport interface NavCommand {\n  id: string;\n  label: string;\n  icon: React.ComponentType<{ className?: string }>;\n  href?: string;\n  action?: () => void;\n  /** Extra search terms beyond the label */\n  keywords?: string[];\n}\n\nexport interface NavCommandGroup {\n  /**\n   * Optional group heading. Omit it for the primary group so its items\n   * read as the top-level menu — they render first, emphasized, with no\n   * label, separated from the headed groups below.\n   */\n  heading?: string;\n  items: NavCommand[];\n}\n\nexport interface NavCommandMenuProps {\n  commands: NavCommandGroup[];\n  /**\n   * Optional trigger element rendered inline at the component's mount point.\n   * For most apps, omit this and call `useNavCommandMenu().open()` from a\n   * separate button — that keeps the trigger in the right place in the layout.\n   */\n  trigger?: React.ReactNode;\n  /**\n   * Optional pinned account/connect area rendered below command results.\n   * Apps own the auth implementation here (Clerk, ChipiPay, wallet connectors,\n   * Privy, Cartridge, etc.) so the shared nav stays framework-agnostic.\n   */\n  accountSlot?: React.ReactNode;\n  /**\n   * Optional control rendered in the footer row (e.g. a theme toggle).\n   * Apps own theme state (next-themes etc.) so the shared nav stays\n   * framework-agnostic — same pattern as `accountSlot`.\n   */\n  footerSlot?: React.ReactNode;\n}\n\n// ── Singleton hook ─────────────────────────────────────────────────────────────\n\nconst ML_NAV_OPEN  = \"ml:nav-open\";\nconst ML_NAV_CLOSE = \"ml:nav-close\";\n\nexport function useNavCommandMenu() {\n  return {\n    open:  () => document.dispatchEvent(new CustomEvent(ML_NAV_OPEN)),\n    close: () => document.dispatchEvent(new CustomEvent(ML_NAV_CLOSE)),\n  };\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function NavCommandMenu({ commands, trigger, accountSlot, footerSlot }: NavCommandMenuProps) {\n  const [open, setOpen] = React.useState(false);\n  const router = useRouter();\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const t = setTimeout(() => inputRef.current?.focus(), 60);\n    return () => clearTimeout(t);\n  }, [open]);\n\n  React.useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((prev) => !prev);\n      }\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    const onOpen  = () => setOpen(true);\n    const onClose = () => setOpen(false);\n\n    document.addEventListener(\"keydown\", onKey);\n    document.addEventListener(ML_NAV_OPEN, onOpen);\n    document.addEventListener(ML_NAV_CLOSE, onClose);\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.removeEventListener(ML_NAV_OPEN, onOpen);\n      document.removeEventListener(ML_NAV_CLOSE, onClose);\n    };\n  }, []);\n\n  const runCommand = React.useCallback(\n    (cmd: NavCommand) => {\n      setOpen(false);\n      if (cmd.href) router.push(cmd.href);\n      else cmd.action?.();\n    },\n    [router]\n  );\n\n  return (\n    <>\n      {trigger}\n\n      <AnimatePresence>\n        {open && (\n          <>\n            {/* Backdrop blur */}\n            <motion.div\n              className=\"nav-canvas-overlay\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.15 }}\n              onClick={() => setOpen(false)}\n            />\n\n            {/* Command panel */}\n            <motion.div\n              className=\"fixed inset-0 z-[101] flex items-center justify-center p-4\"\n              initial={{ opacity: 0, scale: 0.97 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.97 }}\n              transition={{ duration: 0.15, ease: \"easeOut\" }}\n              onClick={() => setOpen(false)}\n            >\n              <div\n                className=\"w-full max-w-lg bg-background/90 border border-border/40 rounded-2xl overflow-hidden shadow-2xl\"\n                onClick={(e) => e.stopPropagation()}\n              >\n                <Command shouldFilter label=\"Medialane navigation\">\n                  {/* Search bar */}\n                  <div className=\"flex items-center gap-3 px-4 py-3.5 border-b border-border/40\">\n                    <Search className=\"h-[18px] w-[18px] text-muted-foreground shrink-0\" />\n                    <Command.Input\n                      ref={inputRef}\n                      placeholder=\"Type a command or search…\"\n                      className=\"flex-1 bg-transparent text-[15px] outline-none placeholder:text-muted-foreground\"\n                    />\n                    <button\n                      onClick={() => setOpen(false)}\n                      className=\"p-1 rounded-md hover:bg-muted/50 transition-colors\"\n                      aria-label=\"Close\"\n                    >\n                      <X className=\"h-4 w-4 text-muted-foreground\" />\n                    </button>\n                  </div>\n\n                  {/* Results */}\n                  <Command.List className=\"max-h-[60vh] overflow-y-auto p-2\">\n                    <Command.Empty className=\"py-8 text-center text-sm text-muted-foreground\">\n                      No results found.\n                    </Command.Empty>\n\n                    {commands.map((group, i) => {\n                      const primary = !group.heading;\n                      return (\n                      <React.Fragment key={group.heading ?? `__primary-${i}`}>\n                        {i > 0 && (\n                          <Command.Separator className=\"my-1.5 h-px bg-border/40\" />\n                        )}\n                        <Command.Group\n                          heading={group.heading}\n                          className={cn(\n                            \"[&_[cmdk-group-heading]]:px-2\",\n                            \"[&_[cmdk-group-heading]]:pt-1.5\",\n                            \"[&_[cmdk-group-heading]]:pb-1\",\n                            \"[&_[cmdk-group-heading]]:text-[11px]\",\n                            \"[&_[cmdk-group-heading]]:font-semibold\",\n                            \"[&_[cmdk-group-heading]]:uppercase\",\n                            \"[&_[cmdk-group-heading]]:tracking-wider\",\n                            \"[&_[cmdk-group-heading]]:text-muted-foreground/70\"\n                          )}\n                        >\n                          {group.items.map((item) => (\n                            <Command.Item\n                              key={item.id}\n                              value={[item.label, ...(item.keywords ?? [])].join(\" \")}\n                              onSelect={() => runCommand(item)}\n                              className={cn(\n                                \"group/item flex items-center gap-3 rounded-xl cursor-pointer\",\n                                \"transition-colors duration-150\",\n                                \"aria-selected:bg-primary/10\",\n                                primary\n                                  ? \"px-2.5 py-2.5 text-[15px] font-medium\"\n                                  : \"px-3 py-2 text-sm\"\n                              )}\n                            >\n                              {primary ? (\n                                <span className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-muted/50 group-aria-selected/item:bg-primary/15 transition-colors shrink-0\">\n                                  <item.icon className=\"h-[18px] w-[18px] text-foreground/80 group-aria-selected/item:text-primary transition-colors\" />\n                                </span>\n                              ) : (\n                                <item.icon className=\"h-4 w-4 text-muted-foreground group-aria-selected/item:text-foreground transition-colors shrink-0\" />\n                              )}\n                              <span className=\"flex-1 truncate\">{item.label}</span>\n                              <ArrowRight className=\"h-3.5 w-3.5 text-muted-foreground/30 group-aria-selected/item:text-primary/70 transition-colors shrink-0\" />\n                            </Command.Item>\n                          ))}\n                        </Command.Group>\n                      </React.Fragment>\n                      );\n                    })}\n                  </Command.List>\n\n                  {accountSlot && (\n                    <div className=\"border-t border-border/40 bg-background/40 px-3 py-3\">\n                      {accountSlot}\n                    </div>\n                  )}\n\n                  {/* Footer */}\n                  <div className=\"px-3 py-2 border-t border-border/40 flex items-center justify-between gap-3\">\n                    {footerSlot ?? (\n                      <span className=\"text-[10px] text-muted-foreground/50 pl-1\">medialane</span>\n                    )}\n                    <kbd className=\"text-[10px] text-muted-foreground/50 font-mono shrink-0\">⌘K</kbd>\n                  </div>\n                </Command>\n              </div>\n            </motion.div>\n          </>\n        )}\n      </AnimatePresence>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/nav-command-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Command } from \"cmdk\";\nimport { useRouter } from \"next/navigation\";\nimport { Search, X, ArrowRight } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { cn } from \"../utils/cn.js\";\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport interface NavCommand {\n  id: string;\n  label: string;\n  icon: React.ComponentType<{ className?: string }>;\n  href?: string;\n  action?: () => void;\n  /** Extra search terms beyond the label */\n  keywords?: string[];\n  /** Optional one-line description shown under the label */\n  description?: string;\n}\n\nexport interface NavCommandGroup {\n  /**\n   * Optional group heading. Omit it for the primary group so its items\n   * read as the top-level menu — they render first, emphasized, with no\n   * label, separated from the headed groups below.\n   */\n  heading?: string;\n  items: NavCommand[];\n}\n\nexport interface NavCommandMenuProps {\n  commands: NavCommandGroup[];\n  /**\n   * Optional trigger element rendered inline at the component's mount point.\n   * For most apps, omit this and call `useNavCommandMenu().open()` from a\n   * separate button — that keeps the trigger in the right place in the layout.\n   */\n  trigger?: React.ReactNode;\n  /**\n   * Optional pinned account/connect area rendered below command results.\n   * Apps own the auth implementation here (Clerk, ChipiPay, wallet connectors,\n   * Privy, Cartridge, etc.) so the shared nav stays framework-agnostic.\n   */\n  accountSlot?: React.ReactNode;\n  /**\n   * Optional control rendered in the footer row (e.g. a theme toggle).\n   * Apps own theme state (next-themes etc.) so the shared nav stays\n   * framework-agnostic — same pattern as `accountSlot`.\n   */\n  footerSlot?: React.ReactNode;\n}\n\n// ── Singleton hook ─────────────────────────────────────────────────────────────\n\nconst ML_NAV_OPEN  = \"ml:nav-open\";\nconst ML_NAV_CLOSE = \"ml:nav-close\";\n\nexport function useNavCommandMenu() {\n  return {\n    open:  () => document.dispatchEvent(new CustomEvent(ML_NAV_OPEN)),\n    close: () => document.dispatchEvent(new CustomEvent(ML_NAV_CLOSE)),\n  };\n}\n\n// ── Recents (localStorage) ─────────────────────────────────────────────────────\n\nconst RECENT_KEY = \"ml.nav.recent\";\nconst RECENT_MAX = 3;\n\nfunction readRecents(): string[] {\n  try {\n    const raw = localStorage.getItem(RECENT_KEY);\n    const ids = raw ? (JSON.parse(raw) as unknown) : [];\n    return Array.isArray(ids) ? ids.filter((x): x is string => typeof x === \"string\") : [];\n  } catch {\n    return [];\n  }\n}\n\nfunction pushRecent(id: string) {\n  try {\n    const next = [id, ...readRecents().filter((x) => x !== id)].slice(0, RECENT_MAX);\n    localStorage.setItem(RECENT_KEY, JSON.stringify(next));\n  } catch {\n    /* storage unavailable — recents are a nicety, never an error */\n  }\n}\n\n// ── Small primitives ──────────────────────────────────────────────────────────\n\nfunction Kbd({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <kbd\n      className={cn(\n        \"inline-flex min-w-[18px] items-center justify-center rounded-md bg-muted/60 px-1.5 py-0.5\",\n        \"font-sans text-[10px] leading-none text-muted-foreground\",\n        className\n      )}\n    >\n      {children}\n    </kbd>\n  );\n}\n\nfunction CommandRow({ item, primary, onSelect }: { item: NavCommand; primary: boolean; onSelect: () => void }) {\n  return (\n    <Command.Item\n      value={[item.label, ...(item.keywords ?? [])].join(\" \")}\n      onSelect={onSelect}\n      className={cn(\n        \"group/item flex cursor-pointer items-center gap-3 rounded-xl\",\n        \"transition-colors duration-150 aria-selected:bg-primary/10\",\n        primary ? \"px-2.5 py-2.5\" : \"px-2.5 py-2\"\n      )}\n    >\n      <span\n        className={cn(\n          \"flex shrink-0 items-center justify-center rounded-lg transition-colors\",\n          \"bg-muted/50 group-aria-selected/item:bg-primary/15\",\n          primary ? \"h-9 w-9\" : \"h-8 w-8\"\n        )}\n      >\n        <item.icon\n          className={cn(\n            \"text-foreground/80 transition-colors group-aria-selected/item:text-primary\",\n            primary ? \"h-[18px] w-[18px]\" : \"h-4 w-4\"\n          )}\n        />\n      </span>\n      <span className=\"min-w-0 flex-1\">\n        <span\n          className={cn(\n            \"block truncate leading-tight\",\n            primary ? \"text-[15px] font-medium\" : \"text-sm\"\n          )}\n        >\n          {item.label}\n        </span>\n        {item.description && (\n          <span className=\"mt-0.5 block truncate text-[11.5px] leading-tight text-muted-foreground\">\n            {item.description}\n          </span>\n        )}\n      </span>\n      <ArrowRight className=\"h-3.5 w-3.5 shrink-0 text-muted-foreground/30 transition-colors group-aria-selected/item:text-primary/70\" />\n    </Command.Item>\n  );\n}\n\nconst GROUP_HEADING_CLASSES = cn(\n  \"[&_[cmdk-group-heading]]:px-2.5\",\n  \"[&_[cmdk-group-heading]]:pt-2\",\n  \"[&_[cmdk-group-heading]]:pb-1\",\n  \"[&_[cmdk-group-heading]]:text-[10.5px]\",\n  \"[&_[cmdk-group-heading]]:font-semibold\",\n  \"[&_[cmdk-group-heading]]:uppercase\",\n  \"[&_[cmdk-group-heading]]:tracking-[0.08em]\",\n  \"[&_[cmdk-group-heading]]:text-muted-foreground/60\"\n);\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function NavCommandMenu({ commands, trigger, accountSlot, footerSlot }: NavCommandMenuProps) {\n  const [open, setOpen] = React.useState(false);\n  const [query, setQuery] = React.useState(\"\");\n  const [recentIds, setRecentIds] = React.useState<string[]>([]);\n  const router = useRouter();\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    setQuery(\"\");\n    setRecentIds(readRecents());\n    const t = setTimeout(() => inputRef.current?.focus(), 60);\n    return () => clearTimeout(t);\n  }, [open]);\n\n  React.useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((prev) => !prev);\n      }\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    const onOpen  = () => setOpen(true);\n    const onClose = () => setOpen(false);\n\n    document.addEventListener(\"keydown\", onKey);\n    document.addEventListener(ML_NAV_OPEN, onOpen);\n    document.addEventListener(ML_NAV_CLOSE, onClose);\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.removeEventListener(ML_NAV_OPEN, onOpen);\n      document.removeEventListener(ML_NAV_CLOSE, onClose);\n    };\n  }, []);\n\n  const runCommand = React.useCallback(\n    (cmd: NavCommand) => {\n      pushRecent(cmd.id);\n      setOpen(false);\n      if (cmd.href) router.push(cmd.href);\n      else cmd.action?.();\n    },\n    [router]\n  );\n\n  // Recents only render while the query is empty (search results replace them).\n  const recentItems = React.useMemo(() => {\n    if (recentIds.length === 0) return [];\n    const all = new Map(commands.flatMap((g) => g.items.map((it) => [it.id, it] as const)));\n    return recentIds.map((id) => all.get(id)).filter((it): it is NavCommand => Boolean(it));\n  }, [recentIds, commands]);\n  const showRecents = query === \"\" && recentItems.length > 0;\n\n  return (\n    <>\n      {trigger}\n\n      <AnimatePresence>\n        {open && (\n          <>\n            {/* Backdrop blur */}\n            <motion.div\n              className=\"nav-canvas-overlay\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.15 }}\n              onClick={() => setOpen(false)}\n            />\n\n            {/* Command panel — centered on desktop, bottom sheet on mobile */}\n            <motion.div\n              className=\"fixed inset-0 z-[101] flex items-end justify-center sm:items-center sm:p-4\"\n              initial={{ opacity: 0, y: 24, scale: 1 }}\n              animate={{ opacity: 1, y: 0, scale: 1 }}\n              exit={{ opacity: 0, y: 24 }}\n              transition={{ duration: 0.18, ease: \"easeOut\" }}\n              onClick={() => setOpen(false)}\n            >\n              <div\n                className={cn(\n                  \"flex w-full max-h-[88dvh] flex-col overflow-hidden sm:max-h-[min(680px,88dvh)] sm:max-w-[620px]\",\n                  \"rounded-t-[20px] sm:rounded-[20px]\",\n                  \"border border-border/40 bg-background/90 shadow-2xl backdrop-blur-2xl backdrop-saturate-150\"\n                )}\n                onClick={(e) => e.stopPropagation()}\n              >\n                <Command shouldFilter label=\"Medialane navigation\" className=\"flex min-h-0 flex-1 flex-col\">\n                  {/* Drag handle (mobile) */}\n                  <div className=\"flex justify-center pt-2.5 sm:hidden\" aria-hidden=\"true\">\n                    <span className=\"h-1 w-9 rounded-full bg-muted-foreground/30\" />\n                  </div>\n\n                  {/* Search bar */}\n                  <div className=\"flex items-center gap-3 border-b border-border/40 px-4 py-3.5\">\n                    <Search\n                      className={cn(\n                        \"h-[18px] w-[18px] shrink-0 transition-colors\",\n                        query ? \"text-primary\" : \"text-muted-foreground\"\n                      )}\n                    />\n                    <Command.Input\n                      ref={inputRef}\n                      value={query}\n                      onValueChange={setQuery}\n                      placeholder=\"Search or run a command…\"\n                      className=\"flex-1 bg-transparent text-[15px] outline-none placeholder:text-muted-foreground\"\n                    />\n                    <Kbd className=\"hidden sm:inline-flex\">esc</Kbd>\n                    <button\n                      onClick={() => setOpen(false)}\n                      className=\"rounded-md p-1 transition-colors hover:bg-muted/50 sm:hidden\"\n                      aria-label=\"Close\"\n                    >\n                      <X className=\"h-4 w-4 text-muted-foreground\" />\n                    </button>\n                  </div>\n\n                  {/* Results */}\n                  <Command.List className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-2\">\n                    <Command.Empty className=\"py-8 text-center text-sm text-muted-foreground\">\n                      No results found.\n                    </Command.Empty>\n\n                    {showRecents && (\n                      <Command.Group heading=\"Recent\" className={GROUP_HEADING_CLASSES}>\n                        {recentItems.map((item) => (\n                          <CommandRow\n                            key={`recent-${item.id}`}\n                            item={item}\n                            primary={false}\n                            onSelect={() => runCommand(item)}\n                          />\n                        ))}\n                      </Command.Group>\n                    )}\n\n                    {commands.map((group, i) => {\n                      const primary = !group.heading;\n                      return (\n                      <React.Fragment key={group.heading ?? `__primary-${i}`}>\n                        {(i > 0 || showRecents) && (\n                          <Command.Separator className=\"my-1.5 h-px bg-border/40\" />\n                        )}\n                        <Command.Group heading={group.heading} className={GROUP_HEADING_CLASSES}>\n                          {group.items.map((item) => (\n                            <CommandRow\n                              key={item.id}\n                              item={item}\n                              primary={primary}\n                              onSelect={() => runCommand(item)}\n                            />\n                          ))}\n                        </Command.Group>\n                      </React.Fragment>\n                      );\n                    })}\n                  </Command.List>\n\n                  {accountSlot && (\n                    <div className=\"border-t border-border/40 bg-muted/20 px-3 py-3\">\n                      {accountSlot}\n                    </div>\n                  )}\n\n                  {/* Footer */}\n                  <div className=\"flex items-center justify-between gap-3 border-t border-border/40 bg-muted/20 px-3 py-2\">\n                    <div className=\"flex items-center gap-3\">\n                      {footerSlot}\n                      <span className=\"hidden items-center gap-3 text-[10.5px] text-muted-foreground/70 sm:flex\">\n                        <span className=\"flex items-center gap-1\"><Kbd>↑</Kbd><Kbd>↓</Kbd> Navigate</span>\n                        <span className=\"flex items-center gap-1\"><Kbd>↵</Kbd> Open</span>\n                      </span>\n                    </div>\n                    <span className=\"flex shrink-0 items-center gap-2 text-[10px] text-muted-foreground/50\">\n                      medialane\n                      <Kbd className=\"hidden sm:inline-flex\">⌘K</Kbd>\n                    </span>\n                  </div>\n                </Command>\n              </div>\n            </motion.div>\n          </>\n        )}\n      </AnimatePresence>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/nav-command-menu.d.cts

@@ -11,6 +11,8 @@ interface NavCommand {
     action?: () => void;
     /** Extra search terms beyond the label */
     keywords?: string[];
+    /** Optional one-line description shown under the label */
+    description?: string;
 }
 interface NavCommandGroup {
     /**

package/dist/components/nav-command-menu.d.ts

@@ -11,6 +11,8 @@ interface NavCommand {
     action?: () => void;
     /** Extra search terms beyond the label */
     keywords?: string[];
+    /** Optional one-line description shown under the label */
+    description?: string;
 }
 interface NavCommandGroup {
     /**