@medialane/ui 0.1.6 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/token-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport {\n  ShoppingCart, Tag, ArrowRightLeft, X, Loader2, HandCoins,\n  Check, ArrowUpRight, Zap,\n} from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport type { ApiToken } from \"@medialane/sdk\";\n\nexport type RarityTier = \"legendary\" | \"epic\" | \"rare\" | \"uncommon\" | \"common\";\n\nconst RARITY_STYLE: Record<RarityTier, { label: string; className: string } | null> = {\n  legendary: { label: \"Legendary\", className: \"bg-yellow-400/90 text-yellow-900\" },\n  epic:      { label: \"Epic\",      className: \"bg-purple-500/85 text-white\" },\n  rare:      { label: \"Rare\",      className: \"bg-blue-500/85 text-white\" },\n  uncommon:  { label: \"Uncommon\",  className: \"bg-emerald-500/85 text-white\" },\n  common:    null,\n};\n\nconst BTN_BASE = \"h-8 rounded-[11px] flex items-center justify-center gap-1.5 text-xs font-semibold transition-all active:scale-[0.98] shadow-none border-0\";\nconst BTN_SOLID = cn(BTN_BASE, \"text-white hover:brightness-110\");\nconst BTN_OUTLINE = cn(BTN_BASE, \"border border-border/60 text-foreground hover:bg-muted/60\");\n\nexport interface TokenCardProps {\n  token: ApiToken;\n  /** Whether the current user owns this token. Default: false */\n  isOwner?: boolean;\n  /** Whether this token's listing is already in the cart. Default: false */\n  inCart?: boolean;\n  /** Show the Buy button for listed tokens. Default: true */\n  showBuyButton?: boolean;\n  /** Optional rarity label shown as an overlay badge */\n  rarityTier?: RarityTier;\n  className?: string;\n  /** Callbacks — omit any to hide that button */\n  onBuy?: (token: ApiToken) => void;\n  onCart?: (token: ApiToken) => void;\n  onOffer?: (token: ApiToken) => void;\n  onList?: (token: ApiToken) => void;\n  onCancel?: (token: ApiToken) => void;\n  onTransfer?: (token: ApiToken) => void;\n  onRemix?: (token: ApiToken) => void;\n  onReport?: (token: ApiToken) => void;\n  /** Slot for a DropdownMenu trigger — rendered after primary buttons */\n  overflowMenu?: React.ReactNode;\n}\n\nexport function TokenCard({\n  token,\n  isOwner = false,\n  inCart = false,\n  showBuyButton = true,\n  rarityTier,\n  className,\n  onBuy,\n  onCart,\n  onOffer,\n  onList,\n  onCancel,\n  onTransfer,\n  overflowMenu,\n}: TokenCardProps) {\n  const [imgError, setImgError] = useState(false);\n\n  const name = token.metadata?.name || `Token #${token.tokenId}`;\n  const image = ipfsToHttp(token.metadata?.image);\n  const activeOrder = token.activeOrders?.[0];\n  const assetHref = `/asset/${token.contractAddress}/${token.tokenId}`;\n\n  const renderActions = () => {\n    // Non-owner + listed + showBuyButton\n    if (!isOwner && activeOrder && showBuyButton) {\n      return (\n        <>\n          {onBuy && (\n            <button\n              className={cn(BTN_SOLID, \"flex-1 bg-brand-purple\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBuy(token); }}\n            >\n              <Zap className=\"h-3.5 w-3.5 shrink-0\" />\n              Buy\n            </button>\n          )}\n          {onCart && (\n            <button\n              className={cn(\n                BTN_OUTLINE, \"w-8 shrink-0\",\n                inCart && \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n              )}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onCart(token); }}\n              disabled={inCart}\n              aria-label={inCart ? \"In cart\" : \"Add to cart\"}\n            >\n              {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n            </button>\n          )}\n          {onOffer && (\n            <button\n              className={cn(BTN_OUTLINE, \"w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onOffer(token); }}\n              aria-label=\"Make an offer\"\n            >\n              <HandCoins className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </>\n      );\n    }\n\n    // Non-owner + no listing (or showBuyButton=false)\n    if (!isOwner) {\n      if (!onOffer) return null;\n      return (\n        <>\n          <Link href={assetHref} className={cn(BTN_OUTLINE, \"flex-1\")}>\n            <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" />\n            View\n          </Link>\n          <button\n            className={cn(BTN_OUTLINE, \"w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10\")}\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onOffer(token); }}\n            aria-label=\"Make an offer\"\n          >\n            <HandCoins className=\"h-3.5 w-3.5\" />\n          </button>\n        </>\n      );\n    }\n\n    // Owner + listed\n    if (isOwner && activeOrder) {\n      if (!onCancel) return null;\n      return (\n        <>\n          <button\n            className={cn(BTN_SOLID, \"flex-1 bg-brand-rose\")}\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onCancel(token); }}\n          >\n            <X className=\"h-3.5 w-3.5 shrink-0\" />\n            Cancel listing\n          </button>\n          {onTransfer && (\n            <button\n              className={cn(BTN_OUTLINE, \"w-8 shrink-0\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onTransfer(token); }}\n              aria-label=\"Transfer\"\n            >\n              <ArrowRightLeft className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </>\n      );\n    }\n\n    // Owner + unlisted\n    if (isOwner && !activeOrder) {\n      if (!onList) return null;\n      return (\n        <>\n          <button\n            className={cn(BTN_SOLID, \"flex-1 bg-brand-blue\")}\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onList(token); }}\n          >\n            <Tag className=\"h-3.5 w-3.5 shrink-0\" />\n            List for sale\n          </button>\n          {onTransfer && (\n            <button\n              className={cn(BTN_OUTLINE, \"w-8 shrink-0\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onTransfer(token); }}\n              aria-label=\"Transfer\"\n            >\n              <ArrowRightLeft className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </>\n      );\n    }\n\n    return null;\n  };\n\n  const actionContent = renderActions();\n  const showActionBar = actionContent != null || !!overflowMenu;\n\n  return (\n    <MotionCard className={cn(\"card-base group relative overflow-hidden flex flex-col\", className)}>\n      <Link href={assetHref} className=\"block relative shrink-0\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden\">\n          {!imgError ? (\n            <Image\n              src={image}\n              alt={name}\n              fill\n              unoptimized\n              sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n            />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n              <span className=\"text-2xl font-mono text-muted-foreground\">#{token.tokenId}</span>\n            </div>\n          )}\n\n          {token.metadata?.ipType && (\n            <div className=\"absolute top-2 left-2\">\n              <IpTypeBadge ipType={token.metadata.ipType as any} size=\"sm\" />\n            </div>\n          )}\n\n          {rarityTier && RARITY_STYLE[rarityTier] && (\n            <div className=\"absolute top-2 right-2 z-10\">\n              <span className={cn(\n                \"inline-flex items-center px-1.5 py-0.5 rounded-md backdrop-blur-sm text-[10px] font-bold leading-none\",\n                RARITY_STYLE[rarityTier]!.className\n              )}>\n                {RARITY_STYLE[rarityTier]!.label}\n              </span>\n            </div>\n          )}\n\n          {(token.metadataStatus === \"PENDING\" || token.metadataStatus === \"FETCHING\") && (\n            <div className=\"absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5\">\n              <Loader2 className=\"h-3 w-3 animate-spin text-white/70\" />\n              <span className=\"text-[10px] text-white/70\">Indexing…</span>\n            </div>\n          )}\n        </div>\n      </Link>\n\n      <div className=\"px-3 pt-2.5 pb-1 flex-1\">\n        <Link href={assetHref} className=\"block space-y-0.5 mb-2\">\n          <p className=\"text-xl font-bold line-clamp-2 leading-tight\">{name}</p>\n          {activeOrder && (\n            <p className=\"flex items-center gap-1 text-[11px] font-semibold text-foreground/80\">\n              <CurrencyIcon symbol={activeOrder.price.currency} size={11} />\n              {formatDisplayPrice(activeOrder.price.formatted)}\n              <span className=\"font-normal text-muted-foreground\">{activeOrder.price.currency}</span>\n            </p>\n          )}\n          {token.metadata?.description ? (\n            <p className=\"text-[10px] text-muted-foreground truncate leading-snug\">\n              {token.metadata.description}\n            </p>\n          ) : token.metadata?.ipType ? (\n            <p className=\"text-[10px] text-muted-foreground opacity-70\">{token.metadata.ipType}</p>\n          ) : null}\n        </Link>\n      </div>\n\n      {showActionBar && (\n        <div className=\"flex items-center gap-1.5 px-2 pb-2\">\n          {actionContent}\n          {overflowMenu}\n        </div>\n      )}\n    </MotionCard>\n  );\n}\n\nexport function TokenCardSkeleton() {\n  return (\n    <div className=\"card-base overflow-hidden\">\n      <div className=\"aspect-square w-full animate-pulse bg-muted\" />\n      <div className=\"px-3 pt-2.5 pb-2 space-y-1.5\">\n        <div className=\"h-5 w-3/4 rounded-md animate-pulse bg-muted\" />\n        <div className=\"h-2.5 w-2/5 rounded-md animate-pulse bg-muted\" />\n      </div>\n      <div className=\"px-2 pb-2 flex gap-1.5\">\n        <div className=\"h-8 flex-1 rounded-[11px] animate-pulse bg-muted\" />\n        <div className=\"h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0\" />\n        <div className=\"h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["Link","Image"]}

package/dist/components/token-card.d.cts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiToken } from '@medialane/sdk';
+
+type RarityTier = "legendary" | "epic" | "rare" | "uncommon" | "common";
+interface TokenCardProps {
+    token: ApiToken;
+    /** Whether the current user owns this token. Default: false */
+    isOwner?: boolean;
+    /** Whether this token's listing is already in the cart. Default: false */
+    inCart?: boolean;
+    /** Show the Buy button for listed tokens. Default: true */
+    showBuyButton?: boolean;
+    /** Optional rarity label shown as an overlay badge */
+    rarityTier?: RarityTier;
+    className?: string;
+    /** Callbacks — omit any to hide that button */
+    onBuy?: (token: ApiToken) => void;
+    onCart?: (token: ApiToken) => void;
+    onOffer?: (token: ApiToken) => void;
+    onList?: (token: ApiToken) => void;
+    onCancel?: (token: ApiToken) => void;
+    onTransfer?: (token: ApiToken) => void;
+    onRemix?: (token: ApiToken) => void;
+    onReport?: (token: ApiToken) => void;
+    /** Slot for a DropdownMenu trigger — rendered after primary buttons */
+    overflowMenu?: React.ReactNode;
+}
+declare function TokenCard({ token, isOwner, inCart, showBuyButton, rarityTier, className, onBuy, onCart, onOffer, onList, onCancel, onTransfer, overflowMenu, }: TokenCardProps): react_jsx_runtime.JSX.Element;
+declare function TokenCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+export { type RarityTier, TokenCard, type TokenCardProps, TokenCardSkeleton };

package/dist/components/token-card.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiToken } from '@medialane/sdk';
+
+type RarityTier = "legendary" | "epic" | "rare" | "uncommon" | "common";
+interface TokenCardProps {
+    token: ApiToken;
+    /** Whether the current user owns this token. Default: false */
+    isOwner?: boolean;
+    /** Whether this token's listing is already in the cart. Default: false */
+    inCart?: boolean;
+    /** Show the Buy button for listed tokens. Default: true */
+    showBuyButton?: boolean;
+    /** Optional rarity label shown as an overlay badge */
+    rarityTier?: RarityTier;
+    className?: string;
+    /** Callbacks — omit any to hide that button */
+    onBuy?: (token: ApiToken) => void;
+    onCart?: (token: ApiToken) => void;
+    onOffer?: (token: ApiToken) => void;
+    onList?: (token: ApiToken) => void;
+    onCancel?: (token: ApiToken) => void;
+    onTransfer?: (token: ApiToken) => void;
+    onRemix?: (token: ApiToken) => void;
+    onReport?: (token: ApiToken) => void;
+    /** Slot for a DropdownMenu trigger — rendered after primary buttons */
+    overflowMenu?: React.ReactNode;
+}
+declare function TokenCard({ token, isOwner, inCart, showBuyButton, rarityTier, className, onBuy, onCart, onOffer, onList, onCancel, onTransfer, overflowMenu, }: TokenCardProps): react_jsx_runtime.JSX.Element;
+declare function TokenCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+export { type RarityTier, TokenCard, type TokenCardProps, TokenCardSkeleton };

