@medialane/ui 0.51.0 → 0.53.0

package/dist/components/claim-rail.cjs

@@ -23,31 +23,29 @@ __export(claim_rail_exports, {
 module.exports = __toCommonJS(claim_rail_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
-const LABEL = "text-xs font-semibold uppercase tracking-wider text-white/70";
-const CHIP = "h-8 w-8 rounded-lg bg-white/20 backdrop-blur-sm flex items-center justify-center shrink-0";
 function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = import_lucide_react.ShieldCheck }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    included && included.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl p-5 bg-gradient-to-br from-blue-600 to-indigo-700 text-white", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: LABEL, children: "What's included" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl bg-card divide-y divide-border/60 overflow-hidden", children: [
+    included && included.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "p-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "section-label", children: "What's included" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "mt-4 space-y-4", children: included.map(({ icon: Icon, title, desc }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: CHIP, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-4 w-4 text-white" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-4 w-4 text-brand-blue" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-white/80 leading-relaxed mt-0.5", children: desc })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed mt-0.5", children: desc })
         ] })
       ] }, title)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl p-5 bg-gradient-to-br from-violet-600 to-fuchsia-700 text-white", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: LABEL, children: "How it works" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "p-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "section-label", children: "How it works" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "mt-4 space-y-3", children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${CHIP} text-sm font-bold`, children: i + 1 }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-white/90", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-[13px] font-bold tabular-nums", children: i + 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-foreground/90", children: label })
       ] }, label)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl p-5 bg-gradient-to-br from-rose-600 to-orange-600 text-white flex items-start gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrustIcon, { className: "h-5 w-5 text-white shrink-0 mt-0.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm text-white/90 leading-relaxed", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold", children: trustLead }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "p-5 bg-muted/40 flex items-start gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrustIcon, { className: "h-5 w-5 text-brand-orange shrink-0 mt-0.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm text-muted-foreground leading-relaxed", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-foreground", children: trustLead }),
         " ",
         trust
       ] })

package/dist/components/claim-rail.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\n\nexport interface ClaimRailProps {\n  /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n   *  preview is the rail's first panel instead). */\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n  /** \"How it works\" ordered steps. */\n  steps: string[];\n  /** Trust/assurance note: bold lead + the rest of the sentence. */\n  trustLead: string;\n  trust: string;\n  /** Trust glyph — defaults to a shield. */\n  trustIcon?: LucideIcon;\n}\n\nconst LABEL = \"text-xs font-semibold uppercase tracking-wider text-white/70\";\nconst CHIP = \"h-8 w-8 rounded-lg bg-white/20 backdrop-blur-sm flex items-center justify-center shrink-0\";\n\n/** Vivid right-rail for launchpad/claim pages — three \"good vibes\" gradient\n *  panels (What's included · How it works · trust) flowing as a spectrum.\n *  Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n  return (\n    <>\n      {included && included.length > 0 && (\n        <div className=\"rounded-2xl p-5 bg-gradient-to-br from-blue-600 to-indigo-700 text-white\">\n          <p className={LABEL}>What&apos;s included</p>\n          <ul className=\"mt-4 space-y-4\">\n            {included.map(({ icon: Icon, title, desc }) => (\n              <li key={title} className=\"flex items-start gap-3\">\n                <div className={CHIP}>\n                  <Icon className=\"h-4 w-4 text-white\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-semibold\">{title}</p>\n                  <p className=\"text-sm text-white/80 leading-relaxed mt-0.5\">{desc}</p>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n\n      <div className=\"rounded-2xl p-5 bg-gradient-to-br from-violet-600 to-fuchsia-700 text-white\">\n        <p className={LABEL}>How it works</p>\n        <ol className=\"mt-4 space-y-3\">\n          {steps.map((label, i) => (\n            <li key={label} className=\"flex items-center gap-3\">\n              <span className={`${CHIP} text-sm font-bold`}>{i + 1}</span>\n              <span className=\"text-sm text-white/90\">{label}</span>\n            </li>\n          ))}\n        </ol>\n      </div>\n\n      <div className=\"rounded-2xl p-5 bg-gradient-to-br from-rose-600 to-orange-600 text-white flex items-start gap-3\">\n        <TrustIcon className=\"h-5 w-5 text-white shrink-0 mt-0.5\" />\n        <p className=\"text-sm text-white/90 leading-relaxed\">\n          <span className=\"font-semibold\">{trustLead}</span> {trust}\n        </p>\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBI;AAvBJ,0BAA6C;AAe7C,MAAM,QAAQ;AACd,MAAM,OAAO;AAKN,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,gCAAY,GAAmB;AACnH,SACE,4EACG;AAAA,gBAAY,SAAS,SAAS,KAC7B,6CAAC,SAAI,WAAU,4EACb;AAAA,kDAAC,OAAE,WAAW,OAAO,6BAAoB;AAAA,MACzC,4CAAC,QAAG,WAAU,kBACX,mBAAS,IAAI,CAAC,EAAE,MAAM,MAAM,OAAO,KAAK,MACvC,6CAAC,QAAe,WAAU,0BACxB;AAAA,oDAAC,SAAI,WAAW,MACd,sDAAC,QAAK,WAAU,sBAAqB,GACvC;AAAA,QACA,6CAAC,SAAI,WAAU,WACb;AAAA,sDAAC,OAAE,WAAU,yBAAyB,iBAAM;AAAA,UAC5C,4CAAC,OAAE,WAAU,gDAAgD,gBAAK;AAAA,WACpE;AAAA,WAPO,KAQT,CACD,GACH;AAAA,OACF;AAAA,IAGF,6CAAC,SAAI,WAAU,+EACb;AAAA,kDAAC,OAAE,WAAW,OAAO,0BAAY;AAAA,MACjC,4CAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,OAAO,MACjB,6CAAC,QAAe,WAAU,2BACxB;AAAA,oDAAC,UAAK,WAAW,GAAG,IAAI,sBAAuB,cAAI,GAAE;AAAA,QACrD,4CAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA,WAFxC,KAGT,CACD,GACH;AAAA,OACF;AAAA,IAEA,6CAAC,SAAI,WAAU,mGACb;AAAA,kDAAC,aAAU,WAAU,sCAAqC;AAAA,MAC1D,6CAAC,OAAE,WAAU,yCACX;AAAA,oDAAC,UAAK,WAAU,iBAAiB,qBAAU;AAAA,QAAO;AAAA,QAAE;AAAA,SACtD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\n\nexport interface ClaimRailProps {\n  /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n   *  preview is the rail's first panel instead). */\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n  /** \"How it works\" ordered steps. */\n  steps: string[];\n  /** Trust/assurance note: bold lead + the rest of the sentence. */\n  trustLead: string;\n  trust: string;\n  /** Trust glyph — defaults to a shield. */\n  trustIcon?: LucideIcon;\n}\n\n/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card\n *  (What's included · How it works · trust). The brand spectrum appears only\n *  as tints: blue benefit chips → purple step numerals → orange trust glyph.\n *  Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n  return (\n    <div className=\"rounded-2xl bg-card divide-y divide-border/60 overflow-hidden\">\n      {included && included.length > 0 && (\n        <section className=\"p-5\">\n          <p className=\"section-label\">What&apos;s included</p>\n          <ul className=\"mt-4 space-y-4\">\n            {included.map(({ icon: Icon, title, desc }) => (\n              <li key={title} className=\"flex items-start gap-3\">\n                <div className=\"h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0\">\n                  <Icon className=\"h-4 w-4 text-brand-blue\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n                  <p className=\"text-sm text-muted-foreground leading-relaxed mt-0.5\">{desc}</p>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </section>\n      )}\n\n      <section className=\"p-5\">\n        <p className=\"section-label\">How it works</p>\n        <ol className=\"mt-4 space-y-3\">\n          {steps.map((label, i) => (\n            <li key={label} className=\"flex items-center gap-3\">\n              <span className=\"h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-[13px] font-bold tabular-nums\">\n                {i + 1}\n              </span>\n              <span className=\"text-sm text-foreground/90\">{label}</span>\n            </li>\n          ))}\n        </ol>\n      </section>\n\n      <section className=\"p-5 bg-muted/40 flex items-start gap-3\">\n        <TrustIcon className=\"h-5 w-5 text-brand-orange shrink-0 mt-0.5\" />\n        <p className=\"text-sm text-muted-foreground leading-relaxed\">\n          <span className=\"font-semibold text-foreground\">{trustLead}</span> {trust}\n        </p>\n      </section>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBU;AAxBV,0BAA6C;AAmBtC,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,gCAAY,GAAmB;AACnH,SACE,6CAAC,SAAI,WAAU,iEACZ;AAAA,gBAAY,SAAS,SAAS,KAC7B,6CAAC,aAAQ,WAAU,OACjB;AAAA,kDAAC,OAAE,WAAU,iBAAgB,6BAAoB;AAAA,MACjD,4CAAC,QAAG,WAAU,kBACX,mBAAS,IAAI,CAAC,EAAE,MAAM,MAAM,OAAO,KAAK,MACvC,6CAAC,QAAe,WAAU,0BACxB;AAAA,oDAAC,SAAI,WAAU,iFACb,sDAAC,QAAK,WAAU,2BAA0B,GAC5C;AAAA,QACA,6CAAC,SAAI,WAAU,WACb;AAAA,sDAAC,OAAE,WAAU,yCAAyC,iBAAM;AAAA,UAC5D,4CAAC,OAAE,WAAU,wDAAwD,gBAAK;AAAA,WAC5E;AAAA,WAPO,KAQT,CACD,GACH;AAAA,OACF;AAAA,IAGF,6CAAC,aAAQ,WAAU,OACjB;AAAA,kDAAC,OAAE,WAAU,iBAAgB,0BAAY;AAAA,MACzC,4CAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,OAAO,MACjB,6CAAC,QAAe,WAAU,2BACxB;AAAA,oDAAC,UAAK,WAAU,wIACb,cAAI,GACP;AAAA,QACA,4CAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAJ7C,KAKT,CACD,GACH;AAAA,OACF;AAAA,IAEA,6CAAC,aAAQ,WAAU,0CACjB;AAAA,kDAAC,aAAU,WAAU,6CAA4C;AAAA,MACjE,6CAAC,OAAE,WAAU,iDACX;AAAA,oDAAC,UAAK,WAAU,iCAAiC,qBAAU;AAAA,QAAO;AAAA,QAAE;AAAA,SACtE;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/claim-rail.d.cts

@@ -17,8 +17,9 @@ interface ClaimRailProps {
     /** Trust glyph — defaults to a shield. */
     trustIcon?: LucideIcon;
 }
-/** Vivid right-rail for launchpad/claim pages — three "good vibes" gradient
- *  panels (What's included · How it works · trust) flowing as a spectrum.
+/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card
+ *  (What's included · How it works · trust). The brand spectrum appears only
+ *  as tints: blue benefit chips → purple step numerals → orange trust glyph.
  *  Pure presentation; the consuming app passes the per-surface content. */
 declare function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon }: ClaimRailProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/claim-rail.d.ts

@@ -17,8 +17,9 @@ interface ClaimRailProps {
     /** Trust glyph — defaults to a shield. */
     trustIcon?: LucideIcon;
 }
-/** Vivid right-rail for launchpad/claim pages — three "good vibes" gradient
- *  panels (What's included · How it works · trust) flowing as a spectrum.
+/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card
+ *  (What's included · How it works · trust). The brand spectrum appears only
+ *  as tints: blue benefit chips → purple step numerals → orange trust glyph.
  *  Pure presentation; the consuming app passes the per-surface content. */
 declare function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon }: ClaimRailProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/claim-rail.js

@@ -1,30 +1,28 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ShieldCheck } from "lucide-react";
-const LABEL = "text-xs font-semibold uppercase tracking-wider text-white/70";
-const CHIP = "h-8 w-8 rounded-lg bg-white/20 backdrop-blur-sm flex items-center justify-center shrink-0";
 function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    included && included.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-2xl p-5 bg-gradient-to-br from-blue-600 to-indigo-700 text-white", children: [
-      /* @__PURE__ */ jsx("p", { className: LABEL, children: "What's included" }),
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-card divide-y divide-border/60 overflow-hidden", children: [
+    included && included.length > 0 && /* @__PURE__ */ jsxs("section", { className: "p-5", children: [
+      /* @__PURE__ */ jsx("p", { className: "section-label", children: "What's included" }),
       /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-4", children: included.map(({ icon: Icon, title, desc }) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: CHIP, children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-white" }) }),
+        /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-brand-blue" }) }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-white/80 leading-relaxed mt-0.5", children: desc })
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed mt-0.5", children: desc })
         ] })
       ] }, title)) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "rounded-2xl p-5 bg-gradient-to-br from-violet-600 to-fuchsia-700 text-white", children: [
-      /* @__PURE__ */ jsx("p", { className: LABEL, children: "How it works" }),
+    /* @__PURE__ */ jsxs("section", { className: "p-5", children: [
+      /* @__PURE__ */ jsx("p", { className: "section-label", children: "How it works" }),
       /* @__PURE__ */ jsx("ol", { className: "mt-4 space-y-3", children: steps.map((label, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: `${CHIP} text-sm font-bold`, children: i + 1 }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-white/90", children: label })
+        /* @__PURE__ */ jsx("span", { className: "h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-[13px] font-bold tabular-nums", children: i + 1 }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground/90", children: label })
       ] }, label)) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "rounded-2xl p-5 bg-gradient-to-br from-rose-600 to-orange-600 text-white flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx(TrustIcon, { className: "h-5 w-5 text-white shrink-0 mt-0.5" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-sm text-white/90 leading-relaxed", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: trustLead }),
+    /* @__PURE__ */ jsxs("section", { className: "p-5 bg-muted/40 flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(TrustIcon, { className: "h-5 w-5 text-brand-orange shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground leading-relaxed", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: trustLead }),
         " ",
         trust
       ] })

package/dist/components/claim-rail.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\n\nexport interface ClaimRailProps {\n  /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n   *  preview is the rail's first panel instead). */\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n  /** \"How it works\" ordered steps. */\n  steps: string[];\n  /** Trust/assurance note: bold lead + the rest of the sentence. */\n  trustLead: string;\n  trust: string;\n  /** Trust glyph — defaults to a shield. */\n  trustIcon?: LucideIcon;\n}\n\nconst LABEL = \"text-xs font-semibold uppercase tracking-wider text-white/70\";\nconst CHIP = \"h-8 w-8 rounded-lg bg-white/20 backdrop-blur-sm flex items-center justify-center shrink-0\";\n\n/** Vivid right-rail for launchpad/claim pages — three \"good vibes\" gradient\n *  panels (What's included · How it works · trust) flowing as a spectrum.\n *  Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n  return (\n    <>\n      {included && included.length > 0 && (\n        <div className=\"rounded-2xl p-5 bg-gradient-to-br from-blue-600 to-indigo-700 text-white\">\n          <p className={LABEL}>What&apos;s included</p>\n          <ul className=\"mt-4 space-y-4\">\n            {included.map(({ icon: Icon, title, desc }) => (\n              <li key={title} className=\"flex items-start gap-3\">\n                <div className={CHIP}>\n                  <Icon className=\"h-4 w-4 text-white\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-semibold\">{title}</p>\n                  <p className=\"text-sm text-white/80 leading-relaxed mt-0.5\">{desc}</p>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n\n      <div className=\"rounded-2xl p-5 bg-gradient-to-br from-violet-600 to-fuchsia-700 text-white\">\n        <p className={LABEL}>How it works</p>\n        <ol className=\"mt-4 space-y-3\">\n          {steps.map((label, i) => (\n            <li key={label} className=\"flex items-center gap-3\">\n              <span className={`${CHIP} text-sm font-bold`}>{i + 1}</span>\n              <span className=\"text-sm text-white/90\">{label}</span>\n            </li>\n          ))}\n        </ol>\n      </div>\n\n      <div className=\"rounded-2xl p-5 bg-gradient-to-br from-rose-600 to-orange-600 text-white flex items-start gap-3\">\n        <TrustIcon className=\"h-5 w-5 text-white shrink-0 mt-0.5\" />\n        <p className=\"text-sm text-white/90 leading-relaxed\">\n          <span className=\"font-semibold\">{trustLead}</span> {trust}\n        </p>\n      </div>\n    </>\n  );\n}\n"],"mappings":"AAuBI,mBAGM,KAOM,YAVZ;AAvBJ,SAAS,mBAAoC;AAe7C,MAAM,QAAQ;AACd,MAAM,OAAO;AAKN,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,YAAY,GAAmB;AACnH,SACE,iCACG;AAAA,gBAAY,SAAS,SAAS,KAC7B,qBAAC,SAAI,WAAU,4EACb;AAAA,0BAAC,OAAE,WAAW,OAAO,6BAAoB;AAAA,MACzC,oBAAC,QAAG,WAAU,kBACX,mBAAS,IAAI,CAAC,EAAE,MAAM,MAAM,OAAO,KAAK,MACvC,qBAAC,QAAe,WAAU,0BACxB;AAAA,4BAAC,SAAI,WAAW,MACd,8BAAC,QAAK,WAAU,sBAAqB,GACvC;AAAA,QACA,qBAAC,SAAI,WAAU,WACb;AAAA,8BAAC,OAAE,WAAU,yBAAyB,iBAAM;AAAA,UAC5C,oBAAC,OAAE,WAAU,gDAAgD,gBAAK;AAAA,WACpE;AAAA,WAPO,KAQT,CACD,GACH;AAAA,OACF;AAAA,IAGF,qBAAC,SAAI,WAAU,+EACb;AAAA,0BAAC,OAAE,WAAW,OAAO,0BAAY;AAAA,MACjC,oBAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,OAAO,MACjB,qBAAC,QAAe,WAAU,2BACxB;AAAA,4BAAC,UAAK,WAAW,GAAG,IAAI,sBAAuB,cAAI,GAAE;AAAA,QACrD,oBAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA,WAFxC,KAGT,CACD,GACH;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,mGACb;AAAA,0BAAC,aAAU,WAAU,sCAAqC;AAAA,MAC1D,qBAAC,OAAE,WAAU,yCACX;AAAA,4BAAC,UAAK,WAAU,iBAAiB,qBAAU;AAAA,QAAO;AAAA,QAAE;AAAA,SACtD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\n\nexport interface ClaimRailProps {\n  /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n   *  preview is the rail's first panel instead). */\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n  /** \"How it works\" ordered steps. */\n  steps: string[];\n  /** Trust/assurance note: bold lead + the rest of the sentence. */\n  trustLead: string;\n  trust: string;\n  /** Trust glyph — defaults to a shield. */\n  trustIcon?: LucideIcon;\n}\n\n/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card\n *  (What's included · How it works · trust). The brand spectrum appears only\n *  as tints: blue benefit chips → purple step numerals → orange trust glyph.\n *  Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n  return (\n    <div className=\"rounded-2xl bg-card divide-y divide-border/60 overflow-hidden\">\n      {included && included.length > 0 && (\n        <section className=\"p-5\">\n          <p className=\"section-label\">What&apos;s included</p>\n          <ul className=\"mt-4 space-y-4\">\n            {included.map(({ icon: Icon, title, desc }) => (\n              <li key={title} className=\"flex items-start gap-3\">\n                <div className=\"h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0\">\n                  <Icon className=\"h-4 w-4 text-brand-blue\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n                  <p className=\"text-sm text-muted-foreground leading-relaxed mt-0.5\">{desc}</p>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </section>\n      )}\n\n      <section className=\"p-5\">\n        <p className=\"section-label\">How it works</p>\n        <ol className=\"mt-4 space-y-3\">\n          {steps.map((label, i) => (\n            <li key={label} className=\"flex items-center gap-3\">\n              <span className=\"h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-[13px] font-bold tabular-nums\">\n                {i + 1}\n              </span>\n              <span className=\"text-sm text-foreground/90\">{label}</span>\n            </li>\n          ))}\n        </ol>\n      </section>\n\n      <section className=\"p-5 bg-muted/40 flex items-start gap-3\">\n        <TrustIcon className=\"h-5 w-5 text-brand-orange shrink-0 mt-0.5\" />\n        <p className=\"text-sm text-muted-foreground leading-relaxed\">\n          <span className=\"font-semibold text-foreground\">{trustLead}</span> {trust}\n        </p>\n      </section>\n    </div>\n  );\n}\n"],"mappings":"AAwBU,cAOM,YAPN;AAxBV,SAAS,mBAAoC;AAmBtC,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,YAAY,GAAmB;AACnH,SACE,qBAAC,SAAI,WAAU,iEACZ;AAAA,gBAAY,SAAS,SAAS,KAC7B,qBAAC,aAAQ,WAAU,OACjB;AAAA,0BAAC,OAAE,WAAU,iBAAgB,6BAAoB;AAAA,MACjD,oBAAC,QAAG,WAAU,kBACX,mBAAS,IAAI,CAAC,EAAE,MAAM,MAAM,OAAO,KAAK,MACvC,qBAAC,QAAe,WAAU,0BACxB;AAAA,4BAAC,SAAI,WAAU,iFACb,8BAAC,QAAK,WAAU,2BAA0B,GAC5C;AAAA,QACA,qBAAC,SAAI,WAAU,WACb;AAAA,8BAAC,OAAE,WAAU,yCAAyC,iBAAM;AAAA,UAC5D,oBAAC,OAAE,WAAU,wDAAwD,gBAAK;AAAA,WAC5E;AAAA,WAPO,KAQT,CACD,GACH;AAAA,OACF;AAAA,IAGF,qBAAC,aAAQ,WAAU,OACjB;AAAA,0BAAC,OAAE,WAAU,iBAAgB,0BAAY;AAAA,MACzC,oBAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,OAAO,MACjB,qBAAC,QAAe,WAAU,2BACxB;AAAA,4BAAC,UAAK,WAAU,wIACb,cAAI,GACP;AAAA,QACA,oBAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAJ7C,KAKT,CACD,GACH;AAAA,OACF;AAAA,IAEA,qBAAC,aAAQ,WAAU,0CACjB;AAAA,0BAAC,aAAU,WAAU,6CAA4C;AAAA,MACjE,qBAAC,OAAE,WAAU,iDACX;AAAA,4BAAC,UAAK,WAAU,iCAAiC,qBAAU;AAAA,QAAO;AAAA,QAAE;AAAA,SACtE;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/service-form-shell.cjs

@@ -25,8 +25,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_cn = require("../utils/cn.js");
 var import_service_header = require("./service-header.js");
 function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }) {
-  const header = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_service_header.ServiceHeader, { plain: true, icon, title, subtitle, headerAccessory });
-  const form = aside ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "btn-border-animated p-[1.5px] rounded-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-[15px] bg-card p-5 sm:p-6", children }) }) : children;
+  const header = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_service_header.ServiceHeader, { bare: true, icon, title, subtitle, headerAccessory });
+  const form = aside ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-2xl bg-card p-5 sm:p-6", children }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20", aside ? "max-w-5xl" : "max-w-3xl"), children: [
     backSlot,
     aside ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-4 lg:grid-cols-12 lg:items-start", children: [

package/dist/components/service-form-shell.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n  /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element under the header subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  /** Rendered above the header — the app's own back button (router-specific). */\n  backSlot?: ReactNode;\n  /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n  aside?: ReactNode;\n  /** Rendered in the left column between the header and the form — e.g. a\n   *  <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n  aboveForm?: ReactNode;\n  /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n   *  gate before passing. This component stays presentation-only (no auth,\n   *  no router) so both apps can share it. */\n  children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + gradient header, then the\n *  form inside the animated full-spectrum border (`.btn-border-animated`, from\n *  @medialane/ui/styles). With an `aside` it lays out an 8/4 bento (form left,\n *  rail right); without, a single centered column. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n  // Plain header: the form below already carries the animated gradient border,\n  // so the header drops its gradient frame to keep a single focal accent.\n  const header = <ServiceHeader plain icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n  // The form is the focus: animated gradient border around the dark card.\n  const form = aside ? (\n    <div className=\"btn-border-animated p-[1.5px] rounded-2xl\">\n      <div className=\"rounded-[15px] bg-card p-5 sm:p-6\">{children}</div>\n    </div>\n  ) : (\n    children\n  );\n\n  return (\n    <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n      {backSlot}\n      {aside ? (\n        <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n          <div className=\"space-y-4 lg:col-span-8\">\n            {header}\n            {aboveForm}\n            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          {header}\n          {form}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BiB;AA9BjB,gBAAmB;AACnB,4BAA8B;AA0BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAGxI,QAAM,SAAS,4CAAC,uCAAc,OAAK,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAGpH,QAAM,OAAO,QACX,4CAAC,SAAI,WAAU,6CACb,sDAAC,SAAI,WAAU,qCAAqC,UAAS,GAC/D,IAEA;AAGF,SACE,6CAAC,SAAI,eAAW,cAAG,wDAAwD,QAAQ,cAAc,WAAW,GACzG;AAAA;AAAA,IACA,QACC,6CAAC,SAAI,WAAU,6CACb;AAAA,mDAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA,MACA,4CAAC,SAAI,WAAU,+CAA+C,iBAAM;AAAA,OACtE,IAEA,6CAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n  /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element under the header subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  /** Rendered above the header — the app's own back button (router-specific). */\n  backSlot?: ReactNode;\n  /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n  aside?: ReactNode;\n  /** Rendered in the left column between the header and the form — e.g. a\n   *  <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n  aboveForm?: ReactNode;\n  /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n   *  gate before passing. This component stays presentation-only (no auth,\n   *  no router) so both apps can share it. */\n  children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + bare header (no card), then\n *  the form in a quiet borderless card — the surface color alone separates it\n *  from the page. With an `aside` it lays out an 8/4 bento (form left, rail\n *  right); without, a single centered column. The brand gradient belongs to\n *  the form's action button, not to any container. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n  // Bare header: the form card is the page's only panel.\n  const header = <ServiceHeader bare icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n  const form = aside ? (\n    <div className=\"rounded-2xl bg-card p-5 sm:p-6\">{children}</div>\n  ) : (\n    children\n  );\n\n  return (\n    <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n      {backSlot}\n      {aside ? (\n        <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n          <div className=\"space-y-4 lg:col-span-8\">\n            {header}\n            {aboveForm}\n            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          {header}\n          {form}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BiB;AA9BjB,gBAAmB;AACnB,4BAA8B;AA2BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAExI,QAAM,SAAS,4CAAC,uCAAc,MAAI,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAEnH,QAAM,OAAO,QACX,4CAAC,SAAI,WAAU,kCAAkC,UAAS,IAE1D;AAGF,SACE,6CAAC,SAAI,eAAW,cAAG,wDAAwD,QAAQ,cAAc,WAAW,GACzG;AAAA;AAAA,IACA,QACC,6CAAC,SAAI,WAAU,6CACb;AAAA,mDAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA,MACA,4CAAC,SAAI,WAAU,+CAA+C,iBAAM;AAAA,OACtE,IAEA,6CAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/service-form-shell.d.cts

@@ -20,10 +20,11 @@ interface ServiceFormShellProps {
      *  no router) so both apps can share it. */
     children: ReactNode;
 }
-/** Shared launchpad/claim form layout: back slot + gradient header, then the
- *  form inside the animated full-spectrum border (`.btn-border-animated`, from
- *  @medialane/ui/styles). With an `aside` it lays out an 8/4 bento (form left,
- *  rail right); without, a single centered column. */
+/** Shared launchpad/claim form layout: back slot + bare header (no card), then
+ *  the form in a quiet borderless card — the surface color alone separates it
+ *  from the page. With an `aside` it lays out an 8/4 bento (form left, rail
+ *  right); without, a single centered column. The brand gradient belongs to
+ *  the form's action button, not to any container. */
 declare function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps): react_jsx_runtime.JSX.Element;
 
 export { ServiceFormShell, type ServiceFormShellProps };

package/dist/components/service-form-shell.d.ts

@@ -20,10 +20,11 @@ interface ServiceFormShellProps {
      *  no router) so both apps can share it. */
     children: ReactNode;
 }
-/** Shared launchpad/claim form layout: back slot + gradient header, then the
- *  form inside the animated full-spectrum border (`.btn-border-animated`, from
- *  @medialane/ui/styles). With an `aside` it lays out an 8/4 bento (form left,
- *  rail right); without, a single centered column. */
+/** Shared launchpad/claim form layout: back slot + bare header (no card), then
+ *  the form in a quiet borderless card — the surface color alone separates it
+ *  from the page. With an `aside` it lays out an 8/4 bento (form left, rail
+ *  right); without, a single centered column. The brand gradient belongs to
+ *  the form's action button, not to any container. */
 declare function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps): react_jsx_runtime.JSX.Element;
 
 export { ServiceFormShell, type ServiceFormShellProps };

package/dist/components/service-form-shell.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../utils/cn.js";
 import { ServiceHeader } from "./service-header.js";
 function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }) {
-  const header = /* @__PURE__ */ jsx(ServiceHeader, { plain: true, icon, title, subtitle, headerAccessory });
-  const form = aside ? /* @__PURE__ */ jsx("div", { className: "btn-border-animated p-[1.5px] rounded-2xl", children: /* @__PURE__ */ jsx("div", { className: "rounded-[15px] bg-card p-5 sm:p-6", children }) }) : children;
+  const header = /* @__PURE__ */ jsx(ServiceHeader, { bare: true, icon, title, subtitle, headerAccessory });
+  const form = aside ? /* @__PURE__ */ jsx("div", { className: "rounded-2xl bg-card p-5 sm:p-6", children }) : children;
   return /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20", aside ? "max-w-5xl" : "max-w-3xl"), children: [
     backSlot,
     aside ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-12 lg:items-start", children: [

package/dist/components/service-form-shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n  /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element under the header subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  /** Rendered above the header — the app's own back button (router-specific). */\n  backSlot?: ReactNode;\n  /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n  aside?: ReactNode;\n  /** Rendered in the left column between the header and the form — e.g. a\n   *  <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n  aboveForm?: ReactNode;\n  /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n   *  gate before passing. This component stays presentation-only (no auth,\n   *  no router) so both apps can share it. */\n  children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + gradient header, then the\n *  form inside the animated full-spectrum border (`.btn-border-animated`, from\n *  @medialane/ui/styles). With an `aside` it lays out an 8/4 bento (form left,\n *  rail right); without, a single centered column. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n  // Plain header: the form below already carries the animated gradient border,\n  // so the header drops its gradient frame to keep a single focal accent.\n  const header = <ServiceHeader plain icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n  // The form is the focus: animated gradient border around the dark card.\n  const form = aside ? (\n    <div className=\"btn-border-animated p-[1.5px] rounded-2xl\">\n      <div className=\"rounded-[15px] bg-card p-5 sm:p-6\">{children}</div>\n    </div>\n  ) : (\n    children\n  );\n\n  return (\n    <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n      {backSlot}\n      {aside ? (\n        <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n          <div className=\"space-y-4 lg:col-span-8\">\n            {header}\n            {aboveForm}\n            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          {header}\n          {form}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA+BiB,cAgBP,YAhBO;AA9BjB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AA0BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAGxI,QAAM,SAAS,oBAAC,iBAAc,OAAK,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAGpH,QAAM,OAAO,QACX,oBAAC,SAAI,WAAU,6CACb,8BAAC,SAAI,WAAU,qCAAqC,UAAS,GAC/D,IAEA;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,wDAAwD,QAAQ,cAAc,WAAW,GACzG;AAAA;AAAA,IACA,QACC,qBAAC,SAAI,WAAU,6CACb;AAAA,2BAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA,MACA,oBAAC,SAAI,WAAU,+CAA+C,iBAAM;AAAA,OACtE,IAEA,qBAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n  /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element under the header subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  /** Rendered above the header — the app's own back button (router-specific). */\n  backSlot?: ReactNode;\n  /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n  aside?: ReactNode;\n  /** Rendered in the left column between the header and the form — e.g. a\n   *  <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n  aboveForm?: ReactNode;\n  /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n   *  gate before passing. This component stays presentation-only (no auth,\n   *  no router) so both apps can share it. */\n  children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + bare header (no card), then\n *  the form in a quiet borderless card — the surface color alone separates it\n *  from the page. With an `aside` it lays out an 8/4 bento (form left, rail\n *  right); without, a single centered column. The brand gradient belongs to\n *  the form's action button, not to any container. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n  // Bare header: the form card is the page's only panel.\n  const header = <ServiceHeader bare icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n  const form = aside ? (\n    <div className=\"rounded-2xl bg-card p-5 sm:p-6\">{children}</div>\n  ) : (\n    children\n  );\n\n  return (\n    <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n      {backSlot}\n      {aside ? (\n        <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n          <div className=\"space-y-4 lg:col-span-8\">\n            {header}\n            {aboveForm}\n            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          {header}\n          {form}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA+BiB,cAaP,YAbO;AA9BjB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AA2BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAExI,QAAM,SAAS,oBAAC,iBAAc,MAAI,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAEnH,QAAM,OAAO,QACX,oBAAC,SAAI,WAAU,kCAAkC,UAAS,IAE1D;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,wDAAwD,QAAQ,cAAc,WAAW,GACzG;AAAA;AAAA,IACA,QACC,qBAAC,SAAI,WAAU,6CACb;AAAA,2BAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA,MACA,oBAAC,SAAI,WAAU,+CAA+C,iBAAM;AAAA,OACtE,IAEA,qBAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/service-header.cjs

@@ -23,15 +23,18 @@ __export(service_header_exports, {
 module.exports = __toCommonJS(service_header_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_cn = require("../utils/cn.js");
-function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain = false }) {
+function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain = false, bare = false }) {
   const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-9 w-9 rounded-xl bg-primary flex items-center justify-center shrink-0", children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-2xl sm:text-3xl font-black", children: title })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-2xl sm:text-3xl font-black tracking-tight", children: title })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1.5 text-sm text-muted-foreground max-w-xl", children: subtitle }),
     headerAccessory && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4", children: headerAccessory })
   ] });
+  if (bare) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: body });
+  }
   if (plain) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("rounded-2xl border border-border/60 bg-card p-6 sm:p-7", className), children: body });
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/service-header.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface ServiceHeaderProps {\n  /** Rendered icon element, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element shown under the subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  className?: string;\n  /** Drop the brand gradient border for a plain neutral-bordered card. Used by\n   *  ServiceFormShell (create/mint form pages) where the form already carries\n   *  the animated gradient border, so the header shouldn't compete. Standalone\n   *  headers (browse pages, coin page, /claim hub) keep the gradient. */\n  plain?: boolean;\n}\n\n/** Shared launchpad/claim page header: a dark card with a solid primary icon\n *  chip, title + subtitle. By default it sits on a static brand gradient\n *  border; pass `plain` for a neutral-bordered card. Pure presentation —\n *  consuming app supplies the icon and (optionally) a header accessory. */\nexport function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain = false }: ServiceHeaderProps) {\n  const body = (\n    <>\n      <div className=\"flex items-center gap-2.5\">\n        <div className=\"h-9 w-9 rounded-xl bg-primary flex items-center justify-center shrink-0\">\n          {icon}\n        </div>\n        <h1 className=\"text-2xl sm:text-3xl font-black\">{title}</h1>\n      </div>\n      <p className=\"mt-1.5 text-sm text-muted-foreground max-w-xl\">{subtitle}</p>\n      {headerAccessory && <div className=\"mt-4\">{headerAccessory}</div>}\n    </>\n  );\n\n  if (plain) {\n    return <div className={cn(\"rounded-2xl border border-border/60 bg-card p-6 sm:p-7\", className)}>{body}</div>;\n  }\n\n  return (\n    <div className={cn(\"rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose\", className)}>\n      <div className=\"rounded-[15px] bg-card p-6 sm:p-7\">{body}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBI;AAvBJ,gBAAmB;AAqBZ,SAAS,cAAc,EAAE,MAAM,OAAO,UAAU,iBAAiB,WAAW,QAAQ,MAAM,GAAuB;AACtH,QAAM,OACJ,4EACE;AAAA,iDAAC,SAAI,WAAU,6BACb;AAAA,kDAAC,SAAI,WAAU,2EACZ,gBACH;AAAA,MACA,4CAAC,QAAG,WAAU,mCAAmC,iBAAM;AAAA,OACzD;AAAA,IACA,4CAAC,OAAE,WAAU,iDAAiD,oBAAS;AAAA,IACtE,mBAAmB,4CAAC,SAAI,WAAU,QAAQ,2BAAgB;AAAA,KAC7D;AAGF,MAAI,OAAO;AACT,WAAO,4CAAC,SAAI,eAAW,cAAG,0DAA0D,SAAS,GAAI,gBAAK;AAAA,EACxG;AAEA,SACE,4CAAC,SAAI,eAAW,cAAG,0FAA0F,SAAS,GACpH,sDAAC,SAAI,WAAU,qCAAqC,gBAAK,GAC3D;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/service-header.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface ServiceHeaderProps {\n  /** Rendered icon element, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element shown under the subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  className?: string;\n  /** Drop the brand gradient border for a plain neutral-bordered card.\n   *  Standalone headers (browse pages, coin page, /claim hub) keep the\n   *  gradient by default. */\n  plain?: boolean;\n  /** No card at all — icon chip + title + subtitle on the page background.\n   *  Used by ServiceFormShell so the form card is the page's only panel. */\n  bare?: boolean;\n}\n\n/** Shared launchpad/claim page header: a dark card with a solid primary icon\n *  chip, title + subtitle. By default it sits on a static brand gradient\n *  border; pass `plain` for a neutral-bordered card. Pure presentation —\n *  consuming app supplies the icon and (optionally) a header accessory. */\nexport function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain = false, bare = false }: ServiceHeaderProps) {\n  const body = (\n    <>\n      <div className=\"flex items-center gap-2.5\">\n        <div className=\"h-9 w-9 rounded-xl bg-primary flex items-center justify-center shrink-0\">\n          {icon}\n        </div>\n        <h1 className=\"text-2xl sm:text-3xl font-black tracking-tight\">{title}</h1>\n      </div>\n      <p className=\"mt-1.5 text-sm text-muted-foreground max-w-xl\">{subtitle}</p>\n      {headerAccessory && <div className=\"mt-4\">{headerAccessory}</div>}\n    </>\n  );\n\n  if (bare) {\n    return <div className={className}>{body}</div>;\n  }\n\n  if (plain) {\n    return <div className={cn(\"rounded-2xl border border-border/60 bg-card p-6 sm:p-7\", className)}>{body}</div>;\n  }\n\n  return (\n    <div className={cn(\"rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose\", className)}>\n      <div className=\"rounded-[15px] bg-card p-6 sm:p-7\">{body}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BI;AAzBJ,gBAAmB;AAuBZ,SAAS,cAAc,EAAE,MAAM,OAAO,UAAU,iBAAiB,WAAW,QAAQ,OAAO,OAAO,MAAM,GAAuB;AACpI,QAAM,OACJ,4EACE;AAAA,iDAAC,SAAI,WAAU,6BACb;AAAA,kDAAC,SAAI,WAAU,2EACZ,gBACH;AAAA,MACA,4CAAC,QAAG,WAAU,kDAAkD,iBAAM;AAAA,OACxE;AAAA,IACA,4CAAC,OAAE,WAAU,iDAAiD,oBAAS;AAAA,IACtE,mBAAmB,4CAAC,SAAI,WAAU,QAAQ,2BAAgB;AAAA,KAC7D;AAGF,MAAI,MAAM;AACR,WAAO,4CAAC,SAAI,WAAuB,gBAAK;AAAA,EAC1C;AAEA,MAAI,OAAO;AACT,WAAO,4CAAC,SAAI,eAAW,cAAG,0DAA0D,SAAS,GAAI,gBAAK;AAAA,EACxG;AAEA,SACE,4CAAC,SAAI,eAAW,cAAG,0FAA0F,SAAS,GACpH,sDAAC,SAAI,WAAU,qCAAqC,gBAAK,GAC3D;AAEJ;","names":[]}

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

@@ -9,16 +9,18 @@ interface ServiceHeaderProps {
     /** Optional element shown under the subtitle (e.g. a URL pill). */
     headerAccessory?: ReactNode;
     className?: string;
-    /** Drop the brand gradient border for a plain neutral-bordered card. Used by
-     *  ServiceFormShell (create/mint form pages) where the form already carries
-     *  the animated gradient border, so the header shouldn't compete. Standalone
-     *  headers (browse pages, coin page, /claim hub) keep the gradient. */
+    /** Drop the brand gradient border for a plain neutral-bordered card.
+     *  Standalone headers (browse pages, coin page, /claim hub) keep the
+     *  gradient by default. */
     plain?: boolean;
+    /** No card at all — icon chip + title + subtitle on the page background.
+     *  Used by ServiceFormShell so the form card is the page's only panel. */
+    bare?: boolean;
 }
 /** Shared launchpad/claim page header: a dark card with a solid primary icon
  *  chip, title + subtitle. By default it sits on a static brand gradient
  *  border; pass `plain` for a neutral-bordered card. Pure presentation —
  *  consuming app supplies the icon and (optionally) a header accessory. */
-declare function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain }: ServiceHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain, bare }: ServiceHeaderProps): react_jsx_runtime.JSX.Element;
 
 export { ServiceHeader, type ServiceHeaderProps };

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

@@ -9,16 +9,18 @@ interface ServiceHeaderProps {
     /** Optional element shown under the subtitle (e.g. a URL pill). */
     headerAccessory?: ReactNode;
     className?: string;
-    /** Drop the brand gradient border for a plain neutral-bordered card. Used by
-     *  ServiceFormShell (create/mint form pages) where the form already carries
-     *  the animated gradient border, so the header shouldn't compete. Standalone
-     *  headers (browse pages, coin page, /claim hub) keep the gradient. */
+    /** Drop the brand gradient border for a plain neutral-bordered card.
+     *  Standalone headers (browse pages, coin page, /claim hub) keep the
+     *  gradient by default. */
     plain?: boolean;
+    /** No card at all — icon chip + title + subtitle on the page background.
+     *  Used by ServiceFormShell so the form card is the page's only panel. */
+    bare?: boolean;
 }
 /** Shared launchpad/claim page header: a dark card with a solid primary icon
  *  chip, title + subtitle. By default it sits on a static brand gradient
  *  border; pass `plain` for a neutral-bordered card. Pure presentation —
  *  consuming app supplies the icon and (optionally) a header accessory. */
-declare function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain }: ServiceHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain, bare }: ServiceHeaderProps): react_jsx_runtime.JSX.Element;
 
 export { ServiceHeader, type ServiceHeaderProps };

package/dist/components/service-header.js

@@ -1,14 +1,17 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../utils/cn.js";
-function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain = false }) {
+function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain = false, bare = false }) {
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
       /* @__PURE__ */ jsx("div", { className: "h-9 w-9 rounded-xl bg-primary flex items-center justify-center shrink-0", children: icon }),
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl sm:text-3xl font-black", children: title })
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl sm:text-3xl font-black tracking-tight", children: title })
     ] }),
     /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground max-w-xl", children: subtitle }),
     headerAccessory && /* @__PURE__ */ jsx("div", { className: "mt-4", children: headerAccessory })
   ] });
+  if (bare) {
+    return /* @__PURE__ */ jsx("div", { className, children: body });
+  }
   if (plain) {
     return /* @__PURE__ */ jsx("div", { className: cn("rounded-2xl border border-border/60 bg-card p-6 sm:p-7", className), children: body });
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/service-header.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface ServiceHeaderProps {\n  /** Rendered icon element, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element shown under the subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  className?: string;\n  /** Drop the brand gradient border for a plain neutral-bordered card. Used by\n   *  ServiceFormShell (create/mint form pages) where the form already carries\n   *  the animated gradient border, so the header shouldn't compete. Standalone\n   *  headers (browse pages, coin page, /claim hub) keep the gradient. */\n  plain?: boolean;\n}\n\n/** Shared launchpad/claim page header: a dark card with a solid primary icon\n *  chip, title + subtitle. By default it sits on a static brand gradient\n *  border; pass `plain` for a neutral-bordered card. Pure presentation —\n *  consuming app supplies the icon and (optionally) a header accessory. */\nexport function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain = false }: ServiceHeaderProps) {\n  const body = (\n    <>\n      <div className=\"flex items-center gap-2.5\">\n        <div className=\"h-9 w-9 rounded-xl bg-primary flex items-center justify-center shrink-0\">\n          {icon}\n        </div>\n        <h1 className=\"text-2xl sm:text-3xl font-black\">{title}</h1>\n      </div>\n      <p className=\"mt-1.5 text-sm text-muted-foreground max-w-xl\">{subtitle}</p>\n      {headerAccessory && <div className=\"mt-4\">{headerAccessory}</div>}\n    </>\n  );\n\n  if (plain) {\n    return <div className={cn(\"rounded-2xl border border-border/60 bg-card p-6 sm:p-7\", className)}>{body}</div>;\n  }\n\n  return (\n    <div className={cn(\"rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose\", className)}>\n      <div className=\"rounded-[15px] bg-card p-6 sm:p-7\">{body}</div>\n    </div>\n  );\n}\n"],"mappings":"AAwBI,mBAEI,KADF,YADF;AAvBJ,SAAS,UAAU;AAqBZ,SAAS,cAAc,EAAE,MAAM,OAAO,UAAU,iBAAiB,WAAW,QAAQ,MAAM,GAAuB;AACtH,QAAM,OACJ,iCACE;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA,0BAAC,SAAI,WAAU,2EACZ,gBACH;AAAA,MACA,oBAAC,QAAG,WAAU,mCAAmC,iBAAM;AAAA,OACzD;AAAA,IACA,oBAAC,OAAE,WAAU,iDAAiD,oBAAS;AAAA,IACtE,mBAAmB,oBAAC,SAAI,WAAU,QAAQ,2BAAgB;AAAA,KAC7D;AAGF,MAAI,OAAO;AACT,WAAO,oBAAC,SAAI,WAAW,GAAG,0DAA0D,SAAS,GAAI,gBAAK;AAAA,EACxG;AAEA,SACE,oBAAC,SAAI,WAAW,GAAG,0FAA0F,SAAS,GACpH,8BAAC,SAAI,WAAU,qCAAqC,gBAAK,GAC3D;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/service-header.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface ServiceHeaderProps {\n  /** Rendered icon element, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element shown under the subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  className?: string;\n  /** Drop the brand gradient border for a plain neutral-bordered card.\n   *  Standalone headers (browse pages, coin page, /claim hub) keep the\n   *  gradient by default. */\n  plain?: boolean;\n  /** No card at all — icon chip + title + subtitle on the page background.\n   *  Used by ServiceFormShell so the form card is the page's only panel. */\n  bare?: boolean;\n}\n\n/** Shared launchpad/claim page header: a dark card with a solid primary icon\n *  chip, title + subtitle. By default it sits on a static brand gradient\n *  border; pass `plain` for a neutral-bordered card. Pure presentation —\n *  consuming app supplies the icon and (optionally) a header accessory. */\nexport function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain = false, bare = false }: ServiceHeaderProps) {\n  const body = (\n    <>\n      <div className=\"flex items-center gap-2.5\">\n        <div className=\"h-9 w-9 rounded-xl bg-primary flex items-center justify-center shrink-0\">\n          {icon}\n        </div>\n        <h1 className=\"text-2xl sm:text-3xl font-black tracking-tight\">{title}</h1>\n      </div>\n      <p className=\"mt-1.5 text-sm text-muted-foreground max-w-xl\">{subtitle}</p>\n      {headerAccessory && <div className=\"mt-4\">{headerAccessory}</div>}\n    </>\n  );\n\n  if (bare) {\n    return <div className={className}>{body}</div>;\n  }\n\n  if (plain) {\n    return <div className={cn(\"rounded-2xl border border-border/60 bg-card p-6 sm:p-7\", className)}>{body}</div>;\n  }\n\n  return (\n    <div className={cn(\"rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose\", className)}>\n      <div className=\"rounded-[15px] bg-card p-6 sm:p-7\">{body}</div>\n    </div>\n  );\n}\n"],"mappings":"AA0BI,mBAEI,KADF,YADF;AAzBJ,SAAS,UAAU;AAuBZ,SAAS,cAAc,EAAE,MAAM,OAAO,UAAU,iBAAiB,WAAW,QAAQ,OAAO,OAAO,MAAM,GAAuB;AACpI,QAAM,OACJ,iCACE;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA,0BAAC,SAAI,WAAU,2EACZ,gBACH;AAAA,MACA,oBAAC,QAAG,WAAU,kDAAkD,iBAAM;AAAA,OACxE;AAAA,IACA,oBAAC,OAAE,WAAU,iDAAiD,oBAAS;AAAA,IACtE,mBAAmB,oBAAC,SAAI,WAAU,QAAQ,2BAAgB;AAAA,KAC7D;AAGF,MAAI,MAAM;AACR,WAAO,oBAAC,SAAI,WAAuB,gBAAK;AAAA,EAC1C;AAEA,MAAI,OAAO;AACT,WAAO,oBAAC,SAAI,WAAW,GAAG,0DAA0D,SAAS,GAAI,gBAAK;AAAA,EACxG;AAEA,SACE,oBAAC,SAAI,WAAW,GAAG,0FAA0F,SAAS,GACpH,8BAAC,SAAI,WAAU,qCAAqC,gBAAK,GAC3D;AAEJ;","names":[]}

package/dist/components/stat-tile.cjs

@@ -43,10 +43,9 @@ function StatTile({
         value != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
-            className: "font-semibold leading-none tracking-tight",
+            className: "font-semibold leading-none tracking-tight tabular-nums",
             style: {
               fontSize: big ? 22 : 16,
-              fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, monospace',
               color: accent
             },
             children: value
@@ -64,14 +63,7 @@ function StatPill({ value, label, className }) {
     {
       className: `inline-flex items-baseline gap-2 px-4 py-2 rounded-full bg-muted ${className ?? ""}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: "text-[15px] font-bold text-foreground",
