@medialane/ui 0.100.0 → 0.100.3

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

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BadgeCatalogBadge {
+    key: string;
+    name: string;
+    description: string;
+    icon: string;
+    color: string;
+    category: string;
+}
+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

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BadgeCatalogBadge {
+    key: string;
+    name: string;
+    description: string;
+    icon: string;
+    color: string;
+    category: string;
+}
+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

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { BadgeIcon } from "./badge-shelf.js";
+const CATEGORY_LABELS = {
+  creator: "Creator",
+  collector: "Collector",
+  community: "Community"
+};
+function BadgeCatalog({ badges, className }) {
+  const categories = [...new Set(badges.map((b) => b.category))];
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-8", className), children: categories.map((cat) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-black uppercase tracking-wide text-foreground/50", children: CATEGORY_LABELS[cat] ?? cat }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: badges.filter((b) => b.category === cat).map((badge) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-2xl bg-foreground/[0.04] p-4", children: [
+      /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx(BadgeIcon, { name: badge.icon, color: "#ffffff", className: "h-5 w-5" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", children: badge.name }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground/60 truncate", children: badge.description })
+      ] })
+    ] }, badge.key)) })
+  ] }, cat)) });
+}
+export {
+  BadgeCatalog
+};
+//# sourceMappingURL=badge-catalog.js.map

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

@@ -0,0 +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":[]}

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

@@ -27,24 +27,24 @@ var import_cn = require("../../utils/cn.js");
 var import_address = require("../../utils/address.js");
 var import_level_badge = require("./level-badge.js");
 function LeaderboardTable({ entries, highlightAddress, renderAddress, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("overflow-hidden rounded-xl border border-border", className), children: entries.map((e) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("space-y-1.5", className), children: entries.map((e) => {
     const isViewer = highlightAddress != null && e.address === highlightAddress;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         className: (0, import_cn.cn)(
-          "flex items-center gap-3 border-b border-border/60 bg-card px-3 py-2.5 last:border-b-0 sm:px-4",
-          isViewer && "bg-primary/10"
+          "flex items-center gap-4 rounded-2xl px-4 py-3.5 transition-colors",
+          isViewer ? "bg-brand-rose/10" : "bg-foreground/[0.04] hover:bg-foreground/[0.07]"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0 flex-1 truncate text-base font-bold", children: [
             renderAddress ? renderAddress(e.address) : (0, import_address.shortenAddress)(e.address),
-            isViewer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-1.5 text-xs text-muted-foreground", children: "(you)" })
+            isViewer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-1.5 text-xs font-medium text-foreground/50", children: "(you)" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_level_badge.LevelBadge, { level: e.currentLevel, name: e.currentLevelName, badgeColor: e.badgeColor, size: "sm", className: "hidden sm:inline-flex" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "shrink-0 text-sm font-semibold tabular-nums", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "shrink-0 text-lg font-black tabular-nums", children: [
             e.totalXp.toLocaleString(),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-1 text-xs font-normal text-muted-foreground", children: "XP" })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-1 text-xs font-bold text-foreground/40", children: "XP" })
           ] })
         ]
       },
