@medialane/ui 0.285.0 → 0.286.0

package/dist/components/marketplace-filters.js

@@ -0,0 +1,216 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "./link.js";
+import { usePathname } from "next/navigation";
+import { SlidersHorizontal } from "lucide-react";
+import { getTokenBySymbol, parseAmount, SUPPORTED_TOKENS } from "@medialane/sdk";
+import { Input } from "./input.js";
+import { Button } from "./button.js";
+import { Dialog, DialogContent, DialogTitle } from "./dialog.js";
+import { CurrencyIcon } from "./currency-icon.js";
+import { HelpIcon } from "./help-icon.js";
+import { IP_TYPES } from "../data/ip.js";
+import { useDebouncedValue } from "../utils/use-debounced-value.js";
+import { cn } from "../utils/cn.js";
+const SORT_OPTIONS = [
+  { label: "Recent", value: "recent" },
+  { label: "Price \u2191", value: "price_asc" },
+  { label: "Price \u2193", value: "price_desc" }
+];
+const TYPE_OPTIONS = [
+  { label: "All", value: "" },
+  { label: "Listings", value: "listings" },
+  { label: "Offers", value: "offers" }
+];
+const CURRENCY_OPTIONS = SUPPORTED_TOKENS.map((t) => ({
+  label: t.symbol,
+  value: t.symbol,
+  icon: /* @__PURE__ */ jsx(CurrencyIcon, { symbol: t.symbol, size: 13 })
+}));
+function toRawAmount(value, decimals) {
+  const trimmed = value.trim();
+  if (!trimmed) return void 0;
+  try {
+    return parseAmount(trimmed, decimals);
+  } catch {
+    return void 0;
+  }
+}
+function useMarketplaceFilters() {
+  const [open, setOpen] = useState(false);
+  const [sort, setSort] = useState("recent");
+  const [currency, setCurrency] = useState("");
+  const [orderType, setOrderType] = useState("");
+  const [minInput, setMinInput] = useState("");
+  const [maxInput, setMaxInput] = useState("");
+  const debouncedMin = useDebouncedValue(minInput, 400);
+  const debouncedMax = useDebouncedValue(maxInput, 400);
+  const decimals = getTokenBySymbol(currency)?.decimals ?? 18;
+  const minPrice = minInput ? toRawAmount(debouncedMin, decimals) : void 0;
+  const maxPrice = maxInput ? toRawAmount(debouncedMax, decimals) : void 0;
+  const clearPrice = () => {
+    setMinInput("");
+    setMaxInput("");
+  };
+  const selectCurrency = (symbol) => {
+    setCurrency(currency === symbol ? "" : symbol);
+    clearPrice();
+  };
+  const reset = () => {
+    setSort("recent");
+    setCurrency("");
+    setOrderType("");
+    clearPrice();
+  };
+  const count = [sort !== "recent", currency, orderType, minPrice || maxPrice].filter(Boolean).length;
+  return {
+    open,
+    setOpen,
+    sort,
+    setSort,
+    currency,
+    selectCurrency,
+    orderType,
+    setOrderType,
+    minInput,
+    setMinInput,
+    maxInput,
+    setMaxInput,
+    minPrice,
+    maxPrice,
+    clearPrice,
+    reset,
+    count
+  };
+}
+const chipClass = (active) => cn(
+  "inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full border transition-colors whitespace-nowrap",
+  active ? "border-primary bg-primary/10 text-primary font-medium" : "border-border text-muted-foreground hover:border-primary/50"
+);
+function ChipGroup({ title, options, value, onSelect }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-2xs font-semibold text-muted-foreground", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: options.map((opt) => /* @__PURE__ */ jsxs("button", { onClick: () => onSelect(opt.value), className: chipClass(value === opt.value), children: [
+      opt.icon,
+      /* @__PURE__ */ jsx("span", { children: opt.label })
+    ] }, opt.value)) })
+  ] });
+}
+function IpTypeChip({ href, label }) {
+  const pathname = usePathname();
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href,
+      className: cn(
+        "text-xs px-3 py-1 rounded-full border transition-colors whitespace-nowrap",
+        pathname === href ? "border-primary bg-primary/10 text-primary font-medium" : "border-border text-muted-foreground hover:border-primary/50 hover:text-foreground"
+      ),
+      children: label
+    }
+  );
+}
+function ActiveChip({ children, onClear }) {
+  return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs px-2.5 py-1 rounded-full border border-primary/40 bg-primary/10 text-primary", children: [
+    children,
+    /* @__PURE__ */ jsx("button", { onClick: onClear, className: "ml-0.5 hover:text-primary/60", children: "\xD7" })
+  ] });
+}
+function FiltersButton({ filters }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => filters.setOpen(true),
+      className: cn(
+        "relative flex items-center gap-1.5 h-9 px-3 rounded-lg border text-xs font-medium transition-colors shrink-0",
+        filters.count > 0 ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:border-primary/50 hover:text-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+        "Filters",
+        filters.count > 0 && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-primary text-2xs font-bold text-primary-foreground", children: filters.count })
+      ]
+    }
+  );
+}
+function ActiveFilters({ filters }) {
+  const { sort, setSort, orderType, setOrderType, currency, selectCurrency, minPrice, maxPrice, minInput, maxInput, clearPrice, count } = filters;
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+    sort !== "recent" && /* @__PURE__ */ jsx(ActiveChip, { onClear: () => setSort("recent"), children: SORT_OPTIONS.find((o) => o.value === sort)?.label }),
+    orderType && /* @__PURE__ */ jsx(ActiveChip, { onClear: () => setOrderType(""), children: TYPE_OPTIONS.find((o) => o.value === orderType)?.label }),
+    currency && /* @__PURE__ */ jsxs(ActiveChip, { onClear: () => selectCurrency(currency), children: [
+      /* @__PURE__ */ jsx(CurrencyIcon, { symbol: currency, size: 12 }),
+      currency
+    ] }),
+    (minPrice || maxPrice) && /* @__PURE__ */ jsxs(ActiveChip, { onClear: clearPrice, children: [
+      minInput || "0",
+      " \u2013 ",
+      maxInput || "\u221E"
+    ] })
+  ] });
+}
+function FiltersDialog({ filters }) {
+  const { open, setOpen, sort, setSort, orderType, setOrderType, currency, selectCurrency, minInput, setMinInput, maxInput, setMaxInput, reset, count } = filters;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-full max-w-sm sm:max-w-md p-0 overflow-hidden gap-0 flex flex-col max-h-[85svh]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-border/60 pr-12", children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "text-base font-bold flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 text-primary" }),
+        "Filters"
+      ] }),
+      count > 0 && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-7 text-xs text-muted-foreground", onClick: reset, children: "Clear all" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-5 py-4 space-y-5", children: [
+      /* @__PURE__ */ jsx(ChipGroup, { title: "Sort", options: SORT_OPTIONS, value: sort, onSelect: setSort }),
+      /* @__PURE__ */ jsx(ChipGroup, { title: "Order type", options: TYPE_OPTIONS, value: orderType, onSelect: setOrderType }),
+      /* @__PURE__ */ jsx(ChipGroup, { title: "Currency", options: CURRENCY_OPTIONS, value: currency, onSelect: selectCurrency }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-2xs font-semibold text-muted-foreground", children: "Price range" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: "Min",
+              value: minInput,
+              onChange: (e) => setMinInput(e.target.value),
+              className: "h-9 text-sm",
+              type: "number",
+              min: "0"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground shrink-0", children: "\u2013" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: "Max",
+              value: maxInput,
+              onChange: (e) => setMaxInput(e.target.value),
+              className: "h-9 text-sm",
+              type: "number",
+              min: "0"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2 pt-1 border-t border-border/60", children: [
+        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-2xs font-semibold text-muted-foreground", children: [
+          "IP Type",
+          /* @__PURE__ */ jsx(HelpIcon, { content: "Filter by intellectual property category \u2014 Art, Audio, Video, Software, and more", side: "right" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+          /* @__PURE__ */ jsx(IpTypeChip, { href: "/marketplace", label: "All" }),
+          IP_TYPES.map((type) => /* @__PURE__ */ jsx(IpTypeChip, { href: `/${type.toLowerCase()}`, label: type }, type))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-5 py-3 border-t border-border/60", children: /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: () => setOpen(false), children: "Apply filters" }) })
+  ] }) });
+}
+export {
+  ActiveFilters,
+  FiltersButton,
+  FiltersDialog,
+  useMarketplaceFilters
+};
+//# sourceMappingURL=marketplace-filters.js.map

