@medialane/ui 0.3.1 → 0.3.3

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

@@ -0,0 +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":[]}

package/dist/components/discover-feed-section.d.cts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiOrder, ApiActivity } from '@medialane/sdk';
+
+interface DiscoverFeedSectionProps {
+    orders: ApiOrder[];
+    isLoading: boolean;
+    activities: ApiActivity[];
+    activitiesLoading: boolean;
+    lastUpdated: string;
+    getAssetHref?: (contract: string, tokenId: string) => string;
+    getActorHref?: (address: string) => string;
+    explorerUrl?: string;
+    marketplaceHref?: string;
+    activitiesHref?: string;
+}
+declare function DiscoverFeedSection({ orders, isLoading, activities, activitiesLoading, lastUpdated, getAssetHref, getActorHref, explorerUrl, marketplaceHref, activitiesHref, }: DiscoverFeedSectionProps): react_jsx_runtime.JSX.Element;
+
+export { DiscoverFeedSection, type DiscoverFeedSectionProps };

package/dist/components/discover-feed-section.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiOrder, ApiActivity } from '@medialane/sdk';
+
+interface DiscoverFeedSectionProps {
+    orders: ApiOrder[];
+    isLoading: boolean;
+    activities: ApiActivity[];
+    activitiesLoading: boolean;
+    lastUpdated: string;
+    getAssetHref?: (contract: string, tokenId: string) => string;
+    getActorHref?: (address: string) => string;
+    explorerUrl?: string;
+    marketplaceHref?: string;
+    activitiesHref?: string;
+}
+declare function DiscoverFeedSection({ orders, isLoading, activities, activitiesLoading, lastUpdated, getAssetHref, getActorHref, explorerUrl, marketplaceHref, activitiesHref, }: DiscoverFeedSectionProps): react_jsx_runtime.JSX.Element;
+
+export { DiscoverFeedSection, type DiscoverFeedSectionProps };

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

@@ -0,0 +1,72 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tag } 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";
+function DiscoverFeedSection({
+  orders,
+  isLoading,
+  activities,
+  activitiesLoading,
+  lastUpdated,
+  getAssetHref = (c, t) => `/asset/${c}/${t}`,
+  getActorHref = (a) => `/creator/${a}`,
+  explorerUrl = "https://voyager.online",
+  marketplaceHref = "/marketplace",
+  activitiesHref = "/activities"
+}) {
+  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)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(FadeIn, { delay: 0.08, children: /* @__PURE__ */ jsx(
+      ActivityFeedShell,
+      {
+        title: "Community",
+        href: activitiesHref,
+        hrefLabel: "Activities",
+        lastUpdated,
+        isLoading: activitiesLoading,
+        children: 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
+          );
+        })
+      }
+    ) })
+  ] });
+}
+export {
+  DiscoverFeedSection
+};
+//# sourceMappingURL=discover-feed-section.js.map

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

@@ -0,0 +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":";AAyCc,cACA,YADA;AAvCd,SAAS,WAAW;AACpB,SAAS,cAAc;AACvB,SAAS,aAAa,2BAA2B;AACjD,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;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,qBAAC,SAAI,WAAU,yCAEb;AAAA,wBAAC,UACC,+BAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,qCACb;AAAA,6BAAC,SACC;AAAA,8BAAC,OAAE,WAAU,iBAAgB,qBAAO;AAAA,UACpC,qBAAC,SAAI,WAAU,kCACb;AAAA,gCAAC,OAAI,WAAU,2BAA0B;AAAA,YACzC,oBAAC,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,oBAAC,SAAI,WAAU,0BACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,oBAAC,yBAAyB,CAAG,CAAE,GAC1E,IACE,OAAO,WAAW,IACpB,oBAAC,SAAI,WAAU,mFAAkF,qCAEjG,IAEA,oBAAC,SAAI,WAAU,0BACZ,iBAAO,IAAI,CAAC,MACX,oBAAC,eAA8B,OAAO,GAAG,SAAO,QAA9B,EAAE,SAA6B,CAClD,GACH;AAAA,OAEJ,GACF;AAAA,IAGA,oBAAC,UAAO,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":[]}

package/dist/components/discover-hero.cjs

