@medialane/ui 0.76.0 → 0.78.0

package/dist/components/asset-picker.cjs

@@ -1,10 +1,8 @@
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,14 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var asset_picker_exports = {};
 __export(asset_picker_exports, {
@@ -34,10 +24,9 @@ __export(asset_picker_exports, {
 module.exports = __toCommonJS(asset_picker_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_image = __toESM(require("next/image"), 1);
 var import_lucide_react = require("lucide-react");
 var import_cn = require("../utils/cn.js");
-const isSame = (a, b) => !!b && a.contractAddress === b.contractAddress && a.tokenId === b.tokenId;
+var import_asset_picker_cell = require("./asset-picker-cell.js");
 function AssetPicker({
   assets,
   isLoading,
@@ -72,27 +61,15 @@ function AssetPicker({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5", children: filtered.map((asset) => {
-      const active = isSame(asset, selected);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "button",
-        {
-          type: "button",
-          onClick: () => onSelect(asset),
-          "aria-pressed": active,
-          className: (0, import_cn.cn)(
-            "group relative aspect-square rounded-xl overflow-hidden border-2 transition-colors text-left",
-            active ? "border-brand-purple" : "border-border/50 active:border-border sm:hover:border-border"
-          ),
-          children: [
-            asset.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: asset.image, alt: asset.name, fill: true, sizes: "120px", className: "object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full flex items-center justify-center bg-muted/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ImageIcon, { className: "h-5 w-5 text-muted-foreground/50" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-1.5 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "truncate text-[11px] font-medium text-white", children: asset.name }) }),
-            active ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-1.5 right-1.5 h-5 w-5 rounded-full bg-brand-purple flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "h-3 w-3 text-white" }) }) : null
-          ]
-        },
-        `${asset.contractAddress}-${asset.tokenId}`
-      );
-    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5", children: filtered.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_asset_picker_cell.AssetPickerCell,
+      {
+        asset,
+        active: (0, import_asset_picker_cell.isSameAsset)(asset, selected),
+        onSelect
+      },
+      `${asset.contractAddress}-${asset.tokenId}`
+    )) }),
     query && filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-xs text-muted-foreground text-center py-4", children: [
       'No assets match "',
       query,