package/dist/components/token-card.js

@@ -0,0 +1,256 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import {
+  ShoppingCart,
+  Tag,
+  ArrowRightLeft,
+  X,
+  Loader2,
+  HandCoins,
+  Check,
+  ArrowUpRight,
+  Zap
+} from "lucide-react";
+import { cn } from "../utils/cn.js";
+import { ipfsToHttp } from "../utils/ipfs.js";
+import { formatDisplayPrice } from "../utils/format.js";
+import { CurrencyIcon } from "./currency-icon.js";
+import { IpTypeBadge } from "./ip-type-badge.js";
+import { MotionCard } from "./motion-primitives.js";
+const RARITY_STYLE = {
+  legendary: { label: "Legendary", className: "bg-yellow-400/90 text-yellow-900" },
+  epic: { label: "Epic", className: "bg-purple-500/85 text-white" },
+  rare: { label: "Rare", className: "bg-blue-500/85 text-white" },
+  uncommon: { label: "Uncommon", className: "bg-emerald-500/85 text-white" },
+  common: null
+};
+const BTN_BASE = "h-8 rounded-[11px] flex items-center justify-center gap-1.5 text-xs font-semibold transition-all active:scale-[0.98] shadow-none border-0";
+const BTN_SOLID = cn(BTN_BASE, "text-white hover:brightness-110");
+const BTN_OUTLINE = cn(BTN_BASE, "border border-border/60 text-foreground hover:bg-muted/60");
+function TokenCard({
+  token,
+  isOwner = false,
+  inCart = false,
+  showBuyButton = true,
+  rarityTier,
+  className,
+  onBuy,
+  onCart,
+  onOffer,
+  onList,
+  onCancel,
+  onTransfer,
+  overflowMenu
+}) {
+  const [imgError, setImgError] = useState(false);
+  const name = token.metadata?.name || `Token #${token.tokenId}`;
+  const image = ipfsToHttp(token.metadata?.image);
+  const activeOrder = token.activeOrders?.[0];
+  const assetHref = `/asset/${token.contractAddress}/${token.tokenId}`;
+  const renderActions = () => {
+    if (!isOwner && activeOrder && showBuyButton) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        onBuy && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: cn(BTN_SOLID, "flex-1 bg-brand-purple"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onBuy(token);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Zap, { className: "h-3.5 w-3.5 shrink-0" }),
+              "Buy"
+            ]
+          }
+        ),
+        onCart && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              BTN_OUTLINE,
+              "w-8 shrink-0",
+              inCart && "border-brand-orange/50 bg-brand-orange/10 text-brand-orange"
+            ),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onCart(token);
+            },
+            disabled: inCart,
+            "aria-label": inCart ? "In cart" : "Add to cart",
+            children: inCart ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ShoppingCart, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        onOffer && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(BTN_OUTLINE, "w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onOffer(token);
+            },
+            "aria-label": "Make an offer",
+            children: /* @__PURE__ */ jsx(HandCoins, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    if (!isOwner) {
+      if (!onOffer) return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Link, { href: assetHref, className: cn(BTN_OUTLINE, "flex-1"), children: [
+          /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-3.5 w-3.5 shrink-0" }),
+          "View"
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(BTN_OUTLINE, "w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onOffer(token);
+            },
+            "aria-label": "Make an offer",
+            children: /* @__PURE__ */ jsx(HandCoins, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    if (isOwner && activeOrder) {
+      if (!onCancel) return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: cn(BTN_SOLID, "flex-1 bg-brand-rose"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onCancel(token);
+            },
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 shrink-0" }),
+              "Cancel listing"
+            ]
+          }
+        ),
+        onTransfer && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(BTN_OUTLINE, "w-8 shrink-0"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTransfer(token);
+            },
+            "aria-label": "Transfer",
+            children: /* @__PURE__ */ jsx(ArrowRightLeft, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    if (isOwner && !activeOrder) {
+      if (!onList) return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: cn(BTN_SOLID, "flex-1 bg-brand-blue"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onList(token);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Tag, { className: "h-3.5 w-3.5 shrink-0" }),
+              "List for sale"
+            ]
+          }
+        ),
+        onTransfer && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(BTN_OUTLINE, "w-8 shrink-0"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTransfer(token);
+            },
+            "aria-label": "Transfer",
+            children: /* @__PURE__ */ jsx(ArrowRightLeft, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    return null;
+  };
+  const actionContent = renderActions();
+  const showActionBar = actionContent != null || !!overflowMenu;
+  return /* @__PURE__ */ jsxs(MotionCard, { className: cn("card-base group relative overflow-hidden flex flex-col", className), children: [
+    /* @__PURE__ */ jsx(Link, { href: assetHref, className: "block relative shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-square bg-muted overflow-hidden", children: [
+      !imgError ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: image,
+          alt: name,
+          fill: true,
+          unoptimized: true,
+          sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw",
+          className: "object-cover transition-transform duration-500 group-hover:scale-105",
+          onError: () => setImgError(true)
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15", children: /* @__PURE__ */ jsxs("span", { className: "text-2xl font-mono text-muted-foreground", children: [
+        "#",
+        token.tokenId
+      ] }) }),
+      token.metadata?.ipType && /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2", children: /* @__PURE__ */ jsx(IpTypeBadge, { ipType: token.metadata.ipType, size: "sm" }) }),
+      rarityTier && RARITY_STYLE[rarityTier] && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx("span", { className: cn(
+        "inline-flex items-center px-1.5 py-0.5 rounded-md backdrop-blur-sm text-[10px] font-bold leading-none",
+        RARITY_STYLE[rarityTier].className
+      ), children: RARITY_STYLE[rarityTier].label }) }),
+      (token.metadataStatus === "PENDING" || token.metadataStatus === "FETCHING") && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin text-white/70" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/70", children: "Indexing\u2026" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "px-3 pt-2.5 pb-1 flex-1", children: /* @__PURE__ */ jsxs(Link, { href: assetHref, className: "block space-y-0.5 mb-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xl font-bold line-clamp-2 leading-tight", children: name }),
+      activeOrder && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-[11px] font-semibold text-foreground/80", children: [
+        /* @__PURE__ */ jsx(CurrencyIcon, { symbol: activeOrder.price.currency, size: 11 }),
+        formatDisplayPrice(activeOrder.price.formatted),
+        /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: activeOrder.price.currency })
+      ] }),
+      token.metadata?.description ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate leading-snug", children: token.metadata.description }) : token.metadata?.ipType ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground opacity-70", children: token.metadata.ipType }) : null
+    ] }) }),
+    showActionBar && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 pb-2", children: [
+      actionContent,
+      overflowMenu
+    ] })
+  ] });
+}
+function TokenCardSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "card-base overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "aspect-square w-full animate-pulse bg-muted" }),
+    /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2.5 pb-2 space-y-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-5 w-3/4 rounded-md animate-pulse bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2/5 rounded-md animate-pulse bg-muted" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "px-2 pb-2 flex gap-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 flex-1 rounded-[11px] animate-pulse bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0" }),
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0" })
+    ] })
+  ] });
+}
+export {
+  TokenCard,
+  TokenCardSkeleton
+};
+//# sourceMappingURL=token-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/token-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport {\n  ShoppingCart, Tag, ArrowRightLeft, X, Loader2, HandCoins,\n  Check, ArrowUpRight, Zap,\n} from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport type { ApiToken } from \"@medialane/sdk\";\n\nexport type RarityTier = \"legendary\" | \"epic\" | \"rare\" | \"uncommon\" | \"common\";\n\nconst RARITY_STYLE: Record<RarityTier, { label: string; className: string } | null> = {\n  legendary: { label: \"Legendary\", className: \"bg-yellow-400/90 text-yellow-900\" },\n  epic:      { label: \"Epic\",      className: \"bg-purple-500/85 text-white\" },\n  rare:      { label: \"Rare\",      className: \"bg-blue-500/85 text-white\" },\n  uncommon:  { label: \"Uncommon\",  className: \"bg-emerald-500/85 text-white\" },\n  common:    null,\n};\n\nconst BTN_BASE = \"h-8 rounded-[11px] flex items-center justify-center gap-1.5 text-xs font-semibold transition-all active:scale-[0.98] shadow-none border-0\";\nconst BTN_SOLID = cn(BTN_BASE, \"text-white hover:brightness-110\");\nconst BTN_OUTLINE = cn(BTN_BASE, \"border border-border/60 text-foreground hover:bg-muted/60\");\n\nexport interface TokenCardProps {\n  token: ApiToken;\n  /** Whether the current user owns this token. Default: false */\n  isOwner?: boolean;\n  /** Whether this token's listing is already in the cart. Default: false */\n  inCart?: boolean;\n  /** Show the Buy button for listed tokens. Default: true */\n  showBuyButton?: boolean;\n  /** Optional rarity label shown as an overlay badge */\n  rarityTier?: RarityTier;\n  className?: string;\n  /** Callbacks — omit any to hide that button */\n  onBuy?: (token: ApiToken) => void;\n  onCart?: (token: ApiToken) => void;\n  onOffer?: (token: ApiToken) => void;\n  onList?: (token: ApiToken) => void;\n  onCancel?: (token: ApiToken) => void;\n  onTransfer?: (token: ApiToken) => void;\n  onRemix?: (token: ApiToken) => void;\n  onReport?: (token: ApiToken) => void;\n  /** Slot for a DropdownMenu trigger — rendered after primary buttons */\n  overflowMenu?: React.ReactNode;\n}\n\nexport function TokenCard({\n  token,\n  isOwner = false,\n  inCart = false,\n  showBuyButton = true,\n  rarityTier,\n  className,\n  onBuy,\n  onCart,\n  onOffer,\n  onList,\n  onCancel,\n  onTransfer,\n  overflowMenu,\n}: TokenCardProps) {\n  const [imgError, setImgError] = useState(false);\n\n  const name = token.metadata?.name || `Token #${token.tokenId}`;\n  const image = ipfsToHttp(token.metadata?.image);\n  const activeOrder = token.activeOrders?.[0];\n  const assetHref = `/asset/${token.contractAddress}/${token.tokenId}`;\n\n  const renderActions = () => {\n    // Non-owner + listed + showBuyButton\n    if (!isOwner && activeOrder && showBuyButton) {\n      return (\n        <>\n          {onBuy && (\n            <button\n              className={cn(BTN_SOLID, \"flex-1 bg-brand-purple\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBuy(token); }}\n            >\n              <Zap className=\"h-3.5 w-3.5 shrink-0\" />\n              Buy\n            </button>\n          )}\n          {onCart && (\n            <button\n              className={cn(\n                BTN_OUTLINE, \"w-8 shrink-0\",\n                inCart && \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n              )}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onCart(token); }}\n              disabled={inCart}\n              aria-label={inCart ? \"In cart\" : \"Add to cart\"}\n            >\n              {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n            </button>\n          )}\n          {onOffer && (\n            <button\n              className={cn(BTN_OUTLINE, \"w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onOffer(token); }}\n              aria-label=\"Make an offer\"\n            >\n              <HandCoins className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </>\n      );\n    }\n\n    // Non-owner + no listing (or showBuyButton=false)\n    if (!isOwner) {\n      if (!onOffer) return null;\n      return (\n        <>\n          <Link href={assetHref} className={cn(BTN_OUTLINE, \"flex-1\")}>\n            <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" />\n            View\n          </Link>\n          <button\n            className={cn(BTN_OUTLINE, \"w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10\")}\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onOffer(token); }}\n            aria-label=\"Make an offer\"\n          >\n            <HandCoins className=\"h-3.5 w-3.5\" />\n          </button>\n        </>\n      );\n    }\n\n    // Owner + listed\n    if (isOwner && activeOrder) {\n      if (!onCancel) return null;\n      return (\n        <>\n          <button\n            className={cn(BTN_SOLID, \"flex-1 bg-brand-rose\")}\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onCancel(token); }}\n          >\n            <X className=\"h-3.5 w-3.5 shrink-0\" />\n            Cancel listing\n          </button>\n          {onTransfer && (\n            <button\n              className={cn(BTN_OUTLINE, \"w-8 shrink-0\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onTransfer(token); }}\n              aria-label=\"Transfer\"\n            >\n              <ArrowRightLeft className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </>\n      );\n    }\n\n    // Owner + unlisted\n    if (isOwner && !activeOrder) {\n      if (!onList) return null;\n      return (\n        <>\n          <button\n            className={cn(BTN_SOLID, \"flex-1 bg-brand-blue\")}\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onList(token); }}\n          >\n            <Tag className=\"h-3.5 w-3.5 shrink-0\" />\n            List for sale\n          </button>\n          {onTransfer && (\n            <button\n              className={cn(BTN_OUTLINE, \"w-8 shrink-0\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onTransfer(token); }}\n              aria-label=\"Transfer\"\n            >\n              <ArrowRightLeft className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </>\n      );\n    }\n\n    return null;\n  };\n\n  const actionContent = renderActions();\n  const showActionBar = actionContent != null || !!overflowMenu;\n\n  return (\n    <MotionCard className={cn(\"card-base group relative overflow-hidden flex flex-col\", className)}>\n      <Link href={assetHref} className=\"block relative shrink-0\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden\">\n          {!imgError ? (\n            <Image\n              src={image}\n              alt={name}\n              fill\n              unoptimized\n              sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n            />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n              <span className=\"text-2xl font-mono text-muted-foreground\">#{token.tokenId}</span>\n            </div>\n          )}\n\n          {token.metadata?.ipType && (\n            <div className=\"absolute top-2 left-2\">\n              <IpTypeBadge ipType={token.metadata.ipType as any} size=\"sm\" />\n            </div>\n          )}\n\n          {rarityTier && RARITY_STYLE[rarityTier] && (\n            <div className=\"absolute top-2 right-2 z-10\">\n              <span className={cn(\n                \"inline-flex items-center px-1.5 py-0.5 rounded-md backdrop-blur-sm text-[10px] font-bold leading-none\",\n                RARITY_STYLE[rarityTier]!.className\n              )}>\n                {RARITY_STYLE[rarityTier]!.label}\n              </span>\n            </div>\n          )}\n\n          {(token.metadataStatus === \"PENDING\" || token.metadataStatus === \"FETCHING\") && (\n            <div className=\"absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5\">\n              <Loader2 className=\"h-3 w-3 animate-spin text-white/70\" />\n              <span className=\"text-[10px] text-white/70\">Indexing…</span>\n            </div>\n          )}\n        </div>\n      </Link>\n\n      <div className=\"px-3 pt-2.5 pb-1 flex-1\">\n        <Link href={assetHref} className=\"block space-y-0.5 mb-2\">\n          <p className=\"text-xl font-bold line-clamp-2 leading-tight\">{name}</p>\n          {activeOrder && (\n            <p className=\"flex items-center gap-1 text-[11px] font-semibold text-foreground/80\">\n              <CurrencyIcon symbol={activeOrder.price.currency} size={11} />\n              {formatDisplayPrice(activeOrder.price.formatted)}\n              <span className=\"font-normal text-muted-foreground\">{activeOrder.price.currency}</span>\n            </p>\n          )}\n          {token.metadata?.description ? (\n            <p className=\"text-[10px] text-muted-foreground truncate leading-snug\">\n              {token.metadata.description}\n            </p>\n          ) : token.metadata?.ipType ? (\n            <p className=\"text-[10px] text-muted-foreground opacity-70\">{token.metadata.ipType}</p>\n          ) : null}\n        </Link>\n      </div>\n\n      {showActionBar && (\n        <div className=\"flex items-center gap-1.5 px-2 pb-2\">\n          {actionContent}\n          {overflowMenu}\n        </div>\n      )}\n    </MotionCard>\n  );\n}\n\nexport function TokenCardSkeleton() {\n  return (\n    <div className=\"card-base overflow-hidden\">\n      <div className=\"aspect-square w-full animate-pulse bg-muted\" />\n      <div className=\"px-3 pt-2.5 pb-2 space-y-1.5\">\n        <div className=\"h-5 w-3/4 rounded-md animate-pulse bg-muted\" />\n        <div className=\"h-2.5 w-2/5 rounded-md animate-pulse bg-muted\" />\n      </div>\n      <div className=\"px-2 pb-2 flex gap-1.5\">\n        <div className=\"h-8 flex-1 rounded-[11px] animate-pulse bg-muted\" />\n        <div className=\"h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0\" />\n        <div className=\"h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.cjs

