@medialane/ui 0.125.7 → 0.126.1

package/dist/components/asset-top-sections.cjs

@@ -37,8 +37,10 @@ __export(asset_top_sections_exports, {
 module.exports = __toCommonJS(asset_top_sections_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_link = __toESM(require("next/link"), 1);
+var import_react = require("react");
 var import_framer_motion = require("framer-motion");
 var import_use_intersection_active = require("../utils/use-intersection-active.js");
+var import_cn = require("../utils/cn.js");
 var import_address_display = require("./address-display.js");
 var import_parent_attribution_banner = require("./parent-attribution-banner.js");
 var import_ip_type_badge = require("./ip-type-badge.js");
@@ -56,7 +58,19 @@ function AssetMediaColumn({
   stats
 }) {
   const [ref, isVisible] = (0, import_use_intersection_active.useIntersectionActive)();
+  const [loaded, setLoaded] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => setLoaded(false), [image]);
   const showLive = live && !!animationUrl && isVisible;
+  const shimmer = !loaded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "absolute inset-0 min-h-80 animate-[shimmer_1.6s_ease-in-out_infinite] bg-foreground/[0.06]",
+      style: {
+        backgroundImage: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--foreground) 8%, transparent), transparent)",
+        backgroundSize: "200% 100%"
+      }
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: "w-full lg:sticky lg:top-16", children: [
     showLive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-hidden rounded-3xl aspect-square", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "iframe",
@@ -67,7 +81,7 @@ function AssetMediaColumn({
         loading: "lazy",
         className: "w-full h-full border-0"
       }
-    ) }) : !image || imgError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-hidden rounded-3xl", children: fallback }) : onZoom ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ) }) : !image || imgError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-hidden rounded-3xl", children: fallback }) : onZoom ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_framer_motion.motion.button,
       {
         type: "button",
@@ -76,35 +90,50 @@ function AssetMediaColumn({
         initial: shouldReduce ? false : { opacity: 0, scale: 0.98 },
         animate: { opacity: 1, scale: 1 },
         transition: { duration: 0.5 },
-        className: "group block w-full overflow-hidden rounded-3xl cursor-zoom-in focus:outline-none",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "img",
-          {
-            src: image,
-            alt: imageAlt,
-            crossOrigin: "anonymous",
-            onError: onImageError,
-            className: "w-full h-auto max-h-[80vh] object-contain\n                       transition duration-300 group-hover:opacity-95 group-active:scale-[0.99]"
-          }
-        )
+        className: "group relative block w-full overflow-hidden rounded-3xl cursor-zoom-in focus:outline-none",
+        children: [
+          shimmer,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: image,
+              alt: imageAlt,
+              crossOrigin: "anonymous",
+              onLoad: () => setLoaded(true),
+              onError: onImageError,
+              className: (0, import_cn.cn)(
+                "w-full h-auto max-h-[80vh] object-contain",
+                "transition-opacity duration-300 group-hover:opacity-95 group-active:scale-[0.99]",
+                loaded ? "opacity-100" : "opacity-0"
+              )
+            }
+          )
+        ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_framer_motion.motion.div,
       {
         initial: shouldReduce ? false : { opacity: 0, scale: 0.98 },
         animate: { opacity: 1, scale: 1 },
         transition: { duration: 0.5 },
-        className: "block w-full overflow-hidden rounded-3xl",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "img",
-          {
-            src: image,
-            alt: imageAlt,
-            crossOrigin: "anonymous",
-            onError: onImageError,
-            className: "w-full h-auto max-h-[80vh] object-contain"
-          }
-        )
+        className: "relative block w-full overflow-hidden rounded-3xl",
+        children: [
+          shimmer,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: image,
+              alt: imageAlt,
+              crossOrigin: "anonymous",
+              onLoad: () => setLoaded(true),
+              onError: onImageError,
+              className: (0, import_cn.cn)(
+                "w-full h-auto max-h-[80vh] object-contain transition-opacity duration-300",
+                loaded ? "opacity-100" : "opacity-0"
+              )
+            }
+          )
+        ]
       }
     ),
     stats && stats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `grid gap-3 mt-4 ${stats.length === 2 ? "grid-cols-2" : "grid-cols-1"}`, children: stats.map((stat) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl border border-border bg-muted/20 p-4 text-center", children: [

package/dist/components/asset-top-sections.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/asset-top-sections.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { motion } from \"framer-motion\";\nimport { useIntersectionActive } from \"../utils/use-intersection-active.js\";\nimport { AddressDisplay } from \"./address-display.js\";\nimport { ParentAttributionBanner } from \"./parent-attribution-banner.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\nimport { Layers, Users } from \"lucide-react\";\n\ninterface AssetMediaColumnProps {\n  shouldReduce: boolean;\n  image: string | null;\n  imageAlt: string;\n  imgError: boolean;\n  onImageError: () => void;\n  fallback: React.ReactNode;\n\n  onZoom?: () => void;\n\n  animationUrl?: string | null;\n\n  live?: boolean;\n  stats?: Array<{\n    value: string;\n    label: string;\n    icon: React.ReactNode;\n  }>;\n}\n\nexport function AssetMediaColumn({\n  shouldReduce,\n  image,\n  imageAlt,\n  imgError,\n  onImageError,\n  fallback,\n  onZoom,\n  animationUrl,\n  live = false,\n  stats,\n}: AssetMediaColumnProps) {\n  const [ref, isVisible] = useIntersectionActive<HTMLDivElement>();\n  const showLive = live && !!animationUrl && isVisible;\n\n  return (\n    <div ref={ref} className=\"w-full lg:sticky lg:top-16\">\n      {showLive ? (\n        <div className=\"w-full overflow-hidden rounded-3xl aspect-square\">\n          <iframe\n            src={animationUrl!}\n            title={imageAlt}\n            sandbox=\"allow-scripts\"\n            loading=\"lazy\"\n            className=\"w-full h-full border-0\"\n          />\n        </div>\n      ) : !image || imgError ? (\n        <div className=\"w-full overflow-hidden rounded-3xl\">{fallback}</div>\n      ) : onZoom ? (\n        <motion.button\n          type=\"button\"\n          onClick={onZoom}\n          aria-label=\"View full image\"\n          initial={shouldReduce ? false : { opacity: 0, scale: 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5 }}\n          className=\"group block w-full overflow-hidden rounded-3xl cursor-zoom-in focus:outline-none\"\n        >\n\n          <img\n            src={image}\n            alt={imageAlt}\n            crossOrigin=\"anonymous\"\n            onError={onImageError}\n            className=\"w-full h-auto max-h-[80vh] object-contain\n                       transition duration-300 group-hover:opacity-95 group-active:scale-[0.99]\"\n          />\n        </motion.button>\n      ) : (\n        <motion.div\n          initial={shouldReduce ? false : { opacity: 0, scale: 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5 }}\n          className=\"block w-full overflow-hidden rounded-3xl\"\n        >\n\n          <img\n            src={image}\n            alt={imageAlt}\n            crossOrigin=\"anonymous\"\n            onError={onImageError}\n            className=\"w-full h-auto max-h-[80vh] object-contain\"\n          />\n        </motion.div>\n      )}\n\n      {stats && stats.length > 0 ? (\n        <div className={`grid gap-3 mt-4 ${stats.length === 2 ? \"grid-cols-2\" : \"grid-cols-1\"}`}>\n          {stats.map((stat) => (\n            <div key={stat.label} className=\"rounded-xl border border-border bg-muted/20 p-4 text-center\">\n              <p className=\"text-2xl font-black\">{stat.value}</p>\n              <div className=\"flex items-center justify-center gap-1 text-xs text-muted-foreground mt-1\">\n                {stat.icon}\n                {stat.label}\n              </div>\n            </div>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\ninterface AssetHeaderBlockProps {\n  name: string;\n  description?: string | null;\n  ipType?: string | null;\n  showMultiEditionBadge?: boolean;\n  parentContract?: string | null;\n  parentTokenId?: string | null;\n}\n\nexport function AssetHeaderBlock({\n  name,\n  description,\n  ipType,\n  showMultiEditionBadge = false,\n  parentContract,\n  parentTokenId,\n}: AssetHeaderBlockProps) {\n  return (\n    <div className=\"min-w-0 flex-1\">\n      {ipType || showMultiEditionBadge ? (\n        <div className=\"flex items-center gap-2 flex-wrap mb-2\">\n          {ipType ? <IpTypeBadge ipType={ipType} size=\"md\" /> : null}\n          {showMultiEditionBadge ? (\n            <span className=\"inline-flex items-center gap-1 text-2xs font-semibold px-2.5 py-1 rounded-full border border-violet-500/30 bg-violet-500/10 text-violet-500\">\n              <Layers className=\"h-3 w-3\" />\n              Multi-edition\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      {parentContract && parentTokenId ? (\n        <div className=\"mb-3\">\n          <ParentAttributionBanner\n            parentContract={parentContract}\n            parentTokenId={parentTokenId}\n            parentName={`Token #${parentTokenId}`}\n          />\n        </div>\n      ) : null}\n      <h1 className=\"text-2xl lg:text-4xl font-bold break-words\">{name}</h1>\n      {description ? (\n        <p className=\"text-sm text-muted-foreground leading-relaxed mt-1\">{description}</p>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface AssetOwnerRowProps {\n  ownerAddress: string;\n  ownerHref: string;\n}\n\nexport function AssetOwnerRow({ ownerAddress, ownerHref }: AssetOwnerRowProps) {\n  return (\n    <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n      <span>Owner</span>\n      <Link href={ownerHref} className=\"hover:text-primary transition-colors font-medium\">\n        <AddressDisplay address={ownerAddress} />\n      </Link>\n    </div>\n  );\n}\n\nexport function buildEditionStats(totalEditions: number, uniqueOwners: number) {\n  return [\n    {\n      value: totalEditions.toLocaleString(),\n      label: \"editions minted\",\n      icon: <Layers className=\"h-3 w-3\" />,\n    },\n    {\n      value: uniqueOwners.toLocaleString(),\n      label: \"unique owners\",\n      icon: <Users className=\"h-3 w-3\" />,\n    },\n  ];\n}\n"],"mappings":"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","names":["Link"]}
+{"version":3,"sources":["../../src/components/asset-top-sections.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { useEffect, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { useIntersectionActive } from \"../utils/use-intersection-active.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { AddressDisplay } from \"./address-display.js\";\nimport { ParentAttributionBanner } from \"./parent-attribution-banner.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\nimport { Layers, Users } from \"lucide-react\";\n\ninterface AssetMediaColumnProps {\n  shouldReduce: boolean;\n  image: string | null;\n  imageAlt: string;\n  imgError: boolean;\n  onImageError: () => void;\n  fallback: React.ReactNode;\n\n  onZoom?: () => void;\n\n  animationUrl?: string | null;\n\n  live?: boolean;\n  stats?: Array<{\n    value: string;\n    label: string;\n    icon: React.ReactNode;\n  }>;\n}\n\nexport function AssetMediaColumn({\n  shouldReduce,\n  image,\n  imageAlt,\n  imgError,\n  onImageError,\n  fallback,\n  onZoom,\n  animationUrl,\n  live = false,\n  stats,\n}: AssetMediaColumnProps) {\n  const [ref, isVisible] = useIntersectionActive<HTMLDivElement>();\n  const [loaded, setLoaded] = useState(false);\n  useEffect(() => setLoaded(false), [image]);\n  const showLive = live && !!animationUrl && isVisible;\n\n  const shimmer = !loaded && (\n    <div\n      className=\"absolute inset-0 min-h-80 animate-[shimmer_1.6s_ease-in-out_infinite] bg-foreground/[0.06]\"\n      style={{\n        backgroundImage:\n          \"linear-gradient(90deg, transparent, color-mix(in srgb, var(--foreground) 8%, transparent), transparent)\",\n        backgroundSize: \"200% 100%\",\n      }}\n    />\n  );\n\n  return (\n    <div ref={ref} className=\"w-full lg:sticky lg:top-16\">\n      {showLive ? (\n        <div className=\"w-full overflow-hidden rounded-3xl aspect-square\">\n          <iframe\n            src={animationUrl!}\n            title={imageAlt}\n            sandbox=\"allow-scripts\"\n            loading=\"lazy\"\n            className=\"w-full h-full border-0\"\n          />\n        </div>\n      ) : !image || imgError ? (\n        <div className=\"w-full overflow-hidden rounded-3xl\">{fallback}</div>\n      ) : onZoom ? (\n        <motion.button\n          type=\"button\"\n          onClick={onZoom}\n          aria-label=\"View full image\"\n          initial={shouldReduce ? false : { opacity: 0, scale: 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5 }}\n          className=\"group relative block w-full overflow-hidden rounded-3xl cursor-zoom-in focus:outline-none\"\n        >\n          {shimmer}\n          <img\n            src={image}\n            alt={imageAlt}\n            crossOrigin=\"anonymous\"\n            onLoad={() => setLoaded(true)}\n            onError={onImageError}\n            className={cn(\n              \"w-full h-auto max-h-[80vh] object-contain\",\n              \"transition-opacity duration-300 group-hover:opacity-95 group-active:scale-[0.99]\",\n              loaded ? \"opacity-100\" : \"opacity-0\"\n            )}\n          />\n        </motion.button>\n      ) : (\n        <motion.div\n          initial={shouldReduce ? false : { opacity: 0, scale: 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5 }}\n          className=\"relative block w-full overflow-hidden rounded-3xl\"\n        >\n          {shimmer}\n          <img\n            src={image}\n            alt={imageAlt}\n            crossOrigin=\"anonymous\"\n            onLoad={() => setLoaded(true)}\n            onError={onImageError}\n            className={cn(\n              \"w-full h-auto max-h-[80vh] object-contain transition-opacity duration-300\",\n              loaded ? \"opacity-100\" : \"opacity-0\"\n            )}\n          />\n        </motion.div>\n      )}\n\n      {stats && stats.length > 0 ? (\n        <div className={`grid gap-3 mt-4 ${stats.length === 2 ? \"grid-cols-2\" : \"grid-cols-1\"}`}>\n          {stats.map((stat) => (\n            <div key={stat.label} className=\"rounded-xl border border-border bg-muted/20 p-4 text-center\">\n              <p className=\"text-2xl font-black\">{stat.value}</p>\n              <div className=\"flex items-center justify-center gap-1 text-xs text-muted-foreground mt-1\">\n                {stat.icon}\n                {stat.label}\n              </div>\n            </div>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\ninterface AssetHeaderBlockProps {\n  name: string;\n  description?: string | null;\n  ipType?: string | null;\n  showMultiEditionBadge?: boolean;\n  parentContract?: string | null;\n  parentTokenId?: string | null;\n}\n\nexport function AssetHeaderBlock({\n  name,\n  description,\n  ipType,\n  showMultiEditionBadge = false,\n  parentContract,\n  parentTokenId,\n}: AssetHeaderBlockProps) {\n  return (\n    <div className=\"min-w-0 flex-1\">\n      {ipType || showMultiEditionBadge ? (\n        <div className=\"flex items-center gap-2 flex-wrap mb-2\">\n          {ipType ? <IpTypeBadge ipType={ipType} size=\"md\" /> : null}\n          {showMultiEditionBadge ? (\n            <span className=\"inline-flex items-center gap-1 text-2xs font-semibold px-2.5 py-1 rounded-full border border-violet-500/30 bg-violet-500/10 text-violet-500\">\n              <Layers className=\"h-3 w-3\" />\n              Multi-edition\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      {parentContract && parentTokenId ? (\n        <div className=\"mb-3\">\n          <ParentAttributionBanner\n            parentContract={parentContract}\n            parentTokenId={parentTokenId}\n            parentName={`Token #${parentTokenId}`}\n          />\n        </div>\n      ) : null}\n      <h1 className=\"text-2xl lg:text-4xl font-bold break-words\">{name}</h1>\n      {description ? (\n        <p className=\"text-sm text-muted-foreground leading-relaxed mt-1\">{description}</p>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface AssetOwnerRowProps {\n  ownerAddress: string;\n  ownerHref: string;\n}\n\nexport function AssetOwnerRow({ ownerAddress, ownerHref }: AssetOwnerRowProps) {\n  return (\n    <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n      <span>Owner</span>\n      <Link href={ownerHref} className=\"hover:text-primary transition-colors font-medium\">\n        <AddressDisplay address={ownerAddress} />\n      </Link>\n    </div>\n  );\n}\n\nexport function buildEditionStats(totalEditions: number, uniqueOwners: number) {\n  return [\n    {\n      value: totalEditions.toLocaleString(),\n      label: \"editions minted\",\n      icon: <Layers className=\"h-3 w-3\" />,\n    },\n    {\n      value: uniqueOwners.toLocaleString(),\n      label: \"unique owners\",\n      icon: <Users className=\"h-3 w-3\" />,\n    },\n  ];\n}\n"],"mappings":"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","names":["Link"]}