package/dist/components/asset-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/asset-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Image from \"next/image\";\nimport { Check, ImageIcon, Search } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface OwnedAsset {\n  contractAddress: string;\n  tokenId: string;\n  name: string;\n  image: string | null;\n}\n\nexport interface AssetPickerProps {\n  /** The caller's already-fetched, already-resolved asset list — this\n   *  component takes data, it doesn't fetch it. Plug in `useTokensByOwner`\n   *  (or an app's equivalent) and map to `OwnedAsset` at the call site. */\n  assets: OwnedAsset[];\n  isLoading: boolean;\n  selected: OwnedAsset | null;\n  onSelect: (asset: OwnedAsset) => void;\n  /** Shown in the empty state when the wallet owns nothing yet. */\n  emptyStateHref?: string;\n  emptyStateLabel?: string;\n  className?: string;\n}\n\nconst isSame = (a: OwnedAsset, b: OwnedAsset | null) =>\n  !!b && a.contractAddress === b.contractAddress && a.tokenId === b.tokenId;\n\nexport function AssetPicker({\n  assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, className,\n}: AssetPickerProps) {\n  const [query, setQuery] = useState(\"\");\n  const filtered = query\n    ? assets.filter((a) => a.name.toLowerCase().includes(query.toLowerCase()))\n    : assets;\n\n  if (isLoading) {\n    return (\n      <div className={cn(\"grid grid-cols-3 sm:grid-cols-4 gap-2.5\", className)}>\n        {Array.from({ length: 8 }).map((_, i) => (\n          <div key={i} className=\"aspect-square rounded-xl bg-muted/60 animate-pulse\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (assets.length === 0) {\n    return (\n      <div className={cn(\"rounded-xl border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground\", className)}>\n        You don&apos;t own any assets yet.\n        {emptyStateHref ? (\n          <a href={emptyStateHref} className=\"ml-1 font-semibold text-foreground underline underline-offset-2\">\n            {emptyStateLabel ?? \"Create one\"}\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {assets.length > 8 ? (\n        <div className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search your assets\"\n            className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n          />\n        </div>\n      ) : null}\n\n      <div className=\"grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5\">\n        {filtered.map((asset) => {\n          const active = isSame(asset, selected);\n          return (\n            <button\n              key={`${asset.contractAddress}-${asset.tokenId}`}\n              type=\"button\"\n              onClick={() => onSelect(asset)}\n              aria-pressed={active}\n              className={cn(\n                \"group relative aspect-square rounded-xl overflow-hidden border-2 transition-colors text-left\",\n                active ? \"border-brand-purple\" : \"border-border/50 active:border-border sm:hover:border-border\",\n              )}\n            >\n              {asset.image ? (\n                <Image src={asset.image} alt={asset.name} fill sizes=\"120px\" className=\"object-cover\" />\n              ) : (\n                <div className=\"h-full w-full flex items-center justify-center bg-muted/60\">\n                  <ImageIcon className=\"h-5 w-5 text-muted-foreground/50\" />\n                </div>\n              )}\n              <div className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-1.5 py-1\">\n                <p className=\"truncate text-[11px] font-medium text-white\">{asset.name}</p>\n              </div>\n              {active ? (\n                <div className=\"absolute top-1.5 right-1.5 h-5 w-5 rounded-full bg-brand-purple flex items-center justify-center\">\n                  <Check className=\"h-3 w-3 text-white\" />\n                </div>\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n\n      {query && filtered.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground text-center py-4\">No assets match &quot;{query}&quot;.</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CU;AAzCV,mBAAyB;AACzB,mBAAkB;AAClB,0BAAyC;AACzC,gBAAmB;AAuBnB,MAAM,SAAS,CAAC,GAAe,MAC7B,CAAC,CAAC,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,YAAY,EAAE;AAE7D,SAAS,YAAY;AAAA,EAC1B;AAAA,EAAQ;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AAAA,EAAgB;AAAA,EAAiB;AAC1E,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,WAAW,QACb,OAAO,OAAO,CAAC,MAAM,EAAE,KAAK,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC,IACvE;AAEJ,MAAI,WAAW;AACb,WACE,4CAAC,SAAI,eAAW,cAAG,2CAA2C,SAAS,GACpE,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,4CAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH;AAAA,EAEJ;AAEA,MAAI,OAAO,WAAW,GAAG;AACvB,WACE,6CAAC,SAAI,eAAW,cAAG,kGAAkG,SAAS,GAAG;AAAA;AAAA,MAE9H,iBACC,4CAAC,OAAE,MAAM,gBAAgB,WAAU,mEAChC,6BAAmB,cACtB,IACE;AAAA,OACN;AAAA,EAEJ;AAEA,SACE,6CAAC,SAAI,eAAW,cAAG,aAAa,SAAS,GACtC;AAAA,WAAO,SAAS,IACf,6CAAC,SAAI,WAAU,YACb;AAAA,kDAAC,8BAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,OACF,IACE;AAAA,IAEJ,4CAAC,SAAI,WAAU,2EACZ,mBAAS,IAAI,CAAC,UAAU;AACvB,YAAM,SAAS,OAAO,OAAO,QAAQ;AACrC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,SAAS,KAAK;AAAA,UAC7B,gBAAc;AAAA,UACd,eAAW;AAAA,YACT;AAAA,YACA,SAAS,wBAAwB;AAAA,UACnC;AAAA,UAEC;AAAA,kBAAM,QACL,4CAAC,aAAAA,SAAA,EAAM,KAAK,MAAM,OAAO,KAAK,MAAM,MAAM,MAAI,MAAC,OAAM,SAAQ,WAAU,gBAAe,IAEtF,4CAAC,SAAI,WAAU,8DACb,sDAAC,iCAAU,WAAU,oCAAmC,GAC1D;AAAA,YAEF,4CAAC,SAAI,WAAU,yFACb,sDAAC,OAAE,WAAU,+CAA+C,gBAAM,MAAK,GACzE;AAAA,YACC,SACC,4CAAC,SAAI,WAAU,oGACb,sDAAC,6BAAM,WAAU,sBAAqB,GACxC,IACE;AAAA;AAAA;AAAA,QAvBC,GAAG,MAAM,eAAe,IAAI,MAAM,OAAO;AAAA,MAwBhD;AAAA,IAEJ,CAAC,GACH;AAAA,IAEC,SAAS,SAAS,WAAW,IAC5B,6CAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,MAAuB;AAAA,MAAM;AAAA,OAAO,IAChG;AAAA,KACN;AAEJ;","names":["Image"]}
+{"version":3,"sources":["../../src/components/asset-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Search } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { AssetPickerCell, isSameAsset } from \"./asset-picker-cell.js\";\n\nexport interface OwnedAsset {\n  contractAddress: string;\n  tokenId: string;\n  name: string;\n  image: string | null;\n}\n\nexport interface AssetPickerProps {\n  /** The caller's already-fetched, already-resolved asset list — this\n   *  component takes data, it doesn't fetch it. Plug in `useTokensByOwner`\n   *  (or an app's equivalent) and map to `OwnedAsset` at the call site. */\n  assets: OwnedAsset[];\n  isLoading: boolean;\n  selected: OwnedAsset | null;\n  onSelect: (asset: OwnedAsset) => void;\n  /** Shown in the empty state when the wallet owns nothing yet. */\n  emptyStateHref?: string;\n  emptyStateLabel?: string;\n  className?: string;\n}\n\nexport function AssetPicker({\n  assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, className,\n}: AssetPickerProps) {\n  const [query, setQuery] = useState(\"\");\n  const filtered = query\n    ? assets.filter((a) => a.name.toLowerCase().includes(query.toLowerCase()))\n    : assets;\n\n  if (isLoading) {\n    return (\n      <div className={cn(\"grid grid-cols-3 sm:grid-cols-4 gap-2.5\", className)}>\n        {Array.from({ length: 8 }).map((_, i) => (\n          <div key={i} className=\"aspect-square rounded-xl bg-muted/60 animate-pulse\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (assets.length === 0) {\n    return (\n      <div className={cn(\"rounded-xl border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground\", className)}>\n        You don&apos;t own any assets yet.\n        {emptyStateHref ? (\n          <a href={emptyStateHref} className=\"ml-1 font-semibold text-foreground underline underline-offset-2\">\n            {emptyStateLabel ?? \"Create one\"}\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {assets.length > 8 ? (\n        <div className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search your assets\"\n            className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n          />\n        </div>\n      ) : null}\n\n      <div className=\"grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5\">\n        {filtered.map((asset) => (\n          <AssetPickerCell\n            key={`${asset.contractAddress}-${asset.tokenId}`}\n            asset={asset}\n            active={isSameAsset(asset, selected)}\n            onSelect={onSelect}\n          />\n        ))}\n      </div>\n\n      {query && filtered.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground text-center py-4\">No assets match &quot;{query}&quot;.</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCU;AAtCV,mBAAyB;AACzB,0BAAuB;AACvB,gBAAmB;AACnB,+BAA6C;AAuBtC,SAAS,YAAY;AAAA,EAC1B;AAAA,EAAQ;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AAAA,EAAgB;AAAA,EAAiB;AAC1E,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,WAAW,QACb,OAAO,OAAO,CAAC,MAAM,EAAE,KAAK,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC,IACvE;AAEJ,MAAI,WAAW;AACb,WACE,4CAAC,SAAI,eAAW,cAAG,2CAA2C,SAAS,GACpE,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,4CAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH;AAAA,EAEJ;AAEA,MAAI,OAAO,WAAW,GAAG;AACvB,WACE,6CAAC,SAAI,eAAW,cAAG,kGAAkG,SAAS,GAAG;AAAA;AAAA,MAE9H,iBACC,4CAAC,OAAE,MAAM,gBAAgB,WAAU,mEAChC,6BAAmB,cACtB,IACE;AAAA,OACN;AAAA,EAEJ;AAEA,SACE,6CAAC,SAAI,eAAW,cAAG,aAAa,SAAS,GACtC;AAAA,WAAO,SAAS,IACf,6CAAC,SAAI,WAAU,YACb;AAAA,kDAAC,8BAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,OACF,IACE;AAAA,IAEJ,4CAAC,SAAI,WAAU,2EACZ,mBAAS,IAAI,CAAC,UACb;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,YAAQ,sCAAY,OAAO,QAAQ;AAAA,QACnC;AAAA;AAAA,MAHK,GAAG,MAAM,eAAe,IAAI,MAAM,OAAO;AAAA,IAIhD,CACD,GACH;AAAA,IAEC,SAAS,SAAS,WAAW,IAC5B,6CAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,MAAuB;AAAA,MAAM;AAAA,OAAO,IAChG;AAAA,KACN;AAEJ;","names":[]}

package/dist/components/asset-picker.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import Image from "next/image";
-import { Check, ImageIcon, Search } from "lucide-react";
+import { Search } from "lucide-react";
 import { cn } from "../utils/cn.js";
-const isSame = (a, b) => !!b && a.contractAddress === b.contractAddress && a.tokenId === b.tokenId;
+import { AssetPickerCell, isSameAsset } from "./asset-picker-cell.js";
 function AssetPicker({
   assets,
   isLoading,
@@ -39,27 +38,15 @@ function AssetPicker({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5", children: filtered.map((asset) => {
-      const active = isSame(asset, selected);
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => onSelect(asset),
-          "aria-pressed": active,
-          className: cn(
-            "group relative aspect-square rounded-xl overflow-hidden border-2 transition-colors text-left",
-            active ? "border-brand-purple" : "border-border/50 active:border-border sm:hover:border-border"
-          ),
-          children: [
-            asset.image ? /* @__PURE__ */ jsx(Image, { src: asset.image, alt: asset.name, fill: true, sizes: "120px", className: "object-cover" }) : /* @__PURE__ */ jsx("div", { className: "h-full w-full flex items-center justify-center bg-muted/60", children: /* @__PURE__ */ jsx(ImageIcon, { className: "h-5 w-5 text-muted-foreground/50" }) }),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-1.5 py-1", children: /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] font-medium text-white", children: asset.name }) }),
-            active ? /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 right-1.5 h-5 w-5 rounded-full bg-brand-purple flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-white" }) }) : null
-          ]
-        },
-        `${asset.contractAddress}-${asset.tokenId}`
-      );
-    }) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5", children: filtered.map((asset) => /* @__PURE__ */ jsx(
+      AssetPickerCell,
+      {
+        asset,
+        active: isSameAsset(asset, selected),
+        onSelect
+      },
+      `${asset.contractAddress}-${asset.tokenId}`
+    )) }),
     query && filtered.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground text-center py-4", children: [
       'No assets match "',
       query,

