@medialane/ui 0.94.6 → 0.94.8

package/dist/components/action-button.cjs

@@ -100,7 +100,7 @@ function ActionButton({
       disabled,
       className: (0, import_cn.cn)(
         "ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap",
-        "bg-card text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none",
+        "bg-transparent text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none",
         sizeClass,
         className
       ),

package/dist/components/action-button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\n\nconst ACTION_GRADIENTS: Record<string, [string, string, string]> = {\n  buy:     ['#3b7bff', '#8a5cf6', '#3b7bff'],\n  submit:  ['#d6359a', '#5b4ce6', '#d6359a'],\n  offer:   ['#f6608f', '#fb8b46', '#f6608f'],\n  remix:   ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  license: ['#3b7bff', '#5b4ce6', '#3b7bff'],\n};\n\nconst ACTION_FOREGROUNDS: Record<string, string> = {\n  buy:     '#3b7bff',\n  submit:  '#5b4ce6',\n  offer:   '#fb7a32',\n  remix:   '#8a3ff0',\n  license: '#3b7bff',\n};\n\nconst TONE_GRADIENTS: Record<string, [string, string, string]> = {\n  blue:   ['#3b7bff', '#5b4ce6', '#3b7bff'],\n  indigo: ['#5b4ce6', '#8a5cf6', '#5b4ce6'],\n  purple: ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  orange: ['#fb8b46', '#f6608f', '#fb8b46'],\n  red:    ['#ef5a5a', '#f6608f', '#ef5a5a'],\n  rose:   ['#f6608f', '#fb8b46', '#f6608f'],\n};\n\nconst TONE_FOREGROUNDS: Record<string, string> = {\n  blue:   '#2f6bff',\n  indigo: '#5b4ce6',\n  purple: '#8a3ff0',\n  orange: '#fb7a32',\n  red:    '#ef5a5a',\n  rose:   '#f6608f',\n};\n\nexport type ActionKey = keyof typeof ACTION_GRADIENTS;\nexport type ToneKey = keyof typeof TONE_GRADIENTS;\n\nexport interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Semantic action — hue signals the action, never decorative. */\n  action?: ActionKey;\n  /** Tone — for secondary/owner actions. Ignored when action is set. */\n  tone?: ToneKey;\n  icon?: React.ReactNode;\n  /** Tall 54px variant for hero contexts. */\n  big?: boolean;\n  /** Ghost: no gradient border, muted surface fill. */\n  ghost?: boolean;\n  /**\n   * Inline help/info affordance, rendered next to the label via `renderHelp`\n   * — a render-prop rather than a built-in tooltip because this package\n   * can't depend on an app-specific tooltip primitive.\n   */\n  helpContent?: string;\n  renderHelp?: (content: string) => React.ReactNode;\n}\n\nexport function ActionButton({\n  action,\n  tone,\n  icon,\n  big,\n  ghost,\n  helpContent,\n  renderHelp,\n  disabled,\n  children,\n  className,\n  style,\n  ...rest\n}: ActionButtonProps) {\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[13px] text-[15px]\"\n    : \"h-[46px] px-5 rounded-[13px] text-sm\";\n\n  if (ghost) {\n    return (\n      <button\n        {...rest}\n        disabled={disabled}\n        className={cn(\n          \"inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n          \"bg-muted text-foreground border-none disabled:opacity-50 disabled:pointer-events-none\",\n          sizeClass,\n          className,\n        )}\n        style={style}\n      >\n        {icon}{children}\n        {helpContent && renderHelp ? renderHelp(helpContent) : null}\n      </button>\n    );\n  }\n\n  const gradColors =\n    action ? ACTION_GRADIENTS[action] :\n    tone   ? TONE_GRADIENTS[tone] :\n    ACTION_GRADIENTS.buy;\n\n  const fg =\n    action ? ACTION_FOREGROUNDS[action] :\n    tone   ? TONE_FOREGROUNDS[tone] :\n    ACTION_FOREGROUNDS.buy;\n\n  const grad = `linear-gradient(115deg, ${gradColors.join(',')})`;\n\n  return (\n    <button\n      {...rest}\n      disabled={disabled}\n      className={cn(\n        \"ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n        \"bg-card text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none\",\n        sizeClass,\n        className,\n      )}\n      style={{ '--ml-grad': grad, ...style } as React.CSSProperties}\n    >\n      {icon && <span className=\"inline-flex\" style={{ color: fg }}>{icon}</span>}\n      {children}\n      {helpContent && renderHelp ? renderHelp(helpContent) : null}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgFM;AA9EN,gBAAmB;AAEnB,MAAM,mBAA6D;AAAA,EACjE,KAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,QAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC,WAAW,WAAW,SAAS;AAC3C;AAEA,MAAM,qBAA6C;AAAA,EACjD,KAAS;AAAA,EACT,QAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,iBAA2D;AAAA,EAC/D,MAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,KAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,MAAQ,CAAC,WAAW,WAAW,SAAS;AAC1C;AAEA,MAAM,mBAA2C;AAAA,EAC/C,MAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAQ;AAAA,EACR,MAAQ;AACV;AAwBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,YAAY,MACd,6CACA;AAEJ,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UAAM;AAAA,UACN,eAAe,aAAa,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA,IACzD;AAAA,EAEJ;AAEA,QAAM,aACJ,SAAS,iBAAiB,MAAM,IAChC,OAAS,eAAe,IAAI,IAC5B,iBAAiB;AAEnB,QAAM,KACJ,SAAS,mBAAmB,MAAM,IAClC,OAAS,iBAAiB,IAAI,IAC9B,mBAAmB;AAErB,QAAM,OAAO,2BAA2B,WAAW,KAAK,GAAG,CAAC;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,MAAM,GAAG,MAAM;AAAA,MAEpC;AAAA,gBAAQ,4CAAC,UAAK,WAAU,eAAc,OAAO,EAAE,OAAO,GAAG,GAAI,gBAAK;AAAA,QAClE;AAAA,QACA,eAAe,aAAa,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA,EACzD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\n\nconst ACTION_GRADIENTS: Record<string, [string, string, string]> = {\n  buy:     ['#3b7bff', '#8a5cf6', '#3b7bff'],\n  submit:  ['#d6359a', '#5b4ce6', '#d6359a'],\n  offer:   ['#f6608f', '#fb8b46', '#f6608f'],\n  remix:   ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  license: ['#3b7bff', '#5b4ce6', '#3b7bff'],\n};\n\nconst ACTION_FOREGROUNDS: Record<string, string> = {\n  buy:     '#3b7bff',\n  submit:  '#5b4ce6',\n  offer:   '#fb7a32',\n  remix:   '#8a3ff0',\n  license: '#3b7bff',\n};\n\nconst TONE_GRADIENTS: Record<string, [string, string, string]> = {\n  blue:   ['#3b7bff', '#5b4ce6', '#3b7bff'],\n  indigo: ['#5b4ce6', '#8a5cf6', '#5b4ce6'],\n  purple: ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  orange: ['#fb8b46', '#f6608f', '#fb8b46'],\n  red:    ['#ef5a5a', '#f6608f', '#ef5a5a'],\n  rose:   ['#f6608f', '#fb8b46', '#f6608f'],\n};\n\nconst TONE_FOREGROUNDS: Record<string, string> = {\n  blue:   '#2f6bff',\n  indigo: '#5b4ce6',\n  purple: '#8a3ff0',\n  orange: '#fb7a32',\n  red:    '#ef5a5a',\n  rose:   '#f6608f',\n};\n\nexport type ActionKey = keyof typeof ACTION_GRADIENTS;\nexport type ToneKey = keyof typeof TONE_GRADIENTS;\n\nexport interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Semantic action — hue signals the action, never decorative. */\n  action?: ActionKey;\n  /** Tone — for secondary/owner actions. Ignored when action is set. */\n  tone?: ToneKey;\n  icon?: React.ReactNode;\n  /** Tall 54px variant for hero contexts. */\n  big?: boolean;\n  /** Ghost: no gradient border, muted surface fill. */\n  ghost?: boolean;\n  /**\n   * Inline help/info affordance, rendered next to the label via `renderHelp`\n   * — a render-prop rather than a built-in tooltip because this package\n   * can't depend on an app-specific tooltip primitive.\n   */\n  helpContent?: string;\n  renderHelp?: (content: string) => React.ReactNode;\n}\n\nexport function ActionButton({\n  action,\n  tone,\n  icon,\n  big,\n  ghost,\n  helpContent,\n  renderHelp,\n  disabled,\n  children,\n  className,\n  style,\n  ...rest\n}: ActionButtonProps) {\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[13px] text-[15px]\"\n    : \"h-[46px] px-5 rounded-[13px] text-sm\";\n\n  if (ghost) {\n    return (\n      <button\n        {...rest}\n        disabled={disabled}\n        className={cn(\n          \"inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n          \"bg-muted text-foreground border-none disabled:opacity-50 disabled:pointer-events-none\",\n          sizeClass,\n          className,\n        )}\n        style={style}\n      >\n        {icon}{children}\n        {helpContent && renderHelp ? renderHelp(helpContent) : null}\n      </button>\n    );\n  }\n\n  const gradColors =\n    action ? ACTION_GRADIENTS[action] :\n    tone   ? TONE_GRADIENTS[tone] :\n    ACTION_GRADIENTS.buy;\n\n  const fg =\n    action ? ACTION_FOREGROUNDS[action] :\n    tone   ? TONE_FOREGROUNDS[tone] :\n    ACTION_FOREGROUNDS.buy;\n\n  const grad = `linear-gradient(115deg, ${gradColors.join(',')})`;\n\n  return (\n    <button\n      {...rest}\n      disabled={disabled}\n      className={cn(\n        \"ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n        \"bg-transparent text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none\",\n        sizeClass,\n        className,\n      )}\n      style={{ '--ml-grad': grad, ...style } as React.CSSProperties}\n    >\n      {icon && <span className=\"inline-flex\" style={{ color: fg }}>{icon}</span>}\n      {children}\n      {helpContent && renderHelp ? renderHelp(helpContent) : null}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgFM;AA9EN,gBAAmB;AAEnB,MAAM,mBAA6D;AAAA,EACjE,KAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,QAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC,WAAW,WAAW,SAAS;AAC3C;AAEA,MAAM,qBAA6C;AAAA,EACjD,KAAS;AAAA,EACT,QAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,iBAA2D;AAAA,EAC/D,MAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,KAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,MAAQ,CAAC,WAAW,WAAW,SAAS;AAC1C;AAEA,MAAM,mBAA2C;AAAA,EAC/C,MAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAQ;AAAA,EACR,MAAQ;AACV;AAwBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,YAAY,MACd,6CACA;AAEJ,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UAAM;AAAA,UACN,eAAe,aAAa,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA,IACzD;AAAA,EAEJ;AAEA,QAAM,aACJ,SAAS,iBAAiB,MAAM,IAChC,OAAS,eAAe,IAAI,IAC5B,iBAAiB;AAEnB,QAAM,KACJ,SAAS,mBAAmB,MAAM,IAClC,OAAS,iBAAiB,IAAI,IAC9B,mBAAmB;AAErB,QAAM,OAAO,2BAA2B,WAAW,KAAK,GAAG,CAAC;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,MAAM,GAAG,MAAM;AAAA,MAEpC;AAAA,gBAAQ,4CAAC,UAAK,WAAU,eAAc,OAAO,EAAE,OAAO,GAAG,GAAI,gBAAK;AAAA,QAClE;AAAA,QACA,eAAe,aAAa,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA,EACzD;AAEJ;","names":[]}

package/dist/components/action-button.js

@@ -77,7 +77,7 @@ function ActionButton({
       disabled,
       className: cn(
         "ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap",
-        "bg-card text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none",
+        "bg-transparent text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none",
         sizeClass,
         className
       ),

package/dist/components/action-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\n\nconst ACTION_GRADIENTS: Record<string, [string, string, string]> = {\n  buy:     ['#3b7bff', '#8a5cf6', '#3b7bff'],\n  submit:  ['#d6359a', '#5b4ce6', '#d6359a'],\n  offer:   ['#f6608f', '#fb8b46', '#f6608f'],\n  remix:   ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  license: ['#3b7bff', '#5b4ce6', '#3b7bff'],\n};\n\nconst ACTION_FOREGROUNDS: Record<string, string> = {\n  buy:     '#3b7bff',\n  submit:  '#5b4ce6',\n  offer:   '#fb7a32',\n  remix:   '#8a3ff0',\n  license: '#3b7bff',\n};\n\nconst TONE_GRADIENTS: Record<string, [string, string, string]> = {\n  blue:   ['#3b7bff', '#5b4ce6', '#3b7bff'],\n  indigo: ['#5b4ce6', '#8a5cf6', '#5b4ce6'],\n  purple: ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  orange: ['#fb8b46', '#f6608f', '#fb8b46'],\n  red:    ['#ef5a5a', '#f6608f', '#ef5a5a'],\n  rose:   ['#f6608f', '#fb8b46', '#f6608f'],\n};\n\nconst TONE_FOREGROUNDS: Record<string, string> = {\n  blue:   '#2f6bff',\n  indigo: '#5b4ce6',\n  purple: '#8a3ff0',\n  orange: '#fb7a32',\n  red:    '#ef5a5a',\n  rose:   '#f6608f',\n};\n\nexport type ActionKey = keyof typeof ACTION_GRADIENTS;\nexport type ToneKey = keyof typeof TONE_GRADIENTS;\n\nexport interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Semantic action — hue signals the action, never decorative. */\n  action?: ActionKey;\n  /** Tone — for secondary/owner actions. Ignored when action is set. */\n  tone?: ToneKey;\n  icon?: React.ReactNode;\n  /** Tall 54px variant for hero contexts. */\n  big?: boolean;\n  /** Ghost: no gradient border, muted surface fill. */\n  ghost?: boolean;\n  /**\n   * Inline help/info affordance, rendered next to the label via `renderHelp`\n   * — a render-prop rather than a built-in tooltip because this package\n   * can't depend on an app-specific tooltip primitive.\n   */\n  helpContent?: string;\n  renderHelp?: (content: string) => React.ReactNode;\n}\n\nexport function ActionButton({\n  action,\n  tone,\n  icon,\n  big,\n  ghost,\n  helpContent,\n  renderHelp,\n  disabled,\n  children,\n  className,\n  style,\n  ...rest\n}: ActionButtonProps) {\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[13px] text-[15px]\"\n    : \"h-[46px] px-5 rounded-[13px] text-sm\";\n\n  if (ghost) {\n    return (\n      <button\n        {...rest}\n        disabled={disabled}\n        className={cn(\n          \"inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n          \"bg-muted text-foreground border-none disabled:opacity-50 disabled:pointer-events-none\",\n          sizeClass,\n          className,\n        )}\n        style={style}\n      >\n        {icon}{children}\n        {helpContent && renderHelp ? renderHelp(helpContent) : null}\n      </button>\n    );\n  }\n\n  const gradColors =\n    action ? ACTION_GRADIENTS[action] :\n    tone   ? TONE_GRADIENTS[tone] :\n    ACTION_GRADIENTS.buy;\n\n  const fg =\n    action ? ACTION_FOREGROUNDS[action] :\n    tone   ? TONE_FOREGROUNDS[tone] :\n    ACTION_FOREGROUNDS.buy;\n\n  const grad = `linear-gradient(115deg, ${gradColors.join(',')})`;\n\n  return (\n    <button\n      {...rest}\n      disabled={disabled}\n      className={cn(\n        \"ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n        \"bg-card text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none\",\n        sizeClass,\n        className,\n      )}\n      style={{ '--ml-grad': grad, ...style } as React.CSSProperties}\n    >\n      {icon && <span className=\"inline-flex\" style={{ color: fg }}>{icon}</span>}\n      {children}\n      {helpContent && renderHelp ? renderHelp(helpContent) : null}\n    </button>\n  );\n}\n"],"mappings":";AAgFM,SAyCS,KAzCT;AA9EN,SAAS,UAAU;AAEnB,MAAM,mBAA6D;AAAA,EACjE,KAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,QAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC,WAAW,WAAW,SAAS;AAC3C;AAEA,MAAM,qBAA6C;AAAA,EACjD,KAAS;AAAA,EACT,QAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,iBAA2D;AAAA,EAC/D,MAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,KAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,MAAQ,CAAC,WAAW,WAAW,SAAS;AAC1C;AAEA,MAAM,mBAA2C;AAAA,EAC/C,MAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAQ;AAAA,EACR,MAAQ;AACV;AAwBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,YAAY,MACd,6CACA;AAEJ,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UAAM;AAAA,UACN,eAAe,aAAa,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA,IACzD;AAAA,EAEJ;AAEA,QAAM,aACJ,SAAS,iBAAiB,MAAM,IAChC,OAAS,eAAe,IAAI,IAC5B,iBAAiB;AAEnB,QAAM,KACJ,SAAS,mBAAmB,MAAM,IAClC,OAAS,iBAAiB,IAAI,IAC9B,mBAAmB;AAErB,QAAM,OAAO,2BAA2B,WAAW,KAAK,GAAG,CAAC;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,MAAM,GAAG,MAAM;AAAA,MAEpC;AAAA,gBAAQ,oBAAC,UAAK,WAAU,eAAc,OAAO,EAAE,OAAO,GAAG,GAAI,gBAAK;AAAA,QAClE;AAAA,QACA,eAAe,aAAa,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA,EACzD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\n\nconst ACTION_GRADIENTS: Record<string, [string, string, string]> = {\n  buy:     ['#3b7bff', '#8a5cf6', '#3b7bff'],\n  submit:  ['#d6359a', '#5b4ce6', '#d6359a'],\n  offer:   ['#f6608f', '#fb8b46', '#f6608f'],\n  remix:   ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  license: ['#3b7bff', '#5b4ce6', '#3b7bff'],\n};\n\nconst ACTION_FOREGROUNDS: Record<string, string> = {\n  buy:     '#3b7bff',\n  submit:  '#5b4ce6',\n  offer:   '#fb7a32',\n  remix:   '#8a3ff0',\n  license: '#3b7bff',\n};\n\nconst TONE_GRADIENTS: Record<string, [string, string, string]> = {\n  blue:   ['#3b7bff', '#5b4ce6', '#3b7bff'],\n  indigo: ['#5b4ce6', '#8a5cf6', '#5b4ce6'],\n  purple: ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  orange: ['#fb8b46', '#f6608f', '#fb8b46'],\n  red:    ['#ef5a5a', '#f6608f', '#ef5a5a'],\n  rose:   ['#f6608f', '#fb8b46', '#f6608f'],\n};\n\nconst TONE_FOREGROUNDS: Record<string, string> = {\n  blue:   '#2f6bff',\n  indigo: '#5b4ce6',\n  purple: '#8a3ff0',\n  orange: '#fb7a32',\n  red:    '#ef5a5a',\n  rose:   '#f6608f',\n};\n\nexport type ActionKey = keyof typeof ACTION_GRADIENTS;\nexport type ToneKey = keyof typeof TONE_GRADIENTS;\n\nexport interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Semantic action — hue signals the action, never decorative. */\n  action?: ActionKey;\n  /** Tone — for secondary/owner actions. Ignored when action is set. */\n  tone?: ToneKey;\n  icon?: React.ReactNode;\n  /** Tall 54px variant for hero contexts. */\n  big?: boolean;\n  /** Ghost: no gradient border, muted surface fill. */\n  ghost?: boolean;\n  /**\n   * Inline help/info affordance, rendered next to the label via `renderHelp`\n   * — a render-prop rather than a built-in tooltip because this package\n   * can't depend on an app-specific tooltip primitive.\n   */\n  helpContent?: string;\n  renderHelp?: (content: string) => React.ReactNode;\n}\n\nexport function ActionButton({\n  action,\n  tone,\n  icon,\n  big,\n  ghost,\n  helpContent,\n  renderHelp,\n  disabled,\n  children,\n  className,\n  style,\n  ...rest\n}: ActionButtonProps) {\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[13px] text-[15px]\"\n    : \"h-[46px] px-5 rounded-[13px] text-sm\";\n\n  if (ghost) {\n    return (\n      <button\n        {...rest}\n        disabled={disabled}\n        className={cn(\n          \"inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n          \"bg-muted text-foreground border-none disabled:opacity-50 disabled:pointer-events-none\",\n          sizeClass,\n          className,\n        )}\n        style={style}\n      >\n        {icon}{children}\n        {helpContent && renderHelp ? renderHelp(helpContent) : null}\n      </button>\n    );\n  }\n\n  const gradColors =\n    action ? ACTION_GRADIENTS[action] :\n    tone   ? TONE_GRADIENTS[tone] :\n    ACTION_GRADIENTS.buy;\n\n  const fg =\n    action ? ACTION_FOREGROUNDS[action] :\n    tone   ? TONE_FOREGROUNDS[tone] :\n    ACTION_FOREGROUNDS.buy;\n\n  const grad = `linear-gradient(115deg, ${gradColors.join(',')})`;\n\n  return (\n    <button\n      {...rest}\n      disabled={disabled}\n      className={cn(\n        \"ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n        \"bg-transparent text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none\",\n        sizeClass,\n        className,\n      )}\n      style={{ '--ml-grad': grad, ...style } as React.CSSProperties}\n    >\n      {icon && <span className=\"inline-flex\" style={{ color: fg }}>{icon}</span>}\n      {children}\n      {helpContent && renderHelp ? renderHelp(helpContent) : null}\n    </button>\n  );\n}\n"],"mappings":";AAgFM,SAyCS,KAzCT;AA9EN,SAAS,UAAU;AAEnB,MAAM,mBAA6D;AAAA,EACjE,KAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,QAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC,WAAW,WAAW,SAAS;AAC3C;AAEA,MAAM,qBAA6C;AAAA,EACjD,KAAS;AAAA,EACT,QAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,iBAA2D;AAAA,EAC/D,MAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,KAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,MAAQ,CAAC,WAAW,WAAW,SAAS;AAC1C;AAEA,MAAM,mBAA2C;AAAA,EAC/C,MAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAQ;AAAA,EACR,MAAQ;AACV;AAwBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,YAAY,MACd,6CACA;AAEJ,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UAAM;AAAA,UACN,eAAe,aAAa,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA,IACzD;AAAA,EAEJ;AAEA,QAAM,aACJ,SAAS,iBAAiB,MAAM,IAChC,OAAS,eAAe,IAAI,IAC5B,iBAAiB;AAEnB,QAAM,KACJ,SAAS,mBAAmB,MAAM,IAClC,OAAS,iBAAiB,IAAI,IAC9B,mBAAmB;AAErB,QAAM,OAAO,2BAA2B,WAAW,KAAK,GAAG,CAAC;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,MAAM,GAAG,MAAM;AAAA,MAEpC;AAAA,gBAAQ,oBAAC,UAAK,WAAU,eAAc,OAAO,EAAE,OAAO,GAAG,GAAI,gBAAK;AAAA,QAClE;AAAA,QACA,eAAe,aAAa,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA,EACzD;AAEJ;","names":[]}

