@medialane/ui 0.97.0 → 0.99.0

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

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

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

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

package/dist/components/rewards/badge-unlock-toast-content.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BadgeIcon } from "./badge-shelf.js";
+function BadgeUnlockToastContent({ badge }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border",
+        style: { borderColor: `${badge.color}60`, backgroundColor: `${badge.color}18` },
+        children: /* @__PURE__ */ jsx(BadgeIcon, { name: badge.icon, color: badge.color, className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs("p", { className: "truncate text-sm font-semibold", children: [
+        "Badge earned \xB7 ",
+        badge.name
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: badge.description })
+    ] })
+  ] });
+}
+export {
+  BadgeUnlockToastContent
+};
+//# sourceMappingURL=badge-unlock-toast-content.js.map

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

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

package/dist/components/rewards/journey-path.cjs

@@ -0,0 +1,77 @@
+"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 journey_path_exports = {};
+__export(journey_path_exports, {
+  JourneyPath: () => JourneyPath
+});
+module.exports = __toCommonJS(journey_path_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../../utils/cn.js");
+function stateFor(step, index, steps, breakdown) {
+  if ((breakdown[step.actionType] ?? 0) > 0) return "done";
+  const firstNotDone = steps.findIndex((s) => (breakdown[s.actionType] ?? 0) <= 0);
+  return index === firstNotDone ? "current" : "upcoming";
+}
+function JourneyPath({ steps, breakdown = {}, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: (0, import_cn.cn)("flex flex-col gap-1", className), children: steps.map((step, i) => {
+    const state = stateFor(step, i, steps, breakdown);
+    const Icon = step.icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "relative flex items-center gap-3", children: [
+      i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          "aria-hidden": true,
+          className: (0, import_cn.cn)(
+            "absolute left-[15px] top-8 h-[calc(100%-8px)] w-px",
+            state === "done" ? "bg-brand-rose/50" : "bg-border"
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          href: step.href,
+          className: (0, import_cn.cn)(
+            "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border transition-colors",
+            state === "done" && "border-brand-rose/40 bg-brand-rose/15 text-brand-rose",
+            state === "current" && "border-brand-orange/60 bg-brand-orange/10 text-brand-orange",
+            state === "upcoming" && "border-border text-muted-foreground/50"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          href: step.href,
+          className: (0, import_cn.cn)(
+            "flex-1 rounded-lg py-1.5 text-sm font-semibold transition-colors hover:text-foreground",
+            state === "upcoming" ? "text-muted-foreground/60" : "text-foreground"
+          ),
+          children: step.label
+        }
+      )
+    ] }, step.actionType);
+  }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  JourneyPath
+});
+//# sourceMappingURL=journey-path.cjs.map

