@medialane/ui 0.26.0 → 0.27.0

package/README.md

@@ -233,6 +233,7 @@ The package uses [tsup](https://tsup.egoist.dev/) and outputs ESM + CJS + type d
 
 | Version | Added |
 |---|---|
+| **v0.27.0** | `ServiceHeader` gains a `plain` variant (neutral border, no brand gradient); `ServiceFormShell` renders the header `plain` so create/mint form pages carry the gradient border only on the form, not the header. Standalone headers (browse pages, coin page, `/claim` hub) keep the gradient |
 | **v0.26.0** | `LaunchpadServiceCard` "living color cards" high-fidelity pass: per-hue aurora light-leaks, gradient icon tile, hairline gradient frame that ignites on interaction, staggered entrance reveal, press/hover microinteractions, animated CTA arrow; roomier grid gaps + section rhythm. Touch-first, reduced-motion safe |
 | **v0.25.0** | `CoinsExplorer`/`CoinCard` refined: kind label over the artwork (brand hues, not red), quote-currency icon on price, marketplace-style Filters dialog; dropped the Verified badge / FDV / holders / per-card glow / Trade button |
 | **v0.24.0** | Art-forward `CoinCard` redesign — the coin's cover artwork becomes the hero of the tile |

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

@@ -25,7 +25,7 @@ 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, children }) {
-  const header = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_service_header.ServiceHeader, { icon, title, subtitle, headerAccessory });
+  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;
   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,

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  /** 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, children }: ServiceFormShellProps) {\n  const header = <ServiceHeader 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            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4\">{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;AA0BiB;AAzBjB,gBAAmB;AACnB,4BAA8B;AAuBvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,SAAS,GAA0B;AAC7H,QAAM,SAAS,4CAAC,uCAAc,MAAY,OAAc,UAAoB,iBAAkC;AAG9G,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,SACH;AAAA,MACA,4CAAC,SAAI,WAAU,2BAA2B,iBAAM;AAAA,OAClD,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  /** 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, 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            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4\">{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;AA4BiB;AA3BjB,gBAAmB;AACnB,4BAA8B;AAuBvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,SAAS,GAA0B;AAG7H,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,SACH;AAAA,MACA,4CAAC,SAAI,WAAU,2BAA2B,iBAAM;AAAA,OAClD,IAEA,6CAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}

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

@@ -2,7 +2,7 @@ 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, children }) {
-  const header = /* @__PURE__ */ jsx(ServiceHeader, { icon, title, subtitle, headerAccessory });
+  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;
   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,

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  /** 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, children }: ServiceFormShellProps) {\n  const header = <ServiceHeader 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            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4\">{aside}</div>\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          {header}\n          {form}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA0BiB,cAgBP,YAhBO;AAzBjB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAuBvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,SAAS,GAA0B;AAC7H,QAAM,SAAS,oBAAC,iBAAc,MAAY,OAAc,UAAoB,iBAAkC;AAG9G,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,SACH;AAAA,MACA,oBAAC,SAAI,WAAU,2BAA2B,iBAAM;AAAA,OAClD,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  /** 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, 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            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4\">{aside}</div>\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          {header}\n          {form}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA4BiB,cAgBP,YAhBO;AA3BjB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAuBvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,SAAS,GAA0B;AAG7H,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,SACH;AAAA,MACA,oBAAC,SAAI,WAAU,2BAA2B,iBAAM;AAAA,OAClD,IAEA,qBAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/service-header.cjs

@@ -23,15 +23,19 @@ __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 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-[15px] bg-card p-6 sm:p-7", children: [
+function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain = 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)("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 (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 });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-[15px] bg-card p-6 sm:p-7", children: body }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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}\n\n/** Shared launchpad/claim page header: a dark card on a static brand gradient\n *  border, solid primary icon chip, title + subtitle. Pure presentation —\n *  consuming app supplies the icon and (optionally) a header accessory. */\nexport function ServiceHeader({ icon, title, subtitle, headerAccessory, className }: ServiceHeaderProps) {\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\">\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      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBQ;AAnBR,gBAAmB;AAeZ,SAAS,cAAc,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,GAAuB;AACvG,SACE,4CAAC,SAAI,eAAW,cAAG,0FAA0F,SAAS,GACpH,uDAAC,SAAI,WAAU,qCACb;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,GACF;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. 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":[]}

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

@@ -9,10 +9,16 @@ 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. */
+    plain?: boolean;
 }
-/** Shared launchpad/claim page header: a dark card on a static brand gradient
- *  border, solid primary icon chip, title + subtitle. Pure presentation —
+/** 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 }: ServiceHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain }: ServiceHeaderProps): react_jsx_runtime.JSX.Element;
 
 export { ServiceHeader, type ServiceHeaderProps };

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

@@ -9,10 +9,16 @@ 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. */
+    plain?: boolean;
 }
-/** Shared launchpad/claim page header: a dark card on a static brand gradient
- *  border, solid primary icon chip, title + subtitle. Pure presentation —
+/** 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 }: ServiceHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain }: ServiceHeaderProps): react_jsx_runtime.JSX.Element;
 
 export { ServiceHeader, type ServiceHeaderProps };

package/dist/components/service-header.js

@@ -1,14 +1,18 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../utils/cn.js";
-function ServiceHeader({ icon, title, subtitle, headerAccessory, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose", className), children: /* @__PURE__ */ jsxs("div", { className: "rounded-[15px] bg-card p-6 sm:p-7", children: [
+function ServiceHeader({ icon, title, subtitle, headerAccessory, className, plain = 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("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 (plain) {
+    return /* @__PURE__ */ jsx("div", { className: cn("rounded-2xl border border-border/60 bg-card p-6 sm:p-7", className), children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-blue via-brand-purple to-brand-rose", className), children: /* @__PURE__ */ jsx("div", { className: "rounded-[15px] bg-card p-6 sm:p-7", children: body }) });
 }
 export {
   ServiceHeader

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}\n\n/** Shared launchpad/claim page header: a dark card on a static brand gradient\n *  border, solid primary icon chip, title + subtitle. Pure presentation —\n *  consuming app supplies the icon and (optionally) a header accessory. */\nexport function ServiceHeader({ icon, title, subtitle, headerAccessory, className }: ServiceHeaderProps) {\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\">\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      </div>\n    </div>\n  );\n}\n"],"mappings":"AAoBQ,SACE,KADF;AAnBR,SAAS,UAAU;AAeZ,SAAS,cAAc,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,GAAuB;AACvG,SACE,oBAAC,SAAI,WAAW,GAAG,0FAA0F,SAAS,GACpH,+BAAC,SAAI,WAAU,qCACb;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,GACF;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. 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":[]}

package/package.json

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