@medialane/ui 0.120.0 → 0.121.0

package/dist/components/portfolio-bento-tile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-bento-tile.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioBentoTileProps {\n  /** Tile heading, e.g. \"Collections\". */\n  title: string;\n  /** \"See all\" link target. */\n  href: string;\n  /**\n   * \"wide\" spans 2 grid tracks (for content that reads better a bit wider,\n   * like Activity rows) while still sharing a row with other tiles when\n   * there's room. Default sits in a single track.\n   */\n  size?: \"wide\" | \"default\";\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * A single cell on the portfolio landing page: a titled, media-forward\n * preview of one section, expanding into its full subpage via \"See all\".\n * Pure presentation — content is supplied by the caller.\n */\nexport function PortfolioBentoTile({\n  title,\n  href,\n  size = \"default\",\n  children,\n  className,\n}: PortfolioBentoTileProps) {\n  return (\n    <section\n      className={cn(\n        \"rounded-2xl bg-foreground/[0.04] min-w-0 transition-colors hover:bg-foreground/[0.07]\",\n        size === \"wide\" && \"md:col-span-2\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-3 px-4 pt-4 pb-3\">\n        <h2 className=\"text-sm font-black text-foreground tracking-tight\">\n          {title}\n        </h2>\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          See all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      </div>\n      <div className=\"px-4 pb-4\">{children}</div>\n    </section>\n  );\n}\n"],"mappings":";AA0CQ,cAGA,YAHA;AAxCR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAsBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,UAAU;AAAA,QACnB;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,0DACb;AAAA,8BAAC,QAAG,WAAU,qDACX,iBACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,oBAAC,cAAW,WAAU,WAAU;AAAA;AAAA;AAAA,UAClC;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAU,aAAa,UAAS;AAAA;AAAA;AAAA,EACvC;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-bento-tile.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioBentoTileProps {\n\n  title: string;\n\n  href: string;\n\n  /** Cell footprint in the bento-masonry grid (see PortfolioOverview):\n   * \"default\" = 1x1, \"wide\" = 2x1 (list-like content), \"large\" = 2x2 (the\n   * hero tile — the grid is sized so exactly one \"large\" tile per screen\n   * packs edge-to-edge with the rest, no gaps). */\n  size?: \"default\" | \"wide\" | \"large\";\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst SIZE_SPAN: Record<NonNullable<PortfolioBentoTileProps[\"size\"]>, string> = {\n  default: \"\",\n  wide: \"sm:col-span-2\",\n  large: \"sm:col-span-2 sm:row-span-2\",\n};\n\nexport function PortfolioBentoTile({\n  title,\n  href,\n  size = \"default\",\n  children,\n  className,\n}: PortfolioBentoTileProps) {\n  return (\n    <section\n      className={cn(\n        \"rounded-2xl bg-foreground/[0.04] min-w-0 flex flex-col transition-colors hover:bg-foreground/[0.07]\",\n        SIZE_SPAN[size],\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-3 px-4 pt-4 pb-3\">\n        <h2 className=\"text-sm font-black text-foreground tracking-tight\">\n          {title}\n        </h2>\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          See all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      </div>\n      <div className=\"px-4 pb-4 flex-1 min-h-0\">{children}</div>\n    </section>\n  );\n}\n"],"mappings":";AA2CQ,cAGA,YAHA;AAzCR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAiBnB,MAAM,YAA0E;AAAA,EAC9E,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AACT;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,UAAU,IAAI;AAAA,QACd;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,0DACb;AAAA,8BAAC,QAAG,WAAU,qDACX,iBACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,oBAAC,cAAW,WAAU,WAAU;AAAA;AAAA;AAAA,UAClC;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAU,4BAA4B,UAAS;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}

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

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

package/dist/components/portfolio-chip-filter.d.cts

@@ -3,29 +3,15 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface PortfolioChipFilterOption {
     key: string;
     label: string;
-    /**
-     * When set, this chip is a direct navigation link rather than an in-page
-     * filter. It's marked active when `href` equals the current `value`
-     * (pass the current pathname as `value` for a location-aware nav bar).
-     */
     href?: string;
 }
 interface PortfolioChipFilterProps {
     options: PortfolioChipFilterOption[];
-    /** Selected filter key, or the current pathname when used for navigation. */
     value: string;
     onChange: (key: string) => void;
-    /** Suppress the auto-injected "All" chip — for pure navigation bars where every option already has an href. Default true. */
     showAll?: boolean;
     className?: string;
 }
-/**
- * Horizontally-scrollable chip row — the portfolio section's sole
- * navigation mechanism (Instagram/YouTube-style chips), used both as an
- * in-page filter (chips with no `href`, toggled via `onChange`) and as
- * cross-page navigation (chips with `href`, highlighted active by matching
- * `value` against the current pathname).
- */
 declare function PortfolioChipFilter({ options, value, onChange, showAll, className, }: PortfolioChipFilterProps): react_jsx_runtime.JSX.Element;
 
 export { PortfolioChipFilter, type PortfolioChipFilterOption, type PortfolioChipFilterProps };

package/dist/components/portfolio-chip-filter.d.ts

@@ -3,29 +3,15 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface PortfolioChipFilterOption {
     key: string;
     label: string;
-    /**
-     * When set, this chip is a direct navigation link rather than an in-page
-     * filter. It's marked active when `href` equals the current `value`
-     * (pass the current pathname as `value` for a location-aware nav bar).
-     */
     href?: string;
 }
 interface PortfolioChipFilterProps {
     options: PortfolioChipFilterOption[];
-    /** Selected filter key, or the current pathname when used for navigation. */
     value: string;
     onChange: (key: string) => void;
-    /** Suppress the auto-injected "All" chip — for pure navigation bars where every option already has an href. Default true. */
     showAll?: boolean;
     className?: string;
 }
