@medialane/ui 0.51.0 → 0.52.0

package/dist/components/claim-rail.cjs

@@ -23,31 +23,37 @@ __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";
+const MONO = '"Geist Mono", ui-monospace, SFMono-Regular, monospace';
 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 border border-border/60 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",
+            style: { fontFamily: MONO },
+            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\nconst MONO = '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace';\n\n/** Right-rail for launchpad/claim pages — one quiet 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 border border-border/60 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\n                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\"\n                style={{ fontFamily: MONO }}\n              >\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;AA0BU;AA1BV,0BAA6C;AAe7C,MAAM,OAAO;AAMN,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,gCAAY,GAAmB;AACnH,SACE,6CAAC,SAAI,WAAU,yFACZ;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;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,KAAK;AAAA,YAEzB,cAAI;AAAA;AAAA,QACP;AAAA,QACA,4CAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAP7C,KAQT,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 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 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,36 @@
-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";
+const MONO = '"Geist Mono", ui-monospace, SFMono-Regular, monospace';
 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 border border-border/60 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",
+            style: { fontFamily: MONO },
+            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\nconst MONO = '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace';\n\n/** Right-rail for launchpad/claim pages — one quiet 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 border border-border/60 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\n                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\"\n                style={{ fontFamily: MONO }}\n              >\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":"AA0BU,cAOM,YAPN;AA1BV,SAAS,mBAAoC;AAe7C,MAAM,OAAO;AAMN,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,YAAY,GAAmB;AACnH,SACE,qBAAC,SAAI,WAAU,yFACZ;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;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,KAAK;AAAA,YAEzB,cAAI;AAAA;AAAA,QACP;AAAA,QACA,oBAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAP7C,KAQT,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 border border-border/60 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 hairline card. With an `aside` it lays out an 8/4 bento\n *  (form left, rail right); without, a single centered column. The brand\n *  gradient belongs to 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 border border-border/60 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;AA8BiB;AA7BjB,gBAAmB;AACnB,4BAA8B;AA0BvB,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,0DAA0D,UAAS,IAElF;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,10 @@ 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 hairline card. 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,10 @@ 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 hairline card. 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 border border-border/60 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 hairline card. With an `aside` it lays out an 8/4 bento\n *  (form left, rail right); without, a single centered column. The brand\n *  gradient belongs to 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 border border-border/60 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":"AA8BiB,cAaP,YAbO;AA7BjB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AA0BvB,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,0DAA0D,UAAS,IAElF;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/package.json

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