@thorprovider/blocks 0.1.1 → 0.1.2

package/src/blocks/e-commerce/category-filters/category-filter-2.tsx

@@ -1,18 +1,21 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { SlidersHorizontal } from 'lucide-react'
+import { useEffect, useId, useState, type ReactNode } from 'react'
+import { Search, SlidersHorizontal, X } from 'lucide-react'
 
+import { Badge } from '../../../ui/badge'
 import { Button } from '../../../ui/button'
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from '../../../ui/empty'
+import { Input } from '../../../ui/input'
 import {
   Pagination,
   PaginationContent,
   PaginationEllipsis,
   PaginationItem,
-  PaginationLink,
 } from '../../../ui/pagination'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select'
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../../../ui/sheet'
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../../../ui/sheet'
+import { Skeleton } from '../../../ui/skeleton'
 import { cn } from '../../../lib/utils'
 
 import { CategoryFilter2FilterPanel } from './category-filter-2-filter-panel'
@@ -21,7 +24,15 @@ export interface FilterProduct {
   id: string
   name: string
   price: string
-  image: string
+  /** Optional: an absent image is omitted so the block never renders `src=""`. */
+  image?: string
+  /**
+   * Optional product-detail link. When present the card renders as a real
+   * `<a href>` (keyboard focus, middle-click, crawlers); when absent the block
+   * falls back to the `onProductClick` path. The href is produced by the
+   * presentation layer — the block never builds a route.
+   */
+  href?: string
 }
 
 export interface CategoryFilter2Category {
@@ -29,6 +40,11 @@ export interface CategoryFilter2Category {
   label: string
 }
 
+export interface CategoryFilter2Collection {
+  id: string
+  label: string
+}
+
 export interface CategoryFilter2Color {
   id: string
   color: string
@@ -47,20 +63,108 @@ export interface CategoryFilter2SortOption {
 
 export interface CategoryFilter2Filters {
   categories: string[]
+  /** Collections requested by the `category-filters` feature (E2). */
+  collections?: string[]
   priceRange: number[]
   size: string | null
   color: string | null
 }
 
+/**
+ * A typed catalog-query error the listing renders for repair. It is a structural
+ * mirror of the runtime boundary error (`CatalogQueryError`/`CatalogQueryFailure`):
+ * `fields` names the exact raw parameters to remove and `feature` is present only
+ * for `unmounted-capability`. The block never builds a host URL — it emits the
+ * fields through `onRepair` (E2 task 4.5).
+ */
+export interface CategoryFilter2QueryError {
+  code: 'invalid-query' | 'unsupported-query' | 'unmounted-capability'
+  /** Exact raw URL parameter names that must be removed to repair the query. */
+  fields: string[]
+  message?: string
+  feature?: 'catalog-search' | 'category-filters'
+}
+
+/**
+ * The observable listing status. The host derives it from the URL boundary and
+ * the provider outcome (`mapCatalogOutcomeToStatus`) and passes it down; the
+ * block only renders it. `loading` is in flight; `ready` shows products; `empty`
+ * is a valid zero-result query; `invalid-query`/`unsupported-query`/
+ * `unmounted-capability` are typed repair states; `error` is a query/network
+ * failure with retry. Distinct states stay distinct — a valid empty result is
+ * never shown as an error and a raw failure is never swallowed as empty.
+ */
+export type CategoryFilter2Status =
+  | { state: 'loading' }
+  | { state: 'ready' }
+  | { state: 'empty' }
+  | { state: 'invalid-query'; error: CategoryFilter2QueryError }
+  | { state: 'unsupported-query'; error: CategoryFilter2QueryError }
+  | { state: 'unmounted-capability'; error: CategoryFilter2QueryError }
+  | { state: 'error'; message?: string }
+
+/** The kind of canonical filter an active chip represents. */
+export type CategoryFilter2ActiveFilterKind =
+  | 'text'
+  | 'category'
+  | 'collection'
+  | 'price'
+  | 'attribute'
+
+/**
+ * A removable active-filter chip. Built only from the actual canonical query
+ * (never from claimed provider filtering): `params` are the raw URL parameter
+ * names carrying the filter and `value` is the specific list value to drop.
+ */
+export interface CategoryFilter2ActiveFilter {
+  /** Stable identity for React keys and removal callbacks. */
+  id: string
+  kind: CategoryFilter2ActiveFilterKind
+  /** Human-readable label shown on the chip. */
+  label: string
+  /** Raw URL parameter names that carry this filter. */
+  params: string[]
+  /** The specific list value this chip removes; absent for scalar filters. */
+  value?: string
+}
+
 export interface CategoryFilter2Props {
   products: FilterProduct[]
   categories?: CategoryFilter2Category[]
+  collections?: CategoryFilter2Collection[]
   sizes?: string[]
   colors?: CategoryFilter2Color[]
+  /**
+   * Real backend-provided price range only. When absent the price control is
+   * omitted; the block never falls back to a fabricated `0..1000` default
+   * (E2 design Decision 8 / spec "Price controls require real price metadata").
+   */
   priceRange?: CategoryFilter2PriceRange
   viewOptions?: (number | string)[]
+  /** Adapter-advertised sort options only. When absent/empty no sort control is rendered. */
   sortOptions?: CategoryFilter2SortOption[]
   pagination?: (number | string)[]
+
+  // ── Controlled canonical-query values (E2) ────────────────────────────────
+  // When supplied these win over the block's internal state, making the block
+  // controlled by the URL-backed canonical query. When absent the block stays
+  // uncontrolled for legacy consumers.
+  searchValue?: string
+  selectedCategories?: string[]
+  selectedCollections?: string[]
+  selectedPriceRange?: number[]
+  selectedSort?: string
+  selectedPage?: number | string
+  selectedPageSize?: number | string
+
+  // ── Per-control visibility (selected from the installed features) ─────────
+  // Defaults preserve the legacy surface: filters shown, search hidden, price
+  // shown when a real range is supplied, sort shown when options are supplied.
+  showSearch?: boolean
+  showFilters?: boolean
+  showPrice?: boolean
+  showSort?: boolean
+
   filtersTitle?: string
   selectedText?: string
   clearAllLabel?: string
@@ -68,6 +172,7 @@ export interface CategoryFilter2Props {
   minLabel?: string
   maxLabel?: string
   categoriesTitle?: string
+  collectionsTitle?: string
   sizesTitle?: string
   colorsTitle?: string
   viewLabel?: string
@@ -75,30 +180,327 @@ export interface CategoryFilter2Props {
   sortPlaceholder?: string
   productsTitle?: string
   currentLabel?: string
+  searchLabel?: string
+  searchPlaceholder?: string
   onProductClick?: (product: FilterProduct) => void
   onPageChange?: (page: number | string) => void
   onViewChange?: (view: number | string) => void
+  onPageSizeChange?: (pageSize: number | string) => void
   onSortChange?: (sort: string) => void
   onFilterChange?: (filters: CategoryFilter2Filters) => void
+  onSearchChange?: (text: string) => void
+
+  // ── Observable listing states + active-filter chips (E2 task 4.5) ─────────
+  /** Observable listing status. Defaults to `ready` so legacy consumers are unchanged. */
+  status?: CategoryFilter2Status
+  /** Removable active-filter chips built from the canonical query. */
+  activeFilters?: CategoryFilter2ActiveFilter[]
+
+  // State / chip labels (Spanish defaults match the rest of the block).
+  loadingLabel?: string
+  emptyTitle?: string
+  emptyDescription?: string
+  clearFiltersLabel?: string
+  invalidQueryTitle?: string
+  unsupportedQueryTitle?: string
+  unmountedCapabilityTitle?: string
+  errorTitle?: string
+  errorDescription?: string
+  repairLabel?: string
+  retryLabel?: string
+  activeFiltersTitle?: string
+  removeFilterLabel?: string
+
+  // Emit-only callbacks: the block never fetches or rewrites the URL. The host
+  // (the generated route's `updateURL` action, task 5.2) binds these.
+  /** Empty-state clear: drops the active filters but never base scope/sort/pageSize. */
+  onClearFilters?: () => void
+  /** Invalid/unsupported/unmounted repair: receives the exact bad fields to remove. */
+  onRepair?: (remove: string[]) => void
+  /** Query/network failure retry: preserves the current query/input. */
+  onRetry?: () => void
+  /** Removes a single active-filter chip. */
+  onRemoveFilter?: (filter: CategoryFilter2ActiveFilter) => void
 }
 
 const DEFAULT_VIEW_OPTIONS: (number | string)[] = [10, 25, 50, 100]
-const DEFAULT_SORT_OPTIONS: CategoryFilter2SortOption[] = [
-  { value: 'newest', label: 'Más recientes' },
-  { value: 'price-asc', label: 'Precio: de menor a mayor' },
-  { value: 'price-desc', label: 'Precio: de mayor a menor' },
-]
-const DEFAULT_PRICE_RANGE: CategoryFilter2PriceRange = { min: 0, max: 1000, step: 10 }
+
+/**
+ * Pure selection reducer shared by the controlled checkbox handlers. Exported
+ * so the emitted-change contract is unit-testable without a DOM (this package's
+ * tests render with `react-dom/server`).
+ */
+export function toggleFilterValue(
+  current: readonly string[],
+  value: string,
+  checked: boolean,
+): string[] {
+  return checked ? [...current, value] : current.filter(candidate => candidate !== value)
+}
+
+/** Assemble the typed filter change emitted upward. */
+export function buildFilterChange(input: {
+  categories: string[]
+  collections: string[]
+  priceRange: number[]
+  size: string | null
+  color: string | null
+}): CategoryFilter2Filters {
+  return {
+    categories: input.categories,
+    collections: input.collections,
+    priceRange: input.priceRange,
+    size: input.size,
+    color: input.color,
+  }
+}
+
+/**
+ * Reconcile the controlled search draft with the URL-backed `searchValue`
+ * (E2 corrective, task 8.2).
+ *
+ * The category listing's search input is controlled by the canonical URL query
+ * (the URL is authoritative), but the URL only updates after an async server
+ * navigation. Binding the input's DOM value directly to that lagging prop makes
+ * React reset it to the previous server value on every re-render, so fast typing
+ * loses every character but the last. This pure function keeps a local draft
+ * authoritative while the shopper is typing and adopts an external `searchValue`
+ * (navigation / reload / back-forward) otherwise.
+ *
+ * Adoption is allowed only when the draft has not diverged from the previously
+ * seen server value — i.e. there is no uncommitted local edit. A stale or
+ * out-of-order response therefore cannot revert the draft. Returns the state
+ * adjustment to apply, or `null` when nothing changes.
+ */
+export function reconcileSearchDraft(input: {
+  searchValue?: string
+  prevSearchValue?: string
+  draft: string
+}): { draft: string; prevSearchValue?: string } | null {
+  const { searchValue, prevSearchValue, draft } = input
+  if (searchValue === undefined || searchValue === prevSearchValue) return null
+  const clean = prevSearchValue === undefined || draft === prevSearchValue
+  return { draft: clean ? searchValue : draft, prevSearchValue: searchValue }
+}
+
+export interface CategoryFilter2StatusViewProps {
+  status: CategoryFilter2Status
+  activeFilters?: CategoryFilter2ActiveFilter[]
+  activeFiltersTitle?: string
+  removeFilterLabel?: string
+  loadingLabel?: string
+  emptyTitle?: string
+  emptyDescription?: string
+  clearFiltersLabel?: string
+  invalidQueryTitle?: string
+  unsupportedQueryTitle?: string
+  unmountedCapabilityTitle?: string
+  errorTitle?: string
+  errorDescription?: string
+  repairLabel?: string
+  retryLabel?: string
+  onClearFilters?: () => void
+  onRepair?: (remove: string[]) => void
+  onRetry?: () => void
+  onRemoveFilter?: (filter: CategoryFilter2ActiveFilter) => void
+}
+
+/** Human-readable description naming the exact offending parameters (and, for
+ *  `unmounted-capability`, the missing feature). Never a raw stack/error dump. */
+function describeQueryError(
+  error: CategoryFilter2QueryError,
+  state: 'invalid-query' | 'unsupported-query' | 'unmounted-capability',
+): string {
+  const fields = error.fields.join(', ')
+  if (state === 'unmounted-capability' && error.feature) {
+    return `${fields} pertenece a la función «${error.feature}», que no está instalada.`
+  }
+  return error.message ?? `Parámetros: ${fields}`
+}
+
+/**
+ * Hooks-free presentation of the observable listing states and the removable
+ * active-filter chips (E2 task 4.5). Kept separate from `CategoryFilter2` so the
+ * interaction contract (clear / repair / retry / chip removal) is testable by
+ * invoking the rendered handlers without a DOM (this package's tests render with
+ * `react-dom/server`). It renders no products and performs no fetch — it only
+ * emits the host callbacks. When `ready` with no chips it renders nothing.
+ */
+export function CategoryFilter2StatusView({
+  status,
+  activeFilters = [],
+  activeFiltersTitle = 'Filtros activos',
+  removeFilterLabel = 'Quitar filtro',
+  loadingLabel = 'Cargando productos',
+  emptyTitle = 'Sin resultados',
+  emptyDescription = 'Ningún producto coincide con los filtros activos.',
+  clearFiltersLabel = 'Limpiar filtros',
+  invalidQueryTitle = 'Consulta no válida',
+  unsupportedQueryTitle = 'Filtro no disponible',
+  unmountedCapabilityTitle = 'Función no disponible',
+  errorTitle = 'No se pudieron cargar los productos',
+  errorDescription = 'Inténtalo de nuevo.',
+  repairLabel = 'Corregir búsqueda',
+  retryLabel = 'Reintentar',
+  onClearFilters,
+  onRepair,
+  onRetry,
+  onRemoveFilter,
+}: CategoryFilter2StatusViewProps) {
+  const chips =
+    activeFilters.length > 0 ? (
+      <div
+        role="group"
+        aria-label={activeFiltersTitle}
+        className="flex flex-wrap items-center gap-2"
+      >
+        {activeFilters.map(filter => (
+          <Badge key={filter.id} variant="secondary" className="gap-1 pr-1">
+            <span>{filter.label}</span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              className="size-4 cursor-pointer rounded-full"
+              aria-label={`${removeFilterLabel}: ${filter.label}`}
+              data-action="remove-filter"
+              data-filter-id={filter.id}
+              onClick={() => onRemoveFilter?.(filter)}
+            >
+              <X aria-hidden="true" />
+            </Button>
+          </Badge>
+        ))}
+      </div>
+    ) : null
+
+  if (status.state === 'ready') {
+    return chips
+  }
+
+  let body: ReactNode
+  switch (status.state) {
+    case 'loading':
+      body = (
+        <div role="status" aria-live="polite" aria-busy="true" className="flex flex-col gap-4">
+          <span className="sr-only">{loadingLabel}</span>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
+            {Array.from({ length: 6 }, (_, index) => (
+              <div key={index} className="flex flex-col gap-2">
+                <Skeleton className="aspect-3/4 w-full rounded-lg" />
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-4 w-1/3" />
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+      break
+    case 'empty':
+      body = (
+        <Empty role="status">
+          <EmptyHeader>
+            <EmptyTitle>{emptyTitle}</EmptyTitle>
+            <EmptyDescription>{emptyDescription}</EmptyDescription>
+          </EmptyHeader>
+          {onClearFilters ? (
+            <EmptyContent>
+              <Button
+                type="button"
+                variant="outline"
+                data-action="clear-filters"
+                onClick={() => onClearFilters()}
+              >
+                {clearFiltersLabel}
+              </Button>
+            </EmptyContent>
+          ) : null}
+        </Empty>
+      )
+      break
+    case 'invalid-query':
+    case 'unsupported-query':
+    case 'unmounted-capability':
+      body = (
+        <Empty role="alert">
+          <EmptyHeader>
+            <EmptyTitle>
+              {status.state === 'invalid-query'
+                ? invalidQueryTitle
+                : status.state === 'unsupported-query'
+                  ? unsupportedQueryTitle
+                  : unmountedCapabilityTitle}
+            </EmptyTitle>
+            <EmptyDescription>{describeQueryError(status.error, status.state)}</EmptyDescription>
+          </EmptyHeader>
+          {onRepair ? (
+            <EmptyContent>
+              <Button
+                type="button"
+                variant="outline"
+                data-action="repair"
+                onClick={() => onRepair(status.error.fields)}
+              >
+                {repairLabel}
+              </Button>
+            </EmptyContent>
+          ) : null}
+        </Empty>
+      )
+      break
+    case 'error':
+      body = (
+        <Empty role="alert">
+          <EmptyHeader>
+            <EmptyTitle>{errorTitle}</EmptyTitle>
+            <EmptyDescription>{status.message ?? errorDescription}</EmptyDescription>
+          </EmptyHeader>
+          {onRetry ? (
+            <EmptyContent>
+              <Button
+                type="button"
+                variant="default"
+                data-action="retry"
+                onClick={() => onRetry()}
+              >
+                {retryLabel}
+              </Button>
+            </EmptyContent>
+          ) : null}
+        </Empty>
+      )
+      break
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {chips}
+      {body}
+    </div>
+  )
+}
 
 export function CategoryFilter2({
   products,
   categories = [],
+  collections = [],
   sizes = [],
   colors = [],
-  priceRange: priceRangeConfig = DEFAULT_PRICE_RANGE,
+  priceRange: priceRangeConfig,
   viewOptions = DEFAULT_VIEW_OPTIONS,
-  sortOptions = DEFAULT_SORT_OPTIONS,
+  sortOptions = [],
   pagination = [],
+  searchValue,
+  selectedCategories,
+  selectedCollections,
+  selectedPriceRange,
+  selectedSort,
+  selectedPage,
+  selectedPageSize,
+  showSearch = false,
+  showFilters = true,
+  showPrice = true,
+  showSort = true,
   filtersTitle = 'Filtros',
   selectedText = 'Filtros',
   clearAllLabel = 'Restablecer',
@@ -106,6 +508,7 @@ export function CategoryFilter2({
   minLabel = 'Mínimo',
   maxLabel = 'Máximo',
   categoriesTitle = 'Categoría',
+  collectionsTitle = 'Colección',
   sizesTitle = 'Tamaño',
   colorsTitle = 'Color',
   viewLabel = 'Ver',
@@ -113,21 +516,75 @@ export function CategoryFilter2({
   sortPlaceholder = 'Ordenar por',
   productsTitle = 'Productos',
   currentLabel = '(actual)',
+  searchLabel = 'Buscar',
+  searchPlaceholder = 'Buscar',
   onProductClick,
   onPageChange,
   onViewChange,
+  onPageSizeChange,
   onSortChange,
   onFilterChange,
+  onSearchChange,
+  status = { state: 'ready' },
+  activeFilters = [],
+  loadingLabel,
+  emptyTitle,
+  emptyDescription,
+  clearFiltersLabel,
+  invalidQueryTitle,
+  unsupportedQueryTitle,
+  unmountedCapabilityTitle,
+  errorTitle,
+  errorDescription,
+  repairLabel,
+  retryLabel,
+  activeFiltersTitle,
+  removeFilterLabel,
+  onClearFilters,
+  onRepair,
+  onRetry,
+  onRemoveFilter,
 }: CategoryFilter2Props) {
-  const [selectedCategories, setSelectedCategories] = useState<string[]>([])
-  const [priceRange, setPriceRange] = useState<number[]>([priceRangeConfig.min, priceRangeConfig.max])
-  const [selectedSize, setSelectedSize] = useState<string | null>(null)
-  const [selectedColor, setSelectedColor] = useState<string | null>(null)
-  const [selectedView, setSelectedView] = useState<number | string>(viewOptions[0] ?? 10)
-  const [selectedSort, setSelectedSort] = useState<string>(sortOptions[0]?.value ?? 'newest')
-  const [activePage, setActivePage] = useState<number | string | null>(pagination.length > 0 ? pagination[0] : null)
+  const searchInputId = useId()
+  const [internalCategories, setInternalCategories] = useState<string[]>([])
+  const [internalCollections, setInternalCollections] = useState<string[]>([])
+  const [internalPriceRange, setInternalPriceRange] = useState<number[]>(
+    priceRangeConfig ? [priceRangeConfig.min, priceRangeConfig.max] : [],
+  )
+  const [internalSize, setInternalSize] = useState<string | null>(null)
+  const [internalColor, setInternalColor] = useState<string | null>(null)
+  const [internalView, setInternalView] = useState<number | string>(viewOptions[0] ?? 10)
+  const [internalSort, setInternalSort] = useState<string>(sortOptions[0]?.value ?? '')
+  const [internalPage, setInternalPage] = useState<number | string | null>(pagination.length > 0 ? pagination[0] : null)
+  const [internalSearch, setInternalSearch] = useState('')
+  // Local draft of the controlled search input (E2 corrective, task 8.2): the
+  // URL stays authoritative for the canonical query and the listing, but the
+  // input displays this draft so fast typing is never reset by a lagging server
+  // response. Adopt the external `searchValue` only when no uncommitted edit is
+  // pending (see `reconcileSearchDraft`).
+  const [draftSearch, setDraftSearch] = useState(searchValue ?? '')
+  const [prevSearchValue, setPrevSearchValue] = useState(searchValue)
   const [isSheetOpen, setIsSheetOpen] = useState(false)
 
+  const reconciledSearch = reconcileSearchDraft({
+    searchValue,
+    prevSearchValue,
+    draft: draftSearch,
+  })
+  if (reconciledSearch) {
+    setPrevSearchValue(reconciledSearch.prevSearchValue)
+    if (reconciledSearch.draft !== draftSearch) setDraftSearch(reconciledSearch.draft)
+  }
+
+  // Controlled-when-supplied values: the canonical query wins over local state.
+  const categoriesValue = selectedCategories ?? internalCategories
+  const collectionsValue = selectedCollections ?? internalCollections
+  const priceRangeValue = selectedPriceRange ?? internalPriceRange
+  const sortValue = selectedSort ?? internalSort
+  const pageValue = selectedPage ?? internalPage
+  const pageSizeValue = selectedPageSize ?? internalView
+  const searchText = searchValue === undefined ? internalSearch : draftSearch
+
   // Close sheet when screen size becomes large using CSS media query
   useEffect(() => {
     const mediaQuery = window.matchMedia('(min-width: 1024px)')
@@ -142,71 +599,110 @@ export function CategoryFilter2({
     return () => mediaQuery.removeEventListener('change', handleChange)
   }, [])
 
+  const emitFilters = (overrides: Partial<CategoryFilter2Filters> = {}) => {
+    onFilterChange?.(
+      buildFilterChange({
+        categories: categoriesValue,
+        collections: collectionsValue,
+        priceRange: priceRangeValue,
+        size: internalSize,
+        color: internalColor,
+        ...overrides,
+      }),
+    )
+  }
+
   const handleCategoryChange = (category: string, checked: boolean) => {
-    const next = checked ? [...selectedCategories, category] : selectedCategories.filter(c => c !== category)
-    setSelectedCategories(next)
-    onFilterChange?.({ categories: next, priceRange, size: selectedSize, color: selectedColor })
+    const next = toggleFilterValue(categoriesValue, category, checked)
+    setInternalCategories(next)
+    emitFilters({ categories: next })
+  }
+
+  const handleCollectionChange = (collection: string, checked: boolean) => {
+    const next = toggleFilterValue(collectionsValue, collection, checked)
+    setInternalCollections(next)
+    emitFilters({ collections: next })
   }
 
   const handlePriceChange = (next: number[]) => {
-    setPriceRange(next)
-    onFilterChange?.({ categories: selectedCategories, priceRange: next, size: selectedSize, color: selectedColor })
+    setInternalPriceRange(next)
+    emitFilters({ priceRange: next })
   }
 
   const handleSizeChange = (size: string | null) => {
-    setSelectedSize(size)
-    onFilterChange?.({ categories: selectedCategories, priceRange, size, color: selectedColor })
+    setInternalSize(size)
+    emitFilters({ size })
   }
 
   const handleColorChange = (color: string | null) => {
-    setSelectedColor(color)
-    onFilterChange?.({ categories: selectedCategories, priceRange, size: selectedSize, color })
+    setInternalColor(color)
+    emitFilters({ color })
   }
 
   const handleClearAll = () => {
-    setSelectedCategories([])
-    setSelectedSize(null)
-    setSelectedColor(null)
-    setPriceRange([priceRangeConfig.min, priceRangeConfig.max])
-    onFilterChange?.({ categories: [], priceRange: [priceRangeConfig.min, priceRangeConfig.max], size: null, color: null })
+    const resetPriceRange = priceRangeConfig ? [priceRangeConfig.min, priceRangeConfig.max] : []
+    setInternalCategories([])
+    setInternalCollections([])
+    setInternalSize(null)
+    setInternalColor(null)
+    setInternalPriceRange(resetPriceRange)
+    onFilterChange?.(
+      buildFilterChange({
+        categories: [],
+        collections: [],
+        priceRange: resetPriceRange,
+        size: null,
+        color: null,
+      }),
+    )
   }
 
-  const handleViewChange = (view: number | string) => {
-    setSelectedView(view)
-    onViewChange?.(view)
+  const handlePageSizeChange = (size: number | string) => {
+    setInternalView(size)
+    ;(onPageSizeChange ?? onViewChange)?.(size)
   }
 
   const handleSortChange = (sort: string) => {
-    setSelectedSort(sort)
+    setInternalSort(sort)
     onSortChange?.(sort)
   }
 
   const handlePageChange = (page: number | string) => {
     if (page === '...') return
-    setActivePage(page)
+    setInternalPage(page)
     onPageChange?.(page)
   }
 
+  const handleSearchChange = (text: string) => {
+    if (searchValue === undefined) setInternalSearch(text)
+    else setDraftSearch(text)
+    onSearchChange?.(text)
+  }
+
   const filterPanelProps = {
     selectedText,
     clearAllLabel,
     priceRangeTitle,
-    priceRange,
-    priceRangeConfig,
+    priceRange: priceRangeValue,
+    priceRangeConfig: showPrice ? priceRangeConfig : undefined,
     minLabel,
     maxLabel,
+    onPriceChange: handlePriceChange,
     categoriesTitle,
     categories,
-    selectedCategories,
+    selectedCategories: categoriesValue,
     onCategoryChange: handleCategoryChange,
-    onPriceChange: handlePriceChange,
+    collectionsTitle,
+    collections,
+    selectedCollections: collectionsValue,
+    onCollectionChange: handleCollectionChange,
     sizesTitle,
     sizes,
-    selectedSize,
+    selectedSize: internalSize,
     onSizeChange: handleSizeChange,
     colorsTitle,
     colors,
-    selectedColor,
+    selectedColor: internalColor,
     onColorChange: handleColorChange,
     onClearAll: handleClearAll,
   }
@@ -214,128 +710,212 @@ export function CategoryFilter2({
   return (
     <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
       <div className="flex flex-col gap-8 lg:flex-row">
-        <aside className="hidden w-full flex-none lg:block lg:w-72">
-          <div className="max-h-100vh sticky top-4 overflow-y-auto">
-            <div className="flex flex-col gap-6 pb-6">
-              <CategoryFilter2FilterPanel {...filterPanelProps} />
+        {showFilters ? (
+          <aside className="hidden w-full flex-none lg:block lg:w-72">
+            <div className="max-h-100vh sticky top-4 overflow-y-auto">
+              <div className="flex flex-col gap-6 pb-6">
+                <CategoryFilter2FilterPanel {...filterPanelProps} />
+              </div>
             </div>
-          </div>
-        </aside>
+          </aside>
+        ) : null}
 
         <main className="flex min-w-0 flex-1 flex-col gap-6">
           <div className="flex flex-wrap items-center justify-between gap-4">
             <div className="flex items-center gap-4">
-              <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-8 cursor-pointer px-3 text-xs lg:hidden"
-                  onClick={() => setIsSheetOpen(true)}
-                >
-                  <SlidersHorizontal />
-                  {filtersTitle}
-                </Button>
-                <SheetContent side="left" className="w-full p-0 sm:w-[380px] lg:hidden">
-                  <SheetHeader className="border-b px-6 py-4">
-                    <SheetTitle className="text-lg">{filtersTitle}</SheetTitle>
-                  </SheetHeader>
-                  <div className="h-[calc(100vh-4rem)] overflow-y-auto p-6">
-                    <div className="flex flex-col gap-6">
-                      <CategoryFilter2FilterPanel {...filterPanelProps} />
+              {showFilters ? (
+                <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+                  <SheetTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-8 cursor-pointer px-3 text-xs lg:hidden"
+                    >
+                      <SlidersHorizontal />
+                      {filtersTitle}
+                    </Button>
+                  </SheetTrigger>
+                  <SheetContent side="left" className="w-full p-0 sm:w-[380px] lg:hidden">
+                    <SheetHeader className="border-b px-6 py-4">
+                      <SheetTitle className="text-lg">{filtersTitle}</SheetTitle>
+                    </SheetHeader>
+                    <div className="h-[calc(100vh-4rem)] overflow-y-auto p-6">
+                      <div className="flex flex-col gap-6">
+                        <CategoryFilter2FilterPanel {...filterPanelProps} />
+                      </div>
                     </div>
-                  </div>
-                </SheetContent>
-              </Sheet>
-              <div className="hidden items-center gap-2 sm:flex">
-                <span className="text-sm">{viewLabel}</span>
-                <Select
-                  value={String(selectedView)}
-                  onValueChange={value => handleViewChange(viewOptions.find(option => String(option) === value) ?? value)}
-                >
-                  <SelectTrigger className="h-8 w-[100px]" aria-label={viewLabel}>
-                    <SelectValue placeholder={viewPlaceholder} />
+                  </SheetContent>
+                </Sheet>
+              ) : null}
+              {showSearch ? (
+                <div className="relative w-full sm:w-64">
+                  <label htmlFor={searchInputId} className="sr-only">
+                    {searchLabel}
+                  </label>
+                  <Search
+                    aria-hidden="true"
+                    className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2"
+                  />
+                  <Input
+                    id={searchInputId}
+                    type="search"
+                    value={searchText}
+                    onChange={event => handleSearchChange(event.target.value)}
+                    placeholder={searchPlaceholder}
+                    aria-label={searchLabel}
+                    className="h-8 pl-8"
+                  />
+                </div>
+              ) : null}
+              {viewOptions.length > 0 ? (
+                <div className="hidden items-center gap-2 sm:flex">
+                  <span className="text-sm">{viewLabel}</span>
+                  <Select
+                    value={String(pageSizeValue)}
+                    onValueChange={value => handlePageSizeChange(viewOptions.find(option => String(option) === value) ?? value)}
+                  >
+                    <SelectTrigger className="h-8 w-[100px]" aria-label={viewLabel}>
+                      <SelectValue placeholder={viewPlaceholder} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {viewOptions.map(option => (
+                        <SelectItem key={option} value={String(option)}>
+                          {option}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              ) : null}
+            </div>
+            {showSort && sortOptions.length > 0 ? (
+              <div className="flex items-center gap-4">
+                <Select value={sortValue} onValueChange={handleSortChange}>
+                  <SelectTrigger className="h-8 w-[180px]" aria-label={sortPlaceholder}>
+                    <SelectValue placeholder={sortPlaceholder} />
                   </SelectTrigger>
                   <SelectContent>
-                    {viewOptions.map(option => (
-                      <SelectItem key={option} value={String(option)}>
-                        {option}
+                    {sortOptions.map(option => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
               </div>
-            </div>
-            <div className="flex items-center gap-4">
-              <Select value={selectedSort} onValueChange={handleSortChange}>
-                <SelectTrigger className="h-8 w-[180px]" aria-label={sortPlaceholder}>
-                  <SelectValue placeholder={sortPlaceholder} />
-                </SelectTrigger>
-                <SelectContent>
-                  {sortOptions.map(option => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
+            ) : null}
           </div>
 
-          <section aria-labelledby="products-heading" className="flex flex-col gap-6">
-            <h2 id="products-heading" className="sr-only">
-              {productsTitle}
-            </h2>
-            <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
-              {products.map(product => (
-                <li key={product.id} className="group">
-                  <article
-                    className={cn('flex h-full flex-col gap-2', onProductClick && 'cursor-pointer')}
-                    onClick={onProductClick ? () => onProductClick(product) : undefined}
-                  >
-                    <div className="relative aspect-3/4 overflow-hidden rounded-lg">
-                      <img
-                        src={product.image || undefined}
-                        alt={product.name}
-                        className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
-                        width={300}
-                        height={400}
-                        loading="lazy"
-                      />
-                    </div>
-                    <h3 className="text-sm font-medium text-balance">{product.name}</h3>
-                    <p className="text-sm font-semibold">{product.price}</p>
-                  </article>
-                </li>
-              ))}
-            </ul>
-
-            {pagination.length > 0 ? (
-              <Pagination aria-label="Paginación">
-                <PaginationContent>
-                  {pagination.map((page, index) =>
-                    page === '...' ? (
-                      <PaginationEllipsis key={`${page}-${index}`} />
-                    ) : (
-                      <PaginationItem key={page}>
-                        <PaginationLink
-                          isActive={activePage === page}
-                          className="size-8 cursor-pointer p-0"
-                          onClick={() => handlePageChange(page)}
+          <CategoryFilter2StatusView
+            status={status}
+            activeFilters={activeFilters}
+            loadingLabel={loadingLabel}
+            emptyTitle={emptyTitle}
+            emptyDescription={emptyDescription}
+            clearFiltersLabel={clearFiltersLabel}
+            invalidQueryTitle={invalidQueryTitle}
+            unsupportedQueryTitle={unsupportedQueryTitle}
+            unmountedCapabilityTitle={unmountedCapabilityTitle}
+            errorTitle={errorTitle}
+            errorDescription={errorDescription}
+            repairLabel={repairLabel}
+            retryLabel={retryLabel}
+            activeFiltersTitle={activeFiltersTitle}
+            removeFilterLabel={removeFilterLabel}
+            onClearFilters={onClearFilters}
+            onRepair={onRepair}
+            onRetry={onRetry}
+            onRemoveFilter={onRemoveFilter}
+          />
+
+          {status.state === 'ready' ? (
+            <section aria-labelledby="products-heading" className="flex flex-col gap-6">
+              <h2 id="products-heading" className="sr-only">
+                {productsTitle}
+              </h2>
+              <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
+                {products.map(product => {
+                  const card = (
+                    <>
+                      <div className="relative aspect-3/4 overflow-hidden rounded-lg">
+                        {product.image ? (
+                          <img
+                            src={product.image}
+                            alt={product.name}
+                            className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+                            width={300}
+                            height={400}
+                            loading="lazy"
+                          />
+                        ) : (
+                          <div
+                            data-slot="product-image-placeholder"
+                            aria-hidden="true"
+                            className="size-full bg-muted"
+                          />
+                        )}
+                      </div>
+                      <h3 className="text-sm font-medium text-balance">{product.name}</h3>
+                      <p className="text-sm font-semibold">{product.price}</p>
+                    </>
+                  )
+                  return (
+                    <li key={product.id} className="group">
+                      {product.href ? (
+                        // A real anchor keeps keyboard focus, middle-click and
+                        // crawlers working without a JS emit path.
+                        <a href={product.href} className="flex h-full flex-col gap-2">
+                          {card}
+                        </a>
+                      ) : (
+                        <article
+                          className={cn(
+                            'flex h-full flex-col gap-2',
+                            onProductClick && 'cursor-pointer',
+                          )}
+                          onClick={onProductClick ? () => onProductClick(product) : undefined}
                         >
-                          {page}
-                          {activePage === page && <span className="sr-only">{currentLabel}</span>}
-                        </PaginationLink>
-                      </PaginationItem>
-                    )
-                  )}
-                </PaginationContent>
-              </Pagination>
-            ) : null}
-          </section>
+                          {card}
+                        </article>
+                      )}
+                    </li>
+                  )
+                })}
+              </ul>
+
+              {pagination.length > 0 ? (
+                <Pagination aria-label="Paginación">
+                  <PaginationContent>
+                    {pagination.map((page, index) =>
+                      page === '...' ? (
+                        <PaginationEllipsis key={`${page}-${index}`} />
+                      ) : (
+                        <PaginationItem key={page}>
+                          <Button
+                            type="button"
+                            variant={pageValue === page ? 'outline' : 'ghost'}
+                            size="icon"
+                            data-slot="pagination-link"
+                            data-active={pageValue === page}
+                            aria-current={pageValue === page ? 'page' : undefined}
+                            className="size-8 cursor-pointer p-0"
+                            onClick={() => handlePageChange(page)}
+                          >
+                            {page}
+                            {pageValue === page && <span className="sr-only">{currentLabel}</span>}
+                          </Button>
+                        </PaginationItem>
+                      ),
+                    )}
+                  </PaginationContent>
+                </Pagination>
+              ) : null}
+            </section>
+          ) : null}
         </main>
       </div>
     </div>
   )
 }
 
-export default CategoryFilter2
+export default CategoryFilter2