-/**
- * Horizontally-scrollable chip row — the portfolio section's sole
- * navigation mechanism (Instagram/YouTube-style chips), used both as an
- * in-page filter (chips with no `href`, toggled via `onChange`) and as
- * cross-page navigation (chips with `href`, highlighted active by matching
- * `value` against the current pathname).
- */
 declare function PortfolioChipFilter({ options, value, onChange, showAll, className, }: PortfolioChipFilterProps): react_jsx_runtime.JSX.Element;
 
 export { PortfolioChipFilter, type PortfolioChipFilterOption, type PortfolioChipFilterProps };

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-header.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface PortfolioHeaderScore {\n  /** Journey level name (\"Starter\", \"Explorer\", …) — no numeric level shown. */\n  levelName: string;\n  totalXp: number;\n  /** Where the score chip links (\"/rewards\"). */\n  href?: string;\n}\n\nexport interface PortfolioHeaderProps {\n  address: string;\n  score?: PortfolioHeaderScore | null;\n  className?: string;\n}\n\n/**\n * Portfolio identity header: the address as a real page title (no generic\n * gradient/avatar element — there's no profile data to lead with, and a\n * placeholder gradient mark isn't the answer), with the rewards journey\n * chip alongside it. The chip stays orange->maeve (the platform-wide XP/\n * Rewards identity, matching LevelBadge) rather than Portfolio's own\n * purple->orange theme — a rewards badge keeps its own aesthetic wherever\n * it's embedded, it doesn't inherit the surrounding page's section theme.\n */\nexport function PortfolioHeader({\n  address,\n  score,\n  className,\n}: PortfolioHeaderProps) {\n  const scoreChip = score && (\n    <div className=\"rounded-full bg-gradient-to-r from-brand-orange to-brand-maeve px-3.5 py-1.5 flex items-baseline gap-2 whitespace-nowrap text-white\">\n      <span className=\"text-sm font-bold\">\n        {score.levelName}\n      </span>\n      <span className=\"text-xs font-medium text-white/80 tabular-nums\">\n        {score.totalXp.toLocaleString()} XP\n      </span>\n    </div>\n  );\n\n  return (\n    <div className={cn(\"flex items-center justify-between gap-4\", className)}>\n      <div className=\"min-w-0\">\n        <p className=\"text-xs font-medium text-muted-foreground\">\n          Portfolio\n        </p>\n        <AddressDisplay\n          address={address}\n          chars={6}\n          className=\"text-2xl sm:text-3xl font-black tracking-tight text-foreground\"\n        />\n      </div>\n      {score?.href ? (\n        <Link href={score.href} className=\"shrink-0 active:opacity-80\">\n          {scoreChip}\n        </Link>\n      ) : (\n        <div className=\"shrink-0\">{scoreChip}</div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCM;AAlCN,kBAAiB;AACjB,gBAAmB;AACnB,6BAA+B;AAyBxB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,SAChB,6CAAC,SAAI,WAAU,uIACb;AAAA,gDAAC,UAAK,WAAU,qBACb,gBAAM,WACT;AAAA,IACA,6CAAC,UAAK,WAAU,kDACb;AAAA,YAAM,QAAQ,eAAe;AAAA,MAAE;AAAA,OAClC;AAAA,KACF;AAGF,SACE,6CAAC,SAAI,eAAW,cAAG,2CAA2C,SAAS,GACrE;AAAA,iDAAC,SAAI,WAAU,WACb;AAAA,kDAAC,OAAE,WAAU,6CAA4C,uBAEzD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,IACC,OAAO,OACN,4CAAC,YAAAA,SAAA,EAAK,MAAM,MAAM,MAAM,WAAU,8BAC/B,qBACH,IAEA,4CAAC,SAAI,WAAU,YAAY,qBAAU;AAAA,KAEzC;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/portfolio-header.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface PortfolioHeaderScore {\n\n  levelName: string;\n  totalXp: number;\n\n  href?: string;\n}\n\nexport interface PortfolioHeaderProps {\n  address: string;\n  score?: PortfolioHeaderScore | null;\n  className?: string;\n}\n\nexport function PortfolioHeader({\n  address,\n  score,\n  className,\n}: PortfolioHeaderProps) {\n  const scoreChip = score && (\n    <div className=\"rounded-full bg-gradient-to-r from-brand-orange to-brand-maeve px-3.5 py-1.5 flex items-baseline gap-2 whitespace-nowrap text-white\">\n      <span className=\"text-sm font-bold\">\n        {score.levelName}\n      </span>\n      <span className=\"text-xs font-medium text-white/80 tabular-nums\">\n        {score.totalXp.toLocaleString()} XP\n      </span>\n    </div>\n  );\n\n  return (\n    <div className={cn(\"flex items-center justify-between gap-4\", className)}>\n      <div className=\"min-w-0\">\n        <p className=\"text-xs font-medium text-muted-foreground\">\n          Portfolio\n        </p>\n        <AddressDisplay\n          address={address}\n          chars={6}\n          className=\"text-2xl sm:text-3xl font-black tracking-tight text-foreground\"\n        />\n      </div>\n      {score?.href ? (\n        <Link href={score.href} className=\"shrink-0 active:opacity-80\">\n          {scoreChip}\n        </Link>\n      ) : (\n        <div className=\"shrink-0\">{scoreChip}</div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BM;AAzBN,kBAAiB;AACjB,gBAAmB;AACnB,6BAA+B;AAgBxB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,SAChB,6CAAC,SAAI,WAAU,uIACb;AAAA,gDAAC,UAAK,WAAU,qBACb,gBAAM,WACT;AAAA,IACA,6CAAC,UAAK,WAAU,kDACb;AAAA,YAAM,QAAQ,eAAe;AAAA,MAAE;AAAA,OAClC;AAAA,KACF;AAGF,SACE,6CAAC,SAAI,eAAW,cAAG,2CAA2C,SAAS,GACrE;AAAA,iDAAC,SAAI,WAAU,WACb;AAAA,kDAAC,OAAE,WAAU,6CAA4C,uBAEzD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,IACC,OAAO,OACN,4CAAC,YAAAA,SAAA,EAAK,MAAM,MAAM,MAAM,WAAU,8BAC/B,qBACH,IAEA,4CAAC,SAAI,WAAU,YAAY,qBAAU;AAAA,KAEzC;AAEJ;","names":["Link"]}

package/dist/components/portfolio-header.d.cts

@@ -1,10 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface PortfolioHeaderScore {
-    /** Journey level name ("Starter", "Explorer", …) — no numeric level shown. */
     levelName: string;
     totalXp: number;
-    /** Where the score chip links ("/rewards"). */
     href?: string;
 }
 interface PortfolioHeaderProps {
@@ -12,15 +10,6 @@ interface PortfolioHeaderProps {
     score?: PortfolioHeaderScore | null;
     className?: string;
 }
-/**
- * Portfolio identity header: the address as a real page title (no generic
- * gradient/avatar element — there's no profile data to lead with, and a
- * placeholder gradient mark isn't the answer), with the rewards journey
- * chip alongside it. The chip stays orange->maeve (the platform-wide XP/
- * Rewards identity, matching LevelBadge) rather than Portfolio's own
- * purple->orange theme — a rewards badge keeps its own aesthetic wherever
- * it's embedded, it doesn't inherit the surrounding page's section theme.
- */
 declare function PortfolioHeader({ address, score, className, }: PortfolioHeaderProps): react_jsx_runtime.JSX.Element;
 
 export { PortfolioHeader, type PortfolioHeaderProps, type PortfolioHeaderScore };

package/dist/components/portfolio-header.d.ts

@@ -1,10 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface PortfolioHeaderScore {
-    /** Journey level name ("Starter", "Explorer", …) — no numeric level shown. */
     levelName: string;
     totalXp: number;
-    /** Where the score chip links ("/rewards"). */
     href?: string;
 }
 interface PortfolioHeaderProps {
@@ -12,15 +10,6 @@ interface PortfolioHeaderProps {
     score?: PortfolioHeaderScore | null;
     className?: string;
 }
-/**
- * Portfolio identity header: the address as a real page title (no generic
- * gradient/avatar element — there's no profile data to lead with, and a
- * placeholder gradient mark isn't the answer), with the rewards journey
- * chip alongside it. The chip stays orange->maeve (the platform-wide XP/
- * Rewards identity, matching LevelBadge) rather than Portfolio's own
- * purple->orange theme — a rewards badge keeps its own aesthetic wherever
- * it's embedded, it doesn't inherit the surrounding page's section theme.
- */
 declare function PortfolioHeader({ address, score, className, }: PortfolioHeaderProps): react_jsx_runtime.JSX.Element;
 
 export { PortfolioHeader, type PortfolioHeaderProps, type PortfolioHeaderScore };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-header.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface PortfolioHeaderScore {\n  /** Journey level name (\"Starter\", \"Explorer\", …) — no numeric level shown. */\n  levelName: string;\n  totalXp: number;\n  /** Where the score chip links (\"/rewards\"). */\n  href?: string;\n}\n\nexport interface PortfolioHeaderProps {\n  address: string;\n  score?: PortfolioHeaderScore | null;\n  className?: string;\n}\n\n/**\n * Portfolio identity header: the address as a real page title (no generic\n * gradient/avatar element — there's no profile data to lead with, and a\n * placeholder gradient mark isn't the answer), with the rewards journey\n * chip alongside it. The chip stays orange->maeve (the platform-wide XP/\n * Rewards identity, matching LevelBadge) rather than Portfolio's own\n * purple->orange theme — a rewards badge keeps its own aesthetic wherever\n * it's embedded, it doesn't inherit the surrounding page's section theme.\n */\nexport function PortfolioHeader({\n  address,\n  score,\n  className,\n}: PortfolioHeaderProps) {\n  const scoreChip = score && (\n    <div className=\"rounded-full bg-gradient-to-r from-brand-orange to-brand-maeve px-3.5 py-1.5 flex items-baseline gap-2 whitespace-nowrap text-white\">\n      <span className=\"text-sm font-bold\">\n        {score.levelName}\n      </span>\n      <span className=\"text-xs font-medium text-white/80 tabular-nums\">\n        {score.totalXp.toLocaleString()} XP\n      </span>\n    </div>\n  );\n\n  return (\n    <div className={cn(\"flex items-center justify-between gap-4\", className)}>\n      <div className=\"min-w-0\">\n        <p className=\"text-xs font-medium text-muted-foreground\">\n          Portfolio\n        </p>\n        <AddressDisplay\n          address={address}\n          chars={6}\n          className=\"text-2xl sm:text-3xl font-black tracking-tight text-foreground\"\n        />\n      </div>\n      {score?.href ? (\n        <Link href={score.href} className=\"shrink-0 active:opacity-80\">\n          {scoreChip}\n        </Link>\n      ) : (\n        <div className=\"shrink-0\">{scoreChip}</div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoCM,cAGA,YAHA;AAlCN,OAAO,UAAU;AACjB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAyBxB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,SAChB,qBAAC,SAAI,WAAU,uIACb;AAAA,wBAAC,UAAK,WAAU,qBACb,gBAAM,WACT;AAAA,IACA,qBAAC,UAAK,WAAU,kDACb;AAAA,YAAM,QAAQ,eAAe;AAAA,MAAE;AAAA,OAClC;AAAA,KACF;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,2CAA2C,SAAS,GACrE;AAAA,yBAAC,SAAI,WAAU,WACb;AAAA,0BAAC,OAAE,WAAU,6CAA4C,uBAEzD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,IACC,OAAO,OACN,oBAAC,QAAK,MAAM,MAAM,MAAM,WAAU,8BAC/B,qBACH,IAEA,oBAAC,SAAI,WAAU,YAAY,qBAAU;AAAA,KAEzC;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-header.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface PortfolioHeaderScore {\n\n  levelName: string;\n  totalXp: number;\n\n  href?: string;\n}\n\nexport interface PortfolioHeaderProps {\n  address: string;\n  score?: PortfolioHeaderScore | null;\n  className?: string;\n}\n\nexport function PortfolioHeader({\n  address,\n  score,\n  className,\n}: PortfolioHeaderProps) {\n  const scoreChip = score && (\n    <div className=\"rounded-full bg-gradient-to-r from-brand-orange to-brand-maeve px-3.5 py-1.5 flex items-baseline gap-2 whitespace-nowrap text-white\">\n      <span className=\"text-sm font-bold\">\n        {score.levelName}\n      </span>\n      <span className=\"text-xs font-medium text-white/80 tabular-nums\">\n        {score.totalXp.toLocaleString()} XP\n      </span>\n    </div>\n  );\n\n  return (\n    <div className={cn(\"flex items-center justify-between gap-4\", className)}>\n      <div className=\"min-w-0\">\n        <p className=\"text-xs font-medium text-muted-foreground\">\n          Portfolio\n        </p>\n        <AddressDisplay\n          address={address}\n          chars={6}\n          className=\"text-2xl sm:text-3xl font-black tracking-tight text-foreground\"\n        />\n      </div>\n      {score?.href ? (\n        <Link href={score.href} className=\"shrink-0 active:opacity-80\">\n          {scoreChip}\n        </Link>\n      ) : (\n        <div className=\"shrink-0\">{scoreChip}</div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA2BM,cAGA,YAHA;AAzBN,OAAO,UAAU;AACjB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAgBxB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,YAAY,SAChB,qBAAC,SAAI,WAAU,uIACb;AAAA,wBAAC,UAAK,WAAU,qBACb,gBAAM,WACT;AAAA,IACA,qBAAC,UAAK,WAAU,kDACb;AAAA,YAAM,QAAQ,eAAe;AAAA,MAAE;AAAA,OAClC;AAAA,KACF;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,2CAA2C,SAAS,GACrE;AAAA,yBAAC,SAAI,WAAU,WACb;AAAA,0BAAC,OAAE,WAAU,6CAA4C,uBAEzD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,IACC,OAAO,OACN,oBAAC,QAAK,MAAM,MAAM,MAAM,WAAU,8BAC/B,qBACH,IAEA,oBAAC,SAAI,WAAU,YAAY,qBAAU;AAAA,KAEzC;AAEJ;","names":[]}

package/dist/components/portfolio-overview.cjs

@@ -39,7 +39,12 @@ function PortfolioOverview({
     "div",
     {
       className: (0, import_cn.cn)(
-        "grid gap-4 items-start grid-cols-[repeat(auto-fit,minmax(320px,1fr))]",
+        // Bento-masonry: a fixed 3-column grid (not auto-fit) so each
+        // tile's declared col/row span composes into a gapless pack via
+        // `dense` auto-flow — auto-fit's variable column count can't
+        // support that. Row height is fixed so a "large" (2x2) tile lines
+        // up exactly with two stacked "default" (1x1) tiles beside it.
+        "grid gap-4 grid-flow-dense auto-rows-[minmax(220px,auto)] grid-cols-1 sm:grid-cols-3",
         className
       ),
       children: populatedTiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n  key: string;\n  title: string;\n  href: string;\n  size?: PortfolioBentoTileProps[\"size\"];\n  /** Tiles with nothing to show are omitted entirely, not rendered empty. */\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n  /** First-run state across the whole portfolio (zero holdings, zero activity). */\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Portfolio landing page: a content-first dashboard. Each tile is a fast\n * preview of one section, expanding into its full subpage via \"See all\".\n * Navigation across portfolio sections lives one level up, in the shared\n * portfolio chip bar rendered by the app's layout on every page — this\n * component is pure tile layout, nothing else.\n *\n * Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:\n * masonry's fixed column tracks leave dead blank space when few tiles are\n * populated (a real, reproduced failure mode with sparse content). `auto-fit`\n * collapses empty tracks and stretches present tiles to fill the freed\n * width, so the layout always uses the full screen regardless of how many\n * tiles are populated. `items-start` overrides grid's default row-stretch —\n * without it, a short tile sharing a row with a tall one gets stretched to\n * match, leaving dead space inside its own card (also reproduced).\n */\nexport function PortfolioOverview({\n  tiles,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  if (isEmpty) {\n    return <div className={className}>{emptyState}</div>;\n  }\n\n  const populatedTiles = tiles.filter((t) => !t.isEmpty);\n\n  return (\n    <div\n      className={cn(\n        \"grid gap-4 items-start grid-cols-[repeat(auto-fit,minmax(320px,1fr))]\",\n        className,\n      )}\n    >\n      {populatedTiles.map((tile) => (\n        <PortfolioBentoTile\n          key={tile.key}\n          title={tile.title}\n          href={tile.href}\n          size={tile.size}\n        >\n          {tile.content}\n        </PortfolioBentoTile>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CW;AA5CX,gBAAmB;AACnB,kCAAiE;AAoC1D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,SAAS;AACX,WAAO,4CAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,iBAAiB,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UAEV,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n  key: string;\n  title: string;\n  href: string;\n  size?: PortfolioBentoTileProps[\"size\"];\n\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioOverview({\n  tiles,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  if (isEmpty) {\n    return <div className={className}>{emptyState}</div>;\n  }\n\n  const populatedTiles = tiles.filter((t) => !t.isEmpty);\n\n  return (\n    <div\n      className={cn(\n        // Bento-masonry: a fixed 3-column grid (not auto-fit) so each\n        // tile's declared col/row span composes into a gapless pack via\n        // `dense` auto-flow — auto-fit's variable column count can't\n        // support that. Row height is fixed so a \"large\" (2x2) tile lines\n        // up exactly with two stacked \"default\" (1x1) tiles beside it.\n        \"grid gap-4 grid-flow-dense auto-rows-[minmax(220px,auto)] grid-cols-1 sm:grid-cols-3\",\n        className,\n      )}\n    >\n      {populatedTiles.map((tile) => (\n        <PortfolioBentoTile\n          key={tile.key}\n          title={tile.title}\n          href={tile.href}\n          size={tile.size}\n        >\n          {tile.content}\n        </PortfolioBentoTile>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BW;AA5BX,gBAAmB;AACnB,kCAAiE;AAoB1D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,SAAS;AACX,WAAO,4CAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,iBAAiB,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UAEV,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/portfolio-overview.d.cts

@@ -6,33 +6,15 @@ interface PortfolioBentoTileConfig {
     title: string;
     href: string;
     size?: PortfolioBentoTileProps["size"];
-    /** Tiles with nothing to show are omitted entirely, not rendered empty. */
     isEmpty?: boolean;
     content: React.ReactNode;
 }
 interface PortfolioOverviewProps {
     tiles: PortfolioBentoTileConfig[];
-    /** First-run state across the whole portfolio (zero holdings, zero activity). */
     isEmpty?: boolean;
     emptyState?: React.ReactNode;
     className?: string;
 }
-/**
- * Portfolio landing page: a content-first dashboard. Each tile is a fast
- * preview of one section, expanding into its full subpage via "See all".
- * Navigation across portfolio sections lives one level up, in the shared
- * portfolio chip bar rendered by the app's layout on every page — this
- * component is pure tile layout, nothing else.
- *
- * Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:
- * masonry's fixed column tracks leave dead blank space when few tiles are
- * populated (a real, reproduced failure mode with sparse content). `auto-fit`
- * collapses empty tracks and stretches present tiles to fill the freed
- * width, so the layout always uses the full screen regardless of how many
- * tiles are populated. `items-start` overrides grid's default row-stretch —
- * without it, a short tile sharing a row with a tall one gets stretched to
- * match, leaving dead space inside its own card (also reproduced).
- */
 declare function PortfolioOverview({ tiles, isEmpty, emptyState, className, }: PortfolioOverviewProps): react_jsx_runtime.JSX.Element;
 
 export { type PortfolioBentoTileConfig, PortfolioOverview, type PortfolioOverviewProps };

package/dist/components/portfolio-overview.d.ts

@@ -6,33 +6,15 @@ interface PortfolioBentoTileConfig {
     title: string;
     href: string;
     size?: PortfolioBentoTileProps["size"];
-    /** Tiles with nothing to show are omitted entirely, not rendered empty. */
     isEmpty?: boolean;
     content: React.ReactNode;
 }
 interface PortfolioOverviewProps {
     tiles: PortfolioBentoTileConfig[];
-    /** First-run state across the whole portfolio (zero holdings, zero activity). */
     isEmpty?: boolean;
     emptyState?: React.ReactNode;
     className?: string;
 }
-/**
- * Portfolio landing page: a content-first dashboard. Each tile is a fast
- * preview of one section, expanding into its full subpage via "See all".
- * Navigation across portfolio sections lives one level up, in the shared
- * portfolio chip bar rendered by the app's layout on every page — this
- * component is pure tile layout, nothing else.
- *
- * Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:
- * masonry's fixed column tracks leave dead blank space when few tiles are
- * populated (a real, reproduced failure mode with sparse content). `auto-fit`
- * collapses empty tracks and stretches present tiles to fill the freed
- * width, so the layout always uses the full screen regardless of how many
- * tiles are populated. `items-start` overrides grid's default row-stretch —
- * without it, a short tile sharing a row with a tall one gets stretched to
- * match, leaving dead space inside its own card (also reproduced).
- */
 declare function PortfolioOverview({ tiles, isEmpty, emptyState, className, }: PortfolioOverviewProps): react_jsx_runtime.JSX.Element;
 
 export { type PortfolioBentoTileConfig, PortfolioOverview, type PortfolioOverviewProps };

package/dist/components/portfolio-overview.js

@@ -16,7 +16,12 @@ function PortfolioOverview({
     "div",
     {
       className: cn(
-        "grid gap-4 items-start grid-cols-[repeat(auto-fit,minmax(320px,1fr))]",
+        // Bento-masonry: a fixed 3-column grid (not auto-fit) so each
+        // tile's declared col/row span composes into a gapless pack via
+        // `dense` auto-flow — auto-fit's variable column count can't
+        // support that. Row height is fixed so a "large" (2x2) tile lines
+        // up exactly with two stacked "default" (1x1) tiles beside it.
+        "grid gap-4 grid-flow-dense auto-rows-[minmax(220px,auto)] grid-cols-1 sm:grid-cols-3",
         className
       ),
       children: populatedTiles.map((tile) => /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n  key: string;\n  title: string;\n  href: string;\n  size?: PortfolioBentoTileProps[\"size\"];\n  /** Tiles with nothing to show are omitted entirely, not rendered empty. */\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n  /** First-run state across the whole portfolio (zero holdings, zero activity). */\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Portfolio landing page: a content-first dashboard. Each tile is a fast\n * preview of one section, expanding into its full subpage via \"See all\".\n * Navigation across portfolio sections lives one level up, in the shared\n * portfolio chip bar rendered by the app's layout on every page — this\n * component is pure tile layout, nothing else.\n *\n * Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:\n * masonry's fixed column tracks leave dead blank space when few tiles are\n * populated (a real, reproduced failure mode with sparse content). `auto-fit`\n * collapses empty tracks and stretches present tiles to fill the freed\n * width, so the layout always uses the full screen regardless of how many\n * tiles are populated. `items-start` overrides grid's default row-stretch —\n * without it, a short tile sharing a row with a tall one gets stretched to\n * match, leaving dead space inside its own card (also reproduced).\n */\nexport function PortfolioOverview({\n  tiles,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  if (isEmpty) {\n    return <div className={className}>{emptyState}</div>;\n  }\n\n  const populatedTiles = tiles.filter((t) => !t.isEmpty);\n\n  return (\n    <div\n      className={cn(\n        \"grid gap-4 items-start grid-cols-[repeat(auto-fit,minmax(320px,1fr))]\",\n        className,\n      )}\n    >\n      {populatedTiles.map((tile) => (\n        <PortfolioBentoTile\n          key={tile.key}\n          title={tile.title}\n          href={tile.href}\n          size={tile.size}\n        >\n          {tile.content}\n        </PortfolioBentoTile>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AA8CW;AA5CX,SAAS,UAAU;AACnB,SAAS,0BAAwD;AAoC1D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,SAAS;AACX,WAAO,oBAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,iBAAiB,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UAEV,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n  key: string;\n  title: string;\n  href: string;\n  size?: PortfolioBentoTileProps[\"size\"];\n\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioOverview({\n  tiles,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  if (isEmpty) {\n    return <div className={className}>{emptyState}</div>;\n  }\n\n  const populatedTiles = tiles.filter((t) => !t.isEmpty);\n\n  return (\n    <div\n      className={cn(\n        // Bento-masonry: a fixed 3-column grid (not auto-fit) so each\n        // tile's declared col/row span composes into a gapless pack via\n        // `dense` auto-flow — auto-fit's variable column count can't\n        // support that. Row height is fixed so a \"large\" (2x2) tile lines\n        // up exactly with two stacked \"default\" (1x1) tiles beside it.\n        \"grid gap-4 grid-flow-dense auto-rows-[minmax(220px,auto)] grid-cols-1 sm:grid-cols-3\",\n        className,\n      )}\n    >\n      {populatedTiles.map((tile) => (\n        <PortfolioBentoTile\n          key={tile.key}\n          title={tile.title}\n          href={tile.href}\n          size={tile.size}\n        >\n          {tile.content}\n        </PortfolioBentoTile>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AA8BW;AA5BX,SAAS,UAAU;AACnB,SAAS,0BAAwD;AAoB1D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,SAAS;AACX,WAAO,oBAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,iBAAiB,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UAEV,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/price-history-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/price-history-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport {\n  LineChart,\n  Line,\n  XAxis,\n  YAxis,\n  Tooltip,\n  ResponsiveContainer,\n  CartesianGrid,\n} from \"recharts\";\nimport type { ApiActivity } from \"@medialane/sdk\";\n\nexport interface PriceHistoryChartProps {\n  history: ApiActivity[];\n}\n\nfunction parsePrice(formatted: string): number {\n  return parseFloat(formatted.replace(/[^0-9.]/g, \"\")) || 0;\n}\n\nexport function PriceHistoryChart({ history }: PriceHistoryChartProps) {\n  const chartData = useMemo(() => {\n    const sales = history.filter(\n      (e) => e.type === \"sale\" && e.price?.formatted != null\n    );\n    if (sales.length < 2) return null;\n\n    // Pick most common currency to keep Y-axis consistent\n    const currencyCounts = new Map<string, number>();\n    for (const s of sales) {\n      const c = s.price!.currency ?? \"STRK\";\n      currencyCounts.set(c, (currencyCounts.get(c) ?? 0) + 1);\n    }\n    const topCurrency = [...currencyCounts.entries()].sort(\n      (a, b) => b[1] - a[1]\n    )[0][0];\n\n    const points = sales\n      .filter((s) => (s.price!.currency ?? \"STRK\") === topCurrency)\n      .map((s) => ({\n        date: new Date(\n          typeof s.timestamp === \"number\" ? s.timestamp * 1000 : s.timestamp\n        ).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" }),\n        price: parsePrice(s.price!.formatted ?? \"\"),\n      }))\n      .reverse(); // oldest → newest left to right\n\n    if (points.length < 2) return null;\n    return { currency: topCurrency, points };\n  }, [history]);\n\n  if (!chartData) {\n    return null;\n  }\n\n  return (\n    <div className=\"rounded-xl bg-card/50 p-4 space-y-2\">\n      <p className=\"text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n        Price history · {chartData.currency}\n      </p>\n      <ResponsiveContainer width=\"100%\" height={160}>\n        <LineChart\n          data={chartData.points}\n          margin={{ top: 4, right: 8, bottom: 0, left: 0 }}\n        >\n          <CartesianGrid\n            strokeDasharray=\"3 3\"\n            stroke=\"hsl(var(--border))\"\n            opacity={0.5}\n          />\n          <XAxis\n            dataKey=\"date\"\n            tick={{ fontSize: 11, fill: \"hsl(var(--muted-foreground))\" }}\n            axisLine={false}\n            tickLine={false}\n          />\n          <YAxis\n            tick={{ fontSize: 11, fill: \"hsl(var(--muted-foreground))\" }}\n            axisLine={false}\n            tickLine={false}\n            width={48}\n          />\n          <Tooltip\n            contentStyle={{\n              background: \"hsl(var(--background))\",\n              border: \"1px solid hsl(var(--border))\",\n              borderRadius: \"8px\",\n              fontSize: \"12px\",\n              color: \"hsl(var(--foreground))\",\n            }}\n            formatter={(value) => [\n              `${value} ${chartData.currency}`,\n              \"Sale price\",\n            ]}\n          />\n          <Line\n            type=\"monotone\"\n            dataKey=\"price\"\n            stroke=\"hsl(var(--primary))\"\n            strokeWidth={2}\n            dot={{ fill: \"hsl(var(--primary))\", r: 3, strokeWidth: 0 }}\n            activeDot={{ r: 5, fill: \"hsl(var(--primary))\" }}\n          />\n        </LineChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/price-history-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport {\n  LineChart,\n  Line,\n  XAxis,\n  YAxis,\n  Tooltip,\n  ResponsiveContainer,\n  CartesianGrid,\n} from \"recharts\";\nimport type { ApiActivity } from \"@medialane/sdk\";\n\nexport interface PriceHistoryChartProps {\n  history: ApiActivity[];\n}\n\nfunction parsePrice(formatted: string): number {\n  return parseFloat(formatted.replace(/[^0-9.]/g, \"\")) || 0;\n}\n\nexport function PriceHistoryChart({ history }: PriceHistoryChartProps) {\n  const chartData = useMemo(() => {\n    const sales = history.filter(\n      (e) => e.type === \"sale\" && e.price?.formatted != null\n    );\n    if (sales.length < 2) return null;\n\n    const currencyCounts = new Map<string, number>();\n    for (const s of sales) {\n      const c = s.price!.currency ?? \"STRK\";\n      currencyCounts.set(c, (currencyCounts.get(c) ?? 0) + 1);\n    }\n    const topCurrency = [...currencyCounts.entries()].sort(\n      (a, b) => b[1] - a[1]\n    )[0][0];\n\n    const points = sales\n      .filter((s) => (s.price!.currency ?? \"STRK\") === topCurrency)\n      .map((s) => ({\n        date: new Date(\n          typeof s.timestamp === \"number\" ? s.timestamp * 1000 : s.timestamp\n        ).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" }),\n        price: parsePrice(s.price!.formatted ?? \"\"),\n      }))\n      .reverse();\n\n    if (points.length < 2) return null;\n    return { currency: topCurrency, points };\n  }, [history]);\n\n  if (!chartData) {\n    return null;\n  }\n\n  return (\n    <div className=\"rounded-xl bg-card/50 p-4 space-y-2\">\n      <p className=\"text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n        Price history · {chartData.currency}\n      </p>\n      <ResponsiveContainer width=\"100%\" height={160}>\n        <LineChart\n          data={chartData.points}\n          margin={{ top: 4, right: 8, bottom: 0, left: 0 }}\n        >\n          <CartesianGrid\n            strokeDasharray=\"3 3\"\n            stroke=\"hsl(var(--border))\"\n            opacity={0.5}\n          />\n          <XAxis\n            dataKey=\"date\"\n            tick={{ fontSize: 11, fill: \"hsl(var(--muted-foreground))\" }}\n            axisLine={false}\n            tickLine={false}\n          />\n          <YAxis\n            tick={{ fontSize: 11, fill: \"hsl(var(--muted-foreground))\" }}\n            axisLine={false}\n            tickLine={false}\n            width={48}\n          />\n          <Tooltip\n            contentStyle={{\n              background: \"hsl(var(--background))\",\n              border: \"1px solid hsl(var(--border))\",\n              borderRadius: \"8px\",\n              fontSize: \"12px\",\n              color: \"hsl(var(--foreground))\",\n            }}\n            formatter={(value) => [\n              `${value} ${chartData.currency}`,\n              \"Sale price\",\n            ]}\n          />\n          <Line\n            type=\"monotone\"\n            dataKey=\"price\"\n            stroke=\"hsl(var(--primary))\"\n            strokeWidth={2}\n            dot={{ fill: \"hsl(var(--primary))\", r: 3, strokeWidth: 0 }}\n            activeDot={{ r: 5, fill: \"hsl(var(--primary))\" }}\n          />\n        </LineChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/price-history-chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/price-history-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport {\n  LineChart,\n  Line,\n  XAxis,\n  YAxis,\n  Tooltip,\n  ResponsiveContainer,\n  CartesianGrid,\n} from \"recharts\";\nimport type { ApiActivity } from \"@medialane/sdk\";\n\nexport interface PriceHistoryChartProps {\n  history: ApiActivity[];\n}\n\nfunction parsePrice(formatted: string): number {\n  return parseFloat(formatted.replace(/[^0-9.]/g, \"\")) || 0;\n}\n\nexport function PriceHistoryChart({ history }: PriceHistoryChartProps) {\n  const chartData = useMemo(() => {\n    const sales = history.filter(\n      (e) => e.type === \"sale\" && e.price?.formatted != null\n    );\n    if (sales.length < 2) return null;\n\n    // Pick most common currency to keep Y-axis consistent\n    const currencyCounts = new Map<string, number>();\n    for (const s of sales) {\n      const c = s.price!.currency ?? \"STRK\";\n      currencyCounts.set(c, (currencyCounts.get(c) ?? 0) + 1);\n    }\n    const topCurrency = [...currencyCounts.entries()].sort(\n      (a, b) => b[1] - a[1]\n    )[0][0];\n\n    const points = sales\n      .filter((s) => (s.price!.currency ?? \"STRK\") === topCurrency)\n      .map((s) => ({\n        date: new Date(\n          typeof s.timestamp === \"number\" ? s.timestamp * 1000 : s.timestamp\n        ).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" }),\n        price: parsePrice(s.price!.formatted ?? \"\"),\n      }))\n      .reverse(); // oldest → newest left to right\n\n    if (points.length < 2) return null;\n    return { currency: topCurrency, points };\n  }, [history]);\n\n  if (!chartData) {\n    return null;\n  }\n\n  return (\n    <div className=\"rounded-xl bg-card/50 p-4 space-y-2\">\n      <p className=\"text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n        Price history · {chartData.currency}\n      </p>\n      <ResponsiveContainer width=\"100%\" height={160}>\n        <LineChart\n          data={chartData.points}\n          margin={{ top: 4, right: 8, bottom: 0, left: 0 }}\n        >\n          <CartesianGrid\n            strokeDasharray=\"3 3\"\n            stroke=\"hsl(var(--border))\"\n            opacity={0.5}\n          />\n          <XAxis\n            dataKey=\"date\"\n            tick={{ fontSize: 11, fill: \"hsl(var(--muted-foreground))\" }}\n            axisLine={false}\n            tickLine={false}\n          />\n          <YAxis\n            tick={{ fontSize: 11, fill: \"hsl(var(--muted-foreground))\" }}\n            axisLine={false}\n            tickLine={false}\n            width={48}\n          />\n          <Tooltip\n            contentStyle={{\n              background: \"hsl(var(--background))\",\n              border: \"1px solid hsl(var(--border))\",\n              borderRadius: \"8px\",\n              fontSize: \"12px\",\n              color: \"hsl(var(--foreground))\",\n            }}\n            formatter={(value) => [\n              `${value} ${chartData.currency}`,\n              \"Sale price\",\n            ]}\n          />\n          <Line\n            type=\"monotone\"\n            dataKey=\"price\"\n            stroke=\"hsl(var(--primary))\"\n            strokeWidth={2}\n            dot={{ fill: \"hsl(var(--primary))\", r: 3, strokeWidth: 0 }}\n            activeDot={{ r: 5, fill: \"hsl(var(--primary))\" }}\n          />\n        </LineChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n"],"mappings":";AA2DM,SAQI,KARJ;AAzDN,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOP,SAAS,WAAW,WAA2B;AAC7C,SAAO,WAAW,UAAU,QAAQ,YAAY,EAAE,CAAC,KAAK;AAC1D;AAEO,SAAS,kBAAkB,EAAE,QAAQ,GAA2B;AACrE,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,QAAQ;AAAA,MACpB,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,OAAO,aAAa;AAAA,IACpD;AACA,QAAI,MAAM,SAAS,EAAG,QAAO;AAG7B,UAAM,iBAAiB,oBAAI,IAAoB;AAC/C,eAAW,KAAK,OAAO;AACrB,YAAM,IAAI,EAAE,MAAO,YAAY;AAC/B,qBAAe,IAAI,IAAI,eAAe,IAAI,CAAC,KAAK,KAAK,CAAC;AAAA,IACxD;AACA,UAAM,cAAc,CAAC,GAAG,eAAe,QAAQ,CAAC,EAAE;AAAA,MAChD,CAAC,GAAG,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC;AAAA,IACtB,EAAE,CAAC,EAAE,CAAC;AAEN,UAAM,SAAS,MACZ,OAAO,CAAC,OAAO,EAAE,MAAO,YAAY,YAAY,WAAW,EAC3D,IAAI,CAAC,OAAO;AAAA,MACX,MAAM,IAAI;AAAA,QACR,OAAO,EAAE,cAAc,WAAW,EAAE,YAAY,MAAO,EAAE;AAAA,MAC3D,EAAE,mBAAmB,SAAS,EAAE,OAAO,SAAS,KAAK,UAAU,CAAC;AAAA,MAChE,OAAO,WAAW,EAAE,MAAO,aAAa,EAAE;AAAA,IAC5C,EAAE,EACD,QAAQ;AAEX,QAAI,OAAO,SAAS,EAAG,QAAO;AAC9B,WAAO,EAAE,UAAU,aAAa,OAAO;AAAA,EACzC,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,SAAI,WAAU,uCACb;AAAA,yBAAC,OAAE,WAAU,qEAAoE;AAAA;AAAA,MAC9D,UAAU;AAAA,OAC7B;AAAA,IACA,oBAAC,uBAAoB,OAAM,QAAO,QAAQ,KACxC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,UAAU;AAAA,QAChB,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE;AAAA,QAE/C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,iBAAgB;AAAA,cAChB,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAM,EAAE,UAAU,IAAI,MAAM,+BAA+B;AAAA,cAC3D,UAAU;AAAA,cACV,UAAU;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,EAAE,UAAU,IAAI,MAAM,+BAA+B;AAAA,cAC3D,UAAU;AAAA,cACV,UAAU;AAAA,cACV,OAAO;AAAA;AAAA,UACT;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,cAAc;AAAA,gBACZ,YAAY;AAAA,gBACZ,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,UAAU;AAAA,gBACV,OAAO;AAAA,cACT;AAAA,cACA,WAAW,CAAC,UAAU;AAAA,gBACpB,GAAG,KAAK,IAAI,UAAU,QAAQ;AAAA,gBAC9B;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,QAAO;AAAA,cACP,aAAa;AAAA,cACb,KAAK,EAAE,MAAM,uBAAuB,GAAG,GAAG,aAAa,EAAE;AAAA,cACzD,WAAW,EAAE,GAAG,GAAG,MAAM,sBAAsB;AAAA;AAAA,UACjD;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/price-history-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport {\n  LineChart,\n  Line,\n  XAxis,\n  YAxis,\n  Tooltip,\n  ResponsiveContainer,\n  CartesianGrid,\n} from \"recharts\";\nimport type { ApiActivity } from \"@medialane/sdk\";\n\nexport interface PriceHistoryChartProps {\n  history: ApiActivity[];\n}\n\nfunction parsePrice(formatted: string): number {\n  return parseFloat(formatted.replace(/[^0-9.]/g, \"\")) || 0;\n}\n\nexport function PriceHistoryChart({ history }: PriceHistoryChartProps) {\n  const chartData = useMemo(() => {\n    const sales = history.filter(\n      (e) => e.type === \"sale\" && e.price?.formatted != null\n    );\n    if (sales.length < 2) return null;\n\n    const currencyCounts = new Map<string, number>();\n    for (const s of sales) {\n      const c = s.price!.currency ?? \"STRK\";\n      currencyCounts.set(c, (currencyCounts.get(c) ?? 0) + 1);\n    }\n    const topCurrency = [...currencyCounts.entries()].sort(\n      (a, b) => b[1] - a[1]\n    )[0][0];\n\n    const points = sales\n      .filter((s) => (s.price!.currency ?? \"STRK\") === topCurrency)\n      .map((s) => ({\n        date: new Date(\n          typeof s.timestamp === \"number\" ? s.timestamp * 1000 : s.timestamp\n        ).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" }),\n        price: parsePrice(s.price!.formatted ?? \"\"),\n      }))\n      .reverse();\n\n    if (points.length < 2) return null;\n    return { currency: topCurrency, points };\n  }, [history]);\n\n  if (!chartData) {\n    return null;\n  }\n\n  return (\n    <div className=\"rounded-xl bg-card/50 p-4 space-y-2\">\n      <p className=\"text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n        Price history · {chartData.currency}\n      </p>\n      <ResponsiveContainer width=\"100%\" height={160}>\n        <LineChart\n          data={chartData.points}\n          margin={{ top: 4, right: 8, bottom: 0, left: 0 }}\n        >\n          <CartesianGrid\n            strokeDasharray=\"3 3\"\n            stroke=\"hsl(var(--border))\"\n            opacity={0.5}\n          />\n          <XAxis\n            dataKey=\"date\"\n            tick={{ fontSize: 11, fill: \"hsl(var(--muted-foreground))\" }}\n            axisLine={false}\n            tickLine={false}\n          />\n          <YAxis\n            tick={{ fontSize: 11, fill: \"hsl(var(--muted-foreground))\" }}\n            axisLine={false}\n            tickLine={false}\n            width={48}\n          />\n          <Tooltip\n            contentStyle={{\n              background: \"hsl(var(--background))\",\n              border: \"1px solid hsl(var(--border))\",\n              borderRadius: \"8px\",\n              fontSize: \"12px\",\n              color: \"hsl(var(--foreground))\",\n            }}\n            formatter={(value) => [\n              `${value} ${chartData.currency}`,\n              \"Sale price\",\n            ]}\n          />\n          <Line\n            type=\"monotone\"\n            dataKey=\"price\"\n            stroke=\"hsl(var(--primary))\"\n            strokeWidth={2}\n            dot={{ fill: \"hsl(var(--primary))\", r: 3, strokeWidth: 0 }}\n            activeDot={{ r: 5, fill: \"hsl(var(--primary))\" }}\n          />\n        </LineChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/rewards/badge-catalog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/badge-catalog.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn.js\";\nimport { BadgeIcon } from \"./badge-shelf.js\";\n\nexport interface BadgeCatalogBadge {\n  key: string;\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  category: string;\n}\n\nexport interface BadgeCatalogProps {\n  badges: BadgeCatalogBadge[];\n  className?: string;\n}\n\nconst CATEGORY_LABELS: Record<string, string> = {\n  creator: \"Creator\",\n  collector: \"Collector\",\n  community: \"Community\",\n};\n\n/** Full badge catalog, grouped by category — \"what's achievable,\" not\n *  \"what you've done\" (no earned/locked state; that's BadgeShelf's job on\n *  /rewards, which stays exactly as-is for the viewer's own progress).\n *  Groups render in whatever categories are actually present in the data,\n *  not a hardcoded list — new categories show up automatically. */\nexport function BadgeCatalog({ badges, className }: BadgeCatalogProps) {\n  const categories = [...new Set(badges.map((b) => b.category))];\n\n  return (\n    <div className={cn(\"space-y-8\", className)}>\n      {categories.map((cat) => (\n        <div key={cat} className=\"space-y-3\">\n          <p className=\"text-sm font-black uppercase tracking-wide text-foreground/50\">\n            {CATEGORY_LABELS[cat] ?? cat}\n          </p>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            {badges\n              .filter((b) => b.category === cat)\n              .map((badge) => (\n                <div key={badge.key} className=\"flex items-center gap-3 rounded-2xl bg-foreground/[0.04] p-4\">\n                  <span className=\"flex h-10 w-10 items-center justify-center rounded-xl shrink-0 bg-gradient-to-br from-brand-orange to-brand-maeve\">\n                    <BadgeIcon name={badge.icon} color=\"#ffffff\" className=\"h-5 w-5\" />\n                  </span>\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm font-bold\">{badge.name}</p>\n                    <p className=\"text-xs text-foreground/60 truncate\">{badge.description}</p>\n                  </div>\n                </div>\n              ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCU;AAnCV,gBAAmB;AACnB,yBAA0B;AAgB1B,MAAM,kBAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AACb;AAOO,SAAS,aAAa,EAAE,QAAQ,UAAU,GAAsB;AACrE,QAAM,aAAa,CAAC,GAAG,IAAI,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE7D,SACE,4CAAC,SAAI,eAAW,cAAG,aAAa,SAAS,GACtC,qBAAW,IAAI,CAAC,QACf,6CAAC,SAAc,WAAU,aACvB;AAAA,gDAAC,OAAE,WAAU,iEACV,0BAAgB,GAAG,KAAK,KAC3B;AAAA,IACA,4CAAC,SAAI,WAAU,yCACZ,iBACE,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,EAChC,IAAI,CAAC,UACJ,6CAAC,SAAoB,WAAU,gEAC7B;AAAA,kDAAC,UAAK,WAAU,qHACd,sDAAC,gCAAU,MAAM,MAAM,MAAM,OAAM,WAAU,WAAU,WAAU,GACnE;AAAA,MACA,6CAAC,SAAI,WAAU,WACb;AAAA,oDAAC,OAAE,WAAU,qBAAqB,gBAAM,MAAK;AAAA,QAC7C,4CAAC,OAAE,WAAU,uCAAuC,gBAAM,aAAY;AAAA,SACxE;AAAA,SAPQ,MAAM,GAQhB,CACD,GACL;AAAA,OAlBQ,GAmBV,CACD,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/badge-catalog.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn.js\";\nimport { BadgeIcon } from \"./badge-shelf.js\";\n\nexport interface BadgeCatalogBadge {\n  key: string;\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  category: string;\n}\n\nexport interface BadgeCatalogProps {\n  badges: BadgeCatalogBadge[];\n  className?: string;\n}\n\nconst CATEGORY_LABELS: Record<string, string> = {\n  creator: \"Creator\",\n  collector: \"Collector\",\n  community: \"Community\",\n};\n\nexport function BadgeCatalog({ badges, className }: BadgeCatalogProps) {\n  const categories = [...new Set(badges.map((b) => b.category))];\n\n  return (\n    <div className={cn(\"space-y-8\", className)}>\n      {categories.map((cat) => (\n        <div key={cat} className=\"space-y-3\">\n          <p className=\"text-sm font-black uppercase tracking-wide text-foreground/50\">\n            {CATEGORY_LABELS[cat] ?? cat}\n          </p>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            {badges\n              .filter((b) => b.category === cat)\n              .map((badge) => (\n                <div key={badge.key} className=\"flex items-center gap-3 rounded-2xl bg-foreground/[0.04] p-4\">\n                  <span className=\"flex h-10 w-10 items-center justify-center rounded-xl shrink-0 bg-gradient-to-br from-brand-orange to-brand-maeve\">\n                    <BadgeIcon name={badge.icon} color=\"#ffffff\" className=\"h-5 w-5\" />\n                  </span>\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm font-bold\">{badge.name}</p>\n                    <p className=\"text-xs text-foreground/60 truncate\">{badge.description}</p>\n                  </div>\n                </div>\n              ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BU;AA9BV,gBAAmB;AACnB,yBAA0B;AAgB1B,MAAM,kBAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AACb;AAEO,SAAS,aAAa,EAAE,QAAQ,UAAU,GAAsB;AACrE,QAAM,aAAa,CAAC,GAAG,IAAI,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE7D,SACE,4CAAC,SAAI,eAAW,cAAG,aAAa,SAAS,GACtC,qBAAW,IAAI,CAAC,QACf,6CAAC,SAAc,WAAU,aACvB;AAAA,gDAAC,OAAE,WAAU,iEACV,0BAAgB,GAAG,KAAK,KAC3B;AAAA,IACA,4CAAC,SAAI,WAAU,yCACZ,iBACE,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,EAChC,IAAI,CAAC,UACJ,6CAAC,SAAoB,WAAU,gEAC7B;AAAA,kDAAC,UAAK,WAAU,qHACd,sDAAC,gCAAU,MAAM,MAAM,MAAM,OAAM,WAAU,WAAU,WAAU,GACnE;AAAA,MACA,6CAAC,SAAI,WAAU,WACb;AAAA,oDAAC,OAAE,WAAU,qBAAqB,gBAAM,MAAK;AAAA,QAC7C,4CAAC,OAAE,WAAU,uCAAuC,gBAAM,aAAY;AAAA,SACxE;AAAA,SAPQ,MAAM,GAQhB,CACD,GACL;AAAA,OAlBQ,GAmBV,CACD,GACH;AAEJ;","names":[]}

package/dist/components/rewards/badge-catalog.d.cts

@@ -12,11 +12,6 @@ interface BadgeCatalogProps {
     badges: BadgeCatalogBadge[];
     className?: string;
 }
-/** Full badge catalog, grouped by category — "what's achievable," not
- *  "what you've done" (no earned/locked state; that's BadgeShelf's job on
- *  /rewards, which stays exactly as-is for the viewer's own progress).
- *  Groups render in whatever categories are actually present in the data,
- *  not a hardcoded list — new categories show up automatically. */
 declare function BadgeCatalog({ badges, className }: BadgeCatalogProps): react_jsx_runtime.JSX.Element;
 
 export { BadgeCatalog, type BadgeCatalogBadge, type BadgeCatalogProps };

package/dist/components/rewards/badge-catalog.d.ts

@@ -12,11 +12,6 @@ interface BadgeCatalogProps {
     badges: BadgeCatalogBadge[];
     className?: string;
 }
-/** Full badge catalog, grouped by category — "what's achievable," not
- *  "what you've done" (no earned/locked state; that's BadgeShelf's job on
- *  /rewards, which stays exactly as-is for the viewer's own progress).
- *  Groups render in whatever categories are actually present in the data,
- *  not a hardcoded list — new categories show up automatically. */
 declare function BadgeCatalog({ badges, className }: BadgeCatalogProps): react_jsx_runtime.JSX.Element;
 
 export { BadgeCatalog, type BadgeCatalogBadge, type BadgeCatalogProps };

package/dist/components/rewards/badge-catalog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/badge-catalog.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn.js\";\nimport { BadgeIcon } from \"./badge-shelf.js\";\n\nexport interface BadgeCatalogBadge {\n  key: string;\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  category: string;\n}\n\nexport interface BadgeCatalogProps {\n  badges: BadgeCatalogBadge[];\n  className?: string;\n}\n\nconst CATEGORY_LABELS: Record<string, string> = {\n  creator: \"Creator\",\n  collector: \"Collector\",\n  community: \"Community\",\n};\n\n/** Full badge catalog, grouped by category — \"what's achievable,\" not\n *  \"what you've done\" (no earned/locked state; that's BadgeShelf's job on\n *  /rewards, which stays exactly as-is for the viewer's own progress).\n *  Groups render in whatever categories are actually present in the data,\n *  not a hardcoded list — new categories show up automatically. */\nexport function BadgeCatalog({ badges, className }: BadgeCatalogProps) {\n  const categories = [...new Set(badges.map((b) => b.category))];\n\n  return (\n    <div className={cn(\"space-y-8\", className)}>\n      {categories.map((cat) => (\n        <div key={cat} className=\"space-y-3\">\n          <p className=\"text-sm font-black uppercase tracking-wide text-foreground/50\">\n            {CATEGORY_LABELS[cat] ?? cat}\n          </p>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            {badges\n              .filter((b) => b.category === cat)\n              .map((badge) => (\n                <div key={badge.key} className=\"flex items-center gap-3 rounded-2xl bg-foreground/[0.04] p-4\">\n                  <span className=\"flex h-10 w-10 items-center justify-center rounded-xl shrink-0 bg-gradient-to-br from-brand-orange to-brand-maeve\">\n                    <BadgeIcon name={badge.icon} color=\"#ffffff\" className=\"h-5 w-5\" />\n                  </span>\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm font-bold\">{badge.name}</p>\n                    <p className=\"text-xs text-foreground/60 truncate\">{badge.description}</p>\n                  </div>\n                </div>\n              ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"AAmCU,cAWQ,YAXR;AAnCV,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAgB1B,MAAM,kBAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AACb;AAOO,SAAS,aAAa,EAAE,QAAQ,UAAU,GAAsB;AACrE,QAAM,aAAa,CAAC,GAAG,IAAI,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE7D,SACE,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC,qBAAW,IAAI,CAAC,QACf,qBAAC,SAAc,WAAU,aACvB;AAAA,wBAAC,OAAE,WAAU,iEACV,0BAAgB,GAAG,KAAK,KAC3B;AAAA,IACA,oBAAC,SAAI,WAAU,yCACZ,iBACE,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,EAChC,IAAI,CAAC,UACJ,qBAAC,SAAoB,WAAU,gEAC7B;AAAA,0BAAC,UAAK,WAAU,qHACd,8BAAC,aAAU,MAAM,MAAM,MAAM,OAAM,WAAU,WAAU,WAAU,GACnE;AAAA,MACA,qBAAC,SAAI,WAAU,WACb;AAAA,4BAAC,OAAE,WAAU,qBAAqB,gBAAM,MAAK;AAAA,QAC7C,oBAAC,OAAE,WAAU,uCAAuC,gBAAM,aAAY;AAAA,SACxE;AAAA,SAPQ,MAAM,GAQhB,CACD,GACL;AAAA,OAlBQ,GAmBV,CACD,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/badge-catalog.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn.js\";\nimport { BadgeIcon } from \"./badge-shelf.js\";\n\nexport interface BadgeCatalogBadge {\n  key: string;\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  category: string;\n}\n\nexport interface BadgeCatalogProps {\n  badges: BadgeCatalogBadge[];\n  className?: string;\n}\n\nconst CATEGORY_LABELS: Record<string, string> = {\n  creator: \"Creator\",\n  collector: \"Collector\",\n  community: \"Community\",\n};\n\nexport function BadgeCatalog({ badges, className }: BadgeCatalogProps) {\n  const categories = [...new Set(badges.map((b) => b.category))];\n\n  return (\n    <div className={cn(\"space-y-8\", className)}>\n      {categories.map((cat) => (\n        <div key={cat} className=\"space-y-3\">\n          <p className=\"text-sm font-black uppercase tracking-wide text-foreground/50\">\n            {CATEGORY_LABELS[cat] ?? cat}\n          </p>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            {badges\n              .filter((b) => b.category === cat)\n              .map((badge) => (\n                <div key={badge.key} className=\"flex items-center gap-3 rounded-2xl bg-foreground/[0.04] p-4\">\n                  <span className=\"flex h-10 w-10 items-center justify-center rounded-xl shrink-0 bg-gradient-to-br from-brand-orange to-brand-maeve\">\n                    <BadgeIcon name={badge.icon} color=\"#ffffff\" className=\"h-5 w-5\" />\n                  </span>\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm font-bold\">{badge.name}</p>\n                    <p className=\"text-xs text-foreground/60 truncate\">{badge.description}</p>\n                  </div>\n                </div>\n              ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"AA8BU,cAWQ,YAXR;AA9BV,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAgB1B,MAAM,kBAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AACb;AAEO,SAAS,aAAa,EAAE,QAAQ,UAAU,GAAsB;AACrE,QAAM,aAAa,CAAC,GAAG,IAAI,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE7D,SACE,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC,qBAAW,IAAI,CAAC,QACf,qBAAC,SAAc,WAAU,aACvB;AAAA,wBAAC,OAAE,WAAU,iEACV,0BAAgB,GAAG,KAAK,KAC3B;AAAA,IACA,oBAAC,SAAI,WAAU,yCACZ,iBACE,OAAO,CAAC,MAAM,EAAE,aAAa,GAAG,EAChC,IAAI,CAAC,UACJ,qBAAC,SAAoB,WAAU,gEAC7B;AAAA,0BAAC,UAAK,WAAU,qHACd,8BAAC,aAAU,MAAM,MAAM,MAAM,OAAM,WAAU,WAAU,WAAU,GACnE;AAAA,MACA,qBAAC,SAAI,WAAU,WACb;AAAA,4BAAC,OAAE,WAAU,qBAAqB,gBAAM,MAAK;AAAA,QAC7C,oBAAC,OAAE,WAAU,uCAAuC,gBAAM,aAAY;AAAA,SACxE;AAAA,SAPQ,MAAM,GAQhB,CACD,GACL;AAAA,OAlBQ,GAmBV,CACD,GACH;AAEJ;","names":[]}

package/dist/components/rewards/badge-shelf.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/badge-shelf.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { LucideProps } from \"lucide-react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface BadgeShelfBadge {\n  key: string;\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  category: string;\n}\n\nexport interface BadgeShelfProps {\n  /** The badges to render — the earned set, or the full catalog with `earnedKeys`. */\n  badges: BadgeShelfBadge[];\n  /** When set, badges outside this set render locked (grayscale, reduced opacity). */\n  earnedKeys?: string[];\n  /** Render locked badges too (requires `earnedKeys`); default hides them. */\n  showLocked?: boolean;\n  className?: string;\n}\n\n// Lazily resolve lucide icons by name at runtime (icon names come from the API).\nconst iconCache = new Map<string, React.ComponentType<LucideProps>>();\n\nexport function BadgeIcon({ name, color, className }: { name: string; color: string; className?: string }) {\n  const [Icon, setIcon] = React.useState<React.ComponentType<LucideProps> | null>(\n    () => iconCache.get(name) ?? null\n  );\n\n  React.useEffect(() => {\n    if (iconCache.has(name)) {\n      setIcon(() => iconCache.get(name)!);\n      return;\n    }\n    import(\"lucide-react\").then((mod) => {\n      const C = (mod as Record<string, unknown>)[name] as React.ComponentType<LucideProps> | undefined;\n      if (C) {\n        iconCache.set(name, C);\n        setIcon(() => C);\n      }\n    });\n  }, [name]);\n\n  if (!Icon) return <span className={cn(\"rounded-full\", className)} style={{ backgroundColor: color }} />;\n  return <Icon className={className} style={{ color }} />;\n}\n\n/** Badge chips with native tooltips. Earned badges render in their color;\n *  locked ones (present in `badges` but not `earnedKeys`) render muted. */\nexport function BadgeShelf({ badges, earnedKeys, showLocked = false, className }: BadgeShelfProps) {\n  const earned = earnedKeys ? new Set(earnedKeys) : null;\n  const visible = badges.filter((b) => showLocked || !earned || earned.has(b.key));\n  if (visible.length === 0) return null;\n\n  return (\n    <div className={cn(\"flex flex-wrap gap-2\", className)}>\n      {visible.map((badge) => {\n        const isLocked = earned ? !earned.has(badge.key) : false;\n        return (\n          <div\n            key={badge.key}\n            title={isLocked ? `${badge.description} — keep going to earn this` : badge.description}\n            className={cn(\n              \"flex h-7 select-none items-center gap-1.5 rounded-full border px-2.5\",\n              isLocked && \"opacity-45 grayscale\"\n            )}\n            style={{\n              borderColor: `${badge.color}60`,\n              backgroundColor: `${badge.color}14`,\n            }}\n          >\n            <BadgeIcon name={badge.icon} color={badge.color} className=\"h-3.5 w-3.5 shrink-0\" />\n            <span className=\"text-xs font-semibold\" style={{ color: badge.color }}>\n              {badge.name}\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CoB;AA7CpB,mBAAkB;AAElB,gBAAmB;AAsBnB,MAAM,YAAY,oBAAI,IAA8C;AAE7D,SAAS,UAAU,EAAE,MAAM,OAAO,UAAU,GAAwD;AACzG,QAAM,CAAC,MAAM,OAAO,IAAI,aAAAA,QAAM;AAAA,IAC5B,MAAM,UAAU,IAAI,IAAI,KAAK;AAAA,EAC/B;AAEA,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,IAAI,IAAI,GAAG;AACvB,cAAQ,MAAM,UAAU,IAAI,IAAI,CAAE;AAClC;AAAA,IACF;AACA,WAAO,cAAc,EAAE,KAAK,CAAC,QAAQ;AACnC,YAAM,IAAK,IAAgC,IAAI;AAC/C,UAAI,GAAG;AACL,kBAAU,IAAI,MAAM,CAAC;AACrB,gBAAQ,MAAM,CAAC;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO,4CAAC,UAAK,eAAW,cAAG,gBAAgB,SAAS,GAAG,OAAO,EAAE,iBAAiB,MAAM,GAAG;AACrG,SAAO,4CAAC,QAAK,WAAsB,OAAO,EAAE,MAAM,GAAG;AACvD;AAIO,SAAS,WAAW,EAAE,QAAQ,YAAY,aAAa,OAAO,UAAU,GAAoB;AACjG,QAAM,SAAS,aAAa,IAAI,IAAI,UAAU,IAAI;AAClD,QAAM,UAAU,OAAO,OAAO,CAAC,MAAM,cAAc,CAAC,UAAU,OAAO,IAAI,EAAE,GAAG,CAAC;AAC/E,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE,4CAAC,SAAI,eAAW,cAAG,wBAAwB,SAAS,GACjD,kBAAQ,IAAI,CAAC,UAAU;AACtB,UAAM,WAAW,SAAS,CAAC,OAAO,IAAI,MAAM,GAAG,IAAI;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,WAAW,GAAG,MAAM,WAAW,oCAA+B,MAAM;AAAA,QAC3E,eAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QACA,OAAO;AAAA,UACL,aAAa,GAAG,MAAM,KAAK;AAAA,UAC3B,iBAAiB,GAAG,MAAM,KAAK;AAAA,QACjC;AAAA,QAEA;AAAA,sDAAC,aAAU,MAAM,MAAM,MAAM,OAAO,MAAM,OAAO,WAAU,wBAAuB;AAAA,UAClF,4CAAC,UAAK,WAAU,yBAAwB,OAAO,EAAE,OAAO,MAAM,MAAM,GACjE,gBAAM,MACT;AAAA;AAAA;AAAA,MAdK,MAAM;AAAA,IAeb;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":["React"]}
+{"version":3,"sources":["../../../src/components/rewards/badge-shelf.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { LucideProps } from \"lucide-react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface BadgeShelfBadge {\n  key: string;\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  category: string;\n}\n\nexport interface BadgeShelfProps {\n\n  badges: BadgeShelfBadge[];\n\n  earnedKeys?: string[];\n\n  showLocked?: boolean;\n  className?: string;\n}\n\nconst iconCache = new Map<string, React.ComponentType<LucideProps>>();\n\nexport function BadgeIcon({ name, color, className }: { name: string; color: string; className?: string }) {\n  const [Icon, setIcon] = React.useState<React.ComponentType<LucideProps> | null>(\n    () => iconCache.get(name) ?? null\n  );\n\n  React.useEffect(() => {\n    if (iconCache.has(name)) {\n      setIcon(() => iconCache.get(name)!);\n      return;\n    }\n    import(\"lucide-react\").then((mod) => {\n      const C = (mod as Record<string, unknown>)[name] as React.ComponentType<LucideProps> | undefined;\n      if (C) {\n        iconCache.set(name, C);\n        setIcon(() => C);\n      }\n    });\n  }, [name]);\n\n  if (!Icon) return <span className={cn(\"rounded-full\", className)} style={{ backgroundColor: color }} />;\n  return <Icon className={className} style={{ color }} />;\n}\n\nexport function BadgeShelf({ badges, earnedKeys, showLocked = false, className }: BadgeShelfProps) {\n  const earned = earnedKeys ? new Set(earnedKeys) : null;\n  const visible = badges.filter((b) => showLocked || !earned || earned.has(b.key));\n  if (visible.length === 0) return null;\n\n  return (\n    <div className={cn(\"flex flex-wrap gap-2\", className)}>\n      {visible.map((badge) => {\n        const isLocked = earned ? !earned.has(badge.key) : false;\n        return (\n          <div\n            key={badge.key}\n            title={isLocked ? `${badge.description} — keep going to earn this` : badge.description}\n            className={cn(\n              \"flex h-7 select-none items-center gap-1.5 rounded-full border px-2.5\",\n              isLocked && \"opacity-45 grayscale\"\n            )}\n            style={{\n              borderColor: `${badge.color}60`,\n              backgroundColor: `${badge.color}14`,\n            }}\n          >\n            <BadgeIcon name={badge.icon} color={badge.color} className=\"h-3.5 w-3.5 shrink-0\" />\n            <span className=\"text-xs font-semibold\" style={{ color: badge.color }}>\n              {badge.name}\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CoB;AA5CpB,mBAAkB;AAElB,gBAAmB;AAqBnB,MAAM,YAAY,oBAAI,IAA8C;AAE7D,SAAS,UAAU,EAAE,MAAM,OAAO,UAAU,GAAwD;AACzG,QAAM,CAAC,MAAM,OAAO,IAAI,aAAAA,QAAM;AAAA,IAC5B,MAAM,UAAU,IAAI,IAAI,KAAK;AAAA,EAC/B;AAEA,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,IAAI,IAAI,GAAG;AACvB,cAAQ,MAAM,UAAU,IAAI,IAAI,CAAE;AAClC;AAAA,IACF;AACA,WAAO,cAAc,EAAE,KAAK,CAAC,QAAQ;AACnC,YAAM,IAAK,IAAgC,IAAI;AAC/C,UAAI,GAAG;AACL,kBAAU,IAAI,MAAM,CAAC;AACrB,gBAAQ,MAAM,CAAC;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO,4CAAC,UAAK,eAAW,cAAG,gBAAgB,SAAS,GAAG,OAAO,EAAE,iBAAiB,MAAM,GAAG;AACrG,SAAO,4CAAC,QAAK,WAAsB,OAAO,EAAE,MAAM,GAAG;AACvD;AAEO,SAAS,WAAW,EAAE,QAAQ,YAAY,aAAa,OAAO,UAAU,GAAoB;AACjG,QAAM,SAAS,aAAa,IAAI,IAAI,UAAU,IAAI;AAClD,QAAM,UAAU,OAAO,OAAO,CAAC,MAAM,cAAc,CAAC,UAAU,OAAO,IAAI,EAAE,GAAG,CAAC;AAC/E,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE,4CAAC,SAAI,eAAW,cAAG,wBAAwB,SAAS,GACjD,kBAAQ,IAAI,CAAC,UAAU;AACtB,UAAM,WAAW,SAAS,CAAC,OAAO,IAAI,MAAM,GAAG,IAAI;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,WAAW,GAAG,MAAM,WAAW,oCAA+B,MAAM;AAAA,QAC3E,eAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QACA,OAAO;AAAA,UACL,aAAa,GAAG,MAAM,KAAK;AAAA,UAC3B,iBAAiB,GAAG,MAAM,KAAK;AAAA,QACjC;AAAA,QAEA;AAAA,sDAAC,aAAU,MAAM,MAAM,MAAM,OAAO,MAAM,OAAO,WAAU,wBAAuB;AAAA,UAClF,4CAAC,UAAK,WAAU,yBAAwB,OAAO,EAAE,OAAO,MAAM,MAAM,GACjE,gBAAM,MACT;AAAA;AAAA;AAAA,MAdK,MAAM;AAAA,IAeb;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":["React"]}

package/dist/components/rewards/badge-shelf.d.cts

@@ -9,11 +9,8 @@ interface BadgeShelfBadge {
     category: string;
 }
 interface BadgeShelfProps {
-    /** The badges to render — the earned set, or the full catalog with `earnedKeys`. */
     badges: BadgeShelfBadge[];
-    /** When set, badges outside this set render locked (grayscale, reduced opacity). */
     earnedKeys?: string[];
-    /** Render locked badges too (requires `earnedKeys`); default hides them. */
     showLocked?: boolean;
     className?: string;
 }
@@ -22,8 +19,6 @@ declare function BadgeIcon({ name, color, className }: {
     color: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-/** Badge chips with native tooltips. Earned badges render in their color;
- *  locked ones (present in `badges` but not `earnedKeys`) render muted. */
 declare function BadgeShelf({ badges, earnedKeys, showLocked, className }: BadgeShelfProps): react_jsx_runtime.JSX.Element | null;
 
 export { BadgeIcon, BadgeShelf, type BadgeShelfBadge, type BadgeShelfProps };

package/dist/components/rewards/badge-shelf.d.ts

@@ -9,11 +9,8 @@ interface BadgeShelfBadge {
     category: string;
 }
 interface BadgeShelfProps {
-    /** The badges to render — the earned set, or the full catalog with `earnedKeys`. */
     badges: BadgeShelfBadge[];
-    /** When set, badges outside this set render locked (grayscale, reduced opacity). */
     earnedKeys?: string[];
-    /** Render locked badges too (requires `earnedKeys`); default hides them. */
     showLocked?: boolean;
     className?: string;
 }
@@ -22,8 +19,6 @@ declare function BadgeIcon({ name, color, className }: {
     color: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-/** Badge chips with native tooltips. Earned badges render in their color;
- *  locked ones (present in `badges` but not `earnedKeys`) render muted. */
 declare function BadgeShelf({ badges, earnedKeys, showLocked, className }: BadgeShelfProps): react_jsx_runtime.JSX.Element | null;
 
 export { BadgeIcon, BadgeShelf, type BadgeShelfBadge, type BadgeShelfProps };

package/dist/components/rewards/badge-shelf.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/badge-shelf.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { LucideProps } from \"lucide-react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface BadgeShelfBadge {\n  key: string;\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  category: string;\n}\n\nexport interface BadgeShelfProps {\n  /** The badges to render — the earned set, or the full catalog with `earnedKeys`. */\n  badges: BadgeShelfBadge[];\n  /** When set, badges outside this set render locked (grayscale, reduced opacity). */\n  earnedKeys?: string[];\n  /** Render locked badges too (requires `earnedKeys`); default hides them. */\n  showLocked?: boolean;\n  className?: string;\n}\n\n// Lazily resolve lucide icons by name at runtime (icon names come from the API).\nconst iconCache = new Map<string, React.ComponentType<LucideProps>>();\n\nexport function BadgeIcon({ name, color, className }: { name: string; color: string; className?: string }) {\n  const [Icon, setIcon] = React.useState<React.ComponentType<LucideProps> | null>(\n    () => iconCache.get(name) ?? null\n  );\n\n  React.useEffect(() => {\n    if (iconCache.has(name)) {\n      setIcon(() => iconCache.get(name)!);\n      return;\n    }\n    import(\"lucide-react\").then((mod) => {\n      const C = (mod as Record<string, unknown>)[name] as React.ComponentType<LucideProps> | undefined;\n      if (C) {\n        iconCache.set(name, C);\n        setIcon(() => C);\n      }\n    });\n  }, [name]);\n\n  if (!Icon) return <span className={cn(\"rounded-full\", className)} style={{ backgroundColor: color }} />;\n  return <Icon className={className} style={{ color }} />;\n}\n\n/** Badge chips with native tooltips. Earned badges render in their color;\n *  locked ones (present in `badges` but not `earnedKeys`) render muted. */\nexport function BadgeShelf({ badges, earnedKeys, showLocked = false, className }: BadgeShelfProps) {\n  const earned = earnedKeys ? new Set(earnedKeys) : null;\n  const visible = badges.filter((b) => showLocked || !earned || earned.has(b.key));\n  if (visible.length === 0) return null;\n\n  return (\n    <div className={cn(\"flex flex-wrap gap-2\", className)}>\n      {visible.map((badge) => {\n        const isLocked = earned ? !earned.has(badge.key) : false;\n        return (\n          <div\n            key={badge.key}\n            title={isLocked ? `${badge.description} — keep going to earn this` : badge.description}\n            className={cn(\n              \"flex h-7 select-none items-center gap-1.5 rounded-full border px-2.5\",\n              isLocked && \"opacity-45 grayscale\"\n            )}\n            style={{\n              borderColor: `${badge.color}60`,\n              backgroundColor: `${badge.color}14`,\n            }}\n          >\n            <BadgeIcon name={badge.icon} color={badge.color} className=\"h-3.5 w-3.5 shrink-0\" />\n            <span className=\"text-xs font-semibold\" style={{ color: badge.color }}>\n              {badge.name}\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA+CoB,cAgBV,YAhBU;AA7CpB,OAAO,WAAW;AAElB,SAAS,UAAU;AAsBnB,MAAM,YAAY,oBAAI,IAA8C;AAE7D,SAAS,UAAU,EAAE,MAAM,OAAO,UAAU,GAAwD;AACzG,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM;AAAA,IAC5B,MAAM,UAAU,IAAI,IAAI,KAAK;AAAA,EAC/B;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,IAAI,IAAI,GAAG;AACvB,cAAQ,MAAM,UAAU,IAAI,IAAI,CAAE;AAClC;AAAA,IACF;AACA,WAAO,cAAc,EAAE,KAAK,CAAC,QAAQ;AACnC,YAAM,IAAK,IAAgC,IAAI;AAC/C,UAAI,GAAG;AACL,kBAAU,IAAI,MAAM,CAAC;AACrB,gBAAQ,MAAM,CAAC;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO,oBAAC,UAAK,WAAW,GAAG,gBAAgB,SAAS,GAAG,OAAO,EAAE,iBAAiB,MAAM,GAAG;AACrG,SAAO,oBAAC,QAAK,WAAsB,OAAO,EAAE,MAAM,GAAG;AACvD;AAIO,SAAS,WAAW,EAAE,QAAQ,YAAY,aAAa,OAAO,UAAU,GAAoB;AACjG,QAAM,SAAS,aAAa,IAAI,IAAI,UAAU,IAAI;AAClD,QAAM,UAAU,OAAO,OAAO,CAAC,MAAM,cAAc,CAAC,UAAU,OAAO,IAAI,EAAE,GAAG,CAAC;AAC/E,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE,oBAAC,SAAI,WAAW,GAAG,wBAAwB,SAAS,GACjD,kBAAQ,IAAI,CAAC,UAAU;AACtB,UAAM,WAAW,SAAS,CAAC,OAAO,IAAI,MAAM,GAAG,IAAI;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,WAAW,GAAG,MAAM,WAAW,oCAA+B,MAAM;AAAA,QAC3E,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QACA,OAAO;AAAA,UACL,aAAa,GAAG,MAAM,KAAK;AAAA,UAC3B,iBAAiB,GAAG,MAAM,KAAK;AAAA,QACjC;AAAA,QAEA;AAAA,8BAAC,aAAU,MAAM,MAAM,MAAM,OAAO,MAAM,OAAO,WAAU,wBAAuB;AAAA,UAClF,oBAAC,UAAK,WAAU,yBAAwB,OAAO,EAAE,OAAO,MAAM,MAAM,GACjE,gBAAM,MACT;AAAA;AAAA;AAAA,MAdK,MAAM;AAAA,IAeb;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/badge-shelf.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { LucideProps } from \"lucide-react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface BadgeShelfBadge {\n  key: string;\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  category: string;\n}\n\nexport interface BadgeShelfProps {\n\n  badges: BadgeShelfBadge[];\n\n  earnedKeys?: string[];\n\n  showLocked?: boolean;\n  className?: string;\n}\n\nconst iconCache = new Map<string, React.ComponentType<LucideProps>>();\n\nexport function BadgeIcon({ name, color, className }: { name: string; color: string; className?: string }) {\n  const [Icon, setIcon] = React.useState<React.ComponentType<LucideProps> | null>(\n    () => iconCache.get(name) ?? null\n  );\n\n  React.useEffect(() => {\n    if (iconCache.has(name)) {\n      setIcon(() => iconCache.get(name)!);\n      return;\n    }\n    import(\"lucide-react\").then((mod) => {\n      const C = (mod as Record<string, unknown>)[name] as React.ComponentType<LucideProps> | undefined;\n      if (C) {\n        iconCache.set(name, C);\n        setIcon(() => C);\n      }\n    });\n  }, [name]);\n\n  if (!Icon) return <span className={cn(\"rounded-full\", className)} style={{ backgroundColor: color }} />;\n  return <Icon className={className} style={{ color }} />;\n}\n\nexport function BadgeShelf({ badges, earnedKeys, showLocked = false, className }: BadgeShelfProps) {\n  const earned = earnedKeys ? new Set(earnedKeys) : null;\n  const visible = badges.filter((b) => showLocked || !earned || earned.has(b.key));\n  if (visible.length === 0) return null;\n\n  return (\n    <div className={cn(\"flex flex-wrap gap-2\", className)}>\n      {visible.map((badge) => {\n        const isLocked = earned ? !earned.has(badge.key) : false;\n        return (\n          <div\n            key={badge.key}\n            title={isLocked ? `${badge.description} — keep going to earn this` : badge.description}\n            className={cn(\n              \"flex h-7 select-none items-center gap-1.5 rounded-full border px-2.5\",\n              isLocked && \"opacity-45 grayscale\"\n            )}\n            style={{\n              borderColor: `${badge.color}60`,\n              backgroundColor: `${badge.color}14`,\n            }}\n          >\n            <BadgeIcon name={badge.icon} color={badge.color} className=\"h-3.5 w-3.5 shrink-0\" />\n            <span className=\"text-xs font-semibold\" style={{ color: badge.color }}>\n              {badge.name}\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA8CoB,cAcV,YAdU;AA5CpB,OAAO,WAAW;AAElB,SAAS,UAAU;AAqBnB,MAAM,YAAY,oBAAI,IAA8C;AAE7D,SAAS,UAAU,EAAE,MAAM,OAAO,UAAU,GAAwD;AACzG,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM;AAAA,IAC5B,MAAM,UAAU,IAAI,IAAI,KAAK;AAAA,EAC/B;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,IAAI,IAAI,GAAG;AACvB,cAAQ,MAAM,UAAU,IAAI,IAAI,CAAE;AAClC;AAAA,IACF;AACA,WAAO,cAAc,EAAE,KAAK,CAAC,QAAQ;AACnC,YAAM,IAAK,IAAgC,IAAI;AAC/C,UAAI,GAAG;AACL,kBAAU,IAAI,MAAM,CAAC;AACrB,gBAAQ,MAAM,CAAC;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO,oBAAC,UAAK,WAAW,GAAG,gBAAgB,SAAS,GAAG,OAAO,EAAE,iBAAiB,MAAM,GAAG;AACrG,SAAO,oBAAC,QAAK,WAAsB,OAAO,EAAE,MAAM,GAAG;AACvD;AAEO,SAAS,WAAW,EAAE,QAAQ,YAAY,aAAa,OAAO,UAAU,GAAoB;AACjG,QAAM,SAAS,aAAa,IAAI,IAAI,UAAU,IAAI;AAClD,QAAM,UAAU,OAAO,OAAO,CAAC,MAAM,cAAc,CAAC,UAAU,OAAO,IAAI,EAAE,GAAG,CAAC;AAC/E,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE,oBAAC,SAAI,WAAW,GAAG,wBAAwB,SAAS,GACjD,kBAAQ,IAAI,CAAC,UAAU;AACtB,UAAM,WAAW,SAAS,CAAC,OAAO,IAAI,MAAM,GAAG,IAAI;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,WAAW,GAAG,MAAM,WAAW,oCAA+B,MAAM;AAAA,QAC3E,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QACA,OAAO;AAAA,UACL,aAAa,GAAG,MAAM,KAAK;AAAA,UAC3B,iBAAiB,GAAG,MAAM,KAAK;AAAA,QACjC;AAAA,QAEA;AAAA,8BAAC,aAAU,MAAM,MAAM,MAAM,OAAO,MAAM,OAAO,WAAU,wBAAuB;AAAA,UAClF,oBAAC,UAAK,WAAU,yBAAwB,OAAO,EAAE,OAAO,MAAM,MAAM,GACjE,gBAAM,MACT;AAAA;AAAA;AAAA,MAdK,MAAM;AAAA,IAeb;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/components/rewards/badge-unlock-toast-content.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/badge-unlock-toast-content.tsx"],"sourcesContent":["import { BadgeIcon } from \"./badge-shelf.js\";\nimport type { BadgeShelfBadge } from \"./badge-shelf.js\";\n\nexport interface BadgeUnlockToastContentProps {\n  badge: BadgeShelfBadge;\n}\n\n/** Toast body for a newly-earned badge: icon, name, description — the\n *  badge equivalent of XpToastContent. */\nexport function BadgeUnlockToastContent({ badge }: BadgeUnlockToastContentProps) {\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <span\n        className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border\"\n        style={{ borderColor: `${badge.color}60`, backgroundColor: `${badge.color}18` }}\n      >\n        <BadgeIcon name={badge.icon} color={badge.color} className=\"h-4 w-4\" />\n      </span>\n      <div className=\"min-w-0\">\n        <p className=\"truncate text-sm font-semibold\">Badge earned · {badge.name}</p>\n        <p className=\"text-xs text-muted-foreground truncate\">{badge.description}</p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBQ;AAhBR,yBAA0B;AASnB,SAAS,wBAAwB,EAAE,MAAM,GAAiC;AAC/E,SACE,6CAAC,SAAI,WAAU,6BACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,aAAa,GAAG,MAAM,KAAK,MAAM,iBAAiB,GAAG,MAAM,KAAK,KAAK;AAAA,QAE9E,sDAAC,gCAAU,MAAM,MAAM,MAAM,OAAO,MAAM,OAAO,WAAU,WAAU;AAAA;AAAA,IACvE;AAAA,IACA,6CAAC,SAAI,WAAU,WACb;AAAA,mDAAC,OAAE,WAAU,kCAAiC;AAAA;AAAA,QAAgB,MAAM;AAAA,SAAK;AAAA,MACzE,4CAAC,OAAE,WAAU,0CAA0C,gBAAM,aAAY;AAAA,OAC3E;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/badge-unlock-toast-content.tsx"],"sourcesContent":["import { BadgeIcon } from \"./badge-shelf.js\";\nimport type { BadgeShelfBadge } from \"./badge-shelf.js\";\n\nexport interface BadgeUnlockToastContentProps {\n  badge: BadgeShelfBadge;\n}\n\nexport function BadgeUnlockToastContent({ badge }: BadgeUnlockToastContentProps) {\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <span\n        className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border\"\n        style={{ borderColor: `${badge.color}60`, backgroundColor: `${badge.color}18` }}\n      >\n        <BadgeIcon name={badge.icon} color={badge.color} className=\"h-4 w-4\" />\n      </span>\n      <div className=\"min-w-0\">\n        <p className=\"truncate text-sm font-semibold\">Badge earned · {badge.name}</p>\n        <p className=\"text-xs text-muted-foreground truncate\">{badge.description}</p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcQ;AAdR,yBAA0B;AAOnB,SAAS,wBAAwB,EAAE,MAAM,GAAiC;AAC/E,SACE,6CAAC,SAAI,WAAU,6BACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,aAAa,GAAG,MAAM,KAAK,MAAM,iBAAiB,GAAG,MAAM,KAAK,KAAK;AAAA,QAE9E,sDAAC,gCAAU,MAAM,MAAM,MAAM,OAAO,MAAM,OAAO,WAAU,WAAU;AAAA;AAAA,IACvE;AAAA,IACA,6CAAC,SAAI,WAAU,WACb;AAAA,mDAAC,OAAE,WAAU,kCAAiC;AAAA;AAAA,QAAgB,MAAM;AAAA,SAAK;AAAA,MACzE,4CAAC,OAAE,WAAU,0CAA0C,gBAAM,aAAY;AAAA,OAC3E;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/rewards/badge-unlock-toast-content.d.cts

@@ -4,8 +4,6 @@ import { BadgeShelfBadge } from './badge-shelf.cjs';
 interface BadgeUnlockToastContentProps {
     badge: BadgeShelfBadge;
 }
-/** Toast body for a newly-earned badge: icon, name, description — the
- *  badge equivalent of XpToastContent. */
 declare function BadgeUnlockToastContent({ badge }: BadgeUnlockToastContentProps): react_jsx_runtime.JSX.Element;
 
 export { BadgeUnlockToastContent, type BadgeUnlockToastContentProps };

package/dist/components/rewards/badge-unlock-toast-content.d.ts

@@ -4,8 +4,6 @@ import { BadgeShelfBadge } from './badge-shelf.js';
 interface BadgeUnlockToastContentProps {
     badge: BadgeShelfBadge;
 }
-/** Toast body for a newly-earned badge: icon, name, description — the
- *  badge equivalent of XpToastContent. */
 declare function BadgeUnlockToastContent({ badge }: BadgeUnlockToastContentProps): react_jsx_runtime.JSX.Element;
 
 export { BadgeUnlockToastContent, type BadgeUnlockToastContentProps };