@@ -54,13 +54,13 @@ function LeaderboardTable({ entries, highlightAddress, renderAddress, className
 }
 function LeaderboardWidget({ entries, title = "Community Rewards", href, renderAddress, className }) {
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: (0, import_cn.cn)("rounded-xl border border-border bg-card p-4 sm:p-5", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: (0, import_cn.cn)("rounded-2xl bg-foreground/[0.04] p-5", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-base font-black", children: title }),
-      href && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, className: "text-xs font-semibold text-muted-foreground active:opacity-70", children: "View scoreboard \u2192" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg font-black", children: title }),
+      href && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, className: "text-xs font-bold text-foreground/50 hover:text-foreground active:opacity-70", children: "View scoreboard \u2192" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "space-y-2.5", children: entries.map((e) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-center gap-2.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: renderAddress ? renderAddress(e.address) : (0, import_address.shortenAddress)(e.address) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm font-bold", children: renderAddress ? renderAddress(e.address) : (0, import_address.shortenAddress)(e.address) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_level_badge.LevelBadge, { level: e.currentLevel, name: e.currentLevelName, badgeColor: e.badgeColor, size: "sm" })
     ] }, e.address)) })
   ] });

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\">\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":[]}
+{"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.\n *  Each row is its own rounded tile with real padding, not a bordered\n *  list with hairline dividers. */\nexport function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps) {\n  return (\n    <div className={cn(\"space-y-1.5\", 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-4 rounded-2xl px-4 py-3.5 transition-colors\",\n              isViewer ? \"bg-brand-rose/10\" : \"bg-foreground/[0.04] hover:bg-foreground/[0.07]\"\n            )}\n          >\n            <span className=\"min-w-0 flex-1 truncate text-base font-bold\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n              {isViewer && <span className=\"ml-1.5 text-xs font-medium text-foreground/50\">(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-lg font-black tabular-nums\">\n              {e.totalXp.toLocaleString()}\n              <span className=\"ml-1 text-xs font-bold text-foreground/40\">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-2xl bg-foreground/[0.04] p-5\", className)}>\n      <div className=\"mb-3 flex items-center justify-between\">\n        <h2 className=\"text-lg font-black\">{title}</h2>\n        {href && (\n          <a href={href} className=\"text-xs font-bold text-foreground/50 hover:text-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-bold\">\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;AA4CY;AA3CZ,gBAAmB;AACnB,qBAA+B;AAC/B,yBAA2B;AA4BpB,SAAS,iBAAiB,EAAE,SAAS,kBAAkB,eAAe,UAAU,GAA0B;AAC/G,SACE,4CAAC,SAAI,eAAW,cAAG,eAAe,SAAS,GACxC,kBAAQ,IAAI,CAAC,MAAM;AAClB,UAAM,WAAW,oBAAoB,QAAQ,EAAE,YAAY;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,qBAAqB;AAAA,QAClC;AAAA,QAEA;AAAA,uDAAC,UAAK,WAAU,+CACb;AAAA,4BAAgB,cAAc,EAAE,OAAO,QAAI,+BAAe,EAAE,OAAO;AAAA,YACnE,YAAY,4CAAC,UAAK,WAAU,iDAAgD,mBAAK;AAAA,aACpF;AAAA,UACA,4CAAC,iCAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK,WAAU,yBAAwB;AAAA,UACnI,6CAAC,UAAK,WAAU,4CACb;AAAA,cAAE,QAAQ,eAAe;AAAA,YAC1B,4CAAC,UAAK,WAAU,6CAA4C,gBAAE;AAAA,aAChE;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,wCAAwC,SAAS,GACtE;AAAA,iDAAC,SAAI,WAAU,0CACb;AAAA,kDAAC,QAAG,WAAU,sBAAsB,iBAAM;AAAA,MACzC,QACC,4CAAC,OAAE,MAAY,WAAU,gFAA+E,oCAExG;AAAA,OAEJ;AAAA,IACA,4CAAC,QAAG,WAAU,eACX,kBAAQ,IAAI,CAAC,MACZ,6CAAC,QAAmB,WAAU,6BAC5B;AAAA,kDAAC,UAAK,WAAU,6CACb,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.d.cts

@@ -22,7 +22,9 @@ interface LeaderboardTableProps {
     className?: string;
 }
 /** Scoreboard rows: address, level chip, points. No position number or
- *  podium coloring — this celebrates participation, not competition. */
+ *  podium coloring — this celebrates participation, not competition.
+ *  Each row is its own rounded tile with real padding, not a bordered
+ *  list with hairline dividers. */
 declare function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps): react_jsx_runtime.JSX.Element;
 interface LeaderboardWidgetProps {
     entries: LeaderboardEntryLike[];

package/dist/components/rewards/leaderboard-table.d.ts

@@ -22,7 +22,9 @@ interface LeaderboardTableProps {
     className?: string;
 }
 /** Scoreboard rows: address, level chip, points. No position number or
- *  podium coloring — this celebrates participation, not competition. */
+ *  podium coloring — this celebrates participation, not competition.
+ *  Each row is its own rounded tile with real padding, not a bordered
+ *  list with hairline dividers. */
 declare function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps): react_jsx_runtime.JSX.Element;
 interface LeaderboardWidgetProps {
     entries: LeaderboardEntryLike[];

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

@@ -3,24 +3,24 @@ import { cn } from "../../utils/cn.js";
 import { shortenAddress } from "../../utils/address.js";
 import { LevelBadge } from "./level-badge.js";
 function LeaderboardTable({ entries, highlightAddress, renderAddress, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-xl border border-border", className), children: entries.map((e) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-1.5", className), children: entries.map((e) => {
     const isViewer = highlightAddress != null && e.address === highlightAddress;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "flex items-center gap-3 border-b border-border/60 bg-card px-3 py-2.5 last:border-b-0 sm:px-4",
-          isViewer && "bg-primary/10"
+          "flex items-center gap-4 rounded-2xl px-4 py-3.5 transition-colors",
+          isViewer ? "bg-brand-rose/10" : "bg-foreground/[0.04] hover:bg-foreground/[0.07]"
         ),
         children: [
-          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: [
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate text-base font-bold", children: [
             renderAddress ? renderAddress(e.address) : shortenAddress(e.address),
-            isViewer && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: "(you)" })
+            isViewer && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs font-medium text-foreground/50", children: "(you)" })
           ] }),
           /* @__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: [
+          /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-lg font-black tabular-nums", children: [
             e.totalXp.toLocaleString(),
-            /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs font-normal text-muted-foreground", children: "XP" })
+            /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs font-bold text-foreground/40", children: "XP" })
           ] })
         ]
       },
@@ -30,13 +30,13 @@ function LeaderboardTable({ entries, highlightAddress, renderAddress, className
 }
 function LeaderboardWidget({ entries, title = "Community Rewards", href, renderAddress, className }) {
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsxs("section", { className: cn("rounded-xl border border-border bg-card p-4 sm:p-5", className), children: [
+  return /* @__PURE__ */ jsxs("section", { className: cn("rounded-2xl bg-foreground/[0.04] p-5", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-black", children: title }),
-      href && /* @__PURE__ */ jsx("a", { href, className: "text-xs font-semibold text-muted-foreground active:opacity-70", children: "View scoreboard \u2192" })
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-black", children: title }),
+      href && /* @__PURE__ */ jsx("a", { href, className: "text-xs font-bold text-foreground/50 hover:text-foreground active:opacity-70", children: "View scoreboard \u2192" })
     ] }),
     /* @__PURE__ */ jsx("ol", { className: "space-y-2.5", children: entries.map((e) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: renderAddress ? renderAddress(e.address) : shortenAddress(e.address) }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-bold", children: renderAddress ? renderAddress(e.address) : shortenAddress(e.address) }),
       /* @__PURE__ */ jsx(LevelBadge, { level: e.currentLevel, name: e.currentLevelName, badgeColor: e.badgeColor, size: "sm" })
     ] }, e.address)) })
   ] });

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\">\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":[]}
+{"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.\n *  Each row is its own rounded tile with real padding, not a bordered\n *  list with hairline dividers. */\nexport function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps) {\n  return (\n    <div className={cn(\"space-y-1.5\", 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-4 rounded-2xl px-4 py-3.5 transition-colors\",\n              isViewer ? \"bg-brand-rose/10\" : \"bg-foreground/[0.04] hover:bg-foreground/[0.07]\"\n            )}\n          >\n            <span className=\"min-w-0 flex-1 truncate text-base font-bold\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n              {isViewer && <span className=\"ml-1.5 text-xs font-medium text-foreground/50\">(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-lg font-black tabular-nums\">\n              {e.totalXp.toLocaleString()}\n              <span className=\"ml-1 text-xs font-bold text-foreground/40\">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-2xl bg-foreground/[0.04] p-5\", className)}>\n      <div className=\"mb-3 flex items-center justify-between\">\n        <h2 className=\"text-lg font-black\">{title}</h2>\n        {href && (\n          <a href={href} className=\"text-xs font-bold text-foreground/50 hover:text-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-bold\">\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":"AA4CY,SAEe,KAFf;AA3CZ,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AA4BpB,SAAS,iBAAiB,EAAE,SAAS,kBAAkB,eAAe,UAAU,GAA0B;AAC/G,SACE,oBAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GACxC,kBAAQ,IAAI,CAAC,MAAM;AAClB,UAAM,WAAW,oBAAoB,QAAQ,EAAE,YAAY;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA,WAAW,qBAAqB;AAAA,QAClC;AAAA,QAEA;AAAA,+BAAC,UAAK,WAAU,+CACb;AAAA,4BAAgB,cAAc,EAAE,OAAO,IAAI,eAAe,EAAE,OAAO;AAAA,YACnE,YAAY,oBAAC,UAAK,WAAU,iDAAgD,mBAAK;AAAA,aACpF;AAAA,UACA,oBAAC,cAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK,WAAU,yBAAwB;AAAA,UACnI,qBAAC,UAAK,WAAU,4CACb;AAAA,cAAE,QAAQ,eAAe;AAAA,YAC1B,oBAAC,UAAK,WAAU,6CAA4C,gBAAE;AAAA,aAChE;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,wCAAwC,SAAS,GACtE;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,0BAAC,QAAG,WAAU,sBAAsB,iBAAM;AAAA,MACzC,QACC,oBAAC,OAAE,MAAY,WAAU,gFAA+E,oCAExG;AAAA,OAEJ;AAAA,IACA,oBAAC,QAAG,WAAU,eACX,kBAAQ,IAAI,CAAC,MACZ,qBAAC,QAAmB,WAAU,6BAC5B;AAAA,0BAAC,UAAK,WAAU,6CACb,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

@@ -23,31 +23,22 @@ __export(level_badge_exports, {
 module.exports = __toCommonJS(level_badge_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_cn = require("../../utils/cn.js");
-function LevelBadge({ level, name, badgeColor, size = "md", className }) {
+function LevelBadge({ level, name, size = "md", className }) {
   const sizeClasses = {
-    sm: "h-5 px-1.5 gap-1 text-2xs",
-    md: "h-6 px-2 gap-1.5 text-xs",
-    lg: "h-8 px-3 gap-2 text-sm"
+    sm: "h-5 px-2.5 text-2xs",
+    md: "h-6 px-3 text-xs",
+    lg: "h-8 px-4 text-sm"
   };
-  const dotSizes = {
-    sm: "h-1.5 w-1.5",
-    md: "h-2 w-2",
-    lg: "h-2.5 w-2.5"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
       title: `Level ${level}`,
       className: (0, import_cn.cn)(
-        "inline-flex items-center rounded-full border font-semibold tracking-tight whitespace-nowrap",
+        "inline-flex items-center rounded-full font-bold tracking-tight whitespace-nowrap text-white bg-gradient-to-r from-brand-orange to-brand-maeve",
         sizeClasses[size],
         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 } }),
-        name
-      ]
+      children: 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 — 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-2xs\",\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":[]}
+{"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  /** Kept for interface consistency with other rewards components that do\n   *  use per-level color (XpProgress, LevelUpCelebration, JourneyPath) —\n   *  this component intentionally ignores it in favor of one signature\n   *  brand gradient across every level, not 20+ flat per-level colors. */\n  badgeColor: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\n/** Level chip — shows the level's title only (\"Voyager\"), not the raw\n *  number (\"Lv.6 Voyager\" read as UI noise). The level is still available\n *  on hover via the native title tooltip. One signature orange->maeve\n *  gradient fill, white text — vivid and consistent regardless of level,\n *  rather than a washed-out per-level tint. Pure presentation — the\n *  consuming app supplies level data from the rewards API. */\nexport function LevelBadge({ level, name, size = \"md\", className }: LevelBadgeProps) {\n  const sizeClasses = {\n    sm: \"h-5 px-2.5 text-2xs\",\n    md: \"h-6 px-3 text-xs\",\n    lg: \"h-8 px-4 text-sm\",\n  };\n\n  return (\n    <span\n      title={`Level ${level}`}\n      className={cn(\n        \"inline-flex items-center rounded-full font-bold tracking-tight whitespace-nowrap text-white bg-gradient-to-r from-brand-orange to-brand-maeve\",\n        sizeClasses[size],\n        className\n      )}\n    >\n      {name}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BI;AA5BJ,gBAAmB;AAoBZ,SAAS,WAAW,EAAE,OAAO,MAAM,OAAO,MAAM,UAAU,GAAoB;AACnF,QAAM,cAAc;AAAA,IAClB,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,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -3,14 +3,20 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface LevelBadgeProps {
     level: number;
     name: string;
+    /** Kept for interface consistency with other rewards components that do
+     *  use per-level color (XpProgress, LevelUpCelebration, JourneyPath) —
+     *  this component intentionally ignores it in favor of one signature
+     *  brand gradient across every level, not 20+ flat per-level colors. */
     badgeColor: string;
     size?: "sm" | "md" | "lg";
     className?: string;
 }
-/** 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
+/** 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. One signature orange->maeve
+ *  gradient fill, white text — vivid and consistent regardless of level,
+ *  rather than a washed-out per-level tint. 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;
+declare function LevelBadge({ level, name, size, className }: LevelBadgeProps): react_jsx_runtime.JSX.Element;
 
 export { LevelBadge, type LevelBadgeProps };

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

@@ -3,14 +3,20 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface LevelBadgeProps {
     level: number;
     name: string;
+    /** Kept for interface consistency with other rewards components that do
+     *  use per-level color (XpProgress, LevelUpCelebration, JourneyPath) —
+     *  this component intentionally ignores it in favor of one signature
+     *  brand gradient across every level, not 20+ flat per-level colors. */
     badgeColor: string;
     size?: "sm" | "md" | "lg";
     className?: string;
 }
-/** 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
+/** 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. One signature orange->maeve
+ *  gradient fill, white text — vivid and consistent regardless of level,
+ *  rather than a washed-out per-level tint. 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;
+declare function LevelBadge({ level, name, size, className }: LevelBadgeProps): react_jsx_runtime.JSX.Element;
 
 export { LevelBadge, type LevelBadgeProps };

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

@@ -1,30 +1,21 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-function LevelBadge({ level, name, badgeColor, size = "md", className }) {
+function LevelBadge({ level, name, size = "md", className }) {
   const sizeClasses = {
-    sm: "h-5 px-1.5 gap-1 text-2xs",
-    md: "h-6 px-2 gap-1.5 text-xs",
-    lg: "h-8 px-3 gap-2 text-sm"
+    sm: "h-5 px-2.5 text-2xs",
+    md: "h-6 px-3 text-xs",
+    lg: "h-8 px-4 text-sm"
   };
-  const dotSizes = {
-    sm: "h-1.5 w-1.5",
-    md: "h-2 w-2",
-    lg: "h-2.5 w-2.5"
-  };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       title: `Level ${level}`,
       className: cn(
-        "inline-flex items-center rounded-full border font-semibold tracking-tight whitespace-nowrap",
+        "inline-flex items-center rounded-full font-bold tracking-tight whitespace-nowrap text-white bg-gradient-to-r from-brand-orange to-brand-maeve",
         sizeClasses[size],
         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 } }),
-        name
-      ]
+      children: 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 — 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-2xs\",\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":[]}
+{"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  /** Kept for interface consistency with other rewards components that do\n   *  use per-level color (XpProgress, LevelUpCelebration, JourneyPath) —\n   *  this component intentionally ignores it in favor of one signature\n   *  brand gradient across every level, not 20+ flat per-level colors. */\n  badgeColor: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\n/** Level chip — shows the level's title only (\"Voyager\"), not the raw\n *  number (\"Lv.6 Voyager\" read as UI noise). The level is still available\n *  on hover via the native title tooltip. One signature orange->maeve\n *  gradient fill, white text — vivid and consistent regardless of level,\n *  rather than a washed-out per-level tint. Pure presentation — the\n *  consuming app supplies level data from the rewards API. */\nexport function LevelBadge({ level, name, size = \"md\", className }: LevelBadgeProps) {\n  const sizeClasses = {\n    sm: \"h-5 px-2.5 text-2xs\",\n    md: \"h-6 px-3 text-xs\",\n    lg: \"h-8 px-4 text-sm\",\n  };\n\n  return (\n    <span\n      title={`Level ${level}`}\n      className={cn(\n        \"inline-flex items-center rounded-full font-bold tracking-tight whitespace-nowrap text-white bg-gradient-to-r from-brand-orange to-brand-maeve\",\n        sizeClasses[size],\n        className\n      )}\n    >\n      {name}\n    </span>\n  );\n}\n"],"mappings":"AA4BI;AA5BJ,SAAS,UAAU;AAoBZ,SAAS,WAAW,EAAE,OAAO,MAAM,OAAO,MAAM,UAAU,GAAoB;AACnF,QAAM,cAAc;AAAA,IAClB,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,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/rewards/level-journey-list.cjs

@@ -0,0 +1,52 @@
+"use strict";
+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_journey_list_exports = {};
+__export(level_journey_list_exports, {
+  LevelJourneyList: () => LevelJourneyList
+});
+module.exports = __toCommonJS(level_journey_list_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../../utils/cn.js");
+function LevelJourneyList({ levels, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: (0, import_cn.cn)("divide-y divide-foreground/[0.06]", className), children: levels.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-start gap-4 py-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1.5 w-8 shrink-0 pt-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-bold text-foreground/30 tabular-nums", children: l.level }),
+      (i + 1) % 10 === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "h-1.5 w-1.5 rounded-full bg-gradient-to-r from-brand-orange to-brand-maeve"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-base font-bold", children: l.name }),
+      l.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-foreground/60 mt-0.5 leading-relaxed", children: l.description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm font-black tabular-nums text-foreground/70 shrink-0", children: [
+      l.xpRequired.toLocaleString(),
+      " XP"
+    ] })
+  ] }, l.level)) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LevelJourneyList
+});
+//# sourceMappingURL=level-journey-list.cjs.map

