@medialane/ui 0.85.0 → 0.87.0

package/README.md

@@ -233,6 +233,49 @@ The package uses [tsup](https://tsup.egoist.dev/) and outputs ESM + CJS + type d
 
 | Version | Added |
 |---|---|
+| **v0.86.0** | `NavWalletTrigger`'s disconnected state shows a plain `Wallet` glyph inside the rotating ring instead of an empty center — the bare ring wasn't being noticed as a connect entry point. Connected state unchanged |
+| **v0.85.0** | `NavCommandMenu` gains two optional props: `showKeyboardHints` (default `true` — hide the "↑↓ Navigate / ↵ Open" footer hint) and `brandSlot` (replace the static "medialane ⌘K" footer brandmark entirely, e.g. with a "Connect" button). Both default to the prior behavior — non-breaking |
+| **v0.84.0** | gol_starknet living-render support: `useIntersectionActive` + `AnimatedTokenMedia` swap a token's static image for a sandboxed iframe of its on-chain `animation_url` once visible, wired into `TokenCard`/`AssetCard`; SDK peer floor `>=0.73.0`. **Also replaces `AssetMediaColumn`** with the borderless/real-aspect-ratio/click-to-zoom design both apps had already forked locally |
+| **v0.83.0** | `NavWalletTrigger` gains optional `iconSrc` — renders the connected wallet's own icon instead of a generic glyph; omitted = unchanged behavior |
+| **v0.82.x** | *Not individually documented — see `git log`* |
+| **v0.81.0** | `NavAccountSheet` redesigned to match `NavCommandMenu`'s glass-panel treatment. **Breaking:** dropped the `title` prop — content is 100% `children`-driven. `NavWalletTrigger` resized `h-11 w-11` → `h-8 w-8`; connected-state ring no longer dims |
+| **v0.80.1** | `NavWalletTrigger` is now `React.forwardRef` (needed for `SheetTrigger asChild`); no visual change |
+| **v0.80.0** | `NavWalletTrigger` added to `nav-shell.tsx` — spinning brand-gradient ring while disconnected, static low-opacity ring + `User` glyph once connected. No fabricated avatar |
+| **v0.79.2** | `AssetMarketplacePanel`: "List on Marketplace" hidden next to "Cancel Listing" for single-instance (ERC-721) assets; ERC-1155 owners still see both |
+| **v0.79.1** | Export-only fix — `toDurationDays`/`DURATION_UNITS`/`DurationUnit` (shipped in 0.79.0) re-exported from `src/index.ts` |
+| **v0.79.0** | `LicenseTermsBuilder`: licensing subpanel wrapper removed, fields flow in the main form. **Breaking:** `SponsorshipTerms.durationDays: string` → `durationValue` + `durationUnit` (new `DURATION_UNITS`); new `toDurationDays(terms)` export. Territory is free text, not a fixed continent list |
+| **v0.78.2** | `LicenseTermsBuilder`: removed "Resale royalty (%)" from the UI; licensing panel no longer collapsible; "License length (days)" has no default |
+| **v0.78.1** | `LicenseTermsBuilder` currency-picker layout fix (stacked rows instead of wrapping); collapsed trigger shows a live summary |
+| **v0.78.0** | `LicenseTermsBuilder` rebuilt: icon-enhanced currency picker, collapsible panel (License Type presets, Territory, AI Policy, Scope, Deliverables, Exclusivity, media multi-select); new `toLicenseMetadata` export. `SponsorshipTerms` gains matching fields |
+| **v0.77.0** | `AssetSearchPicker` (server-searched asset picker for the IP Sponsorship "propose to sponsor" flow). `AssetMarketplacePanel` gains `showSponsorOption`/`onOpenSponsorProposal` + `showSponsorSolicitOption`/`onOpenSponsorSolicit`. `derivePortfolioCounts` gains `sponsorshipPendingCount` → `PortfolioCounts.sponsorships` |
+| **v0.76.0** | `CollectionFilters` shared logic lifted from both apps' near-identical local copies: `useCollectionFilters`, `CollectionFiltersTrigger`, `CollectionFiltersBody`, `SORT_OPTIONS`/`TraitSection` |
+| **v0.75.0** | `TokenCard` replaced with the real implementation (dropdown menu, price chip, indexing badge) both apps had forked locally; hrefs computed via the SDK's `assetHref`/`collectionHref` using `token.chain`. New dep `@radix-ui/react-dropdown-menu`. SDK peer floor `>=0.72.0`. `RarityTier` and several unused props removed |
+| **v0.74.2** | SDK peer floor `>=0.6.0` → `>=0.71.0` (no component code changed) |
+| **v0.74.1** | Creator's Fund family: `CreatorAirdropBanner` lifted into the package; `CommunityRewardsSection` redesigned to brand tokens, borderless panels. (**v0.74.0 is deprecated on npm** — published from an incomplete checkout; v0.74.1 is the good release) |
+| **v0.73.6** | `AssetMarketplacePanel` cancel-listing button label: "Cancel" → "Cancel Listing" |
+| **v0.73.5** | `MedialaneCollectionCard` follows the app's light/dark theme instead of always-dark |
+| **v0.73.4** | `NavBrandButton` left padding 6px → 10px |
+| **v0.73.3** | Launchpad cards: resting hairline in each group's accent hue (was hover-only); gradient ring fades in on hover-capable devices |
+| **v0.73.2** | Launchpad copy: "Single Editions" → "Single Edition NFTs"; "NFTs" group pill → "Originals" |
+| **v0.73.1** | IP Club launchpad card copy rewritten to the membership-tiers model |
+| **v0.73.0** | `AssetPicker` + `LicenseTermsBuilder` (initial versions), for the IP Sponsorship v3 create/accept forms |
+| **v0.67.0–0.72.0** | *Not individually documented.* Only v0.72.0 is known: display face set to semibold, filter bar drops the services count |
+| **v0.66.0** | Launchpad redesign — one card per service, one dynamic grid (`mint-ip-asset`+`create-collection` → `nfts`, `ip-collection-1155`+`mint-editions` → `limited-editions`); `LaunchpadGroupedSections` renders a single grid keyed by `GROUP_ACCENTS`; all service copy rewritten to plain language |
+| **v0.65.1** | IP Tickets copy rewritten to event vocabulary (kept verbatim through v0.66.0) |
+| **v0.65.0** | `ServiceFormShell` form compartment removed — forms render directly on the page |
+| **v0.64.1** | `ActivityTicker` hover-zoom removed (mobile-first — no hover-only effects) |
+| **v0.64.0** | `NavBrandButton.onClick` defaults to opening the nav command menu; dead `MedialaneIcon` removed from the package |
+| **v0.63.2** | Header triggers borderless (`NavBrandButton`/`NavIconButton`) |
+| **v0.63.1 / v0.62.0** | Nav shell redesign: `NavCommandMenu` restyled (620px glass panel, icon-chip rows, optional `description`, localStorage "Recent" group, keycap footer hints, mobile bottom-sheet). New `nav-shell.tsx`: `NavBrandButton`, `NavIconButton`, `NavAccountSheet`/`useNavAccountSheet` (exported but not mounted in either app yet) |
+| **v0.61.0** | Typography restraint — Urbanist display face limited to h1 only (was h1–h3); rewards chip simplified to a plain pill (no medallion/gradient); `PortfolioOverview` stats → compact pill row |
+| **v0.60.0** | `PortfolioHeader` drops stat chips, rewards chip becomes a journey badge (`levelName`+`totalXp`, no numeric level); `PortfolioOverview` gains `quickActions` |
+| **v0.59.0** | Portfolio shell redesign: `PortfolioNav` (two-level nav), `PortfolioHeader` (compact block), `PortfolioOverview` (landing page). `PortfolioSubnav` removed |
+| **v0.58.0** | `ListingCard` gains optional `imageUrl` override prop |
+| **v0.57.2** | `AssetCard` redesigned — inset 4:5 gallery artwork, display-face title, price as a glass pill |
+| **v0.56.0** | `CoinLaunchPreview` lifted from the apps and redesigned to brand tokens |
+| **v0.55.1** | `MedialaneCollectionCard` — branded collectors-card preview (3D tilt, holographic sheen, serial pill) |
+| **v0.53.1** | Borderless launchpad panels (`ServiceFormShell`, `ClaimRail`); Geist Mono removed everywhere in favor of `tabular-nums`; new `font-display` preset token |
+| **v0.29.0–0.52.x** | *Not individually documented — no changelog notes survive in `CLAUDE.md` for this range.* Component-inventory milestone recorded at v0.50.1 (78 components) |
 | **v0.28.0** | `StepNav` (presentation-only step indicator — solid active dot, outlined check for done, filling connector, accent-themed). `ServiceFormShell` gains an `aboveForm` slot (left column, between header and form — e.g. a stepper) and a **sticky right rail** on desktop. Lets the Creator Coin page adopt the standard form layout |
 | **v0.27.0** | `ServiceHeader` gains a `plain` variant (neutral border, no brand gradient); `ServiceFormShell` renders the header `plain` so create/mint form pages carry the gradient border only on the form, not the header. Standalone headers (browse pages, coin page, `/claim` hub) keep the gradient |
 | **v0.26.0** | `LaunchpadServiceCard` "living color cards" high-fidelity pass: per-hue aurora light-leaks, gradient icon tile, hairline gradient frame that ignites on interaction, staggered entrance reveal, press/hover microinteractions, animated CTA arrow; roomier grid gaps + section rhythm. Touch-first, reduced-motion safe |

package/dist/components/nav-shell.cjs

@@ -87,7 +87,7 @@ function NavIconButton({ onClick, className, indicator, children, ...rest }) {
   );
 }
 const NavWalletTrigger = React.forwardRef(
-  function NavWalletTrigger2({ onClick, className, connected = false, iconSrc, ...rest }, ref) {
+  function NavWalletTrigger2({ onClick, className, connected = false, iconSrc, disconnectedIcon, ...rest }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "button",
       {
@@ -105,7 +105,7 @@ const NavWalletTrigger = React.forwardRef(
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-nav-wallet-ring", "aria-hidden": "true" }),
-          connected && (iconSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: iconSrc, alt: "", width: 16, height: 16, className: "h-4 w-4 shrink-0 rounded-full" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.User, { className: "h-3.5 w-3.5" }))
+          connected ? iconSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: iconSrc, alt: "", width: 16, height: 16, className: "h-4 w-4 shrink-0 rounded-full" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.User, { className: "h-3.5 w-3.5" }) : disconnectedIcon ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Wallet, { className: "h-3.5 w-3.5" })
         ]
       }
     );

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 } 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\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 an empty\n * center, no glyph, no placeholder avatar. Connected — the ring settles to a\n * static accent and shows the connected wallet's own icon via `iconSrc` when\n * the caller has one; otherwise a plain `User` glyph (never a fabricated\n * generic avatar).\n */\nexport const NavWalletTrigger = React.forwardRef<HTMLButtonElement, NavWalletTriggerProps>(\n  function NavWalletTrigger({ onClick, className, connected = false, iconSrc, ...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 && (iconSrc\n          ? <img src={iconSrc} alt=\"\" width={16} height={16} className=\"h-4 w-4 shrink-0 rounded-full\" />\n          : <User 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\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, ...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              : <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"]}