-            style: { fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, monospace' },
-            children: value
-          }
-        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[15px] font-bold text-foreground tabular-nums", children: value }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[13px] text-muted-foreground", children: label })
       ]
     }

package/dist/components/stat-tile.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["// Bento stat tile and header stat pill — the design system's data-display primitives.\n\nexport interface StatTileProps {\n  label: string;\n  /** Shown as the primary value. Pass \"—\" (em dash) for unknown, never zero. */\n  value?: string | number | null;\n  /** Secondary line below the value. */\n  sub?: string;\n  /** Override color for the value text (e.g. brand-blue for positive deltas). */\n  accent?: string;\n  /** Large 22px value variant. */\n  big?: boolean;\n  radius?: number;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport function StatTile({\n  label,\n  value,\n  sub,\n  accent,\n  big,\n  radius = 16,\n  children,\n  className,\n}: StatTileProps) {\n  return (\n    <div\n      className={`bg-muted border border-border flex flex-col gap-1 min-w-0 ${className ?? ''}`}\n      style={{ borderRadius: radius, padding: '12px 14px' }}\n    >\n      <span className=\"text-[10.5px] font-semibold tracking-[0.06em] uppercase text-muted-foreground\">\n        {label}\n      </span>\n      {value != null && (\n        <span\n          className=\"font-semibold leading-none tracking-tight\"\n          style={{\n            fontSize: big ? 22 : 16,\n            fontFamily: '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace',\n            color: accent,\n          }}\n        >\n          {value}\n        </span>\n      )}\n      {sub && (\n        <span className=\"text-[11px] text-muted-foreground\">{sub}</span>\n      )}\n      {children}\n    </div>\n  );\n}\n\nexport interface StatPillProps {\n  value: string | number;\n  label: string;\n  className?: string;\n}\n\nexport function StatPill({ value, label, className }: StatPillProps) {\n  return (\n    <div\n      className={`inline-flex items-baseline gap-2 px-4 py-2 rounded-full bg-muted ${className ?? ''}`}\n    >\n      <span\n        className=\"text-[15px] font-bold text-foreground\"\n        style={{ fontFamily: '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace' }}\n      >\n        {value}\n      </span>\n      <span className=\"text-[13px] text-muted-foreground\">{label}</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BI;AAXG,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAkB;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,6DAA6D,aAAa,EAAE;AAAA,MACvF,OAAO,EAAE,cAAc,QAAQ,SAAS,YAAY;AAAA,MAEpD;AAAA,oDAAC,UAAK,WAAU,iFACb,iBACH;AAAA,QACC,SAAS,QACR;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU,MAAM,KAAK;AAAA,cACrB,YAAY;AAAA,cACZ,OAAO;AAAA,YACT;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAED,OACC,4CAAC,UAAK,WAAU,qCAAqC,eAAI;AAAA,QAE1D;AAAA;AAAA;AAAA,EACH;AAEJ;AAQO,SAAS,SAAS,EAAE,OAAO,OAAO,UAAU,GAAkB;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oEAAoE,aAAa,EAAE;AAAA,MAE9F;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,wDAAwD;AAAA,YAE5E;AAAA;AAAA,QACH;AAAA,QACA,4CAAC,UAAK,WAAU,qCAAqC,iBAAM;AAAA;AAAA;AAAA,EAC7D;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["// Bento stat tile and header stat pill — the design system's data-display primitives.\n\nexport interface StatTileProps {\n  label: string;\n  /** Shown as the primary value. Pass \"—\" (em dash) for unknown, never zero. */\n  value?: string | number | null;\n  /** Secondary line below the value. */\n  sub?: string;\n  /** Override color for the value text (e.g. brand-blue for positive deltas). */\n  accent?: string;\n  /** Large 22px value variant. */\n  big?: boolean;\n  radius?: number;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport function StatTile({\n  label,\n  value,\n  sub,\n  accent,\n  big,\n  radius = 16,\n  children,\n  className,\n}: StatTileProps) {\n  return (\n    <div\n      className={`bg-muted border border-border flex flex-col gap-1 min-w-0 ${className ?? ''}`}\n      style={{ borderRadius: radius, padding: '12px 14px' }}\n    >\n      <span className=\"text-[10.5px] font-semibold tracking-[0.06em] uppercase text-muted-foreground\">\n        {label}\n      </span>\n      {value != null && (\n        <span\n          className=\"font-semibold leading-none tracking-tight tabular-nums\"\n          style={{\n            fontSize: big ? 22 : 16,\n            color: accent,\n          }}\n        >\n          {value}\n        </span>\n      )}\n      {sub && (\n        <span className=\"text-[11px] text-muted-foreground\">{sub}</span>\n      )}\n      {children}\n    </div>\n  );\n}\n\nexport interface StatPillProps {\n  value: string | number;\n  label: string;\n  className?: string;\n}\n\nexport function StatPill({ value, label, className }: StatPillProps) {\n  return (\n    <div\n      className={`inline-flex items-baseline gap-2 px-4 py-2 rounded-full bg-muted ${className ?? ''}`}\n    >\n      <span className=\"text-[15px] font-bold text-foreground tabular-nums\">\n        {value}\n      </span>\n      <span className=\"text-[13px] text-muted-foreground\">{label}</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BI;AAXG,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAkB;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,6DAA6D,aAAa,EAAE;AAAA,MACvF,OAAO,EAAE,cAAc,QAAQ,SAAS,YAAY;AAAA,MAEpD;AAAA,oDAAC,UAAK,WAAU,iFACb,iBACH;AAAA,QACC,SAAS,QACR;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU,MAAM,KAAK;AAAA,cACrB,OAAO;AAAA,YACT;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAED,OACC,4CAAC,UAAK,WAAU,qCAAqC,eAAI;AAAA,QAE1D;AAAA;AAAA;AAAA,EACH;AAEJ;AAQO,SAAS,SAAS,EAAE,OAAO,OAAO,UAAU,GAAkB;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oEAAoE,aAAa,EAAE;AAAA,MAE9F;AAAA,oDAAC,UAAK,WAAU,sDACb,iBACH;AAAA,QACA,4CAAC,UAAK,WAAU,qCAAqC,iBAAM;AAAA;AAAA;AAAA,EAC7D;AAEJ;","names":[]}

package/dist/components/stat-tile.js

@@ -19,10 +19,9 @@ function StatTile({
         value != null && /* @__PURE__ */ jsx(
           "span",
           {
-            className: "font-semibold leading-none tracking-tight",
+            className: "font-semibold leading-none tracking-tight tabular-nums",
             style: {
               fontSize: big ? 22 : 16,
-              fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, monospace',
               color: accent
             },
             children: value
@@ -40,14 +39,7 @@ function StatPill({ value, label, className }) {
     {
       className: `inline-flex items-baseline gap-2 px-4 py-2 rounded-full bg-muted ${className ?? ""}`,
       children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "text-[15px] font-bold text-foreground",
-            style: { fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, monospace' },
-            children: value
-          }
-        ),
+        /* @__PURE__ */ jsx("span", { className: "text-[15px] font-bold text-foreground tabular-nums", children: value }),
         /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground", children: label })
       ]
     }

package/dist/components/stat-tile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["// Bento stat tile and header stat pill — the design system's data-display primitives.\n\nexport interface StatTileProps {\n  label: string;\n  /** Shown as the primary value. Pass \"—\" (em dash) for unknown, never zero. */\n  value?: string | number | null;\n  /** Secondary line below the value. */\n  sub?: string;\n  /** Override color for the value text (e.g. brand-blue for positive deltas). */\n  accent?: string;\n  /** Large 22px value variant. */\n  big?: boolean;\n  radius?: number;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport function StatTile({\n  label,\n  value,\n  sub,\n  accent,\n  big,\n  radius = 16,\n  children,\n  className,\n}: StatTileProps) {\n  return (\n    <div\n      className={`bg-muted border border-border flex flex-col gap-1 min-w-0 ${className ?? ''}`}\n      style={{ borderRadius: radius, padding: '12px 14px' }}\n    >\n      <span className=\"text-[10.5px] font-semibold tracking-[0.06em] uppercase text-muted-foreground\">\n        {label}\n      </span>\n      {value != null && (\n        <span\n          className=\"font-semibold leading-none tracking-tight\"\n          style={{\n            fontSize: big ? 22 : 16,\n            fontFamily: '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace',\n            color: accent,\n          }}\n        >\n          {value}\n        </span>\n      )}\n      {sub && (\n        <span className=\"text-[11px] text-muted-foreground\">{sub}</span>\n      )}\n      {children}\n    </div>\n  );\n}\n\nexport interface StatPillProps {\n  value: string | number;\n  label: string;\n  className?: string;\n}\n\nexport function StatPill({ value, label, className }: StatPillProps) {\n  return (\n    <div\n      className={`inline-flex items-baseline gap-2 px-4 py-2 rounded-full bg-muted ${className ?? ''}`}\n    >\n      <span\n        className=\"text-[15px] font-bold text-foreground\"\n        style={{ fontFamily: '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace' }}\n      >\n        {value}\n      </span>\n      <span className=\"text-[13px] text-muted-foreground\">{label}</span>\n    </div>\n  );\n}\n"],"mappings":"AA4BI,SAIE,KAJF;AAXG,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAkB;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,6DAA6D,aAAa,EAAE;AAAA,MACvF,OAAO,EAAE,cAAc,QAAQ,SAAS,YAAY;AAAA,MAEpD;AAAA,4BAAC,UAAK,WAAU,iFACb,iBACH;AAAA,QACC,SAAS,QACR;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU,MAAM,KAAK;AAAA,cACrB,YAAY;AAAA,cACZ,OAAO;AAAA,YACT;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAED,OACC,oBAAC,UAAK,WAAU,qCAAqC,eAAI;AAAA,QAE1D;AAAA;AAAA;AAAA,EACH;AAEJ;AAQO,SAAS,SAAS,EAAE,OAAO,OAAO,UAAU,GAAkB;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oEAAoE,aAAa,EAAE;AAAA,MAE9F;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,wDAAwD;AAAA,YAE5E;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,UAAK,WAAU,qCAAqC,iBAAM;AAAA;AAAA;AAAA,EAC7D;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["// Bento stat tile and header stat pill — the design system's data-display primitives.\n\nexport interface StatTileProps {\n  label: string;\n  /** Shown as the primary value. Pass \"—\" (em dash) for unknown, never zero. */\n  value?: string | number | null;\n  /** Secondary line below the value. */\n  sub?: string;\n  /** Override color for the value text (e.g. brand-blue for positive deltas). */\n  accent?: string;\n  /** Large 22px value variant. */\n  big?: boolean;\n  radius?: number;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport function StatTile({\n  label,\n  value,\n  sub,\n  accent,\n  big,\n  radius = 16,\n  children,\n  className,\n}: StatTileProps) {\n  return (\n    <div\n      className={`bg-muted border border-border flex flex-col gap-1 min-w-0 ${className ?? ''}`}\n      style={{ borderRadius: radius, padding: '12px 14px' }}\n    >\n      <span className=\"text-[10.5px] font-semibold tracking-[0.06em] uppercase text-muted-foreground\">\n        {label}\n      </span>\n      {value != null && (\n        <span\n          className=\"font-semibold leading-none tracking-tight tabular-nums\"\n          style={{\n            fontSize: big ? 22 : 16,\n            color: accent,\n          }}\n        >\n          {value}\n        </span>\n      )}\n      {sub && (\n        <span className=\"text-[11px] text-muted-foreground\">{sub}</span>\n      )}\n      {children}\n    </div>\n  );\n}\n\nexport interface StatPillProps {\n  value: string | number;\n  label: string;\n  className?: string;\n}\n\nexport function StatPill({ value, label, className }: StatPillProps) {\n  return (\n    <div\n      className={`inline-flex items-baseline gap-2 px-4 py-2 rounded-full bg-muted ${className ?? ''}`}\n    >\n      <span className=\"text-[15px] font-bold text-foreground tabular-nums\">\n        {value}\n      </span>\n      <span className=\"text-[13px] text-muted-foreground\">{label}</span>\n    </div>\n  );\n}\n"],"mappings":"AA4BI,SAIE,KAJF;AAXG,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAkB;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,6DAA6D,aAAa,EAAE;AAAA,MACvF,OAAO,EAAE,cAAc,QAAQ,SAAS,YAAY;AAAA,MAEpD;AAAA,4BAAC,UAAK,WAAU,iFACb,iBACH;AAAA,QACC,SAAS,QACR;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU,MAAM,KAAK;AAAA,cACrB,OAAO;AAAA,YACT;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAED,OACC,oBAAC,UAAK,WAAU,qCAAqC,eAAI;AAAA,QAE1D;AAAA;AAAA;AAAA,EACH;AAEJ;AAQO,SAAS,SAAS,EAAE,OAAO,OAAO,UAAU,GAAkB;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oEAAoE,aAAa,EAAE;AAAA,MAE9F;AAAA,4BAAC,UAAK,WAAU,sDACb,iBACH;AAAA,QACA,oBAAC,UAAK,WAAU,qCAAqC,iBAAM;AAAA;AAAA;AAAA,EAC7D;AAEJ;","names":[]}

package/dist/components/token-glyph.cjs

@@ -23,7 +23,6 @@ __export(token_glyph_exports, {
 });
 module.exports = __toCommonJS(token_glyph_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-const PRICE_FONT = '"Geist Mono", ui-monospace, SFMono-Regular, monospace';
 function TokenGlyph({ token = "strk", size = 20 }) {
   const gradId = `ml-tg-strk-${size}`;
   switch (token) {
@@ -74,7 +73,7 @@ function TokenAmount({
       "span",
       {
         style: {
-          fontFamily: PRICE_FONT,
+          fontVariantNumeric: "tabular-nums",
           fontWeight: bold ? 700 : 500,
           fontSize: size * 0.92,
           color: color ?? "#f97316",

package/dist/components/token-glyph.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/token-glyph.tsx"],"sourcesContent":["// Inline SVG token glyphs — self-contained, no external asset dependency.\n// Covers the five tokens active on the platform: STRK, ETH, USDC, USDT, WBTC.\n\nconst PRICE_FONT = '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace';\n\nexport type TokenSymbol = 'strk' | 'eth' | 'usdc' | 'usdt' | 'wbtc';\n\nexport interface TokenGlyphProps {\n  token?: TokenSymbol | string;\n  size?: number;\n}\n\nexport function TokenGlyph({ token = 'strk', size = 20 }: TokenGlyphProps) {\n  const gradId = `ml-tg-strk-${size}`;\n\n  switch (token) {\n    case 'eth':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2b2f3a\"/>\n          <path d=\"M12 4 7 12.2l5 3 5-3L12 4Z\" fill=\"#e6e8f0\"/>\n          <path d=\"M7 13.3 12 20l5-6.7-5 3-5-3Z\" fill=\"#b9bdcc\"/>\n        </svg>\n      );\n    case 'usdc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2775ca\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"13\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">$</text>\n        </svg>\n      );\n    case 'usdt':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#26a17b\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₮</text>\n        </svg>\n      );\n    case 'wbtc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#f09242\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₿</text>\n        </svg>\n      );\n    default:\n      // STRK — magenta→orange gradient coin with swoosh\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <defs>\n            <linearGradient id={gradId} x1=\"3\" y1=\"3\" x2=\"21\" y2=\"21\">\n              <stop offset=\"0\" stopColor=\"#f6608f\"/>\n              <stop offset=\"1\" stopColor=\"#fb8b46\"/>\n            </linearGradient>\n          </defs>\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill={`url(#${gradId})`}/>\n          <path d=\"M5.5 14.5c3.2-5 9.8-5 13 0\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"1.8\" strokeLinecap=\"round\"/>\n          <circle cx=\"9\" cy=\"10.5\" r=\"0.9\" fill=\"#fff\"/>\n        </svg>\n      );\n  }\n}\n\nexport interface TokenAmountProps {\n  token?: TokenSymbol | string;\n  amount: string;\n  /** Icon size in px. Text size scales proportionally. */\n  size?: number;\n  /** Override the amount text color. Defaults to brand-price orange. */\n  color?: string;\n  bold?: boolean;\n  className?: string;\n}\n\nexport function TokenAmount({\n  token = 'strk',\n  amount,\n  size = 20,\n  color,\n  bold = true,\n  className,\n}: TokenAmountProps) {\n  return (\n    <span className={`inline-flex items-center gap-1.5 ${className ?? ''}`}>\n      <TokenGlyph token={token} size={size} />\n      <span\n        style={{\n          fontFamily: PRICE_FONT,\n          fontWeight: bold ? 700 : 500,\n          fontSize: size * 0.92,\n          color: color ?? '#f97316',\n          letterSpacing: '-0.01em',\n        }}\n      >\n        {amount}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBQ;AAfR,MAAM,aAAa;AASZ,SAAS,WAAW,EAAE,QAAQ,QAAQ,OAAO,GAAG,GAAoB;AACzE,QAAM,SAAS,cAAc,IAAI;AAEjC,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,8BAA6B,MAAK,WAAS;AAAA,QACnD,4CAAC,UAAK,GAAE,gCAA+B,MAAK,WAAS;AAAA,SACvD;AAAA,IAEJ,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,eAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ;AAEE,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,UACC,uDAAC,oBAAe,IAAI,QAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,MACnD;AAAA,sDAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,UACpC,4CAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,WACtC,GACF;AAAA,QACA,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAM,QAAQ,MAAM,KAAI;AAAA,QACvD,4CAAC,UAAK,GAAE,8BAA6B,MAAK,QAAO,QAAO,QAAO,aAAY,OAAM,eAAc,SAAO;AAAA,QACtG,4CAAC,YAAO,IAAG,KAAI,IAAG,QAAO,GAAE,OAAM,MAAK,QAAM;AAAA,SAC9C;AAAA,EAEN;AACF;AAaO,SAAS,YAAY;AAAA,EAC1B,QAAQ;AAAA,EACR;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAAqB;AACnB,SACE,6CAAC,UAAK,WAAW,oCAAoC,aAAa,EAAE,IAClE;AAAA,gDAAC,cAAW,OAAc,MAAY;AAAA,IACtC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,YAAY,OAAO,MAAM;AAAA,UACzB,UAAU,OAAO;AAAA,UACjB,OAAO,SAAS;AAAA,UAChB,eAAe;AAAA,QACjB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/token-glyph.tsx"],"sourcesContent":["// Inline SVG token glyphs — self-contained, no external asset dependency.\n// Covers the five tokens active on the platform: STRK, ETH, USDC, USDT, WBTC.\n\nexport type TokenSymbol = 'strk' | 'eth' | 'usdc' | 'usdt' | 'wbtc';\n\nexport interface TokenGlyphProps {\n  token?: TokenSymbol | string;\n  size?: number;\n}\n\nexport function TokenGlyph({ token = 'strk', size = 20 }: TokenGlyphProps) {\n  const gradId = `ml-tg-strk-${size}`;\n\n  switch (token) {\n    case 'eth':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2b2f3a\"/>\n          <path d=\"M12 4 7 12.2l5 3 5-3L12 4Z\" fill=\"#e6e8f0\"/>\n          <path d=\"M7 13.3 12 20l5-6.7-5 3-5-3Z\" fill=\"#b9bdcc\"/>\n        </svg>\n      );\n    case 'usdc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2775ca\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"13\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">$</text>\n        </svg>\n      );\n    case 'usdt':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#26a17b\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₮</text>\n        </svg>\n      );\n    case 'wbtc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#f09242\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₿</text>\n        </svg>\n      );\n    default:\n      // STRK — magenta→orange gradient coin with swoosh\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <defs>\n            <linearGradient id={gradId} x1=\"3\" y1=\"3\" x2=\"21\" y2=\"21\">\n              <stop offset=\"0\" stopColor=\"#f6608f\"/>\n              <stop offset=\"1\" stopColor=\"#fb8b46\"/>\n            </linearGradient>\n          </defs>\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill={`url(#${gradId})`}/>\n          <path d=\"M5.5 14.5c3.2-5 9.8-5 13 0\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"1.8\" strokeLinecap=\"round\"/>\n          <circle cx=\"9\" cy=\"10.5\" r=\"0.9\" fill=\"#fff\"/>\n        </svg>\n      );\n  }\n}\n\nexport interface TokenAmountProps {\n  token?: TokenSymbol | string;\n  amount: string;\n  /** Icon size in px. Text size scales proportionally. */\n  size?: number;\n  /** Override the amount text color. Defaults to brand-price orange. */\n  color?: string;\n  bold?: boolean;\n  className?: string;\n}\n\nexport function TokenAmount({\n  token = 'strk',\n  amount,\n  size = 20,\n  color,\n  bold = true,\n  className,\n}: TokenAmountProps) {\n  return (\n    <span className={`inline-flex items-center gap-1.5 ${className ?? ''}`}>\n      <TokenGlyph token={token} size={size} />\n      <span\n        style={{\n          fontVariantNumeric: 'tabular-nums',\n          fontWeight: bold ? 700 : 500,\n          fontSize: size * 0.92,\n          color: color ?? '#f97316',\n          letterSpacing: '-0.01em',\n        }}\n      >\n        {amount}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBQ;AAND,SAAS,WAAW,EAAE,QAAQ,QAAQ,OAAO,GAAG,GAAoB;AACzE,QAAM,SAAS,cAAc,IAAI;AAEjC,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,8BAA6B,MAAK,WAAS;AAAA,QACnD,4CAAC,UAAK,GAAE,gCAA+B,MAAK,WAAS;AAAA,SACvD;AAAA,IAEJ,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,eAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ;AAEE,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,UACC,uDAAC,oBAAe,IAAI,QAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,MACnD;AAAA,sDAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,UACpC,4CAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,WACtC,GACF;AAAA,QACA,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAM,QAAQ,MAAM,KAAI;AAAA,QACvD,4CAAC,UAAK,GAAE,8BAA6B,MAAK,QAAO,QAAO,QAAO,aAAY,OAAM,eAAc,SAAO;AAAA,QACtG,4CAAC,YAAO,IAAG,KAAI,IAAG,QAAO,GAAE,OAAM,MAAK,QAAM;AAAA,SAC9C;AAAA,EAEN;AACF;AAaO,SAAS,YAAY;AAAA,EAC1B,QAAQ;AAAA,EACR;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAAqB;AACnB,SACE,6CAAC,UAAK,WAAW,oCAAoC,aAAa,EAAE,IAClE;AAAA,gDAAC,cAAW,OAAc,MAAY;AAAA,IACtC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,oBAAoB;AAAA,UACpB,YAAY,OAAO,MAAM;AAAA,UACzB,UAAU,OAAO;AAAA,UACjB,OAAO,SAAS;AAAA,UAChB,eAAe;AAAA,QACjB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/token-glyph.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-const PRICE_FONT = '"Geist Mono", ui-monospace, SFMono-Regular, monospace';
 function TokenGlyph({ token = "strk", size = 20 }) {
   const gradId = `ml-tg-strk-${size}`;
   switch (token) {
@@ -50,7 +49,7 @@ function TokenAmount({
       "span",
       {
         style: {
-          fontFamily: PRICE_FONT,
+          fontVariantNumeric: "tabular-nums",
           fontWeight: bold ? 700 : 500,
           fontSize: size * 0.92,
           color: color ?? "#f97316",

package/dist/components/token-glyph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/token-glyph.tsx"],"sourcesContent":["// Inline SVG token glyphs — self-contained, no external asset dependency.\n// Covers the five tokens active on the platform: STRK, ETH, USDC, USDT, WBTC.\n\nconst PRICE_FONT = '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace';\n\nexport type TokenSymbol = 'strk' | 'eth' | 'usdc' | 'usdt' | 'wbtc';\n\nexport interface TokenGlyphProps {\n  token?: TokenSymbol | string;\n  size?: number;\n}\n\nexport function TokenGlyph({ token = 'strk', size = 20 }: TokenGlyphProps) {\n  const gradId = `ml-tg-strk-${size}`;\n\n  switch (token) {\n    case 'eth':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2b2f3a\"/>\n          <path d=\"M12 4 7 12.2l5 3 5-3L12 4Z\" fill=\"#e6e8f0\"/>\n          <path d=\"M7 13.3 12 20l5-6.7-5 3-5-3Z\" fill=\"#b9bdcc\"/>\n        </svg>\n      );\n    case 'usdc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2775ca\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"13\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">$</text>\n        </svg>\n      );\n    case 'usdt':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#26a17b\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₮</text>\n        </svg>\n      );\n    case 'wbtc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#f09242\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₿</text>\n        </svg>\n      );\n    default:\n      // STRK — magenta→orange gradient coin with swoosh\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <defs>\n            <linearGradient id={gradId} x1=\"3\" y1=\"3\" x2=\"21\" y2=\"21\">\n              <stop offset=\"0\" stopColor=\"#f6608f\"/>\n              <stop offset=\"1\" stopColor=\"#fb8b46\"/>\n            </linearGradient>\n          </defs>\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill={`url(#${gradId})`}/>\n          <path d=\"M5.5 14.5c3.2-5 9.8-5 13 0\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"1.8\" strokeLinecap=\"round\"/>\n          <circle cx=\"9\" cy=\"10.5\" r=\"0.9\" fill=\"#fff\"/>\n        </svg>\n      );\n  }\n}\n\nexport interface TokenAmountProps {\n  token?: TokenSymbol | string;\n  amount: string;\n  /** Icon size in px. Text size scales proportionally. */\n  size?: number;\n  /** Override the amount text color. Defaults to brand-price orange. */\n  color?: string;\n  bold?: boolean;\n  className?: string;\n}\n\nexport function TokenAmount({\n  token = 'strk',\n  amount,\n  size = 20,\n  color,\n  bold = true,\n  className,\n}: TokenAmountProps) {\n  return (\n    <span className={`inline-flex items-center gap-1.5 ${className ?? ''}`}>\n      <TokenGlyph token={token} size={size} />\n      <span\n        style={{\n          fontFamily: PRICE_FONT,\n          fontWeight: bold ? 700 : 500,\n          fontSize: size * 0.92,\n          color: color ?? '#f97316',\n          letterSpacing: '-0.01em',\n        }}\n      >\n        {amount}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"AAkBQ,SACE,KADF;AAfR,MAAM,aAAa;AASZ,SAAS,WAAW,EAAE,QAAQ,QAAQ,OAAO,GAAG,GAAoB;AACzE,QAAM,SAAS,cAAc,IAAI;AAEjC,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,8BAA6B,MAAK,WAAS;AAAA,QACnD,oBAAC,UAAK,GAAE,gCAA+B,MAAK,WAAS;AAAA,SACvD;AAAA,IAEJ,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,eAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ;AAEE,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,UACC,+BAAC,oBAAe,IAAI,QAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,MACnD;AAAA,8BAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,UACpC,oBAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,WACtC,GACF;AAAA,QACA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAM,QAAQ,MAAM,KAAI;AAAA,QACvD,oBAAC,UAAK,GAAE,8BAA6B,MAAK,QAAO,QAAO,QAAO,aAAY,OAAM,eAAc,SAAO;AAAA,QACtG,oBAAC,YAAO,IAAG,KAAI,IAAG,QAAO,GAAE,OAAM,MAAK,QAAM;AAAA,SAC9C;AAAA,EAEN;AACF;AAaO,SAAS,YAAY;AAAA,EAC1B,QAAQ;AAAA,EACR;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAAqB;AACnB,SACE,qBAAC,UAAK,WAAW,oCAAoC,aAAa,EAAE,IAClE;AAAA,wBAAC,cAAW,OAAc,MAAY;AAAA,IACtC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,YAAY,OAAO,MAAM;AAAA,UACzB,UAAU,OAAO;AAAA,UACjB,OAAO,SAAS;AAAA,UAChB,eAAe;AAAA,QACjB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/token-glyph.tsx"],"sourcesContent":["// Inline SVG token glyphs — self-contained, no external asset dependency.\n// Covers the five tokens active on the platform: STRK, ETH, USDC, USDT, WBTC.\n\nexport type TokenSymbol = 'strk' | 'eth' | 'usdc' | 'usdt' | 'wbtc';\n\nexport interface TokenGlyphProps {\n  token?: TokenSymbol | string;\n  size?: number;\n}\n\nexport function TokenGlyph({ token = 'strk', size = 20 }: TokenGlyphProps) {\n  const gradId = `ml-tg-strk-${size}`;\n\n  switch (token) {\n    case 'eth':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2b2f3a\"/>\n          <path d=\"M12 4 7 12.2l5 3 5-3L12 4Z\" fill=\"#e6e8f0\"/>\n          <path d=\"M7 13.3 12 20l5-6.7-5 3-5-3Z\" fill=\"#b9bdcc\"/>\n        </svg>\n      );\n    case 'usdc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2775ca\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"13\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">$</text>\n        </svg>\n      );\n    case 'usdt':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#26a17b\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₮</text>\n        </svg>\n      );\n    case 'wbtc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#f09242\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₿</text>\n        </svg>\n      );\n    default:\n      // STRK — magenta→orange gradient coin with swoosh\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <defs>\n            <linearGradient id={gradId} x1=\"3\" y1=\"3\" x2=\"21\" y2=\"21\">\n              <stop offset=\"0\" stopColor=\"#f6608f\"/>\n              <stop offset=\"1\" stopColor=\"#fb8b46\"/>\n            </linearGradient>\n          </defs>\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill={`url(#${gradId})`}/>\n          <path d=\"M5.5 14.5c3.2-5 9.8-5 13 0\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"1.8\" strokeLinecap=\"round\"/>\n          <circle cx=\"9\" cy=\"10.5\" r=\"0.9\" fill=\"#fff\"/>\n        </svg>\n      );\n  }\n}\n\nexport interface TokenAmountProps {\n  token?: TokenSymbol | string;\n  amount: string;\n  /** Icon size in px. Text size scales proportionally. */\n  size?: number;\n  /** Override the amount text color. Defaults to brand-price orange. */\n  color?: string;\n  bold?: boolean;\n  className?: string;\n}\n\nexport function TokenAmount({\n  token = 'strk',\n  amount,\n  size = 20,\n  color,\n  bold = true,\n  className,\n}: TokenAmountProps) {\n  return (\n    <span className={`inline-flex items-center gap-1.5 ${className ?? ''}`}>\n      <TokenGlyph token={token} size={size} />\n      <span\n        style={{\n          fontVariantNumeric: 'tabular-nums',\n          fontWeight: bold ? 700 : 500,\n          fontSize: size * 0.92,\n          color: color ?? '#f97316',\n          letterSpacing: '-0.01em',\n        }}\n      >\n        {amount}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"AAgBQ,SACE,KADF;AAND,SAAS,WAAW,EAAE,QAAQ,QAAQ,OAAO,GAAG,GAAoB;AACzE,QAAM,SAAS,cAAc,IAAI;AAEjC,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,8BAA6B,MAAK,WAAS;AAAA,QACnD,oBAAC,UAAK,GAAE,gCAA+B,MAAK,WAAS;AAAA,SACvD;AAAA,IAEJ,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,eAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ;AAEE,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,UACC,+BAAC,oBAAe,IAAI,QAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,MACnD;AAAA,8BAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,UACpC,oBAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,WACtC,GACF;AAAA,QACA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAM,QAAQ,MAAM,KAAI;AAAA,QACvD,oBAAC,UAAK,GAAE,8BAA6B,MAAK,QAAO,QAAO,QAAO,aAAY,OAAM,eAAc,SAAO;AAAA,QACtG,oBAAC,YAAO,IAAG,KAAI,IAAG,QAAO,GAAE,OAAM,MAAK,QAAM;AAAA,SAC9C;AAAA,EAEN;AACF;AAaO,SAAS,YAAY;AAAA,EAC1B,QAAQ;AAAA,EACR;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAAqB;AACnB,SACE,qBAAC,UAAK,WAAW,oCAAoC,aAAa,EAAE,IAClE;AAAA,wBAAC,cAAW,OAAc,MAAY;AAAA,IACtC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,oBAAoB;AAAA,UACpB,YAAY,OAAO,MAAM;AAAA,UACzB,UAAU,OAAO;AAAA,UACjB,OAAO,SAAS;AAAA,UAChB,eAAe;AAAA,QACjB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/medialane.css

@@ -26,6 +26,13 @@
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
+/* ── Display face ─────────────────────────────────────────────────────── */
+/* Headings render in the brand display face (Urbanist). Apps set
+   --font-display via next/font; unset, headings inherit the body face. */
+h1, h2, h3 {
+  font-family: var(--font-display, inherit);
+}
+
 /* ── Typography gradients ─────────────────────────────────────────────── */
 .gradient-text {
   background: linear-gradient(135deg, #8a5cf6 0%, #5b4ce6 40%, #3b7bff 100%);

package/dist/preset/tailwind.cjs

@@ -36,6 +36,11 @@ const medialanePreset = {
       },
       borderRadius: {
         brand: "11px"
+      },
+      fontFamily: {
+        // Brand display face (headings). Apps define --font-display via
+        // next/font (Urbanist); falls back to the body face when unset.
+        display: ["var(--font-display)", "Urbanist", "Inter", "system-ui", "sans-serif"]
       }
     }
   }

package/dist/preset/tailwind.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/preset/tailwind.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst medialanePreset: Partial<Config> = {\n  theme: {\n    extend: {\n      colors: {\n        \"brand-blue\":     \"#3b7bff\",\n        \"brand-electric\": \"#1a17ff\",\n        \"brand-indigo\":   \"#5b4ce6\",\n        \"brand-purple\":   \"#8a5cf6\",\n        \"brand-rose\":     \"#f6608f\",\n        \"brand-orange\":   \"#fb8b46\",\n        \"brand-price\":    \"#f97316\",\n        \"brand-navy\":     \"#0a0e1f\",\n      },\n      borderRadius: {\n        brand: \"11px\",\n      },\n    },\n  },\n};\n\nexport default medialanePreset;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,kBAAmC;AAAA,EACvC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,cAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,cAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,eAAkB;AAAA,QAClB,cAAkB;AAAA,MACpB;AAAA,MACA,cAAc;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../../src/preset/tailwind.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst medialanePreset: Partial<Config> = {\n  theme: {\n    extend: {\n      colors: {\n        \"brand-blue\":     \"#3b7bff\",\n        \"brand-electric\": \"#1a17ff\",\n        \"brand-indigo\":   \"#5b4ce6\",\n        \"brand-purple\":   \"#8a5cf6\",\n        \"brand-rose\":     \"#f6608f\",\n        \"brand-orange\":   \"#fb8b46\",\n        \"brand-price\":    \"#f97316\",\n        \"brand-navy\":     \"#0a0e1f\",\n      },\n      borderRadius: {\n        brand: \"11px\",\n      },\n      fontFamily: {\n        // Brand display face (headings). Apps define --font-display via\n        // next/font (Urbanist); falls back to the body face when unset.\n        display: [\"var(--font-display)\", \"Urbanist\", \"Inter\", \"system-ui\", \"sans-serif\"],\n      },\n    },\n  },\n};\n\nexport default medialanePreset;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,kBAAmC;AAAA,EACvC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,cAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,cAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,eAAkB;AAAA,QAClB,cAAkB;AAAA,MACpB;AAAA,MACA,cAAc;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA;AAAA;AAAA,QAGV,SAAS,CAAC,uBAAuB,YAAY,SAAS,aAAa,YAAY;AAAA,MACjF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/preset/tailwind.js

@@ -13,6 +13,11 @@ const medialanePreset = {
       },
       borderRadius: {
         brand: "11px"
+      },
+      fontFamily: {
+        // Brand display face (headings). Apps define --font-display via
+        // next/font (Urbanist); falls back to the body face when unset.
+        display: ["var(--font-display)", "Urbanist", "Inter", "system-ui", "sans-serif"]
       }
     }
   }

package/dist/preset/tailwind.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/preset/tailwind.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst medialanePreset: Partial<Config> = {\n  theme: {\n    extend: {\n      colors: {\n        \"brand-blue\":     \"#3b7bff\",\n        \"brand-electric\": \"#1a17ff\",\n        \"brand-indigo\":   \"#5b4ce6\",\n        \"brand-purple\":   \"#8a5cf6\",\n        \"brand-rose\":     \"#f6608f\",\n        \"brand-orange\":   \"#fb8b46\",\n        \"brand-price\":    \"#f97316\",\n        \"brand-navy\":     \"#0a0e1f\",\n      },\n      borderRadius: {\n        brand: \"11px\",\n      },\n    },\n  },\n};\n\nexport default medialanePreset;\n"],"mappings":"AAEA,MAAM,kBAAmC;AAAA,EACvC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,cAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,cAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,eAAkB;AAAA,QAClB,cAAkB;AAAA,MACpB;AAAA,MACA,cAAc;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../../src/preset/tailwind.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst medialanePreset: Partial<Config> = {\n  theme: {\n    extend: {\n      colors: {\n        \"brand-blue\":     \"#3b7bff\",\n        \"brand-electric\": \"#1a17ff\",\n        \"brand-indigo\":   \"#5b4ce6\",\n        \"brand-purple\":   \"#8a5cf6\",\n        \"brand-rose\":     \"#f6608f\",\n        \"brand-orange\":   \"#fb8b46\",\n        \"brand-price\":    \"#f97316\",\n        \"brand-navy\":     \"#0a0e1f\",\n      },\n      borderRadius: {\n        brand: \"11px\",\n      },\n      fontFamily: {\n        // Brand display face (headings). Apps define --font-display via\n        // next/font (Urbanist); falls back to the body face when unset.\n        display: [\"var(--font-display)\", \"Urbanist\", \"Inter\", \"system-ui\", \"sans-serif\"],\n      },\n    },\n  },\n};\n\nexport default medialanePreset;\n"],"mappings":"AAEA,MAAM,kBAAmC;AAAA,EACvC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,cAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,cAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,eAAkB;AAAA,QAClB,cAAkB;AAAA,MACpB;AAAA,MACA,cAAc;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA;AAAA;AAAA,QAGV,SAAS,CAAC,uBAAuB,YAAY,SAAS,aAAa,YAAY;AAAA,MACjF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,mBAAQ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "main": "./dist/index.cjs",