package/dist/components/asset-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/asset-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Image from \"next/image\";\nimport { Check, ImageIcon, Search } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface OwnedAsset {\n  contractAddress: string;\n  tokenId: string;\n  name: string;\n  image: string | null;\n}\n\nexport interface AssetPickerProps {\n  /** The caller's already-fetched, already-resolved asset list — this\n   *  component takes data, it doesn't fetch it. Plug in `useTokensByOwner`\n   *  (or an app's equivalent) and map to `OwnedAsset` at the call site. */\n  assets: OwnedAsset[];\n  isLoading: boolean;\n  selected: OwnedAsset | null;\n  onSelect: (asset: OwnedAsset) => void;\n  /** Shown in the empty state when the wallet owns nothing yet. */\n  emptyStateHref?: string;\n  emptyStateLabel?: string;\n  className?: string;\n}\n\nconst isSame = (a: OwnedAsset, b: OwnedAsset | null) =>\n  !!b && a.contractAddress === b.contractAddress && a.tokenId === b.tokenId;\n\nexport function AssetPicker({\n  assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, className,\n}: AssetPickerProps) {\n  const [query, setQuery] = useState(\"\");\n  const filtered = query\n    ? assets.filter((a) => a.name.toLowerCase().includes(query.toLowerCase()))\n    : assets;\n\n  if (isLoading) {\n    return (\n      <div className={cn(\"grid grid-cols-3 sm:grid-cols-4 gap-2.5\", className)}>\n        {Array.from({ length: 8 }).map((_, i) => (\n          <div key={i} className=\"aspect-square rounded-xl bg-muted/60 animate-pulse\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (assets.length === 0) {\n    return (\n      <div className={cn(\"rounded-xl border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground\", className)}>\n        You don&apos;t own any assets yet.\n        {emptyStateHref ? (\n          <a href={emptyStateHref} className=\"ml-1 font-semibold text-foreground underline underline-offset-2\">\n            {emptyStateLabel ?? \"Create one\"}\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {assets.length > 8 ? (\n        <div className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search your assets\"\n            className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n          />\n        </div>\n      ) : null}\n\n      <div className=\"grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5\">\n        {filtered.map((asset) => {\n          const active = isSame(asset, selected);\n          return (\n            <button\n              key={`${asset.contractAddress}-${asset.tokenId}`}\n              type=\"button\"\n              onClick={() => onSelect(asset)}\n              aria-pressed={active}\n              className={cn(\n                \"group relative aspect-square rounded-xl overflow-hidden border-2 transition-colors text-left\",\n                active ? \"border-brand-purple\" : \"border-border/50 active:border-border sm:hover:border-border\",\n              )}\n            >\n              {asset.image ? (\n                <Image src={asset.image} alt={asset.name} fill sizes=\"120px\" className=\"object-cover\" />\n              ) : (\n                <div className=\"h-full w-full flex items-center justify-center bg-muted/60\">\n                  <ImageIcon className=\"h-5 w-5 text-muted-foreground/50\" />\n                </div>\n              )}\n              <div className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-1.5 py-1\">\n                <p className=\"truncate text-[11px] font-medium text-white\">{asset.name}</p>\n              </div>\n              {active ? (\n                <div className=\"absolute top-1.5 right-1.5 h-5 w-5 rounded-full bg-brand-purple flex items-center justify-center\">\n                  <Check className=\"h-3 w-3 text-white\" />\n                </div>\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n\n      {query && filtered.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground text-center py-4\">No assets match &quot;{query}&quot;.</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";AA2CU,cAQJ,YARI;AAzCV,SAAS,gBAAgB;AACzB,OAAO,WAAW;AAClB,SAAS,OAAO,WAAW,cAAc;AACzC,SAAS,UAAU;AAuBnB,MAAM,SAAS,CAAC,GAAe,MAC7B,CAAC,CAAC,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,YAAY,EAAE;AAE7D,SAAS,YAAY;AAAA,EAC1B;AAAA,EAAQ;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AAAA,EAAgB;AAAA,EAAiB;AAC1E,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,WAAW,QACb,OAAO,OAAO,CAAC,MAAM,EAAE,KAAK,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC,IACvE;AAEJ,MAAI,WAAW;AACb,WACE,oBAAC,SAAI,WAAW,GAAG,2CAA2C,SAAS,GACpE,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,oBAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH;AAAA,EAEJ;AAEA,MAAI,OAAO,WAAW,GAAG;AACvB,WACE,qBAAC,SAAI,WAAW,GAAG,kGAAkG,SAAS,GAAG;AAAA;AAAA,MAE9H,iBACC,oBAAC,OAAE,MAAM,gBAAgB,WAAU,mEAChC,6BAAmB,cACtB,IACE;AAAA,OACN;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC;AAAA,WAAO,SAAS,IACf,qBAAC,SAAI,WAAU,YACb;AAAA,0BAAC,UAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,OACF,IACE;AAAA,IAEJ,oBAAC,SAAI,WAAU,2EACZ,mBAAS,IAAI,CAAC,UAAU;AACvB,YAAM,SAAS,OAAO,OAAO,QAAQ;AACrC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,SAAS,KAAK;AAAA,UAC7B,gBAAc;AAAA,UACd,WAAW;AAAA,YACT;AAAA,YACA,SAAS,wBAAwB;AAAA,UACnC;AAAA,UAEC;AAAA,kBAAM,QACL,oBAAC,SAAM,KAAK,MAAM,OAAO,KAAK,MAAM,MAAM,MAAI,MAAC,OAAM,SAAQ,WAAU,gBAAe,IAEtF,oBAAC,SAAI,WAAU,8DACb,8BAAC,aAAU,WAAU,oCAAmC,GAC1D;AAAA,YAEF,oBAAC,SAAI,WAAU,yFACb,8BAAC,OAAE,WAAU,+CAA+C,gBAAM,MAAK,GACzE;AAAA,YACC,SACC,oBAAC,SAAI,WAAU,oGACb,8BAAC,SAAM,WAAU,sBAAqB,GACxC,IACE;AAAA;AAAA;AAAA,QAvBC,GAAG,MAAM,eAAe,IAAI,MAAM,OAAO;AAAA,MAwBhD;AAAA,IAEJ,CAAC,GACH;AAAA,IAEC,SAAS,SAAS,WAAW,IAC5B,qBAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,MAAuB;AAAA,MAAM;AAAA,OAAO,IAChG;AAAA,KACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/asset-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Search } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { AssetPickerCell, isSameAsset } from \"./asset-picker-cell.js\";\n\nexport interface OwnedAsset {\n  contractAddress: string;\n  tokenId: string;\n  name: string;\n  image: string | null;\n}\n\nexport interface AssetPickerProps {\n  /** The caller's already-fetched, already-resolved asset list — this\n   *  component takes data, it doesn't fetch it. Plug in `useTokensByOwner`\n   *  (or an app's equivalent) and map to `OwnedAsset` at the call site. */\n  assets: OwnedAsset[];\n  isLoading: boolean;\n  selected: OwnedAsset | null;\n  onSelect: (asset: OwnedAsset) => void;\n  /** Shown in the empty state when the wallet owns nothing yet. */\n  emptyStateHref?: string;\n  emptyStateLabel?: string;\n  className?: string;\n}\n\nexport function AssetPicker({\n  assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, className,\n}: AssetPickerProps) {\n  const [query, setQuery] = useState(\"\");\n  const filtered = query\n    ? assets.filter((a) => a.name.toLowerCase().includes(query.toLowerCase()))\n    : assets;\n\n  if (isLoading) {\n    return (\n      <div className={cn(\"grid grid-cols-3 sm:grid-cols-4 gap-2.5\", className)}>\n        {Array.from({ length: 8 }).map((_, i) => (\n          <div key={i} className=\"aspect-square rounded-xl bg-muted/60 animate-pulse\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (assets.length === 0) {\n    return (\n      <div className={cn(\"rounded-xl border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground\", className)}>\n        You don&apos;t own any assets yet.\n        {emptyStateHref ? (\n          <a href={emptyStateHref} className=\"ml-1 font-semibold text-foreground underline underline-offset-2\">\n            {emptyStateLabel ?? \"Create one\"}\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {assets.length > 8 ? (\n        <div className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search your assets\"\n            className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n          />\n        </div>\n      ) : null}\n\n      <div className=\"grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5\">\n        {filtered.map((asset) => (\n          <AssetPickerCell\n            key={`${asset.contractAddress}-${asset.tokenId}`}\n            asset={asset}\n            active={isSameAsset(asset, selected)}\n            onSelect={onSelect}\n          />\n        ))}\n      </div>\n\n      {query && filtered.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground text-center py-4\">No assets match &quot;{query}&quot;.</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";AAwCU,cAQJ,YARI;AAtCV,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,iBAAiB,mBAAmB;AAuBtC,SAAS,YAAY;AAAA,EAC1B;AAAA,EAAQ;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AAAA,EAAgB;AAAA,EAAiB;AAC1E,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,WAAW,QACb,OAAO,OAAO,CAAC,MAAM,EAAE,KAAK,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC,IACvE;AAEJ,MAAI,WAAW;AACb,WACE,oBAAC,SAAI,WAAW,GAAG,2CAA2C,SAAS,GACpE,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,oBAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH;AAAA,EAEJ;AAEA,MAAI,OAAO,WAAW,GAAG;AACvB,WACE,qBAAC,SAAI,WAAW,GAAG,kGAAkG,SAAS,GAAG;AAAA;AAAA,MAE9H,iBACC,oBAAC,OAAE,MAAM,gBAAgB,WAAU,mEAChC,6BAAmB,cACtB,IACE;AAAA,OACN;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC;AAAA,WAAO,SAAS,IACf,qBAAC,SAAI,WAAU,YACb;AAAA,0BAAC,UAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,OACF,IACE;AAAA,IAEJ,oBAAC,SAAI,WAAU,2EACZ,mBAAS,IAAI,CAAC,UACb;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,QAAQ,YAAY,OAAO,QAAQ;AAAA,QACnC;AAAA;AAAA,MAHK,GAAG,MAAM,eAAe,IAAI,MAAM,OAAO;AAAA,IAIhD,CACD,GACH;AAAA,IAEC,SAAS,SAAS,WAAW,IAC5B,qBAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,MAAuB;AAAA,MAAM;AAAA,OAAO,IAChG;AAAA,KACN;AAEJ;","names":[]}

