@medialane/ui 0.10.2 → 0.11.0

package/dist/components/activity-card.cjs

@@ -0,0 +1,136 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var activity_card_exports = {};
+__export(activity_card_exports, {
+  ACTIVITY_MESSAGES: () => ACTIVITY_MESSAGES,
+  ActivityCard: () => ActivityCard,
+  ActivityCardSkeleton: () => ActivityCardSkeleton
+});
+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_activity = require("../data/activity.js");
+var import_ipfs = require("../utils/ipfs.js");
+var import_time = require("../utils/time.js");
+var import_format = require("../utils/format.js");
+var import_cn = require("../utils/cn.js");
+const ACTIVITY_MESSAGES = {
+  mint: (actor) => actor ? `Minted by ${actor}` : "Newly minted",
+  listing: (actor) => actor ? `Listed by ${actor}` : "Listed for sale",
+  sale: (actor) => actor ? `Purchased by ${actor}` : "Sold",
+  offer: (actor) => actor ? `Offer by ${actor}` : "Offer placed",
+  transfer: (actor) => actor ? `Transferred by ${actor}` : "Transferred",
+  cancelled: (actor) => actor ? `Cancelled by ${actor}` : "Listing cancelled"
+};
+function ActivityCardSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "card-base", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full bg-muted animate-pulse" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-32 bg-muted animate-pulse rounded" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-24 bg-muted animate-pulse rounded" })
+    ] })
+  ] });
+}
+function ActivityCard({
+  activity,
+  getAssetHref = (c, t) => `/asset/${c}/${t}`
+}) {
+  const config = import_activity.ACTIVITY_TYPE_CONFIG[activity.type] ?? {
+    label: activity.type,
+    variant: "outline",
+    icon: import_lucide_react.ExternalLink,
+    colorClass: "text-muted-foreground",
+    bgClass: "bg-muted"
+  };
+  const Icon = config.icon;
+  const contract = activity.nftContract ?? activity.contractAddress ?? null;
+  const tokenId = activity.nftTokenId ?? activity.tokenId ?? null;
+  const actor = activity.offerer ?? activity.fulfiller ?? (activity.type === "mint" ? activity.to : activity.from) ?? null;
+  const tokenName = activity.token?.name ?? (tokenId ? `#${tokenId}` : "\u2014");
+  const rawImage = activity.token?.image ?? null;
+  const tokenImage = rawImage ? (0, import_ipfs.ipfsToHttp)(rawImage) : null;
+  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,
+        {
+          src: tokenImage,
+          alt: tokenName,
+          fill: true,
+          sizes: "256px",
+          className: "object-cover",
+          unoptimized: 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 })
+      ] }),
+      amount && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("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", children: [
+        "\xD7",
+        amount
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 space-y-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[15px] font-semibold truncate", children: tokenName }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "p",
+        {
+          className: "text-xs text-muted-foreground truncate",
+          title: new Date(activity.timestamp).toLocaleString(),
+          children: [
+            message,
+            " \xB7 ",
+            (0, import_time.timeAgo)(activity.timestamp)
+          ]
+        }
+      ),
+      activity.price?.formatted && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm font-bold tabular-nums flex items-center gap-1.5 pt-0.5", children: [
+        activity.price.currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: activity.price.currency, size: 13, "aria-hidden": true }),
+        (0, import_format.formatDisplayPrice)(activity.price.formatted)
+      ] })
+    ] })
+  ] });
+  const className = "card-base block active:scale-[0.99] transition-all";
+  return contract && tokenId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: getAssetHref(contract, tokenId), className, children: body }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: body });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ACTIVITY_MESSAGES,
+  ActivityCard,
+  ActivityCardSkeleton
+});
+//# sourceMappingURL=activity-card.cjs.map

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

