@medialane/ui 0.98.0 → 0.99.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/leaderboard-table.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { shortenAddress } from \"../../utils/address.js\";\nimport { LevelBadge } from \"./level-badge.js\";\n\nexport interface LeaderboardEntryLike {\n  /** Kept for API compatibility with the backend's ordered response — not\n   *  rendered. This is a scoreboard, not a ranking: no \"#1/#2/#3\", no podium\n   *  colors. Order in the array is still the sort order the caller gets. */\n  rank: number;\n  address: string;\n  publicId?: string | null;\n  totalXp: number;\n  currentLevel: number;\n  currentLevelName: string;\n  badgeColor: string;\n}\n\nexport interface LeaderboardTableProps {\n  entries: LeaderboardEntryLike[];\n  /** The viewer's address — its row gets highlighted. */\n  highlightAddress?: string | null;\n  /** Render the address cell (e.g. a profile link). Defaults to a shortened address. */\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\n/** Scoreboard rows: address, level chip, points. No position number or\n *  podium coloring — this celebrates participation, not competition. */\nexport function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps) {\n  return (\n    <div className={cn(\"overflow-hidden rounded-xl border border-border\", className)}>\n      {entries.map((e) => {\n        const isViewer = highlightAddress != null && e.address === highlightAddress;\n        return (\n          <div\n            key={e.address}\n            className={cn(\n              \"flex items-center gap-3 border-b border-border/60 bg-card px-3 py-2.5 last:border-b-0 sm:px-4\",\n              isViewer && \"bg-primary/10\"\n            )}\n          >\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n              {isViewer && <span className=\"ml-1.5 text-xs text-muted-foreground\">(you)</span>}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" className=\"hidden sm:inline-flex\" />\n            <span className=\"shrink-0 text-sm font-semibold tabular-nums\">{e.totalXp.toLocaleString()} pts</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport interface LeaderboardWidgetProps {\n  entries: LeaderboardEntryLike[];\n  title?: string;\n  /** Link to the full scoreboard (\"/rewards\"). */\n  href?: string;\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\n/** Compact card for homepage/discover rails — same no-ranking scoreboard rows. */\nexport function LeaderboardWidget({ entries, title = \"Community Rewards\", href, renderAddress, className }: LeaderboardWidgetProps) {\n  if (entries.length === 0) return null;\n  return (\n    <section className={cn(\"rounded-xl border border-border bg-card p-4 sm:p-5\", className)}>\n      <div className=\"mb-3 flex items-center justify-between\">\n        <h2 className=\"text-base font-black\">{title}</h2>\n        {href && (\n          <a href={href} className=\"text-xs font-semibold text-muted-foreground active:opacity-70\">\n            View scoreboard →\n          </a>\n        )}\n      </div>\n      <ol className=\"space-y-2.5\">\n        {entries.map((e) => (\n          <li key={e.address} className=\"flex items-center gap-2.5\">\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" />\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CY;AAzCZ,gBAAmB;AACnB,qBAA+B;AAC/B,yBAA2B;AA0BpB,SAAS,iBAAiB,EAAE,SAAS,kBAAkB,eAAe,UAAU,GAA0B;AAC/G,SACE,4CAAC,SAAI,eAAW,cAAG,mDAAmD,SAAS,GAC5E,kBAAQ,IAAI,CAAC,MAAM;AAClB,UAAM,WAAW,oBAAoB,QAAQ,EAAE,YAAY;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,eAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QAEA;AAAA,uDAAC,UAAK,WAAU,+CACb;AAAA,4BAAgB,cAAc,EAAE,OAAO,QAAI,+BAAe,EAAE,OAAO;AAAA,YACnE,YAAY,4CAAC,UAAK,WAAU,wCAAuC,mBAAK;AAAA,aAC3E;AAAA,UACA,4CAAC,iCAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK,WAAU,yBAAwB;AAAA,UACnI,6CAAC,UAAK,WAAU,+CAA+C;AAAA,cAAE,QAAQ,eAAe;AAAA,YAAE;AAAA,aAAI;AAAA;AAAA;AAAA,MAXzF,EAAE;AAAA,IAYT;AAAA,EAEJ,CAAC,GACH;AAEJ;AAYO,SAAS,kBAAkB,EAAE,SAAS,QAAQ,qBAAqB,MAAM,eAAe,UAAU,GAA2B;AAClI,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,6CAAC,aAAQ,eAAW,cAAG,sDAAsD,SAAS,GACpF;AAAA,iDAAC,SAAI,WAAU,0CACb;AAAA,kDAAC,QAAG,WAAU,wBAAwB,iBAAM;AAAA,MAC3C,QACC,4CAAC,OAAE,MAAY,WAAU,iEAAgE,oCAEzF;AAAA,OAEJ;AAAA,IACA,4CAAC,QAAG,WAAU,eACX,kBAAQ,IAAI,CAAC,MACZ,6CAAC,QAAmB,WAAU,6BAC5B;AAAA,kDAAC,UAAK,WAAU,+CACb,0BAAgB,cAAc,EAAE,OAAO,QAAI,+BAAe,EAAE,OAAO,GACtE;AAAA,MACA,4CAAC,iCAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK;AAAA,SAJ1F,EAAE,OAKX,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/leaderboard-table.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { shortenAddress } from \"../../utils/address.js\";\nimport { LevelBadge } from \"./level-badge.js\";\n\nexport interface LeaderboardEntryLike {\n  /** Kept for API compatibility with the backend's ordered response — not\n   *  rendered. This is a scoreboard, not a ranking: no \"#1/#2/#3\", no podium\n   *  colors. Order in the array is still the sort order the caller gets. */\n  rank: number;\n  address: string;\n  publicId?: string | null;\n  totalXp: number;\n  currentLevel: number;\n  currentLevelName: string;\n  badgeColor: string;\n}\n\nexport interface LeaderboardTableProps {\n  entries: LeaderboardEntryLike[];\n  /** The viewer's address — its row gets highlighted. */\n  highlightAddress?: string | null;\n  /** Render the address cell (e.g. a profile link). Defaults to a shortened address. */\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\n/** Scoreboard rows: address, level chip, points. No position number or\n *  podium coloring — this celebrates participation, not competition. */\nexport function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps) {\n  return (\n    <div className={cn(\"overflow-hidden rounded-xl border border-border\", className)}>\n      {entries.map((e) => {\n        const isViewer = highlightAddress != null && e.address === highlightAddress;\n        return (\n          <div\n            key={e.address}\n            className={cn(\n              \"flex items-center gap-3 border-b border-border/60 bg-card px-3 py-2.5 last:border-b-0 sm:px-4\",\n              isViewer && \"bg-primary/10\"\n            )}\n          >\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n              {isViewer && <span className=\"ml-1.5 text-xs text-muted-foreground\">(you)</span>}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" className=\"hidden sm:inline-flex\" />\n            <span className=\"shrink-0 text-sm font-semibold tabular-nums\">\n              {e.totalXp.toLocaleString()}\n              <span className=\"ml-1 text-xs font-normal text-muted-foreground\">XP</span>\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport interface LeaderboardWidgetProps {\n  entries: LeaderboardEntryLike[];\n  title?: string;\n  /** Link to the full scoreboard (\"/rewards\"). */\n  href?: string;\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\n/** Compact card for homepage/discover rails — same no-ranking scoreboard rows. */\nexport function LeaderboardWidget({ entries, title = \"Community Rewards\", href, renderAddress, className }: LeaderboardWidgetProps) {\n  if (entries.length === 0) return null;\n  return (\n    <section className={cn(\"rounded-xl border border-border bg-card p-4 sm:p-5\", className)}>\n      <div className=\"mb-3 flex items-center justify-between\">\n        <h2 className=\"text-base font-black\">{title}</h2>\n        {href && (\n          <a href={href} className=\"text-xs font-semibold text-muted-foreground active:opacity-70\">\n            View scoreboard →\n          </a>\n        )}\n      </div>\n      <ol className=\"space-y-2.5\">\n        {entries.map((e) => (\n          <li key={e.address} className=\"flex items-center gap-2.5\">\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" />\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CY;AAzCZ,gBAAmB;AACnB,qBAA+B;AAC/B,yBAA2B;AA0BpB,SAAS,iBAAiB,EAAE,SAAS,kBAAkB,eAAe,UAAU,GAA0B;AAC/G,SACE,4CAAC,SAAI,eAAW,cAAG,mDAAmD,SAAS,GAC5E,kBAAQ,IAAI,CAAC,MAAM;AAClB,UAAM,WAAW,oBAAoB,QAAQ,EAAE,YAAY;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,eAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QAEA;AAAA,uDAAC,UAAK,WAAU,+CACb;AAAA,4BAAgB,cAAc,EAAE,OAAO,QAAI,+BAAe,EAAE,OAAO;AAAA,YACnE,YAAY,4CAAC,UAAK,WAAU,wCAAuC,mBAAK;AAAA,aAC3E;AAAA,UACA,4CAAC,iCAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK,WAAU,yBAAwB;AAAA,UACnI,6CAAC,UAAK,WAAU,+CACb;AAAA,cAAE,QAAQ,eAAe;AAAA,YAC1B,4CAAC,UAAK,WAAU,kDAAiD,gBAAE;AAAA,aACrE;AAAA;AAAA;AAAA,MAdK,EAAE;AAAA,IAeT;AAAA,EAEJ,CAAC,GACH;AAEJ;AAYO,SAAS,kBAAkB,EAAE,SAAS,QAAQ,qBAAqB,MAAM,eAAe,UAAU,GAA2B;AAClI,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,6CAAC,aAAQ,eAAW,cAAG,sDAAsD,SAAS,GACpF;AAAA,iDAAC,SAAI,WAAU,0CACb;AAAA,kDAAC,QAAG,WAAU,wBAAwB,iBAAM;AAAA,MAC3C,QACC,4CAAC,OAAE,MAAY,WAAU,iEAAgE,oCAEzF;AAAA,OAEJ;AAAA,IACA,4CAAC,QAAG,WAAU,eACX,kBAAQ,IAAI,CAAC,MACZ,6CAAC,QAAmB,WAAU,6BAC5B;AAAA,kDAAC,UAAK,WAAU,+CACb,0BAAgB,cAAc,EAAE,OAAO,QAAI,+BAAe,EAAE,OAAO,GACtE;AAAA,MACA,4CAAC,iCAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK;AAAA,SAJ1F,EAAE,OAKX,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

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

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