package/dist/components/asset-search-picker.cjs

@@ -0,0 +1,100 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var asset_search_picker_exports = {};
+__export(asset_search_picker_exports, {
+  AssetSearchPicker: () => AssetSearchPicker
+});
+module.exports = __toCommonJS(asset_search_picker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_cn = require("../utils/cn.js");
+var import_asset_picker_cell = require("./asset-picker-cell.js");
+function AssetSearchPicker({
+  search,
+  selected,
+  onSelect,
+  placeholder = "Search for an asset or creator",
+  className
+}) {
+  const [query, setQuery] = (0, import_react.useState)("");
+  const [results, setResults] = (0, import_react.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const q = query.trim();
+    if (q.length < 2) {
+      setResults([]);
+      setHasSearched(false);
+      return;
+    }
+    let cancelled = false;
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      search(q).then((assets) => {
+        if (!cancelled) {
+          setResults(assets);
+          setHasSearched(true);
+        }
+      }).finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+    }, 350);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [query, search]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("space-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          type: "text",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder,
+          className: "w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40"
+        }
+      ),
+      isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" }) : null
+    ] }),
+    query.trim().length > 0 && query.trim().length < 2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground text-center py-2", children: "Keep typing \u2014 2+ characters to search." }) : null,
+    results.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5", children: results.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_asset_picker_cell.AssetPickerCell,
+      {
+        asset,
+        active: (0, import_asset_picker_cell.isSameAsset)(asset, selected),
+        onSelect
+      },
+      `${asset.contractAddress}-${asset.tokenId}`
+    )) }) : hasSearched && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-xs text-muted-foreground text-center py-4", children: [
+      'No assets match "',
+      query.trim(),
+      '".'
+    ] }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AssetSearchPicker
+});
+//# sourceMappingURL=asset-search-picker.cjs.map