@@ -0,0 +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\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,\n  getAssetHref = (c, t) => `/asset/${c}/${t}`,\n}: ActivityCardProps) {\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"]}

package/dist/components/activity-card.js

@@ -0,0 +1,100 @@
+"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 { ACTIVITY_TYPE_CONFIG } from "../data/activity.js";
+import { ipfsToHttp } from "../utils/ipfs.js";
+import { timeAgo } from "../utils/time.js";
+import { formatDisplayPrice } from "../utils/format.js";
+import { cn } from "../utils/cn.js";
+const ACTIVITY_MESSAGES = {
+  mint: (actor) => actor ? `Minted by ${actor}` : "Newly minted",
+  listing: (actor) => actor ? `Listed by ${actor}` : "Listed for sale",
+  sale: (actor) => actor ? `Purchased by ${actor}` : "Sold",
+  offer: (actor) => actor ? `Offer by ${actor}` : "Offer placed",
+  transfer: (actor) => actor ? `Transferred by ${actor}` : "Transferred",
+  cancelled: (actor) => actor ? `Cancelled by ${actor}` : "Listing cancelled"
+};
+function ActivityCardSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "card-base", children: [
+    /* @__PURE__ */ jsx("div", { className: "aspect-square w-full bg-muted animate-pulse" }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-32 bg-muted animate-pulse rounded" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-24 bg-muted animate-pulse rounded" })
+    ] })
+  ] });
+}
+function ActivityCard({
+  activity,
+  getAssetHref = (c, t) => `/asset/${c}/${t}`
+}) {
+  const config = ACTIVITY_TYPE_CONFIG[activity.type] ?? {
+    label: activity.type,
+    variant: "outline",
+    icon: ExternalLink,
+    colorClass: "text-muted-foreground",
+    bgClass: "bg-muted"
+  };
+  const Icon = config.icon;
+  const contract = activity.nftContract ?? activity.contractAddress ?? null;
+  const tokenId = activity.nftTokenId ?? activity.tokenId ?? null;
+  const actor = activity.offerer ?? activity.fulfiller ?? (activity.type === "mint" ? activity.to : activity.from) ?? null;
+  const tokenName = activity.token?.name ?? (tokenId ? `#${tokenId}` : "\u2014");
+  const rawImage = activity.token?.image ?? null;
+  const tokenImage = rawImage ? ipfsToHttp(rawImage) : null;
+  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,
+        {
+          src: tokenImage,
+          alt: tokenName,
+          fill: true,
+          sizes: "256px",
+          className: "object-cover",
+          unoptimized: 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 })
+      ] }),
+      amount && /* @__PURE__ */ jsxs("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", children: [
+        "\xD7",
+        amount
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-1.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[15px] font-semibold truncate", children: tokenName }),
+      /* @__PURE__ */ jsxs(
+        "p",
+        {
+          className: "text-xs text-muted-foreground truncate",
+          title: new Date(activity.timestamp).toLocaleString(),
+          children: [
+            message,
+            " \xB7 ",
+            timeAgo(activity.timestamp)
+          ]
+        }
+      ),
+      activity.price?.formatted && /* @__PURE__ */ jsxs("p", { className: "text-sm font-bold tabular-nums flex items-center gap-1.5 pt-0.5", children: [
+        activity.price.currency && /* @__PURE__ */ jsx(CurrencyIcon, { symbol: activity.price.currency, size: 13, "aria-hidden": true }),
+        formatDisplayPrice(activity.price.formatted)
+      ] })
+    ] })
+  ] });
+  const className = "card-base block active:scale-[0.99] transition-all";
+  return contract && tokenId ? /* @__PURE__ */ jsx(Link, { href: getAssetHref(contract, tokenId), className, children: body }) : /* @__PURE__ */ jsx("div", { className, children: body });
+}
+export {
+  ACTIVITY_MESSAGES,
+  ActivityCard,
+  ActivityCardSkeleton
+};
+//# sourceMappingURL=activity-card.js.map

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