@@ -0,0 +1,87 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var discover_hero_exports = {};
+__export(discover_hero_exports, {
+  DiscoverHero: () => DiscoverHero
+});
+module.exports = __toCommonJS(discover_hero_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_framer_motion = require("framer-motion");
+var import_motion_primitives = require("./motion-primitives.js");
+var import_activity_ticker = require("./activity-ticker.js");
+function DiscoverHero({
+  stats,
+  orders,
+  badgeText = "Creative Works",
+  headlineText = "Create, share & explore"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-6 pt-2 pb-6 border-b border-border/50", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        initial: { opacity: 0, y: 12 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.4, ease: import_motion_primitives.EASE_OUT },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pill-badge", children: badgeText })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        className: "text-3xl sm:text-4xl lg:text-5xl font-black leading-[1.1]",
+        style: { perspective: "800px" },
+        initial: { opacity: 0, y: 16 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.5, delay: 0.1, ease: import_motion_primitives.EASE_OUT },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "gradient-text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.KineticWords, { text: headlineText }) })
+      }
+    ),
+    stats && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        className: "flex flex-wrap gap-2",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { duration: 0.4, delay: 0.35, ease: import_motion_primitives.EASE_OUT },
+        children: [
+          { label: "Collections", value: stats.collections },
+          { label: "Assets", value: stats.tokens },
+          { label: "Sales", value: stats.sales }
+        ].map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "flex items-center gap-1.5 rounded-full border border-border bg-card px-3.5 py-1.5 text-sm",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-bold tabular-nums", children: value?.toLocaleString() ?? "\u2014" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground", children: label })
+            ]
+          },
+          label
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_activity_ticker.ActivityTicker, { orders })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DiscoverHero
+});
+//# sourceMappingURL=discover-hero.cjs.map

package/dist/components/discover-hero.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/discover-hero.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { KineticWords, EASE_OUT } from \"./motion-primitives.js\";\nimport { ActivityTicker } from \"./activity-ticker.js\";\nimport type { ApiOrder } from \"@medialane/sdk\";\n\nexport interface DiscoverHeroProps {\n  stats: { collections: number; tokens: number; sales: number } | null;\n  orders: ApiOrder[];\n  badgeText?: string;\n  headlineText?: string;\n}\n\nexport function DiscoverHero({\n  stats,\n  orders,\n  badgeText = \"Creative Works\",\n  headlineText = \"Create, share & explore\",\n}: DiscoverHeroProps) {\n  return (\n    <div className=\"space-y-6 pt-2 pb-6 border-b border-border/50\">\n      {/* Badge */}\n      <motion.div\n        initial={{ opacity: 0, y: 12 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.4, ease: EASE_OUT }}\n      >\n        <span className=\"pill-badge\">{badgeText}</span>\n      </motion.div>\n\n      {/* Headline */}\n      <motion.div\n        className=\"text-3xl sm:text-4xl lg:text-5xl font-black leading-[1.1]\"\n        style={{ perspective: \"800px\" }}\n        initial={{ opacity: 0, y: 16 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, delay: 0.1, ease: EASE_OUT }}\n      >\n        <span className=\"gradient-text\">\n          <KineticWords text={headlineText} />\n        </span>\n      </motion.div>\n\n      {/* Stats chips */}\n      {stats && (\n        <motion.div\n          className=\"flex flex-wrap gap-2\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.4, delay: 0.35, ease: EASE_OUT }}\n        >\n          {[\n            { label: \"Collections\", value: stats.collections },\n            { label: \"Assets\", value: stats.tokens },\n            { label: \"Sales\", value: stats.sales },\n          ].map(({ label, value }) => (\n            <div\n              key={label}\n              className=\"flex items-center gap-1.5 rounded-full border border-border bg-card px-3.5 py-1.5 text-sm\"\n            >\n              <span className=\"font-bold tabular-nums\">{value?.toLocaleString() ?? \"—\"}</span>\n              <span className=\"text-muted-foreground\">{label}</span>\n            </div>\n          ))}\n        </motion.div>\n      )}\n\n      {/* Scrolling ticker */}\n      <ActivityTicker orders={orders} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BQ;AA1BR,2BAAuB;AACvB,+BAAuC;AACvC,6BAA+B;AAUxB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,eAAe;AACjB,GAAsB;AACpB,SACE,6CAAC,SAAI,WAAU,iDAEb;AAAA;AAAA,MAAC,4BAAO;AAAA,MAAP;AAAA,QACC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,QAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,QAC5B,YAAY,EAAE,UAAU,KAAK,MAAM,kCAAS;AAAA,QAE5C,sDAAC,UAAK,WAAU,cAAc,qBAAU;AAAA;AAAA,IAC1C;AAAA,IAGA;AAAA,MAAC,4BAAO;AAAA,MAAP;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,aAAa,QAAQ;AAAA,QAC9B,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,QAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,QAC5B,YAAY,EAAE,UAAU,KAAK,OAAO,KAAK,MAAM,kCAAS;AAAA,QAExD,sDAAC,UAAK,WAAU,iBACd,sDAAC,yCAAa,MAAM,cAAc,GACpC;AAAA;AAAA,IACF;AAAA,IAGC,SACC;AAAA,MAAC,4BAAO;AAAA,MAAP;AAAA,QACC,WAAU;AAAA,QACV,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,YAAY,EAAE,UAAU,KAAK,OAAO,MAAM,MAAM,kCAAS;AAAA,QAExD;AAAA,UACC,EAAE,OAAO,eAAe,OAAO,MAAM,YAAY;AAAA,UACjD,EAAE,OAAO,UAAU,OAAO,MAAM,OAAO;AAAA,UACvC,EAAE,OAAO,SAAS,OAAO,MAAM,MAAM;AAAA,QACvC,EAAE,IAAI,CAAC,EAAE,OAAO,MAAM,MACpB;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV;AAAA,0DAAC,UAAK,WAAU,0BAA0B,iBAAO,eAAe,KAAK,UAAI;AAAA,cACzE,4CAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA;AAAA;AAAA,UAJ1C;AAAA,QAKP,CACD;AAAA;AAAA,IACH;AAAA,IAIF,4CAAC,yCAAe,QAAgB;AAAA,KAClC;AAEJ;","names":[]}