package/dist/components/asset-search-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/asset-search-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Loader2, Search } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport type { OwnedAsset } from \"./asset-picker.js\";\nimport { AssetPickerCell, isSameAsset } from \"./asset-picker-cell.js\";\n\nexport interface AssetSearchPickerProps {\n  /** App-supplied search — the app owns the actual fetch (e.g. GET /v1/search).\n   *  Called only when the query is 2+ chars, debounced by this component. */\n  search: (query: string) => Promise<OwnedAsset[]>;\n  selected: OwnedAsset | null;\n  onSelect: (asset: OwnedAsset) => void;\n  placeholder?: string;\n  className?: string;\n}\n\nexport function AssetSearchPicker({\n  search, selected, onSelect, placeholder = \"Search for an asset or creator\", className,\n}: AssetSearchPickerProps) {\n  const [query, setQuery] = useState(\"\");\n  const [results, setResults] = useState<OwnedAsset[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasSearched, setHasSearched] = useState(false);\n\n  useEffect(() => {\n    const q = query.trim();\n    if (q.length < 2) {\n      setResults([]);\n      setHasSearched(false);\n      return;\n    }\n    let cancelled = false;\n    setIsLoading(true);\n    const timer = setTimeout(() => {\n      search(q)\n        .then((assets) => {\n          if (!cancelled) {\n            setResults(assets);\n            setHasSearched(true);\n          }\n        })\n        .finally(() => {\n          if (!cancelled) setIsLoading(false);\n        });\n    }, 350);\n    return () => {\n      cancelled = true;\n      clearTimeout(timer);\n    };\n  }, [query, search]);\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div className=\"relative\">\n        <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n        <input\n          type=\"text\"\n          value={query}\n          onChange={(e) => setQuery(e.target.value)}\n          placeholder={placeholder}\n          className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n        />\n        {isLoading ? (\n          <Loader2 className=\"absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground\" />\n        ) : null}\n      </div>\n\n      {query.trim().length > 0 && query.trim().length < 2 ? (\n        <p className=\"text-xs text-muted-foreground text-center py-2\">Keep typing — 2+ characters to search.</p>\n      ) : null}\n\n      {results.length > 0 ? (\n        <div className=\"grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5\">\n          {results.map((asset) => (\n            <AssetPickerCell\n              key={`${asset.contractAddress}-${asset.tokenId}`}\n              asset={asset}\n              active={isSameAsset(asset, selected)}\n              onSelect={onSelect}\n            />\n          ))}\n        </div>\n      ) : hasSearched && !isLoading ? (\n        <p className=\"text-xs text-muted-foreground text-center py-4\">No assets match &quot;{query.trim()}&quot;.</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuDM;AArDN,mBAAoC;AACpC,0BAAgC;AAChC,gBAAmB;AAEnB,+BAA6C;AAYtC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EAAQ;AAAA,EAAU;AAAA,EAAU,cAAc;AAAA,EAAkC;AAC9E,GAA2B;AACzB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAuB,CAAC,CAAC;AACvD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,8BAAU,MAAM;AACd,UAAM,IAAI,MAAM,KAAK;AACrB,QAAI,EAAE,SAAS,GAAG;AAChB,iBAAW,CAAC,CAAC;AACb,qBAAe,KAAK;AACpB;AAAA,IACF;AACA,QAAI,YAAY;AAChB,iBAAa,IAAI;AACjB,UAAM,QAAQ,WAAW,MAAM;AAC7B,aAAO,CAAC,EACL,KAAK,CAAC,WAAW;AAChB,YAAI,CAAC,WAAW;AACd,qBAAW,MAAM;AACjB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,CAAC,EACA,QAAQ,MAAM;AACb,YAAI,CAAC,UAAW,cAAa,KAAK;AAAA,MACpC,CAAC;AAAA,IACL,GAAG,GAAG;AACN,WAAO,MAAM;AACX,kBAAY;AACZ,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,SACE,6CAAC,SAAI,eAAW,cAAG,aAAa,SAAS,GACvC;AAAA,iDAAC,SAAI,WAAU,YACb;AAAA,kDAAC,8BAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC;AAAA,UACA,WAAU;AAAA;AAAA,MACZ;AAAA,MACC,YACC,4CAAC,+BAAQ,WAAU,wFAAuF,IACxG;AAAA,OACN;AAAA,IAEC,MAAM,KAAK,EAAE,SAAS,KAAK,MAAM,KAAK,EAAE,SAAS,IAChD,4CAAC,OAAE,WAAU,kDAAiD,yDAAsC,IAClG;AAAA,IAEH,QAAQ,SAAS,IAChB,4CAAC,SAAI,WAAU,2EACZ,kBAAQ,IAAI,CAAC,UACZ;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,YAAQ,sCAAY,OAAO,QAAQ;AAAA,QACnC;AAAA;AAAA,MAHK,GAAG,MAAM,eAAe,IAAI,MAAM,OAAO;AAAA,IAIhD,CACD,GACH,IACE,eAAe,CAAC,YAClB,6CAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,MAAuB,MAAM,KAAK;AAAA,MAAE;AAAA,OAAO,IACvG;AAAA,KACN;AAEJ;","names":[]}