package/dist/components/rewards/leaderboard-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/leaderboard-table.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { shortenAddress } from \"../../utils/address.js\";\nimport { LevelBadge } from \"./level-badge.js\";\n\nexport interface LeaderboardEntryLike {\n  /** Kept for API compatibility with the backend's ordered response — not\n   *  rendered. This is a scoreboard, not a ranking: no \"#1/#2/#3\", no podium\n   *  colors. Order in the array is still the sort order the caller gets. */\n  rank: number;\n  address: string;\n  publicId?: string | null;\n  totalXp: number;\n  currentLevel: number;\n  currentLevelName: string;\n  badgeColor: string;\n}\n\nexport interface LeaderboardTableProps {\n  entries: LeaderboardEntryLike[];\n  /** The viewer's address — its row gets highlighted. */\n  highlightAddress?: string | null;\n  /** Render the address cell (e.g. a profile link). Defaults to a shortened address. */\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\n/** Scoreboard rows: address, level chip, points. No position number or\n *  podium coloring — this celebrates participation, not competition. */\nexport function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps) {\n  return (\n    <div className={cn(\"overflow-hidden rounded-xl border border-border\", className)}>\n      {entries.map((e) => {\n        const isViewer = highlightAddress != null && e.address === highlightAddress;\n        return (\n          <div\n            key={e.address}\n            className={cn(\n              \"flex items-center gap-3 border-b border-border/60 bg-card px-3 py-2.5 last:border-b-0 sm:px-4\",\n              isViewer && \"bg-primary/10\"\n            )}\n          >\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n              {isViewer && <span className=\"ml-1.5 text-xs text-muted-foreground\">(you)</span>}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" className=\"hidden sm:inline-flex\" />\n            <span className=\"shrink-0 text-sm font-semibold tabular-nums\">{e.totalXp.toLocaleString()} pts</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport interface LeaderboardWidgetProps {\n  entries: LeaderboardEntryLike[];\n  title?: string;\n  /** Link to the full scoreboard (\"/rewards\"). */\n  href?: string;\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\n/** Compact card for homepage/discover rails — same no-ranking scoreboard rows. */\nexport function LeaderboardWidget({ entries, title = \"Community Rewards\", href, renderAddress, className }: LeaderboardWidgetProps) {\n  if (entries.length === 0) return null;\n  return (\n    <section className={cn(\"rounded-xl border border-border bg-card p-4 sm:p-5\", className)}>\n      <div className=\"mb-3 flex items-center justify-between\">\n        <h2 className=\"text-base font-black\">{title}</h2>\n        {href && (\n          <a href={href} className=\"text-xs font-semibold text-muted-foreground active:opacity-70\">\n            View scoreboard →\n          </a>\n        )}\n      </div>\n      <ol className=\"space-y-2.5\">\n        {entries.map((e) => (\n          <li key={e.address} className=\"flex items-center gap-2.5\">\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" />\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n"],"mappings":"AA0CY,SAEe,KAFf;AAzCZ,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AA0BpB,SAAS,iBAAiB,EAAE,SAAS,kBAAkB,eAAe,UAAU,GAA0B;AAC/G,SACE,oBAAC,SAAI,WAAW,GAAG,mDAAmD,SAAS,GAC5E,kBAAQ,IAAI,CAAC,MAAM;AAClB,UAAM,WAAW,oBAAoB,QAAQ,EAAE,YAAY;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QAEA;AAAA,+BAAC,UAAK,WAAU,+CACb;AAAA,4BAAgB,cAAc,EAAE,OAAO,IAAI,eAAe,EAAE,OAAO;AAAA,YACnE,YAAY,oBAAC,UAAK,WAAU,wCAAuC,mBAAK;AAAA,aAC3E;AAAA,UACA,oBAAC,cAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK,WAAU,yBAAwB;AAAA,UACnI,qBAAC,UAAK,WAAU,+CAA+C;AAAA,cAAE,QAAQ,eAAe;AAAA,YAAE;AAAA,aAAI;AAAA;AAAA;AAAA,MAXzF,EAAE;AAAA,IAYT;AAAA,EAEJ,CAAC,GACH;AAEJ;AAYO,SAAS,kBAAkB,EAAE,SAAS,QAAQ,qBAAqB,MAAM,eAAe,UAAU,GAA2B;AAClI,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,qBAAC,aAAQ,WAAW,GAAG,sDAAsD,SAAS,GACpF;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,0BAAC,QAAG,WAAU,wBAAwB,iBAAM;AAAA,MAC3C,QACC,oBAAC,OAAE,MAAY,WAAU,iEAAgE,oCAEzF;AAAA,OAEJ;AAAA,IACA,oBAAC,QAAG,WAAU,eACX,kBAAQ,IAAI,CAAC,MACZ,qBAAC,QAAmB,WAAU,6BAC5B;AAAA,0BAAC,UAAK,WAAU,+CACb,0BAAgB,cAAc,EAAE,OAAO,IAAI,eAAe,EAAE,OAAO,GACtE;AAAA,MACA,oBAAC,cAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK;AAAA,SAJ1F,EAAE,OAKX,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/leaderboard-table.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { shortenAddress } from \"../../utils/address.js\";\nimport { LevelBadge } from \"./level-badge.js\";\n\nexport interface LeaderboardEntryLike {\n  /** Kept for API compatibility with the backend's ordered response — not\n   *  rendered. This is a scoreboard, not a ranking: no \"#1/#2/#3\", no podium\n   *  colors. Order in the array is still the sort order the caller gets. */\n  rank: number;\n  address: string;\n  publicId?: string | null;\n  totalXp: number;\n  currentLevel: number;\n  currentLevelName: string;\n  badgeColor: string;\n}\n\nexport interface LeaderboardTableProps {\n  entries: LeaderboardEntryLike[];\n  /** The viewer's address — its row gets highlighted. */\n  highlightAddress?: string | null;\n  /** Render the address cell (e.g. a profile link). Defaults to a shortened address. */\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\n/** Scoreboard rows: address, level chip, points. No position number or\n *  podium coloring — this celebrates participation, not competition. */\nexport function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps) {\n  return (\n    <div className={cn(\"overflow-hidden rounded-xl border border-border\", className)}>\n      {entries.map((e) => {\n        const isViewer = highlightAddress != null && e.address === highlightAddress;\n        return (\n          <div\n            key={e.address}\n            className={cn(\n              \"flex items-center gap-3 border-b border-border/60 bg-card px-3 py-2.5 last:border-b-0 sm:px-4\",\n              isViewer && \"bg-primary/10\"\n            )}\n          >\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n              {isViewer && <span className=\"ml-1.5 text-xs text-muted-foreground\">(you)</span>}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" className=\"hidden sm:inline-flex\" />\n            <span className=\"shrink-0 text-sm font-semibold tabular-nums\">\n              {e.totalXp.toLocaleString()}\n              <span className=\"ml-1 text-xs font-normal text-muted-foreground\">XP</span>\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport interface LeaderboardWidgetProps {\n  entries: LeaderboardEntryLike[];\n  title?: string;\n  /** Link to the full scoreboard (\"/rewards\"). */\n  href?: string;\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\n/** Compact card for homepage/discover rails — same no-ranking scoreboard rows. */\nexport function LeaderboardWidget({ entries, title = \"Community Rewards\", href, renderAddress, className }: LeaderboardWidgetProps) {\n  if (entries.length === 0) return null;\n  return (\n    <section className={cn(\"rounded-xl border border-border bg-card p-4 sm:p-5\", className)}>\n      <div className=\"mb-3 flex items-center justify-between\">\n        <h2 className=\"text-base font-black\">{title}</h2>\n        {href && (\n          <a href={href} className=\"text-xs font-semibold text-muted-foreground active:opacity-70\">\n            View scoreboard →\n          </a>\n        )}\n      </div>\n      <ol className=\"space-y-2.5\">\n        {entries.map((e) => (\n          <li key={e.address} className=\"flex items-center gap-2.5\">\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" />\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n"],"mappings":"AA0CY,SAEe,KAFf;AAzCZ,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AA0BpB,SAAS,iBAAiB,EAAE,SAAS,kBAAkB,eAAe,UAAU,GAA0B;AAC/G,SACE,oBAAC,SAAI,WAAW,GAAG,mDAAmD,SAAS,GAC5E,kBAAQ,IAAI,CAAC,MAAM;AAClB,UAAM,WAAW,oBAAoB,QAAQ,EAAE,YAAY;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QAEA;AAAA,+BAAC,UAAK,WAAU,+CACb;AAAA,4BAAgB,cAAc,EAAE,OAAO,IAAI,eAAe,EAAE,OAAO;AAAA,YACnE,YAAY,oBAAC,UAAK,WAAU,wCAAuC,mBAAK;AAAA,aAC3E;AAAA,UACA,oBAAC,cAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK,WAAU,yBAAwB;AAAA,UACnI,qBAAC,UAAK,WAAU,+CACb;AAAA,cAAE,QAAQ,eAAe;AAAA,YAC1B,oBAAC,UAAK,WAAU,kDAAiD,gBAAE;AAAA,aACrE;AAAA;AAAA;AAAA,MAdK,EAAE;AAAA,IAeT;AAAA,EAEJ,CAAC,GACH;AAEJ;AAYO,SAAS,kBAAkB,EAAE,SAAS,QAAQ,qBAAqB,MAAM,eAAe,UAAU,GAA2B;AAClI,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,qBAAC,aAAQ,WAAW,GAAG,sDAAsD,SAAS,GACpF;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,0BAAC,QAAG,WAAU,wBAAwB,iBAAM;AAAA,MAC3C,QACC,oBAAC,OAAE,MAAY,WAAU,iEAAgE,oCAEzF;AAAA,OAEJ;AAAA,IACA,oBAAC,QAAG,WAAU,eACX,kBAAQ,IAAI,CAAC,MACZ,qBAAC,QAAmB,WAAU,6BAC5B;AAAA,0BAAC,UAAK,WAAU,+CACb,0BAAgB,cAAc,EAAE,OAAO,IAAI,eAAe,EAAE,OAAO,GACtE;AAAA,MACA,oBAAC,cAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK;AAAA,SAJ1F,EAAE,OAKX,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/rewards/level-badge.cjs

