@medialane/ui 0.74.2 → 0.76.0

package/dist/components/collection-filters.cjs

@@ -0,0 +1,209 @@
+"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 collection_filters_exports = {};
+__export(collection_filters_exports, {
+  CollectionFiltersBody: () => CollectionFiltersBody,
+  CollectionFiltersTrigger: () => CollectionFiltersTrigger,
+  SORT_OPTIONS: () => SORT_OPTIONS,
+  useCollectionFilters: () => useCollectionFilters
+});
+module.exports = __toCommonJS(collection_filters_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");
+const EXCLUDED_TRAIT_TYPES = /* @__PURE__ */ new Set(["registration"]);
+const SORT_OPTIONS = [
+  { value: "recent", label: "Recent" },
+  { value: "oldest", label: "Oldest" },
+  { value: "name", label: "Name" },
+  { value: "price", label: "Price" }
+];
+function useCollectionFilters(tokens, selected, onChange, sort, onSortChange) {
+  const traitSections = (0, import_react.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const token of tokens) {
+      const attrs = Array.isArray(token.metadata?.attributes) ? token.metadata.attributes : [];
+      for (const attr of attrs) {
+        if (!attr.trait_type || attr.value == null) continue;
+        if (EXCLUDED_TRAIT_TYPES.has(attr.trait_type.toLowerCase())) continue;
+        if (!map.has(attr.trait_type)) map.set(attr.trait_type, /* @__PURE__ */ new Map());
+        const counts = map.get(attr.trait_type);
+        const v = String(attr.value);
+        counts.set(v, (counts.get(v) ?? 0) + 1);
+      }
+    }
+    return Array.from(map.entries()).map(([traitType, counts]) => ({
+      traitType,
+      values: Array.from(counts.entries()).map(([value, count]) => ({ value, count })).sort((a, b) => b.count - a.count || a.value.localeCompare(b.value))
+    })).filter((section) => section.values.length >= 2);
+  }, [tokens]);
+  const activeEntries = Object.entries(selected).flatMap(
+    ([traitType, values]) => values.map((value) => ({ traitType, value }))
+  );
+  const traitActiveCount = activeEntries.length;
+  const sortIsDefault = sort === "recent";
+  const totalActiveCount = traitActiveCount + (sortIsDefault ? 0 : 1);
+  function toggleValue(traitType, value) {
+    const current = selected[traitType] ?? [];
+    const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+    const nextSelected = { ...selected };
+    if (next.length === 0) {
+      delete nextSelected[traitType];
+    } else {
+      nextSelected[traitType] = next;
+    }
+    onChange(nextSelected);
+  }
+  function clearAll() {
+    onChange({});
+    onSortChange("recent");
+  }
+  function removeFilter(traitType, value) {
+    toggleValue(traitType, value);
+  }
+  return { traitSections, activeEntries, totalActiveCount, sortIsDefault, toggleValue, clearAll, removeFilter };
+}
+const TRIGGER_BTN = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-input bg-background text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-8 px-3 shrink-0";
+function CollectionFiltersTrigger({
+  totalActiveCount,
+  sortIsDefault,
+  sort,
+  activeEntries,
+  onOpen,
+  onSortReset,
+  onRemoveFilter,
+  onClearAll
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-end gap-2 flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { onClick: onOpen, className: TRIGGER_BTN, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+      "Filters",
+      totalActiveCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-4 min-w-4 rounded-full bg-primary text-[10px] font-bold text-primary-foreground flex items-center justify-center px-1 -mr-1", children: totalActiveCount })
+    ] }),
+    !sortIsDefault && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        onClick: onSortReset,
+        className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-md border border-primary/40 bg-primary/10 text-xs font-medium text-foreground hover:bg-primary/20 transition-colors",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-[11px]", children: "Sort:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: SORT_OPTIONS.find((o) => o.value === sort)?.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-3 w-3 text-muted-foreground ml-0.5" })
+        ]
+      }
+    ),
+    activeEntries.map(({ traitType, value }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        onClick: () => onRemoveFilter(traitType, value),
+        className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-md border border-primary/40 bg-primary/10 text-xs font-medium text-foreground hover:bg-primary/20 transition-colors",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-muted-foreground text-[11px]", children: [
+            traitType,
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: value }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-3 w-3 text-muted-foreground ml-0.5" })
+        ]
+      },
+      `${traitType}:${value}`
+    )),
+    totalActiveCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        onClick: onClearAll,
+        className: "text-xs text-muted-foreground hover:text-foreground underline-offset-2 hover:underline transition-colors",
+        children: "Clear all"
+      }
+    )
+  ] });
+}
+const PILL_BASE = "inline-flex items-center gap-1 h-7 px-2.5 rounded-full border text-[12px] font-medium transition-colors";
+const PILL_ON = "border-primary bg-primary text-primary-foreground";
+const PILL_OFF = "border-border bg-transparent text-muted-foreground hover:text-foreground hover:border-foreground/30";
+function CollectionFiltersBody({
+  sort,
+  onSortChange,
+  traitSections,
+  selected,
+  onToggleValue
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 overflow-y-auto px-5 py-3 space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium", children: "Sort by" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-1.5", children: SORT_OPTIONS.map(({ value, label }) => {
+        const isSelected = sort === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            onClick: () => onSortChange(value),
+            className: (0, import_cn.cn)(PILL_BASE, isSelected ? PILL_ON : PILL_OFF),
+            children: [
+              isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "h-3 w-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label })
+            ]
+          },
+          value
+        );
+      }) })
+    ] }),
+    traitSections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px w-full bg-border" }),
+      traitSections.map((section, i) => {
+        const activeValues = selected[section.traitType] ?? [];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          i > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px w-full bg-border mb-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium", children: section.traitType }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[11px] text-muted-foreground", children: [
+              section.values.length,
+              " values"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-1.5", children: section.values.map(({ value, count }) => {
+            const isSelected = activeValues.includes(value);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                onClick: () => onToggleValue(section.traitType, value),
+                className: (0, import_cn.cn)(PILL_BASE, isSelected ? PILL_ON : PILL_OFF),
+                children: [
+                  isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "h-3 w-3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: value }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: isSelected ? "opacity-80" : "opacity-60", children: count })
+                ]
+              },
+              value
+            );
+          }) })
+        ] }, section.traitType);
+      })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CollectionFiltersBody,
+  CollectionFiltersTrigger,
+  SORT_OPTIONS,
+  useCollectionFilters
+});
+//# sourceMappingURL=collection-filters.cjs.map