package/dist/components/marketplace-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/marketplace-filters.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport Link from \"./link.js\";\nimport { usePathname } from \"next/navigation\";\nimport { SlidersHorizontal } from \"lucide-react\";\nimport { getTokenBySymbol, parseAmount, SUPPORTED_TOKENS } from \"@medialane/sdk\";\nimport { Input } from \"./input.js\";\nimport { Button } from \"./button.js\";\nimport { Dialog, DialogContent, DialogTitle } from \"./dialog.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { HelpIcon } from \"./help-icon.js\";\nimport { IP_TYPES } from \"../data/ip.js\";\nimport { useDebouncedValue } from \"../utils/use-debounced-value.js\";\nimport { cn } from \"../utils/cn.js\";\n\nconst SORT_OPTIONS = [\n  { label: \"Recent\", value: \"recent\" },\n  { label: \"Price ↑\", value: \"price_asc\" },\n  { label: \"Price ↓\", value: \"price_desc\" },\n];\n\nconst TYPE_OPTIONS = [\n  { label: \"All\", value: \"\" },\n  { label: \"Listings\", value: \"listings\" },\n  { label: \"Offers\", value: \"offers\" },\n];\n\nconst CURRENCY_OPTIONS = SUPPORTED_TOKENS.map((t) => ({\n  label: t.symbol,\n  value: t.symbol,\n  icon: <CurrencyIcon symbol={t.symbol} size={13} />,\n}));\n\nfunction toRawAmount(value: string, decimals: number): string | undefined {\n  const trimmed = value.trim();\n  if (!trimmed) return undefined;\n  try {\n    return parseAmount(trimmed, decimals);\n  } catch {\n    return undefined;\n  }\n}\n\nexport function useMarketplaceFilters() {\n  const [open, setOpen] = useState(false);\n  const [sort, setSort] = useState(\"recent\");\n  const [currency, setCurrency] = useState(\"\");\n  const [orderType, setOrderType] = useState(\"\");\n  const [minInput, setMinInput] = useState(\"\");\n  const [maxInput, setMaxInput] = useState(\"\");\n  const debouncedMin = useDebouncedValue(minInput, 400);\n  const debouncedMax = useDebouncedValue(maxInput, 400);\n\n  const decimals = getTokenBySymbol(currency)?.decimals ?? 18;\n  const minPrice = minInput ? toRawAmount(debouncedMin, decimals) : undefined;\n  const maxPrice = maxInput ? toRawAmount(debouncedMax, decimals) : undefined;\n\n  const clearPrice = () => {\n    setMinInput(\"\");\n    setMaxInput(\"\");\n  };\n\n  const selectCurrency = (symbol: string) => {\n    setCurrency(currency === symbol ? \"\" : symbol);\n    clearPrice();\n  };\n\n  const reset = () => {\n    setSort(\"recent\");\n    setCurrency(\"\");\n    setOrderType(\"\");\n    clearPrice();\n  };\n\n  const count = [sort !== \"recent\", currency, orderType, minPrice || maxPrice].filter(Boolean).length;\n\n  return {\n    open, setOpen,\n    sort, setSort,\n    currency, selectCurrency,\n    orderType, setOrderType,\n    minInput, setMinInput,\n    maxInput, setMaxInput,\n    minPrice, maxPrice,\n    clearPrice, reset, count,\n  };\n}\n\nexport type MarketplaceFilters = ReturnType<typeof useMarketplaceFilters>;\n\nconst chipClass = (active: boolean) =>\n  cn(\n    \"inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full border transition-colors whitespace-nowrap\",\n    active\n      ? \"border-primary bg-primary/10 text-primary font-medium\"\n      : \"border-border text-muted-foreground hover:border-primary/50\"\n  );\n\nfunction ChipGroup({ title, options, value, onSelect }: {\n  title: string;\n  options: { label: string; value: string; icon?: ReactNode }[];\n  value: string;\n  onSelect: (value: string) => void;\n}) {\n  return (\n    <div className=\"space-y-2\">\n      <p className=\"text-2xs font-semibold text-muted-foreground\">{title}</p>\n      <div className=\"flex flex-wrap gap-1.5\">\n        {options.map((opt) => (\n          <button key={opt.value} onClick={() => onSelect(opt.value)} className={chipClass(value === opt.value)}>\n            {opt.icon}\n            <span>{opt.label}</span>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction IpTypeChip({ href, label }: { href: string; label: string }) {\n  const pathname = usePathname();\n  return (\n    <Link\n      href={href}\n      className={cn(\n        \"text-xs px-3 py-1 rounded-full border transition-colors whitespace-nowrap\",\n        pathname === href\n          ? \"border-primary bg-primary/10 text-primary font-medium\"\n          : \"border-border text-muted-foreground hover:border-primary/50 hover:text-foreground\"\n      )}\n    >\n      {label}\n    </Link>\n  );\n}\n\nfunction ActiveChip({ children, onClear }: { children: ReactNode; onClear: () => void }) {\n  return (\n    <span className=\"flex items-center gap-1 text-xs px-2.5 py-1 rounded-full border border-primary/40 bg-primary/10 text-primary\">\n      {children}\n      <button onClick={onClear} className=\"ml-0.5 hover:text-primary/60\">×</button>\n    </span>\n  );\n}\n\nexport function FiltersButton({ filters }: { filters: MarketplaceFilters }) {\n  return (\n    <button\n      onClick={() => filters.setOpen(true)}\n      className={cn(\n        \"relative flex items-center gap-1.5 h-9 px-3 rounded-lg border text-xs font-medium transition-colors shrink-0\",\n        filters.count > 0\n          ? \"border-primary bg-primary/10 text-primary\"\n          : \"border-border text-muted-foreground hover:border-primary/50 hover:text-foreground\"\n      )}\n    >\n      <SlidersHorizontal className=\"h-3.5 w-3.5\" />\n      Filters\n      {filters.count > 0 && (\n        <span className=\"flex h-4 w-4 items-center justify-center rounded-full bg-primary text-2xs font-bold text-primary-foreground\">\n          {filters.count}\n        </span>\n      )}\n    </button>\n  );\n}\n\nexport function ActiveFilters({ filters }: { filters: MarketplaceFilters }) {\n  const { sort, setSort, orderType, setOrderType, currency, selectCurrency, minPrice, maxPrice, minInput, maxInput, clearPrice, count } = filters;\n  if (count === 0) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1.5\">\n      {sort !== \"recent\" && (\n        <ActiveChip onClear={() => setSort(\"recent\")}>{SORT_OPTIONS.find((o) => o.value === sort)?.label}</ActiveChip>\n      )}\n      {orderType && (\n        <ActiveChip onClear={() => setOrderType(\"\")}>{TYPE_OPTIONS.find((o) => o.value === orderType)?.label}</ActiveChip>\n      )}\n      {currency && (\n        <ActiveChip onClear={() => selectCurrency(currency)}>\n          <CurrencyIcon symbol={currency} size={12} />\n          {currency}\n        </ActiveChip>\n      )}\n      {(minPrice || maxPrice) && (\n        <ActiveChip onClear={clearPrice}>{minInput || \"0\"} – {maxInput || \"∞\"}</ActiveChip>\n      )}\n    </div>\n  );\n}\n\nexport function FiltersDialog({ filters }: { filters: MarketplaceFilters }) {\n  const { open, setOpen, sort, setSort, orderType, setOrderType, currency, selectCurrency, minInput, setMinInput, maxInput, setMaxInput, reset, count } = filters;\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogContent className=\"w-full max-w-sm sm:max-w-md p-0 overflow-hidden gap-0 flex flex-col max-h-[85svh]\">\n\n        <div className=\"flex items-center justify-between px-5 py-4 border-b border-border/60 pr-12\">\n          <DialogTitle className=\"text-base font-bold flex items-center gap-2\">\n            <SlidersHorizontal className=\"h-4 w-4 text-primary\" />\n            Filters\n          </DialogTitle>\n          {count > 0 && (\n            <Button variant=\"ghost\" size=\"sm\" className=\"h-7 text-xs text-muted-foreground\" onClick={reset}>\n              Clear all\n            </Button>\n          )}\n        </div>\n\n        <div className=\"flex-1 overflow-y-auto px-5 py-4 space-y-5\">\n          <ChipGroup title=\"Sort\" options={SORT_OPTIONS} value={sort} onSelect={setSort} />\n          <ChipGroup title=\"Order type\" options={TYPE_OPTIONS} value={orderType} onSelect={setOrderType} />\n          <ChipGroup title=\"Currency\" options={CURRENCY_OPTIONS} value={currency} onSelect={selectCurrency} />\n\n          <div className=\"space-y-2\">\n            <p className=\"text-2xs font-semibold text-muted-foreground\">Price range</p>\n            <div className=\"flex items-center gap-2\">\n              <Input\n                placeholder=\"Min\"\n                value={minInput}\n                onChange={(e) => setMinInput(e.target.value)}\n                className=\"h-9 text-sm\"\n                type=\"number\"\n                min=\"0\"\n              />\n              <span className=\"text-sm text-muted-foreground shrink-0\">–</span>\n              <Input\n                placeholder=\"Max\"\n                value={maxInput}\n                onChange={(e) => setMaxInput(e.target.value)}\n                className=\"h-9 text-sm\"\n                type=\"number\"\n                min=\"0\"\n              />\n            </div>\n          </div>\n\n          <div className=\"space-y-2 pt-1 border-t border-border/60\">\n            <p className=\"flex items-center gap-1 text-2xs font-semibold text-muted-foreground\">\n              IP Type\n              <HelpIcon content=\"Filter by intellectual property category — Art, Audio, Video, Software, and more\" side=\"right\" />\n            </p>\n            <div className=\"flex flex-wrap gap-1.5\">\n              <IpTypeChip href=\"/marketplace\" label=\"All\" />\n              {IP_TYPES.map((type) => (\n                <IpTypeChip key={type} href={`/${type.toLowerCase()}`} label={type} />\n              ))}\n            </div>\n          </div>\n        </div>\n\n        <div className=\"px-5 py-3 border-t border-border/60\">\n          <Button className=\"w-full\" onClick={() => setOpen(false)}>\n            Apply filters\n          </Button>\n        </div>\n\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/marketplace-search.cjs