package/dist/components/rewards/journey-path.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/journey-path.tsx"],"sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface JourneyStep {\n  /** Matches a key in the rewards breakdown (e.g. \"mint_asset\"). */\n  actionType: string;\n  label: string;\n  href: string;\n  icon: ElementType;\n}\n\nexport interface JourneyPathProps {\n  steps: JourneyStep[];\n  /** The signed-in user's `rewards.breakdown` — a step is done when its\n   *  actionType key is present with a positive value. Pass `{}` (or omit)\n   *  for a signed-out visitor — every step renders upcoming. */\n  breakdown?: Record<string, number>;\n  className?: string;\n}\n\ntype StepState = \"done\" | \"current\" | \"upcoming\";\n\nfunction stateFor(step: JourneyStep, index: number, steps: JourneyStep[], breakdown: Record<string, number>): StepState {\n  if ((breakdown[step.actionType] ?? 0) > 0) return \"done\";\n  const firstNotDone = steps.findIndex((s) => (breakdown[s.actionType] ?? 0) <= 0);\n  return index === firstNotDone ? \"current\" : \"upcoming\";\n}\n\n/** A permanent, ordered milestone path — no time window, no reset, no\n *  comparison to other users. A step lights up the moment its action has\n *  ever been done and stays lit forever; the first not-yet-done step is\n *  highlighted as \"current\". Safe to render for a signed-out visitor\n *  (`breakdown` omitted) — every step just renders upcoming, still linkable. */\nexport function JourneyPath({ steps, breakdown = {}, className }: JourneyPathProps) {\n  return (\n    <ol className={cn(\"flex flex-col gap-1\", className)}>\n      {steps.map((step, i) => {\n        const state = stateFor(step, i, steps, breakdown);\n        const Icon = step.icon;\n        return (\n          <li key={step.actionType} className=\"relative flex items-center gap-3\">\n            {i < steps.length - 1 && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"absolute left-[15px] top-8 h-[calc(100%-8px)] w-px\",\n                  state === \"done\" ? \"bg-brand-rose/50\" : \"bg-border\"\n                )}\n              />\n            )}\n            <a\n              href={step.href}\n              className={cn(\n                \"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border transition-colors\",\n                state === \"done\" && \"border-brand-rose/40 bg-brand-rose/15 text-brand-rose\",\n                state === \"current\" && \"border-brand-orange/60 bg-brand-orange/10 text-brand-orange\",\n                state === \"upcoming\" && \"border-border text-muted-foreground/50\"\n              )}\n            >\n              <Icon className=\"h-3.5 w-3.5\" />\n            </a>\n            <a\n              href={step.href}\n              className={cn(\n                \"flex-1 rounded-lg py-1.5 text-sm font-semibold transition-colors hover:text-foreground\",\n                state === \"upcoming\" ? \"text-muted-foreground/60\" : \"text-foreground\"\n              )}\n            >\n              {step.label}\n            </a>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCU;AAvCV,gBAAmB;AAqBnB,SAAS,SAAS,MAAmB,OAAe,OAAsB,WAA8C;AACtH,OAAK,UAAU,KAAK,UAAU,KAAK,KAAK,EAAG,QAAO;AAClD,QAAM,eAAe,MAAM,UAAU,CAAC,OAAO,UAAU,EAAE,UAAU,KAAK,MAAM,CAAC;AAC/E,SAAO,UAAU,eAAe,YAAY;AAC9C;AAOO,SAAS,YAAY,EAAE,OAAO,YAAY,CAAC,GAAG,UAAU,GAAqB;AAClF,SACE,4CAAC,QAAG,eAAW,cAAG,uBAAuB,SAAS,GAC/C,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,QAAQ,SAAS,MAAM,GAAG,OAAO,SAAS;AAChD,UAAM,OAAO,KAAK;AAClB,WACE,6CAAC,QAAyB,WAAU,oCACjC;AAAA,UAAI,MAAM,SAAS,KAClB;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,eAAW;AAAA,YACT;AAAA,YACA,UAAU,SAAS,qBAAqB;AAAA,UAC1C;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,eAAW;AAAA,YACT;AAAA,YACA,UAAU,UAAU;AAAA,YACpB,UAAU,aAAa;AAAA,YACvB,UAAU,cAAc;AAAA,UAC1B;AAAA,UAEA,sDAAC,QAAK,WAAU,eAAc;AAAA;AAAA,MAChC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,eAAW;AAAA,YACT;AAAA,YACA,UAAU,aAAa,6BAA6B;AAAA,UACtD;AAAA,UAEC,eAAK;AAAA;AAAA,MACR;AAAA,SA7BO,KAAK,UA8Bd;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/components/rewards/journey-path.d.cts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ElementType } from 'react';
+
+interface JourneyStep {
+    /** Matches a key in the rewards breakdown (e.g. "mint_asset"). */
+    actionType: string;
+    label: string;
+    href: string;
+    icon: ElementType;
+}
+interface JourneyPathProps {
+    steps: JourneyStep[];
+    /** The signed-in user's `rewards.breakdown` — a step is done when its
+     *  actionType key is present with a positive value. Pass `{}` (or omit)
+     *  for a signed-out visitor — every step renders upcoming. */
+    breakdown?: Record<string, number>;
+    className?: string;
+}
+/** A permanent, ordered milestone path — no time window, no reset, no
+ *  comparison to other users. A step lights up the moment its action has
+ *  ever been done and stays lit forever; the first not-yet-done step is
+ *  highlighted as "current". Safe to render for a signed-out visitor
+ *  (`breakdown` omitted) — every step just renders upcoming, still linkable. */
+declare function JourneyPath({ steps, breakdown, className }: JourneyPathProps): react_jsx_runtime.JSX.Element;
+
+export { JourneyPath, type JourneyPathProps, type JourneyStep };