package/dist/components/asset-search-picker.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OwnedAsset } from './asset-picker.cjs';
+
+interface AssetSearchPickerProps {
+    /** App-supplied search — the app owns the actual fetch (e.g. GET /v1/search).
+     *  Called only when the query is 2+ chars, debounced by this component. */
+    search: (query: string) => Promise<OwnedAsset[]>;
+    selected: OwnedAsset | null;
+    onSelect: (asset: OwnedAsset) => void;
+    placeholder?: string;
+    className?: string;
+}
+declare function AssetSearchPicker({ search, selected, onSelect, placeholder, className, }: AssetSearchPickerProps): react_jsx_runtime.JSX.Element;
+
+export { AssetSearchPicker, type AssetSearchPickerProps };

package/dist/components/asset-search-picker.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OwnedAsset } from './asset-picker.js';
+
+interface AssetSearchPickerProps {
+    /** App-supplied search — the app owns the actual fetch (e.g. GET /v1/search).
+     *  Called only when the query is 2+ chars, debounced by this component. */
+    search: (query: string) => Promise<OwnedAsset[]>;
+    selected: OwnedAsset | null;
+    onSelect: (asset: OwnedAsset) => void;
+    placeholder?: string;
+    className?: string;
+}
+declare function AssetSearchPicker({ search, selected, onSelect, placeholder, className, }: AssetSearchPickerProps): react_jsx_runtime.JSX.Element;
+
+export { AssetSearchPicker, type AssetSearchPickerProps };