@@ -20,15 +20,28 @@ var index_exports = {};
 __export(index_exports, {
   AddressDisplay: () => import_address_display.AddressDisplay,
   BRAND: () => import_brand.BRAND,
+  CollectionCard: () => import_collection_card.CollectionCard,
+  CollectionCardSkeleton: () => import_collection_card.CollectionCardSkeleton,
   CurrencyAmount: () => import_currency_icon.CurrencyAmount,
   CurrencyIcon: () => import_currency_icon.CurrencyIcon,
+  EASE_OUT: () => import_motion_primitives.EASE_OUT,
+  FadeIn: () => import_motion_primitives.FadeIn,
   IP_TYPE_CONFIG: () => import_ip_type_badge.IP_TYPE_CONFIG,
   IP_TYPE_DATA: () => import_ip_types.IP_TYPE_DATA,
   IP_TYPE_DATA_MAP: () => import_ip_types.IP_TYPE_DATA_MAP,
   IP_TYPE_MAP: () => import_ip_type_badge.IP_TYPE_MAP,
   IpTypeBadge: () => import_ip_type_badge.IpTypeBadge,
+  KineticWords: () => import_motion_primitives.KineticWords,
   MedialaneIcon: () => import_brand_icon.MedialaneIcon,
   MedialaneLogoFull: () => import_brand_logo.MedialaneLogoFull,
+  MotionCard: () => import_motion_primitives.MotionCard,
+  SPRING: () => import_motion_primitives.SPRING,
+  ScrollSection: () => import_scroll_section.ScrollSection,
+  ShareButton: () => import_share_button.ShareButton,
+  Stagger: () => import_motion_primitives.Stagger,
+  StaggerItem: () => import_motion_primitives.StaggerItem,
+  TokenCard: () => import_token_card.TokenCard,
+  TokenCardSkeleton: () => import_token_card.TokenCardSkeleton,
   cn: () => import_cn.cn,
   formatDisplayPrice: () => import_format.formatDisplayPrice,
   ipfsToHttp: () => import_ipfs.ipfsToHttp,
@@ -46,19 +59,37 @@ var import_ip_type_badge = require("./components/ip-type-badge.js");
 var import_address_display = require("./components/address-display.js");
 var import_brand_icon = require("./components/brand-icon.js");
 var import_brand_logo = require("./components/brand-logo.js");
+var import_motion_primitives = require("./components/motion-primitives.js");
+var import_scroll_section = require("./components/scroll-section.js");
+var import_share_button = require("./components/share-button.js");
+var import_collection_card = require("./components/collection-card.js");
+var import_token_card = require("./components/token-card.js");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddressDisplay,
   BRAND,
+  CollectionCard,
+  CollectionCardSkeleton,
   CurrencyAmount,
   CurrencyIcon,
+  EASE_OUT,
+  FadeIn,
   IP_TYPE_CONFIG,
   IP_TYPE_DATA,
   IP_TYPE_DATA_MAP,
   IP_TYPE_MAP,
   IpTypeBadge,
+  KineticWords,
   MedialaneIcon,
   MedialaneLogoFull,
+  MotionCard,
+  SPRING,
+  ScrollSection,
+  ShareButton,
+  Stagger,
+  StaggerItem,
+  TokenCard,
+  TokenCardSkeleton,
   cn,
   formatDisplayPrice,
   ipfsToHttp,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// ── Utils ─────────────────────────────────────────────────────────────────────\nexport { cn } from \"./utils/cn.js\";\nexport { formatDisplayPrice } from \"./utils/format.js\";\nexport { shortenAddress } from \"./utils/address.js\";\nexport { ipfsToHttp } from \"./utils/ipfs.js\";\n\n// ── Data (server-safe — no React, safe in Server Components) ──────────────────\nexport { IP_TYPE_DATA, IP_TYPE_DATA_MAP } from \"./data/ip-types.js\";\nexport type { IpTypeData } from \"./data/ip-types.js\";\nexport { BRAND } from \"./data/brand.js\";\n\n// ── Components (client-only — all have \"use client\") ─────────────────────────\nexport { CurrencyIcon, CurrencyAmount } from \"./components/currency-icon.js\";\nexport type { CurrencyIconProps, CurrencyAmountProps } from \"./components/currency-icon.js\";\n\nexport { IpTypeBadge, IP_TYPE_CONFIG, IP_TYPE_MAP } from \"./components/ip-type-badge.js\";\nexport type { IpTypeBadgeProps, IpTypeConfig } from \"./components/ip-type-badge.js\";\n\nexport { AddressDisplay } from \"./components/address-display.js\";\nexport type { AddressDisplayProps } from \"./components/address-display.js\";\n\nexport { MedialaneIcon } from \"./components/brand-icon.js\";\nexport type { MedialaneIconProps } from \"./components/brand-icon.js\";\nexport { MedialaneLogoFull } from \"./components/brand-logo.js\";\nexport type { MedialaneLogoFullProps } from \"./components/brand-logo.js\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,gBAAmB;AACnB,oBAAmC;AACnC,qBAA+B;AAC/B,kBAA2B;AAG3B,sBAA+C;AAE/C,mBAAsB;AAGtB,2BAA6C;AAG7C,2BAAyD;AAGzD,6BAA+B;AAG/B,wBAA8B;AAE9B,wBAAkC;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// ── Utils ─────────────────────────────────────────────────────────────────────\nexport { cn } from \"./utils/cn.js\";\nexport { formatDisplayPrice } from \"./utils/format.js\";\nexport { shortenAddress } from \"./utils/address.js\";\nexport { ipfsToHttp } from \"./utils/ipfs.js\";\n\n// ── Data (server-safe — no React, safe in Server Components) ──────────────────\nexport { IP_TYPE_DATA, IP_TYPE_DATA_MAP } from \"./data/ip-types.js\";\nexport type { IpTypeData } from \"./data/ip-types.js\";\nexport { BRAND } from \"./data/brand.js\";\n\n// ── Components (client-only — all have \"use client\") ─────────────────────────\nexport { CurrencyIcon, CurrencyAmount } from \"./components/currency-icon.js\";\nexport type { CurrencyIconProps, CurrencyAmountProps } from \"./components/currency-icon.js\";\n\nexport { IpTypeBadge, IP_TYPE_CONFIG, IP_TYPE_MAP } from \"./components/ip-type-badge.js\";\nexport type { IpTypeBadgeProps, IpTypeConfig } from \"./components/ip-type-badge.js\";\n\nexport { AddressDisplay } from \"./components/address-display.js\";\nexport type { AddressDisplayProps } from \"./components/address-display.js\";\n\nexport { MedialaneIcon } from \"./components/brand-icon.js\";\nexport type { MedialaneIconProps } from \"./components/brand-icon.js\";\nexport { MedialaneLogoFull } from \"./components/brand-logo.js\";\nexport type { MedialaneLogoFullProps } from \"./components/brand-logo.js\";\n\n// ── v0.2 additions ────────────────────────────────────────────────────────────\nexport { MotionCard, FadeIn, Stagger, StaggerItem, KineticWords, SPRING, EASE_OUT } from \"./components/motion-primitives.js\";\nexport { ScrollSection } from \"./components/scroll-section.js\";\nexport type { ScrollSectionProps } from \"./components/scroll-section.js\";\nexport { ShareButton } from \"./components/share-button.js\";\nexport type { ShareButtonProps } from \"./components/share-button.js\";\nexport { CollectionCard, CollectionCardSkeleton } from \"./components/collection-card.js\";\nexport type { CollectionCardProps } from \"./components/collection-card.js\";\nexport { TokenCard, TokenCardSkeleton } from \"./components/token-card.js\";\nexport type { TokenCardProps, RarityTier } from \"./components/token-card.js\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,gBAAmB;AACnB,oBAAmC;AACnC,qBAA+B;AAC/B,kBAA2B;AAG3B,sBAA+C;AAE/C,mBAAsB;AAGtB,2BAA6C;AAG7C,2BAAyD;AAGzD,6BAA+B;AAG/B,wBAA8B;AAE9B,wBAAkC;AAIlC,+BAAyF;AACzF,4BAA8B;AAE9B,0BAA4B;AAE5B,6BAAuD;AAEvD,wBAA6C;","names":[]}

package/dist/index.d.cts

@@ -9,5 +9,12 @@ export { IP_TYPE_CONFIG, IP_TYPE_MAP, IpTypeBadge, IpTypeBadgeProps, IpTypeConfi
 export { AddressDisplay, AddressDisplayProps } from './components/address-display.cjs';
 export { MedialaneIcon, MedialaneIconProps } from './components/brand-icon.cjs';
 export { MedialaneLogoFull, MedialaneLogoFullProps } from './components/brand-logo.cjs';
+export { EASE_OUT, FadeIn, KineticWords, MotionCard, SPRING, Stagger, StaggerItem } from './components/motion-primitives.cjs';
+export { ScrollSection, ScrollSectionProps } from './components/scroll-section.cjs';
+export { ShareButton, ShareButtonProps } from './components/share-button.cjs';
+export { CollectionCard, CollectionCardProps, CollectionCardSkeleton } from './components/collection-card.cjs';
+export { RarityTier, TokenCard, TokenCardProps, TokenCardSkeleton } from './components/token-card.cjs';
 import 'clsx';
 import 'react/jsx-runtime';
+import 'framer-motion';
+import '@medialane/sdk';

package/dist/index.d.ts

@@ -9,5 +9,12 @@ export { IP_TYPE_CONFIG, IP_TYPE_MAP, IpTypeBadge, IpTypeBadgeProps, IpTypeConfi
 export { AddressDisplay, AddressDisplayProps } from './components/address-display.js';
 export { MedialaneIcon, MedialaneIconProps } from './components/brand-icon.js';
 export { MedialaneLogoFull, MedialaneLogoFullProps } from './components/brand-logo.js';
+export { EASE_OUT, FadeIn, KineticWords, MotionCard, SPRING, Stagger, StaggerItem } from './components/motion-primitives.js';
+export { ScrollSection, ScrollSectionProps } from './components/scroll-section.js';
+export { ShareButton, ShareButtonProps } from './components/share-button.js';
+export { CollectionCard, CollectionCardProps, CollectionCardSkeleton } from './components/collection-card.js';
+export { RarityTier, TokenCard, TokenCardProps, TokenCardSkeleton } from './components/token-card.js';
 import 'clsx';
 import 'react/jsx-runtime';
+import 'framer-motion';
+import '@medialane/sdk';

package/dist/index.js

@@ -9,18 +9,36 @@ import { IpTypeBadge, IP_TYPE_CONFIG, IP_TYPE_MAP } from "./components/ip-type-b
 import { AddressDisplay } from "./components/address-display.js";
 import { MedialaneIcon } from "./components/brand-icon.js";
 import { MedialaneLogoFull } from "./components/brand-logo.js";
+import { MotionCard, FadeIn, Stagger, StaggerItem, KineticWords, SPRING, EASE_OUT } from "./components/motion-primitives.js";
+import { ScrollSection } from "./components/scroll-section.js";
+import { ShareButton } from "./components/share-button.js";
+import { CollectionCard, CollectionCardSkeleton } from "./components/collection-card.js";
+import { TokenCard, TokenCardSkeleton } from "./components/token-card.js";
 export {
   AddressDisplay,
   BRAND,
+  CollectionCard,
+  CollectionCardSkeleton,
   CurrencyAmount,
   CurrencyIcon,
+  EASE_OUT,
+  FadeIn,
   IP_TYPE_CONFIG,
   IP_TYPE_DATA,
   IP_TYPE_DATA_MAP,
   IP_TYPE_MAP,
   IpTypeBadge,
+  KineticWords,
   MedialaneIcon,
   MedialaneLogoFull,
+  MotionCard,
+  SPRING,
+  ScrollSection,
+  ShareButton,
+  Stagger,
+  StaggerItem,
+  TokenCard,
+  TokenCardSkeleton,
   cn,
   formatDisplayPrice,
   ipfsToHttp,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// ── Utils ─────────────────────────────────────────────────────────────────────\nexport { cn } from \"./utils/cn.js\";\nexport { formatDisplayPrice } from \"./utils/format.js\";\nexport { shortenAddress } from \"./utils/address.js\";\nexport { ipfsToHttp } from \"./utils/ipfs.js\";\n\n// ── Data (server-safe — no React, safe in Server Components) ──────────────────\nexport { IP_TYPE_DATA, IP_TYPE_DATA_MAP } from \"./data/ip-types.js\";\nexport type { IpTypeData } from \"./data/ip-types.js\";\nexport { BRAND } from \"./data/brand.js\";\n\n// ── Components (client-only — all have \"use client\") ─────────────────────────\nexport { CurrencyIcon, CurrencyAmount } from \"./components/currency-icon.js\";\nexport type { CurrencyIconProps, CurrencyAmountProps } from \"./components/currency-icon.js\";\n\nexport { IpTypeBadge, IP_TYPE_CONFIG, IP_TYPE_MAP } from \"./components/ip-type-badge.js\";\nexport type { IpTypeBadgeProps, IpTypeConfig } from \"./components/ip-type-badge.js\";\n\nexport { AddressDisplay } from \"./components/address-display.js\";\nexport type { AddressDisplayProps } from \"./components/address-display.js\";\n\nexport { MedialaneIcon } from \"./components/brand-icon.js\";\nexport type { MedialaneIconProps } from \"./components/brand-icon.js\";\nexport { MedialaneLogoFull } from \"./components/brand-logo.js\";\nexport type { MedialaneLogoFullProps } from \"./components/brand-logo.js\";\n"],"mappings":"AACA,SAAS,UAAU;AACnB,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAG3B,SAAS,cAAc,wBAAwB;AAE/C,SAAS,aAAa;AAGtB,SAAS,cAAc,sBAAsB;AAG7C,SAAS,aAAa,gBAAgB,mBAAmB;AAGzD,SAAS,sBAAsB;AAG/B,SAAS,qBAAqB;AAE9B,SAAS,yBAAyB;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// ── Utils ─────────────────────────────────────────────────────────────────────\nexport { cn } from \"./utils/cn.js\";\nexport { formatDisplayPrice } from \"./utils/format.js\";\nexport { shortenAddress } from \"./utils/address.js\";\nexport { ipfsToHttp } from \"./utils/ipfs.js\";\n\n// ── Data (server-safe — no React, safe in Server Components) ──────────────────\nexport { IP_TYPE_DATA, IP_TYPE_DATA_MAP } from \"./data/ip-types.js\";\nexport type { IpTypeData } from \"./data/ip-types.js\";\nexport { BRAND } from \"./data/brand.js\";\n\n// ── Components (client-only — all have \"use client\") ─────────────────────────\nexport { CurrencyIcon, CurrencyAmount } from \"./components/currency-icon.js\";\nexport type { CurrencyIconProps, CurrencyAmountProps } from \"./components/currency-icon.js\";\n\nexport { IpTypeBadge, IP_TYPE_CONFIG, IP_TYPE_MAP } from \"./components/ip-type-badge.js\";\nexport type { IpTypeBadgeProps, IpTypeConfig } from \"./components/ip-type-badge.js\";\n\nexport { AddressDisplay } from \"./components/address-display.js\";\nexport type { AddressDisplayProps } from \"./components/address-display.js\";\n\nexport { MedialaneIcon } from \"./components/brand-icon.js\";\nexport type { MedialaneIconProps } from \"./components/brand-icon.js\";\nexport { MedialaneLogoFull } from \"./components/brand-logo.js\";\nexport type { MedialaneLogoFullProps } from \"./components/brand-logo.js\";\n\n// ── v0.2 additions ────────────────────────────────────────────────────────────\nexport { MotionCard, FadeIn, Stagger, StaggerItem, KineticWords, SPRING, EASE_OUT } from \"./components/motion-primitives.js\";\nexport { ScrollSection } from \"./components/scroll-section.js\";\nexport type { ScrollSectionProps } from \"./components/scroll-section.js\";\nexport { ShareButton } from \"./components/share-button.js\";\nexport type { ShareButtonProps } from \"./components/share-button.js\";\nexport { CollectionCard, CollectionCardSkeleton } from \"./components/collection-card.js\";\nexport type { CollectionCardProps } from \"./components/collection-card.js\";\nexport { TokenCard, TokenCardSkeleton } from \"./components/token-card.js\";\nexport type { TokenCardProps, RarityTier } from \"./components/token-card.js\";\n"],"mappings":"AACA,SAAS,UAAU;AACnB,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAG3B,SAAS,cAAc,wBAAwB;AAE/C,SAAS,aAAa;AAGtB,SAAS,cAAc,sBAAsB;AAG7C,SAAS,aAAa,gBAAgB,mBAAmB;AAGzD,SAAS,sBAAsB;AAG/B,SAAS,qBAAqB;AAE9B,SAAS,yBAAyB;AAIlC,SAAS,YAAY,QAAQ,SAAS,aAAa,cAAc,QAAQ,gBAAgB;AACzF,SAAS,qBAAqB;AAE9B,SAAS,mBAAmB;AAE5B,SAAS,gBAAgB,8BAA8B;AAEvD,SAAS,WAAW,yBAAyB;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -35,20 +35,26 @@
     "next-themes": ">=0.3.0",
     "lucide-react": ">=0.400.0",
     "tailwind-merge": ">=2.0.0",
-    "clsx": ">=2.0.0"
+    "clsx": ">=2.0.0",
+    "framer-motion": ">=10.0.0",
+    "sonner": ">=1.0.0",
+    "@medialane/sdk": ">=0.6.0"
   },
   "devDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "@medialane/sdk": "^0.6.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "clsx": "^2.0.0",
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.400.0",
     "next": "^15.0.0",
     "next-themes": "^0.4.0",
-    "lucide-react": "^0.400.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^1.5.0",
     "tailwind-merge": "^2.0.0",
-    "clsx": "^2.0.0",
     "tailwindcss": "^3.0.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.6.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0"
+    "typescript": "^5.6.0"
   }
 }