package/dist/components/asset-top-sections.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import { useIntersectionActive } from "../utils/use-intersection-active.js";
+import { cn } from "../utils/cn.js";
 import { AddressDisplay } from "./address-display.js";
 import { ParentAttributionBanner } from "./parent-attribution-banner.js";
 import { IpTypeBadge } from "./ip-type-badge.js";
@@ -20,7 +22,19 @@ function AssetMediaColumn({
   stats
 }) {
   const [ref, isVisible] = useIntersectionActive();
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => setLoaded(false), [image]);
   const showLive = live && !!animationUrl && isVisible;
+  const shimmer = !loaded && /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute inset-0 min-h-80 animate-[shimmer_1.6s_ease-in-out_infinite] bg-foreground/[0.06]",
+      style: {
+        backgroundImage: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--foreground) 8%, transparent), transparent)",
+        backgroundSize: "200% 100%"
+      }
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { ref, className: "w-full lg:sticky lg:top-16", children: [
     showLive ? /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden rounded-3xl aspect-square", children: /* @__PURE__ */ jsx(
       "iframe",
@@ -31,7 +45,7 @@ function AssetMediaColumn({
         loading: "lazy",
         className: "w-full h-full border-0"
       }
-    ) }) : !image || imgError ? /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden rounded-3xl", children: fallback }) : onZoom ? /* @__PURE__ */ jsx(
+    ) }) : !image || imgError ? /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden rounded-3xl", children: fallback }) : onZoom ? /* @__PURE__ */ jsxs(
       motion.button,
       {
         type: "button",
@@ -40,35 +54,50 @@ function AssetMediaColumn({
         initial: shouldReduce ? false : { opacity: 0, scale: 0.98 },
         animate: { opacity: 1, scale: 1 },
         transition: { duration: 0.5 },
-        className: "group block w-full overflow-hidden rounded-3xl cursor-zoom-in focus:outline-none",
-        children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: image,
-            alt: imageAlt,
-            crossOrigin: "anonymous",
-            onError: onImageError,
-            className: "w-full h-auto max-h-[80vh] object-contain\n                       transition duration-300 group-hover:opacity-95 group-active:scale-[0.99]"
-          }
-        )
+        className: "group relative block w-full overflow-hidden rounded-3xl cursor-zoom-in focus:outline-none",
+        children: [
+          shimmer,
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: image,
+              alt: imageAlt,
+              crossOrigin: "anonymous",
+              onLoad: () => setLoaded(true),
+              onError: onImageError,
+              className: cn(
+                "w-full h-auto max-h-[80vh] object-contain",
+                "transition-opacity duration-300 group-hover:opacity-95 group-active:scale-[0.99]",
+                loaded ? "opacity-100" : "opacity-0"
+              )
+            }
+          )
+        ]
       }