package/dist/components/rewards/level-journey-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/level-journey-list.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn.js\";\n\nexport interface LevelJourneyListLevel {\n  level: number;\n  name: string;\n  xpRequired: number;\n  description: string | null;\n}\n\nexport interface LevelJourneyListProps {\n  levels: LevelJourneyListLevel[];\n  className?: string;\n}\n\n/** The full level ladder as a vertical showcase list — not the old\n *  horizontal chip rail, which doesn't scale past a handful of items and\n *  was built for a dashboard strip, not a 50-row standalone page. No\n *  current-level state: this is the system-wide view, not \"where am I.\"\n *  Every 10th level gets a small gradient marker as a milestone cue;\n *  colors are otherwise uniform (one signature identity, not 50 flat\n *  per-level colors) — badgeColor is deliberately not consumed here. */\nexport function LevelJourneyList({ levels, className }: LevelJourneyListProps) {\n  return (\n    <ol className={cn(\"divide-y divide-foreground/[0.06]\", className)}>\n      {levels.map((l, i) => (\n        <li key={l.level} className=\"flex items-start gap-4 py-4\">\n          <span className=\"flex items-center gap-1.5 w-8 shrink-0 pt-0.5\">\n            <span className=\"text-xs font-bold text-foreground/30 tabular-nums\">{l.level}</span>\n            {(i + 1) % 10 === 0 && (\n              <span\n                aria-hidden\n                className=\"h-1.5 w-1.5 rounded-full bg-gradient-to-r from-brand-orange to-brand-maeve\"\n              />\n            )}\n          </span>\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-base font-bold\">{l.name}</p>\n            {l.description && (\n              <p className=\"text-sm text-foreground/60 mt-0.5 leading-relaxed\">{l.description}</p>\n            )}\n          </div>\n          <span className=\"text-sm font-black tabular-nums text-foreground/70 shrink-0\">\n            {l.xpRequired.toLocaleString()} XP\n          </span>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BU;AA1BV,gBAAmB;AAqBZ,SAAS,iBAAiB,EAAE,QAAQ,UAAU,GAA0B;AAC7E,SACE,4CAAC,QAAG,eAAW,cAAG,qCAAqC,SAAS,GAC7D,iBAAO,IAAI,CAAC,GAAG,MACd,6CAAC,QAAiB,WAAU,+BAC1B;AAAA,iDAAC,UAAK,WAAU,iDACd;AAAA,kDAAC,UAAK,WAAU,qDAAqD,YAAE,OAAM;AAAA,OAC3E,IAAI,KAAK,OAAO,KAChB;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAU;AAAA;AAAA,MACZ;AAAA,OAEJ;AAAA,IACA,6CAAC,SAAI,WAAU,kBACb;AAAA,kDAAC,OAAE,WAAU,uBAAuB,YAAE,MAAK;AAAA,MAC1C,EAAE,eACD,4CAAC,OAAE,WAAU,qDAAqD,YAAE,aAAY;AAAA,OAEpF;AAAA,IACA,6CAAC,UAAK,WAAU,+DACb;AAAA,QAAE,WAAW,eAAe;AAAA,MAAE;AAAA,OACjC;AAAA,OAlBO,EAAE,KAmBX,CACD,GACH;AAEJ;","names":[]}

