@thorprovider/blocks 0.1.3 → 2.0.0

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

@@ -1,921 +0,0 @@
-'use client'
-
-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,
-} from '../../../ui/pagination'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select'
-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'
-
-export interface FilterProduct {
-  id: string
-  name: string
-  price: 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 {
-  id: string
-  label: string
-}
-
-export interface CategoryFilter2Collection {
-  id: string
-  label: string
-}
-
-export interface CategoryFilter2Color {
-  id: string
-  color: string
-}
-
-export interface CategoryFilter2PriceRange {
-  min: number
-  max: number
-  step: number
-}
-
-export interface CategoryFilter2SortOption {
-  value: string
-  label: string
-}
-
-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
-  priceRangeTitle?: string
-  minLabel?: string
-  maxLabel?: string
-  categoriesTitle?: string
-  collectionsTitle?: string
-  sizesTitle?: string
-  colorsTitle?: string
-  viewLabel?: string
-  viewPlaceholder?: string
-  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]
-
-/**
- * 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,
-  viewOptions = DEFAULT_VIEW_OPTIONS,
-  sortOptions = [],
-  pagination = [],
-  searchValue,
-  selectedCategories,
-  selectedCollections,
-  selectedPriceRange,
-  selectedSort,
-  selectedPage,
-  selectedPageSize,
-  showSearch = false,
-  showFilters = true,
-  showPrice = true,
-  showSort = true,
-  filtersTitle = 'Filtros',
-  selectedText = 'Filtros',
-  clearAllLabel = 'Restablecer',
-  priceRangeTitle = 'Rango de precio',
-  minLabel = 'Mínimo',
-  maxLabel = 'Máximo',
-  categoriesTitle = 'Categoría',
-  collectionsTitle = 'Colección',
-  sizesTitle = 'Tamaño',
-  colorsTitle = 'Color',
-  viewLabel = 'Ver',
-  viewPlaceholder = 'Seleccionar',
-  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 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)')
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      if (e.matches) {
-        setIsSheetOpen(false)
-      }
-    }
-
-    mediaQuery.addEventListener('change', handleChange)
-    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 = 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[]) => {
-    setInternalPriceRange(next)
-    emitFilters({ priceRange: next })
-  }
-
-  const handleSizeChange = (size: string | null) => {
-    setInternalSize(size)
-    emitFilters({ size })
-  }
-
-  const handleColorChange = (color: string | null) => {
-    setInternalColor(color)
-    emitFilters({ color })
-  }
-
-  const handleClearAll = () => {
-    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 handlePageSizeChange = (size: number | string) => {
-    setInternalView(size)
-    ;(onPageSizeChange ?? onViewChange)?.(size)
-  }
-
-  const handleSortChange = (sort: string) => {
-    setInternalSort(sort)
-    onSortChange?.(sort)
-  }
-
-  const handlePageChange = (page: number | string) => {
-    if (page === '...') return
-    setInternalPage(page)
-    onPageChange?.(page)
-  }
-
-  const handleSearchChange = (text: string) => {
-    if (searchValue === undefined) setInternalSearch(text)
-    else setDraftSearch(text)
-    onSearchChange?.(text)
-  }
-
-  const filterPanelProps = {
-    selectedText,
-    clearAllLabel,
-    priceRangeTitle,
-    priceRange: priceRangeValue,
-    priceRangeConfig: showPrice ? priceRangeConfig : undefined,
-    minLabel,
-    maxLabel,
-    onPriceChange: handlePriceChange,
-    categoriesTitle,
-    categories,
-    selectedCategories: categoriesValue,
-    onCategoryChange: handleCategoryChange,
-    collectionsTitle,
-    collections,
-    selectedCollections: collectionsValue,
-    onCollectionChange: handleCollectionChange,
-    sizesTitle,
-    sizes,
-    selectedSize: internalSize,
-    onSizeChange: handleSizeChange,
-    colorsTitle,
-    colors,
-    selectedColor: internalColor,
-    onColorChange: handleColorChange,
-    onClearAll: handleClearAll,
-  }
-
-  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">
-        {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>
-          </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">
-              {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>
-                  </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>
-                    {sortOptions.map(option => (
-                      <SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            ) : null}
-          </div>
-
-          <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}
-                        >
-                          {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