@@ -37,6 +37,7 @@ function LevelBadge({ level, name, badgeColor, size = "md", className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "span",
     {
+      title: `Level ${level}`,
       className: (0, import_cn.cn)(
         "inline-flex items-center rounded-full border font-semibold tracking-tight whitespace-nowrap",
         sizeClasses[size],
@@ -45,9 +46,6 @@ function LevelBadge({ level, name, badgeColor, size = "md", className }) {
       style: { borderColor: `${badgeColor}60`, backgroundColor: `${badgeColor}18`, color: badgeColor },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)("rounded-full shrink-0", dotSizes[size]), style: { backgroundColor: badgeColor } }),
-        "Lv.",
-        level,
-        " ",
         name
       ]
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/level-badge.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn.js\";\n\nexport interface LevelBadgeProps {\n  level: number;\n  name: string;\n  badgeColor: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\n/** Color-coded level chip (\"Lv.6 Voyager\"). Pure presentation — the consuming\n *  app supplies level data from the rewards API. */\nexport function LevelBadge({ level, name, badgeColor, size = \"md\", className }: LevelBadgeProps) {\n  const sizeClasses = {\n    sm: \"h-5 px-1.5 gap-1 text-[10px]\",\n    md: \"h-6 px-2 gap-1.5 text-xs\",\n    lg: \"h-8 px-3 gap-2 text-sm\",\n  };\n\n  const dotSizes = {\n    sm: \"h-1.5 w-1.5\",\n    md: \"h-2 w-2\",\n    lg: \"h-2.5 w-2.5\",\n  };\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-full border font-semibold tracking-tight whitespace-nowrap\",\n        sizeClasses[size],\n        className\n      )}\n      style={{ borderColor: `${badgeColor}60`, backgroundColor: `${badgeColor}18`, color: badgeColor }}\n    >\n      <span className={cn(\"rounded-full shrink-0\", dotSizes[size])} style={{ backgroundColor: badgeColor }} />\n      Lv.{level} {name}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BI;AA1BJ,gBAAmB;AAYZ,SAAS,WAAW,EAAE,OAAO,MAAM,YAAY,OAAO,MAAM,UAAU,GAAoB;AAC/F,QAAM,cAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,QAAM,WAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,GAAG,UAAU,MAAM,iBAAiB,GAAG,UAAU,MAAM,OAAO,WAAW;AAAA,MAE/F;AAAA,oDAAC,UAAK,eAAW,cAAG,yBAAyB,SAAS,IAAI,CAAC,GAAG,OAAO,EAAE,iBAAiB,WAAW,GAAG;AAAA,QAAE;AAAA,QACpG;AAAA,QAAM;AAAA,QAAE;AAAA;AAAA;AAAA,EACd;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/level-badge.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn.js\";\n\nexport interface LevelBadgeProps {\n  level: number;\n  name: string;\n  badgeColor: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\n/** Color-coded level chip — shows the level's title only (\"Voyager\"), not\n *  the raw number (\"Lv.6 Voyager\" read as UI noise). The level is still\n *  available on hover via the native title tooltip. Pure presentation — the\n *  consuming app supplies level data from the rewards API. */\nexport function LevelBadge({ level, name, badgeColor, size = \"md\", className }: LevelBadgeProps) {\n  const sizeClasses = {\n    sm: \"h-5 px-1.5 gap-1 text-[10px]\",\n    md: \"h-6 px-2 gap-1.5 text-xs\",\n    lg: \"h-8 px-3 gap-2 text-sm\",\n  };\n\n  const dotSizes = {\n    sm: \"h-1.5 w-1.5\",\n    md: \"h-2 w-2\",\n    lg: \"h-2.5 w-2.5\",\n  };\n\n  return (\n    <span\n      title={`Level ${level}`}\n      className={cn(\n        \"inline-flex items-center rounded-full border font-semibold tracking-tight whitespace-nowrap\",\n        sizeClasses[size],\n        className\n      )}\n      style={{ borderColor: `${badgeColor}60`, backgroundColor: `${badgeColor}18`, color: badgeColor }}\n    >\n      <span className={cn(\"rounded-full shrink-0\", dotSizes[size])} style={{ backgroundColor: badgeColor }} />\n      {name}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BI;AA5BJ,gBAAmB;AAcZ,SAAS,WAAW,EAAE,OAAO,MAAM,YAAY,OAAO,MAAM,UAAU,GAAoB;AAC/F,QAAM,cAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,QAAM,WAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS,KAAK;AAAA,MACrB,eAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,GAAG,UAAU,MAAM,iBAAiB,GAAG,UAAU,MAAM,OAAO,WAAW;AAAA,MAE/F;AAAA,oDAAC,UAAK,eAAW,cAAG,yBAAyB,SAAS,IAAI,CAAC,GAAG,OAAO,EAAE,iBAAiB,WAAW,GAAG;AAAA,QACrG;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -7,8 +7,10 @@ interface LevelBadgeProps {
     size?: "sm" | "md" | "lg";
     className?: string;
 }
-/** Color-coded level chip ("Lv.6 Voyager"). Pure presentation — the consuming
- *  app supplies level data from the rewards API. */
+/** Color-coded level chip — shows the level's title only ("Voyager"), not
+ *  the raw number ("Lv.6 Voyager" read as UI noise). The level is still
+ *  available on hover via the native title tooltip. Pure presentation — the
+ *  consuming app supplies level data from the rewards API. */
 declare function LevelBadge({ level, name, badgeColor, size, className }: LevelBadgeProps): react_jsx_runtime.JSX.Element;
 
 export { LevelBadge, type LevelBadgeProps };

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

