@medialane/ui 0.118.0 → 0.120.0

package/dist/components/dual-price.cjs

@@ -50,7 +50,7 @@ function FiatChip({ size }) {
 function stripDollarSign(usdValue) {
   return usdValue.replace("$", "");
 }
-const DISPLAY_FACE = "font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums";
+const DISPLAY_FACE = "font-extrabold tracking-tight tabular-nums";
 const DUAL_PRICE_SCALES = {
   /** Full-width hero contexts: AssetMarketplacePanel's main price. */
   hero: { amount: "text-3xl", chip: 18, stableChip: 14, divider: "h-7", showLabel: true },

package/dist/components/dual-price.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\n/** Same circular chip as CoinChip, for fiat. Sized 1:1 with the crypto\n *  icon (fontSize === size, not a fraction of it) so the \"$\" reads with\n *  the same visual weight as the coin icon sitting next to it — a smaller,\n *  thinner glyph in an identically-sized circle looked like an afterthought\n *  next to a solid icon, even though the circles measured the same. */\nfunction FiatChip({ size }: { size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n      style={{ width: size + 10, height: size + 10, fontSize: size }}\n    >\n      $\n    </span>\n  );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n *  carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n  return usdValue.replace(\"$\", \"\");\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. */\n  hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\n/**\n * One currency's [chip] [amount] [optional code label] unit. Fiat and\n * crypto both render through this exact function — the previous version\n * had two separately-hand-coded branches (one baseline-aligned, one\n * center-aligned; one full-opacity, one dimmed) that drifted out of sync\n * with each other. Routing both through one function makes that class of\n * bug structurally impossible: there is only one place font, size,\n * opacity, and alignment for a price unit can be defined.\n */\nfunction PriceUnit({\n  chip,\n  amount,\n  label,\n  amountClassName,\n}: {\n  chip: ReactNode;\n  amount: string;\n  label?: string;\n  amountClassName: string;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5\">\n      {chip}\n      <span className=\"flex items-baseline gap-1.5\">\n        <span className={amountClassName}>{amount}</span>\n        {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n      </span>\n    </span>\n  );\n}\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as true\n * peers — same font, same size, same icon treatment, same label\n * alignment — not one dominant number with a secondary afterthought.\n * This platform's audience spans non-crypto newcomers who read fiat and\n * crypto-native buyers who read the token amount; neither should look\n * like the \"real\" price and the other a footnote. Falls back to\n * crypto-only when no USD rate is available. When the currency is itself\n * a USD-pegged stablecoin, the crypto side collapses to a chip + code\n * badge — showing \"13.14 USD\" beside \"13.14 USDC\" would just be the same\n * number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n  if (!usdValue) {\n    return (\n      <div className=\"flex items-center gap-2.5\">\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <PriceUnit\n        chip={<FiatChip size={s.chip} />}\n        amount={stripDollarSign(usdValue)}\n        label={s.showLabel ? \"USD\" : undefined}\n        amountClassName={amountClass}\n      />\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      {stable ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <CoinChip symbol={currency} size={s.stableChip} />\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        </span>\n      ) : (\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n      )}\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment. Smaller\n * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon\n * chips here — the middot + dimmer trailing color is what marks the\n * crypto side as secondary in this tighter context.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {stripDollarSign(usdValue)}\n      <span className={`font-semibold ${t.text}`}>USD</span>\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\n/** Same circular chip as CoinChip, for fiat. Sized 1:1 with the crypto\n *  icon (fontSize === size, not a fraction of it) so the \"$\" reads with\n *  the same visual weight as the coin icon sitting next to it — a smaller,\n *  thinner glyph in an identically-sized circle looked like an afterthought\n *  next to a solid icon, even though the circles measured the same. */\nfunction FiatChip({ size }: { size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n      style={{ width: size + 10, height: size + 10, fontSize: size }}\n    >\n      $\n    </span>\n  );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n *  carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n  return usdValue.replace(\"$\", \"\");\n}\n\n// Inter (the platform's default body font, applied via <body>'s className\n// in every app's layout.tsx) rather than the Urbanist display face —\n// direct feedback that the price numbers should use the standard system\n// font, not the brand's opt-in heading face.\nconst DISPLAY_FACE = \"font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. */\n  hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\n/**\n * One currency's [chip] [amount] [optional code label] unit. Fiat and\n * crypto both render through this exact function — the previous version\n * had two separately-hand-coded branches (one baseline-aligned, one\n * center-aligned; one full-opacity, one dimmed) that drifted out of sync\n * with each other. Routing both through one function makes that class of\n * bug structurally impossible: there is only one place font, size,\n * opacity, and alignment for a price unit can be defined.\n */\nfunction PriceUnit({\n  chip,\n  amount,\n  label,\n  amountClassName,\n}: {\n  chip: ReactNode;\n  amount: string;\n  label?: string;\n  amountClassName: string;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5\">\n      {chip}\n      <span className=\"flex items-baseline gap-1.5\">\n        <span className={amountClassName}>{amount}</span>\n        {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n      </span>\n    </span>\n  );\n}\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as true\n * peers — same font, same size, same icon treatment, same label\n * alignment — not one dominant number with a secondary afterthought.\n * This platform's audience spans non-crypto newcomers who read fiat and\n * crypto-native buyers who read the token amount; neither should look\n * like the \"real\" price and the other a footnote. Falls back to\n * crypto-only when no USD rate is available. When the currency is itself\n * a USD-pegged stablecoin, the crypto side collapses to a chip + code\n * badge — showing \"13.14 USD\" beside \"13.14 USDC\" would just be the same\n * number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n  if (!usdValue) {\n    return (\n      <div className=\"flex items-center gap-2.5\">\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <PriceUnit\n        chip={<FiatChip size={s.chip} />}\n        amount={stripDollarSign(usdValue)}\n        label={s.showLabel ? \"USD\" : undefined}\n        amountClassName={amountClass}\n      />\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      {stable ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <CoinChip symbol={currency} size={s.stableChip} />\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        </span>\n      ) : (\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n      )}\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment. Smaller\n * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon\n * chips here — the middot + dimmer trailing color is what marks the\n * crypto side as secondary in this tighter context.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {stripDollarSign(usdValue)}\n      <span className={`font-semibold ${t.text}`}>USD</span>\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/dual-price.js

@@ -25,7 +25,7 @@ function FiatChip({ size }) {
 function stripDollarSign(usdValue) {
   return usdValue.replace("$", "");
 }
-const DISPLAY_FACE = "font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums";
+const DISPLAY_FACE = "font-extrabold tracking-tight tabular-nums";
 const DUAL_PRICE_SCALES = {
   /** Full-width hero contexts: AssetMarketplacePanel's main price. */
   hero: { amount: "text-3xl", chip: 18, stableChip: 14, divider: "h-7", showLabel: true },

package/dist/components/dual-price.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\n/** Same circular chip as CoinChip, for fiat. Sized 1:1 with the crypto\n *  icon (fontSize === size, not a fraction of it) so the \"$\" reads with\n *  the same visual weight as the coin icon sitting next to it — a smaller,\n *  thinner glyph in an identically-sized circle looked like an afterthought\n *  next to a solid icon, even though the circles measured the same. */\nfunction FiatChip({ size }: { size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n      style={{ width: size + 10, height: size + 10, fontSize: size }}\n    >\n      $\n    </span>\n  );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n *  carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n  return usdValue.replace(\"$\", \"\");\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. */\n  hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\n/**\n * One currency's [chip] [amount] [optional code label] unit. Fiat and\n * crypto both render through this exact function — the previous version\n * had two separately-hand-coded branches (one baseline-aligned, one\n * center-aligned; one full-opacity, one dimmed) that drifted out of sync\n * with each other. Routing both through one function makes that class of\n * bug structurally impossible: there is only one place font, size,\n * opacity, and alignment for a price unit can be defined.\n */\nfunction PriceUnit({\n  chip,\n  amount,\n  label,\n  amountClassName,\n}: {\n  chip: ReactNode;\n  amount: string;\n  label?: string;\n  amountClassName: string;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5\">\n      {chip}\n      <span className=\"flex items-baseline gap-1.5\">\n        <span className={amountClassName}>{amount}</span>\n        {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n      </span>\n    </span>\n  );\n}\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as true\n * peers — same font, same size, same icon treatment, same label\n * alignment — not one dominant number with a secondary afterthought.\n * This platform's audience spans non-crypto newcomers who read fiat and\n * crypto-native buyers who read the token amount; neither should look\n * like the \"real\" price and the other a footnote. Falls back to\n * crypto-only when no USD rate is available. When the currency is itself\n * a USD-pegged stablecoin, the crypto side collapses to a chip + code\n * badge — showing \"13.14 USD\" beside \"13.14 USDC\" would just be the same\n * number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n  if (!usdValue) {\n    return (\n      <div className=\"flex items-center gap-2.5\">\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <PriceUnit\n        chip={<FiatChip size={s.chip} />}\n        amount={stripDollarSign(usdValue)}\n        label={s.showLabel ? \"USD\" : undefined}\n        amountClassName={amountClass}\n      />\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      {stable ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <CoinChip symbol={currency} size={s.stableChip} />\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        </span>\n      ) : (\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n      )}\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment. Smaller\n * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon\n * chips here — the middot + dimmer trailing color is what marks the\n * crypto side as secondary in this tighter context.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {stripDollarSign(usdValue)}\n      <span className={`font-semibold ${t.text}`}>USD</span>\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\n/** Same circular chip as CoinChip, for fiat. Sized 1:1 with the crypto\n *  icon (fontSize === size, not a fraction of it) so the \"$\" reads with\n *  the same visual weight as the coin icon sitting next to it — a smaller,\n *  thinner glyph in an identically-sized circle looked like an afterthought\n *  next to a solid icon, even though the circles measured the same. */\nfunction FiatChip({ size }: { size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n      style={{ width: size + 10, height: size + 10, fontSize: size }}\n    >\n      $\n    </span>\n  );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n *  carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n  return usdValue.replace(\"$\", \"\");\n}\n\n// Inter (the platform's default body font, applied via <body>'s className\n// in every app's layout.tsx) rather than the Urbanist display face —\n// direct feedback that the price numbers should use the standard system\n// font, not the brand's opt-in heading face.\nconst DISPLAY_FACE = \"font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. */\n  hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\n/**\n * One currency's [chip] [amount] [optional code label] unit. Fiat and\n * crypto both render through this exact function — the previous version\n * had two separately-hand-coded branches (one baseline-aligned, one\n * center-aligned; one full-opacity, one dimmed) that drifted out of sync\n * with each other. Routing both through one function makes that class of\n * bug structurally impossible: there is only one place font, size,\n * opacity, and alignment for a price unit can be defined.\n */\nfunction PriceUnit({\n  chip,\n  amount,\n  label,\n  amountClassName,\n}: {\n  chip: ReactNode;\n  amount: string;\n  label?: string;\n  amountClassName: string;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5\">\n      {chip}\n      <span className=\"flex items-baseline gap-1.5\">\n        <span className={amountClassName}>{amount}</span>\n        {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n      </span>\n    </span>\n  );\n}\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as true\n * peers — same font, same size, same icon treatment, same label\n * alignment — not one dominant number with a secondary afterthought.\n * This platform's audience spans non-crypto newcomers who read fiat and\n * crypto-native buyers who read the token amount; neither should look\n * like the \"real\" price and the other a footnote. Falls back to\n * crypto-only when no USD rate is available. When the currency is itself\n * a USD-pegged stablecoin, the crypto side collapses to a chip + code\n * badge — showing \"13.14 USD\" beside \"13.14 USDC\" would just be the same\n * number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n  if (!usdValue) {\n    return (\n      <div className=\"flex items-center gap-2.5\">\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <PriceUnit\n        chip={<FiatChip size={s.chip} />}\n        amount={stripDollarSign(usdValue)}\n        label={s.showLabel ? \"USD\" : undefined}\n        amountClassName={amountClass}\n      />\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      {stable ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <CoinChip symbol={currency} size={s.stableChip} />\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        </span>\n      ) : (\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n      )}\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment. Smaller\n * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon\n * chips here — the middot + dimmer trailing color is what marks the\n * crypto side as secondary in this tighter context.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {stripDollarSign(usdValue)}\n      <span className={`font-semibold ${t.text}`}>USD</span>\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -193,7 +193,7 @@ function NavCommandMenu({
             {
               className: (0, import_cn.cn)(
                 "flex w-full max-h-[85dvh] flex-col overflow-hidden rounded-[20px] sm:max-h-[min(680px,88dvh)] sm:max-w-[620px]",
-                "border border-border/40 bg-background/90 shadow-2xl backdrop-blur-2xl backdrop-saturate-150"
+                "border border-border/40 bg-background/90 backdrop-blur-2xl backdrop-saturate-150"
               ),
               onClick: (e) => e.stopPropagation(),
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cmdk.Command, { shouldFilter: true, label: "Medialane navigation", className: "flex min-h-0 flex-1 flex-col", children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/nav-command-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Command } from \"cmdk\";\nimport { useRouter } from \"next/navigation\";\nimport { Search, X, ArrowRight } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { cn } from \"../utils/cn.js\";\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport interface NavCommand {\n  id: string;\n  label: string;\n  icon: React.ComponentType<{ className?: string }>;\n  href?: string;\n  action?: () => void;\n  /** Extra search terms beyond the label */\n  keywords?: string[];\n  /** 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":[]}
+{"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 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-command-menu.js

@@ -159,7 +159,7 @@ function NavCommandMenu({
             {
               className: cn(
                 "flex w-full max-h-[85dvh] flex-col overflow-hidden rounded-[20px] sm:max-h-[min(680px,88dvh)] sm:max-w-[620px]",
-                "border border-border/40 bg-background/90 shadow-2xl backdrop-blur-2xl backdrop-saturate-150"
+                "border border-border/40 bg-background/90 backdrop-blur-2xl backdrop-saturate-150"
               ),
               onClick: (e) => e.stopPropagation(),
               children: /* @__PURE__ */ jsxs(Command, { shouldFilter: true, label: "Medialane navigation", className: "flex min-h-0 flex-1 flex-col", children: [

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-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":";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,0BAA0B;AAAA,cACtC;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,sEAAqE;AAAA;AAAA,oBAEnF,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 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

@@ -169,7 +169,7 @@ function NavAccountSheet({ children }) {
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
-            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",
+            className: "relative w-full max-w-[380px] overflow-hidden rounded-[20px] border border-border/40 bg-background/90 backdrop-blur-2xl backdrop-saturate-150",
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center pt-2.5 sm:hidden", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-1 w-9 rounded-full bg-muted-foreground/30" }) }),

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-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"]}
+{"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 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

@@ -132,7 +132,7 @@ function NavAccountSheet({ children }) {
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            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",
+            className: "relative w-full max-w-[380px] overflow-hidden rounded-[20px] border border-border/40 bg-background/90 backdrop-blur-2xl backdrop-saturate-150",
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2.5 sm:hidden", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "h-1 w-9 rounded-full bg-muted-foreground/30" }) }),

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-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"]}
+{"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 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.118.0",
+  "version": "0.120.0",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "sideEffects": false,