package/dist/components/discover-hero.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiOrder } from '@medialane/sdk';
+
+interface DiscoverHeroProps {
+    stats: {
+        collections: number;
+        tokens: number;
+        sales: number;
+    } | null;
+    orders: ApiOrder[];
+    badgeText?: string;
+    headlineText?: string;
+}
+declare function DiscoverHero({ stats, orders, badgeText, headlineText, }: DiscoverHeroProps): react_jsx_runtime.JSX.Element;
+
+export { DiscoverHero, type DiscoverHeroProps };

package/dist/components/discover-hero.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiOrder } from '@medialane/sdk';
+
+interface DiscoverHeroProps {
+    stats: {
+        collections: number;
+        tokens: number;
+        sales: number;
+    } | null;
+    orders: ApiOrder[];
+    badgeText?: string;
+    headlineText?: string;
+}
+declare function DiscoverHero({ stats, orders, badgeText, headlineText, }: DiscoverHeroProps): react_jsx_runtime.JSX.Element;
+
+export { DiscoverHero, type DiscoverHeroProps };

package/dist/components/discover-hero.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { KineticWords, EASE_OUT } from "./motion-primitives.js";
+import { ActivityTicker } from "./activity-ticker.js";
+function DiscoverHero({
+  stats,
+  orders,
+  badgeText = "Creative Works",
+  headlineText = "Create, share & explore"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 pt-2 pb-6 border-b border-border/50", children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 12 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.4, ease: EASE_OUT },
+        children: /* @__PURE__ */ jsx("span", { className: "pill-badge", children: badgeText })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "text-3xl sm:text-4xl lg:text-5xl font-black leading-[1.1]",
+        style: { perspective: "800px" },
+        initial: { opacity: 0, y: 16 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.5, delay: 0.1, ease: EASE_OUT },
+        children: /* @__PURE__ */ jsx("span", { className: "gradient-text", children: /* @__PURE__ */ jsx(KineticWords, { text: headlineText }) })
+      }
+    ),
+    stats && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "flex flex-wrap gap-2",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { duration: 0.4, delay: 0.35, ease: EASE_OUT },
+        children: [
+          { label: "Collections", value: stats.collections },
+          { label: "Assets", value: stats.tokens },
+          { label: "Sales", value: stats.sales }
+        ].map(({ label, value }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1.5 rounded-full border border-border bg-card px-3.5 py-1.5 text-sm",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold tabular-nums", children: value?.toLocaleString() ?? "\u2014" }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label })
+            ]
+          },
+          label
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(ActivityTicker, { orders })
+  ] });
+}
+export {
+  DiscoverHero
+};
+//# sourceMappingURL=discover-hero.js.map