package/dist/components/rewards/level-journey-list.d.cts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LevelJourneyListLevel {
+    level: number;
+    name: string;
+    xpRequired: number;
+    description: string | null;
+}
+interface LevelJourneyListProps {
+    levels: LevelJourneyListLevel[];
+    className?: string;
+}
+/** The full level ladder as a vertical showcase list — not the old
+ *  horizontal chip rail, which doesn't scale past a handful of items and
+ *  was built for a dashboard strip, not a 50-row standalone page. No
+ *  current-level state: this is the system-wide view, not "where am I."
+ *  Every 10th level gets a small gradient marker as a milestone cue;
+ *  colors are otherwise uniform (one signature identity, not 50 flat
+ *  per-level colors) — badgeColor is deliberately not consumed here. */
+declare function LevelJourneyList({ levels, className }: LevelJourneyListProps): react_jsx_runtime.JSX.Element;
+
+export { LevelJourneyList, type LevelJourneyListLevel, type LevelJourneyListProps };

package/dist/components/rewards/level-journey-list.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LevelJourneyListLevel {
+    level: number;
+    name: string;
+    xpRequired: number;
+    description: string | null;
+}
+interface LevelJourneyListProps {
+    levels: LevelJourneyListLevel[];
+    className?: string;
+}
+/** The full level ladder as a vertical showcase list — not the old
+ *  horizontal chip rail, which doesn't scale past a handful of items and
+ *  was built for a dashboard strip, not a 50-row standalone page. No
+ *  current-level state: this is the system-wide view, not "where am I."
+ *  Every 10th level gets a small gradient marker as a milestone cue;
+ *  colors are otherwise uniform (one signature identity, not 50 flat
+ *  per-level colors) — badgeColor is deliberately not consumed here. */
+declare function LevelJourneyList({ levels, className }: LevelJourneyListProps): react_jsx_runtime.JSX.Element;
+
+export { LevelJourneyList, type LevelJourneyListLevel, type LevelJourneyListProps };