@@ -7,8 +7,10 @@ interface LevelBadgeProps {
     size?: "sm" | "md" | "lg";
     className?: string;
 }
-/** Color-coded level chip ("Lv.6 Voyager"). Pure presentation — the consuming
- *  app supplies level data from the rewards API. */
+/** Color-coded level chip — shows the level's title only ("Voyager"), not
+ *  the raw number ("Lv.6 Voyager" read as UI noise). The level is still
+ *  available on hover via the native title tooltip. Pure presentation — the
+ *  consuming app supplies level data from the rewards API. */
 declare function LevelBadge({ level, name, badgeColor, size, className }: LevelBadgeProps): react_jsx_runtime.JSX.Element;
 
 export { LevelBadge, type LevelBadgeProps };

package/dist/components/rewards/level-badge.js

@@ -14,6 +14,7 @@ function LevelBadge({ level, name, badgeColor, size = "md", className }) {
   return /* @__PURE__ */ jsxs(
     "span",
     {
+      title: `Level ${level}`,
       className: cn(
         "inline-flex items-center rounded-full border font-semibold tracking-tight whitespace-nowrap",
         sizeClasses[size],
@@ -22,9 +23,6 @@ function LevelBadge({ level, name, badgeColor, size = "md", className }) {
       style: { borderColor: `${badgeColor}60`, backgroundColor: `${badgeColor}18`, color: badgeColor },
       children: [
         /* @__PURE__ */ jsx("span", { className: cn("rounded-full shrink-0", dotSizes[size]), style: { backgroundColor: badgeColor } }),
-        "Lv.",
-        level,
-        " ",
         name
       ]
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/level-badge.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn.js\";\n\nexport interface LevelBadgeProps {\n  level: number;\n  name: string;\n  badgeColor: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\n/** Color-coded level chip (\"Lv.6 Voyager\"). Pure presentation — the consuming\n *  app supplies level data from the rewards API. */\nexport function LevelBadge({ level, name, badgeColor, size = \"md\", className }: LevelBadgeProps) {\n  const sizeClasses = {\n    sm: \"h-5 px-1.5 gap-1 text-[10px]\",\n    md: \"h-6 px-2 gap-1.5 text-xs\",\n    lg: \"h-8 px-3 gap-2 text-sm\",\n  };\n\n  const dotSizes = {\n    sm: \"h-1.5 w-1.5\",\n    md: \"h-2 w-2\",\n    lg: \"h-2.5 w-2.5\",\n  };\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-full border font-semibold tracking-tight whitespace-nowrap\",\n        sizeClasses[size],\n        className\n      )}\n      style={{ borderColor: `${badgeColor}60`, backgroundColor: `${badgeColor}18`, color: badgeColor }}\n    >\n      <span className={cn(\"rounded-full shrink-0\", dotSizes[size])} style={{ backgroundColor: badgeColor }} />\n      Lv.{level} {name}\n    </span>\n  );\n}\n"],"mappings":"AA0BI,SAQE,KARF;AA1BJ,SAAS,UAAU;AAYZ,SAAS,WAAW,EAAE,OAAO,MAAM,YAAY,OAAO,MAAM,UAAU,GAAoB;AAC/F,QAAM,cAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,QAAM,WAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,GAAG,UAAU,MAAM,iBAAiB,GAAG,UAAU,MAAM,OAAO,WAAW;AAAA,MAE/F;AAAA,4BAAC,UAAK,WAAW,GAAG,yBAAyB,SAAS,IAAI,CAAC,GAAG,OAAO,EAAE,iBAAiB,WAAW,GAAG;AAAA,QAAE;AAAA,QACpG;AAAA,QAAM;AAAA,QAAE;AAAA;AAAA;AAAA,EACd;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/level-badge.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn.js\";\n\nexport interface LevelBadgeProps {\n  level: number;\n  name: string;\n  badgeColor: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\n/** Color-coded level chip — shows the level's title only (\"Voyager\"), not\n *  the raw number (\"Lv.6 Voyager\" read as UI noise). The level is still\n *  available on hover via the native title tooltip. Pure presentation — the\n *  consuming app supplies level data from the rewards API. */\nexport function LevelBadge({ level, name, badgeColor, size = \"md\", className }: LevelBadgeProps) {\n  const sizeClasses = {\n    sm: \"h-5 px-1.5 gap-1 text-[10px]\",\n    md: \"h-6 px-2 gap-1.5 text-xs\",\n    lg: \"h-8 px-3 gap-2 text-sm\",\n  };\n\n  const dotSizes = {\n    sm: \"h-1.5 w-1.5\",\n    md: \"h-2 w-2\",\n    lg: \"h-2.5 w-2.5\",\n  };\n\n  return (\n    <span\n      title={`Level ${level}`}\n      className={cn(\n        \"inline-flex items-center rounded-full border font-semibold tracking-tight whitespace-nowrap\",\n        sizeClasses[size],\n        className\n      )}\n      style={{ borderColor: `${badgeColor}60`, backgroundColor: `${badgeColor}18`, color: badgeColor }}\n    >\n      <span className={cn(\"rounded-full shrink-0\", dotSizes[size])} style={{ backgroundColor: badgeColor }} />\n      {name}\n    </span>\n  );\n}\n"],"mappings":"AA4BI,SASE,KATF;AA5BJ,SAAS,UAAU;AAcZ,SAAS,WAAW,EAAE,OAAO,MAAM,YAAY,OAAO,MAAM,UAAU,GAAoB;AAC/F,QAAM,cAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,QAAM,WAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS,KAAK;AAAA,MACrB,WAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,GAAG,UAAU,MAAM,iBAAiB,GAAG,UAAU,MAAM,OAAO,WAAW;AAAA,MAE/F;AAAA,4BAAC,UAAK,WAAW,GAAG,yBAAyB,SAAS,IAAI,CAAC,GAAG,OAAO,EAAE,iBAAiB,WAAW,GAAG;AAAA,QACrG;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/rewards/level-up-celebration.cjs

@@ -0,0 +1,71 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var level_up_celebration_exports = {};
+__export(level_up_celebration_exports, {
+  LevelUpCelebration: () => LevelUpCelebration
+});
+module.exports = __toCommonJS(level_up_celebration_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_level_badge = require("./level-badge.js");
+var import_cn = require("../../utils/cn.js");
+const PARTICLE_COUNT = 14;
+function LevelUpCelebration({ level, name, badgeColor, onDismiss, className }) {
+  (0, import_react.useEffect)(() => {
+    const timer = setTimeout(onDismiss, 3e3);
+    return () => clearTimeout(timer);
+  }, [onDismiss]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: (0, import_cn.cn)(
+        "fixed inset-0 z-[200] flex items-center justify-center bg-background/40 backdrop-blur-sm",
+        className
+      ),
+      onClick: onDismiss,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex flex-col items-center gap-3 animate-in zoom-in-95 fade-in duration-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 -z-10", children: Array.from({ length: PARTICLE_COUNT }).map((_, i) => {
+          const angle = 360 / PARTICLE_COUNT * i;
+          const distance = 60 + i % 3 * 20;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: "absolute left-1/2 top-1/2 h-1.5 w-1.5 rounded-full animate-in fade-in zoom-in duration-700",
+              style: {
+                backgroundColor: badgeColor,
+                transform: `rotate(${angle}deg) translate(${distance}px) rotate(-${angle}deg)`
+              }
+            },
+            i
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-bold uppercase tracking-widest text-muted-foreground", children: "Level up" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_level_badge.LevelBadge, { level, name, badgeColor, size: "lg" })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LevelUpCelebration
+});
+//# sourceMappingURL=level-up-celebration.cjs.map

package/dist/components/rewards/level-up-celebration.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/level-up-celebration.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { LevelBadge } from \"./level-badge.js\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface LevelUpCelebrationProps {\n  level: number;\n  name: string;\n  badgeColor: string;\n  onDismiss: () => void;\n  className?: string;\n}\n\nconst PARTICLE_COUNT = 14;\n\n/** Auto-dismissing celebration burst for a level-up moment. Pure CSS\n *  animation, no dependency — particles are positioned/rotated via inline\n *  style so the same component works without a keyframe-per-particle\n *  stylesheet entry. */\nexport function LevelUpCelebration({ level, name, badgeColor, onDismiss, className }: LevelUpCelebrationProps) {\n  useEffect(() => {\n    const timer = setTimeout(onDismiss, 3000);\n    return () => clearTimeout(timer);\n  }, [onDismiss]);\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\n        \"fixed inset-0 z-[200] flex items-center justify-center bg-background/40 backdrop-blur-sm\",\n        className\n      )}\n      onClick={onDismiss}\n    >\n      <div className=\"relative flex flex-col items-center gap-3 animate-in zoom-in-95 fade-in duration-300\">\n        <div className=\"pointer-events-none absolute inset-0 -z-10\">\n          {Array.from({ length: PARTICLE_COUNT }).map((_, i) => {\n            const angle = (360 / PARTICLE_COUNT) * i;\n            const distance = 60 + (i % 3) * 20;\n            return (\n              <span\n                key={i}\n                className=\"absolute left-1/2 top-1/2 h-1.5 w-1.5 rounded-full animate-in fade-in zoom-in duration-700\"\n                style={{\n                  backgroundColor: badgeColor,\n                  transform: `rotate(${angle}deg) translate(${distance}px) rotate(-${angle}deg)`,\n                }}\n              />\n            );\n          })}\n        </div>\n        <p className=\"text-sm font-bold uppercase tracking-widest text-muted-foreground\">Level up</p>\n        <LevelBadge level={level} name={name} badgeColor={badgeColor} size=\"lg\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCM;AAlCN,mBAA0B;AAC1B,yBAA2B;AAC3B,gBAAmB;AAUnB,MAAM,iBAAiB;AAMhB,SAAS,mBAAmB,EAAE,OAAO,MAAM,YAAY,WAAW,UAAU,GAA4B;AAC7G,8BAAU,MAAM;AACd,UAAM,QAAQ,WAAW,WAAW,GAAI;AACxC,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,SAAS,CAAC;AAEd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MAET,uDAAC,SAAI,WAAU,wFACb;AAAA,oDAAC,SAAI,WAAU,8CACZ,gBAAM,KAAK,EAAE,QAAQ,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM;AACpD,gBAAM,QAAS,MAAM,iBAAkB;AACvC,gBAAM,WAAW,KAAM,IAAI,IAAK;AAChC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,iBAAiB;AAAA,gBACjB,WAAW,UAAU,KAAK,kBAAkB,QAAQ,eAAe,KAAK;AAAA,cAC1E;AAAA;AAAA,YALK;AAAA,UAMP;AAAA,QAEJ,CAAC,GACH;AAAA,QACA,4CAAC,OAAE,WAAU,qEAAoE,sBAAQ;AAAA,QACzF,4CAAC,iCAAW,OAAc,MAAY,YAAwB,MAAK,MAAK;AAAA,SAC1E;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/rewards/level-up-celebration.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LevelUpCelebrationProps {
+    level: number;
+    name: string;
+    badgeColor: string;
+    onDismiss: () => void;
+    className?: string;
+}
+/** Auto-dismissing celebration burst for a level-up moment. Pure CSS
+ *  animation, no dependency — particles are positioned/rotated via inline
+ *  style so the same component works without a keyframe-per-particle
+ *  stylesheet entry. */
+declare function LevelUpCelebration({ level, name, badgeColor, onDismiss, className }: LevelUpCelebrationProps): react_jsx_runtime.JSX.Element;
+
+export { LevelUpCelebration, type LevelUpCelebrationProps };

package/dist/components/rewards/level-up-celebration.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LevelUpCelebrationProps {
+    level: number;
+    name: string;
+    badgeColor: string;
+    onDismiss: () => void;
+    className?: string;
+}
+/** Auto-dismissing celebration burst for a level-up moment. Pure CSS
+ *  animation, no dependency — particles are positioned/rotated via inline
+ *  style so the same component works without a keyframe-per-particle
+ *  stylesheet entry. */
+declare function LevelUpCelebration({ level, name, badgeColor, onDismiss, className }: LevelUpCelebrationProps): react_jsx_runtime.JSX.Element;
+
+export { LevelUpCelebration, type LevelUpCelebrationProps };

package/dist/components/rewards/level-up-celebration.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { LevelBadge } from "./level-badge.js";
+import { cn } from "../../utils/cn.js";
+const PARTICLE_COUNT = 14;
+function LevelUpCelebration({ level, name, badgeColor, onDismiss, className }) {
+  useEffect(() => {
+    const timer = setTimeout(onDismiss, 3e3);
+    return () => clearTimeout(timer);
+  }, [onDismiss]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: cn(
+        "fixed inset-0 z-[200] flex items-center justify-center bg-background/40 backdrop-blur-sm",
+        className
+      ),
+      onClick: onDismiss,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center gap-3 animate-in zoom-in-95 fade-in duration-300", children: [
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 -z-10", children: Array.from({ length: PARTICLE_COUNT }).map((_, i) => {
+          const angle = 360 / PARTICLE_COUNT * i;
+          const distance = 60 + i % 3 * 20;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute left-1/2 top-1/2 h-1.5 w-1.5 rounded-full animate-in fade-in zoom-in duration-700",
+              style: {
+                backgroundColor: badgeColor,
+                transform: `rotate(${angle}deg) translate(${distance}px) rotate(-${angle}deg)`
+              }
+            },
+            i
+          );
+        }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-bold uppercase tracking-widest text-muted-foreground", children: "Level up" }),
+        /* @__PURE__ */ jsx(LevelBadge, { level, name, badgeColor, size: "lg" })
+      ] })
+    }
+  );
+}
+export {
+  LevelUpCelebration
+};
+//# sourceMappingURL=level-up-celebration.js.map

