@medialane/ui 0.99.0 → 0.100.0

package/dist/components/nav-command-menu.js.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  /** 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 (passkey wallets, injected wallet\n   * connectors, 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   * Show the \"↑↓ Navigate  ↵ Open\" keyboard-hint text next to `footerSlot`.\n   * Defaults to `true` (unchanged behavior).\n   */\n  showKeyboardHints?: boolean;\n  /**\n   * Optional override for the trailing \"medialane ⌘K\" brandmark at the\n   * footer's right edge — replaces it entirely rather than adorning it, so\n   * an app can put something more actionable there (e.g. a \"Connect\" button)\n   * instead of a static label. Omit to keep the default brandmark.\n   */\n  brandSlot?: 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// ── 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({\n  commands,\n  trigger,\n  accountSlot,\n  footerSlot,\n  showKeyboardHints = true,\n  brandSlot,\n}: NavCommandMenuProps) {\n  const [open, setOpen] = React.useState(false);\n  const [query, setQuery] = React.useState(\"\");\n  const router = useRouter();\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    setQuery(\"\");\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 — centered on desktop, bottom sheet on mobile */}\n            <motion.div\n              className=\"fixed inset-0 z-[101] flex items-end justify-center p-3 pb-4 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-[85dvh] flex-col overflow-hidden rounded-[20px] sm:max-h-[min(680px,88dvh)] sm:max-w-[620px]\",\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                    {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 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                      {showKeyboardHints && (\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                      )}\n                    </div>\n                    {brandSlot ?? (\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                    )}\n                  </div>\n                </Command>\n              </div>\n            </motion.div>\n          </>\n        )}\n      </AnimatePresence>\n    </>\n  );\n}\n"],"mappings":";AAmFI,SA8HM,UA9HN,KAqCE,YArCF;AAjFJ,YAAY,WAAW;AACvB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,GAAG,kBAAkB;AACtC,SAAS,iBAAiB,cAAc;AACxC,SAAS,UAAU;AA8DnB,MAAM,cAAe;AACrB,MAAM,eAAe;AAEd,SAAS,oBAAoB;AAClC,SAAO;AAAA,IACL,MAAO,MAAM,SAAS,cAAc,IAAI,YAAY,WAAW,CAAC;AAAA,IAChE,OAAO,MAAM,SAAS,cAAc,IAAI,YAAY,YAAY,CAAC;AAAA,EACnE;AACF;AAIA,SAAS,IAAI,EAAE,UAAU,UAAU,GAAsD;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,WAAW,EAAE,MAAM,SAAS,SAAS,GAAiE;AAC7G,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACC,OAAO,CAAC,KAAK,OAAO,GAAI,KAAK,YAAY,CAAC,CAAE,EAAE,KAAK,GAAG;AAAA,MACtD;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,kBAAkB;AAAA,MAC9B;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA,UAAU,YAAY;AAAA,YACxB;AAAA,YAEA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,UAAU,sBAAsB;AAAA,gBAClC;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACA,qBAAC,UAAK,WAAU,kBACd;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,UAAU,4BAA4B;AAAA,cACxC;AAAA,cAEC,eAAK;AAAA;AAAA,UACR;AAAA,UACC,KAAK,eACJ,oBAAC,UAAK,WAAU,2EACb,eAAK,aACR;AAAA,WAEJ;AAAA,QACA,oBAAC,cAAW,WAAU,4GAA2G;AAAA;AAAA;AAAA,EACnI;AAEJ;AAEA,MAAM,wBAAwB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AACF,GAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,MAAM,OAAyB,IAAI;AAEpD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,aAAS,EAAE;AACX,UAAM,IAAI,WAAW,MAAM,SAAS,SAAS,MAAM,GAAG,EAAE;AACxD,WAAO,MAAM,aAAa,CAAC;AAAA,EAC7B,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,QAAQ,EAAE,WAAW,EAAE,UAAU;AAC7C,UAAE,eAAe;AACjB,gBAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,MACzB;AACA,UAAI,EAAE,QAAQ,SAAU,SAAQ,KAAK;AAAA,IACvC;AACA,UAAM,SAAU,MAAM,QAAQ,IAAI;AAClC,UAAM,UAAU,MAAM,QAAQ,KAAK;AAEnC,aAAS,iBAAiB,WAAW,KAAK;AAC1C,aAAS,iBAAiB,aAAa,MAAM;AAC7C,aAAS,iBAAiB,cAAc,OAAO;AAC/C,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,KAAK;AAC7C,eAAS,oBAAoB,aAAa,MAAM;AAChD,eAAS,oBAAoB,cAAc,OAAO;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,MAAM;AAAA,IACvB,CAAC,QAAoB;AACnB,cAAQ,KAAK;AACb,UAAI,IAAI,KAAM,QAAO,KAAK,IAAI,IAAI;AAAA,UAC7B,KAAI,SAAS;AAAA,IACpB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,iCACG;AAAA;AAAA,IAED,oBAAC,mBACE,kBACC,iCAEE;AAAA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,WAAU;AAAA,UACV,SAAS,EAAE,SAAS,EAAE;AAAA,UACtB,SAAS,EAAE,SAAS,EAAE;AAAA,UACtB,MAAM,EAAE,SAAS,EAAE;AAAA,UACnB,YAAY,EAAE,UAAU,KAAK;AAAA,UAC7B,SAAS,MAAM,QAAQ,KAAK;AAAA;AAAA,MAC9B;AAAA,MAGA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,WAAU;AAAA,UACV,SAAS,EAAE,SAAS,GAAG,GAAG,IAAI,OAAO,EAAE;AAAA,UACvC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,OAAO,EAAE;AAAA,UACtC,MAAM,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,UAC1B,YAAY,EAAE,UAAU,MAAM,MAAM,UAAU;AAAA,UAC9C,SAAS,MAAM,QAAQ,KAAK;AAAA,UAE5B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cACA,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAElC,+BAAC,WAAQ,cAAY,MAAC,OAAM,wBAAuB,WAAU,gCAE3D;AAAA,oCAAC,SAAI,WAAU,wCAAuC,eAAY,QAChE,8BAAC,UAAK,WAAU,+CAA8C,GAChE;AAAA,gBAGA,qBAAC,SAAI,WAAU,iEACb;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAW;AAAA,wBACT;AAAA,wBACA,QAAQ,iBAAiB;AAAA,sBAC3B;AAAA;AAAA,kBACF;AAAA,kBACA;AAAA,oBAAC,QAAQ;AAAA,oBAAR;AAAA,sBACC,KAAK;AAAA,sBACL,OAAO;AAAA,sBACP,eAAe;AAAA,sBACf,aAAY;AAAA,sBACZ,WAAU;AAAA;AAAA,kBACZ;AAAA,kBACA,oBAAC,OAAI,WAAU,yBAAwB,iBAAG;AAAA,kBAC1C;AAAA,oBAAC;AAAA;AAAA,sBACC,SAAS,MAAM,QAAQ,KAAK;AAAA,sBAC5B,WAAU;AAAA,sBACV,cAAW;AAAA,sBAEX,8BAAC,KAAE,WAAU,iCAAgC;AAAA;AAAA,kBAC/C;AAAA,mBACF;AAAA,gBAGA,qBAAC,QAAQ,MAAR,EAAa,WAAU,yDACtB;AAAA,sCAAC,QAAQ,OAAR,EAAc,WAAU,kDAAiD,+BAE1E;AAAA,kBAEC,SAAS,IAAI,CAAC,OAAO,MAAM;AAC1B,0BAAM,UAAU,CAAC,MAAM;AACvB,2BACA,qBAAC,MAAM,UAAN,EACE;AAAA,0BAAI,KACH,oBAAC,QAAQ,WAAR,EAAkB,WAAU,4BAA2B;AAAA,sBAE1D,oBAAC,QAAQ,OAAR,EAAc,SAAS,MAAM,SAAS,WAAW,uBAC/C,gBAAM,MAAM,IAAI,CAAC,SAChB;AAAA,wBAAC;AAAA;AAAA,0BAEC;AAAA,0BACA;AAAA,0BACA,UAAU,MAAM,WAAW,IAAI;AAAA;AAAA,wBAH1B,KAAK;AAAA,sBAIZ,CACD,GACH;AAAA,yBAbmB,MAAM,WAAW,aAAa,CAAC,EAcpD;AAAA,kBAEF,CAAC;AAAA,mBACH;AAAA,gBAEC,eACC,oBAAC,SAAI,WAAU,mDACZ,uBACH;AAAA,gBAIF,qBAAC,SAAI,WAAU,2FACb;AAAA,uCAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,oBACA,qBACC,qBAAC,UAAK,WAAU,4EACd;AAAA,2CAAC,UAAK,WAAU,2BAA0B;AAAA,4CAAC,OAAI,oBAAC;AAAA,wBAAM,oBAAC,OAAI,oBAAC;AAAA,wBAAM;AAAA,yBAAS;AAAA,sBAC3E,qBAAC,UAAK,WAAU,2BAA0B;AAAA,4CAAC,OAAI,oBAAC;AAAA,wBAAM;AAAA,yBAAK;AAAA,uBAC7D;AAAA,qBAEJ;AAAA,kBACC,aACC,qBAAC,UAAK,WAAU,yEAAwE;AAAA;AAAA,oBAEtF,oBAAC,OAAI,WAAU,yBAAwB,qBAAE;AAAA,qBAC3C;AAAA,mBAEJ;AAAA,iBACF;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF,GAEJ;AAAA,KACF;AAEJ;","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 (passkey wallets, injected wallet\n   * connectors, 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   * Show the \"↑↓ Navigate  ↵ Open\" keyboard-hint text next to `footerSlot`.\n   * Defaults to `true` (unchanged behavior).\n   */\n  showKeyboardHints?: boolean;\n  /**\n   * Optional override for the trailing \"medialane ⌘K\" brandmark at the\n   * footer's right edge — replaces it entirely rather than adorning it, so\n   * an app can put something more actionable there (e.g. a \"Connect\" button)\n   * instead of a static label. Omit to keep the default brandmark.\n   */\n  brandSlot?: 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// ── 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-2xs 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-base 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({\n  commands,\n  trigger,\n  accountSlot,\n  footerSlot,\n  showKeyboardHints = true,\n  brandSlot,\n}: NavCommandMenuProps) {\n  const [open, setOpen] = React.useState(false);\n  const [query, setQuery] = React.useState(\"\");\n  const router = useRouter();\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    setQuery(\"\");\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 — centered on desktop, bottom sheet on mobile */}\n            <motion.div\n              className=\"fixed inset-0 z-[101] flex items-end justify-center p-3 pb-[calc(1rem+env(safe-area-inset-bottom))] 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-[85dvh] flex-col overflow-hidden rounded-[20px] sm:max-h-[min(680px,88dvh)] sm:max-w-[620px]\",\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-base 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                    {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 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                      {showKeyboardHints && (\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                      )}\n                    </div>\n                    {brandSlot ?? (\n                      <span className=\"flex shrink-0 items-center gap-2 text-2xs text-muted-foreground/50\">\n                        medialane\n                        <Kbd className=\"hidden sm:inline-flex\">⌘K</Kbd>\n                      </span>\n                    )}\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-shell.cjs