@@ -0,0 +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\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,\n  getAssetHref = (c, t) => `/asset/${c}/${t}`,\n}: ActivityCardProps) {\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":";AAyBM,SAmDF,UAnDE,KACA,YADA;AAvBN,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAGZ,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;AAAA,EACA,eAAe,CAAC,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC;AAC3C,GAAsB;AACpB,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;AACrD,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,mCACZ;AAAA,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAI;AAAA,UACJ,OAAM;AAAA,UACN,WAAU;AAAA,UACV,aAAW;AAAA;AAAA,MACb,IAEA,oBAAC,SAAI,WAAU,qFAAoF,eAAW,MAAC;AAAA,MAGjH,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/discover-feed-section.cjs

@@ -26,8 +26,43 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
 var import_motion_primitives = require("./motion-primitives.js");
 var import_listing_card = require("./listing-card.js");
-var import_activity_feed_shell = require("./activity-feed-shell.js");
-var import_activity_row = require("./activity-row.js");
+var import_activity_card = require("./activity-card.js");
+var import_time = require("../utils/time.js");
+var import_cn = require("../utils/cn.js");
+function StripShell({
+  icon,
+  iconBg,
+  title,
+  subtitle,
+  href,
+  linkLabel,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("h-7 w-7 rounded-lg flex items-center justify-center", iconBg), children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg sm:text-xl font-semibold leading-none", children: title }),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] text-muted-foreground mt-1", children: subtitle })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "a",
+        {
+          href,
+          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
+          children: [
+            linkLabel,
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-x-auto scrollbar-hide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2", style: { width: "max-content" }, children }) })
+  ] });
+}
 function DiscoverFeedSection({
   orders,
   isLoading,
@@ -35,55 +70,48 @@ function DiscoverFeedSection({
   activitiesLoading,
   lastUpdated,
   getAssetHref = (c, t) => `/asset/${c}/${t}`,
-  getActorHref = (a) => `/creator/${a}`,
-  explorerUrl = "https://voyager.online",
   marketplaceHref = "/marketplace",
-  activitiesHref = "/activities"
+  activitiesHref = "/activities",
+  onBuyOrder,
+  isOwnOrder
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.FadeIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "section-label", children: "Markets" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 mt-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Tag, { className: "h-4 w-4 text-brand-rose" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg font-bold", children: "Activity" })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "a",
-          {
-            href: marketplaceHref,
-            className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
-            children: "View all"
-          }
-        )
-      ] }),
-      isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 gap-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_listing_card.ListingCardSkeleton, {}, i)) }) : orders.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-xl border border-border py-12 text-center text-sm text-muted-foreground", children: "No active listings yet." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 gap-3", children: orders.map((o) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_listing_card.ListingCard, { order: o, compact: true }, o.orderHash)) })
-    ] }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-14 sm:space-y-20", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.FadeIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StripShell,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Tag, { className: "h-3.5 w-3.5 text-white" }),
+        iconBg: "bg-gradient-to-br from-rose-500 to-pink-600 shadow-md shadow-rose-500/20",
+        title: "Activity",
+        href: marketplaceHref,
+        linkLabel: "View all",
+        children: isLoading ? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-72 snap-start shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_listing_card.ListingCardSkeleton, {}) }, i)) : orders.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground py-4", children: "No active listings yet." }) : orders.map((order) => {
+          const own = isOwnOrder?.(order) ?? false;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-72 snap-start shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_listing_card.ListingCard,
+            {
+              order,
+              onBuy: onBuyOrder && !own ? () => onBuyOrder(order) : void 0
+            }
+          ) }, order.orderHash);
+        })
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.FadeIn, { delay: 0.08, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_activity_feed_shell.ActivityFeedShell,
+      StripShell,
       {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Activity, { className: "h-3.5 w-3.5 text-white" }),
+        iconBg: "bg-gradient-to-br from-indigo-500 to-blue-600 shadow-md shadow-indigo-500/20",
         title: "Community",
+        subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.RefreshCw, { className: "h-2.5 w-2.5" }),
+          "Updated ",
+          (0, import_time.timeAgo)(lastUpdated)
+        ] }),
         href: activitiesHref,