package/dist/components/discover-hero.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/discover-hero.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { KineticWords, EASE_OUT } from \"./motion-primitives.js\";\nimport { ActivityTicker } from \"./activity-ticker.js\";\nimport type { ApiOrder } from \"@medialane/sdk\";\n\nexport interface DiscoverHeroProps {\n  stats: { collections: number; tokens: number; sales: number } | null;\n  orders: ApiOrder[];\n  badgeText?: string;\n  headlineText?: string;\n}\n\nexport function DiscoverHero({\n  stats,\n  orders,\n  badgeText = \"Creative Works\",\n  headlineText = \"Create, share & explore\",\n}: DiscoverHeroProps) {\n  return (\n    <div className=\"space-y-6 pt-2 pb-6 border-b border-border/50\">\n      {/* Badge */}\n      <motion.div\n        initial={{ opacity: 0, y: 12 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.4, ease: EASE_OUT }}\n      >\n        <span className=\"pill-badge\">{badgeText}</span>\n      </motion.div>\n\n      {/* Headline */}\n      <motion.div\n        className=\"text-3xl sm:text-4xl lg:text-5xl font-black leading-[1.1]\"\n        style={{ perspective: \"800px\" }}\n        initial={{ opacity: 0, y: 16 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, delay: 0.1, ease: EASE_OUT }}\n      >\n        <span className=\"gradient-text\">\n          <KineticWords text={headlineText} />\n        </span>\n      </motion.div>\n\n      {/* Stats chips */}\n      {stats && (\n        <motion.div\n          className=\"flex flex-wrap gap-2\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.4, delay: 0.35, ease: EASE_OUT }}\n        >\n          {[\n            { label: \"Collections\", value: stats.collections },\n            { label: \"Assets\", value: stats.tokens },\n            { label: \"Sales\", value: stats.sales },\n          ].map(({ label, value }) => (\n            <div\n              key={label}\n              className=\"flex items-center gap-1.5 rounded-full border border-border bg-card px-3.5 py-1.5 text-sm\"\n            >\n              <span className=\"font-bold tabular-nums\">{value?.toLocaleString() ?? \"—\"}</span>\n              <span className=\"text-muted-foreground\">{label}</span>\n            </div>\n          ))}\n        </motion.div>\n      )}\n\n      {/* Scrolling ticker */}\n      <ActivityTicker orders={orders} />\n    </div>\n  );\n}\n"],"mappings":";AA4BQ,cA6BI,YA7BJ;AA1BR,SAAS,cAAc;AACvB,SAAS,cAAc,gBAAgB;AACvC,SAAS,sBAAsB;AAUxB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,eAAe;AACjB,GAAsB;AACpB,SACE,qBAAC,SAAI,WAAU,iDAEb;AAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,QAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,QAC5B,YAAY,EAAE,UAAU,KAAK,MAAM,SAAS;AAAA,QAE5C,8BAAC,UAAK,WAAU,cAAc,qBAAU;AAAA;AAAA,IAC1C;AAAA,IAGA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,aAAa,QAAQ;AAAA,QAC9B,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,QAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,QAC5B,YAAY,EAAE,UAAU,KAAK,OAAO,KAAK,MAAM,SAAS;AAAA,QAExD,8BAAC,UAAK,WAAU,iBACd,8BAAC,gBAAa,MAAM,cAAc,GACpC;AAAA;AAAA,IACF;AAAA,IAGC,SACC;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAU;AAAA,QACV,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,YAAY,EAAE,UAAU,KAAK,OAAO,MAAM,MAAM,SAAS;AAAA,QAExD;AAAA,UACC,EAAE,OAAO,eAAe,OAAO,MAAM,YAAY;AAAA,UACjD,EAAE,OAAO,UAAU,OAAO,MAAM,OAAO;AAAA,UACvC,EAAE,OAAO,SAAS,OAAO,MAAM,MAAM;AAAA,QACvC,EAAE,IAAI,CAAC,EAAE,OAAO,MAAM,MACpB;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV;AAAA,kCAAC,UAAK,WAAU,0BAA0B,iBAAO,eAAe,KAAK,UAAI;AAAA,cACzE,oBAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA;AAAA;AAAA,UAJ1C;AAAA,QAKP,CACD;AAAA;AAAA,IACH;AAAA,IAIF,oBAAC,kBAAe,QAAgB;AAAA,KAClC;AAEJ;","names":[]}