package/dist/components/rewards/level-journey-list.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function LevelJourneyList({ levels, className }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("divide-y divide-foreground/[0.06]", className), children: levels.map((l, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-4 py-4", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 w-8 shrink-0 pt-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-foreground/30 tabular-nums", children: l.level }),
+      (i + 1) % 10 === 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "h-1.5 w-1.5 rounded-full bg-gradient-to-r from-brand-orange to-brand-maeve"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-base font-bold", children: l.name }),
+      l.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/60 mt-0.5 leading-relaxed", children: l.description })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "text-sm font-black tabular-nums text-foreground/70 shrink-0", children: [
+      l.xpRequired.toLocaleString(),
+      " XP"
+    ] })
+  ] }, l.level)) });
+}
+export {
+  LevelJourneyList
+};
+//# sourceMappingURL=level-journey-list.js.map

package/dist/components/rewards/level-journey-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/level-journey-list.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn.js\";\n\nexport interface LevelJourneyListLevel {\n  level: number;\n  name: string;\n  xpRequired: number;\n  description: string | null;\n}\n\nexport interface LevelJourneyListProps {\n  levels: LevelJourneyListLevel[];\n  className?: string;\n}\n\n/** The full level ladder as a vertical showcase list — not the old\n *  horizontal chip rail, which doesn't scale past a handful of items and\n *  was built for a dashboard strip, not a 50-row standalone page. No\n *  current-level state: this is the system-wide view, not \"where am I.\"\n *  Every 10th level gets a small gradient marker as a milestone cue;\n *  colors are otherwise uniform (one signature identity, not 50 flat\n *  per-level colors) — badgeColor is deliberately not consumed here. */\nexport function LevelJourneyList({ levels, className }: LevelJourneyListProps) {\n  return (\n    <ol className={cn(\"divide-y divide-foreground/[0.06]\", className)}>\n      {levels.map((l, i) => (\n        <li key={l.level} className=\"flex items-start gap-4 py-4\">\n          <span className=\"flex items-center gap-1.5 w-8 shrink-0 pt-0.5\">\n            <span className=\"text-xs font-bold text-foreground/30 tabular-nums\">{l.level}</span>\n            {(i + 1) % 10 === 0 && (\n              <span\n                aria-hidden\n                className=\"h-1.5 w-1.5 rounded-full bg-gradient-to-r from-brand-orange to-brand-maeve\"\n              />\n            )}\n          </span>\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-base font-bold\">{l.name}</p>\n            {l.description && (\n              <p className=\"text-sm text-foreground/60 mt-0.5 leading-relaxed\">{l.description}</p>\n            )}\n          </div>\n          <span className=\"text-sm font-black tabular-nums text-foreground/70 shrink-0\">\n            {l.xpRequired.toLocaleString()} XP\n          </span>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"mappings":"AA0BU,SACE,KADF;AA1BV,SAAS,UAAU;AAqBZ,SAAS,iBAAiB,EAAE,QAAQ,UAAU,GAA0B;AAC7E,SACE,oBAAC,QAAG,WAAW,GAAG,qCAAqC,SAAS,GAC7D,iBAAO,IAAI,CAAC,GAAG,MACd,qBAAC,QAAiB,WAAU,+BAC1B;AAAA,yBAAC,UAAK,WAAU,iDACd;AAAA,0BAAC,UAAK,WAAU,qDAAqD,YAAE,OAAM;AAAA,OAC3E,IAAI,KAAK,OAAO,KAChB;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAU;AAAA;AAAA,MACZ;AAAA,OAEJ;AAAA,IACA,qBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,OAAE,WAAU,uBAAuB,YAAE,MAAK;AAAA,MAC1C,EAAE,eACD,oBAAC,OAAE,WAAU,qDAAqD,YAAE,aAAY;AAAA,OAEpF;AAAA,IACA,qBAAC,UAAK,WAAU,+DACb;AAAA,QAAE,WAAW,eAAe;AAAA,MAAE;AAAA,OACjC;AAAA,OAlBO,EAAE,KAmBX,CACD,GACH;AAEJ;","names":[]}