package/dist/components/activity-card.cjs

@@ -35,12 +35,13 @@ __export(activity_card_exports, {
 });
 module.exports = __toCommonJS(activity_card_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_image = __toESM(require("next/image"), 1);
 var import_link = __toESM(require("next/link"), 1);
 var import_lucide_react = require("lucide-react");
 var import_currency_icon = require("./currency-icon.js");
+var import_animated_token_media = require("./animated-token-media.js");
 var import_activity = require("../data/activity.js");
 var import_ipfs = require("../utils/ipfs.js");
+var import_living_render_collections = require("../data/living-render-collections.js");
 var import_time = require("../utils/time.js");
 var import_format = require("../utils/format.js");
 var import_cn = require("../utils/cn.js");
@@ -80,22 +81,26 @@ function ActivityCard({
   const tokenName = activity.token?.name ?? (tokenId ? `#${tokenId}` : "\u2014");
   const rawImage = activity.token?.image ?? null;
   const tokenImage = rawImage ? (0, import_ipfs.ipfsToHttp)(rawImage) : null;
+  const animationUrl = activity.token?.animationUrl ?? null;
+  const live = !!(activity.chain && contract) && (0, import_living_render_collections.isLivingRenderCollection)(activity.chain.toUpperCase(), contract);
   const amount = activity.amount && Number(activity.amount) > 1 ? activity.amount : null;
   const shortActor = actor ? actor.length > 10 ? `${actor.slice(0, 6)}\u2026${actor.slice(-4)}` : actor : null;
   const message = ACTIVITY_MESSAGES[activity.type]?.(shortActor) ?? config.label;
   const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "aspect-square relative bg-muted", children: [
-      tokenImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_image.default,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_animated_token_media.AnimatedTokenMedia,
         {
-          src: tokenImage,
+          image: tokenImage,
+          animationUrl,
+          live,
           alt: tokenName,
-          fill: true,
+          mode: "fill",
           sizes: "256px",
           className: "object-cover",
-          unoptimized: true
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-muted-foreground/10 to-muted-foreground/5", "aria-hidden": true })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-muted-foreground/10 to-muted-foreground/5", "aria-hidden": true }),
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "absolute top-2.5 left-2.5 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-background/75 backdrop-blur-md border border-border/40", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: (0, import_cn.cn)("h-3 w-3", config.colorClass), "aria-hidden": true }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: config.colorClass, children: config.label })