package/dist/components/asset-search-picker.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Loader2, Search } from "lucide-react";
+import { cn } from "../utils/cn.js";
+import { AssetPickerCell, isSameAsset } from "./asset-picker-cell.js";
+function AssetSearchPicker({
+  search,
+  selected,
+  onSelect,
+  placeholder = "Search for an asset or creator",
+  className
+}) {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  useEffect(() => {
+    const q = query.trim();
+    if (q.length < 2) {
+      setResults([]);
+      setHasSearched(false);
+      return;
+    }
+    let cancelled = false;
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      search(q).then((assets) => {
+        if (!cancelled) {
+          setResults(assets);
+          setHasSearched(true);
+        }
+      }).finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+    }, 350);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [query, search]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder,
+          className: "w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40"
+        }
+      ),
+      isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" }) : null
+    ] }),
+    query.trim().length > 0 && query.trim().length < 2 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground text-center py-2", children: "Keep typing \u2014 2+ characters to search." }) : null,
+    results.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5", children: results.map((asset) => /* @__PURE__ */ jsx(
+      AssetPickerCell,
+      {
+        asset,
+        active: isSameAsset(asset, selected),
+        onSelect
+      },
+      `${asset.contractAddress}-${asset.tokenId}`
+    )) }) : hasSearched && !isLoading ? /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground text-center py-4", children: [
+      'No assets match "',
+      query.trim(),
+      '".'
+    ] }) : null
+  ] });
+}
+export {
+  AssetSearchPicker
+};
+//# sourceMappingURL=asset-search-picker.js.map