-        hrefLabel: "Activities",
-        lastUpdated,
-        isLoading: activitiesLoading,
-        children: activities.map((act, i) => {
+        linkLabel: "Activities",
+        children: activitiesLoading ? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-56 sm:w-64 snap-start shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_activity_card.ActivityCardSkeleton, {}) }, i)) : activities.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground py-4", children: "No activity yet. Be the first to trade on Medialane!" }) : activities.map((act, i) => {
           const key = act.txHash ? `${act.txHash}-${act.type}-${act.nftTokenId ?? ""}` : `activity-${i}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_activity_row.ActivityRow,
-            {
-              activity: act,
-              showActor: true,
-              showExplorer: false,
-              compact: true,
-              getAssetHref,
-              getActorHref,
-              explorerUrl
-            },
-            key
-          );
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-56 sm:w-64 snap-start shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_activity_card.ActivityCard, { activity: act, getAssetHref }) }, key);
         })
       }
     ) })

package/dist/components/discover-feed-section.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/discover-feed-section.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tag } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ListingCard, ListingCardSkeleton } from \"./listing-card.js\";\nimport { ActivityFeedShell } from \"./activity-feed-shell.js\";\nimport { ActivityRow } from \"./activity-row.js\";\nimport type { ApiOrder, ApiActivity } from \"@medialane/sdk\";\n\nexport interface DiscoverFeedSectionProps {\n  orders: ApiOrder[];\n  isLoading: boolean;\n  activities: ApiActivity[];\n  activitiesLoading: boolean;\n  lastUpdated: string;\n  getAssetHref?: (contract: string, tokenId: string) => string;\n  getActorHref?: (address: string) => string;\n  explorerUrl?: string;\n  marketplaceHref?: string;\n  activitiesHref?: string;\n}\n\nexport function DiscoverFeedSection({\n  orders,\n  isLoading,\n  activities,\n  activitiesLoading,\n  lastUpdated,\n  getAssetHref = (c, t) => `/asset/${c}/${t}`,\n  getActorHref = (a) => `/creator/${a}`,\n  explorerUrl = \"https://voyager.online\",\n  marketplaceHref = \"/marketplace\",\n  activitiesHref = \"/activities\",\n}: DiscoverFeedSectionProps) {\n  return (\n    <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n      {/* New Listings */}\n      <FadeIn>\n        <div className=\"space-y-3\">\n          <div className=\"flex items-center justify-between\">\n            <div>\n              <p className=\"section-label\">Markets</p>\n              <div className=\"flex items-center gap-2 mt-0.5\">\n                <Tag className=\"h-4 w-4 text-brand-rose\" />\n                <h2 className=\"text-lg font-bold\">Activity</h2>\n              </div>\n            </div>\n            <a\n              href={marketplaceHref}\n              className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n            >\n              View all\n            </a>\n          </div>\n\n          {isLoading ? (\n            <div className=\"grid grid-cols-3 gap-3\">\n              {Array.from({ length: 6 }).map((_, i) => <ListingCardSkeleton key={i} />)}\n            </div>\n          ) : orders.length === 0 ? (\n            <div className=\"rounded-xl border border-border py-12 text-center text-sm text-muted-foreground\">\n              No active listings yet.\n            </div>\n          ) : (\n            <div className=\"grid grid-cols-3 gap-3\">\n              {orders.map((o) => (\n                <ListingCard key={o.orderHash} order={o} compact />\n              ))}\n            </div>\n          )}\n        </div>\n      </FadeIn>\n\n      {/* Recent Activity */}\n      <FadeIn delay={0.08}>\n        <ActivityFeedShell\n          title=\"Community\"\n          href={activitiesHref}\n          hrefLabel=\"Activities\"\n          lastUpdated={lastUpdated}\n          isLoading={activitiesLoading}\n        >\n          {activities.map((act, i) => {\n            const key = act.txHash\n              ? `${act.txHash}-${act.type}-${act.nftTokenId ?? \"\"}`\n              : `activity-${i}`;\n            return (\n              <ActivityRow\n                key={key}\n                activity={act}\n                showActor\n                showExplorer={false}\n                compact\n                getAssetHref={getAssetHref}\n                getActorHref={getActorHref}\n                explorerUrl={explorerUrl}\n              />\n            );\n          })}\n        </ActivityFeedShell>\n      </FadeIn>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCc;AAvCd,0BAAoB;AACpB,+BAAuB;AACvB,0BAAiD;AACjD,iCAAkC;AAClC,0BAA4B;AAgBrB,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe,CAAC,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC;AAAA,EACzC,eAAe,CAAC,MAAM,YAAY,CAAC;AAAA,EACnC,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,iBAAiB;AACnB,GAA6B;AAC3B,SACE,6CAAC,SAAI,WAAU,yCAEb;AAAA,gDAAC,mCACC,uDAAC,SAAI,WAAU,aACb;AAAA,mDAAC,SAAI,WAAU,qCACb;AAAA,qDAAC,SACC;AAAA,sDAAC,OAAE,WAAU,iBAAgB,qBAAO;AAAA,UACpC,6CAAC,SAAI,WAAU,kCACb;AAAA,wDAAC,2BAAI,WAAU,2BAA0B;AAAA,YACzC,4CAAC,QAAG,WAAU,qBAAoB,sBAAQ;AAAA,aAC5C;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,SACF;AAAA,MAEC,YACC,4CAAC,SAAI,WAAU,0BACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,4CAAC,6CAAyB,CAAG,CAAE,GAC1E,IACE,OAAO,WAAW,IACpB,4CAAC,SAAI,WAAU,mFAAkF,qCAEjG,IAEA,4CAAC,SAAI,WAAU,0BACZ,iBAAO,IAAI,CAAC,MACX,4CAAC,mCAA8B,OAAO,GAAG,SAAO,QAA9B,EAAE,SAA6B,CAClD,GACH;AAAA,OAEJ,GACF;AAAA,IAGA,4CAAC,mCAAO,OAAO,MACb;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAU;AAAA,QACV;AAAA,QACA,WAAW;AAAA,QAEV,qBAAW,IAAI,CAAC,KAAK,MAAM;AAC1B,gBAAM,MAAM,IAAI,SACZ,GAAG,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc,EAAE,KACjD,YAAY,CAAC;AACjB,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,UAAU;AAAA,cACV,WAAS;AAAA,cACT,cAAc;AAAA,cACd,SAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA;AAAA,YAPK;AAAA,UAQP;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/discover-feed-section.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tag, Activity, RefreshCw, ArrowRight } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ListingCard, ListingCardSkeleton } from \"./listing-card.js\";\nimport { ActivityCard, ActivityCardSkeleton } from \"./activity-card.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { cn } from \"../utils/cn.js\";\nimport type { ApiOrder, ApiActivity } from \"@medialane/sdk\";\n\nexport interface DiscoverFeedSectionProps {\n  orders: ApiOrder[];\n  isLoading: boolean;\n  activities: ApiActivity[];\n  activitiesLoading: boolean;\n  lastUpdated: string;\n  getAssetHref?: (contract: string, tokenId: string) => string;\n  getActorHref?: (address: string) => string;\n  explorerUrl?: string;\n  marketplaceHref?: string;\n  activitiesHref?: string;\n  /** Optional buy hook — when provided, listing cards show their Buy action */\n  onBuyOrder?: (order: ApiOrder) => void;\n  /** Hide the buy action for orders the viewer owns */\n  isOwnOrder?: (order: ApiOrder) => boolean;\n}\n\n// ── Shared strip shell: icon-badge header + snap-scroll row ─────────────────\nfunction StripShell({\n  icon,\n  iconBg,\n  title,\n  subtitle,\n  href,\n  linkLabel,\n  children,\n}: {\n  icon: React.ReactNode;\n  iconBg: string;\n  title: string;\n  subtitle?: React.ReactNode;\n  href: string;\n  linkLabel: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <section className=\"space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className={cn(\"h-7 w-7 rounded-lg flex items-center justify-center\", iconBg)}>\n            {icon}\n          </div>\n          <div>\n            <h2 className=\"text-lg sm:text-xl font-semibold leading-none\">{title}</h2>\n            {subtitle && <p className=\"text-[10px] text-muted-foreground mt-1\">{subtitle}</p>}\n          </div>\n        </div>\n        <a\n          href={href}\n          className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n        >\n          {linkLabel} <ArrowRight className=\"h-3.5 w-3.5\" />\n        </a>\n      </div>\n\n      <div className=\"w-full overflow-x-auto scrollbar-hide\">\n        <div className=\"flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2\" style={{ width: \"max-content\" }}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n}\n\n/** Discover feed — Markets activity + Community as horizontal carousels,\n *  matching the Collections/Creators explore-by-scrolling model. */\nexport function DiscoverFeedSection({\n  orders,\n  isLoading,\n  activities,\n  activitiesLoading,\n  lastUpdated,\n  getAssetHref = (c, t) => `/asset/${c}/${t}`,\n  marketplaceHref = \"/marketplace\",\n  activitiesHref = \"/activities\",\n  onBuyOrder,\n  isOwnOrder,\n}: DiscoverFeedSectionProps) {\n  return (\n    <div className=\"space-y-14 sm:space-y-20\">\n      {/* Markets — recent listings carousel */}\n      <FadeIn>\n        <StripShell\n          icon={<Tag className=\"h-3.5 w-3.5 text-white\" />}\n          iconBg=\"bg-gradient-to-br from-rose-500 to-pink-600 shadow-md shadow-rose-500/20\"\n          title=\"Activity\"\n          href={marketplaceHref}\n          linkLabel=\"View all\"\n        >\n          {isLoading\n            ? Array.from({ length: 8 }).map((_, i) => (\n                <div key={i} className=\"w-72 snap-start shrink-0\">\n                  <ListingCardSkeleton />\n                </div>\n              ))\n            : orders.length === 0\n            ? (\n                <p className=\"text-sm text-muted-foreground py-4\">No active listings yet.</p>\n              )\n            : orders.map((order) => {\n                const own = isOwnOrder?.(order) ?? false;\n                return (\n                  <div key={order.orderHash} className=\"w-72 snap-start shrink-0\">\n                    <ListingCard\n                      order={order}\n                      onBuy={onBuyOrder && !own ? () => onBuyOrder(order) : undefined}\n                    />\n                  </div>\n                );\n              })}\n        </StripShell>\n      </FadeIn>\n\n      {/* Community — recent on-chain activity carousel */}\n      <FadeIn delay={0.08}>\n        <StripShell\n          icon={<Activity className=\"h-3.5 w-3.5 text-white\" />}\n          iconBg=\"bg-gradient-to-br from-indigo-500 to-blue-600 shadow-md shadow-indigo-500/20\"\n          title=\"Community\"\n          subtitle={\n            <span className=\"flex items-center gap-1\">\n              <RefreshCw className=\"h-2.5 w-2.5\" />\n              Updated {timeAgo(lastUpdated)}\n            </span>\n          }\n          href={activitiesHref}\n          linkLabel=\"Activities\"\n        >\n          {activitiesLoading\n            ? Array.from({ length: 8 }).map((_, i) => (\n                <div key={i} className=\"w-56 sm:w-64 snap-start shrink-0\">\n                  <ActivityCardSkeleton />\n                </div>\n              ))\n            : activities.length === 0\n            ? (\n                <p className=\"text-sm text-muted-foreground py-4\">\n                  No activity yet. Be the first to trade on Medialane!\n                </p>\n              )\n            : activities.map((act, i) => {\n                const key = act.txHash\n                  ? `${act.txHash}-${act.type}-${act.nftTokenId ?? \"\"}`\n                  : `activity-${i}`;\n                return (\n                  <div key={key} className=\"w-56 sm:w-64 snap-start shrink-0\">\n                    <ActivityCard activity={act} getAssetHref={getAssetHref} />\n                  </div>\n                );\n              })}\n        </StripShell>\n      </FadeIn>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/discover-feed-section.js

@@ -1,10 +1,45 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Tag } from "lucide-react";
+import { Tag, Activity, RefreshCw, ArrowRight } from "lucide-react";
 import { FadeIn } from "./motion-primitives.js";
 import { ListingCard, ListingCardSkeleton } from "./listing-card.js";