package/dist/components/rewards/level-up-celebration.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/level-up-celebration.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { LevelBadge } from \"./level-badge.js\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface LevelUpCelebrationProps {\n  level: number;\n  name: string;\n  badgeColor: string;\n  onDismiss: () => void;\n  className?: string;\n}\n\nconst PARTICLE_COUNT = 14;\n\n/** Auto-dismissing celebration burst for a level-up moment. Pure CSS\n *  animation, no dependency — particles are positioned/rotated via inline\n *  style so the same component works without a keyframe-per-particle\n *  stylesheet entry. */\nexport function LevelUpCelebration({ level, name, badgeColor, onDismiss, className }: LevelUpCelebrationProps) {\n  useEffect(() => {\n    const timer = setTimeout(onDismiss, 3000);\n    return () => clearTimeout(timer);\n  }, [onDismiss]);\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\n        \"fixed inset-0 z-[200] flex items-center justify-center bg-background/40 backdrop-blur-sm\",\n        className\n      )}\n      onClick={onDismiss}\n    >\n      <div className=\"relative flex flex-col items-center gap-3 animate-in zoom-in-95 fade-in duration-300\">\n        <div className=\"pointer-events-none absolute inset-0 -z-10\">\n          {Array.from({ length: PARTICLE_COUNT }).map((_, i) => {\n            const angle = (360 / PARTICLE_COUNT) * i;\n            const distance = 60 + (i % 3) * 20;\n            return (\n              <span\n                key={i}\n                className=\"absolute left-1/2 top-1/2 h-1.5 w-1.5 rounded-full animate-in fade-in zoom-in duration-700\"\n                style={{\n                  backgroundColor: badgeColor,\n                  transform: `rotate(${angle}deg) translate(${distance}px) rotate(-${angle}deg)`,\n                }}\n              />\n            );\n          })}\n        </div>\n        <p className=\"text-sm font-bold uppercase tracking-widest text-muted-foreground\">Level up</p>\n        <LevelBadge level={level} name={name} badgeColor={badgeColor} size=\"lg\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAoCM,SAMQ,KANR;AAlCN,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAUnB,MAAM,iBAAiB;AAMhB,SAAS,mBAAmB,EAAE,OAAO,MAAM,YAAY,WAAW,UAAU,GAA4B;AAC7G,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,WAAW,GAAI;AACxC,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,SAAS,CAAC;AAEd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MAET,+BAAC,SAAI,WAAU,wFACb;AAAA,4BAAC,SAAI,WAAU,8CACZ,gBAAM,KAAK,EAAE,QAAQ,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM;AACpD,gBAAM,QAAS,MAAM,iBAAkB;AACvC,gBAAM,WAAW,KAAM,IAAI,IAAK;AAChC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,iBAAiB;AAAA,gBACjB,WAAW,UAAU,KAAK,kBAAkB,QAAQ,eAAe,KAAK;AAAA,cAC1E;AAAA;AAAA,YALK;AAAA,UAMP;AAAA,QAEJ,CAAC,GACH;AAAA,QACA,oBAAC,OAAE,WAAU,qEAAoE,sBAAQ;AAAA,QACzF,oBAAC,cAAW,OAAc,MAAY,YAAwB,MAAK,MAAK;AAAA,SAC1E;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/rewards/reward-toast.cjs

@@ -31,11 +31,29 @@ function createRewardToast(getRewardsConfig) {
     configPromise ?? (configPromise = getRewardsConfig());
     return configPromise;
   }