package/dist/components/collection-filters.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/collection-filters.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport { SlidersHorizontal, X, Check } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport type { ApiToken, CollectionTokensSort } from \"@medialane/sdk\";\n\n// Trait types that are per-token stamps rather than real categories — never\n// useful as a filter regardless of how many distinct values they have.\n// \"Registration\" is the Berne Convention registration date, near-unique per\n// mint; filtering by an exact date isn't a meaningful narrowing action.\nconst EXCLUDED_TRAIT_TYPES = new Set([\"registration\"]);\n\nexport const SORT_OPTIONS: { value: CollectionTokensSort; label: string }[] = [\n  { value: \"recent\", label: \"Recent\" },\n  { value: \"oldest\", label: \"Oldest\" },\n  { value: \"name\", label: \"Name\" },\n  { value: \"price\", label: \"Price\" },\n];\n\nexport interface TraitSection {\n  traitType: string;\n  values: { value: string; count: number }[];\n}\n\nexport function useCollectionFilters(\n  tokens: ApiToken[],\n  selected: Record<string, string[]>,\n  onChange: (filters: Record<string, string[]>) => void,\n  sort: CollectionTokensSort,\n  onSortChange: (sort: CollectionTokensSort) => void,\n) {\n  // Build trait map with value counts from loaded tokens, then drop any\n  // trait type where every token shares the same single value (can never\n  // narrow the result set) or that's a known per-token stamp, not a category.\n  const traitSections: TraitSection[] = useMemo(() => {\n    const map = new Map<string, Map<string, number>>();\n    for (const token of tokens) {\n      const attrs = Array.isArray(token.metadata?.attributes)\n        ? (token.metadata.attributes as { trait_type?: string; value?: string }[])\n        : [];\n      for (const attr of attrs) {\n        if (!attr.trait_type || attr.value == null) continue;\n        if (EXCLUDED_TRAIT_TYPES.has(attr.trait_type.toLowerCase())) continue;\n        if (!map.has(attr.trait_type)) map.set(attr.trait_type, new Map());\n        const counts = map.get(attr.trait_type)!;\n        const v = String(attr.value);\n        counts.set(v, (counts.get(v) ?? 0) + 1);\n      }\n    }\n    return Array.from(map.entries())\n      .map(([traitType, counts]) => ({\n        traitType,\n        values: Array.from(counts.entries())\n          .map(([value, count]) => ({ value, count }))\n          .sort((a, b) => b.count - a.count || a.value.localeCompare(b.value)),\n      }))\n      .filter((section) => section.values.length >= 2);\n  }, [tokens]);\n\n  const activeEntries = Object.entries(selected).flatMap(([traitType, values]) =>\n    values.map((value) => ({ traitType, value }))\n  );\n  const traitActiveCount = activeEntries.length;\n  const sortIsDefault = sort === \"recent\";\n  const totalActiveCount = traitActiveCount + (sortIsDefault ? 0 : 1);\n\n  function toggleValue(traitType: string, value: string) {\n    const current = selected[traitType] ?? [];\n    const next = current.includes(value)\n      ? current.filter((v) => v !== value)\n      : [...current, value];\n    const nextSelected = { ...selected };\n    if (next.length === 0) {\n      delete nextSelected[traitType];\n    } else {\n      nextSelected[traitType] = next;\n    }\n    onChange(nextSelected);\n  }\n\n  function clearAll() {\n    onChange({});\n    onSortChange(\"recent\");\n  }\n\n  function removeFilter(traitType: string, value: string) {\n    toggleValue(traitType, value);\n  }\n\n  return { traitSections, activeEntries, totalActiveCount, sortIsDefault, toggleValue, clearAll, removeFilter };\n}\n\nconst TRIGGER_BTN = \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-input bg-background text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-8 px-3 shrink-0\";\n\nexport interface CollectionFiltersTriggerProps {\n  totalActiveCount: number;\n  sortIsDefault: boolean;\n  sort: CollectionTokensSort;\n  activeEntries: { traitType: string; value: string }[];\n  onOpen: () => void;\n  onSortReset: () => void;\n  onRemoveFilter: (traitType: string, value: string) => void;\n  onClearAll: () => void;\n}\n\nexport function CollectionFiltersTrigger({\n  totalActiveCount,\n  sortIsDefault,\n  sort,\n  activeEntries,\n  onOpen,\n  onSortReset,\n  onRemoveFilter,\n  onClearAll,\n}: CollectionFiltersTriggerProps) {\n  return (\n    <div className=\"flex items-center justify-end gap-2 flex-wrap\">\n      <button onClick={onOpen} className={TRIGGER_BTN}>\n        <SlidersHorizontal className=\"h-3.5 w-3.5\" />\n        Filters\n        {totalActiveCount > 0 && (\n          <span className=\"h-4 min-w-4 rounded-full bg-primary text-[10px] font-bold text-primary-foreground flex items-center justify-center px-1 -mr-1\">\n            {totalActiveCount}\n          </span>\n        )}\n      </button>\n\n      {/* Sort pill — only shown when not the default */}\n      {!sortIsDefault && (\n        <button\n          onClick={onSortReset}\n          className=\"inline-flex items-center gap-1 h-8 px-2.5 rounded-md border border-primary/40 bg-primary/10 text-xs font-medium text-foreground hover:bg-primary/20 transition-colors\"\n        >\n          <span className=\"text-muted-foreground text-[11px]\">Sort:</span>\n          <span>{SORT_OPTIONS.find((o) => o.value === sort)?.label}</span>\n          <X className=\"h-3 w-3 text-muted-foreground ml-0.5\" />\n        </button>\n      )}\n\n      {/* Active trait pills — one per selected value */}\n      {activeEntries.map(({ traitType, value }) => (\n        <button\n          key={`${traitType}:${value}`}\n          onClick={() => onRemoveFilter(traitType, value)}\n          className=\"inline-flex items-center gap-1 h-8 px-2.5 rounded-md border border-primary/40 bg-primary/10 text-xs font-medium text-foreground hover:bg-primary/20 transition-colors\"\n        >\n          <span className=\"text-muted-foreground text-[11px]\">{traitType}:</span>\n          <span>{value}</span>\n          <X className=\"h-3 w-3 text-muted-foreground ml-0.5\" />\n        </button>\n      ))}\n\n      {totalActiveCount > 1 && (\n        <button\n          onClick={onClearAll}\n          className=\"text-xs text-muted-foreground hover:text-foreground underline-offset-2 hover:underline transition-colors\"\n        >\n          Clear all\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport interface CollectionFiltersBodyProps {\n  sort: CollectionTokensSort;\n  onSortChange: (sort: CollectionTokensSort) => void;\n  traitSections: TraitSection[];\n  selected: Record<string, string[]>;\n  onToggleValue: (traitType: string, value: string) => void;\n}\n\nconst PILL_BASE = \"inline-flex items-center gap-1 h-7 px-2.5 rounded-full border text-[12px] font-medium transition-colors\";\nconst PILL_ON = \"border-primary bg-primary text-primary-foreground\";\nconst PILL_OFF = \"border-border bg-transparent text-muted-foreground hover:text-foreground hover:border-foreground/30\";\n\nexport function CollectionFiltersBody({\n  sort,\n  onSortChange,\n  traitSections,\n  selected,\n  onToggleValue,\n}: CollectionFiltersBodyProps) {\n  return (\n    <div className=\"flex-1 overflow-y-auto px-5 py-3 space-y-4\">\n      {/* Sort section */}\n      <div>\n        <div className=\"mb-2\">\n          <span className=\"text-sm font-medium\">Sort by</span>\n        </div>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {SORT_OPTIONS.map(({ value, label }) => {\n            const isSelected = sort === value;\n            return (\n              <button\n                key={value}\n                onClick={() => onSortChange(value)}\n                className={cn(PILL_BASE, isSelected ? PILL_ON : PILL_OFF)}\n              >\n                {isSelected && <Check className=\"h-3 w-3\" />}\n                <span>{label}</span>\n              </button>\n            );\n          })}\n        </div>\n      </div>\n\n      {/* Trait sections — always expanded (pruning already removed the noise) */}\n      {traitSections.length > 0 && (\n        <>\n          <div className=\"h-px w-full bg-border\" />\n          {traitSections.map((section, i) => {\n            const activeValues = selected[section.traitType] ?? [];\n            return (\n              <div key={section.traitType}>\n                {i > 0 && <div className=\"h-px w-full bg-border mb-4\" />}\n                <div className=\"flex items-center justify-between mb-2\">\n                  <span className=\"text-sm font-medium\">{section.traitType}</span>\n                  <span className=\"text-[11px] text-muted-foreground\">\n                    {section.values.length} values\n                  </span>\n                </div>\n                <div className=\"flex flex-wrap gap-1.5\">\n                  {section.values.map(({ value, count }) => {\n                    const isSelected = activeValues.includes(value);\n                    return (\n                      <button\n                        key={value}\n                        onClick={() => onToggleValue(section.traitType, value)}\n                        className={cn(PILL_BASE, isSelected ? PILL_ON : PILL_OFF)}\n                      >\n                        {isSelected && <Check className=\"h-3 w-3\" />}\n                        <span>{value}</span>\n                        <span className={isSelected ? \"opacity-80\" : \"opacity-60\"}>\n                          {count}\n                        </span>\n                      </button>\n                    );\n                  })}\n                </div>\n              </div>\n            );\n          })}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/collection-filters.d.cts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CollectionTokensSort, ApiToken } from '@medialane/sdk';
+
+declare const SORT_OPTIONS: {
+    value: CollectionTokensSort;
+    label: string;
+}[];
+interface TraitSection {
+    traitType: string;
+    values: {
+        value: string;
+        count: number;
+    }[];
+}
+declare function useCollectionFilters(tokens: ApiToken[], selected: Record<string, string[]>, onChange: (filters: Record<string, string[]>) => void, sort: CollectionTokensSort, onSortChange: (sort: CollectionTokensSort) => void): {
+    traitSections: TraitSection[];
+    activeEntries: {
+        traitType: string;
+        value: string;
+    }[];
+    totalActiveCount: number;
+    sortIsDefault: boolean;
+    toggleValue: (traitType: string, value: string) => void;
+    clearAll: () => void;
+    removeFilter: (traitType: string, value: string) => void;
+};
+interface CollectionFiltersTriggerProps {
+    totalActiveCount: number;
+    sortIsDefault: boolean;
+    sort: CollectionTokensSort;
+    activeEntries: {
+        traitType: string;
+        value: string;
+    }[];
+    onOpen: () => void;
+    onSortReset: () => void;
+    onRemoveFilter: (traitType: string, value: string) => void;
+    onClearAll: () => void;
+}
+declare function CollectionFiltersTrigger({ totalActiveCount, sortIsDefault, sort, activeEntries, onOpen, onSortReset, onRemoveFilter, onClearAll, }: CollectionFiltersTriggerProps): react_jsx_runtime.JSX.Element;
+interface CollectionFiltersBodyProps {
+    sort: CollectionTokensSort;
+    onSortChange: (sort: CollectionTokensSort) => void;
+    traitSections: TraitSection[];
+    selected: Record<string, string[]>;
+    onToggleValue: (traitType: string, value: string) => void;
+}
+declare function CollectionFiltersBody({ sort, onSortChange, traitSections, selected, onToggleValue, }: CollectionFiltersBodyProps): react_jsx_runtime.JSX.Element;
+
+export { CollectionFiltersBody, type CollectionFiltersBodyProps, CollectionFiltersTrigger, type CollectionFiltersTriggerProps, SORT_OPTIONS, type TraitSection, useCollectionFilters };