package/dist/components/activity-card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/activity-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { ExternalLink } from \"lucide-react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { ACTIVITY_TYPE_CONFIG } from \"../data/activity.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { cn } from \"../utils/cn.js\";\nimport type { ApiActivity } from \"@medialane/sdk\";\n\n/** ui's pinned SDK lags the apps — extend structurally for fields newer SDKs carry. */\ntype ActivityWithEnrichment = ApiActivity & {\n  token?: { name: string | null; image: string | null } | null;\n  amount?: string;\n};\n\nexport const ACTIVITY_MESSAGES: Record<string, (actor: string | null) => string> = {\n  mint:      (actor) => actor ? `Minted by ${actor}` : \"Newly minted\",\n  listing:   (actor) => actor ? `Listed by ${actor}` : \"Listed for sale\",\n  sale:      (actor) => actor ? `Purchased by ${actor}` : \"Sold\",\n  offer:     (actor) => actor ? `Offer by ${actor}` : \"Offer placed\",\n  transfer:  (actor) => actor ? `Transferred by ${actor}` : \"Transferred\",\n  cancelled: (actor) => actor ? `Cancelled by ${actor}` : \"Listing cancelled\",\n};\n\nexport function ActivityCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-4 space-y-2\">\n        <div className=\"h-4 w-32 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-24 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n\nexport interface ActivityCardProps {\n  activity: ApiActivity;\n  /** Builds the asset link; card is unlinked when the activity has no token ref */\n  getAssetHref?: (contract: string, tokenId: string) => string;\n}\n\n/** Card-shaped activity item for horizontal carousels (Discover Community strip).\n *  Same data as ActivityRow, presented like a collection/listing card. */\nexport function ActivityCard({\n  activity: rawActivity,\n  getAssetHref = (c, t) => `/asset/${c}/${t}`,\n}: ActivityCardProps) {\n  const activity = rawActivity as ActivityWithEnrichment;\n  const config = ACTIVITY_TYPE_CONFIG[activity.type] ?? {\n    label: activity.type,\n    variant: \"outline\" as const,\n    icon: ExternalLink,\n    colorClass: \"text-muted-foreground\",\n    bgClass: \"bg-muted\",\n  };\n  const Icon = config.icon;\n\n  const contract = activity.nftContract ?? activity.contractAddress ?? null;\n  const tokenId = activity.nftTokenId ?? activity.tokenId ?? null;\n  const actor =\n    activity.offerer ??\n    activity.fulfiller ??\n    ((activity.type as string) === \"mint\" ? activity.to : activity.from) ??\n    null;\n\n  const tokenName = activity.token?.name ?? (tokenId ? `#${tokenId}` : \"—\");\n  const rawImage = activity.token?.image ?? null;\n  const tokenImage = rawImage ? ipfsToHttp(rawImage) : null;\n  const amount = activity.amount && Number(activity.amount) > 1 ? activity.amount : null;\n\n  const shortActor = actor\n    ? actor.length > 10\n      ? `${actor.slice(0, 6)}…${actor.slice(-4)}`\n      : actor\n    : null;\n  const message = ACTIVITY_MESSAGES[activity.type]?.(shortActor) ?? config.label;\n\n  const body = (\n    <>\n      <div className=\"aspect-square relative bg-muted\">\n        {tokenImage ? (\n          <Image\n            src={tokenImage}\n            alt={tokenName}\n            fill\n            sizes=\"256px\"\n            className=\"object-cover\"\n            unoptimized\n          />\n        ) : (\n          <div className=\"absolute inset-0 bg-gradient-to-br from-muted-foreground/10 to-muted-foreground/5\" aria-hidden />\n        )}\n        {/* Activity type chip — vivid label on glass */}\n        <span className=\"absolute top-2.5 left-2.5 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-background/75 backdrop-blur-md border border-border/40\">\n          <Icon className={cn(\"h-3 w-3\", config.colorClass)} aria-hidden />\n          <span className={config.colorClass}>{config.label}</span>\n        </span>\n        {amount && (\n          <span className=\"absolute bottom-2.5 right-2.5 px-2 py-0.5 rounded-full text-[10px] font-bold bg-violet-500 text-white\">\n            ×{amount}\n          </span>\n        )}\n      </div>\n      <div className=\"p-4 space-y-1.5\">\n        <p className=\"text-[15px] font-semibold truncate\">{tokenName}</p>\n        <p\n          className=\"text-xs text-muted-foreground truncate\"\n          title={new Date(activity.timestamp).toLocaleString()}\n        >\n          {message} · {timeAgo(activity.timestamp)}\n        </p>\n        {activity.price?.formatted && (\n          <p className=\"text-sm font-bold tabular-nums flex items-center gap-1.5 pt-0.5\">\n            {activity.price.currency && <CurrencyIcon symbol={activity.price.currency} size={13} aria-hidden />}\n            {formatDisplayPrice(activity.price.formatted)}\n          </p>\n        )}\n      </div>\n    </>\n  );\n\n  const className = \"card-base block active:scale-[0.99] transition-all\";\n\n  return contract && tokenId ? (\n    <Link href={getAssetHref(contract, tokenId)} className={className}>\n      {body}\n    </Link>\n  ) : (\n    <div className={className}>{body}</div>\n  );\n}\n"],"mappings":"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","names":["Image","Link"]}
+{"version":3,"sources":["../../src/components/activity-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ExternalLink } from \"lucide-react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.js\";\nimport { ACTIVITY_TYPE_CONFIG } from \"../data/activity.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { isLivingRenderCollection } from \"../data/living-render-collections.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { cn } from \"../utils/cn.js\";\nimport type { ApiActivity, Chain } from \"@medialane/sdk\";\n\n/** ui's pinned SDK lags the apps — extend structurally for fields newer SDKs carry. */\ntype ActivityWithEnrichment = ApiActivity & {\n  chain?: Chain;\n  token?: { name: string | null; image: string | null; animationUrl?: string | null } | null;\n  amount?: string;\n};\n\nexport const ACTIVITY_MESSAGES: Record<string, (actor: string | null) => string> = {\n  mint:      (actor) => actor ? `Minted by ${actor}` : \"Newly minted\",\n  listing:   (actor) => actor ? `Listed by ${actor}` : \"Listed for sale\",\n  sale:      (actor) => actor ? `Purchased by ${actor}` : \"Sold\",\n  offer:     (actor) => actor ? `Offer by ${actor}` : \"Offer placed\",\n  transfer:  (actor) => actor ? `Transferred by ${actor}` : \"Transferred\",\n  cancelled: (actor) => actor ? `Cancelled by ${actor}` : \"Listing cancelled\",\n};\n\nexport function ActivityCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-4 space-y-2\">\n        <div className=\"h-4 w-32 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-24 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n\nexport interface ActivityCardProps {\n  activity: ApiActivity;\n  /** Builds the asset link; card is unlinked when the activity has no token ref */\n  getAssetHref?: (contract: string, tokenId: string) => string;\n}\n\n/** Card-shaped activity item for horizontal carousels (Discover Community strip).\n *  Same data as ActivityRow, presented like a collection/listing card. */\nexport function ActivityCard({\n  activity: rawActivity,\n  getAssetHref = (c, t) => `/asset/${c}/${t}`,\n}: ActivityCardProps) {\n  const activity = rawActivity as ActivityWithEnrichment;\n  const config = ACTIVITY_TYPE_CONFIG[activity.type] ?? {\n    label: activity.type,\n    variant: \"outline\" as const,\n    icon: ExternalLink,\n    colorClass: \"text-muted-foreground\",\n    bgClass: \"bg-muted\",\n  };\n  const Icon = config.icon;\n\n  const contract = activity.nftContract ?? activity.contractAddress ?? null;\n  const tokenId = activity.nftTokenId ?? activity.tokenId ?? null;\n  const actor =\n    activity.offerer ??\n    activity.fulfiller ??\n    ((activity.type as string) === \"mint\" ? activity.to : activity.from) ??\n    null;\n\n  const tokenName = activity.token?.name ?? (tokenId ? `#${tokenId}` : \"—\");\n  const rawImage = activity.token?.image ?? null;\n  const tokenImage = rawImage ? ipfsToHttp(rawImage) : null;\n  // Not resolved through ipfsToHttp — animation_url is legitimately a data: URI for\n  // fully on-chain-rendered collections (ipfsToHttp rejects data: by design), and\n  // AnimatedTokenMedia accepts it as-is, mirroring token-card.tsx's same field.\n  const animationUrl = activity.token?.animationUrl ?? null;\n  const live = !!(activity.chain && contract) && isLivingRenderCollection(activity.chain.toUpperCase() as Chain, contract);\n  const amount = activity.amount && Number(activity.amount) > 1 ? activity.amount : null;\n\n  const shortActor = actor\n    ? actor.length > 10\n      ? `${actor.slice(0, 6)}…${actor.slice(-4)}`\n      : actor\n    : null;\n  const message = ACTIVITY_MESSAGES[activity.type]?.(shortActor) ?? config.label;\n\n  const body = (\n    <>\n      <div className=\"aspect-square relative bg-muted\">\n        <AnimatedTokenMedia\n          image={tokenImage}\n          animationUrl={animationUrl}\n          live={live}\n          alt={tokenName}\n          mode=\"fill\"\n          sizes=\"256px\"\n          className=\"object-cover\"\n          fallback={\n            <div className=\"absolute inset-0 bg-gradient-to-br from-muted-foreground/10 to-muted-foreground/5\" aria-hidden />\n          }\n        />\n        {/* Activity type chip — vivid label on glass */}\n        <span className=\"absolute top-2.5 left-2.5 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-background/75 backdrop-blur-md border border-border/40\">\n          <Icon className={cn(\"h-3 w-3\", config.colorClass)} aria-hidden />\n          <span className={config.colorClass}>{config.label}</span>\n        </span>\n        {amount && (\n          <span className=\"absolute bottom-2.5 right-2.5 px-2 py-0.5 rounded-full text-[10px] font-bold bg-violet-500 text-white\">\n            ×{amount}\n          </span>\n        )}\n      </div>\n      <div className=\"p-4 space-y-1.5\">\n        <p className=\"text-[15px] font-semibold truncate\">{tokenName}</p>\n        <p\n          className=\"text-xs text-muted-foreground truncate\"\n          title={new Date(activity.timestamp).toLocaleString()}\n        >\n          {message} · {timeAgo(activity.timestamp)}\n        </p>\n        {activity.price?.formatted && (\n          <p className=\"text-sm font-bold tabular-nums flex items-center gap-1.5 pt-0.5\">\n            {activity.price.currency && <CurrencyIcon symbol={activity.price.currency} size={13} aria-hidden />}\n            {formatDisplayPrice(activity.price.formatted)}\n          </p>\n        )}\n      </div>\n    </>\n  );\n\n  const className = \"card-base block active:scale-[0.99] transition-all\";\n\n  return contract && tokenId ? (\n    <Link href={getAssetHref(contract, tokenId)} className={className}>\n      {body}\n    </Link>\n  ) : (\n    <div className={className}>{body}</div>\n  );\n}\n"],"mappings":"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","names":["Link"]}