-  return function rewardToast(actionType) {
+  return function rewardToast(actionType, snapshot) {
     loadConfig().then((config) => {
       const action = config.actions.find((a) => a.type === actionType);
       if (!action) return;
-      (0, import_sonner.toast)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_xp_toast_content.XpToastContent, { xp: action.xp, label: action.label }), { duration: 3500 });
+      if (!snapshot) {
+        (0, import_sonner.toast)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_xp_toast_content.XpToastContent, { xp: action.xp, label: action.label }), { duration: 3500 });
+        return;
+      }
+      const level = config.levels.find((l) => l.level === snapshot.currentLevel);
+      const nextLevel = config.levels.find((l) => l.level === snapshot.currentLevel + 1);
+      (0, import_sonner.toast)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_xp_toast_content.XpToastContent,
+          {
+            xp: action.xp,
+            label: action.label,
+            totalXp: snapshot.totalXp,
+            levelXp: level?.xpRequired ?? 0,
+            nextLevelXp: nextLevel?.xpRequired ?? null
+          }
+        ),
+        { duration: 3500 }
+      );
     }).catch(() => {
       configPromise = null;
     });

package/dist/components/rewards/reward-toast.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/reward-toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { toast } from \"sonner\";\nimport { XpToastContent } from \"./xp-toast-content.js\";\nimport type { ApiRewardsConfig } from \"@medialane/sdk\";\n\n/**\n * Optimistic XP feedback after a scoring action. Scores recompute on a\n * schedule, so this shows the action's configured value, never a balance.\n * Fire-and-forget: any failure is silent (rewards UI must never break a flow).\n *\n * Each app supplies its own `getRewardsConfig` (bound to its own\n * `MedialaneClient` singleton) — the caching/toast logic lives here once.\n */\nexport function createRewardToast(getRewardsConfig: () => Promise<ApiRewardsConfig>) {\n  let configPromise: Promise<ApiRewardsConfig> | null = null;\n  function loadConfig() {\n    configPromise ??= getRewardsConfig();\n    return configPromise;\n  }\n\n  return function rewardToast(actionType: string): void {\n    loadConfig()\n      .then((config) => {\n        const action = config.actions.find((a) => a.type === actionType);\n        if (!action) return;\n        toast(<XpToastContent xp={action.xp} label={action.label} />, { duration: 3500 });\n      })\n      .catch(() => {\n        configPromise = null; // retry on the next action\n      });\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Bc;AAxBd,oBAAsB;AACtB,8BAA+B;AAWxB,SAAS,kBAAkB,kBAAmD;AACnF,MAAI,gBAAkD;AACtD,WAAS,aAAa;AACpB,sCAAkB,iBAAiB;AACnC,WAAO;AAAA,EACT;AAEA,SAAO,SAAS,YAAY,YAA0B;AACpD,eAAW,EACR,KAAK,CAAC,WAAW;AAChB,YAAM,SAAS,OAAO,QAAQ,KAAK,CAAC,MAAM,EAAE,SAAS,UAAU;AAC/D,UAAI,CAAC,OAAQ;AACb,+BAAM,4CAAC,0CAAe,IAAI,OAAO,IAAI,OAAO,OAAO,OAAO,GAAI,EAAE,UAAU,KAAK,CAAC;AAAA,IAClF,CAAC,EACA,MAAM,MAAM;AACX,sBAAgB;AAAA,IAClB,CAAC;AAAA,EACL;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/reward-toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { toast } from \"sonner\";\nimport { XpToastContent } from \"./xp-toast-content.js\";\nimport type { ApiRewardsConfig } from \"@medialane/sdk\";\n\nexport interface RewardToastSnapshot {\n  totalXp: number;\n  currentLevel: number;\n}\n\n/**\n * Optimistic XP feedback after a scoring action. Scores recompute on a\n * schedule, so this shows the action's configured value, never a balance.\n * Fire-and-forget: any failure is silent (rewards UI must never break a flow).\n *\n * Each app supplies its own `getRewardsConfig` (bound to its own\n * `MedialaneClient` singleton) — the caching/toast logic lives here once.\n */\nexport function createRewardToast(getRewardsConfig: () => Promise<ApiRewardsConfig>) {\n  let configPromise: Promise<ApiRewardsConfig> | null = null;\n  function loadConfig() {\n    configPromise ??= getRewardsConfig();\n    return configPromise;\n  }\n\n  /**\n   * @param snapshot Optional — when provided, the toast additionally shows\n   * a progress bar toward the next level. Omit to get today's plain toast.\n   */\n  return function rewardToast(actionType: string, snapshot?: RewardToastSnapshot): void {\n    loadConfig()\n      .then((config) => {\n        const action = config.actions.find((a) => a.type === actionType);\n        if (!action) return;\n\n        if (!snapshot) {\n          toast(<XpToastContent xp={action.xp} label={action.label} />, { duration: 3500 });\n          return;\n        }\n\n        const level = config.levels.find((l) => l.level === snapshot.currentLevel);\n        const nextLevel = config.levels.find((l) => l.level === snapshot.currentLevel + 1);\n        toast(\n          <XpToastContent\n            xp={action.xp}\n            label={action.label}\n            totalXp={snapshot.totalXp}\n            levelXp={level?.xpRequired ?? 0}\n            nextLevelXp={nextLevel?.xpRequired ?? null}\n          />,\n          { duration: 3500 }\n        );\n      })\n      .catch(() => {\n        configPromise = null; // retry on the next action\n      });\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCgB;AAnChB,oBAAsB;AACtB,8BAA+B;AAgBxB,SAAS,kBAAkB,kBAAmD;AACnF,MAAI,gBAAkD;AACtD,WAAS,aAAa;AACpB,sCAAkB,iBAAiB;AACnC,WAAO;AAAA,EACT;AAMA,SAAO,SAAS,YAAY,YAAoB,UAAsC;AACpF,eAAW,EACR,KAAK,CAAC,WAAW;AAChB,YAAM,SAAS,OAAO,QAAQ,KAAK,CAAC,MAAM,EAAE,SAAS,UAAU;AAC/D,UAAI,CAAC,OAAQ;AAEb,UAAI,CAAC,UAAU;AACb,iCAAM,4CAAC,0CAAe,IAAI,OAAO,IAAI,OAAO,OAAO,OAAO,GAAI,EAAE,UAAU,KAAK,CAAC;AAChF;AAAA,MACF;AAEA,YAAM,QAAQ,OAAO,OAAO,KAAK,CAAC,MAAM,EAAE,UAAU,SAAS,YAAY;AACzE,YAAM,YAAY,OAAO,OAAO,KAAK,CAAC,MAAM,EAAE,UAAU,SAAS,eAAe,CAAC;AACjF;AAAA,QACE;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,OAAO;AAAA,YACX,OAAO,OAAO;AAAA,YACd,SAAS,SAAS;AAAA,YAClB,SAAS,OAAO,cAAc;AAAA,YAC9B,aAAa,WAAW,cAAc;AAAA;AAAA,QACxC;AAAA,QACA,EAAE,UAAU,KAAK;AAAA,MACnB;AAAA,IACF,CAAC,EACA,MAAM,MAAM;AACX,sBAAgB;AAAA,IAClB,CAAC;AAAA,EACL;AACF;","names":[]}

package/dist/components/rewards/reward-toast.d.cts

@@ -1,5 +1,9 @@
 import { ApiRewardsConfig } from '@medialane/sdk';
 
+interface RewardToastSnapshot {
+    totalXp: number;
+    currentLevel: number;
+}
 /**
  * Optimistic XP feedback after a scoring action. Scores recompute on a
  * schedule, so this shows the action's configured value, never a balance.
@@ -8,6 +12,6 @@ import { ApiRewardsConfig } from '@medialane/sdk';
  * Each app supplies its own `getRewardsConfig` (bound to its own
  * `MedialaneClient` singleton) — the caching/toast logic lives here once.
  */
-declare function createRewardToast(getRewardsConfig: () => Promise<ApiRewardsConfig>): (actionType: string) => void;
+declare function createRewardToast(getRewardsConfig: () => Promise<ApiRewardsConfig>): (actionType: string, snapshot?: RewardToastSnapshot) => void;
 
-export { createRewardToast };
+export { type RewardToastSnapshot, createRewardToast };

package/dist/components/rewards/reward-toast.d.ts

@@ -1,5 +1,9 @@
 import { ApiRewardsConfig } from '@medialane/sdk';
 
+interface RewardToastSnapshot {
+    totalXp: number;
+    currentLevel: number;
+}
 /**
  * Optimistic XP feedback after a scoring action. Scores recompute on a
  * schedule, so this shows the action's configured value, never a balance.
@@ -8,6 +12,6 @@ import { ApiRewardsConfig } from '@medialane/sdk';
  * Each app supplies its own `getRewardsConfig` (bound to its own
  * `MedialaneClient` singleton) — the caching/toast logic lives here once.
  */