@@ -0,0 +1,175 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var marketplace_search_exports = {};
+__export(marketplace_search_exports, {
+  MarketplaceSearch: () => MarketplaceSearch,
+  SearchInput: () => SearchInput
+});
+module.exports = __toCommonJS(marketplace_search_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_navigation = require("next/navigation");
+var import_image = __toESM(require("./image.js"), 1);
+var import_link = __toESM(require("./link.js"), 1);
+var import_lucide_react = require("lucide-react");
+var import_sdk = require("@medialane/sdk");
+var import_input = require("./input.js");
+var import_use_medialane_client = require("../utils/use-medialane-client.js");
+var import_use_debounced_value = require("../utils/use-debounced-value.js");
+var import_use_image_url = require("../utils/use-image-url.js");
+function SearchInput({ value, onClear, ...props }) {
+  return /* @__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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input.Input, { value, className: "pl-9 pr-9", ...props }),
+    value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+        onClick: onClear,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-3.5 w-3.5" })
+      }
+    )
+  ] });
+}
+function MarketplaceSearch() {
+  const resolveImage = (0, import_use_image_url.useImageUrl)();
+  const client = (0, import_use_medialane_client.useMedialaneClient)();
+  const router = (0, import_navigation.useRouter)();
+  const [query, setQuery] = (0, import_react.useState)("");
+  const [results, setResults] = (0, import_react.useState)(null);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const debouncedQuery = (0, import_use_debounced_value.useDebouncedValue)(query.trim(), 300);
+  (0, import_react.useEffect)(() => {
+    if (!debouncedQuery) {
+      setResults(null);
+      setOpen(false);
+      return;
+    }
+    let current = true;
+    client.api.search(debouncedQuery, 8).then((res) => {
+      if (!current) return;
+      setResults(res.data);
+      setOpen(true);
+    }).catch(() => {
+      if (current) setResults(null);
+    });
+    return () => {
+      current = false;
+    };
+  }, [debouncedQuery, client]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && query.trim()) {
+      setOpen(false);
+      router.push(`/search?q=${encodeURIComponent(query.trim())}`);
+    }
+  };
+  const hasResults = results && ((results.tokens?.length ?? 0) > 0 || (results.collections?.length ?? 0) > 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full sm:max-w-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SearchInput,
+      {
+        placeholder: "Search creative works",
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        onKeyDown: handleKeyDown,
+        onFocus: () => hasResults && setOpen(true),
+        onBlur: () => setOpen(false),
+        onClear: () => {
+          setQuery("");
+          setResults(null);
+          setOpen(false);
+        }
+      }
+    ),
+    open && hasResults && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        onMouseDown: (e) => e.preventDefault(),
+        className: "absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-xl shadow-lg z-50 overflow-hidden",
+        children: [
+          (results.tokens?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-1.5 text-2xs font-semibold text-muted-foreground bg-muted/30", children: "Tokens" }),
+            results.tokens.map((t) => {
+              const img = resolveImage(t.image);
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_link.default,
+                {
+                  href: (0, import_sdk.assetHref)("STARKNET", t.contractAddress, t.tokenId),
+                  className: "flex items-center gap-3 px-3 py-2.5 hover:bg-muted/50 transition-colors",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-8 w-8 rounded-lg bg-muted shrink-0 overflow-hidden", children: img && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: img, alt: "", fill: true, className: "object-cover", unoptimized: true }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium truncate", children: t.name ?? `Token #${t.tokenId}` }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-xs text-muted-foreground tabular-nums truncate", children: [
+                        t.contractAddress.slice(0, 14),
+                        "\u2026"
+                      ] })
+                    ] })
+                  ]
+                },
+                `${t.contractAddress}-${t.tokenId}`
+              );
+            })
+          ] }),
+          (results.collections?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-1.5 text-2xs font-semibold text-muted-foreground bg-muted/30", children: "Collections" }),
+            results.collections.map((c) => {
+              const imgUrl = resolveImage(c.image);
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_link.default,
+                {
+                  href: (0, import_sdk.collectionHref)("STARKNET", c.contractAddress),
+                  className: "flex items-center gap-3 px-3 py-2.5 hover:bg-muted/50 transition-colors",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-8 w-8 rounded-lg bg-gradient-to-br from-primary/20 to-brand-purple/20 flex items-center justify-center text-xs font-bold shrink-0 overflow-hidden", children: imgUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: imgUrl, alt: "", fill: true, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: c.name?.charAt(0) ?? "?" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium truncate", children: c.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-xs text-muted-foreground tabular-nums truncate", children: [
+                        c.contractAddress.slice(0, 14),
+                        "\u2026"
+                      ] })
+                    ] })
+                  ]
+                },
+                c.contractAddress
+              );
+            })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MarketplaceSearch,
+  SearchInput
+});
+//# sourceMappingURL=marketplace-search.cjs.map

package/dist/components/marketplace-search.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/marketplace-search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, type ComponentProps } from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport Image from \"./image.js\";\nimport Link from \"./link.js\";\nimport { Search, X } from \"lucide-react\";\nimport { assetHref, collectionHref, type ApiSearchResult } from \"@medialane/sdk\";\nimport { Input } from \"./input.js\";\nimport { useMedialaneClient } from \"../utils/use-medialane-client.js\";\nimport { useDebouncedValue } from \"../utils/use-debounced-value.js\";\nimport { useImageUrl } from \"../utils/use-image-url.js\";\n\nexport function SearchInput({ value, onClear, ...props }: ComponentProps<typeof Input> & { value: string; onClear: () => void }) {\n  return (\n    <div className=\"relative\">\n      <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n      <Input value={value} className=\"pl-9 pr-9\" {...props} />\n      {value && (\n        <button\n          className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n          onClick={onClear}\n        >\n          <X className=\"h-3.5 w-3.5\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function MarketplaceSearch() {\n  const resolveImage = useImageUrl();\n  const client = useMedialaneClient();\n  const router = useRouter();\n  const [query, setQuery] = useState(\"\");\n  const [results, setResults] = useState<ApiSearchResult | null>(null);\n  const [open, setOpen] = useState(false);\n  const debouncedQuery = useDebouncedValue(query.trim(), 300);\n\n  useEffect(() => {\n    if (!debouncedQuery) {\n      setResults(null);\n      setOpen(false);\n      return;\n    }\n    let current = true;\n    client.api\n      .search(debouncedQuery, 8)\n      .then((res) => {\n        if (!current) return;\n        setResults(res.data);\n        setOpen(true);\n      })\n      .catch(() => {\n        if (current) setResults(null);\n      });\n    return () => {\n      current = false;\n    };\n  }, [debouncedQuery, client]);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" && query.trim()) {\n      setOpen(false);\n      router.push(`/search?q=${encodeURIComponent(query.trim())}`);\n    }\n  };\n\n  const hasResults =\n    results && ((results.tokens?.length ?? 0) > 0 || (results.collections?.length ?? 0) > 0);\n\n  return (\n    <div className=\"relative w-full sm:max-w-sm\">\n      <SearchInput\n        placeholder=\"Search creative works\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        onKeyDown={handleKeyDown}\n        onFocus={() => hasResults && setOpen(true)}\n        onBlur={() => setOpen(false)}\n        onClear={() => { setQuery(\"\"); setResults(null); setOpen(false); }}\n      />\n\n      {open && hasResults && (\n        <div\n          onMouseDown={(e) => e.preventDefault()}\n          className=\"absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-xl shadow-lg z-50 overflow-hidden\"\n        >\n          {(results.tokens?.length ?? 0) > 0 && (\n            <div>\n              <div className=\"px-3 py-1.5 text-2xs font-semibold text-muted-foreground bg-muted/30\">\n                Tokens\n              </div>\n              {results.tokens!.map((t) => {\n                const img = resolveImage(t.image);\n                return (\n                  <Link\n                    key={`${t.contractAddress}-${t.tokenId}`}\n                    href={assetHref(\"STARKNET\", t.contractAddress, t.tokenId)}\n                    className=\"flex items-center gap-3 px-3 py-2.5 hover:bg-muted/50 transition-colors\"\n                  >\n                    <div className=\"relative h-8 w-8 rounded-lg bg-muted shrink-0 overflow-hidden\">\n                      {img && <Image src={img} alt=\"\" fill className=\"object-cover\" unoptimized />}\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"text-sm font-medium truncate\">{t.name ?? `Token #${t.tokenId}`}</p>\n                      <p className=\"text-xs text-muted-foreground tabular-nums truncate\">{t.contractAddress.slice(0, 14)}…</p>\n                    </div>\n                  </Link>\n                );\n              })}\n            </div>\n          )}\n          {(results.collections?.length ?? 0) > 0 && (\n            <div>\n              <div className=\"px-3 py-1.5 text-2xs font-semibold text-muted-foreground bg-muted/30\">\n                Collections\n              </div>\n              {results.collections!.map((c) => {\n                const imgUrl = resolveImage(c.image);\n                return (\n                  <Link\n                    key={c.contractAddress}\n                    href={collectionHref(\"STARKNET\", c.contractAddress)}\n                    className=\"flex items-center gap-3 px-3 py-2.5 hover:bg-muted/50 transition-colors\"\n                  >\n                    <div className=\"relative h-8 w-8 rounded-lg bg-gradient-to-br from-primary/20 to-brand-purple/20 flex items-center justify-center text-xs font-bold shrink-0 overflow-hidden\">\n                      {imgUrl ? (\n                        <Image src={imgUrl} alt=\"\" fill className=\"object-cover\" unoptimized />\n                      ) : (\n                        <span>{c.name?.charAt(0) ?? \"?\"}</span>\n                      )}\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"text-sm font-medium truncate\">{c.name}</p>\n                      <p className=\"text-xs text-muted-foreground tabular-nums truncate\">{c.contractAddress.slice(0, 14)}…</p>\n                    </div>\n                  </Link>\n                );\n              })}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Link","Image"]}

package/dist/components/marketplace-search.d.cts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Input } from './input.cjs';
+
+declare function SearchInput({ value, onClear, ...props }: ComponentProps<typeof Input> & {
+    value: string;
+    onClear: () => void;
+}): react_jsx_runtime.JSX.Element;
+declare function MarketplaceSearch(): react_jsx_runtime.JSX.Element;
+
+export { MarketplaceSearch, SearchInput };

package/dist/components/marketplace-search.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Input } from './input.js';
+
+declare function SearchInput({ value, onClear, ...props }: ComponentProps<typeof Input> & {
+    value: string;
+    onClear: () => void;
+}): react_jsx_runtime.JSX.Element;
+declare function MarketplaceSearch(): react_jsx_runtime.JSX.Element;
+
+export { MarketplaceSearch, SearchInput };

package/dist/components/marketplace-search.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Image from "./image.js";
+import Link from "./link.js";
+import { Search, X } from "lucide-react";
+import { assetHref, collectionHref } from "@medialane/sdk";
+import { Input } from "./input.js";
+import { useMedialaneClient } from "../utils/use-medialane-client.js";
+import { useDebouncedValue } from "../utils/use-debounced-value.js";
+import { useImageUrl } from "../utils/use-image-url.js";
+function SearchInput({ value, onClear, ...props }) {
+  return /* @__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" }),
+    /* @__PURE__ */ jsx(Input, { value, className: "pl-9 pr-9", ...props }),
+    value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+        onClick: onClear,
+        children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+      }
+    )
+  ] });
+}
+function MarketplaceSearch() {
+  const resolveImage = useImageUrl();
+  const client = useMedialaneClient();
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState(null);
+  const [open, setOpen] = useState(false);
+  const debouncedQuery = useDebouncedValue(query.trim(), 300);
+  useEffect(() => {
+    if (!debouncedQuery) {
+      setResults(null);
+      setOpen(false);
+      return;
+    }
+    let current = true;
+    client.api.search(debouncedQuery, 8).then((res) => {
+      if (!current) return;
+      setResults(res.data);
+      setOpen(true);
+    }).catch(() => {
+      if (current) setResults(null);
+    });
+    return () => {
+      current = false;
+    };
+  }, [debouncedQuery, client]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && query.trim()) {
+      setOpen(false);
+      router.push(`/search?q=${encodeURIComponent(query.trim())}`);
+    }
+  };
+  const hasResults = results && ((results.tokens?.length ?? 0) > 0 || (results.collections?.length ?? 0) > 0);
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full sm:max-w-sm", children: [
+    /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        placeholder: "Search creative works",
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        onKeyDown: handleKeyDown,
+        onFocus: () => hasResults && setOpen(true),
+        onBlur: () => setOpen(false),
+        onClear: () => {
+          setQuery("");
+          setResults(null);
+          setOpen(false);
+        }
+      }
+    ),
+    open && hasResults && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onMouseDown: (e) => e.preventDefault(),
+        className: "absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-xl shadow-lg z-50 overflow-hidden",
+        children: [
+          (results.tokens?.length ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-2xs font-semibold text-muted-foreground bg-muted/30", children: "Tokens" }),
+            results.tokens.map((t) => {
+              const img = resolveImage(t.image);
+              return /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  href: assetHref("STARKNET", t.contractAddress, t.tokenId),
+                  className: "flex items-center gap-3 px-3 py-2.5 hover:bg-muted/50 transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "relative h-8 w-8 rounded-lg bg-muted shrink-0 overflow-hidden", children: img && /* @__PURE__ */ jsx(Image, { src: img, alt: "", fill: true, className: "object-cover", unoptimized: true }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: t.name ?? `Token #${t.tokenId}` }),
+                      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground tabular-nums truncate", children: [
+                        t.contractAddress.slice(0, 14),
+                        "\u2026"
+                      ] })
+                    ] })
+                  ]
+                },
+                `${t.contractAddress}-${t.tokenId}`
+              );
+            })
+          ] }),
+          (results.collections?.length ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-2xs font-semibold text-muted-foreground bg-muted/30", children: "Collections" }),
+            results.collections.map((c) => {
+              const imgUrl = resolveImage(c.image);
+              return /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  href: collectionHref("STARKNET", c.contractAddress),
+                  className: "flex items-center gap-3 px-3 py-2.5 hover:bg-muted/50 transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "relative h-8 w-8 rounded-lg bg-gradient-to-br from-primary/20 to-brand-purple/20 flex items-center justify-center text-xs font-bold shrink-0 overflow-hidden", children: imgUrl ? /* @__PURE__ */ jsx(Image, { src: imgUrl, alt: "", fill: true, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx("span", { children: c.name?.charAt(0) ?? "?" }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: c.name }),
+                      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground tabular-nums truncate", children: [
+                        c.contractAddress.slice(0, 14),
+                        "\u2026"
+                      ] })
+                    ] })
+                  ]
+                },
+                c.contractAddress
+              );
+            })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  MarketplaceSearch,
+  SearchInput
+};
+//# sourceMappingURL=marketplace-search.js.map