-import { ActivityFeedShell } from "./activity-feed-shell.js";
-import { ActivityRow } from "./activity-row.js";
+import { ActivityCard, ActivityCardSkeleton } from "./activity-card.js";
+import { timeAgo } from "../utils/time.js";
+import { cn } from "../utils/cn.js";
+function StripShell({
+  icon,
+  iconBg,
+  title,
+  subtitle,
+  href,
+  linkLabel,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("h-7 w-7 rounded-lg flex items-center justify-center", iconBg), children: icon }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg sm:text-xl font-semibold leading-none", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground mt-1", children: subtitle })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href,
+          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
+          children: [
+            linkLabel,
+            " ",
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto scrollbar-hide", children: /* @__PURE__ */ jsx("div", { className: "flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2", style: { width: "max-content" }, children }) })
+  ] });
+}
 function DiscoverFeedSection({
   orders,
   isLoading,
@@ -12,55 +47,48 @@ function DiscoverFeedSection({
   activitiesLoading,
   lastUpdated,
   getAssetHref = (c, t) => `/asset/${c}/${t}`,
-  getActorHref = (a) => `/creator/${a}`,
-  explorerUrl = "https://voyager.online",
   marketplaceHref = "/marketplace",
-  activitiesHref = "/activities"
+  activitiesHref = "/activities",
+  onBuyOrder,
+  isOwnOrder
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", children: [
-    /* @__PURE__ */ jsx(FadeIn, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "section-label", children: "Markets" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [
-            /* @__PURE__ */ jsx(Tag, { className: "h-4 w-4 text-brand-rose" }),
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: "Activity" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: marketplaceHref,
-            className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
-            children: "View all"
-          }
-        )
-      ] }),
-      isLoading ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(ListingCardSkeleton, {}, i)) }) : orders.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border py-12 text-center text-sm text-muted-foreground", children: "No active listings yet." }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-3", children: orders.map((o) => /* @__PURE__ */ jsx(ListingCard, { order: o, compact: true }, o.orderHash)) })
-    ] }) }),
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-14 sm:space-y-20", children: [
+    /* @__PURE__ */ jsx(FadeIn, { children: /* @__PURE__ */ jsx(
+      StripShell,
+      {
+        icon: /* @__PURE__ */ jsx(Tag, { className: "h-3.5 w-3.5 text-white" }),
+        iconBg: "bg-gradient-to-br from-rose-500 to-pink-600 shadow-md shadow-rose-500/20",
+        title: "Activity",
+        href: marketplaceHref,
+        linkLabel: "View all",
+        children: isLoading ? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "w-72 snap-start shrink-0", children: /* @__PURE__ */ jsx(ListingCardSkeleton, {}) }, i)) : orders.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4", children: "No active listings yet." }) : orders.map((order) => {
+          const own = isOwnOrder?.(order) ?? false;
+          return /* @__PURE__ */ jsx("div", { className: "w-72 snap-start shrink-0", children: /* @__PURE__ */ jsx(
+            ListingCard,
+            {
+              order,
+              onBuy: onBuyOrder && !own ? () => onBuyOrder(order) : void 0
+            }
+          ) }, order.orderHash);
+        })
+      }
+    ) }),
     /* @__PURE__ */ jsx(FadeIn, { delay: 0.08, children: /* @__PURE__ */ jsx(
-      ActivityFeedShell,
+      StripShell,
       {
+        icon: /* @__PURE__ */ jsx(Activity, { className: "h-3.5 w-3.5 text-white" }),
+        iconBg: "bg-gradient-to-br from-indigo-500 to-blue-600 shadow-md shadow-indigo-500/20",
         title: "Community",
+        subtitle: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(RefreshCw, { className: "h-2.5 w-2.5" }),
+          "Updated ",
+          timeAgo(lastUpdated)
+        ] }),
         href: activitiesHref,
-        hrefLabel: "Activities",
-        lastUpdated,
-        isLoading: activitiesLoading,
-        children: activities.map((act, i) => {
+        linkLabel: "Activities",
+        children: activitiesLoading ? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "w-56 sm:w-64 snap-start shrink-0", children: /* @__PURE__ */ jsx(ActivityCardSkeleton, {}) }, i)) : activities.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4", children: "No activity yet. Be the first to trade on Medialane!" }) : activities.map((act, i) => {
           const key = act.txHash ? `${act.txHash}-${act.type}-${act.nftTokenId ?? ""}` : `activity-${i}`;
-          return /* @__PURE__ */ jsx(
-            ActivityRow,
-            {
-              activity: act,
-              showActor: true,
-              showExplorer: false,
-              compact: true,
-              getAssetHref,
-              getActorHref,
-              explorerUrl
-            },
-            key
-          );
+          return /* @__PURE__ */ jsx("div", { className: "w-56 sm:w-64 snap-start shrink-0", children: /* @__PURE__ */ jsx(ActivityCard, { activity: act, getAssetHref }) }, key);
         })
       }
     ) })