@@ -96,7 +96,7 @@ const NavWalletTrigger = React.forwardRef(
         onClick,
         "aria-label": rest["aria-label"] ?? (connected ? "Account" : "Connect wallet"),
         className: (0, import_cn.cn)(
-          "ml-nav-wallet-trigger relative flex h-8 w-8 items-center justify-center rounded-full",
+          "ml-nav-wallet-trigger relative flex h-11 w-11 items-center justify-center rounded-full",
           "bg-background/10 text-muted-foreground backdrop-blur-xl backdrop-saturate-150",
           "transition-colors hover:bg-background/20 hover:text-foreground active:scale-[0.97]",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
@@ -160,7 +160,7 @@ function NavAccountSheet({ children }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_framer_motion.motion.div,
       {
-        className: "fixed inset-0 z-[101] flex items-end justify-center p-3 pb-4 sm:items-center sm:p-4",
+        className: "fixed inset-0 z-[101] flex items-end justify-center p-3 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:items-center sm:p-4",
         initial: { opacity: 0, y: 24 },
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: 24 },

package/dist/components/nav-shell.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/nav-shell.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { User, Wallet } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\n// ── Header buttons ────────────────────────────────────────────────────────────\n\nexport interface NavBrandButtonProps {\n  /** Defaults to opening the nav command menu (`ml:nav-open`). */\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\"?: string;\n  /** Path to the brand icon image (the app's real icon asset). */\n  iconSrc?: string;\n}\n\n/**\n * The main header trigger: brand mark + menu glyph in one quiet glass pill.\n * Mobile-first — a single ≥44px tap target instead of two small adjacent icons.\n * With no `onClick`, it opens the NavCommandMenu mounted elsewhere in the app.\n */\nexport function NavBrandButton({ onClick, className, iconSrc = \"/icon.png\", ...rest }: NavBrandButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick ?? (() => document.dispatchEvent(new CustomEvent(ML_NAV_OPEN)))}\n      aria-label={rest[\"aria-label\"] ?? \"Open navigation\"}\n      className={cn(\n        \"group flex h-11 items-center gap-2 rounded-full\",\n        \"bg-background/10 pl-2.5 pr-3 backdrop-blur-xl backdrop-saturate-150\",\n        \"transition-colors hover:bg-background/20 active:scale-[0.97]\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n        className\n      )}\n    >\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img src={iconSrc} alt=\"Medialane\" width={30} height={30} className=\"h-[30px] w-[30px] shrink-0\" />\n      <span className=\"flex flex-col gap-[5px]\" aria-hidden=\"true\">\n        <span className=\"h-[1.5px] w-4 rounded-full bg-muted-foreground transition-all group-hover:w-4 group-hover:bg-foreground\" />\n        <span className=\"h-[1.5px] w-2.5 rounded-full bg-muted-foreground transition-all group-hover:w-4 group-hover:bg-foreground\" />\n      </span>\n    </button>\n  );\n}\n\nexport interface NavIconButtonProps {\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\": string;\n  /** Show a small brand-colored status dot (e.g. wallet connected). */\n  indicator?: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * Circular glass header button — the right-side counterpart to NavBrandButton\n * (wallet / account trigger).\n */\nexport function NavIconButton({ onClick, className, indicator, children, ...rest }: NavIconButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={rest[\"aria-label\"]}\n      className={cn(\n        \"relative flex h-11 w-11 items-center justify-center rounded-full\",\n        \"bg-background/10 text-muted-foreground backdrop-blur-xl backdrop-saturate-150\",\n        \"transition-colors hover:bg-background/20 hover:text-foreground active:scale-[0.97]\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n        className\n      )}\n    >\n      {children}\n      {indicator && (\n        <span className=\"absolute right-[3px] top-[3px] h-2.5 w-2.5 rounded-full border-2 border-background bg-brand-blue\" />\n      )}\n    </button>\n  );\n}\n\nexport interface NavWalletTriggerProps {\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\"?: string;\n  /** Whether a wallet is currently connected. */\n  connected?: boolean;\n  /**\n   * The connected wallet's own icon (e.g. Argent/Braavos/Cartridge). Optional —\n   * apps with no single \"connected wallet\" identity to show (e.g. an\n   * email/social-login app) simply omit it and get the plain glyph below.\n   */\n  iconSrc?: string;\n  /**\n   * Override for the disconnected-state glyph (default: a plain `Wallet`\n   * icon). Apps whose actual connect entry point isn't a wallet — e.g. an\n   * email/social-login app whose users primarily sign in with Google — can\n   * pass a more accurate icon here so the ring points at what will really\n   * happen on click.\n   */\n  disconnectedIcon?: React.ReactNode;\n  /**\n   * Override for the connected-state glyph when there's no `iconSrc` (default:\n   * a plain `User` icon). Apps whose account is a self-custody key rather than\n   * a connected third-party wallet can pass a more accurate icon here (e.g. a\n   * shield-user glyph) so the trigger doesn't imply a custodial identity it\n   * isn't.\n   */\n  connectedIcon?: React.ReactNode;\n}\n\n/**\n * The right-side counterpart to `NavBrandButton` for a wallet/account entry\n * point: the same glass pill material, with a thin brand-gradient ring\n * traced around the rim instead of a static icon. Not connected — the ring\n * rotates slowly (an ambient \"something opens here\" cue) around a plain\n * `Wallet` glyph (override via `disconnectedIcon` — e.g. a Google mark for an\n * email/social-login app), so the trigger reads as an actionable connect\n * entry point rather than disappearing into the header (users weren't\n * noticing the bare ring). Connected — the ring settles to a static accent\n * and shows the connected\n * wallet's own icon via `iconSrc` when the caller has one; otherwise a plain\n * `User` glyph (never a fabricated generic avatar).\n */\nexport const NavWalletTrigger = React.forwardRef<HTMLButtonElement, NavWalletTriggerProps>(\n  function NavWalletTrigger({ onClick, className, connected = false, iconSrc, disconnectedIcon, connectedIcon, ...rest }, ref) {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={onClick}\n        aria-label={rest[\"aria-label\"] ?? (connected ? \"Account\" : \"Connect wallet\")}\n        className={cn(\n          \"ml-nav-wallet-trigger relative flex h-8 w-8 items-center justify-center rounded-full\",\n          \"bg-background/10 text-muted-foreground backdrop-blur-xl backdrop-saturate-150\",\n          \"transition-colors hover:bg-background/20 hover:text-foreground active:scale-[0.97]\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n          connected && \"ml-nav-wallet-trigger--connected\",\n          className\n        )}\n      >\n        <span className=\"ml-nav-wallet-ring\" aria-hidden=\"true\" />\n        {connected\n          ? (iconSrc\n              ? <img src={iconSrc} alt=\"\" width={16} height={16} className=\"h-4 w-4 shrink-0 rounded-full\" />\n              : (connectedIcon ?? <User className=\"h-3.5 w-3.5\" />))\n          : (disconnectedIcon ?? <Wallet className=\"h-3.5 w-3.5\" />)}\n      </button>\n    );\n  }\n);\n\n// ── Account sheet ─────────────────────────────────────────────────────────────\n\nconst ML_ACCOUNT_OPEN = \"ml:account-open\";\nconst ML_ACCOUNT_CLOSE = \"ml:account-close\";\nconst ML_NAV_OPEN = \"ml:nav-open\";\nconst ML_NAV_CLOSE = \"ml:nav-close\";\n\nexport function useNavAccountSheet() {\n  return {\n    open: () => document.dispatchEvent(new CustomEvent(ML_ACCOUNT_OPEN)),\n    close: () => document.dispatchEvent(new CustomEvent(ML_ACCOUNT_CLOSE)),\n  };\n}\n\nexport interface NavAccountSheetProps {\n  /** The app's account/wallet panel content — identity, network, disconnect, etc. */\n  children: React.ReactNode;\n}\n\n/**\n * The wallet-side surface: a centered, backdrop-blurred panel — the exact\n * same overlay + card treatment as `NavCommandMenu` (`.nav-canvas-overlay`,\n * `bg-background/90 backdrop-blur-2xl backdrop-saturate-150`), so every\n * global panel in the header reads as one system. No built-in title — this\n * is an account/wallet card, not a menu; content is entirely app-owned.\n *\n * Opens via `useNavAccountSheet().open()`. Mutually exclusive with the\n * command menu: opening one closes the other, and the shared `ml:nav-close`\n * event (fired by `useNavCommandMenu().close()`) closes this too.\n */\nexport function NavAccountSheet({ children }: NavAccountSheetProps) {\n  const [open, setOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    const onOpen = () => {\n      document.dispatchEvent(new CustomEvent(ML_NAV_CLOSE));\n      setOpen(true);\n    };\n    const onClose = () => setOpen(false);\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(ML_ACCOUNT_OPEN, onOpen);\n    document.addEventListener(ML_ACCOUNT_CLOSE, onClose);\n    document.addEventListener(ML_NAV_OPEN, onClose);\n    document.addEventListener(ML_NAV_CLOSE, onClose);\n    document.addEventListener(\"keydown\", onKey);\n    return () => {\n      document.removeEventListener(ML_ACCOUNT_OPEN, onOpen);\n      document.removeEventListener(ML_ACCOUNT_CLOSE, onClose);\n      document.removeEventListener(ML_NAV_OPEN, onClose);\n      document.removeEventListener(ML_NAV_CLOSE, onClose);\n      document.removeEventListener(\"keydown\", onKey);\n    };\n  }, []);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <>\n          {/* Backdrop blur — identical to NavCommandMenu's */}\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          {/* Panel — centered on desktop, bottom sheet on mobile, same as NavCommandMenu */}\n          <motion.div\n            className=\"fixed inset-0 z-[101] flex items-end justify-center p-3 pb-4 sm:items-center sm:p-4\"\n            initial={{ opacity: 0, y: 24 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: 24 }}\n            transition={{ duration: 0.18, ease: \"easeOut\" }}\n            onClick={() => setOpen(false)}\n          >\n            <div\n              className=\"relative w-full max-w-[380px] overflow-hidden rounded-[20px] border border-border/40 bg-background/90 shadow-2xl backdrop-blur-2xl backdrop-saturate-150\"\n              onClick={(e) => e.stopPropagation()}\n            >\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              <button\n                onClick={() => setOpen(false)}\n                className=\"absolute right-3 top-3 rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted/50 hover:text-foreground\"\n                aria-label=\"Close\"\n              >\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n                  <path d=\"M18 6 6 18M6 6l12 12\" />\n                </svg>\n              </button>\n              <div className=\"px-4 pb-4 pt-5 sm:pt-6\">{children}</div>\n            </div>\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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","names":["NavWalletTrigger"]}
+{"version":3,"sources":["../../src/components/nav-shell.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { User, Wallet } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\n// ── Header buttons ────────────────────────────────────────────────────────────\n\nexport interface NavBrandButtonProps {\n  /** Defaults to opening the nav command menu (`ml:nav-open`). */\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\"?: string;\n  /** Path to the brand icon image (the app's real icon asset). */\n  iconSrc?: string;\n}\n\n/**\n * The main header trigger: brand mark + menu glyph in one quiet glass pill.\n * Mobile-first — a single ≥44px tap target instead of two small adjacent icons.\n * With no `onClick`, it opens the NavCommandMenu mounted elsewhere in the app.\n */\nexport function NavBrandButton({ onClick, className, iconSrc = \"/icon.png\", ...rest }: NavBrandButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick ?? (() => document.dispatchEvent(new CustomEvent(ML_NAV_OPEN)))}\n      aria-label={rest[\"aria-label\"] ?? \"Open navigation\"}\n      className={cn(\n        \"group flex h-11 items-center gap-2 rounded-full\",\n        \"bg-background/10 pl-2.5 pr-3 backdrop-blur-xl backdrop-saturate-150\",\n        \"transition-colors hover:bg-background/20 active:scale-[0.97]\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n        className\n      )}\n    >\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img src={iconSrc} alt=\"Medialane\" width={30} height={30} className=\"h-[30px] w-[30px] shrink-0\" />\n      <span className=\"flex flex-col gap-[5px]\" aria-hidden=\"true\">\n        <span className=\"h-[1.5px] w-4 rounded-full bg-muted-foreground transition-all group-hover:w-4 group-hover:bg-foreground\" />\n        <span className=\"h-[1.5px] w-2.5 rounded-full bg-muted-foreground transition-all group-hover:w-4 group-hover:bg-foreground\" />\n      </span>\n    </button>\n  );\n}\n\nexport interface NavIconButtonProps {\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\": string;\n  /** Show a small brand-colored status dot (e.g. wallet connected). */\n  indicator?: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * Circular glass header button — the right-side counterpart to NavBrandButton\n * (wallet / account trigger).\n */\nexport function NavIconButton({ onClick, className, indicator, children, ...rest }: NavIconButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={rest[\"aria-label\"]}\n      className={cn(\n        \"relative flex h-11 w-11 items-center justify-center rounded-full\",\n        \"bg-background/10 text-muted-foreground backdrop-blur-xl backdrop-saturate-150\",\n        \"transition-colors hover:bg-background/20 hover:text-foreground active:scale-[0.97]\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n        className\n      )}\n    >\n      {children}\n      {indicator && (\n        <span className=\"absolute right-[3px] top-[3px] h-2.5 w-2.5 rounded-full border-2 border-background bg-brand-blue\" />\n      )}\n    </button>\n  );\n}\n\nexport interface NavWalletTriggerProps {\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\"?: string;\n  /** Whether a wallet is currently connected. */\n  connected?: boolean;\n  /**\n   * The connected wallet's own icon (e.g. Argent/Braavos/Cartridge). Optional —\n   * apps with no single \"connected wallet\" identity to show (e.g. an\n   * email/social-login app) simply omit it and get the plain glyph below.\n   */\n  iconSrc?: string;\n  /**\n   * Override for the disconnected-state glyph (default: a plain `Wallet`\n   * icon). Apps whose actual connect entry point isn't a wallet — e.g. an\n   * email/social-login app whose users primarily sign in with Google — can\n   * pass a more accurate icon here so the ring points at what will really\n   * happen on click.\n   */\n  disconnectedIcon?: React.ReactNode;\n  /**\n   * Override for the connected-state glyph when there's no `iconSrc` (default:\n   * a plain `User` icon). Apps whose account is a self-custody key rather than\n   * a connected third-party wallet can pass a more accurate icon here (e.g. a\n   * shield-user glyph) so the trigger doesn't imply a custodial identity it\n   * isn't.\n   */\n  connectedIcon?: React.ReactNode;\n}\n\n/**\n * The right-side counterpart to `NavBrandButton` for a wallet/account entry\n * point: the same glass pill material, with a thin brand-gradient ring\n * traced around the rim instead of a static icon. Not connected — the ring\n * rotates slowly (an ambient \"something opens here\" cue) around a plain\n * `Wallet` glyph (override via `disconnectedIcon` — e.g. a Google mark for an\n * email/social-login app), so the trigger reads as an actionable connect\n * entry point rather than disappearing into the header (users weren't\n * noticing the bare ring). Connected — the ring settles to a static accent\n * and shows the connected\n * wallet's own icon via `iconSrc` when the caller has one; otherwise a plain\n * `User` glyph (never a fabricated generic avatar).\n */\nexport const NavWalletTrigger = React.forwardRef<HTMLButtonElement, NavWalletTriggerProps>(\n  function NavWalletTrigger({ onClick, className, connected = false, iconSrc, disconnectedIcon, connectedIcon, ...rest }, ref) {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={onClick}\n        aria-label={rest[\"aria-label\"] ?? (connected ? \"Account\" : \"Connect wallet\")}\n        className={cn(\n          \"ml-nav-wallet-trigger relative flex h-11 w-11 items-center justify-center rounded-full\",\n          \"bg-background/10 text-muted-foreground backdrop-blur-xl backdrop-saturate-150\",\n          \"transition-colors hover:bg-background/20 hover:text-foreground active:scale-[0.97]\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n          connected && \"ml-nav-wallet-trigger--connected\",\n          className\n        )}\n      >\n        <span className=\"ml-nav-wallet-ring\" aria-hidden=\"true\" />\n        {connected\n          ? (iconSrc\n              ? <img src={iconSrc} alt=\"\" width={16} height={16} className=\"h-4 w-4 shrink-0 rounded-full\" />\n              : (connectedIcon ?? <User className=\"h-3.5 w-3.5\" />))\n          : (disconnectedIcon ?? <Wallet className=\"h-3.5 w-3.5\" />)}\n      </button>\n    );\n  }\n);\n\n// ── Account sheet ─────────────────────────────────────────────────────────────\n\nconst ML_ACCOUNT_OPEN = \"ml:account-open\";\nconst ML_ACCOUNT_CLOSE = \"ml:account-close\";\nconst ML_NAV_OPEN = \"ml:nav-open\";\nconst ML_NAV_CLOSE = \"ml:nav-close\";\n\nexport function useNavAccountSheet() {\n  return {\n    open: () => document.dispatchEvent(new CustomEvent(ML_ACCOUNT_OPEN)),\n    close: () => document.dispatchEvent(new CustomEvent(ML_ACCOUNT_CLOSE)),\n  };\n}\n\nexport interface NavAccountSheetProps {\n  /** The app's account/wallet panel content — identity, network, disconnect, etc. */\n  children: React.ReactNode;\n}\n\n/**\n * The wallet-side surface: a centered, backdrop-blurred panel — the exact\n * same overlay + card treatment as `NavCommandMenu` (`.nav-canvas-overlay`,\n * `bg-background/90 backdrop-blur-2xl backdrop-saturate-150`), so every\n * global panel in the header reads as one system. No built-in title — this\n * is an account/wallet card, not a menu; content is entirely app-owned.\n *\n * Opens via `useNavAccountSheet().open()`. Mutually exclusive with the\n * command menu: opening one closes the other, and the shared `ml:nav-close`\n * event (fired by `useNavCommandMenu().close()`) closes this too.\n */\nexport function NavAccountSheet({ children }: NavAccountSheetProps) {\n  const [open, setOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    const onOpen = () => {\n      document.dispatchEvent(new CustomEvent(ML_NAV_CLOSE));\n      setOpen(true);\n    };\n    const onClose = () => setOpen(false);\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(ML_ACCOUNT_OPEN, onOpen);\n    document.addEventListener(ML_ACCOUNT_CLOSE, onClose);\n    document.addEventListener(ML_NAV_OPEN, onClose);\n    document.addEventListener(ML_NAV_CLOSE, onClose);\n    document.addEventListener(\"keydown\", onKey);\n    return () => {\n      document.removeEventListener(ML_ACCOUNT_OPEN, onOpen);\n      document.removeEventListener(ML_ACCOUNT_CLOSE, onClose);\n      document.removeEventListener(ML_NAV_OPEN, onClose);\n      document.removeEventListener(ML_NAV_CLOSE, onClose);\n      document.removeEventListener(\"keydown\", onKey);\n    };\n  }, []);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <>\n          {/* Backdrop blur — identical to NavCommandMenu's */}\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          {/* Panel — centered on desktop, bottom sheet on mobile, same as NavCommandMenu */}\n          <motion.div\n            className=\"fixed inset-0 z-[101] flex items-end justify-center p-3 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:items-center sm:p-4\"\n            initial={{ opacity: 0, y: 24 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: 24 }}\n            transition={{ duration: 0.18, ease: \"easeOut\" }}\n            onClick={() => setOpen(false)}\n          >\n            <div\n              className=\"relative w-full max-w-[380px] overflow-hidden rounded-[20px] border border-border/40 bg-background/90 shadow-2xl backdrop-blur-2xl backdrop-saturate-150\"\n              onClick={(e) => e.stopPropagation()}\n            >\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              <button\n                onClick={() => setOpen(false)}\n                className=\"absolute right-3 top-3 rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted/50 hover:text-foreground\"\n                aria-label=\"Close\"\n              >\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n                  <path d=\"M18 6 6 18M6 6l12 12\" />\n                </svg>\n              </button>\n              <div className=\"px-4 pb-4 pt-5 sm:pt-6\">{children}</div>\n            </div>\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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","names":["NavWalletTrigger"]}

package/dist/components/nav-shell.js

@@ -59,7 +59,7 @@ const NavWalletTrigger = React.forwardRef(
         onClick,
         "aria-label": rest["aria-label"] ?? (connected ? "Account" : "Connect wallet"),
         className: cn(
-          "ml-nav-wallet-trigger relative flex h-8 w-8 items-center justify-center rounded-full",
+          "ml-nav-wallet-trigger relative flex h-11 w-11 items-center justify-center rounded-full",
           "bg-background/10 text-muted-foreground backdrop-blur-xl backdrop-saturate-150",
           "transition-colors hover:bg-background/20 hover:text-foreground active:scale-[0.97]",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
@@ -123,7 +123,7 @@ function NavAccountSheet({ children }) {
     /* @__PURE__ */ jsx(
       motion.div,
       {
-        className: "fixed inset-0 z-[101] flex items-end justify-center p-3 pb-4 sm:items-center sm:p-4",
+        className: "fixed inset-0 z-[101] flex items-end justify-center p-3 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:items-center sm:p-4",
         initial: { opacity: 0, y: 24 },
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: 24 },

package/dist/components/nav-shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/nav-shell.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { User, Wallet } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\n// ── Header buttons ────────────────────────────────────────────────────────────\n\nexport interface NavBrandButtonProps {\n  /** Defaults to opening the nav command menu (`ml:nav-open`). */\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\"?: string;\n  /** Path to the brand icon image (the app's real icon asset). */\n  iconSrc?: string;\n}\n\n/**\n * The main header trigger: brand mark + menu glyph in one quiet glass pill.\n * Mobile-first — a single ≥44px tap target instead of two small adjacent icons.\n * With no `onClick`, it opens the NavCommandMenu mounted elsewhere in the app.\n */\nexport function NavBrandButton({ onClick, className, iconSrc = \"/icon.png\", ...rest }: NavBrandButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick ?? (() => document.dispatchEvent(new CustomEvent(ML_NAV_OPEN)))}\n      aria-label={rest[\"aria-label\"] ?? \"Open navigation\"}\n      className={cn(\n        \"group flex h-11 items-center gap-2 rounded-full\",\n        \"bg-background/10 pl-2.5 pr-3 backdrop-blur-xl backdrop-saturate-150\",\n        \"transition-colors hover:bg-background/20 active:scale-[0.97]\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n        className\n      )}\n    >\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img src={iconSrc} alt=\"Medialane\" width={30} height={30} className=\"h-[30px] w-[30px] shrink-0\" />\n      <span className=\"flex flex-col gap-[5px]\" aria-hidden=\"true\">\n        <span className=\"h-[1.5px] w-4 rounded-full bg-muted-foreground transition-all group-hover:w-4 group-hover:bg-foreground\" />\n        <span className=\"h-[1.5px] w-2.5 rounded-full bg-muted-foreground transition-all group-hover:w-4 group-hover:bg-foreground\" />\n      </span>\n    </button>\n  );\n}\n\nexport interface NavIconButtonProps {\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\": string;\n  /** Show a small brand-colored status dot (e.g. wallet connected). */\n  indicator?: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * Circular glass header button — the right-side counterpart to NavBrandButton\n * (wallet / account trigger).\n */\nexport function NavIconButton({ onClick, className, indicator, children, ...rest }: NavIconButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={rest[\"aria-label\"]}\n      className={cn(\n        \"relative flex h-11 w-11 items-center justify-center rounded-full\",\n        \"bg-background/10 text-muted-foreground backdrop-blur-xl backdrop-saturate-150\",\n        \"transition-colors hover:bg-background/20 hover:text-foreground active:scale-[0.97]\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n        className\n      )}\n    >\n      {children}\n      {indicator && (\n        <span className=\"absolute right-[3px] top-[3px] h-2.5 w-2.5 rounded-full border-2 border-background bg-brand-blue\" />\n      )}\n    </button>\n  );\n}\n\nexport interface NavWalletTriggerProps {\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\"?: string;\n  /** Whether a wallet is currently connected. */\n  connected?: boolean;\n  /**\n   * The connected wallet's own icon (e.g. Argent/Braavos/Cartridge). Optional —\n   * apps with no single \"connected wallet\" identity to show (e.g. an\n   * email/social-login app) simply omit it and get the plain glyph below.\n   */\n  iconSrc?: string;\n  /**\n   * Override for the disconnected-state glyph (default: a plain `Wallet`\n   * icon). Apps whose actual connect entry point isn't a wallet — e.g. an\n   * email/social-login app whose users primarily sign in with Google — can\n   * pass a more accurate icon here so the ring points at what will really\n   * happen on click.\n   */\n  disconnectedIcon?: React.ReactNode;\n  /**\n   * Override for the connected-state glyph when there's no `iconSrc` (default:\n   * a plain `User` icon). Apps whose account is a self-custody key rather than\n   * a connected third-party wallet can pass a more accurate icon here (e.g. a\n   * shield-user glyph) so the trigger doesn't imply a custodial identity it\n   * isn't.\n   */\n  connectedIcon?: React.ReactNode;\n}\n\n/**\n * The right-side counterpart to `NavBrandButton` for a wallet/account entry\n * point: the same glass pill material, with a thin brand-gradient ring\n * traced around the rim instead of a static icon. Not connected — the ring\n * rotates slowly (an ambient \"something opens here\" cue) around a plain\n * `Wallet` glyph (override via `disconnectedIcon` — e.g. a Google mark for an\n * email/social-login app), so the trigger reads as an actionable connect\n * entry point rather than disappearing into the header (users weren't\n * noticing the bare ring). Connected — the ring settles to a static accent\n * and shows the connected\n * wallet's own icon via `iconSrc` when the caller has one; otherwise a plain\n * `User` glyph (never a fabricated generic avatar).\n */\nexport const NavWalletTrigger = React.forwardRef<HTMLButtonElement, NavWalletTriggerProps>(\n  function NavWalletTrigger({ onClick, className, connected = false, iconSrc, disconnectedIcon, connectedIcon, ...rest }, ref) {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={onClick}\n        aria-label={rest[\"aria-label\"] ?? (connected ? \"Account\" : \"Connect wallet\")}\n        className={cn(\n          \"ml-nav-wallet-trigger relative flex h-8 w-8 items-center justify-center rounded-full\",\n          \"bg-background/10 text-muted-foreground backdrop-blur-xl backdrop-saturate-150\",\n          \"transition-colors hover:bg-background/20 hover:text-foreground active:scale-[0.97]\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n          connected && \"ml-nav-wallet-trigger--connected\",\n          className\n        )}\n      >\n        <span className=\"ml-nav-wallet-ring\" aria-hidden=\"true\" />\n        {connected\n          ? (iconSrc\n              ? <img src={iconSrc} alt=\"\" width={16} height={16} className=\"h-4 w-4 shrink-0 rounded-full\" />\n              : (connectedIcon ?? <User className=\"h-3.5 w-3.5\" />))\n          : (disconnectedIcon ?? <Wallet className=\"h-3.5 w-3.5\" />)}\n      </button>\n    );\n  }\n);\n\n// ── Account sheet ─────────────────────────────────────────────────────────────\n\nconst ML_ACCOUNT_OPEN = \"ml:account-open\";\nconst ML_ACCOUNT_CLOSE = \"ml:account-close\";\nconst ML_NAV_OPEN = \"ml:nav-open\";\nconst ML_NAV_CLOSE = \"ml:nav-close\";\n\nexport function useNavAccountSheet() {\n  return {\n    open: () => document.dispatchEvent(new CustomEvent(ML_ACCOUNT_OPEN)),\n    close: () => document.dispatchEvent(new CustomEvent(ML_ACCOUNT_CLOSE)),\n  };\n}\n\nexport interface NavAccountSheetProps {\n  /** The app's account/wallet panel content — identity, network, disconnect, etc. */\n  children: React.ReactNode;\n}\n\n/**\n * The wallet-side surface: a centered, backdrop-blurred panel — the exact\n * same overlay + card treatment as `NavCommandMenu` (`.nav-canvas-overlay`,\n * `bg-background/90 backdrop-blur-2xl backdrop-saturate-150`), so every\n * global panel in the header reads as one system. No built-in title — this\n * is an account/wallet card, not a menu; content is entirely app-owned.\n *\n * Opens via `useNavAccountSheet().open()`. Mutually exclusive with the\n * command menu: opening one closes the other, and the shared `ml:nav-close`\n * event (fired by `useNavCommandMenu().close()`) closes this too.\n */\nexport function NavAccountSheet({ children }: NavAccountSheetProps) {\n  const [open, setOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    const onOpen = () => {\n      document.dispatchEvent(new CustomEvent(ML_NAV_CLOSE));\n      setOpen(true);\n    };\n    const onClose = () => setOpen(false);\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(ML_ACCOUNT_OPEN, onOpen);\n    document.addEventListener(ML_ACCOUNT_CLOSE, onClose);\n    document.addEventListener(ML_NAV_OPEN, onClose);\n    document.addEventListener(ML_NAV_CLOSE, onClose);\n    document.addEventListener(\"keydown\", onKey);\n    return () => {\n      document.removeEventListener(ML_ACCOUNT_OPEN, onOpen);\n      document.removeEventListener(ML_ACCOUNT_CLOSE, onClose);\n      document.removeEventListener(ML_NAV_OPEN, onClose);\n      document.removeEventListener(ML_NAV_CLOSE, onClose);\n      document.removeEventListener(\"keydown\", onKey);\n    };\n  }, []);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <>\n          {/* Backdrop blur — identical to NavCommandMenu's */}\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          {/* Panel — centered on desktop, bottom sheet on mobile, same as NavCommandMenu */}\n          <motion.div\n            className=\"fixed inset-0 z-[101] flex items-end justify-center p-3 pb-4 sm:items-center sm:p-4\"\n            initial={{ opacity: 0, y: 24 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: 24 }}\n            transition={{ duration: 0.18, ease: \"easeOut\" }}\n            onClick={() => setOpen(false)}\n          >\n            <div\n              className=\"relative w-full max-w-[380px] overflow-hidden rounded-[20px] border border-border/40 bg-background/90 shadow-2xl backdrop-blur-2xl backdrop-saturate-150\"\n              onClick={(e) => e.stopPropagation()}\n            >\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              <button\n                onClick={() => setOpen(false)}\n                className=\"absolute right-3 top-3 rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted/50 hover:text-foreground\"\n                aria-label=\"Close\"\n              >\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n                  <path d=\"M18 6 6 18M6 6l12 12\" />\n                </svg>\n              </button>\n              <div className=\"px-4 pb-4 pt-5 sm:pt-6\">{children}</div>\n            </div>\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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","names":["NavWalletTrigger"]}
+{"version":3,"sources":["../../src/components/nav-shell.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { User, Wallet } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\n// ── Header buttons ────────────────────────────────────────────────────────────\n\nexport interface NavBrandButtonProps {\n  /** Defaults to opening the nav command menu (`ml:nav-open`). */\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\"?: string;\n  /** Path to the brand icon image (the app's real icon asset). */\n  iconSrc?: string;\n}\n\n/**\n * The main header trigger: brand mark + menu glyph in one quiet glass pill.\n * Mobile-first — a single ≥44px tap target instead of two small adjacent icons.\n * With no `onClick`, it opens the NavCommandMenu mounted elsewhere in the app.\n */\nexport function NavBrandButton({ onClick, className, iconSrc = \"/icon.png\", ...rest }: NavBrandButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick ?? (() => document.dispatchEvent(new CustomEvent(ML_NAV_OPEN)))}\n      aria-label={rest[\"aria-label\"] ?? \"Open navigation\"}\n      className={cn(\n        \"group flex h-11 items-center gap-2 rounded-full\",\n        \"bg-background/10 pl-2.5 pr-3 backdrop-blur-xl backdrop-saturate-150\",\n        \"transition-colors hover:bg-background/20 active:scale-[0.97]\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n        className\n      )}\n    >\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img src={iconSrc} alt=\"Medialane\" width={30} height={30} className=\"h-[30px] w-[30px] shrink-0\" />\n      <span className=\"flex flex-col gap-[5px]\" aria-hidden=\"true\">\n        <span className=\"h-[1.5px] w-4 rounded-full bg-muted-foreground transition-all group-hover:w-4 group-hover:bg-foreground\" />\n        <span className=\"h-[1.5px] w-2.5 rounded-full bg-muted-foreground transition-all group-hover:w-4 group-hover:bg-foreground\" />\n      </span>\n    </button>\n  );\n}\n\nexport interface NavIconButtonProps {\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\": string;\n  /** Show a small brand-colored status dot (e.g. wallet connected). */\n  indicator?: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * Circular glass header button — the right-side counterpart to NavBrandButton\n * (wallet / account trigger).\n */\nexport function NavIconButton({ onClick, className, indicator, children, ...rest }: NavIconButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={rest[\"aria-label\"]}\n      className={cn(\n        \"relative flex h-11 w-11 items-center justify-center rounded-full\",\n        \"bg-background/10 text-muted-foreground backdrop-blur-xl backdrop-saturate-150\",\n        \"transition-colors hover:bg-background/20 hover:text-foreground active:scale-[0.97]\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n        className\n      )}\n    >\n      {children}\n      {indicator && (\n        <span className=\"absolute right-[3px] top-[3px] h-2.5 w-2.5 rounded-full border-2 border-background bg-brand-blue\" />\n      )}\n    </button>\n  );\n}\n\nexport interface NavWalletTriggerProps {\n  onClick?: () => void;\n  className?: string;\n  \"aria-label\"?: string;\n  /** Whether a wallet is currently connected. */\n  connected?: boolean;\n  /**\n   * The connected wallet's own icon (e.g. Argent/Braavos/Cartridge). Optional —\n   * apps with no single \"connected wallet\" identity to show (e.g. an\n   * email/social-login app) simply omit it and get the plain glyph below.\n   */\n  iconSrc?: string;\n  /**\n   * Override for the disconnected-state glyph (default: a plain `Wallet`\n   * icon). Apps whose actual connect entry point isn't a wallet — e.g. an\n   * email/social-login app whose users primarily sign in with Google — can\n   * pass a more accurate icon here so the ring points at what will really\n   * happen on click.\n   */\n  disconnectedIcon?: React.ReactNode;\n  /**\n   * Override for the connected-state glyph when there's no `iconSrc` (default:\n   * a plain `User` icon). Apps whose account is a self-custody key rather than\n   * a connected third-party wallet can pass a more accurate icon here (e.g. a\n   * shield-user glyph) so the trigger doesn't imply a custodial identity it\n   * isn't.\n   */\n  connectedIcon?: React.ReactNode;\n}\n\n/**\n * The right-side counterpart to `NavBrandButton` for a wallet/account entry\n * point: the same glass pill material, with a thin brand-gradient ring\n * traced around the rim instead of a static icon. Not connected — the ring\n * rotates slowly (an ambient \"something opens here\" cue) around a plain\n * `Wallet` glyph (override via `disconnectedIcon` — e.g. a Google mark for an\n * email/social-login app), so the trigger reads as an actionable connect\n * entry point rather than disappearing into the header (users weren't\n * noticing the bare ring). Connected — the ring settles to a static accent\n * and shows the connected\n * wallet's own icon via `iconSrc` when the caller has one; otherwise a plain\n * `User` glyph (never a fabricated generic avatar).\n */\nexport const NavWalletTrigger = React.forwardRef<HTMLButtonElement, NavWalletTriggerProps>(\n  function NavWalletTrigger({ onClick, className, connected = false, iconSrc, disconnectedIcon, connectedIcon, ...rest }, ref) {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={onClick}\n        aria-label={rest[\"aria-label\"] ?? (connected ? \"Account\" : \"Connect wallet\")}\n        className={cn(\n          \"ml-nav-wallet-trigger relative flex h-11 w-11 items-center justify-center rounded-full\",\n          \"bg-background/10 text-muted-foreground backdrop-blur-xl backdrop-saturate-150\",\n          \"transition-colors hover:bg-background/20 hover:text-foreground active:scale-[0.97]\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60\",\n          connected && \"ml-nav-wallet-trigger--connected\",\n          className\n        )}\n      >\n        <span className=\"ml-nav-wallet-ring\" aria-hidden=\"true\" />\n        {connected\n          ? (iconSrc\n              ? <img src={iconSrc} alt=\"\" width={16} height={16} className=\"h-4 w-4 shrink-0 rounded-full\" />\n              : (connectedIcon ?? <User className=\"h-3.5 w-3.5\" />))\n          : (disconnectedIcon ?? <Wallet className=\"h-3.5 w-3.5\" />)}\n      </button>\n    );\n  }\n);\n\n// ── Account sheet ─────────────────────────────────────────────────────────────\n\nconst ML_ACCOUNT_OPEN = \"ml:account-open\";\nconst ML_ACCOUNT_CLOSE = \"ml:account-close\";\nconst ML_NAV_OPEN = \"ml:nav-open\";\nconst ML_NAV_CLOSE = \"ml:nav-close\";\n\nexport function useNavAccountSheet() {\n  return {\n    open: () => document.dispatchEvent(new CustomEvent(ML_ACCOUNT_OPEN)),\n    close: () => document.dispatchEvent(new CustomEvent(ML_ACCOUNT_CLOSE)),\n  };\n}\n\nexport interface NavAccountSheetProps {\n  /** The app's account/wallet panel content — identity, network, disconnect, etc. */\n  children: React.ReactNode;\n}\n\n/**\n * The wallet-side surface: a centered, backdrop-blurred panel — the exact\n * same overlay + card treatment as `NavCommandMenu` (`.nav-canvas-overlay`,\n * `bg-background/90 backdrop-blur-2xl backdrop-saturate-150`), so every\n * global panel in the header reads as one system. No built-in title — this\n * is an account/wallet card, not a menu; content is entirely app-owned.\n *\n * Opens via `useNavAccountSheet().open()`. Mutually exclusive with the\n * command menu: opening one closes the other, and the shared `ml:nav-close`\n * event (fired by `useNavCommandMenu().close()`) closes this too.\n */\nexport function NavAccountSheet({ children }: NavAccountSheetProps) {\n  const [open, setOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    const onOpen = () => {\n      document.dispatchEvent(new CustomEvent(ML_NAV_CLOSE));\n      setOpen(true);\n    };\n    const onClose = () => setOpen(false);\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(ML_ACCOUNT_OPEN, onOpen);\n    document.addEventListener(ML_ACCOUNT_CLOSE, onClose);\n    document.addEventListener(ML_NAV_OPEN, onClose);\n    document.addEventListener(ML_NAV_CLOSE, onClose);\n    document.addEventListener(\"keydown\", onKey);\n    return () => {\n      document.removeEventListener(ML_ACCOUNT_OPEN, onOpen);\n      document.removeEventListener(ML_ACCOUNT_CLOSE, onClose);\n      document.removeEventListener(ML_NAV_OPEN, onClose);\n      document.removeEventListener(ML_NAV_CLOSE, onClose);\n      document.removeEventListener(\"keydown\", onKey);\n    };\n  }, []);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <>\n          {/* Backdrop blur — identical to NavCommandMenu's */}\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          {/* Panel — centered on desktop, bottom sheet on mobile, same as NavCommandMenu */}\n          <motion.div\n            className=\"fixed inset-0 z-[101] flex items-end justify-center p-3 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:items-center sm:p-4\"\n            initial={{ opacity: 0, y: 24 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: 24 }}\n            transition={{ duration: 0.18, ease: \"easeOut\" }}\n            onClick={() => setOpen(false)}\n          >\n            <div\n              className=\"relative w-full max-w-[380px] overflow-hidden rounded-[20px] border border-border/40 bg-background/90 shadow-2xl backdrop-blur-2xl backdrop-saturate-150\"\n              onClick={(e) => e.stopPropagation()}\n            >\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              <button\n                onClick={() => setOpen(false)}\n                className=\"absolute right-3 top-3 rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted/50 hover:text-foreground\"\n                aria-label=\"Close\"\n              >\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n                  <path d=\"M18 6 6 18M6 6l12 12\" />\n                </svg>\n              </button>\n              <div className=\"px-4 pb-4 pt-5 sm:pt-6\">{children}</div>\n            </div>\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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","names":["NavWalletTrigger"]}

package/dist/components/portfolio-chip-filter.cjs

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(portfolio_chip_filter_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_link = __toESM(require("next/link"), 1);
 var import_cn = require("../utils/cn.js");
-const CHIP_CLASS = "shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors border";
+const CHIP_CLASS = "shrink-0 rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap transition-colors border";
 const INACTIVE_CLASS = "bg-muted border-border/60 text-muted-foreground hover:text-foreground hover:border-border";
 const ACTIVE_CLASS = "bg-primary border-primary text-primary-foreground font-medium";
 function PortfolioChipFilter({

package/dist/components/portfolio-chip-filter.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-chip-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioChipFilterOption {\n  key: string;\n  label: string;\n  /**\n   * When set, this chip is a direct navigation link rather than an in-page\n   * filter. It's marked active when `href` equals the current `value`\n   * (pass the current pathname as `value` for a location-aware nav bar).\n   */\n  href?: string;\n}\n\nexport interface PortfolioChipFilterProps {\n  options: PortfolioChipFilterOption[];\n  /** Selected filter key, or the current pathname when used for navigation. */\n  value: string;\n  onChange: (key: string) => void;\n  /** Suppress the auto-injected \"All\" chip — for pure navigation bars where every option already has an href. Default true. */\n  showAll?: boolean;\n  className?: string;\n}\n\nconst CHIP_CLASS =\n  \"shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors border\";\nconst INACTIVE_CLASS = \"bg-muted border-border/60 text-muted-foreground hover:text-foreground hover:border-border\";\nconst ACTIVE_CLASS = \"bg-primary border-primary text-primary-foreground font-medium\";\n\n/**\n * Horizontally-scrollable chip row — the portfolio section's sole\n * navigation mechanism (Instagram/YouTube-style chips), used both as an\n * in-page filter (chips with no `href`, toggled via `onChange`) and as\n * cross-page navigation (chips with `href`, highlighted active by matching\n * `value` against the current pathname).\n */\nexport function PortfolioChipFilter({\n  options,\n  value,\n  onChange,\n  showAll = true,\n  className,\n}: PortfolioChipFilterProps) {\n  const items = showAll ? [{ key: \"all\", label: \"All\" }, ...options] : options;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1.5 overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\",\n        className,\n      )}\n    >\n      {items.map((item) =>\n        item.href ? (\n          <Link\n            key={item.key}\n            href={item.href}\n            className={cn(CHIP_CLASS, item.href === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </Link>\n        ) : (\n          <button\n            key={item.key}\n            type=\"button\"\n            onClick={() => onChange(item.key)}\n            className={cn(CHIP_CLASS, item.key === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </button>\n        ),\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDU;AAtDV,kBAAiB;AACjB,gBAAmB;AAuBnB,MAAM,aACJ;AACF,MAAM,iBAAiB;AACvB,MAAM,eAAe;AASd,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAA6B;AAC3B,QAAM,QAAQ,UAAU,CAAC,EAAE,KAAK,OAAO,OAAO,MAAM,GAAG,GAAG,OAAO,IAAI;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,gBAAM;AAAA,QAAI,CAAC,SACV,KAAK,OACH;AAAA,UAAC,YAAAA;AAAA,UAAA;AAAA,YAEC,MAAM,KAAK;AAAA,YACX,eAAW,cAAG,YAAY,KAAK,SAAS,QAAQ,eAAe,cAAc;AAAA,YAE5E,eAAK;AAAA;AAAA,UAJD,KAAK;AAAA,QAKZ,IAEA;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,YAChC,eAAW,cAAG,YAAY,KAAK,QAAQ,QAAQ,eAAe,cAAc;AAAA,YAE3E,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/portfolio-chip-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioChipFilterOption {\n  key: string;\n  label: string;\n  /**\n   * When set, this chip is a direct navigation link rather than an in-page\n   * filter. It's marked active when `href` equals the current `value`\n   * (pass the current pathname as `value` for a location-aware nav bar).\n   */\n  href?: string;\n}\n\nexport interface PortfolioChipFilterProps {\n  options: PortfolioChipFilterOption[];\n  /** Selected filter key, or the current pathname when used for navigation. */\n  value: string;\n  onChange: (key: string) => void;\n  /** Suppress the auto-injected \"All\" chip — for pure navigation bars where every option already has an href. Default true. */\n  showAll?: boolean;\n  className?: string;\n}\n\nconst CHIP_CLASS =\n  \"shrink-0 rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap transition-colors border\";\nconst INACTIVE_CLASS = \"bg-muted border-border/60 text-muted-foreground hover:text-foreground hover:border-border\";\nconst ACTIVE_CLASS = \"bg-primary border-primary text-primary-foreground font-medium\";\n\n/**\n * Horizontally-scrollable chip row — the portfolio section's sole\n * navigation mechanism (Instagram/YouTube-style chips), used both as an\n * in-page filter (chips with no `href`, toggled via `onChange`) and as\n * cross-page navigation (chips with `href`, highlighted active by matching\n * `value` against the current pathname).\n */\nexport function PortfolioChipFilter({\n  options,\n  value,\n  onChange,\n  showAll = true,\n  className,\n}: PortfolioChipFilterProps) {\n  const items = showAll ? [{ key: \"all\", label: \"All\" }, ...options] : options;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1.5 overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\",\n        className,\n      )}\n    >\n      {items.map((item) =>\n        item.href ? (\n          <Link\n            key={item.key}\n            href={item.href}\n            className={cn(CHIP_CLASS, item.href === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </Link>\n        ) : (\n          <button\n            key={item.key}\n            type=\"button\"\n            onClick={() => onChange(item.key)}\n            className={cn(CHIP_CLASS, item.key === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </button>\n        ),\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDU;AAtDV,kBAAiB;AACjB,gBAAmB;AAuBnB,MAAM,aACJ;AACF,MAAM,iBAAiB;AACvB,MAAM,eAAe;AASd,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAA6B;AAC3B,QAAM,QAAQ,UAAU,CAAC,EAAE,KAAK,OAAO,OAAO,MAAM,GAAG,GAAG,OAAO,IAAI;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,gBAAM;AAAA,QAAI,CAAC,SACV,KAAK,OACH;AAAA,UAAC,YAAAA;AAAA,UAAA;AAAA,YAEC,MAAM,KAAK;AAAA,YACX,eAAW,cAAG,YAAY,KAAK,SAAS,QAAQ,eAAe,cAAc;AAAA,YAE5E,eAAK;AAAA;AAAA,UAJD,KAAK;AAAA,QAKZ,IAEA;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,YAChC,eAAW,cAAG,YAAY,KAAK,QAAQ,QAAQ,eAAe,cAAc;AAAA,YAE3E,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":["Link"]}

package/dist/components/portfolio-chip-filter.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import Link from "next/link";
 import { cn } from "../utils/cn.js";
-const CHIP_CLASS = "shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors border";
+const CHIP_CLASS = "shrink-0 rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap transition-colors border";
 const INACTIVE_CLASS = "bg-muted border-border/60 text-muted-foreground hover:text-foreground hover:border-border";
 const ACTIVE_CLASS = "bg-primary border-primary text-primary-foreground font-medium";
 function PortfolioChipFilter({

package/dist/components/portfolio-chip-filter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-chip-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioChipFilterOption {\n  key: string;\n  label: string;\n  /**\n   * When set, this chip is a direct navigation link rather than an in-page\n   * filter. It's marked active when `href` equals the current `value`\n   * (pass the current pathname as `value` for a location-aware nav bar).\n   */\n  href?: string;\n}\n\nexport interface PortfolioChipFilterProps {\n  options: PortfolioChipFilterOption[];\n  /** Selected filter key, or the current pathname when used for navigation. */\n  value: string;\n  onChange: (key: string) => void;\n  /** Suppress the auto-injected \"All\" chip — for pure navigation bars where every option already has an href. Default true. */\n  showAll?: boolean;\n  className?: string;\n}\n\nconst CHIP_CLASS =\n  \"shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors border\";\nconst INACTIVE_CLASS = \"bg-muted border-border/60 text-muted-foreground hover:text-foreground hover:border-border\";\nconst ACTIVE_CLASS = \"bg-primary border-primary text-primary-foreground font-medium\";\n\n/**\n * Horizontally-scrollable chip row — the portfolio section's sole\n * navigation mechanism (Instagram/YouTube-style chips), used both as an\n * in-page filter (chips with no `href`, toggled via `onChange`) and as\n * cross-page navigation (chips with `href`, highlighted active by matching\n * `value` against the current pathname).\n */\nexport function PortfolioChipFilter({\n  options,\n  value,\n  onChange,\n  showAll = true,\n  className,\n}: PortfolioChipFilterProps) {\n  const items = showAll ? [{ key: \"all\", label: \"All\" }, ...options] : options;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1.5 overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\",\n        className,\n      )}\n    >\n      {items.map((item) =>\n        item.href ? (\n          <Link\n            key={item.key}\n            href={item.href}\n            className={cn(CHIP_CLASS, item.href === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </Link>\n        ) : (\n          <button\n            key={item.key}\n            type=\"button\"\n            onClick={() => onChange(item.key)}\n            className={cn(CHIP_CLASS, item.key === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </button>\n        ),\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwDU;AAtDV,OAAO,UAAU;AACjB,SAAS,UAAU;AAuBnB,MAAM,aACJ;AACF,MAAM,iBAAiB;AACvB,MAAM,eAAe;AASd,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAA6B;AAC3B,QAAM,QAAQ,UAAU,CAAC,EAAE,KAAK,OAAO,OAAO,MAAM,GAAG,GAAG,OAAO,IAAI;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,gBAAM;AAAA,QAAI,CAAC,SACV,KAAK,OACH;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,KAAK;AAAA,YACX,WAAW,GAAG,YAAY,KAAK,SAAS,QAAQ,eAAe,cAAc;AAAA,YAE5E,eAAK;AAAA;AAAA,UAJD,KAAK;AAAA,QAKZ,IAEA;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,YAChC,WAAW,GAAG,YAAY,KAAK,QAAQ,QAAQ,eAAe,cAAc;AAAA,YAE3E,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-chip-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioChipFilterOption {\n  key: string;\n  label: string;\n  /**\n   * When set, this chip is a direct navigation link rather than an in-page\n   * filter. It's marked active when `href` equals the current `value`\n   * (pass the current pathname as `value` for a location-aware nav bar).\n   */\n  href?: string;\n}\n\nexport interface PortfolioChipFilterProps {\n  options: PortfolioChipFilterOption[];\n  /** Selected filter key, or the current pathname when used for navigation. */\n  value: string;\n  onChange: (key: string) => void;\n  /** Suppress the auto-injected \"All\" chip — for pure navigation bars where every option already has an href. Default true. */\n  showAll?: boolean;\n  className?: string;\n}\n\nconst CHIP_CLASS =\n  \"shrink-0 rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap transition-colors border\";\nconst INACTIVE_CLASS = \"bg-muted border-border/60 text-muted-foreground hover:text-foreground hover:border-border\";\nconst ACTIVE_CLASS = \"bg-primary border-primary text-primary-foreground font-medium\";\n\n/**\n * Horizontally-scrollable chip row — the portfolio section's sole\n * navigation mechanism (Instagram/YouTube-style chips), used both as an\n * in-page filter (chips with no `href`, toggled via `onChange`) and as\n * cross-page navigation (chips with `href`, highlighted active by matching\n * `value` against the current pathname).\n */\nexport function PortfolioChipFilter({\n  options,\n  value,\n  onChange,\n  showAll = true,\n  className,\n}: PortfolioChipFilterProps) {\n  const items = showAll ? [{ key: \"all\", label: \"All\" }, ...options] : options;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1.5 overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\",\n        className,\n      )}\n    >\n      {items.map((item) =>\n        item.href ? (\n          <Link\n            key={item.key}\n            href={item.href}\n            className={cn(CHIP_CLASS, item.href === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </Link>\n        ) : (\n          <button\n            key={item.key}\n            type=\"button\"\n            onClick={() => onChange(item.key)}\n            className={cn(CHIP_CLASS, item.key === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </button>\n        ),\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwDU;AAtDV,OAAO,UAAU;AACjB,SAAS,UAAU;AAuBnB,MAAM,aACJ;AACF,MAAM,iBAAiB;AACvB,MAAM,eAAe;AASd,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAA6B;AAC3B,QAAM,QAAQ,UAAU,CAAC,EAAE,KAAK,OAAO,OAAO,MAAM,GAAG,GAAG,OAAO,IAAI;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,gBAAM;AAAA,QAAI,CAAC,SACV,KAAK,OACH;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,KAAK;AAAA,YACX,WAAW,GAAG,YAAY,KAAK,SAAS,QAAQ,eAAe,cAAc;AAAA,YAE5E,eAAK;AAAA;AAAA,UAJD,KAAK;AAAA,QAKZ,IAEA;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,YAChC,WAAW,GAAG,YAAY,KAAK,QAAQ,QAAQ,eAAe,cAAc;AAAA,YAE3E,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/portfolio-nav.cjs

@@ -48,7 +48,7 @@ function CountBadge({
     "span",
     {
       className: (0, import_cn.cn)(
-        "h-4 min-w-4 rounded-full text-[10px] font-bold flex items-center justify-center px-1",
+        "h-4 min-w-4 rounded-full text-2xs font-bold flex items-center justify-center px-1",
         BADGE_VARIANT_CLASS[variant ?? "primary"]
       ),
       children: count
@@ -108,7 +108,7 @@ function PortfolioNav({
         {
           href: child.href,
           className: (0, import_cn.cn)(
-            "flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors shrink-0",
+            "flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap transition-colors shrink-0",
             active ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:text-foreground"
           ),
           children: [

package/dist/components/portfolio-nav.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport type PortfolioBadgeVariant = \"destructive\" | \"primary\" | \"warning\";\n\nexport interface PortfolioNavChild {\n  label: string;\n  href: string;\n  /** Optional count badge. `key` indexes `badgeCounts`; `variant` sets color. */\n  badge?: { key: string; variant?: PortfolioBadgeVariant };\n}\n\nexport interface PortfolioNavSection {\n  label: string;\n  /** Where the top-level tab links. For sections with children this is the first child. */\n  href: string;\n  /** Inner segments rendered as a pill row when the section is active. */\n  children?: PortfolioNavChild[];\n}\n\nexport interface PortfolioNavProps {\n  sections: PortfolioNavSection[];\n  /** Current pathname — caller passes `usePathname()`. */\n  pathname: string;\n  /** Badge counts keyed by `child.badge.key`. A badge renders only when > 0. */\n  badgeCounts?: Record<string, number>;\n  className?: string;\n}\n\nconst BADGE_VARIANT_CLASS: Record<PortfolioBadgeVariant, string> = {\n  destructive: \"bg-destructive text-destructive-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  warning: \"bg-amber-500 text-white\",\n};\n\nfunction CountBadge({\n  count,\n  variant,\n}: {\n  count: number;\n  variant?: PortfolioBadgeVariant;\n}) {\n  return (\n    <span\n      className={cn(\n        \"h-4 min-w-4 rounded-full text-[10px] font-bold flex items-center justify-center px-1\",\n        BADGE_VARIANT_CLASS[variant ?? \"primary\"],\n      )}\n    >\n      {count}\n    </span>\n  );\n}\n\nfunction matches(pathname: string, href: string): boolean {\n  return pathname === href || pathname.startsWith(href + \"/\");\n}\n\n/**\n * Two-level portfolio navigation: top-level underline tabs + a segmented pill\n * row when the active section has children. The active section is resolved by\n * the longest href match across section hrefs and child hrefs, so a root\n * \"Overview\" section (`/portfolio`) doesn't swallow every route.\n */\nexport function PortfolioNav({\n  sections,\n  pathname,\n  badgeCounts = {},\n  className,\n}: PortfolioNavProps) {\n  const count = (badge?: { key: string }) =>\n    badge ? (badgeCounts[badge.key] ?? 0) : 0;\n\n  // Longest-match resolution of the active section.\n  let activeSection: PortfolioNavSection | null = null;\n  let bestLen = -1;\n  for (const section of sections) {\n    const hrefs = [section.href, ...(section.children ?? []).map((c) => c.href)];\n    for (const href of hrefs) {\n      if (matches(pathname, href) && href.length > bestLen) {\n        bestLen = href.length;\n        activeSection = section;\n      }\n    }\n  }\n\n  const edgeBleed =\n    \"overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\";\n\n  return (\n    <div className={className}>\n      <nav className={cn(edgeBleed, \"border-b border-border/60\")}>\n        <div className=\"flex items-center min-w-max\">\n          {sections.map((section) => {\n            const active = section === activeSection;\n            // Rolled-up pending count across the section's children.\n            const rollup = (section.children ?? []).reduce(\n              (sum, child) => sum + count(child.badge),\n              0,\n            );\n            return (\n              <Link\n                key={section.href}\n                href={section.href}\n                className={cn(\n                  \"relative flex items-center gap-1.5 px-3 py-2.5 text-sm whitespace-nowrap transition-colors shrink-0 border-b-2 min-h-10\",\n                  active\n                    ? \"border-primary text-foreground font-medium\"\n                    : \"border-transparent text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {section.label}\n                {rollup > 0 && !active && (\n                  <CountBadge count={rollup} variant=\"destructive\" />\n                )}\n              </Link>\n            );\n          })}\n        </div>\n      </nav>\n      {activeSection?.children && activeSection.children.length > 0 && (\n        <nav className={cn(edgeBleed, \"pt-3\")}>\n          <div className=\"flex items-center min-w-max gap-1.5\">\n            {activeSection.children.map((child) => {\n              const active = matches(pathname, child.href);\n              const childCount = count(child.badge);\n              return (\n                <Link\n                  key={child.href}\n                  href={child.href}\n                  className={cn(\n                    \"flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors shrink-0\",\n                    active\n                      ? \"bg-primary text-primary-foreground font-medium\"\n                      : \"bg-muted text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  {child.label}\n                  {child.badge && childCount > 0 && (\n                    <CountBadge count={childCount} variant={child.badge.variant} />\n                  )}\n                </Link>\n              );\n            })}\n          </div>\n        </nav>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CI;AA3CJ,kBAAiB;AACjB,gBAAmB;AA4BnB,MAAM,sBAA6D;AAAA,EACjE,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,oBAAoB,WAAW,SAAS;AAAA,MAC1C;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ,UAAkB,MAAuB;AACxD,SAAO,aAAa,QAAQ,SAAS,WAAW,OAAO,GAAG;AAC5D;AAQO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AACF,GAAsB;AACpB,QAAM,QAAQ,CAAC,UACb,QAAS,YAAY,MAAM,GAAG,KAAK,IAAK;AAG1C,MAAI,gBAA4C;AAChD,MAAI,UAAU;AACd,aAAW,WAAW,UAAU;AAC9B,UAAM,QAAQ,CAAC,QAAQ,MAAM,IAAI,QAAQ,YAAY,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAC3E,eAAW,QAAQ,OAAO;AACxB,UAAI,QAAQ,UAAU,IAAI,KAAK,KAAK,SAAS,SAAS;AACpD,kBAAU,KAAK;AACf,wBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YACJ;AAEF,SACE,6CAAC,SAAI,WACH;AAAA,gDAAC,SAAI,eAAW,cAAG,WAAW,2BAA2B,GACvD,sDAAC,SAAI,WAAU,+BACZ,mBAAS,IAAI,CAAC,YAAY;AACzB,YAAM,SAAS,YAAY;AAE3B,YAAM,UAAU,QAAQ,YAAY,CAAC,GAAG;AAAA,QACtC,CAAC,KAAK,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA,QACvC;AAAA,MACF;AACA,aACE;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UAEC,MAAM,QAAQ;AAAA,UACd,eAAW;AAAA,YACT;AAAA,YACA,SACI,+CACA;AAAA,UACN;AAAA,UAEC;AAAA,oBAAQ;AAAA,YACR,SAAS,KAAK,CAAC,UACd,4CAAC,cAAW,OAAO,QAAQ,SAAQ,eAAc;AAAA;AAAA;AAAA,QAX9C,QAAQ;AAAA,MAaf;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,IACC,eAAe,YAAY,cAAc,SAAS,SAAS,KAC1D,4CAAC,SAAI,eAAW,cAAG,WAAW,MAAM,GAClC,sDAAC,SAAI,WAAU,uCACZ,wBAAc,SAAS,IAAI,CAAC,UAAU;AACrC,YAAM,SAAS,QAAQ,UAAU,MAAM,IAAI;AAC3C,YAAM,aAAa,MAAM,MAAM,KAAK;AACpC,aACE;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UAEC,MAAM,MAAM;AAAA,UACZ,eAAW;AAAA,YACT;AAAA,YACA,SACI,mDACA;AAAA,UACN;AAAA,UAEC;AAAA,kBAAM;AAAA,YACN,MAAM,SAAS,aAAa,KAC3B,4CAAC,cAAW,OAAO,YAAY,SAAS,MAAM,MAAM,SAAS;AAAA;AAAA;AAAA,QAX1D,MAAM;AAAA,MAab;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,KAEJ;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/portfolio-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport type PortfolioBadgeVariant = \"destructive\" | \"primary\" | \"warning\";\n\nexport interface PortfolioNavChild {\n  label: string;\n  href: string;\n  /** Optional count badge. `key` indexes `badgeCounts`; `variant` sets color. */\n  badge?: { key: string; variant?: PortfolioBadgeVariant };\n}\n\nexport interface PortfolioNavSection {\n  label: string;\n  /** Where the top-level tab links. For sections with children this is the first child. */\n  href: string;\n  /** Inner segments rendered as a pill row when the section is active. */\n  children?: PortfolioNavChild[];\n}\n\nexport interface PortfolioNavProps {\n  sections: PortfolioNavSection[];\n  /** Current pathname — caller passes `usePathname()`. */\n  pathname: string;\n  /** Badge counts keyed by `child.badge.key`. A badge renders only when > 0. */\n  badgeCounts?: Record<string, number>;\n  className?: string;\n}\n\nconst BADGE_VARIANT_CLASS: Record<PortfolioBadgeVariant, string> = {\n  destructive: \"bg-destructive text-destructive-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  warning: \"bg-amber-500 text-white\",\n};\n\nfunction CountBadge({\n  count,\n  variant,\n}: {\n  count: number;\n  variant?: PortfolioBadgeVariant;\n}) {\n  return (\n    <span\n      className={cn(\n        \"h-4 min-w-4 rounded-full text-2xs font-bold flex items-center justify-center px-1\",\n        BADGE_VARIANT_CLASS[variant ?? \"primary\"],\n      )}\n    >\n      {count}\n    </span>\n  );\n}\n\nfunction matches(pathname: string, href: string): boolean {\n  return pathname === href || pathname.startsWith(href + \"/\");\n}\n\n/**\n * Two-level portfolio navigation: top-level underline tabs + a segmented pill\n * row when the active section has children. The active section is resolved by\n * the longest href match across section hrefs and child hrefs, so a root\n * \"Overview\" section (`/portfolio`) doesn't swallow every route.\n */\nexport function PortfolioNav({\n  sections,\n  pathname,\n  badgeCounts = {},\n  className,\n}: PortfolioNavProps) {\n  const count = (badge?: { key: string }) =>\n    badge ? (badgeCounts[badge.key] ?? 0) : 0;\n\n  // Longest-match resolution of the active section.\n  let activeSection: PortfolioNavSection | null = null;\n  let bestLen = -1;\n  for (const section of sections) {\n    const hrefs = [section.href, ...(section.children ?? []).map((c) => c.href)];\n    for (const href of hrefs) {\n      if (matches(pathname, href) && href.length > bestLen) {\n        bestLen = href.length;\n        activeSection = section;\n      }\n    }\n  }\n\n  const edgeBleed =\n    \"overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\";\n\n  return (\n    <div className={className}>\n      <nav className={cn(edgeBleed, \"border-b border-border/60\")}>\n        <div className=\"flex items-center min-w-max\">\n          {sections.map((section) => {\n            const active = section === activeSection;\n            // Rolled-up pending count across the section's children.\n            const rollup = (section.children ?? []).reduce(\n              (sum, child) => sum + count(child.badge),\n              0,\n            );\n            return (\n              <Link\n                key={section.href}\n                href={section.href}\n                className={cn(\n                  \"relative flex items-center gap-1.5 px-3 py-2.5 text-sm whitespace-nowrap transition-colors shrink-0 border-b-2 min-h-10\",\n                  active\n                    ? \"border-primary text-foreground font-medium\"\n                    : \"border-transparent text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {section.label}\n                {rollup > 0 && !active && (\n                  <CountBadge count={rollup} variant=\"destructive\" />\n                )}\n              </Link>\n            );\n          })}\n        </div>\n      </nav>\n      {activeSection?.children && activeSection.children.length > 0 && (\n        <nav className={cn(edgeBleed, \"pt-3\")}>\n          <div className=\"flex items-center min-w-max gap-1.5\">\n            {activeSection.children.map((child) => {\n              const active = matches(pathname, child.href);\n              const childCount = count(child.badge);\n              return (\n                <Link\n                  key={child.href}\n                  href={child.href}\n                  className={cn(\n                    \"flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap transition-colors shrink-0\",\n                    active\n                      ? \"bg-primary text-primary-foreground font-medium\"\n                      : \"bg-muted text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  {child.label}\n                  {child.badge && childCount > 0 && (\n                    <CountBadge count={childCount} variant={child.badge.variant} />\n                  )}\n                </Link>\n              );\n            })}\n          </div>\n        </nav>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CI;AA3CJ,kBAAiB;AACjB,gBAAmB;AA4BnB,MAAM,sBAA6D;AAAA,EACjE,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,oBAAoB,WAAW,SAAS;AAAA,MAC1C;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ,UAAkB,MAAuB;AACxD,SAAO,aAAa,QAAQ,SAAS,WAAW,OAAO,GAAG;AAC5D;AAQO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AACF,GAAsB;AACpB,QAAM,QAAQ,CAAC,UACb,QAAS,YAAY,MAAM,GAAG,KAAK,IAAK;AAG1C,MAAI,gBAA4C;AAChD,MAAI,UAAU;AACd,aAAW,WAAW,UAAU;AAC9B,UAAM,QAAQ,CAAC,QAAQ,MAAM,IAAI,QAAQ,YAAY,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAC3E,eAAW,QAAQ,OAAO;AACxB,UAAI,QAAQ,UAAU,IAAI,KAAK,KAAK,SAAS,SAAS;AACpD,kBAAU,KAAK;AACf,wBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YACJ;AAEF,SACE,6CAAC,SAAI,WACH;AAAA,gDAAC,SAAI,eAAW,cAAG,WAAW,2BAA2B,GACvD,sDAAC,SAAI,WAAU,+BACZ,mBAAS,IAAI,CAAC,YAAY;AACzB,YAAM,SAAS,YAAY;AAE3B,YAAM,UAAU,QAAQ,YAAY,CAAC,GAAG;AAAA,QACtC,CAAC,KAAK,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA,QACvC;AAAA,MACF;AACA,aACE;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UAEC,MAAM,QAAQ;AAAA,UACd,eAAW;AAAA,YACT;AAAA,YACA,SACI,+CACA;AAAA,UACN;AAAA,UAEC;AAAA,oBAAQ;AAAA,YACR,SAAS,KAAK,CAAC,UACd,4CAAC,cAAW,OAAO,QAAQ,SAAQ,eAAc;AAAA;AAAA;AAAA,QAX9C,QAAQ;AAAA,MAaf;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,IACC,eAAe,YAAY,cAAc,SAAS,SAAS,KAC1D,4CAAC,SAAI,eAAW,cAAG,WAAW,MAAM,GAClC,sDAAC,SAAI,WAAU,uCACZ,wBAAc,SAAS,IAAI,CAAC,UAAU;AACrC,YAAM,SAAS,QAAQ,UAAU,MAAM,IAAI;AAC3C,YAAM,aAAa,MAAM,MAAM,KAAK;AACpC,aACE;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UAEC,MAAM,MAAM;AAAA,UACZ,eAAW;AAAA,YACT;AAAA,YACA,SACI,mDACA;AAAA,UACN;AAAA,UAEC;AAAA,kBAAM;AAAA,YACN,MAAM,SAAS,aAAa,KAC3B,4CAAC,cAAW,OAAO,YAAY,SAAS,MAAM,MAAM,SAAS;AAAA;AAAA;AAAA,QAX1D,MAAM;AAAA,MAab;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,KAEJ;AAEJ;","names":["Link"]}

package/dist/components/portfolio-nav.js

@@ -15,7 +15,7 @@ function CountBadge({
     "span",
     {
       className: cn(
-        "h-4 min-w-4 rounded-full text-[10px] font-bold flex items-center justify-center px-1",
+        "h-4 min-w-4 rounded-full text-2xs font-bold flex items-center justify-center px-1",
         BADGE_VARIANT_CLASS[variant ?? "primary"]
       ),
       children: count
@@ -75,7 +75,7 @@ function PortfolioNav({
         {
           href: child.href,
           className: cn(
-            "flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors shrink-0",
+            "flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap transition-colors shrink-0",
             active ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:text-foreground"
           ),
           children: [

package/dist/components/portfolio-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport type PortfolioBadgeVariant = \"destructive\" | \"primary\" | \"warning\";\n\nexport interface PortfolioNavChild {\n  label: string;\n  href: string;\n  /** Optional count badge. `key` indexes `badgeCounts`; `variant` sets color. */\n  badge?: { key: string; variant?: PortfolioBadgeVariant };\n}\n\nexport interface PortfolioNavSection {\n  label: string;\n  /** Where the top-level tab links. For sections with children this is the first child. */\n  href: string;\n  /** Inner segments rendered as a pill row when the section is active. */\n  children?: PortfolioNavChild[];\n}\n\nexport interface PortfolioNavProps {\n  sections: PortfolioNavSection[];\n  /** Current pathname — caller passes `usePathname()`. */\n  pathname: string;\n  /** Badge counts keyed by `child.badge.key`. A badge renders only when > 0. */\n  badgeCounts?: Record<string, number>;\n  className?: string;\n}\n\nconst BADGE_VARIANT_CLASS: Record<PortfolioBadgeVariant, string> = {\n  destructive: \"bg-destructive text-destructive-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  warning: \"bg-amber-500 text-white\",\n};\n\nfunction CountBadge({\n  count,\n  variant,\n}: {\n  count: number;\n  variant?: PortfolioBadgeVariant;\n}) {\n  return (\n    <span\n      className={cn(\n        \"h-4 min-w-4 rounded-full text-[10px] font-bold flex items-center justify-center px-1\",\n        BADGE_VARIANT_CLASS[variant ?? \"primary\"],\n      )}\n    >\n      {count}\n    </span>\n  );\n}\n\nfunction matches(pathname: string, href: string): boolean {\n  return pathname === href || pathname.startsWith(href + \"/\");\n}\n\n/**\n * Two-level portfolio navigation: top-level underline tabs + a segmented pill\n * row when the active section has children. The active section is resolved by\n * the longest href match across section hrefs and child hrefs, so a root\n * \"Overview\" section (`/portfolio`) doesn't swallow every route.\n */\nexport function PortfolioNav({\n  sections,\n  pathname,\n  badgeCounts = {},\n  className,\n}: PortfolioNavProps) {\n  const count = (badge?: { key: string }) =>\n    badge ? (badgeCounts[badge.key] ?? 0) : 0;\n\n  // Longest-match resolution of the active section.\n  let activeSection: PortfolioNavSection | null = null;\n  let bestLen = -1;\n  for (const section of sections) {\n    const hrefs = [section.href, ...(section.children ?? []).map((c) => c.href)];\n    for (const href of hrefs) {\n      if (matches(pathname, href) && href.length > bestLen) {\n        bestLen = href.length;\n        activeSection = section;\n      }\n    }\n  }\n\n  const edgeBleed =\n    \"overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\";\n\n  return (\n    <div className={className}>\n      <nav className={cn(edgeBleed, \"border-b border-border/60\")}>\n        <div className=\"flex items-center min-w-max\">\n          {sections.map((section) => {\n            const active = section === activeSection;\n            // Rolled-up pending count across the section's children.\n            const rollup = (section.children ?? []).reduce(\n              (sum, child) => sum + count(child.badge),\n              0,\n            );\n            return (\n              <Link\n                key={section.href}\n                href={section.href}\n                className={cn(\n                  \"relative flex items-center gap-1.5 px-3 py-2.5 text-sm whitespace-nowrap transition-colors shrink-0 border-b-2 min-h-10\",\n                  active\n                    ? \"border-primary text-foreground font-medium\"\n                    : \"border-transparent text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {section.label}\n                {rollup > 0 && !active && (\n                  <CountBadge count={rollup} variant=\"destructive\" />\n                )}\n              </Link>\n            );\n          })}\n        </div>\n      </nav>\n      {activeSection?.children && activeSection.children.length > 0 && (\n        <nav className={cn(edgeBleed, \"pt-3\")}>\n          <div className=\"flex items-center min-w-max gap-1.5\">\n            {activeSection.children.map((child) => {\n              const active = matches(pathname, child.href);\n              const childCount = count(child.badge);\n              return (\n                <Link\n                  key={child.href}\n                  href={child.href}\n                  className={cn(\n                    \"flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors shrink-0\",\n                    active\n                      ? \"bg-primary text-primary-foreground font-medium\"\n                      : \"bg-muted text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  {child.label}\n                  {child.badge && childCount > 0 && (\n                    <CountBadge count={childCount} variant={child.badge.variant} />\n                  )}\n                </Link>\n              );\n            })}\n          </div>\n        </nav>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA6CI,cA0DU,YA1DV;AA3CJ,OAAO,UAAU;AACjB,SAAS,UAAU;AA4BnB,MAAM,sBAA6D;AAAA,EACjE,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,oBAAoB,WAAW,SAAS;AAAA,MAC1C;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ,UAAkB,MAAuB;AACxD,SAAO,aAAa,QAAQ,SAAS,WAAW,OAAO,GAAG;AAC5D;AAQO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AACF,GAAsB;AACpB,QAAM,QAAQ,CAAC,UACb,QAAS,YAAY,MAAM,GAAG,KAAK,IAAK;AAG1C,MAAI,gBAA4C;AAChD,MAAI,UAAU;AACd,aAAW,WAAW,UAAU;AAC9B,UAAM,QAAQ,CAAC,QAAQ,MAAM,IAAI,QAAQ,YAAY,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAC3E,eAAW,QAAQ,OAAO;AACxB,UAAI,QAAQ,UAAU,IAAI,KAAK,KAAK,SAAS,SAAS;AACpD,kBAAU,KAAK;AACf,wBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YACJ;AAEF,SACE,qBAAC,SAAI,WACH;AAAA,wBAAC,SAAI,WAAW,GAAG,WAAW,2BAA2B,GACvD,8BAAC,SAAI,WAAU,+BACZ,mBAAS,IAAI,CAAC,YAAY;AACzB,YAAM,SAAS,YAAY;AAE3B,YAAM,UAAU,QAAQ,YAAY,CAAC,GAAG;AAAA,QACtC,CAAC,KAAK,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA,QACvC;AAAA,MACF;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,QAAQ;AAAA,UACd,WAAW;AAAA,YACT;AAAA,YACA,SACI,+CACA;AAAA,UACN;AAAA,UAEC;AAAA,oBAAQ;AAAA,YACR,SAAS,KAAK,CAAC,UACd,oBAAC,cAAW,OAAO,QAAQ,SAAQ,eAAc;AAAA;AAAA;AAAA,QAX9C,QAAQ;AAAA,MAaf;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,IACC,eAAe,YAAY,cAAc,SAAS,SAAS,KAC1D,oBAAC,SAAI,WAAW,GAAG,WAAW,MAAM,GAClC,8BAAC,SAAI,WAAU,uCACZ,wBAAc,SAAS,IAAI,CAAC,UAAU;AACrC,YAAM,SAAS,QAAQ,UAAU,MAAM,IAAI;AAC3C,YAAM,aAAa,MAAM,MAAM,KAAK;AACpC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,MAAM;AAAA,UACZ,WAAW;AAAA,YACT;AAAA,YACA,SACI,mDACA;AAAA,UACN;AAAA,UAEC;AAAA,kBAAM;AAAA,YACN,MAAM,SAAS,aAAa,KAC3B,oBAAC,cAAW,OAAO,YAAY,SAAS,MAAM,MAAM,SAAS;AAAA;AAAA;AAAA,QAX1D,MAAM;AAAA,MAab;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport type PortfolioBadgeVariant = \"destructive\" | \"primary\" | \"warning\";\n\nexport interface PortfolioNavChild {\n  label: string;\n  href: string;\n  /** Optional count badge. `key` indexes `badgeCounts`; `variant` sets color. */\n  badge?: { key: string; variant?: PortfolioBadgeVariant };\n}\n\nexport interface PortfolioNavSection {\n  label: string;\n  /** Where the top-level tab links. For sections with children this is the first child. */\n  href: string;\n  /** Inner segments rendered as a pill row when the section is active. */\n  children?: PortfolioNavChild[];\n}\n\nexport interface PortfolioNavProps {\n  sections: PortfolioNavSection[];\n  /** Current pathname — caller passes `usePathname()`. */\n  pathname: string;\n  /** Badge counts keyed by `child.badge.key`. A badge renders only when > 0. */\n  badgeCounts?: Record<string, number>;\n  className?: string;\n}\n\nconst BADGE_VARIANT_CLASS: Record<PortfolioBadgeVariant, string> = {\n  destructive: \"bg-destructive text-destructive-foreground\",\n  primary: \"bg-primary text-primary-foreground\",\n  warning: \"bg-amber-500 text-white\",\n};\n\nfunction CountBadge({\n  count,\n  variant,\n}: {\n  count: number;\n  variant?: PortfolioBadgeVariant;\n}) {\n  return (\n    <span\n      className={cn(\n        \"h-4 min-w-4 rounded-full text-2xs font-bold flex items-center justify-center px-1\",\n        BADGE_VARIANT_CLASS[variant ?? \"primary\"],\n      )}\n    >\n      {count}\n    </span>\n  );\n}\n\nfunction matches(pathname: string, href: string): boolean {\n  return pathname === href || pathname.startsWith(href + \"/\");\n}\n\n/**\n * Two-level portfolio navigation: top-level underline tabs + a segmented pill\n * row when the active section has children. The active section is resolved by\n * the longest href match across section hrefs and child hrefs, so a root\n * \"Overview\" section (`/portfolio`) doesn't swallow every route.\n */\nexport function PortfolioNav({\n  sections,\n  pathname,\n  badgeCounts = {},\n  className,\n}: PortfolioNavProps) {\n  const count = (badge?: { key: string }) =>\n    badge ? (badgeCounts[badge.key] ?? 0) : 0;\n\n  // Longest-match resolution of the active section.\n  let activeSection: PortfolioNavSection | null = null;\n  let bestLen = -1;\n  for (const section of sections) {\n    const hrefs = [section.href, ...(section.children ?? []).map((c) => c.href)];\n    for (const href of hrefs) {\n      if (matches(pathname, href) && href.length > bestLen) {\n        bestLen = href.length;\n        activeSection = section;\n      }\n    }\n  }\n\n  const edgeBleed =\n    \"overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\";\n\n  return (\n    <div className={className}>\n      <nav className={cn(edgeBleed, \"border-b border-border/60\")}>\n        <div className=\"flex items-center min-w-max\">\n          {sections.map((section) => {\n            const active = section === activeSection;\n            // Rolled-up pending count across the section's children.\n            const rollup = (section.children ?? []).reduce(\n              (sum, child) => sum + count(child.badge),\n              0,\n            );\n            return (\n              <Link\n                key={section.href}\n                href={section.href}\n                className={cn(\n                  \"relative flex items-center gap-1.5 px-3 py-2.5 text-sm whitespace-nowrap transition-colors shrink-0 border-b-2 min-h-10\",\n                  active\n                    ? \"border-primary text-foreground font-medium\"\n                    : \"border-transparent text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {section.label}\n                {rollup > 0 && !active && (\n                  <CountBadge count={rollup} variant=\"destructive\" />\n                )}\n              </Link>\n            );\n          })}\n        </div>\n      </nav>\n      {activeSection?.children && activeSection.children.length > 0 && (\n        <nav className={cn(edgeBleed, \"pt-3\")}>\n          <div className=\"flex items-center min-w-max gap-1.5\">\n            {activeSection.children.map((child) => {\n              const active = matches(pathname, child.href);\n              const childCount = count(child.badge);\n              return (\n                <Link\n                  key={child.href}\n                  href={child.href}\n                  className={cn(\n                    \"flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap transition-colors shrink-0\",\n                    active\n                      ? \"bg-primary text-primary-foreground font-medium\"\n                      : \"bg-muted text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  {child.label}\n                  {child.badge && childCount > 0 && (\n                    <CountBadge count={childCount} variant={child.badge.variant} />\n                  )}\n                </Link>\n              );\n            })}\n          </div>\n        </nav>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA6CI,cA0DU,YA1DV;AA3CJ,OAAO,UAAU;AACjB,SAAS,UAAU;AA4BnB,MAAM,sBAA6D;AAAA,EACjE,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,oBAAoB,WAAW,SAAS;AAAA,MAC1C;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ,UAAkB,MAAuB;AACxD,SAAO,aAAa,QAAQ,SAAS,WAAW,OAAO,GAAG;AAC5D;AAQO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AACF,GAAsB;AACpB,QAAM,QAAQ,CAAC,UACb,QAAS,YAAY,MAAM,GAAG,KAAK,IAAK;AAG1C,MAAI,gBAA4C;AAChD,MAAI,UAAU;AACd,aAAW,WAAW,UAAU;AAC9B,UAAM,QAAQ,CAAC,QAAQ,MAAM,IAAI,QAAQ,YAAY,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAC3E,eAAW,QAAQ,OAAO;AACxB,UAAI,QAAQ,UAAU,IAAI,KAAK,KAAK,SAAS,SAAS;AACpD,kBAAU,KAAK;AACf,wBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YACJ;AAEF,SACE,qBAAC,SAAI,WACH;AAAA,wBAAC,SAAI,WAAW,GAAG,WAAW,2BAA2B,GACvD,8BAAC,SAAI,WAAU,+BACZ,mBAAS,IAAI,CAAC,YAAY;AACzB,YAAM,SAAS,YAAY;AAE3B,YAAM,UAAU,QAAQ,YAAY,CAAC,GAAG;AAAA,QACtC,CAAC,KAAK,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA,QACvC;AAAA,MACF;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,QAAQ;AAAA,UACd,WAAW;AAAA,YACT;AAAA,YACA,SACI,+CACA;AAAA,UACN;AAAA,UAEC;AAAA,oBAAQ;AAAA,YACR,SAAS,KAAK,CAAC,UACd,oBAAC,cAAW,OAAO,QAAQ,SAAQ,eAAc;AAAA;AAAA;AAAA,QAX9C,QAAQ;AAAA,MAaf;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,IACC,eAAe,YAAY,cAAc,SAAS,SAAS,KAC1D,oBAAC,SAAI,WAAW,GAAG,WAAW,MAAM,GAClC,8BAAC,SAAI,WAAU,uCACZ,wBAAc,SAAS,IAAI,CAAC,UAAU;AACrC,YAAM,SAAS,QAAQ,UAAU,MAAM,IAAI;AAC3C,YAAM,aAAa,MAAM,MAAM,KAAK;AACpC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,MAAM;AAAA,UACZ,WAAW;AAAA,YACT;AAAA,YACA,SACI,mDACA;AAAA,UACN;AAAA,UAEC;AAAA,kBAAM;AAAA,YACN,MAAM,SAAS,aAAa,KAC3B,oBAAC,cAAW,OAAO,YAAY,SAAS,MAAM,MAAM,SAAS;AAAA;AAAA;AAAA,QAX1D,MAAM;AAAA,MAab;AAAA,IAEJ,CAAC,GACH,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/rewards/journey-path.cjs

@@ -38,7 +38,7 @@ function JourneyPath({ steps, breakdown = {}, className }) {
         {
           "aria-hidden": true,
           className: (0, import_cn.cn)(
-            "absolute left-[15px] top-8 h-[calc(100%-8px)] w-px",
+            "absolute left-[21px] top-11 h-[calc(100%-8px)] w-px",
             state === "done" ? "bg-brand-rose/50" : "bg-border"
           )
         }
@@ -48,7 +48,7 @@ function JourneyPath({ steps, breakdown = {}, className }) {
         {
           href: step.href,
           className: (0, import_cn.cn)(
-            "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border transition-colors",
+            "flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-full border transition-colors",
             state === "done" && "border-brand-rose/40 bg-brand-rose/15 text-brand-rose",
             state === "current" && "border-brand-orange/60 bg-brand-orange/10 text-brand-orange",
             state === "upcoming" && "border-border text-muted-foreground/50"

package/dist/components/rewards/journey-path.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/journey-path.tsx"],"sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface JourneyStep {\n  /** Matches a key in the rewards breakdown (e.g. \"mint_asset\"). */\n  actionType: string;\n  label: string;\n  href: string;\n  icon: ElementType;\n}\n\nexport interface JourneyPathProps {\n  steps: JourneyStep[];\n  /** The signed-in user's `rewards.breakdown` — a step is done when its\n   *  actionType key is present with a positive value. Pass `{}` (or omit)\n   *  for a signed-out visitor — every step renders upcoming. */\n  breakdown?: Record<string, number>;\n  className?: string;\n}\n\ntype StepState = \"done\" | \"current\" | \"upcoming\";\n\nfunction stateFor(step: JourneyStep, index: number, steps: JourneyStep[], breakdown: Record<string, number>): StepState {\n  if ((breakdown[step.actionType] ?? 0) > 0) return \"done\";\n  const firstNotDone = steps.findIndex((s) => (breakdown[s.actionType] ?? 0) <= 0);\n  return index === firstNotDone ? \"current\" : \"upcoming\";\n}\n\n/** A permanent, ordered milestone path — no time window, no reset, no\n *  comparison to other users. A step lights up the moment its action has\n *  ever been done and stays lit forever; the first not-yet-done step is\n *  highlighted as \"current\". Safe to render for a signed-out visitor\n *  (`breakdown` omitted) — every step just renders upcoming, still linkable. */\nexport function JourneyPath({ steps, breakdown = {}, className }: JourneyPathProps) {\n  return (\n    <ol className={cn(\"flex flex-col gap-1\", className)}>\n      {steps.map((step, i) => {\n        const state = stateFor(step, i, steps, breakdown);\n        const Icon = step.icon;\n        return (\n          <li key={step.actionType} className=\"relative flex items-center gap-3\">\n            {i < steps.length - 1 && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"absolute left-[15px] top-8 h-[calc(100%-8px)] w-px\",\n                  state === \"done\" ? \"bg-brand-rose/50\" : \"bg-border\"\n                )}\n              />\n            )}\n            <a\n              href={step.href}\n              className={cn(\n                \"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border transition-colors\",\n                state === \"done\" && \"border-brand-rose/40 bg-brand-rose/15 text-brand-rose\",\n                state === \"current\" && \"border-brand-orange/60 bg-brand-orange/10 text-brand-orange\",\n                state === \"upcoming\" && \"border-border text-muted-foreground/50\"\n              )}\n            >\n              <Icon className=\"h-3.5 w-3.5\" />\n            </a>\n            <a\n              href={step.href}\n              className={cn(\n                \"flex-1 rounded-lg py-1.5 text-sm font-semibold transition-colors hover:text-foreground\",\n                state === \"upcoming\" ? \"text-muted-foreground/60\" : \"text-foreground\"\n              )}\n            >\n              {step.label}\n            </a>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCU;AAvCV,gBAAmB;AAqBnB,SAAS,SAAS,MAAmB,OAAe,OAAsB,WAA8C;AACtH,OAAK,UAAU,KAAK,UAAU,KAAK,KAAK,EAAG,QAAO;AAClD,QAAM,eAAe,MAAM,UAAU,CAAC,OAAO,UAAU,EAAE,UAAU,KAAK,MAAM,CAAC;AAC/E,SAAO,UAAU,eAAe,YAAY;AAC9C;AAOO,SAAS,YAAY,EAAE,OAAO,YAAY,CAAC,GAAG,UAAU,GAAqB;AAClF,SACE,4CAAC,QAAG,eAAW,cAAG,uBAAuB,SAAS,GAC/C,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,QAAQ,SAAS,MAAM,GAAG,OAAO,SAAS;AAChD,UAAM,OAAO,KAAK;AAClB,WACE,6CAAC,QAAyB,WAAU,oCACjC;AAAA,UAAI,MAAM,SAAS,KAClB;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,eAAW;AAAA,YACT;AAAA,YACA,UAAU,SAAS,qBAAqB;AAAA,UAC1C;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,eAAW;AAAA,YACT;AAAA,YACA,UAAU,UAAU;AAAA,YACpB,UAAU,aAAa;AAAA,YACvB,UAAU,cAAc;AAAA,UAC1B;AAAA,UAEA,sDAAC,QAAK,WAAU,eAAc;AAAA;AAAA,MAChC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,eAAW;AAAA,YACT;AAAA,YACA,UAAU,aAAa,6BAA6B;AAAA,UACtD;AAAA,UAEC,eAAK;AAAA;AAAA,MACR;AAAA,SA7BO,KAAK,UA8Bd;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/journey-path.tsx"],"sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface JourneyStep {\n  /** Matches a key in the rewards breakdown (e.g. \"mint_asset\"). */\n  actionType: string;\n  label: string;\n  href: string;\n  icon: ElementType;\n}\n\nexport interface JourneyPathProps {\n  steps: JourneyStep[];\n  /** The signed-in user's `rewards.breakdown` — a step is done when its\n   *  actionType key is present with a positive value. Pass `{}` (or omit)\n   *  for a signed-out visitor — every step renders upcoming. */\n  breakdown?: Record<string, number>;\n  className?: string;\n}\n\ntype StepState = \"done\" | \"current\" | \"upcoming\";\n\nfunction stateFor(step: JourneyStep, index: number, steps: JourneyStep[], breakdown: Record<string, number>): StepState {\n  if ((breakdown[step.actionType] ?? 0) > 0) return \"done\";\n  const firstNotDone = steps.findIndex((s) => (breakdown[s.actionType] ?? 0) <= 0);\n  return index === firstNotDone ? \"current\" : \"upcoming\";\n}\n\n/** A permanent, ordered milestone path — no time window, no reset, no\n *  comparison to other users. A step lights up the moment its action has\n *  ever been done and stays lit forever; the first not-yet-done step is\n *  highlighted as \"current\". Safe to render for a signed-out visitor\n *  (`breakdown` omitted) — every step just renders upcoming, still linkable. */\nexport function JourneyPath({ steps, breakdown = {}, className }: JourneyPathProps) {\n  return (\n    <ol className={cn(\"flex flex-col gap-1\", className)}>\n      {steps.map((step, i) => {\n        const state = stateFor(step, i, steps, breakdown);\n        const Icon = step.icon;\n        return (\n          <li key={step.actionType} className=\"relative flex items-center gap-3\">\n            {i < steps.length - 1 && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"absolute left-[21px] top-11 h-[calc(100%-8px)] w-px\",\n                  state === \"done\" ? \"bg-brand-rose/50\" : \"bg-border\"\n                )}\n              />\n            )}\n            <a\n              href={step.href}\n              className={cn(\n                \"flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-full border transition-colors\",\n                state === \"done\" && \"border-brand-rose/40 bg-brand-rose/15 text-brand-rose\",\n                state === \"current\" && \"border-brand-orange/60 bg-brand-orange/10 text-brand-orange\",\n                state === \"upcoming\" && \"border-border text-muted-foreground/50\"\n              )}\n            >\n              <Icon className=\"h-3.5 w-3.5\" />\n            </a>\n            <a\n              href={step.href}\n              className={cn(\n                \"flex-1 rounded-lg py-1.5 text-sm font-semibold transition-colors hover:text-foreground\",\n                state === \"upcoming\" ? \"text-muted-foreground/60\" : \"text-foreground\"\n              )}\n            >\n              {step.label}\n            </a>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCU;AAvCV,gBAAmB;AAqBnB,SAAS,SAAS,MAAmB,OAAe,OAAsB,WAA8C;AACtH,OAAK,UAAU,KAAK,UAAU,KAAK,KAAK,EAAG,QAAO;AAClD,QAAM,eAAe,MAAM,UAAU,CAAC,OAAO,UAAU,EAAE,UAAU,KAAK,MAAM,CAAC;AAC/E,SAAO,UAAU,eAAe,YAAY;AAC9C;AAOO,SAAS,YAAY,EAAE,OAAO,YAAY,CAAC,GAAG,UAAU,GAAqB;AAClF,SACE,4CAAC,QAAG,eAAW,cAAG,uBAAuB,SAAS,GAC/C,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,QAAQ,SAAS,MAAM,GAAG,OAAO,SAAS;AAChD,UAAM,OAAO,KAAK;AAClB,WACE,6CAAC,QAAyB,WAAU,oCACjC;AAAA,UAAI,MAAM,SAAS,KAClB;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,eAAW;AAAA,YACT;AAAA,YACA,UAAU,SAAS,qBAAqB;AAAA,UAC1C;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,eAAW;AAAA,YACT;AAAA,YACA,UAAU,UAAU;AAAA,YACpB,UAAU,aAAa;AAAA,YACvB,UAAU,cAAc;AAAA,UAC1B;AAAA,UAEA,sDAAC,QAAK,WAAU,eAAc;AAAA;AAAA,MAChC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,eAAW;AAAA,YACT;AAAA,YACA,UAAU,aAAa,6BAA6B;AAAA,UACtD;AAAA,UAEC,eAAK;AAAA;AAAA,MACR;AAAA,SA7BO,KAAK,UA8Bd;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/components/rewards/journey-path.js

@@ -15,7 +15,7 @@ function JourneyPath({ steps, breakdown = {}, className }) {
         {
           "aria-hidden": true,
           className: cn(
-            "absolute left-[15px] top-8 h-[calc(100%-8px)] w-px",
+            "absolute left-[21px] top-11 h-[calc(100%-8px)] w-px",
             state === "done" ? "bg-brand-rose/50" : "bg-border"
           )
         }
@@ -25,7 +25,7 @@ function JourneyPath({ steps, breakdown = {}, className }) {
         {
           href: step.href,
           className: cn(
-            "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border transition-colors",
+            "flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-full border transition-colors",
             state === "done" && "border-brand-rose/40 bg-brand-rose/15 text-brand-rose",
             state === "current" && "border-brand-orange/60 bg-brand-orange/10 text-brand-orange",
             state === "upcoming" && "border-border text-muted-foreground/50"

package/dist/components/rewards/journey-path.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/journey-path.tsx"],"sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface JourneyStep {\n  /** Matches a key in the rewards breakdown (e.g. \"mint_asset\"). */\n  actionType: string;\n  label: string;\n  href: string;\n  icon: ElementType;\n}\n\nexport interface JourneyPathProps {\n  steps: JourneyStep[];\n  /** The signed-in user's `rewards.breakdown` — a step is done when its\n   *  actionType key is present with a positive value. Pass `{}` (or omit)\n   *  for a signed-out visitor — every step renders upcoming. */\n  breakdown?: Record<string, number>;\n  className?: string;\n}\n\ntype StepState = \"done\" | \"current\" | \"upcoming\";\n\nfunction stateFor(step: JourneyStep, index: number, steps: JourneyStep[], breakdown: Record<string, number>): StepState {\n  if ((breakdown[step.actionType] ?? 0) > 0) return \"done\";\n  const firstNotDone = steps.findIndex((s) => (breakdown[s.actionType] ?? 0) <= 0);\n  return index === firstNotDone ? \"current\" : \"upcoming\";\n}\n\n/** A permanent, ordered milestone path — no time window, no reset, no\n *  comparison to other users. A step lights up the moment its action has\n *  ever been done and stays lit forever; the first not-yet-done step is\n *  highlighted as \"current\". Safe to render for a signed-out visitor\n *  (`breakdown` omitted) — every step just renders upcoming, still linkable. */\nexport function JourneyPath({ steps, breakdown = {}, className }: JourneyPathProps) {\n  return (\n    <ol className={cn(\"flex flex-col gap-1\", className)}>\n      {steps.map((step, i) => {\n        const state = stateFor(step, i, steps, breakdown);\n        const Icon = step.icon;\n        return (\n          <li key={step.actionType} className=\"relative flex items-center gap-3\">\n            {i < steps.length - 1 && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"absolute left-[15px] top-8 h-[calc(100%-8px)] w-px\",\n                  state === \"done\" ? \"bg-brand-rose/50\" : \"bg-border\"\n                )}\n              />\n            )}\n            <a\n              href={step.href}\n              className={cn(\n                \"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border transition-colors\",\n                state === \"done\" && \"border-brand-rose/40 bg-brand-rose/15 text-brand-rose\",\n                state === \"current\" && \"border-brand-orange/60 bg-brand-orange/10 text-brand-orange\",\n                state === \"upcoming\" && \"border-border text-muted-foreground/50\"\n              )}\n            >\n              <Icon className=\"h-3.5 w-3.5\" />\n            </a>\n            <a\n              href={step.href}\n              className={cn(\n                \"flex-1 rounded-lg py-1.5 text-sm font-semibold transition-colors hover:text-foreground\",\n                state === \"upcoming\" ? \"text-muted-foreground/60\" : \"text-foreground\"\n              )}\n            >\n              {step.label}\n            </a>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":"AAwCU,SAEI,KAFJ;AAvCV,SAAS,UAAU;AAqBnB,SAAS,SAAS,MAAmB,OAAe,OAAsB,WAA8C;AACtH,OAAK,UAAU,KAAK,UAAU,KAAK,KAAK,EAAG,QAAO;AAClD,QAAM,eAAe,MAAM,UAAU,CAAC,OAAO,UAAU,EAAE,UAAU,KAAK,MAAM,CAAC;AAC/E,SAAO,UAAU,eAAe,YAAY;AAC9C;AAOO,SAAS,YAAY,EAAE,OAAO,YAAY,CAAC,GAAG,UAAU,GAAqB;AAClF,SACE,oBAAC,QAAG,WAAW,GAAG,uBAAuB,SAAS,GAC/C,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,QAAQ,SAAS,MAAM,GAAG,OAAO,SAAS;AAChD,UAAM,OAAO,KAAK;AAClB,WACE,qBAAC,QAAyB,WAAU,oCACjC;AAAA,UAAI,MAAM,SAAS,KAClB;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,UAAU,SAAS,qBAAqB;AAAA,UAC1C;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,UAAU,UAAU;AAAA,YACpB,UAAU,aAAa;AAAA,YACvB,UAAU,cAAc;AAAA,UAC1B;AAAA,UAEA,8BAAC,QAAK,WAAU,eAAc;AAAA;AAAA,MAChC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,UAAU,aAAa,6BAA6B;AAAA,UACtD;AAAA,UAEC,eAAK;AAAA;AAAA,MACR;AAAA,SA7BO,KAAK,UA8Bd;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/journey-path.tsx"],"sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface JourneyStep {\n  /** Matches a key in the rewards breakdown (e.g. \"mint_asset\"). */\n  actionType: string;\n  label: string;\n  href: string;\n  icon: ElementType;\n}\n\nexport interface JourneyPathProps {\n  steps: JourneyStep[];\n  /** The signed-in user's `rewards.breakdown` — a step is done when its\n   *  actionType key is present with a positive value. Pass `{}` (or omit)\n   *  for a signed-out visitor — every step renders upcoming. */\n  breakdown?: Record<string, number>;\n  className?: string;\n}\n\ntype StepState = \"done\" | \"current\" | \"upcoming\";\n\nfunction stateFor(step: JourneyStep, index: number, steps: JourneyStep[], breakdown: Record<string, number>): StepState {\n  if ((breakdown[step.actionType] ?? 0) > 0) return \"done\";\n  const firstNotDone = steps.findIndex((s) => (breakdown[s.actionType] ?? 0) <= 0);\n  return index === firstNotDone ? \"current\" : \"upcoming\";\n}\n\n/** A permanent, ordered milestone path — no time window, no reset, no\n *  comparison to other users. A step lights up the moment its action has\n *  ever been done and stays lit forever; the first not-yet-done step is\n *  highlighted as \"current\". Safe to render for a signed-out visitor\n *  (`breakdown` omitted) — every step just renders upcoming, still linkable. */\nexport function JourneyPath({ steps, breakdown = {}, className }: JourneyPathProps) {\n  return (\n    <ol className={cn(\"flex flex-col gap-1\", className)}>\n      {steps.map((step, i) => {\n        const state = stateFor(step, i, steps, breakdown);\n        const Icon = step.icon;\n        return (\n          <li key={step.actionType} className=\"relative flex items-center gap-3\">\n            {i < steps.length - 1 && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"absolute left-[21px] top-11 h-[calc(100%-8px)] w-px\",\n                  state === \"done\" ? \"bg-brand-rose/50\" : \"bg-border\"\n                )}\n              />\n            )}\n            <a\n              href={step.href}\n              className={cn(\n                \"flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded-full border transition-colors\",\n                state === \"done\" && \"border-brand-rose/40 bg-brand-rose/15 text-brand-rose\",\n                state === \"current\" && \"border-brand-orange/60 bg-brand-orange/10 text-brand-orange\",\n                state === \"upcoming\" && \"border-border text-muted-foreground/50\"\n              )}\n            >\n              <Icon className=\"h-3.5 w-3.5\" />\n            </a>\n            <a\n              href={step.href}\n              className={cn(\n                \"flex-1 rounded-lg py-1.5 text-sm font-semibold transition-colors hover:text-foreground\",\n                state === \"upcoming\" ? \"text-muted-foreground/60\" : \"text-foreground\"\n              )}\n            >\n              {step.label}\n            </a>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":"AAwCU,SAEI,KAFJ;AAvCV,SAAS,UAAU;AAqBnB,SAAS,SAAS,MAAmB,OAAe,OAAsB,WAA8C;AACtH,OAAK,UAAU,KAAK,UAAU,KAAK,KAAK,EAAG,QAAO;AAClD,QAAM,eAAe,MAAM,UAAU,CAAC,OAAO,UAAU,EAAE,UAAU,KAAK,MAAM,CAAC;AAC/E,SAAO,UAAU,eAAe,YAAY;AAC9C;AAOO,SAAS,YAAY,EAAE,OAAO,YAAY,CAAC,GAAG,UAAU,GAAqB;AAClF,SACE,oBAAC,QAAG,WAAW,GAAG,uBAAuB,SAAS,GAC/C,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,QAAQ,SAAS,MAAM,GAAG,OAAO,SAAS;AAChD,UAAM,OAAO,KAAK;AAClB,WACE,qBAAC,QAAyB,WAAU,oCACjC;AAAA,UAAI,MAAM,SAAS,KAClB;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,UAAU,SAAS,qBAAqB;AAAA,UAC1C;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,UAAU,UAAU;AAAA,YACpB,UAAU,aAAa;AAAA,YACvB,UAAU,cAAc;AAAA,UAC1B;AAAA,UAEA,8BAAC,QAAK,WAAU,eAAc;AAAA;AAAA,MAChC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,UAAU,aAAa,6BAA6B;AAAA,UACtD;AAAA,UAEC,eAAK;AAAA;AAAA,MACR;AAAA,SA7BO,KAAK,UA8Bd;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/components/rewards/leaderboard-table.cjs

@@ -44,7 +44,7 @@ function LeaderboardTable({ entries, highlightAddress, renderAddress, className
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_level_badge.LevelBadge, { level: e.currentLevel, name: e.currentLevelName, badgeColor: e.badgeColor, size: "sm", className: "hidden sm:inline-flex" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "shrink-0 text-sm font-semibold tabular-nums", children: [
             e.totalXp.toLocaleString(),
-            " pts"
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-1 text-xs font-normal text-muted-foreground", children: "XP" })
           ] })
         ]
       },