-declare function createRewardToast(getRewardsConfig: () => Promise<ApiRewardsConfig>): (actionType: string) => void;
+declare function createRewardToast(getRewardsConfig: () => Promise<ApiRewardsConfig>): (actionType: string, snapshot?: RewardToastSnapshot) => void;
 
-export { createRewardToast };
+export { type RewardToastSnapshot, createRewardToast };

package/dist/components/rewards/reward-toast.js

@@ -8,11 +8,29 @@ function createRewardToast(getRewardsConfig) {
     configPromise ?? (configPromise = getRewardsConfig());
     return configPromise;
   }
-  return function rewardToast(actionType) {
+  return function rewardToast(actionType, snapshot) {
     loadConfig().then((config) => {
       const action = config.actions.find((a) => a.type === actionType);
       if (!action) return;
-      toast(/* @__PURE__ */ jsx(XpToastContent, { xp: action.xp, label: action.label }), { duration: 3500 });
+      if (!snapshot) {
+        toast(/* @__PURE__ */ jsx(XpToastContent, { xp: action.xp, label: action.label }), { duration: 3500 });
+        return;
+      }
+      const level = config.levels.find((l) => l.level === snapshot.currentLevel);
+      const nextLevel = config.levels.find((l) => l.level === snapshot.currentLevel + 1);
+      toast(
+        /* @__PURE__ */ jsx(
+          XpToastContent,
+          {
+            xp: action.xp,
+            label: action.label,
+            totalXp: snapshot.totalXp,
+            levelXp: level?.xpRequired ?? 0,
+            nextLevelXp: nextLevel?.xpRequired ?? null
+          }
+        ),
+        { duration: 3500 }
+      );
     }).catch(() => {
       configPromise = null;
     });

package/dist/components/rewards/reward-toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/rewards/reward-toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { toast } from \"sonner\";\nimport { XpToastContent } from \"./xp-toast-content.js\";\nimport type { ApiRewardsConfig } from \"@medialane/sdk\";\n\n/**\n * Optimistic XP feedback after a scoring action. Scores recompute on a\n * schedule, so this shows the action's configured value, never a balance.\n * Fire-and-forget: any failure is silent (rewards UI must never break a flow).\n *\n * Each app supplies its own `getRewardsConfig` (bound to its own\n * `MedialaneClient` singleton) — the caching/toast logic lives here once.\n */\nexport function createRewardToast(getRewardsConfig: () => Promise<ApiRewardsConfig>) {\n  let configPromise: Promise<ApiRewardsConfig> | null = null;\n  function loadConfig() {\n    configPromise ??= getRewardsConfig();\n    return configPromise;\n  }\n\n  return function rewardToast(actionType: string): void {\n    loadConfig()\n      .then((config) => {\n        const action = config.actions.find((a) => a.type === actionType);\n        if (!action) return;\n        toast(<XpToastContent xp={action.xp} label={action.label} />, { duration: 3500 });\n      })\n      .catch(() => {\n        configPromise = null; // retry on the next action\n      });\n  };\n}\n"],"mappings":";AA0Bc;AAxBd,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAWxB,SAAS,kBAAkB,kBAAmD;AACnF,MAAI,gBAAkD;AACtD,WAAS,aAAa;AACpB,sCAAkB,iBAAiB;AACnC,WAAO;AAAA,EACT;AAEA,SAAO,SAAS,YAAY,YAA0B;AACpD,eAAW,EACR,KAAK,CAAC,WAAW;AAChB,YAAM,SAAS,OAAO,QAAQ,KAAK,CAAC,MAAM,EAAE,SAAS,UAAU;AAC/D,UAAI,CAAC,OAAQ;AACb,YAAM,oBAAC,kBAAe,IAAI,OAAO,IAAI,OAAO,OAAO,OAAO,GAAI,EAAE,UAAU,KAAK,CAAC;AAAA,IAClF,CAAC,EACA,MAAM,MAAM;AACX,sBAAgB;AAAA,IAClB,CAAC;AAAA,EACL;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/rewards/reward-toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { toast } from \"sonner\";\nimport { XpToastContent } from \"./xp-toast-content.js\";\nimport type { ApiRewardsConfig } from \"@medialane/sdk\";\n\nexport interface RewardToastSnapshot {\n  totalXp: number;\n  currentLevel: number;\n}\n\n/**\n * Optimistic XP feedback after a scoring action. Scores recompute on a\n * schedule, so this shows the action's configured value, never a balance.\n * Fire-and-forget: any failure is silent (rewards UI must never break a flow).\n *\n * Each app supplies its own `getRewardsConfig` (bound to its own\n * `MedialaneClient` singleton) — the caching/toast logic lives here once.\n */\nexport function createRewardToast(getRewardsConfig: () => Promise<ApiRewardsConfig>) {\n  let configPromise: Promise<ApiRewardsConfig> | null = null;\n  function loadConfig() {\n    configPromise ??= getRewardsConfig();\n    return configPromise;\n  }\n\n  /**\n   * @param snapshot Optional — when provided, the toast additionally shows\n   * a progress bar toward the next level. Omit to get today's plain toast.\n   */\n  return function rewardToast(actionType: string, snapshot?: RewardToastSnapshot): void {\n    loadConfig()\n      .then((config) => {\n        const action = config.actions.find((a) => a.type === actionType);\n        if (!action) return;\n\n        if (!snapshot) {\n          toast(<XpToastContent xp={action.xp} label={action.label} />, { duration: 3500 });\n          return;\n        }\n\n        const level = config.levels.find((l) => l.level === snapshot.currentLevel);\n        const nextLevel = config.levels.find((l) => l.level === snapshot.currentLevel + 1);\n        toast(\n          <XpToastContent\n            xp={action.xp}\n            label={action.label}\n            totalXp={snapshot.totalXp}\n            levelXp={level?.xpRequired ?? 0}\n            nextLevelXp={nextLevel?.xpRequired ?? null}\n          />,\n          { duration: 3500 }\n        );\n      })\n      .catch(() => {\n        configPromise = null; // retry on the next action\n      });\n  };\n}\n"],"mappings":";AAqCgB;AAnChB,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAgBxB,SAAS,kBAAkB,kBAAmD;AACnF,MAAI,gBAAkD;AACtD,WAAS,aAAa;AACpB,sCAAkB,iBAAiB;AACnC,WAAO;AAAA,EACT;AAMA,SAAO,SAAS,YAAY,YAAoB,UAAsC;AACpF,eAAW,EACR,KAAK,CAAC,WAAW;AAChB,YAAM,SAAS,OAAO,QAAQ,KAAK,CAAC,MAAM,EAAE,SAAS,UAAU;AAC/D,UAAI,CAAC,OAAQ;AAEb,UAAI,CAAC,UAAU;AACb,cAAM,oBAAC,kBAAe,IAAI,OAAO,IAAI,OAAO,OAAO,OAAO,GAAI,EAAE,UAAU,KAAK,CAAC;AAChF;AAAA,MACF;AAEA,YAAM,QAAQ,OAAO,OAAO,KAAK,CAAC,MAAM,EAAE,UAAU,SAAS,YAAY;AACzE,YAAM,YAAY,OAAO,OAAO,KAAK,CAAC,MAAM,EAAE,UAAU,SAAS,eAAe,CAAC;AACjF;AAAA,QACE;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,OAAO;AAAA,YACX,OAAO,OAAO;AAAA,YACd,SAAS,SAAS;AAAA,YAClB,SAAS,OAAO,cAAc;AAAA,YAC9B,aAAa,WAAW,cAAc;AAAA;AAAA,QACxC;AAAA,QACA,EAAE,UAAU,KAAK;AAAA,MACnB;AAAA,IACF,CAAC,EACA,MAAM,MAAM;AACX,sBAAgB;AAAA,IAClB,CAAC;AAAA,EACL;AACF;","names":[]}

package/dist/components/rewards/use-rewards-celebrations.cjs

@@ -0,0 +1,70 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_rewards_celebrations_exports = {};
+__export(use_rewards_celebrations_exports, {
+  useRewardsCelebrations: () => useRewardsCelebrations
+});
+module.exports = __toCommonJS(use_rewards_celebrations_exports);
+var import_react = require("react");
+const EMPTY = { leveledUpTo: null, newBadgeKeys: [] };
+function storageKey(address) {
+  return `ml:rewards-seen:${address.toLowerCase()}`;
+}
+function readSeen(address) {
+  try {
+    const raw = localStorage.getItem(storageKey(address));
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function writeSeen(address, state) {
+  try {
+    localStorage.setItem(storageKey(address), JSON.stringify(state));
+  } catch {
+  }
+}
+function useRewardsCelebrations(address, rewards) {
+  const [state, setState] = (0, import_react.useState)(EMPTY);
+  const lastAddress = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!address || !rewards) return;
+    const seen = readSeen(address);
+    const currentBadgeKeys = rewards.badges.map((b) => b.key);
+    if (!seen || lastAddress.current !== address) {
+      writeSeen(address, { level: rewards.currentLevel, badgeKeys: currentBadgeKeys });
+      lastAddress.current = address;
+      return;
+    }
+    const leveledUpTo = rewards.currentLevel > seen.level ? rewards.currentLevel : null;
+    const newBadgeKeys = currentBadgeKeys.filter((k) => !seen.badgeKeys.includes(k));
+    if (leveledUpTo !== null || newBadgeKeys.length > 0) {
+      writeSeen(address, { level: rewards.currentLevel, badgeKeys: currentBadgeKeys });
+      setState({ leveledUpTo, newBadgeKeys });
+    }
+  }, [address, rewards]);
+  const dismiss = () => setState(EMPTY);
+  return { ...state, dismiss };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useRewardsCelebrations
+});
+//# sourceMappingURL=use-rewards-celebrations.cjs.map