package/dist/components/collection-filters.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CollectionTokensSort, ApiToken } from '@medialane/sdk';
+
+declare const SORT_OPTIONS: {
+    value: CollectionTokensSort;
+    label: string;
+}[];
+interface TraitSection {
+    traitType: string;
+    values: {
+        value: string;
+        count: number;
+    }[];
+}
+declare function useCollectionFilters(tokens: ApiToken[], selected: Record<string, string[]>, onChange: (filters: Record<string, string[]>) => void, sort: CollectionTokensSort, onSortChange: (sort: CollectionTokensSort) => void): {
+    traitSections: TraitSection[];
+    activeEntries: {
+        traitType: string;
+        value: string;
+    }[];
+    totalActiveCount: number;
+    sortIsDefault: boolean;
+    toggleValue: (traitType: string, value: string) => void;
+    clearAll: () => void;
+    removeFilter: (traitType: string, value: string) => void;
+};
+interface CollectionFiltersTriggerProps {
+    totalActiveCount: number;
+    sortIsDefault: boolean;
+    sort: CollectionTokensSort;
+    activeEntries: {
+        traitType: string;
+        value: string;
+    }[];
+    onOpen: () => void;
+    onSortReset: () => void;
+    onRemoveFilter: (traitType: string, value: string) => void;
+    onClearAll: () => void;
+}
+declare function CollectionFiltersTrigger({ totalActiveCount, sortIsDefault, sort, activeEntries, onOpen, onSortReset, onRemoveFilter, onClearAll, }: CollectionFiltersTriggerProps): react_jsx_runtime.JSX.Element;
+interface CollectionFiltersBodyProps {
+    sort: CollectionTokensSort;
+    onSortChange: (sort: CollectionTokensSort) => void;
+    traitSections: TraitSection[];
+    selected: Record<string, string[]>;
+    onToggleValue: (traitType: string, value: string) => void;
+}
+declare function CollectionFiltersBody({ sort, onSortChange, traitSections, selected, onToggleValue, }: CollectionFiltersBodyProps): react_jsx_runtime.JSX.Element;
+
+export { CollectionFiltersBody, type CollectionFiltersBodyProps, CollectionFiltersTrigger, type CollectionFiltersTriggerProps, SORT_OPTIONS, type TraitSection, useCollectionFilters };