package/dist/components/marketplace-search.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/marketplace-search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, type ComponentProps } from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport Image from \"./image.js\";\nimport Link from \"./link.js\";\nimport { Search, X } from \"lucide-react\";\nimport { assetHref, collectionHref, type ApiSearchResult } from \"@medialane/sdk\";\nimport { Input } from \"./input.js\";\nimport { useMedialaneClient } from \"../utils/use-medialane-client.js\";\nimport { useDebouncedValue } from \"../utils/use-debounced-value.js\";\nimport { useImageUrl } from \"../utils/use-image-url.js\";\n\nexport function SearchInput({ value, onClear, ...props }: ComponentProps<typeof Input> & { value: string; onClear: () => void }) {\n  return (\n    <div className=\"relative\">\n      <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n      <Input value={value} className=\"pl-9 pr-9\" {...props} />\n      {value && (\n        <button\n          className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n          onClick={onClear}\n        >\n          <X className=\"h-3.5 w-3.5\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function MarketplaceSearch() {\n  const resolveImage = useImageUrl();\n  const client = useMedialaneClient();\n  const router = useRouter();\n  const [query, setQuery] = useState(\"\");\n  const [results, setResults] = useState<ApiSearchResult | null>(null);\n  const [open, setOpen] = useState(false);\n  const debouncedQuery = useDebouncedValue(query.trim(), 300);\n\n  useEffect(() => {\n    if (!debouncedQuery) {\n      setResults(null);\n      setOpen(false);\n      return;\n    }\n    let current = true;\n    client.api\n      .search(debouncedQuery, 8)\n      .then((res) => {\n        if (!current) return;\n        setResults(res.data);\n        setOpen(true);\n      })\n      .catch(() => {\n        if (current) setResults(null);\n      });\n    return () => {\n      current = false;\n    };\n  }, [debouncedQuery, client]);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" && query.trim()) {\n      setOpen(false);\n      router.push(`/search?q=${encodeURIComponent(query.trim())}`);\n    }\n  };\n\n  const hasResults =\n    results && ((results.tokens?.length ?? 0) > 0 || (results.collections?.length ?? 0) > 0);\n\n  return (\n    <div className=\"relative w-full sm:max-w-sm\">\n      <SearchInput\n        placeholder=\"Search creative works\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        onKeyDown={handleKeyDown}\n        onFocus={() => hasResults && setOpen(true)}\n        onBlur={() => setOpen(false)}\n        onClear={() => { setQuery(\"\"); setResults(null); setOpen(false); }}\n      />\n\n      {open && hasResults && (\n        <div\n          onMouseDown={(e) => e.preventDefault()}\n          className=\"absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-xl shadow-lg z-50 overflow-hidden\"\n        >\n          {(results.tokens?.length ?? 0) > 0 && (\n            <div>\n              <div className=\"px-3 py-1.5 text-2xs font-semibold text-muted-foreground bg-muted/30\">\n                Tokens\n              </div>\n              {results.tokens!.map((t) => {\n                const img = resolveImage(t.image);\n                return (\n                  <Link\n                    key={`${t.contractAddress}-${t.tokenId}`}\n                    href={assetHref(\"STARKNET\", t.contractAddress, t.tokenId)}\n                    className=\"flex items-center gap-3 px-3 py-2.5 hover:bg-muted/50 transition-colors\"\n                  >\n                    <div className=\"relative h-8 w-8 rounded-lg bg-muted shrink-0 overflow-hidden\">\n                      {img && <Image src={img} alt=\"\" fill className=\"object-cover\" unoptimized />}\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"text-sm font-medium truncate\">{t.name ?? `Token #${t.tokenId}`}</p>\n                      <p className=\"text-xs text-muted-foreground tabular-nums truncate\">{t.contractAddress.slice(0, 14)}…</p>\n                    </div>\n                  </Link>\n                );\n              })}\n            </div>\n          )}\n          {(results.collections?.length ?? 0) > 0 && (\n            <div>\n              <div className=\"px-3 py-1.5 text-2xs font-semibold text-muted-foreground bg-muted/30\">\n                Collections\n              </div>\n              {results.collections!.map((c) => {\n                const imgUrl = resolveImage(c.image);\n                return (\n                  <Link\n                    key={c.contractAddress}\n                    href={collectionHref(\"STARKNET\", c.contractAddress)}\n                    className=\"flex items-center gap-3 px-3 py-2.5 hover:bg-muted/50 transition-colors\"\n                  >\n                    <div className=\"relative h-8 w-8 rounded-lg bg-gradient-to-br from-primary/20 to-brand-purple/20 flex items-center justify-center text-xs font-bold shrink-0 overflow-hidden\">\n                      {imgUrl ? (\n                        <Image src={imgUrl} alt=\"\" fill className=\"object-cover\" unoptimized />\n                      ) : (\n                        <span>{c.name?.charAt(0) ?? \"?\"}</span>\n                      )}\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"text-sm font-medium truncate\">{c.name}</p>\n                      <p className=\"text-xs text-muted-foreground tabular-nums truncate\">{c.contractAddress.slice(0, 14)}…</p>\n                    </div>\n                  </Link>\n                );\n              })}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}