package/dist/components/asset-search-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/asset-search-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Loader2, Search } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport type { OwnedAsset } from \"./asset-picker.js\";\nimport { AssetPickerCell, isSameAsset } from \"./asset-picker-cell.js\";\n\nexport interface AssetSearchPickerProps {\n  /** App-supplied search — the app owns the actual fetch (e.g. GET /v1/search).\n   *  Called only when the query is 2+ chars, debounced by this component. */\n  search: (query: string) => Promise<OwnedAsset[]>;\n  selected: OwnedAsset | null;\n  onSelect: (asset: OwnedAsset) => void;\n  placeholder?: string;\n  className?: string;\n}\n\nexport function AssetSearchPicker({\n  search, selected, onSelect, placeholder = \"Search for an asset or creator\", className,\n}: AssetSearchPickerProps) {\n  const [query, setQuery] = useState(\"\");\n  const [results, setResults] = useState<OwnedAsset[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasSearched, setHasSearched] = useState(false);\n\n  useEffect(() => {\n    const q = query.trim();\n    if (q.length < 2) {\n      setResults([]);\n      setHasSearched(false);\n      return;\n    }\n    let cancelled = false;\n    setIsLoading(true);\n    const timer = setTimeout(() => {\n      search(q)\n        .then((assets) => {\n          if (!cancelled) {\n            setResults(assets);\n            setHasSearched(true);\n          }\n        })\n        .finally(() => {\n          if (!cancelled) setIsLoading(false);\n        });\n    }, 350);\n    return () => {\n      cancelled = true;\n      clearTimeout(timer);\n    };\n  }, [query, search]);\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div className=\"relative\">\n        <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n        <input\n          type=\"text\"\n          value={query}\n          onChange={(e) => setQuery(e.target.value)}\n          placeholder={placeholder}\n          className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n        />\n        {isLoading ? (\n          <Loader2 className=\"absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground\" />\n        ) : null}\n      </div>\n\n      {query.trim().length > 0 && query.trim().length < 2 ? (\n        <p className=\"text-xs text-muted-foreground text-center py-2\">Keep typing — 2+ characters to search.</p>\n      ) : null}\n\n      {results.length > 0 ? (\n        <div className=\"grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5\">\n          {results.map((asset) => (\n            <AssetPickerCell\n              key={`${asset.contractAddress}-${asset.tokenId}`}\n              asset={asset}\n              active={isSameAsset(asset, selected)}\n              onSelect={onSelect}\n            />\n          ))}\n        </div>\n      ) : hasSearched && !isLoading ? (\n        <p className=\"text-xs text-muted-foreground text-center py-4\">No assets match &quot;{query.trim()}&quot;.</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";AAuDM,SACE,KADF;AArDN,SAAS,WAAW,gBAAgB;AACpC,SAAS,SAAS,cAAc;AAChC,SAAS,UAAU;AAEnB,SAAS,iBAAiB,mBAAmB;AAYtC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EAAQ;AAAA,EAAU;AAAA,EAAU,cAAc;AAAA,EAAkC;AAC9E,GAA2B;AACzB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAC,CAAC;AACvD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,YAAU,MAAM;AACd,UAAM,IAAI,MAAM,KAAK;AACrB,QAAI,EAAE,SAAS,GAAG;AAChB,iBAAW,CAAC,CAAC;AACb,qBAAe,KAAK;AACpB;AAAA,IACF;AACA,QAAI,YAAY;AAChB,iBAAa,IAAI;AACjB,UAAM,QAAQ,WAAW,MAAM;AAC7B,aAAO,CAAC,EACL,KAAK,CAAC,WAAW;AAChB,YAAI,CAAC,WAAW;AACd,qBAAW,MAAM;AACjB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,CAAC,EACA,QAAQ,MAAM;AACb,YAAI,CAAC,UAAW,cAAa,KAAK;AAAA,MACpC,CAAC;AAAA,IACL,GAAG,GAAG;AACN,WAAO,MAAM;AACX,kBAAY;AACZ,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACvC;AAAA,yBAAC,SAAI,WAAU,YACb;AAAA,0BAAC,UAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC;AAAA,UACA,WAAU;AAAA;AAAA,MACZ;AAAA,MACC,YACC,oBAAC,WAAQ,WAAU,wFAAuF,IACxG;AAAA,OACN;AAAA,IAEC,MAAM,KAAK,EAAE,SAAS,KAAK,MAAM,KAAK,EAAE,SAAS,IAChD,oBAAC,OAAE,WAAU,kDAAiD,yDAAsC,IAClG;AAAA,IAEH,QAAQ,SAAS,IAChB,oBAAC,SAAI,WAAU,2EACZ,kBAAQ,IAAI,CAAC,UACZ;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,QAAQ,YAAY,OAAO,QAAQ;AAAA,QACnC;AAAA;AAAA,MAHK,GAAG,MAAM,eAAe,IAAI,MAAM,OAAO;AAAA,IAIhD,CACD,GACH,IACE,eAAe,CAAC,YAClB,qBAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,MAAuB,MAAM,KAAK;AAAA,MAAE;AAAA,OAAO,IACvG;AAAA,KACN;AAEJ;","names":[]}