package/dist/components/rewards/journey-path.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ElementType } from 'react';
+
+interface JourneyStep {
+    /** Matches a key in the rewards breakdown (e.g. "mint_asset"). */
+    actionType: string;
+    label: string;
+    href: string;
+    icon: ElementType;
+}
+interface JourneyPathProps {
+    steps: JourneyStep[];
+    /** The signed-in user's `rewards.breakdown` — a step is done when its
+     *  actionType key is present with a positive value. Pass `{}` (or omit)
+     *  for a signed-out visitor — every step renders upcoming. */
+    breakdown?: Record<string, number>;
+    className?: string;
+}
+/** A permanent, ordered milestone path — no time window, no reset, no
+ *  comparison to other users. A step lights up the moment its action has
+ *  ever been done and stays lit forever; the first not-yet-done step is
+ *  highlighted as "current". Safe to render for a signed-out visitor
+ *  (`breakdown` omitted) — every step just renders upcoming, still linkable. */
+declare function JourneyPath({ steps, breakdown, className }: JourneyPathProps): react_jsx_runtime.JSX.Element;
+
+export { JourneyPath, type JourneyPathProps, type JourneyStep };

package/dist/components/rewards/journey-path.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function stateFor(step, index, steps, breakdown) {
+  if ((breakdown[step.actionType] ?? 0) > 0) return "done";
+  const firstNotDone = steps.findIndex((s) => (breakdown[s.actionType] ?? 0) <= 0);
+  return index === firstNotDone ? "current" : "upcoming";
+}
+function JourneyPath({ steps, breakdown = {}, className }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("flex flex-col gap-1", className), children: steps.map((step, i) => {
+    const state = stateFor(step, i, steps, breakdown);
+    const Icon = step.icon;
+    return /* @__PURE__ */ jsxs("li", { className: "relative flex items-center gap-3", children: [
+      i < steps.length - 1 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "absolute left-[15px] top-8 h-[calc(100%-8px)] w-px",
+            state === "done" ? "bg-brand-rose/50" : "bg-border"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: step.href,
+          className: cn(
+            "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border transition-colors",
+            state === "done" && "border-brand-rose/40 bg-brand-rose/15 text-brand-rose",
+            state === "current" && "border-brand-orange/60 bg-brand-orange/10 text-brand-orange",
+            state === "upcoming" && "border-border text-muted-foreground/50"
+          ),
+          children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: step.href,
+          className: cn(
+            "flex-1 rounded-lg py-1.5 text-sm font-semibold transition-colors hover:text-foreground",
+            state === "upcoming" ? "text-muted-foreground/60" : "text-foreground"
+          ),
+          children: step.label
+        }
+      )
+    ] }, step.actionType);
+  }) });
+}
+export {
+  JourneyPath
+};
+//# sourceMappingURL=journey-path.js.map