package/dist/components/collection-filters.js

@@ -0,0 +1,182 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { SlidersHorizontal, X, Check } from "lucide-react";
+import { cn } from "../utils/cn.js";
+const EXCLUDED_TRAIT_TYPES = /* @__PURE__ */ new Set(["registration"]);
+const SORT_OPTIONS = [
+  { value: "recent", label: "Recent" },
+  { value: "oldest", label: "Oldest" },
+  { value: "name", label: "Name" },
+  { value: "price", label: "Price" }
+];
+function useCollectionFilters(tokens, selected, onChange, sort, onSortChange) {
+  const traitSections = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const token of tokens) {
+      const attrs = Array.isArray(token.metadata?.attributes) ? token.metadata.attributes : [];
+      for (const attr of attrs) {
+        if (!attr.trait_type || attr.value == null) continue;
+        if (EXCLUDED_TRAIT_TYPES.has(attr.trait_type.toLowerCase())) continue;
+        if (!map.has(attr.trait_type)) map.set(attr.trait_type, /* @__PURE__ */ new Map());
+        const counts = map.get(attr.trait_type);
+        const v = String(attr.value);
+        counts.set(v, (counts.get(v) ?? 0) + 1);
+      }
+    }
+    return Array.from(map.entries()).map(([traitType, counts]) => ({
+      traitType,
+      values: Array.from(counts.entries()).map(([value, count]) => ({ value, count })).sort((a, b) => b.count - a.count || a.value.localeCompare(b.value))
+    })).filter((section) => section.values.length >= 2);
+  }, [tokens]);
+  const activeEntries = Object.entries(selected).flatMap(
+    ([traitType, values]) => values.map((value) => ({ traitType, value }))
+  );
+  const traitActiveCount = activeEntries.length;
+  const sortIsDefault = sort === "recent";
+  const totalActiveCount = traitActiveCount + (sortIsDefault ? 0 : 1);
+  function toggleValue(traitType, value) {
+    const current = selected[traitType] ?? [];
+    const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+    const nextSelected = { ...selected };
+    if (next.length === 0) {
+      delete nextSelected[traitType];
+    } else {
+      nextSelected[traitType] = next;
+    }
+    onChange(nextSelected);
+  }
+  function clearAll() {
+    onChange({});
+    onSortChange("recent");
+  }
+  function removeFilter(traitType, value) {
+    toggleValue(traitType, value);
+  }
+  return { traitSections, activeEntries, totalActiveCount, sortIsDefault, toggleValue, clearAll, removeFilter };
+}
+const TRIGGER_BTN = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-input bg-background text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-8 px-3 shrink-0";
+function CollectionFiltersTrigger({
+  totalActiveCount,
+  sortIsDefault,
+  sort,
+  activeEntries,
+  onOpen,
+  onSortReset,
+  onRemoveFilter,
+  onClearAll
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 flex-wrap", children: [
+    /* @__PURE__ */ jsxs("button", { onClick: onOpen, className: TRIGGER_BTN, children: [
+      /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+      "Filters",
+      totalActiveCount > 0 && /* @__PURE__ */ jsx("span", { className: "h-4 min-w-4 rounded-full bg-primary text-[10px] font-bold text-primary-foreground flex items-center justify-center px-1 -mr-1", children: totalActiveCount })
+    ] }),
+    !sortIsDefault && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onSortReset,
+        className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-md border border-primary/40 bg-primary/10 text-xs font-medium text-foreground hover:bg-primary/20 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[11px]", children: "Sort:" }),
+          /* @__PURE__ */ jsx("span", { children: SORT_OPTIONS.find((o) => o.value === sort)?.label }),
+          /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground ml-0.5" })
+        ]
+      }
+    ),
+    activeEntries.map(({ traitType, value }) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => onRemoveFilter(traitType, value),
+        className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-md border border-primary/40 bg-primary/10 text-xs font-medium text-foreground hover:bg-primary/20 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-[11px]", children: [
+            traitType,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: value }),
+          /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground ml-0.5" })
+        ]
+      },
+      `${traitType}:${value}`
+    )),
+    totalActiveCount > 1 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onClearAll,
+        className: "text-xs text-muted-foreground hover:text-foreground underline-offset-2 hover:underline transition-colors",
+        children: "Clear all"
+      }
+    )
+  ] });
+}
+const PILL_BASE = "inline-flex items-center gap-1 h-7 px-2.5 rounded-full border text-[12px] font-medium transition-colors";
+const PILL_ON = "border-primary bg-primary text-primary-foreground";
+const PILL_OFF = "border-border bg-transparent text-muted-foreground hover:text-foreground hover:border-foreground/30";
+function CollectionFiltersBody({
+  sort,
+  onSortChange,
+  traitSections,
+  selected,
+  onToggleValue
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-5 py-3 space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Sort by" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: SORT_OPTIONS.map(({ value, label }) => {
+        const isSelected = sort === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onSortChange(value),
+            className: cn(PILL_BASE, isSelected ? PILL_ON : PILL_OFF),
+            children: [
+              isSelected && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { children: label })
+            ]
+          },
+          value
+        );
+      }) })
+    ] }),
+    traitSections.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-border" }),
+      traitSections.map((section, i) => {
+        const activeValues = selected[section.traitType] ?? [];
+        return /* @__PURE__ */ jsxs("div", { children: [
+          i > 0 && /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-border mb-4" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: section.traitType }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+              section.values.length,
+              " values"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: section.values.map(({ value, count }) => {
+            const isSelected = activeValues.includes(value);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onToggleValue(section.traitType, value),
+                className: cn(PILL_BASE, isSelected ? PILL_ON : PILL_OFF),
+                children: [
+                  isSelected && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }),
+                  /* @__PURE__ */ jsx("span", { children: value }),
+                  /* @__PURE__ */ jsx("span", { className: isSelected ? "opacity-80" : "opacity-60", children: count })
+                ]
+              },
+              value
+            );
+          }) })
+        ] }, section.traitType);
+      })
+    ] })
+  ] });
+}
+export {
+  CollectionFiltersBody,
+  CollectionFiltersTrigger,
+  SORT_OPTIONS,
+  useCollectionFilters
+};
+//# sourceMappingURL=collection-filters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/collection-filters.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport { SlidersHorizontal, X, Check } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport type { ApiToken, CollectionTokensSort } from \"@medialane/sdk\";\n\n// Trait types that are per-token stamps rather than real categories — never\n// useful as a filter regardless of how many distinct values they have.\n// \"Registration\" is the Berne Convention registration date, near-unique per\n// mint; filtering by an exact date isn't a meaningful narrowing action.\nconst EXCLUDED_TRAIT_TYPES = new Set([\"registration\"]);\n\nexport const SORT_OPTIONS: { value: CollectionTokensSort; label: string }[] = [\n  { value: \"recent\", label: \"Recent\" },\n  { value: \"oldest\", label: \"Oldest\" },\n  { value: \"name\", label: \"Name\" },\n  { value: \"price\", label: \"Price\" },\n];\n\nexport interface TraitSection {\n  traitType: string;\n  values: { value: string; count: number }[];\n}\n\nexport function useCollectionFilters(\n  tokens: ApiToken[],\n  selected: Record<string, string[]>,\n  onChange: (filters: Record<string, string[]>) => void,\n  sort: CollectionTokensSort,\n  onSortChange: (sort: CollectionTokensSort) => void,\n) {\n  // Build trait map with value counts from loaded tokens, then drop any\n  // trait type where every token shares the same single value (can never\n  // narrow the result set) or that's a known per-token stamp, not a category.\n  const traitSections: TraitSection[] = useMemo(() => {\n    const map = new Map<string, Map<string, number>>();\n    for (const token of tokens) {\n      const attrs = Array.isArray(token.metadata?.attributes)\n        ? (token.metadata.attributes as { trait_type?: string; value?: string }[])\n        : [];\n      for (const attr of attrs) {\n        if (!attr.trait_type || attr.value == null) continue;\n        if (EXCLUDED_TRAIT_TYPES.has(attr.trait_type.toLowerCase())) continue;\n        if (!map.has(attr.trait_type)) map.set(attr.trait_type, new Map());\n        const counts = map.get(attr.trait_type)!;\n        const v = String(attr.value);\n        counts.set(v, (counts.get(v) ?? 0) + 1);\n      }\n    }\n    return Array.from(map.entries())\n      .map(([traitType, counts]) => ({\n        traitType,\n        values: Array.from(counts.entries())\n          .map(([value, count]) => ({ value, count }))\n          .sort((a, b) => b.count - a.count || a.value.localeCompare(b.value)),\n      }))\n      .filter((section) => section.values.length >= 2);\n  }, [tokens]);\n\n  const activeEntries = Object.entries(selected).flatMap(([traitType, values]) =>\n    values.map((value) => ({ traitType, value }))\n  );\n  const traitActiveCount = activeEntries.length;\n  const sortIsDefault = sort === \"recent\";\n  const totalActiveCount = traitActiveCount + (sortIsDefault ? 0 : 1);\n\n  function toggleValue(traitType: string, value: string) {\n    const current = selected[traitType] ?? [];\n    const next = current.includes(value)\n      ? current.filter((v) => v !== value)\n      : [...current, value];\n    const nextSelected = { ...selected };\n    if (next.length === 0) {\n      delete nextSelected[traitType];\n    } else {\n      nextSelected[traitType] = next;\n    }\n    onChange(nextSelected);\n  }\n\n  function clearAll() {\n    onChange({});\n    onSortChange(\"recent\");\n  }\n\n  function removeFilter(traitType: string, value: string) {\n    toggleValue(traitType, value);\n  }\n\n  return { traitSections, activeEntries, totalActiveCount, sortIsDefault, toggleValue, clearAll, removeFilter };\n}\n\nconst TRIGGER_BTN = \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-input bg-background text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-8 px-3 shrink-0\";\n\nexport interface CollectionFiltersTriggerProps {\n  totalActiveCount: number;\n  sortIsDefault: boolean;\n  sort: CollectionTokensSort;\n  activeEntries: { traitType: string; value: string }[];\n  onOpen: () => void;\n  onSortReset: () => void;\n  onRemoveFilter: (traitType: string, value: string) => void;\n  onClearAll: () => void;\n}\n\nexport function CollectionFiltersTrigger({\n  totalActiveCount,\n  sortIsDefault,\n  sort,\n  activeEntries,\n  onOpen,\n  onSortReset,\n  onRemoveFilter,\n  onClearAll,\n}: CollectionFiltersTriggerProps) {\n  return (\n    <div className=\"flex items-center justify-end gap-2 flex-wrap\">\n      <button onClick={onOpen} className={TRIGGER_BTN}>\n        <SlidersHorizontal className=\"h-3.5 w-3.5\" />\n        Filters\n        {totalActiveCount > 0 && (\n          <span className=\"h-4 min-w-4 rounded-full bg-primary text-[10px] font-bold text-primary-foreground flex items-center justify-center px-1 -mr-1\">\n            {totalActiveCount}\n          </span>\n        )}\n      </button>\n\n      {/* Sort pill — only shown when not the default */}\n      {!sortIsDefault && (\n        <button\n          onClick={onSortReset}\n          className=\"inline-flex items-center gap-1 h-8 px-2.5 rounded-md border border-primary/40 bg-primary/10 text-xs font-medium text-foreground hover:bg-primary/20 transition-colors\"\n        >\n          <span className=\"text-muted-foreground text-[11px]\">Sort:</span>\n          <span>{SORT_OPTIONS.find((o) => o.value === sort)?.label}</span>\n          <X className=\"h-3 w-3 text-muted-foreground ml-0.5\" />\n        </button>\n      )}\n\n      {/* Active trait pills — one per selected value */}\n      {activeEntries.map(({ traitType, value }) => (\n        <button\n          key={`${traitType}:${value}`}\n          onClick={() => onRemoveFilter(traitType, value)}\n          className=\"inline-flex items-center gap-1 h-8 px-2.5 rounded-md border border-primary/40 bg-primary/10 text-xs font-medium text-foreground hover:bg-primary/20 transition-colors\"\n        >\n          <span className=\"text-muted-foreground text-[11px]\">{traitType}:</span>\n          <span>{value}</span>\n          <X className=\"h-3 w-3 text-muted-foreground ml-0.5\" />\n        </button>\n      ))}\n\n      {totalActiveCount > 1 && (\n        <button\n          onClick={onClearAll}\n          className=\"text-xs text-muted-foreground hover:text-foreground underline-offset-2 hover:underline transition-colors\"\n        >\n          Clear all\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport interface CollectionFiltersBodyProps {\n  sort: CollectionTokensSort;\n  onSortChange: (sort: CollectionTokensSort) => void;\n  traitSections: TraitSection[];\n  selected: Record<string, string[]>;\n  onToggleValue: (traitType: string, value: string) => void;\n}\n\nconst PILL_BASE = \"inline-flex items-center gap-1 h-7 px-2.5 rounded-full border text-[12px] font-medium transition-colors\";\nconst PILL_ON = \"border-primary bg-primary text-primary-foreground\";\nconst PILL_OFF = \"border-border bg-transparent text-muted-foreground hover:text-foreground hover:border-foreground/30\";\n\nexport function CollectionFiltersBody({\n  sort,\n  onSortChange,\n  traitSections,\n  selected,\n  onToggleValue,\n}: CollectionFiltersBodyProps) {\n  return (\n    <div className=\"flex-1 overflow-y-auto px-5 py-3 space-y-4\">\n      {/* Sort section */}\n      <div>\n        <div className=\"mb-2\">\n          <span className=\"text-sm font-medium\">Sort by</span>\n        </div>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {SORT_OPTIONS.map(({ value, label }) => {\n            const isSelected = sort === value;\n            return (\n              <button\n                key={value}\n                onClick={() => onSortChange(value)}\n                className={cn(PILL_BASE, isSelected ? PILL_ON : PILL_OFF)}\n              >\n                {isSelected && <Check className=\"h-3 w-3\" />}\n                <span>{label}</span>\n              </button>\n            );\n          })}\n        </div>\n      </div>\n\n      {/* Trait sections — always expanded (pruning already removed the noise) */}\n      {traitSections.length > 0 && (\n        <>\n          <div className=\"h-px w-full bg-border\" />\n          {traitSections.map((section, i) => {\n            const activeValues = selected[section.traitType] ?? [];\n            return (\n              <div key={section.traitType}>\n                {i > 0 && <div className=\"h-px w-full bg-border mb-4\" />}\n                <div className=\"flex items-center justify-between mb-2\">\n                  <span className=\"text-sm font-medium\">{section.traitType}</span>\n                  <span className=\"text-[11px] text-muted-foreground\">\n                    {section.values.length} values\n                  </span>\n                </div>\n                <div className=\"flex flex-wrap gap-1.5\">\n                  {section.values.map(({ value, count }) => {\n                    const isSelected = activeValues.includes(value);\n                    return (\n                      <button\n                        key={value}\n                        onClick={() => onToggleValue(section.traitType, value)}\n                        className={cn(PILL_BASE, isSelected ? PILL_ON : PILL_OFF)}\n                      >\n                        {isSelected && <Check className=\"h-3 w-3\" />}\n                        <span>{value}</span>\n                        <span className={isSelected ? \"opacity-80\" : \"opacity-60\"}>\n                          {count}\n                        </span>\n                      </button>\n                    );\n                  })}\n                </div>\n              </div>\n            );\n          })}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}