package/dist/components/nav-shell.d.cts

@@ -40,16 +40,27 @@ interface NavWalletTriggerProps {
      * email/social-login app) simply omit it and get the plain glyph below.
      */
     iconSrc?: string;
+    /**
+     * Override for the disconnected-state glyph (default: a plain `Wallet`
+     * icon). Apps whose actual connect entry point isn't a wallet — e.g. an
+     * email/social-login app whose users primarily sign in with Google — can
+     * pass a more accurate icon here so the ring points at what will really
+     * happen on click.
+     */
+    disconnectedIcon?: React.ReactNode;
 }
 /**
  * The right-side counterpart to `NavBrandButton` for a wallet/account entry
  * point: the same glass pill material, with a thin brand-gradient ring
  * traced around the rim instead of a static icon. Not connected — the ring
- * rotates slowly (an ambient "something opens here" cue) around an empty
- * center, no glyph, no placeholder avatar. Connected — the ring settles to a
- * static accent and shows the connected wallet's own icon via `iconSrc` when
- * the caller has one; otherwise a plain `User` glyph (never a fabricated
- * generic avatar).
+ * rotates slowly (an ambient "something opens here" cue) around a plain
+ * `Wallet` glyph (override via `disconnectedIcon` — e.g. a Google mark for an
+ * email/social-login app), so the trigger reads as an actionable connect
+ * entry point rather than disappearing into the header (users weren't
+ * noticing the bare ring). Connected — the ring settles to a static accent
+ * and shows the connected
+ * wallet's own icon via `iconSrc` when the caller has one; otherwise a plain
+ * `User` glyph (never a fabricated generic avatar).
  */
 declare const NavWalletTrigger: React.ForwardRefExoticComponent<NavWalletTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare function useNavAccountSheet(): {

package/dist/components/nav-shell.d.ts

@@ -40,16 +40,27 @@ interface NavWalletTriggerProps {
      * email/social-login app) simply omit it and get the plain glyph below.
      */
     iconSrc?: string;
+    /**
+     * Override for the disconnected-state glyph (default: a plain `Wallet`
+     * icon). Apps whose actual connect entry point isn't a wallet — e.g. an
+     * email/social-login app whose users primarily sign in with Google — can
+     * pass a more accurate icon here so the ring points at what will really
+     * happen on click.
+     */
+    disconnectedIcon?: React.ReactNode;
 }
 /**
  * The right-side counterpart to `NavBrandButton` for a wallet/account entry
  * point: the same glass pill material, with a thin brand-gradient ring
  * traced around the rim instead of a static icon. Not connected — the ring
- * rotates slowly (an ambient "something opens here" cue) around an empty
- * center, no glyph, no placeholder avatar. Connected — the ring settles to a
- * static accent and shows the connected wallet's own icon via `iconSrc` when
- * the caller has one; otherwise a plain `User` glyph (never a fabricated
- * generic avatar).
+ * rotates slowly (an ambient "something opens here" cue) around a plain
+ * `Wallet` glyph (override via `disconnectedIcon` — e.g. a Google mark for an
+ * email/social-login app), so the trigger reads as an actionable connect
+ * entry point rather than disappearing into the header (users weren't
+ * noticing the bare ring). Connected — the ring settles to a static accent
+ * and shows the connected
+ * wallet's own icon via `iconSrc` when the caller has one; otherwise a plain
+ * `User` glyph (never a fabricated generic avatar).
  */
 declare const NavWalletTrigger: React.ForwardRefExoticComponent<NavWalletTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare function useNavAccountSheet(): {

package/dist/components/nav-shell.js

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { User } from "lucide-react";
+import { User, Wallet } from "lucide-react";
 import { cn } from "../utils/cn.js";
 function NavBrandButton({ onClick, className, iconSrc = "/icon.png", ...rest }) {
   return /* @__PURE__ */ jsxs(
@@ -50,7 +50,7 @@ function NavIconButton({ onClick, className, indicator, children, ...rest }) {
   );
 }
 const NavWalletTrigger = React.forwardRef(
-  function NavWalletTrigger2({ onClick, className, connected = false, iconSrc, ...rest }, ref) {
+  function NavWalletTrigger2({ onClick, className, connected = false, iconSrc, disconnectedIcon, ...rest }, ref) {
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -68,7 +68,7 @@ const NavWalletTrigger = React.forwardRef(
         ),
         children: [
           /* @__PURE__ */ jsx("span", { className: "ml-nav-wallet-ring", "aria-hidden": "true" }),
-          connected && (iconSrc ? /* @__PURE__ */ jsx("img", { src: iconSrc, alt: "", width: 16, height: 16, className: "h-4 w-4 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx(User, { className: "h-3.5 w-3.5" }))
+          connected ? iconSrc ? /* @__PURE__ */ jsx("img", { src: iconSrc, alt: "", width: 16, height: 16, className: "h-4 w-4 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx(User, { className: "h-3.5 w-3.5" }) : disconnectedIcon ?? /* @__PURE__ */ jsx(Wallet, { className: "h-3.5 w-3.5" })
         ]
       }
     );

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 } 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\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 an empty\n * center, no glyph, no placeholder avatar. Connected — the ring settles to a\n * static accent and shows the connected wallet's own icon via `iconSrc` when\n * the caller has one; otherwise a plain `User` glyph (never a fabricated\n * generic avatar).\n */\nexport const NavWalletTrigger = React.forwardRef<HTMLButtonElement, NavWalletTriggerProps>(\n  function NavWalletTrigger({ onClick, className, connected = false, iconSrc, ...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 && (iconSrc\n          ? <img src={iconSrc} alt=\"\" width={16} height={16} className=\"h-4 w-4 shrink-0 rounded-full\" />\n          : <User 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\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, ...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              : <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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.85.0",
+  "version": "0.87.0",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "main": "./dist/index.cjs",