package/dist/components/rewards/journey-path.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/journey-path.tsx"],"sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface JourneyStep {\n  /** Matches a key in the rewards breakdown (e.g. \"mint_asset\"). */\n  actionType: string;\n  label: string;\n  href: string;\n  icon: ElementType;\n}\n\nexport interface JourneyPathProps {\n  steps: JourneyStep[];\n  /** The signed-in user's `rewards.breakdown` — a step is done when its\n   *  actionType key is present with a positive value. Pass `{}` (or omit)\n   *  for a signed-out visitor — every step renders upcoming. */\n  breakdown?: Record<string, number>;\n  className?: string;\n}\n\ntype StepState = \"done\" | \"current\" | \"upcoming\";\n\nfunction stateFor(step: JourneyStep, index: number, steps: JourneyStep[], breakdown: Record<string, number>): StepState {\n  if ((breakdown[step.actionType] ?? 0) > 0) return \"done\";\n  const firstNotDone = steps.findIndex((s) => (breakdown[s.actionType] ?? 0) <= 0);\n  return index === firstNotDone ? \"current\" : \"upcoming\";\n}\n\n/** A permanent, ordered milestone path — no time window, no reset, no\n *  comparison to other users. A step lights up the moment its action has\n *  ever been done and stays lit forever; the first not-yet-done step is\n *  highlighted as \"current\". Safe to render for a signed-out visitor\n *  (`breakdown` omitted) — every step just renders upcoming, still linkable. */\nexport function JourneyPath({ steps, breakdown = {}, className }: JourneyPathProps) {\n  return (\n    <ol className={cn(\"flex flex-col gap-1\", className)}>\n      {steps.map((step, i) => {\n        const state = stateFor(step, i, steps, breakdown);\n        const Icon = step.icon;\n        return (\n          <li key={step.actionType} className=\"relative flex items-center gap-3\">\n            {i < steps.length - 1 && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"absolute left-[15px] top-8 h-[calc(100%-8px)] w-px\",\n                  state === \"done\" ? \"bg-brand-rose/50\" : \"bg-border\"\n                )}\n              />\n            )}\n            <a\n              href={step.href}\n              className={cn(\n                \"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border transition-colors\",\n                state === \"done\" && \"border-brand-rose/40 bg-brand-rose/15 text-brand-rose\",\n                state === \"current\" && \"border-brand-orange/60 bg-brand-orange/10 text-brand-orange\",\n                state === \"upcoming\" && \"border-border text-muted-foreground/50\"\n              )}\n            >\n              <Icon className=\"h-3.5 w-3.5\" />\n            </a>\n            <a\n              href={step.href}\n              className={cn(\n                \"flex-1 rounded-lg py-1.5 text-sm font-semibold transition-colors hover:text-foreground\",\n                state === \"upcoming\" ? \"text-muted-foreground/60\" : \"text-foreground\"\n              )}\n            >\n              {step.label}\n            </a>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":"AAwCU,SAEI,KAFJ;AAvCV,SAAS,UAAU;AAqBnB,SAAS,SAAS,MAAmB,OAAe,OAAsB,WAA8C;AACtH,OAAK,UAAU,KAAK,UAAU,KAAK,KAAK,EAAG,QAAO;AAClD,QAAM,eAAe,MAAM,UAAU,CAAC,OAAO,UAAU,EAAE,UAAU,KAAK,MAAM,CAAC;AAC/E,SAAO,UAAU,eAAe,YAAY;AAC9C;AAOO,SAAS,YAAY,EAAE,OAAO,YAAY,CAAC,GAAG,UAAU,GAAqB;AAClF,SACE,oBAAC,QAAG,WAAW,GAAG,uBAAuB,SAAS,GAC/C,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,QAAQ,SAAS,MAAM,GAAG,OAAO,SAAS;AAChD,UAAM,OAAO,KAAK;AAClB,WACE,qBAAC,QAAyB,WAAU,oCACjC;AAAA,UAAI,MAAM,SAAS,KAClB;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,UAAU,SAAS,qBAAqB;AAAA,UAC1C;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,UAAU,UAAU;AAAA,YACpB,UAAU,aAAa;AAAA,YACvB,UAAU,cAAc;AAAA,UAC1B;AAAA,UAEA,8BAAC,QAAK,WAAU,eAAc;AAAA;AAAA,MAChC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,UAAU,aAAa,6BAA6B;AAAA,UACtD;AAAA,UAEC,eAAK;AAAA;AAAA,MACR;AAAA,SA7BO,KAAK,UA8Bd;AAAA,EAEJ,CAAC,GACH;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 };