package/dist/components/rewards/use-rewards-celebrations.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/use-rewards-celebrations.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\ninterface RewardsSnapshot {\n  currentLevel: number;\n  badges: { key: string }[];\n}\n\ninterface CelebrationState {\n  leveledUpTo: number | null;\n  newBadgeKeys: string[];\n}\n\nconst EMPTY: CelebrationState = { leveledUpTo: null, newBadgeKeys: [] };\n\nfunction storageKey(address: string) {\n  return `ml:rewards-seen:${address.toLowerCase()}`;\n}\n\ninterface SeenState {\n  level: number;\n  badgeKeys: string[];\n}\n\nfunction readSeen(address: string): SeenState | null {\n  try {\n    const raw = localStorage.getItem(storageKey(address));\n    return raw ? (JSON.parse(raw) as SeenState) : null;\n  } catch {\n    return null;\n  }\n}\n\nfunction writeSeen(address: string, state: SeenState) {\n  try {\n    localStorage.setItem(storageKey(address), JSON.stringify(state));\n  } catch {\n    // localStorage unavailable (private mode, quota) — celebrations just won't fire again this session\n  }\n}\n\n/**\n * Diffs the current rewards snapshot against the last-seen state cached in\n * localStorage (per address) and reports what's new since last time. A\n * first-ever snapshot for an address seeds the cache silently — no\n * celebration on first sight, only on a detected increase/addition.\n * Call `dismiss()` to clear the returned state once the caller has shown it\n * (the storage baseline is written the moment new state is detected, not on\n * dismiss, so a level-up and a badge unlock arriving together can each\n * dismiss on their own timeline without racing the other's write).\n */\nexport function useRewardsCelebrations(\n  address: string | null | undefined,\n  rewards: RewardsSnapshot | null | undefined\n): CelebrationState & { dismiss: () => void } {\n  const [state, setState] = useState<CelebrationState>(EMPTY);\n  const lastAddress = useRef<string | null>(null);\n\n  useEffect(() => {\n    if (!address || !rewards) return;\n\n    const seen = readSeen(address);\n    const currentBadgeKeys = rewards.badges.map((b) => b.key);\n\n    if (!seen || lastAddress.current !== address) {\n      // First time we've ever seen this address (or a wallet switch) — seed silently.\n      writeSeen(address, { level: rewards.currentLevel, badgeKeys: currentBadgeKeys });\n      lastAddress.current = address;\n      return;\n    }\n\n    const leveledUpTo = rewards.currentLevel > seen.level ? rewards.currentLevel : null;\n    const newBadgeKeys = currentBadgeKeys.filter((k) => !seen.badgeKeys.includes(k));\n\n    if (leveledUpTo !== null || newBadgeKeys.length > 0) {\n      // Persist the new baseline immediately — a level-up and a badge unlock\n      // can arrive in the same snapshot but dismiss independently (the\n      // celebration overlay dismisses itself on a timer/tap; the badge\n      // toasts fire-and-forget). Gating the write on either UI action\n      // dismissing would let the other clear this state first and skip the\n      // write. A page refresh mid-celebration correctly won't re-fire either.\n      writeSeen(address, { level: rewards.currentLevel, badgeKeys: currentBadgeKeys });\n      setState({ leveledUpTo, newBadgeKeys });\n    }\n  }, [address, rewards]);\n\n  // Purely local UI state — the storage baseline is already written above,\n  // the moment new state was detected. This only clears what's on screen.\n  const dismiss = () => setState(EMPTY);\n\n  return { ...state, dismiss };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4C;AAY5C,MAAM,QAA0B,EAAE,aAAa,MAAM,cAAc,CAAC,EAAE;AAEtE,SAAS,WAAW,SAAiB;AACnC,SAAO,mBAAmB,QAAQ,YAAY,CAAC;AACjD;AAOA,SAAS,SAAS,SAAmC;AACnD,MAAI;AACF,UAAM,MAAM,aAAa,QAAQ,WAAW,OAAO,CAAC;AACpD,WAAO,MAAO,KAAK,MAAM,GAAG,IAAkB;AAAA,EAChD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,UAAU,SAAiB,OAAkB;AACpD,MAAI;AACF,iBAAa,QAAQ,WAAW,OAAO,GAAG,KAAK,UAAU,KAAK,CAAC;AAAA,EACjE,QAAQ;AAAA,EAER;AACF;AAYO,SAAS,uBACd,SACA,SAC4C;AAC5C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA2B,KAAK;AAC1D,QAAM,kBAAc,qBAAsB,IAAI;AAE9C,8BAAU,MAAM;AACd,QAAI,CAAC,WAAW,CAAC,QAAS;AAE1B,UAAM,OAAO,SAAS,OAAO;AAC7B,UAAM,mBAAmB,QAAQ,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG;AAExD,QAAI,CAAC,QAAQ,YAAY,YAAY,SAAS;AAE5C,gBAAU,SAAS,EAAE,OAAO,QAAQ,cAAc,WAAW,iBAAiB,CAAC;AAC/E,kBAAY,UAAU;AACtB;AAAA,IACF;AAEA,UAAM,cAAc,QAAQ,eAAe,KAAK,QAAQ,QAAQ,eAAe;AAC/E,UAAM,eAAe,iBAAiB,OAAO,CAAC,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,CAAC;AAE/E,QAAI,gBAAgB,QAAQ,aAAa,SAAS,GAAG;AAOnD,gBAAU,SAAS,EAAE,OAAO,QAAQ,cAAc,WAAW,iBAAiB,CAAC;AAC/E,eAAS,EAAE,aAAa,aAAa,CAAC;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAIrB,QAAM,UAAU,MAAM,SAAS,KAAK;AAEpC,SAAO,EAAE,GAAG,OAAO,QAAQ;AAC7B;","names":[]}

package/dist/components/rewards/use-rewards-celebrations.d.cts

@@ -0,0 +1,25 @@
+interface RewardsSnapshot {
+    currentLevel: number;
+    badges: {
+        key: string;
+    }[];
+}
+interface CelebrationState {
+    leveledUpTo: number | null;
+    newBadgeKeys: string[];
+}
+/**
+ * Diffs the current rewards snapshot against the last-seen state cached in
+ * localStorage (per address) and reports what's new since last time. A
+ * first-ever snapshot for an address seeds the cache silently — no
+ * celebration on first sight, only on a detected increase/addition.
+ * Call `dismiss()` to clear the returned state once the caller has shown it
+ * (the storage baseline is written the moment new state is detected, not on
+ * dismiss, so a level-up and a badge unlock arriving together can each
+ * dismiss on their own timeline without racing the other's write).
+ */
+declare function useRewardsCelebrations(address: string | null | undefined, rewards: RewardsSnapshot | null | undefined): CelebrationState & {
+    dismiss: () => void;
+};
+
+export { useRewardsCelebrations };

package/dist/components/rewards/use-rewards-celebrations.d.ts

@@ -0,0 +1,25 @@
+interface RewardsSnapshot {
+    currentLevel: number;
+    badges: {
+        key: string;
+    }[];
+}
+interface CelebrationState {
+    leveledUpTo: number | null;
+    newBadgeKeys: string[];
+}
+/**
+ * Diffs the current rewards snapshot against the last-seen state cached in
+ * localStorage (per address) and reports what's new since last time. A
+ * first-ever snapshot for an address seeds the cache silently — no
+ * celebration on first sight, only on a detected increase/addition.
+ * Call `dismiss()` to clear the returned state once the caller has shown it
+ * (the storage baseline is written the moment new state is detected, not on
+ * dismiss, so a level-up and a badge unlock arriving together can each
+ * dismiss on their own timeline without racing the other's write).
+ */
+declare function useRewardsCelebrations(address: string | null | undefined, rewards: RewardsSnapshot | null | undefined): CelebrationState & {
+    dismiss: () => void;
+};
+
+export { useRewardsCelebrations };