package/dist/components/activity-card.js

@@ -1,11 +1,12 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import Image from "next/image";
 import Link from "next/link";
 import { ExternalLink } from "lucide-react";
 import { CurrencyIcon } from "./currency-icon.js";
+import { AnimatedTokenMedia } from "./animated-token-media.js";
 import { ACTIVITY_TYPE_CONFIG } from "../data/activity.js";
 import { ipfsToHttp } from "../utils/ipfs.js";
+import { isLivingRenderCollection } from "../data/living-render-collections.js";
 import { timeAgo } from "../utils/time.js";
 import { formatDisplayPrice } from "../utils/format.js";
 import { cn } from "../utils/cn.js";
@@ -45,22 +46,26 @@ function ActivityCard({
   const tokenName = activity.token?.name ?? (tokenId ? `#${tokenId}` : "\u2014");
   const rawImage = activity.token?.image ?? null;
   const tokenImage = rawImage ? ipfsToHttp(rawImage) : null;
+  const animationUrl = activity.token?.animationUrl ?? null;
+  const live = !!(activity.chain && contract) && isLivingRenderCollection(activity.chain.toUpperCase(), contract);
   const amount = activity.amount && Number(activity.amount) > 1 ? activity.amount : null;
   const shortActor = actor ? actor.length > 10 ? `${actor.slice(0, 6)}\u2026${actor.slice(-4)}` : actor : null;
   const message = ACTIVITY_MESSAGES[activity.type]?.(shortActor) ?? config.label;
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "aspect-square relative bg-muted", children: [
-      tokenImage ? /* @__PURE__ */ jsx(
-        Image,
+      /* @__PURE__ */ jsx(
+        AnimatedTokenMedia,
         {
-          src: tokenImage,
+          image: tokenImage,
+          animationUrl,
+          live,
           alt: tokenName,
-          fill: true,
+          mode: "fill",
           sizes: "256px",
           className: "object-cover",
-          unoptimized: true
+          fallback: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-muted-foreground/10 to-muted-foreground/5", "aria-hidden": true })
         }
-      ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-muted-foreground/10 to-muted-foreground/5", "aria-hidden": true }),
+      ),
       /* @__PURE__ */ jsxs("span", { className: "absolute top-2.5 left-2.5 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-background/75 backdrop-blur-md border border-border/40", children: [
         /* @__PURE__ */ jsx(Icon, { className: cn("h-3 w-3", config.colorClass), "aria-hidden": true }),
         /* @__PURE__ */ jsx("span", { className: config.colorClass, children: config.label })

package/dist/components/activity-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/activity-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { ExternalLink } from \"lucide-react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { ACTIVITY_TYPE_CONFIG } from \"../data/activity.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { cn } from \"../utils/cn.js\";\nimport type { ApiActivity } from \"@medialane/sdk\";\n\n/** ui's pinned SDK lags the apps — extend structurally for fields newer SDKs carry. */\ntype ActivityWithEnrichment = ApiActivity & {\n  token?: { name: string | null; image: string | null } | null;\n  amount?: string;\n};\n\nexport const ACTIVITY_MESSAGES: Record<string, (actor: string | null) => string> = {\n  mint:      (actor) => actor ? `Minted by ${actor}` : \"Newly minted\",\n  listing:   (actor) => actor ? `Listed by ${actor}` : \"Listed for sale\",\n  sale:      (actor) => actor ? `Purchased by ${actor}` : \"Sold\",\n  offer:     (actor) => actor ? `Offer by ${actor}` : \"Offer placed\",\n  transfer:  (actor) => actor ? `Transferred by ${actor}` : \"Transferred\",\n  cancelled: (actor) => actor ? `Cancelled by ${actor}` : \"Listing cancelled\",\n};\n\nexport function ActivityCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-4 space-y-2\">\n        <div className=\"h-4 w-32 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-24 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n\nexport interface ActivityCardProps {\n  activity: ApiActivity;\n  /** Builds the asset link; card is unlinked when the activity has no token ref */\n  getAssetHref?: (contract: string, tokenId: string) => string;\n}\n\n/** Card-shaped activity item for horizontal carousels (Discover Community strip).\n *  Same data as ActivityRow, presented like a collection/listing card. */\nexport function ActivityCard({\n  activity: rawActivity,\n  getAssetHref = (c, t) => `/asset/${c}/${t}`,\n}: ActivityCardProps) {\n  const activity = rawActivity as ActivityWithEnrichment;\n  const config = ACTIVITY_TYPE_CONFIG[activity.type] ?? {\n    label: activity.type,\n    variant: \"outline\" as const,\n    icon: ExternalLink,\n    colorClass: \"text-muted-foreground\",\n    bgClass: \"bg-muted\",\n  };\n  const Icon = config.icon;\n\n  const contract = activity.nftContract ?? activity.contractAddress ?? null;\n  const tokenId = activity.nftTokenId ?? activity.tokenId ?? null;\n  const actor =\n    activity.offerer ??\n    activity.fulfiller ??\n    ((activity.type as string) === \"mint\" ? activity.to : activity.from) ??\n    null;\n\n  const tokenName = activity.token?.name ?? (tokenId ? `#${tokenId}` : \"—\");\n  const rawImage = activity.token?.image ?? null;\n  const tokenImage = rawImage ? ipfsToHttp(rawImage) : null;\n  const amount = activity.amount && Number(activity.amount) > 1 ? activity.amount : null;\n\n  const shortActor = actor\n    ? actor.length > 10\n      ? `${actor.slice(0, 6)}…${actor.slice(-4)}`\n      : actor\n    : null;\n  const message = ACTIVITY_MESSAGES[activity.type]?.(shortActor) ?? config.label;\n\n  const body = (\n    <>\n      <div className=\"aspect-square relative bg-muted\">\n        {tokenImage ? (\n          <Image\n            src={tokenImage}\n            alt={tokenName}\n            fill\n            sizes=\"256px\"\n            className=\"object-cover\"\n            unoptimized\n          />\n        ) : (\n          <div className=\"absolute inset-0 bg-gradient-to-br from-muted-foreground/10 to-muted-foreground/5\" aria-hidden />\n        )}\n        {/* Activity type chip — vivid label on glass */}\n        <span className=\"absolute top-2.5 left-2.5 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-background/75 backdrop-blur-md border border-border/40\">\n          <Icon className={cn(\"h-3 w-3\", config.colorClass)} aria-hidden />\n          <span className={config.colorClass}>{config.label}</span>\n        </span>\n        {amount && (\n          <span className=\"absolute bottom-2.5 right-2.5 px-2 py-0.5 rounded-full text-[10px] font-bold bg-violet-500 text-white\">\n            ×{amount}\n          </span>\n        )}\n      </div>\n      <div className=\"p-4 space-y-1.5\">\n        <p className=\"text-[15px] font-semibold truncate\">{tokenName}</p>\n        <p\n          className=\"text-xs text-muted-foreground truncate\"\n          title={new Date(activity.timestamp).toLocaleString()}\n        >\n          {message} · {timeAgo(activity.timestamp)}\n        </p>\n        {activity.price?.formatted && (\n          <p className=\"text-sm font-bold tabular-nums flex items-center gap-1.5 pt-0.5\">\n            {activity.price.currency && <CurrencyIcon symbol={activity.price.currency} size={13} aria-hidden />}\n            {formatDisplayPrice(activity.price.formatted)}\n          </p>\n        )}\n      </div>\n    </>\n  );\n\n  const className = \"card-base block active:scale-[0.99] transition-all\";\n\n  return contract && tokenId ? (\n    <Link href={getAssetHref(contract, tokenId)} className={className}>\n      {body}\n    </Link>\n  ) : (\n    <div className={className}>{body}</div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/activity-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ExternalLink } from \"lucide-react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.js\";\nimport { ACTIVITY_TYPE_CONFIG } from \"../data/activity.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { isLivingRenderCollection } from \"../data/living-render-collections.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { cn } from \"../utils/cn.js\";\nimport type { ApiActivity, Chain } from \"@medialane/sdk\";\n\n/** ui's pinned SDK lags the apps — extend structurally for fields newer SDKs carry. */\ntype ActivityWithEnrichment = ApiActivity & {\n  chain?: Chain;\n  token?: { name: string | null; image: string | null; animationUrl?: string | null } | null;\n  amount?: string;\n};\n\nexport const ACTIVITY_MESSAGES: Record<string, (actor: string | null) => string> = {\n  mint:      (actor) => actor ? `Minted by ${actor}` : \"Newly minted\",\n  listing:   (actor) => actor ? `Listed by ${actor}` : \"Listed for sale\",\n  sale:      (actor) => actor ? `Purchased by ${actor}` : \"Sold\",\n  offer:     (actor) => actor ? `Offer by ${actor}` : \"Offer placed\",\n  transfer:  (actor) => actor ? `Transferred by ${actor}` : \"Transferred\",\n  cancelled: (actor) => actor ? `Cancelled by ${actor}` : \"Listing cancelled\",\n};\n\nexport function ActivityCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-4 space-y-2\">\n        <div className=\"h-4 w-32 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-24 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n\nexport interface ActivityCardProps {\n  activity: ApiActivity;\n  /** Builds the asset link; card is unlinked when the activity has no token ref */\n  getAssetHref?: (contract: string, tokenId: string) => string;\n}\n\n/** Card-shaped activity item for horizontal carousels (Discover Community strip).\n *  Same data as ActivityRow, presented like a collection/listing card. */\nexport function ActivityCard({\n  activity: rawActivity,\n  getAssetHref = (c, t) => `/asset/${c}/${t}`,\n}: ActivityCardProps) {\n  const activity = rawActivity as ActivityWithEnrichment;\n  const config = ACTIVITY_TYPE_CONFIG[activity.type] ?? {\n    label: activity.type,\n    variant: \"outline\" as const,\n    icon: ExternalLink,\n    colorClass: \"text-muted-foreground\",\n    bgClass: \"bg-muted\",\n  };\n  const Icon = config.icon;\n\n  const contract = activity.nftContract ?? activity.contractAddress ?? null;\n  const tokenId = activity.nftTokenId ?? activity.tokenId ?? null;\n  const actor =\n    activity.offerer ??\n    activity.fulfiller ??\n    ((activity.type as string) === \"mint\" ? activity.to : activity.from) ??\n    null;\n\n  const tokenName = activity.token?.name ?? (tokenId ? `#${tokenId}` : \"—\");\n  const rawImage = activity.token?.image ?? null;\n  const tokenImage = rawImage ? ipfsToHttp(rawImage) : null;\n  // Not resolved through ipfsToHttp — animation_url is legitimately a data: URI for\n  // fully on-chain-rendered collections (ipfsToHttp rejects data: by design), and\n  // AnimatedTokenMedia accepts it as-is, mirroring token-card.tsx's same field.\n  const animationUrl = activity.token?.animationUrl ?? null;\n  const live = !!(activity.chain && contract) && isLivingRenderCollection(activity.chain.toUpperCase() as Chain, contract);\n  const amount = activity.amount && Number(activity.amount) > 1 ? activity.amount : null;\n\n  const shortActor = actor\n    ? actor.length > 10\n      ? `${actor.slice(0, 6)}…${actor.slice(-4)}`\n      : actor\n    : null;\n  const message = ACTIVITY_MESSAGES[activity.type]?.(shortActor) ?? config.label;\n\n  const body = (\n    <>\n      <div className=\"aspect-square relative bg-muted\">\n        <AnimatedTokenMedia\n          image={tokenImage}\n          animationUrl={animationUrl}\n          live={live}\n          alt={tokenName}\n          mode=\"fill\"\n          sizes=\"256px\"\n          className=\"object-cover\"\n          fallback={\n            <div className=\"absolute inset-0 bg-gradient-to-br from-muted-foreground/10 to-muted-foreground/5\" aria-hidden />\n          }\n        />\n        {/* Activity type chip — vivid label on glass */}\n        <span className=\"absolute top-2.5 left-2.5 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-background/75 backdrop-blur-md border border-border/40\">\n          <Icon className={cn(\"h-3 w-3\", config.colorClass)} aria-hidden />\n          <span className={config.colorClass}>{config.label}</span>\n        </span>\n        {amount && (\n          <span className=\"absolute bottom-2.5 right-2.5 px-2 py-0.5 rounded-full text-[10px] font-bold bg-violet-500 text-white\">\n            ×{amount}\n          </span>\n        )}\n      </div>\n      <div className=\"p-4 space-y-1.5\">\n        <p className=\"text-[15px] font-semibold truncate\">{tokenName}</p>\n        <p\n          className=\"text-xs text-muted-foreground truncate\"\n          title={new Date(activity.timestamp).toLocaleString()}\n        >\n          {message} · {timeAgo(activity.timestamp)}\n        </p>\n        {activity.price?.formatted && (\n          <p className=\"text-sm font-bold tabular-nums flex items-center gap-1.5 pt-0.5\">\n            {activity.price.currency && <CurrencyIcon symbol={activity.price.currency} size={13} aria-hidden />}\n            {formatDisplayPrice(activity.price.formatted)}\n          </p>\n        )}\n      </div>\n    </>\n  );\n\n  const className = \"card-base block active:scale-[0.99] transition-all\";\n\n  return contract && tokenId ? (\n    <Link href={getAssetHref(contract, tokenId)} className={className}>\n      {body}\n    </Link>\n  ) : (\n    <div className={className}>{body}</div>\n  );\n}\n"],"mappings":";AAiCM,SAyDF,UAzDE,KACA,YADA;AA/BN,OAAO,UAAU;AACjB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AACrC,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC;AACzC,SAAS,eAAe;AACxB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAUZ,MAAM,oBAAsE;AAAA,EACjF,MAAW,CAAC,UAAU,QAAQ,aAAa,KAAK,KAAK;AAAA,EACrD,SAAW,CAAC,UAAU,QAAQ,aAAa,KAAK,KAAK;AAAA,EACrD,MAAW,CAAC,UAAU,QAAQ,gBAAgB,KAAK,KAAK;AAAA,EACxD,OAAW,CAAC,UAAU,QAAQ,YAAY,KAAK,KAAK;AAAA,EACpD,UAAW,CAAC,UAAU,QAAQ,kBAAkB,KAAK,KAAK;AAAA,EAC1D,WAAW,CAAC,UAAU,QAAQ,gBAAgB,KAAK,KAAK;AAC1D;AAEO,SAAS,uBAAuB;AACrC,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,SAAI,WAAU,+CAA8C;AAAA,IAC7D,qBAAC,SAAI,WAAU,iBACb;AAAA,0BAAC,SAAI,WAAU,2CAA0C;AAAA,MACzD,oBAAC,SAAI,WAAU,2CAA0C;AAAA,OAC3D;AAAA,KACF;AAEJ;AAUO,SAAS,aAAa;AAAA,EAC3B,UAAU;AAAA,EACV,eAAe,CAAC,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC;AAC3C,GAAsB;AACpB,QAAM,WAAW;AACjB,QAAM,SAAS,qBAAqB,SAAS,IAAI,KAAK;AAAA,IACpD,OAAO,SAAS;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACA,QAAM,OAAO,OAAO;AAEpB,QAAM,WAAW,SAAS,eAAe,SAAS,mBAAmB;AACrE,QAAM,UAAU,SAAS,cAAc,SAAS,WAAW;AAC3D,QAAM,QACJ,SAAS,WACT,SAAS,cACP,SAAS,SAAoB,SAAS,SAAS,KAAK,SAAS,SAC/D;AAEF,QAAM,YAAY,SAAS,OAAO,SAAS,UAAU,IAAI,OAAO,KAAK;AACrE,QAAM,WAAW,SAAS,OAAO,SAAS;AAC1C,QAAM,aAAa,WAAW,WAAW,QAAQ,IAAI;AAIrD,QAAM,eAAe,SAAS,OAAO,gBAAgB;AACrD,QAAM,OAAO,CAAC,EAAE,SAAS,SAAS,aAAa,yBAAyB,SAAS,MAAM,YAAY,GAAY,QAAQ;AACvH,QAAM,SAAS,SAAS,UAAU,OAAO,SAAS,MAAM,IAAI,IAAI,SAAS,SAAS;AAElF,QAAM,aAAa,QACf,MAAM,SAAS,KACb,GAAG,MAAM,MAAM,GAAG,CAAC,CAAC,SAAI,MAAM,MAAM,EAAE,CAAC,KACvC,QACF;AACJ,QAAM,UAAU,kBAAkB,SAAS,IAAI,IAAI,UAAU,KAAK,OAAO;AAEzE,QAAM,OACJ,iCACE;AAAA,yBAAC,SAAI,WAAU,mCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,MAAK;AAAA,UACL,OAAM;AAAA,UACN,WAAU;AAAA,UACV,UACE,oBAAC,SAAI,WAAU,qFAAoF,eAAW,MAAC;AAAA;AAAA,MAEnH;AAAA,MAEA,qBAAC,UAAK,WAAU,2KACd;AAAA,4BAAC,QAAK,WAAW,GAAG,WAAW,OAAO,UAAU,GAAG,eAAW,MAAC;AAAA,QAC/D,oBAAC,UAAK,WAAW,OAAO,YAAa,iBAAO,OAAM;AAAA,SACpD;AAAA,MACC,UACC,qBAAC,UAAK,WAAU,yGAAwG;AAAA;AAAA,QACpH;AAAA,SACJ;AAAA,OAEJ;AAAA,IACA,qBAAC,SAAI,WAAU,mBACb;AAAA,0BAAC,OAAE,WAAU,sCAAsC,qBAAU;AAAA,MAC7D;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,IAAI,KAAK,SAAS,SAAS,EAAE,eAAe;AAAA,UAElD;AAAA;AAAA,YAAQ;AAAA,YAAI,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA,MACzC;AAAA,MACC,SAAS,OAAO,aACf,qBAAC,OAAE,WAAU,mEACV;AAAA,iBAAS,MAAM,YAAY,oBAAC,gBAAa,QAAQ,SAAS,MAAM,UAAU,MAAM,IAAI,eAAW,MAAC;AAAA,QAChG,mBAAmB,SAAS,MAAM,SAAS;AAAA,SAC9C;AAAA,OAEJ;AAAA,KACF;AAGF,QAAM,YAAY;AAElB,SAAO,YAAY,UACjB,oBAAC,QAAK,MAAM,aAAa,UAAU,OAAO,GAAG,WAC1C,gBACH,IAEA,oBAAC,SAAI,WAAuB,gBAAK;AAErC;","names":[]}

package/dist/components/gradient-button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/gradient-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\n\nexport interface GradientButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Tall 54px variant for hero contexts (onboarding, primary page CTAs). */\n  big?: boolean;\n  /** Outer wrapper class (the `.btn-border-animated` ring) — rarely needed. */\n  wrapperClassName?: string;\n}\n\n/**\n * The full-spectrum animated-gradient CTA — `.btn-border-animated` as a 1px\n * wrapper around a transparent-fill button, so the ring reads as a solid,\n * continuously shifting brand-gradient fill (blue → purple → rose → orange).\n * This is the primary-action treatment used across medialane.io/starknet.medialane.io\n * (e.g. \"Connect wallet\", \"Buy now\") — previously hand-copied per call site;\n * this component is the single source.\n *\n * For the secondary animated-border treatment (a neutral `bg-card` fill with\n * only the border animated), use `ActionButton` instead.\n */\nexport function GradientButton({ big, children, className, wrapperClassName, ...rest }: GradientButtonProps) {\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[15px] text-[15px]\"\n    : \"h-12 px-5 rounded-[11px] text-sm\";\n\n  return (\n    <div className={cn(\"btn-border-animated w-full p-[1px]\", big ? \"rounded-2xl\" : \"rounded-xl\", wrapperClassName)}>\n      <button\n        {...rest}\n        className={cn(\n          \"inline-flex w-full items-center justify-center gap-2 whitespace-nowrap font-semibold text-white\",\n          \"border-none bg-transparent transition-all hover:brightness-110 active:scale-[0.98]\",\n          sizeClass,\n          className,\n        )}\n      >\n        {children}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BM;AA3BN,gBAAmB;AAoBZ,SAAS,eAAe,EAAE,KAAK,UAAU,WAAW,kBAAkB,GAAG,KAAK,GAAwB;AAC3G,QAAM,YAAY,MACd,6CACA;AAEJ,SACE,4CAAC,SAAI,eAAW,cAAG,sCAAsC,MAAM,gBAAgB,cAAc,gBAAgB,GAC3G;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/gradient-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\n\nexport interface GradientButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Tall 54px variant for hero contexts (onboarding, primary page CTAs). */\n  big?: boolean;\n  /** Outer wrapper class (the `.btn-border-animated` ring) — rarely needed. */\n  wrapperClassName?: string;\n}\n\n/**\n * The full-spectrum animated-gradient CTA — `.btn-border-animated` as a 1px\n * wrapper around a transparent-fill button, so the ring reads as a solid,\n * continuously shifting brand-gradient fill (blue → purple → rose → orange).\n * This is the primary-action treatment used across medialane.io/starknet.medialane.io\n * (e.g. \"Connect wallet\", \"Buy now\") — previously hand-copied per call site;\n * this component is the single source.\n *\n * For the secondary animated-border treatment (transparent fill, only the\n * per-action gradient border and colored icon/text), use `ActionButton` instead.\n */\nexport function GradientButton({ big, children, className, wrapperClassName, ...rest }: GradientButtonProps) {\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[15px] text-[15px]\"\n    : \"h-12 px-5 rounded-[11px] text-sm\";\n\n  return (\n    <div className={cn(\"btn-border-animated w-full p-[1px]\", big ? \"rounded-2xl\" : \"rounded-xl\", wrapperClassName)}>\n      <button\n        {...rest}\n        className={cn(\n          \"inline-flex w-full items-center justify-center gap-2 whitespace-nowrap font-semibold text-white\",\n          \"border-none bg-transparent transition-all hover:brightness-110 active:scale-[0.98]\",\n          sizeClass,\n          className,\n        )}\n      >\n        {children}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BM;AA3BN,gBAAmB;AAoBZ,SAAS,eAAe,EAAE,KAAK,UAAU,WAAW,kBAAkB,GAAG,KAAK,GAAwB;AAC3G,QAAM,YAAY,MACd,6CACA;AAEJ,SACE,4CAAC,SAAI,eAAW,cAAG,sCAAsC,MAAM,gBAAgB,cAAc,gBAAgB,GAC3G;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/dist/components/gradient-button.d.cts

@@ -14,8 +14,8 @@ interface GradientButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
  * (e.g. "Connect wallet", "Buy now") — previously hand-copied per call site;
  * this component is the single source.
  *
- * For the secondary animated-border treatment (a neutral `bg-card` fill with
- * only the border animated), use `ActionButton` instead.
+ * For the secondary animated-border treatment (transparent fill, only the
+ * per-action gradient border and colored icon/text), use `ActionButton` instead.
  */
 declare function GradientButton({ big, children, className, wrapperClassName, ...rest }: GradientButtonProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/gradient-button.d.ts

@@ -14,8 +14,8 @@ interface GradientButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
  * (e.g. "Connect wallet", "Buy now") — previously hand-copied per call site;
  * this component is the single source.
  *
- * For the secondary animated-border treatment (a neutral `bg-card` fill with
- * only the border animated), use `ActionButton` instead.
+ * For the secondary animated-border treatment (transparent fill, only the
+ * per-action gradient border and colored icon/text), use `ActionButton` instead.
  */
 declare function GradientButton({ big, children, className, wrapperClassName, ...rest }: GradientButtonProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/gradient-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/gradient-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\n\nexport interface GradientButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Tall 54px variant for hero contexts (onboarding, primary page CTAs). */\n  big?: boolean;\n  /** Outer wrapper class (the `.btn-border-animated` ring) — rarely needed. */\n  wrapperClassName?: string;\n}\n\n/**\n * The full-spectrum animated-gradient CTA — `.btn-border-animated` as a 1px\n * wrapper around a transparent-fill button, so the ring reads as a solid,\n * continuously shifting brand-gradient fill (blue → purple → rose → orange).\n * This is the primary-action treatment used across medialane.io/starknet.medialane.io\n * (e.g. \"Connect wallet\", \"Buy now\") — previously hand-copied per call site;\n * this component is the single source.\n *\n * For the secondary animated-border treatment (a neutral `bg-card` fill with\n * only the border animated), use `ActionButton` instead.\n */\nexport function GradientButton({ big, children, className, wrapperClassName, ...rest }: GradientButtonProps) {\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[15px] text-[15px]\"\n    : \"h-12 px-5 rounded-[11px] text-sm\";\n\n  return (\n    <div className={cn(\"btn-border-animated w-full p-[1px]\", big ? \"rounded-2xl\" : \"rounded-xl\", wrapperClassName)}>\n      <button\n        {...rest}\n        className={cn(\n          \"inline-flex w-full items-center justify-center gap-2 whitespace-nowrap font-semibold text-white\",\n          \"border-none bg-transparent transition-all hover:brightness-110 active:scale-[0.98]\",\n          sizeClass,\n          className,\n        )}\n      >\n        {children}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";AA6BM;AA3BN,SAAS,UAAU;AAoBZ,SAAS,eAAe,EAAE,KAAK,UAAU,WAAW,kBAAkB,GAAG,KAAK,GAAwB;AAC3G,QAAM,YAAY,MACd,6CACA;AAEJ,SACE,oBAAC,SAAI,WAAW,GAAG,sCAAsC,MAAM,gBAAgB,cAAc,gBAAgB,GAC3G;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/gradient-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\n\nexport interface GradientButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Tall 54px variant for hero contexts (onboarding, primary page CTAs). */\n  big?: boolean;\n  /** Outer wrapper class (the `.btn-border-animated` ring) — rarely needed. */\n  wrapperClassName?: string;\n}\n\n/**\n * The full-spectrum animated-gradient CTA — `.btn-border-animated` as a 1px\n * wrapper around a transparent-fill button, so the ring reads as a solid,\n * continuously shifting brand-gradient fill (blue → purple → rose → orange).\n * This is the primary-action treatment used across medialane.io/starknet.medialane.io\n * (e.g. \"Connect wallet\", \"Buy now\") — previously hand-copied per call site;\n * this component is the single source.\n *\n * For the secondary animated-border treatment (transparent fill, only the\n * per-action gradient border and colored icon/text), use `ActionButton` instead.\n */\nexport function GradientButton({ big, children, className, wrapperClassName, ...rest }: GradientButtonProps) {\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[15px] text-[15px]\"\n    : \"h-12 px-5 rounded-[11px] text-sm\";\n\n  return (\n    <div className={cn(\"btn-border-animated w-full p-[1px]\", big ? \"rounded-2xl\" : \"rounded-xl\", wrapperClassName)}>\n      <button\n        {...rest}\n        className={cn(\n          \"inline-flex w-full items-center justify-center gap-2 whitespace-nowrap font-semibold text-white\",\n          \"border-none bg-transparent transition-all hover:brightness-110 active:scale-[0.98]\",\n          sizeClass,\n          className,\n        )}\n      >\n        {children}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";AA6BM;AA3BN,SAAS,UAAU;AAoBZ,SAAS,eAAe,EAAE,KAAK,UAAU,WAAW,kBAAkB,GAAG,KAAK,GAAwB;AAC3G,QAAM,YAAY,MACd,6CACA;AAEJ,SACE,oBAAC,SAAI,WAAW,GAAG,sCAAsC,MAAM,gBAAgB,cAAc,gBAAgB,GAC3G;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.94.6",
+  "version": "0.94.8",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "sideEffects": false,
@@ -62,7 +62,7 @@
     "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
-    "@medialane/sdk": "0.74.0",
+    "@medialane/sdk": "0.81.0",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@types/bun": "^1.3.14",
     "@types/react": "^19.0.0",