-    ) : /* @__PURE__ */ jsx(
+    ) : /* @__PURE__ */ jsxs(
       motion.div,
       {
         initial: shouldReduce ? false : { opacity: 0, scale: 0.98 },
         animate: { opacity: 1, scale: 1 },
         transition: { duration: 0.5 },
-        className: "block w-full overflow-hidden rounded-3xl",
-        children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: image,
-            alt: imageAlt,
-            crossOrigin: "anonymous",
-            onError: onImageError,
-            className: "w-full h-auto max-h-[80vh] object-contain"
-          }
-        )
+        className: "relative block w-full overflow-hidden rounded-3xl",
+        children: [
+          shimmer,
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: image,
+              alt: imageAlt,
+              crossOrigin: "anonymous",
+              onLoad: () => setLoaded(true),
+              onError: onImageError,
+              className: cn(
+                "w-full h-auto max-h-[80vh] object-contain transition-opacity duration-300",
+                loaded ? "opacity-100" : "opacity-0"
+              )
+            }
+          )
+        ]
       }
     ),
     stats && stats.length > 0 ? /* @__PURE__ */ jsx("div", { className: `grid gap-3 mt-4 ${stats.length === 2 ? "grid-cols-2" : "grid-cols-1"}`, children: stats.map((stat) => /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-muted/20 p-4 text-center", children: [

package/dist/components/asset-top-sections.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/asset-top-sections.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { motion } from \"framer-motion\";\nimport { useIntersectionActive } from \"../utils/use-intersection-active.js\";\nimport { AddressDisplay } from \"./address-display.js\";\nimport { ParentAttributionBanner } from \"./parent-attribution-banner.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\nimport { Layers, Users } from \"lucide-react\";\n\ninterface AssetMediaColumnProps {\n  shouldReduce: boolean;\n  image: string | null;\n  imageAlt: string;\n  imgError: boolean;\n  onImageError: () => void;\n  fallback: React.ReactNode;\n\n  onZoom?: () => void;\n\n  animationUrl?: string | null;\n\n  live?: boolean;\n  stats?: Array<{\n    value: string;\n    label: string;\n    icon: React.ReactNode;\n  }>;\n}\n\nexport function AssetMediaColumn({\n  shouldReduce,\n  image,\n  imageAlt,\n  imgError,\n  onImageError,\n  fallback,\n  onZoom,\n  animationUrl,\n  live = false,\n  stats,\n}: AssetMediaColumnProps) {\n  const [ref, isVisible] = useIntersectionActive<HTMLDivElement>();\n  const showLive = live && !!animationUrl && isVisible;\n\n  return (\n    <div ref={ref} className=\"w-full lg:sticky lg:top-16\">\n      {showLive ? (\n        <div className=\"w-full overflow-hidden rounded-3xl aspect-square\">\n          <iframe\n            src={animationUrl!}\n            title={imageAlt}\n            sandbox=\"allow-scripts\"\n            loading=\"lazy\"\n            className=\"w-full h-full border-0\"\n          />\n        </div>\n      ) : !image || imgError ? (\n        <div className=\"w-full overflow-hidden rounded-3xl\">{fallback}</div>\n      ) : onZoom ? (\n        <motion.button\n          type=\"button\"\n          onClick={onZoom}\n          aria-label=\"View full image\"\n          initial={shouldReduce ? false : { opacity: 0, scale: 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5 }}\n          className=\"group block w-full overflow-hidden rounded-3xl cursor-zoom-in focus:outline-none\"\n        >\n\n          <img\n            src={image}\n            alt={imageAlt}\n            crossOrigin=\"anonymous\"\n            onError={onImageError}\n            className=\"w-full h-auto max-h-[80vh] object-contain\n                       transition duration-300 group-hover:opacity-95 group-active:scale-[0.99]\"\n          />\n        </motion.button>\n      ) : (\n        <motion.div\n          initial={shouldReduce ? false : { opacity: 0, scale: 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5 }}\n          className=\"block w-full overflow-hidden rounded-3xl\"\n        >\n\n          <img\n            src={image}\n            alt={imageAlt}\n            crossOrigin=\"anonymous\"\n            onError={onImageError}\n            className=\"w-full h-auto max-h-[80vh] object-contain\"\n          />\n        </motion.div>\n      )}\n\n      {stats && stats.length > 0 ? (\n        <div className={`grid gap-3 mt-4 ${stats.length === 2 ? \"grid-cols-2\" : \"grid-cols-1\"}`}>\n          {stats.map((stat) => (\n            <div key={stat.label} className=\"rounded-xl border border-border bg-muted/20 p-4 text-center\">\n              <p className=\"text-2xl font-black\">{stat.value}</p>\n              <div className=\"flex items-center justify-center gap-1 text-xs text-muted-foreground mt-1\">\n                {stat.icon}\n                {stat.label}\n              </div>\n            </div>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\ninterface AssetHeaderBlockProps {\n  name: string;\n  description?: string | null;\n  ipType?: string | null;\n  showMultiEditionBadge?: boolean;\n  parentContract?: string | null;\n  parentTokenId?: string | null;\n}\n\nexport function AssetHeaderBlock({\n  name,\n  description,\n  ipType,\n  showMultiEditionBadge = false,\n  parentContract,\n  parentTokenId,\n}: AssetHeaderBlockProps) {\n  return (\n    <div className=\"min-w-0 flex-1\">\n      {ipType || showMultiEditionBadge ? (\n        <div className=\"flex items-center gap-2 flex-wrap mb-2\">\n          {ipType ? <IpTypeBadge ipType={ipType} size=\"md\" /> : null}\n          {showMultiEditionBadge ? (\n            <span className=\"inline-flex items-center gap-1 text-2xs font-semibold px-2.5 py-1 rounded-full border border-violet-500/30 bg-violet-500/10 text-violet-500\">\n              <Layers className=\"h-3 w-3\" />\n              Multi-edition\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      {parentContract && parentTokenId ? (\n        <div className=\"mb-3\">\n          <ParentAttributionBanner\n            parentContract={parentContract}\n            parentTokenId={parentTokenId}\n            parentName={`Token #${parentTokenId}`}\n          />\n        </div>\n      ) : null}\n      <h1 className=\"text-2xl lg:text-4xl font-bold break-words\">{name}</h1>\n      {description ? (\n        <p className=\"text-sm text-muted-foreground leading-relaxed mt-1\">{description}</p>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface AssetOwnerRowProps {\n  ownerAddress: string;\n  ownerHref: string;\n}\n\nexport function AssetOwnerRow({ ownerAddress, ownerHref }: AssetOwnerRowProps) {\n  return (\n    <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n      <span>Owner</span>\n      <Link href={ownerHref} className=\"hover:text-primary transition-colors font-medium\">\n        <AddressDisplay address={ownerAddress} />\n      </Link>\n    </div>\n  );\n}\n\nexport function buildEditionStats(totalEditions: number, uniqueOwners: number) {\n  return [\n    {\n      value: totalEditions.toLocaleString(),\n      label: \"editions minted\",\n      icon: <Layers className=\"h-3 w-3\" />,\n    },\n    {\n      value: uniqueOwners.toLocaleString(),\n      label: \"unique owners\",\n      icon: <Users className=\"h-3 w-3\" />,\n    },\n  ];\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/asset-top-sections.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { useEffect, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { useIntersectionActive } from \"../utils/use-intersection-active.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { AddressDisplay } from \"./address-display.js\";\nimport { ParentAttributionBanner } from \"./parent-attribution-banner.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\nimport { Layers, Users } from \"lucide-react\";\n\ninterface AssetMediaColumnProps {\n  shouldReduce: boolean;\n  image: string | null;\n  imageAlt: string;\n  imgError: boolean;\n  onImageError: () => void;\n  fallback: React.ReactNode;\n\n  onZoom?: () => void;\n\n  animationUrl?: string | null;\n\n  live?: boolean;\n  stats?: Array<{\n    value: string;\n    label: string;\n    icon: React.ReactNode;\n  }>;\n}\n\nexport function AssetMediaColumn({\n  shouldReduce,\n  image,\n  imageAlt,\n  imgError,\n  onImageError,\n  fallback,\n  onZoom,\n  animationUrl,\n  live = false,\n  stats,\n}: AssetMediaColumnProps) {\n  const [ref, isVisible] = useIntersectionActive<HTMLDivElement>();\n  const [loaded, setLoaded] = useState(false);\n  useEffect(() => setLoaded(false), [image]);\n  const showLive = live && !!animationUrl && isVisible;\n\n  const shimmer = !loaded && (\n    <div\n      className=\"absolute inset-0 min-h-80 animate-[shimmer_1.6s_ease-in-out_infinite] bg-foreground/[0.06]\"\n      style={{\n        backgroundImage:\n          \"linear-gradient(90deg, transparent, color-mix(in srgb, var(--foreground) 8%, transparent), transparent)\",\n        backgroundSize: \"200% 100%\",\n      }}\n    />\n  );\n\n  return (\n    <div ref={ref} className=\"w-full lg:sticky lg:top-16\">\n      {showLive ? (\n        <div className=\"w-full overflow-hidden rounded-3xl aspect-square\">\n          <iframe\n            src={animationUrl!}\n            title={imageAlt}\n            sandbox=\"allow-scripts\"\n            loading=\"lazy\"\n            className=\"w-full h-full border-0\"\n          />\n        </div>\n      ) : !image || imgError ? (\n        <div className=\"w-full overflow-hidden rounded-3xl\">{fallback}</div>\n      ) : onZoom ? (\n        <motion.button\n          type=\"button\"\n          onClick={onZoom}\n          aria-label=\"View full image\"\n          initial={shouldReduce ? false : { opacity: 0, scale: 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5 }}\n          className=\"group relative block w-full overflow-hidden rounded-3xl cursor-zoom-in focus:outline-none\"\n        >\n          {shimmer}\n          <img\n            src={image}\n            alt={imageAlt}\n            crossOrigin=\"anonymous\"\n            onLoad={() => setLoaded(true)}\n            onError={onImageError}\n            className={cn(\n              \"w-full h-auto max-h-[80vh] object-contain\",\n              \"transition-opacity duration-300 group-hover:opacity-95 group-active:scale-[0.99]\",\n              loaded ? \"opacity-100\" : \"opacity-0\"\n            )}\n          />\n        </motion.button>\n      ) : (\n        <motion.div\n          initial={shouldReduce ? false : { opacity: 0, scale: 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5 }}\n          className=\"relative block w-full overflow-hidden rounded-3xl\"\n        >\n          {shimmer}\n          <img\n            src={image}\n            alt={imageAlt}\n            crossOrigin=\"anonymous\"\n            onLoad={() => setLoaded(true)}\n            onError={onImageError}\n            className={cn(\n              \"w-full h-auto max-h-[80vh] object-contain transition-opacity duration-300\",\n              loaded ? \"opacity-100\" : \"opacity-0\"\n            )}\n          />\n        </motion.div>\n      )}\n\n      {stats && stats.length > 0 ? (\n        <div className={`grid gap-3 mt-4 ${stats.length === 2 ? \"grid-cols-2\" : \"grid-cols-1\"}`}>\n          {stats.map((stat) => (\n            <div key={stat.label} className=\"rounded-xl border border-border bg-muted/20 p-4 text-center\">\n              <p className=\"text-2xl font-black\">{stat.value}</p>\n              <div className=\"flex items-center justify-center gap-1 text-xs text-muted-foreground mt-1\">\n                {stat.icon}\n                {stat.label}\n              </div>\n            </div>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\ninterface AssetHeaderBlockProps {\n  name: string;\n  description?: string | null;\n  ipType?: string | null;\n  showMultiEditionBadge?: boolean;\n  parentContract?: string | null;\n  parentTokenId?: string | null;\n}\n\nexport function AssetHeaderBlock({\n  name,\n  description,\n  ipType,\n  showMultiEditionBadge = false,\n  parentContract,\n  parentTokenId,\n}: AssetHeaderBlockProps) {\n  return (\n    <div className=\"min-w-0 flex-1\">\n      {ipType || showMultiEditionBadge ? (\n        <div className=\"flex items-center gap-2 flex-wrap mb-2\">\n          {ipType ? <IpTypeBadge ipType={ipType} size=\"md\" /> : null}\n          {showMultiEditionBadge ? (\n            <span className=\"inline-flex items-center gap-1 text-2xs font-semibold px-2.5 py-1 rounded-full border border-violet-500/30 bg-violet-500/10 text-violet-500\">\n              <Layers className=\"h-3 w-3\" />\n              Multi-edition\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      {parentContract && parentTokenId ? (\n        <div className=\"mb-3\">\n          <ParentAttributionBanner\n            parentContract={parentContract}\n            parentTokenId={parentTokenId}\n            parentName={`Token #${parentTokenId}`}\n          />\n        </div>\n      ) : null}\n      <h1 className=\"text-2xl lg:text-4xl font-bold break-words\">{name}</h1>\n      {description ? (\n        <p className=\"text-sm text-muted-foreground leading-relaxed mt-1\">{description}</p>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface AssetOwnerRowProps {\n  ownerAddress: string;\n  ownerHref: string;\n}\n\nexport function AssetOwnerRow({ ownerAddress, ownerHref }: AssetOwnerRowProps) {\n  return (\n    <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n      <span>Owner</span>\n      <Link href={ownerHref} className=\"hover:text-primary transition-colors font-medium\">\n        <AddressDisplay address={ownerAddress} />\n      </Link>\n    </div>\n  );\n}\n\nexport function buildEditionStats(totalEditions: number, uniqueOwners: number) {\n  return [\n    {\n      value: totalEditions.toLocaleString(),\n      label: \"editions minted\",\n      icon: <Layers className=\"h-3 w-3\" />,\n    },\n    {\n      value: uniqueOwners.toLocaleString(),\n      label: \"unique owners\",\n      icon: <Users className=\"h-3 w-3\" />,\n    },\n  ];\n}\n"],"mappings":"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","names":[]}

package/dist/components/{portfolio-overview.cjs → portfolio-section-grid.cjs}

@@ -17,16 +17,16 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var portfolio_overview_exports = {};
-__export(portfolio_overview_exports, {
-  PortfolioOverview: () => PortfolioOverview
+var portfolio_section_grid_exports = {};
+__export(portfolio_section_grid_exports, {
+  PortfolioSectionGrid: () => PortfolioSectionGrid
 });
-module.exports = __toCommonJS(portfolio_overview_exports);
+module.exports = __toCommonJS(portfolio_section_grid_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_cn = require("../utils/cn.js");
-var import_portfolio_bento_tile = require("./portfolio-bento-tile.js");
-function PortfolioOverview({
-  tiles,
+var import_portfolio_section = require("./portfolio-section.js");
+function PortfolioSectionGrid({
+  sections,
   isEmpty,
   emptyState,
   className
@@ -34,35 +34,30 @@ function PortfolioOverview({
   if (isEmpty) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: emptyState });
   }
-  const populatedTiles = tiles.filter((t) => !t.isEmpty);
+  const populated = sections.filter((s) => !s.isEmpty);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: (0, import_cn.cn)(
-        // True masonry: a CSS multi-column container. Each tile keeps its
-        // own natural height and flows into whichever column is currently
-        // shortest — unlike a grid, nothing stretches to match a taller
-        // sibling in the same row, which is what real (unevenly-sized)
-        // portfolio content needs. "wide" tiles opt out via column-span:
-        // all (set on PortfolioBentoTile itself, not here).
-        "columns-1 sm:columns-2 lg:columns-3 gap-4",
+        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-start",
         className
       ),
-      children: populatedTiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_portfolio_bento_tile.PortfolioBentoTile,
+      children: populated.map((section) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_portfolio_section.PortfolioSection,
         {
-          title: tile.title,
-          href: tile.href,
-          size: tile.size,
-          children: tile.content
+          title: section.title,
+          href: section.href,
+          color: section.color,
+          size: section.size,
+          children: section.content
         },
-        tile.key
+        section.key
       ))
     }
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PortfolioOverview
+  PortfolioSectionGrid
 });
-//# sourceMappingURL=portfolio-overview.cjs.map
+//# sourceMappingURL=portfolio-section-grid.cjs.map

package/dist/components/portfolio-section-grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/portfolio-section-grid.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport {\n  PortfolioSection,\n  type PortfolioSectionProps,\n} from \"./portfolio-section.js\";\n\nexport interface PortfolioSectionConfig {\n  key: string;\n  title: string;\n  href: string;\n  color?: PortfolioSectionProps[\"color\"];\n  size?: PortfolioSectionProps[\"size\"];\n\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioSectionGridProps {\n  sections: PortfolioSectionConfig[];\n\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioSectionGrid({\n  sections,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioSectionGridProps) {\n  if (isEmpty) {\n    return <div className={className}>{emptyState}</div>;\n  }\n\n  const populated = sections.filter((s) => !s.isEmpty);\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-start\",\n        className,\n      )}\n    >\n      {populated.map((section) => (\n        <PortfolioSection\n          key={section.key}\n          title={section.title}\n          href={section.href}\n          color={section.color}\n          size={section.size}\n        >\n          {section.content}\n        </PortfolioSection>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCW;AAhCX,gBAAmB;AACnB,+BAGO;AAqBA,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,MAAI,SAAS;AACX,WAAO,4CAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,YAAY,SAAS,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,oBAAU,IAAI,CAAC,YACd;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,QAAQ;AAAA,UACf,MAAM,QAAQ;AAAA,UACd,OAAO,QAAQ;AAAA,UACf,MAAM,QAAQ;AAAA,UAEb,kBAAQ;AAAA;AAAA,QANJ,QAAQ;AAAA,MAOf,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/portfolio-section-grid.d.cts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PortfolioSectionProps } from './portfolio-section.cjs';
+
+interface PortfolioSectionConfig {
+    key: string;
+    title: string;
+    href: string;
+    color?: PortfolioSectionProps["color"];
+    size?: PortfolioSectionProps["size"];
+    isEmpty?: boolean;
+    content: React.ReactNode;
+}
+interface PortfolioSectionGridProps {
+    sections: PortfolioSectionConfig[];
+    isEmpty?: boolean;
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+declare function PortfolioSectionGrid({ sections, isEmpty, emptyState, className, }: PortfolioSectionGridProps): react_jsx_runtime.JSX.Element;
+
+export { type PortfolioSectionConfig, PortfolioSectionGrid, type PortfolioSectionGridProps };

package/dist/components/portfolio-section-grid.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PortfolioSectionProps } from './portfolio-section.js';
+
+interface PortfolioSectionConfig {
+    key: string;
+    title: string;
+    href: string;
+    color?: PortfolioSectionProps["color"];
+    size?: PortfolioSectionProps["size"];
+    isEmpty?: boolean;
+    content: React.ReactNode;
+}
+interface PortfolioSectionGridProps {
+    sections: PortfolioSectionConfig[];
+    isEmpty?: boolean;
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+declare function PortfolioSectionGrid({ sections, isEmpty, emptyState, className, }: PortfolioSectionGridProps): react_jsx_runtime.JSX.Element;
+
+export { type PortfolioSectionConfig, PortfolioSectionGrid, type PortfolioSectionGridProps };

package/dist/components/portfolio-section-grid.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn.js";
+import {
+  PortfolioSection
+} from "./portfolio-section.js";
+function PortfolioSectionGrid({
+  sections,
+  isEmpty,
+  emptyState,
+  className
+}) {
+  if (isEmpty) {
+    return /* @__PURE__ */ jsx("div", { className, children: emptyState });
+  }
+  const populated = sections.filter((s) => !s.isEmpty);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-start",
+        className
+      ),
+      children: populated.map((section) => /* @__PURE__ */ jsx(
+        PortfolioSection,
+        {
+          title: section.title,
+          href: section.href,
+          color: section.color,
+          size: section.size,
+          children: section.content
+        },
+        section.key
+      ))
+    }
+  );
+}
+export {
+  PortfolioSectionGrid
+};
+//# sourceMappingURL=portfolio-section-grid.js.map

package/dist/components/portfolio-section-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/portfolio-section-grid.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport {\n  PortfolioSection,\n  type PortfolioSectionProps,\n} from \"./portfolio-section.js\";\n\nexport interface PortfolioSectionConfig {\n  key: string;\n  title: string;\n  href: string;\n  color?: PortfolioSectionProps[\"color\"];\n  size?: PortfolioSectionProps[\"size\"];\n\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioSectionGridProps {\n  sections: PortfolioSectionConfig[];\n\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioSectionGrid({\n  sections,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioSectionGridProps) {\n  if (isEmpty) {\n    return <div className={className}>{emptyState}</div>;\n  }\n\n  const populated = sections.filter((s) => !s.isEmpty);\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-start\",\n        className,\n      )}\n    >\n      {populated.map((section) => (\n        <PortfolioSection\n          key={section.key}\n          title={section.title}\n          href={section.href}\n          color={section.color}\n          size={section.size}\n        >\n          {section.content}\n        </PortfolioSection>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAkCW;AAhCX,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAqBA,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,MAAI,SAAS;AACX,WAAO,oBAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,YAAY,SAAS,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,oBAAU,IAAI,CAAC,YACd;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,QAAQ;AAAA,UACf,MAAM,QAAQ;AAAA,UACd,OAAO,QAAQ;AAAA,UACf,MAAM,QAAQ;AAAA,UAEb,kBAAQ;AAAA;AAAA,QANJ,QAAQ;AAAA,MAOf,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/{portfolio-bento-tile.cjs → portfolio-section.cjs}

@@ -27,18 +27,27 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var portfolio_bento_tile_exports = {};
-__export(portfolio_bento_tile_exports, {
-  PortfolioBentoTile: () => PortfolioBentoTile
+var portfolio_section_exports = {};
+__export(portfolio_section_exports, {
+  PortfolioSection: () => PortfolioSection
 });
-module.exports = __toCommonJS(portfolio_bento_tile_exports);
+module.exports = __toCommonJS(portfolio_section_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_link = __toESM(require("next/link"), 1);
 var import_lucide_react = require("lucide-react");
 var import_cn = require("../utils/cn.js");
-function PortfolioBentoTile({
+const BORDER_BY_COLOR = {
+  blue: "border-brand-blue/40",
+  purple: "border-brand-purple/40",
+  rose: "border-brand-rose/40",
+  orange: "border-brand-orange/40",
+  maeve: "border-brand-maeve/40",
+  navy: "border-brand-navy/40"
+};
+function PortfolioSection({
   title,
   href,
+  color = "purple",
   size = "default",
   children,
   className
@@ -47,13 +56,13 @@ function PortfolioBentoTile({
     "section",
     {
       className: (0, import_cn.cn)(
-        "rounded-2xl bg-foreground/[0.04] min-w-0 transition-colors hover:bg-foreground/[0.07]",
-        "mb-4 break-inside-avoid",
-        size === "wide" && "[column-span:all]",
+        "rounded-2xl border min-w-0",
+        BORDER_BY_COLOR[color],
+        size === "wide" && "sm:col-span-2 lg:col-span-3",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 px-4 pt-4 pb-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 px-5 pt-5 pb-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-sm font-black text-foreground tracking-tight", children: title }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             import_link.default,
@@ -67,13 +76,13 @@ function PortfolioBentoTile({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 pb-4", children })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-5 pb-5", children })
       ]
     }
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PortfolioBentoTile
+  PortfolioSection
 });
-//# sourceMappingURL=portfolio-bento-tile.cjs.map
+//# sourceMappingURL=portfolio-section.cjs.map

package/dist/components/portfolio-section.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/portfolio-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport type PortfolioSectionColor =\n  | \"blue\"\n  | \"purple\"\n  | \"rose\"\n  | \"orange\"\n  | \"maeve\"\n  | \"navy\";\n\nconst BORDER_BY_COLOR: Record<PortfolioSectionColor, string> = {\n  blue: \"border-brand-blue/40\",\n  purple: \"border-brand-purple/40\",\n  rose: \"border-brand-rose/40\",\n  orange: \"border-brand-orange/40\",\n  maeve: \"border-brand-maeve/40\",\n  navy: \"border-brand-navy/40\",\n};\n\nexport interface PortfolioSectionProps {\n  title: string;\n  href: string;\n\n  /** Which brand color accents this section's hairline border. */\n  color?: PortfolioSectionColor;\n\n  /** \"default\" sits in the grid alongside its siblings; \"wide\" spans the\n   * full row instead — for list-like content (e.g. Activity) that reads\n   * better edge-to-edge than column-width. */\n  size?: \"default\" | \"wide\";\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioSection({\n  title,\n  href,\n  color = \"purple\",\n  size = \"default\",\n  children,\n  className,\n}: PortfolioSectionProps) {\n  return (\n    <section\n      className={cn(\n        \"rounded-2xl border min-w-0\",\n        BORDER_BY_COLOR[color],\n        size === \"wide\" && \"sm:col-span-2 lg:col-span-3\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-3 px-5 pt-5 pb-3\">\n        <h2 className=\"text-sm font-black text-foreground tracking-tight\">\n          {title}\n        </h2>\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          See all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      </div>\n      <div className=\"px-5 pb-5\">{children}</div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDQ;AAtDR,kBAAiB;AACjB,0BAA2B;AAC3B,gBAAmB;AAUnB,MAAM,kBAAyD;AAAA,EAC7D,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AACR;AAiBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,gBAAgB,KAAK;AAAA,QACrB,SAAS,UAAU;AAAA,QACnB;AAAA,MACF;AAAA,MAEA;AAAA,qDAAC,SAAI,WAAU,0DACb;AAAA,sDAAC,QAAG,WAAU,qDACX,iBACH;AAAA,UACA;AAAA,YAAC,YAAAA;AAAA,YAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,4CAAC,kCAAW,WAAU,WAAU;AAAA;AAAA;AAAA,UAClC;AAAA,WACF;AAAA,QACA,4CAAC,SAAI,WAAU,aAAa,UAAS;AAAA;AAAA;AAAA,EACvC;AAEJ;","names":["Link"]}

package/dist/components/portfolio-section.d.cts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type PortfolioSectionColor = "blue" | "purple" | "rose" | "orange" | "maeve" | "navy";
+interface PortfolioSectionProps {
+    title: string;
+    href: string;
+    /** Which brand color accents this section's hairline border. */
+    color?: PortfolioSectionColor;
+    /** "default" sits in the grid alongside its siblings; "wide" spans the
+     * full row instead — for list-like content (e.g. Activity) that reads
+     * better edge-to-edge than column-width. */
+    size?: "default" | "wide";
+    children: React.ReactNode;
+    className?: string;
+}
+declare function PortfolioSection({ title, href, color, size, children, className, }: PortfolioSectionProps): react_jsx_runtime.JSX.Element;
+
+export { PortfolioSection, type PortfolioSectionColor, type PortfolioSectionProps };

package/dist/components/portfolio-section.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type PortfolioSectionColor = "blue" | "purple" | "rose" | "orange" | "maeve" | "navy";
+interface PortfolioSectionProps {
+    title: string;
+    href: string;
+    /** Which brand color accents this section's hairline border. */
+    color?: PortfolioSectionColor;
+    /** "default" sits in the grid alongside its siblings; "wide" spans the
+     * full row instead — for list-like content (e.g. Activity) that reads
+     * better edge-to-edge than column-width. */
+    size?: "default" | "wide";
+    children: React.ReactNode;
+    className?: string;
+}
+declare function PortfolioSection({ title, href, color, size, children, className, }: PortfolioSectionProps): react_jsx_runtime.JSX.Element;
+
+export { PortfolioSection, type PortfolioSectionColor, type PortfolioSectionProps };