package/dist/components/featured-carousel.cjs

@@ -0,0 +1,181 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var featured_carousel_exports = {};
+__export(featured_carousel_exports, {
+  FeaturedCarousel: () => FeaturedCarousel,
+  FeaturedCarouselSkeleton: () => FeaturedCarouselSkeleton
+});
+module.exports = __toCommonJS(featured_carousel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_framer_motion = require("framer-motion");
+var import_lucide_react = require("lucide-react");
+var import_motion_primitives = require("./motion-primitives.js");
+var import_ipfs = require("../utils/ipfs.js");
+var import_format = require("../utils/format.js");
+function Slide({ collection, href }) {
+  const name = collection.name ?? "Featured Collection";
+  const image = collection.image ? (0, import_ipfs.ipfsToHttp)(collection.image) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full h-full", children: [
+    image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        src: image,
+        alt: name,
+        loading: "lazy",
+        className: "absolute inset-0 w-full h-full object-cover"
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-black/10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-black/50 via-transparent to-transparent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-0 left-0 right-0 p-5 sm:p-8 lg:p-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-2xl sm:text-3xl lg:text-4xl font-black text-white leading-tight mb-3 max-w-lg", children: name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-4 mb-5", children: [
+        collection.totalSupply != null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm text-white/70", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-bold text-white", children: collection.totalSupply }),
+          " items"
+        ] }),
+        collection.floorPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm text-white/70", children: [
+          "Floor",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-bold text-brand-orange", children: (0, import_format.formatDisplayPrice)(collection.floorPrice) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "a",
+        {
+          href,
+          className: "inline-flex items-center gap-2 text-sm font-semibold px-4 py-2 rounded-lg bg-white/15 hover:bg-white/25 text-white border border-white/20 backdrop-blur-sm transition-colors",
+          children: [
+            "View Collection ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function FeaturedCarouselSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.FadeIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "space-y-4", children: [
+    /* @__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.Sparkles, { className: "h-4 w-4 text-brand-purple" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-xl font-bold", children: "Featured Collections" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "-mx-4 sm:-mx-6 lg:-mx-8 aspect-[16/7] sm:aspect-[21/9] bg-muted animate-pulse" })
+  ] }) });
+}
+function FeaturedCarousel({
+  collections,
+  isLoading,
+  getHref,
+  allCollectionsHref = "/collections"
+}) {
+  const [active, setActive] = (0, import_react.useState)(0);
+  const [paused, setPaused] = (0, import_react.useState)(false);
+  const total = collections.length;
+  const next = (0, import_react.useCallback)(() => setActive((p) => (p + 1) % total), [total]);
+  const prev = (0, import_react.useCallback)(() => setActive((p) => (p - 1 + total) % total), [total]);
+  (0, import_react.useEffect)(() => {
+    setActive(0);
+  }, [total]);
+  (0, import_react.useEffect)(() => {
+    if (paused || total <= 1) return;
+    const id = setInterval(next, 6e3);
+    return () => clearInterval(id);
+  }, [next, paused, total]);
+  if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FeaturedCarouselSkeleton, {});
+  if (total === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.FadeIn, { children: /* @__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 mt-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Sparkles, { className: "h-4 w-4 text-brand-purple" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-xl font-bold", children: "Featured Collections" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "a",
+        {
+          href: allCollectionsHref,
+          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 ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: "-mx-4 sm:-mx-6 lg:-mx-8 relative overflow-hidden aspect-[16/7] sm:aspect-[21/9] bg-muted",
+        onMouseEnter: () => setPaused(true),
+        onMouseLeave: () => setPaused(false),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_framer_motion.motion.div,
+            {
+              className: "absolute inset-0",
+              initial: { opacity: 0, x: 40 },
+              animate: { opacity: 1, x: 0 },
+              exit: { opacity: 0, x: -40 },
+              transition: { duration: 0.45, ease: import_motion_primitives.EASE_OUT },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slide, { collection: collections[active], href: getHref(collections[active]) })
+            },
+            active
+          ) }),
+          total > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                onClick: prev,
+                className: "absolute left-3 top-1/2 -translate-y-1/2 h-9 w-9 rounded-full bg-black/40 border border-white/10 backdrop-blur-sm flex items-center justify-center text-white hover:bg-black/60 transition-colors z-10",
+                "aria-label": "Previous",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                onClick: next,
+                className: "absolute right-3 top-1/2 -translate-y-1/2 h-9 w-9 rounded-full bg-black/40 border border-white/10 backdrop-blur-sm flex items-center justify-center text-white hover:bg-black/60 transition-colors z-10",
+                "aria-label": "Next",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          total > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-1.5 z-10", children: collections.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: () => setActive(i),
+              className: `h-1.5 rounded-full transition-all duration-300 ${i === active ? "w-6 bg-white" : "w-1.5 bg-white/40 hover:bg-white/70"}`,
+              "aria-label": `Go to slide ${i + 1}`
+            },
+            i
+          )) })
+        ]
+      }
+    )
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FeaturedCarousel,
+  FeaturedCarouselSkeleton
+});
+//# sourceMappingURL=featured-carousel.cjs.map

package/dist/components/featured-carousel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/featured-carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight, ArrowRight, Sparkles } from \"lucide-react\";\nimport { FadeIn, EASE_OUT } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\nexport interface FeaturedCarouselProps {\n  collections: ApiCollection[];\n  isLoading: boolean;\n  getHref: (collection: ApiCollection) => string;\n  allCollectionsHref?: string;\n}\n\nfunction Slide({ collection, href }: { collection: ApiCollection; href: string }) {\n  const name = collection.name ?? \"Featured Collection\";\n  const image = collection.image ? ipfsToHttp(collection.image) : null;\n\n  return (\n    <div className=\"relative w-full h-full\">\n      {image ? (\n        <img\n          src={image}\n          alt={name}\n          loading=\"lazy\"\n          className=\"absolute inset-0 w-full h-full object-cover\"\n        />\n      ) : (\n        <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40\" />\n      )}\n      <div className=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-black/10\" />\n      <div className=\"absolute inset-0 bg-gradient-to-r from-black/50 via-transparent to-transparent\" />\n      <div className=\"absolute bottom-0 left-0 right-0 p-5 sm:p-8 lg:p-10\">\n        <h2 className=\"text-2xl sm:text-3xl lg:text-4xl font-black text-white leading-tight mb-3 max-w-lg\">\n          {name}\n        </h2>\n        <div className=\"flex items-center gap-4 mb-5\">\n          {collection.totalSupply != null && (\n            <span className=\"text-sm text-white/70\">\n              <span className=\"font-bold text-white\">{collection.totalSupply}</span> items\n            </span>\n          )}\n          {collection.floorPrice && (\n            <span className=\"text-sm text-white/70\">\n              Floor{\" \"}\n              <span className=\"font-bold text-brand-orange\">\n                {formatDisplayPrice(collection.floorPrice)}\n              </span>\n            </span>\n          )}\n        </div>\n        <a\n          href={href}\n          className=\"inline-flex items-center gap-2 text-sm font-semibold px-4 py-2 rounded-lg bg-white/15 hover:bg-white/25 text-white border border-white/20 backdrop-blur-sm transition-colors\"\n        >\n          View Collection <ArrowRight className=\"h-3.5 w-3.5\" />\n        </a>\n      </div>\n    </div>\n  );\n}\n\nexport function FeaturedCarouselSkeleton() {\n  return (\n    <FadeIn>\n      <section className=\"space-y-4\">\n        <div className=\"flex items-center gap-2 mt-0.5\">\n          <Sparkles className=\"h-4 w-4 text-brand-purple\" />\n          <h2 className=\"text-xl font-bold\">Featured Collections</h2>\n        </div>\n        <div className=\"-mx-4 sm:-mx-6 lg:-mx-8 aspect-[16/7] sm:aspect-[21/9] bg-muted animate-pulse\" />\n      </section>\n    </FadeIn>\n  );\n}\n\nexport function FeaturedCarousel({\n  collections,\n  isLoading,\n  getHref,\n  allCollectionsHref = \"/collections\",\n}: FeaturedCarouselProps) {\n  const [active, setActive] = useState(0);\n  const [paused, setPaused] = useState(false);\n  const total = collections.length;\n\n  const next = useCallback(() => setActive((p) => (p + 1) % total), [total]);\n  const prev = useCallback(() => setActive((p) => (p - 1 + total) % total), [total]);\n\n  useEffect(() => { setActive(0); }, [total]);\n\n  useEffect(() => {\n    if (paused || total <= 1) return;\n    const id = setInterval(next, 6000);\n    return () => clearInterval(id);\n  }, [next, paused, total]);\n\n  if (isLoading) return <FeaturedCarouselSkeleton />;\n  if (total === 0) return null;\n\n  return (\n    <FadeIn>\n      <section className=\"space-y-4\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-2 mt-0.5\">\n            <Sparkles className=\"h-4 w-4 text-brand-purple\" />\n            <h2 className=\"text-xl font-bold\">Featured Collections</h2>\n          </div>\n          <a\n            href={allCollectionsHref}\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 <ArrowRight className=\"h-3.5 w-3.5\" />\n          </a>\n        </div>\n\n        <div\n          className=\"-mx-4 sm:-mx-6 lg:-mx-8 relative overflow-hidden aspect-[16/7] sm:aspect-[21/9] bg-muted\"\n          onMouseEnter={() => setPaused(true)}\n          onMouseLeave={() => setPaused(false)}\n        >\n          <AnimatePresence mode=\"wait\">\n            <motion.div\n              key={active}\n              className=\"absolute inset-0\"\n              initial={{ opacity: 0, x: 40 }}\n              animate={{ opacity: 1, x: 0 }}\n              exit={{ opacity: 0, x: -40 }}\n              transition={{ duration: 0.45, ease: EASE_OUT }}\n            >\n              <Slide collection={collections[active]} href={getHref(collections[active])} />\n            </motion.div>\n          </AnimatePresence>\n\n          {total > 1 && (\n            <>\n              <button\n                onClick={prev}\n                className=\"absolute left-3 top-1/2 -translate-y-1/2 h-9 w-9 rounded-full bg-black/40 border border-white/10 backdrop-blur-sm flex items-center justify-center text-white hover:bg-black/60 transition-colors z-10\"\n                aria-label=\"Previous\"\n              >\n                <ChevronLeft className=\"h-4 w-4\" />\n              </button>\n              <button\n                onClick={next}\n                className=\"absolute right-3 top-1/2 -translate-y-1/2 h-9 w-9 rounded-full bg-black/40 border border-white/10 backdrop-blur-sm flex items-center justify-center text-white hover:bg-black/60 transition-colors z-10\"\n                aria-label=\"Next\"\n              >\n                <ChevronRight className=\"h-4 w-4\" />\n              </button>\n            </>\n          )}\n\n          {total > 1 && (\n            <div className=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-1.5 z-10\">\n              {collections.map((_, i) => (\n                <button\n                  key={i}\n                  onClick={() => setActive(i)}\n                  className={`h-1.5 rounded-full transition-all duration-300 ${\n                    i === active ? \"w-6 bg-white\" : \"w-1.5 bg-white/40 hover:bg-white/70\"\n                  }`}\n                  aria-label={`Go to slide ${i + 1}`}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      </section>\n    </FadeIn>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/featured-carousel.d.cts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiCollection } from '@medialane/sdk';
+
+interface FeaturedCarouselProps {
+    collections: ApiCollection[];
+    isLoading: boolean;
+    getHref: (collection: ApiCollection) => string;
+    allCollectionsHref?: string;
+}
+declare function FeaturedCarouselSkeleton(): react_jsx_runtime.JSX.Element;
+declare function FeaturedCarousel({ collections, isLoading, getHref, allCollectionsHref, }: FeaturedCarouselProps): react_jsx_runtime.JSX.Element | null;
+
+export { FeaturedCarousel, type FeaturedCarouselProps, FeaturedCarouselSkeleton };

package/dist/components/featured-carousel.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiCollection } from '@medialane/sdk';
+
+interface FeaturedCarouselProps {
+    collections: ApiCollection[];
+    isLoading: boolean;
+    getHref: (collection: ApiCollection) => string;
+    allCollectionsHref?: string;
+}
+declare function FeaturedCarouselSkeleton(): react_jsx_runtime.JSX.Element;
+declare function FeaturedCarousel({ collections, isLoading, getHref, allCollectionsHref, }: FeaturedCarouselProps): react_jsx_runtime.JSX.Element | null;
+
+export { FeaturedCarousel, type FeaturedCarouselProps, FeaturedCarouselSkeleton };