@thorprovider/blocks 2.0.0 → 3.0.1

package/dist/blocks/e-commerce/category-filters/category-listing.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/category-filters/category-listing.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useId, useState, type ReactNode } from 'react'\nimport { Search, SlidersHorizontal, X } from 'lucide-react'\n\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../../../ui/drawer'\nimport { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from '../../../ui/empty'\nimport { Input } from '../../../ui/input'\nimport { Label } from '../../../ui/label'\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from '../../../ui/pagination'\nimport { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../../../ui/sheet'\nimport { Skeleton } from '../../../ui/skeleton'\nimport { cn } from '../../../lib/utils'\nimport type { ProductPresentation } from '../../../lib/contracts'\n\nimport { ProductCard } from '../product-list/product-card'\n\nimport { CategoryListingFilterFields } from './category-listing-filter-fields'\n\n/** The bounded presentation surface. The data contract and callbacks are identical. */\nexport type CategoryListingPresentation = 'sidebar' | 'toolbar'\n\nexport interface CategoryListingOption {\n  id: string\n  label: string\n}\n\nexport interface CategoryListingPriceRange {\n  min: number\n  max: number\n  step: number\n}\n\nexport interface CategoryListingSortOption {\n  value: string\n  label: string\n}\n\n/**\n * A provider-backed facet value. `count` is rendered only when it is a real\n * non-negative number — a true zero is preserved, never recomputed or summed.\n */\nexport interface CategoryListingFacetOption {\n  value: string\n  label: string\n  count?: number\n}\n\n/**\n * A generic facet group. The block never derives sector-specific fields\n * (frame size, colourway, range…) and never invents groups or options.\n */\nexport interface CategoryListingFacetGroup {\n  id: string\n  label: string\n  options: CategoryListingFacetOption[]\n}\n\n/** The absolute canonical filter set emitted upward. */\nexport interface CategoryListingFilters {\n  categories: string[]\n  collections: string[]\n  priceRange?: [number, number]\n  facets?: Record<string, string[]>\n}\n\n/**\n * A typed catalog-query error the listing renders for repair. It mirrors the\n * runtime boundary error: `fields` names the exact raw parameters to remove and\n * `feature` is present only for `unmounted-capability`. The block never builds a\n * host URL — it emits the fields through `onRepair`.\n */\nexport interface CategoryListingQueryError {\n  code: 'invalid-query' | 'unsupported-query' | 'unmounted-capability'\n  /** Exact raw URL parameter names that must be removed to repair the query. */\n  fields: string[]\n  message?: string\n  feature?: 'catalog-search' | 'category-filters'\n}\n\n/**\n * The observable listing status. The host derives it from the URL boundary and\n * the provider outcome; the block only renders it. Distinct states stay\n * distinct — a valid empty result is never shown as an error and a raw failure\n * is never swallowed as empty.\n */\nexport type CategoryListingStatus =\n  | { state: 'loading' }\n  | { state: 'ready' }\n  | { state: 'empty' }\n  | { state: 'invalid-query'; error: CategoryListingQueryError }\n  | { state: 'unsupported-query'; error: CategoryListingQueryError }\n  | { state: 'unmounted-capability'; error: CategoryListingQueryError }\n  | { state: 'error'; message?: string }\n\n/** The kind of canonical filter an active chip represents. */\nexport type CategoryListingActiveFilterKind =\n  | 'text'\n  | 'category'\n  | 'collection'\n  | 'price'\n  | 'attribute'\n\n/**\n * A removable active-filter chip. Built only from the actual canonical query:\n * `params` are the raw URL parameter names carrying the filter and `value` is\n * the specific list value to drop.\n */\nexport interface CategoryListingActiveFilter {\n  /** Stable identity for React keys and removal callbacks. */\n  id: string\n  kind: CategoryListingActiveFilterKind\n  /** Human-readable label shown on the chip. */\n  label: string\n  /** Raw URL parameter names that carry this filter. */\n  params: string[]\n  /** The specific list value this chip removes; absent for scalar filters. */\n  value?: string\n}\n\nexport interface CategoryListingProps {\n  /** Bounded presentation option; defaults to `sidebar`. */\n  presentation?: CategoryListingPresentation\n\n  /** Exactly the provider-paged products for the current page. Never re-paginated. */\n  products: ProductPresentation[]\n  pagination: (number | string)[]\n\n  // ── Controlled canonical-query values ─────────────────────────────────────\n  // The listing owns no private query state: these values are authoritative and\n  // every interaction reports the absolute next value through a callback.\n  searchValue: string\n  selectedCategories: string[]\n  selectedCollections: string[]\n  selectedSort: string\n  selectedPage: number\n  selectedPageSize: number\n  selectedPriceRange?: [number, number]\n  selectedFacets?: Record<string, string[]>\n\n  // ── Provider-declared option sets ─────────────────────────────────────────\n  categories?: CategoryListingOption[]\n  collections?: CategoryListingOption[]\n  sortOptions?: CategoryListingSortOption[]\n  /**\n   * Real backend-provided price range only. When absent the price control is\n   * omitted; the block never falls back to a fabricated `0..1000` default.\n   */\n  priceRange?: CategoryListingPriceRange\n  /** Generic provider-backed facet groups; a group renders only when non-empty. */\n  facets?: CategoryListingFacetGroup[]\n  viewOptions?: number[]\n\n  // ── Per-control visibility (selected from installed features) ─────────────\n  showSearch: boolean\n  showFilters: boolean\n  showSort: boolean\n  /** Price remains gated on a real `priceRange` even when this is true. */\n  showPrice?: boolean\n\n  // ── Observable listing states + active-filter chips ───────────────────────\n  status: CategoryListingStatus\n  activeFilters: CategoryListingActiveFilter[]\n\n  // ── Copy ──────────────────────────────────────────────────────────────────\n  filtersTitle?: string\n  applyFiltersLabel?: string\n  selectedText?: string\n  clearAllLabel?: string\n  priceRangeTitle?: string\n  minLabel?: string\n  maxLabel?: string\n  categoriesTitle?: string\n  collectionsTitle?: string\n  sortTitle?: string\n  viewLabel?: string\n  viewPlaceholder?: string\n  sortPlaceholder?: string\n  productsTitle?: string\n  currentLabel?: string\n  searchLabel?: string\n  searchPlaceholder?: string\n  loadingLabel?: string\n  emptyTitle?: string\n  emptyDescription?: string\n  clearFiltersLabel?: string\n  invalidQueryTitle?: string\n  unsupportedQueryTitle?: string\n  unmountedCapabilityTitle?: string\n  errorTitle?: string\n  errorDescription?: string\n  repairLabel?: string\n  retryLabel?: string\n  activeFiltersTitle?: string\n  removeFilterLabel?: string\n\n  // ── Emit-only callbacks: the block never fetches or rewrites the URL ─────\n  onProductClick?: (product: ProductPresentation) => void\n  onPageChange?: (page: number) => void\n  onPageSizeChange?: (pageSize: number) => void\n  onSortChange?: (sort: string) => void\n  onFilterChange?: (next: CategoryListingFilters) => void\n  onSearchChange?: (value: string) => void\n  /** Empty-state clear: drops the active filters but never base scope/sort/pageSize. */\n  onClearFilters?: () => void\n  /** Invalid/unsupported/unmounted repair: receives the exact bad fields to remove. */\n  onRepair?: (remove: string[]) => void\n  /** Query/network failure retry: preserves the current query/input. */\n  onRetry?: () => void\n  /** Removes a single active-filter chip. */\n  onRemoveFilter?: (filter: CategoryListingActiveFilter) => void\n}\n\nconst DEFAULT_VIEW_OPTIONS = [10, 25, 50, 100]\n\n/**\n * Pure selection reducer shared by checkbox handlers. Exported so the emitted\n * contract is unit-testable without a DOM (this package's tests render with\n * `react-dom/server`).\n */\nexport function toggleFilterValue(\n  current: readonly string[],\n  value: string,\n  checked: boolean,\n): string[] {\n  return checked ? [...current, value] : current.filter(candidate => candidate !== value)\n}\n\n/** Assemble the typed absolute filter change emitted upward. */\nexport function buildFilterChange(input: {\n  categories: string[]\n  collections: string[]\n  priceRange?: [number, number]\n  facets?: Record<string, string[]>\n}): CategoryListingFilters {\n  const change: CategoryListingFilters = {\n    categories: input.categories,\n    collections: input.collections,\n  }\n  if (input.priceRange) change.priceRange = input.priceRange\n  if (input.facets) change.facets = input.facets\n  return change\n}\n\n/**\n * Reconcile the controlled search draft with the URL-backed `searchValue`.\n *\n * The URL is authoritative, but it only updates after an async server\n * navigation. Binding the input directly to that lagging prop makes React reset\n * it to the previous server value on every re-render, so fast typing loses every\n * character but the last. This pure function keeps a local draft authoritative\n * while the shopper is typing and adopts an external `searchValue`\n * (navigation / reload / back-forward) only when no uncommitted edit is pending.\n */\nexport function reconcileSearchDraft(input: {\n  searchValue?: string\n  prevSearchValue?: string\n  draft: string\n}): { draft: string; prevSearchValue?: string } | null {\n  const { searchValue, prevSearchValue, draft } = input\n  if (searchValue === undefined || searchValue === prevSearchValue) return null\n  const clean = prevSearchValue === undefined || draft === prevSearchValue\n  return { draft: clean ? searchValue : draft, prevSearchValue: searchValue }\n}\n\nexport interface CategoryListingStatusViewProps {\n  status: CategoryListingStatus\n  activeFilters?: CategoryListingActiveFilter[]\n  activeFiltersTitle?: string\n  removeFilterLabel?: string\n  loadingLabel?: string\n  emptyTitle?: string\n  emptyDescription?: string\n  clearFiltersLabel?: string\n  invalidQueryTitle?: string\n  unsupportedQueryTitle?: string\n  unmountedCapabilityTitle?: string\n  errorTitle?: string\n  errorDescription?: string\n  repairLabel?: string\n  retryLabel?: string\n  onClearFilters?: () => void\n  onRepair?: (remove: string[]) => void\n  onRetry?: () => void\n  onRemoveFilter?: (filter: CategoryListingActiveFilter) => void\n}\n\n/** Human-readable description naming the exact offending parameters. */\nfunction describeQueryError(\n  error: CategoryListingQueryError,\n  state: 'invalid-query' | 'unsupported-query' | 'unmounted-capability',\n): string {\n  const fields = error.fields.join(', ')\n  if (state === 'unmounted-capability' && error.feature) {\n    return `${fields} pertenece a la función «${error.feature}», que no está instalada.`\n  }\n  return error.message ?? `Parámetros: ${fields}`\n}\n\n/**\n * Hooks-free presentation of the observable listing states and the removable\n * active-filter chips. Kept separate from `CategoryListing` so the interaction\n * contract (clear / repair / retry / chip removal) is testable by invoking the\n * rendered handlers without a DOM. It renders no products and performs no fetch.\n */\nexport function CategoryListingStatusView({\n  status,\n  activeFilters = [],\n  activeFiltersTitle = 'Filtros activos',\n  removeFilterLabel = 'Quitar filtro',\n  loadingLabel = 'Cargando productos',\n  emptyTitle = 'Sin resultados',\n  emptyDescription = 'Ningún producto coincide con los filtros activos.',\n  clearFiltersLabel = 'Limpiar filtros',\n  invalidQueryTitle = 'Consulta no válida',\n  unsupportedQueryTitle = 'Filtro no disponible',\n  unmountedCapabilityTitle = 'Función no disponible',\n  errorTitle = 'No se pudieron cargar los productos',\n  errorDescription = 'Inténtalo de nuevo.',\n  repairLabel = 'Corregir búsqueda',\n  retryLabel = 'Reintentar',\n  onClearFilters,\n  onRepair,\n  onRetry,\n  onRemoveFilter,\n}: CategoryListingStatusViewProps) {\n  const chips =\n    activeFilters.length > 0 ? (\n      <div role='group' aria-label={activeFiltersTitle} className='flex flex-wrap items-center gap-2'>\n        {activeFilters.map(filter => (\n          <Badge key={filter.id} variant='secondary' className='gap-1 pr-1'>\n            <span>{filter.label}</span>\n            <Button\n              type='button'\n              variant='ghost'\n              size='icon-xs'\n              className='size-4 cursor-pointer rounded-full'\n              aria-label={`${removeFilterLabel}: ${filter.label}`}\n              data-action='remove-filter'\n              data-filter-id={filter.id}\n              onClick={() => onRemoveFilter?.(filter)}\n            >\n              <X aria-hidden='true' />\n            </Button>\n          </Badge>\n        ))}\n      </div>\n    ) : null\n\n  if (status.state === 'ready') return chips\n\n  let body: ReactNode\n  switch (status.state) {\n    case 'loading':\n      body = (\n        <div role='status' aria-live='polite' aria-busy='true' className='flex flex-col gap-4'>\n          <span className='sr-only'>{loadingLabel}</span>\n          <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>\n            {Array.from({ length: 6 }, (_, index) => (\n              <div key={index} className='flex flex-col gap-2'>\n                <Skeleton className='aspect-3/4 w-full rounded-lg' />\n                <Skeleton className='h-4 w-3/4' />\n                <Skeleton className='h-4 w-1/3' />\n              </div>\n            ))}\n          </div>\n        </div>\n      )\n      break\n    case 'empty':\n      body = (\n        <Empty role='status'>\n          <EmptyHeader>\n            <EmptyTitle>{emptyTitle}</EmptyTitle>\n            <EmptyDescription>{emptyDescription}</EmptyDescription>\n          </EmptyHeader>\n          {onClearFilters ? (\n            <EmptyContent>\n              <Button type='button' variant='outline' data-action='clear-filters' onClick={() => onClearFilters()}>\n                {clearFiltersLabel}\n              </Button>\n            </EmptyContent>\n          ) : null}\n        </Empty>\n      )\n      break\n    case 'invalid-query':\n    case 'unsupported-query':\n    case 'unmounted-capability':\n      body = (\n        <Empty role='alert'>\n          <EmptyHeader>\n            <EmptyTitle>\n              {status.state === 'invalid-query'\n                ? invalidQueryTitle\n                : status.state === 'unsupported-query'\n                  ? unsupportedQueryTitle\n                  : unmountedCapabilityTitle}\n            </EmptyTitle>\n            <EmptyDescription>{describeQueryError(status.error, status.state)}</EmptyDescription>\n          </EmptyHeader>\n          {onRepair ? (\n            <EmptyContent>\n              <Button\n                type='button'\n                variant='outline'\n                data-action='repair'\n                onClick={() => onRepair(status.error.fields)}\n              >\n                {repairLabel}\n              </Button>\n            </EmptyContent>\n          ) : null}\n        </Empty>\n      )\n      break\n    case 'error':\n      body = (\n        <Empty role='alert'>\n          <EmptyHeader>\n            <EmptyTitle>{errorTitle}</EmptyTitle>\n            <EmptyDescription>{status.message ?? errorDescription}</EmptyDescription>\n          </EmptyHeader>\n          {onRetry ? (\n            <EmptyContent>\n              <Button type='button' variant='default' data-action='retry' onClick={() => onRetry()}>\n                {retryLabel}\n              </Button>\n            </EmptyContent>\n          ) : null}\n        </Empty>\n      )\n      break\n  }\n\n  return (\n    <div className='flex flex-col gap-4'>\n      {chips}\n      {body}\n    </div>\n  )\n}\n\nexport function CategoryListing({\n  presentation = 'sidebar',\n  products,\n  pagination,\n  searchValue,\n  selectedCategories,\n  selectedCollections,\n  selectedSort,\n  selectedPage,\n  selectedPageSize,\n  selectedPriceRange,\n  selectedFacets = {},\n  categories = [],\n  collections = [],\n  sortOptions = [],\n  priceRange: priceRangeConfig,\n  facets = [],\n  viewOptions = DEFAULT_VIEW_OPTIONS,\n  showSearch,\n  showFilters,\n  showSort,\n  showPrice = true,\n  status,\n  activeFilters,\n  filtersTitle = 'Filtros',\n  applyFiltersLabel = 'Aplicar filtros',\n  selectedText = 'Filtros',\n  clearAllLabel = 'Restablecer',\n  priceRangeTitle = 'Rango de precio',\n  minLabel = 'Mínimo',\n  maxLabel = 'Máximo',\n  categoriesTitle = 'Categoría',\n  collectionsTitle = 'Colección',\n  sortTitle = 'Ordenar por',\n  viewLabel = 'Ver',\n  viewPlaceholder = 'Seleccionar',\n  sortPlaceholder = 'Ordenar por',\n  productsTitle = 'Productos',\n  currentLabel = '(actual)',\n  searchLabel = 'Buscar',\n  searchPlaceholder = 'Buscar',\n  loadingLabel,\n  emptyTitle,\n  emptyDescription,\n  clearFiltersLabel,\n  invalidQueryTitle,\n  unsupportedQueryTitle,\n  unmountedCapabilityTitle,\n  errorTitle,\n  errorDescription,\n  repairLabel,\n  retryLabel,\n  activeFiltersTitle,\n  removeFilterLabel,\n  onProductClick,\n  onPageChange,\n  onPageSizeChange,\n  onSortChange,\n  onFilterChange,\n  onSearchChange,\n  onClearFilters,\n  onRepair,\n  onRetry,\n  onRemoveFilter,\n}: CategoryListingProps) {\n  const searchInputId = useId()\n  const [draftSearch, setDraftSearch] = useState(searchValue)\n  const [prevSearchValue, setPrevSearchValue] = useState<string | undefined>(searchValue)\n  const [isSheetOpen, setIsSheetOpen] = useState(false)\n  const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false)\n  const [isSortDrawerOpen, setIsSortDrawerOpen] = useState(false)\n\n  const reconciledSearch = reconcileSearchDraft({ searchValue, prevSearchValue, draft: draftSearch })\n  if (reconciledSearch) {\n    setPrevSearchValue(reconciledSearch.prevSearchValue)\n    if (reconciledSearch.draft !== draftSearch) setDraftSearch(reconciledSearch.draft)\n  }\n\n  // The desktop surface owns the filters; close every mobile overlay when the\n  // viewport crosses into the desktop layout.\n  useEffect(() => {\n    const mediaQuery = window.matchMedia('(min-width: 1024px)')\n    const handleChange = (event: MediaQueryListEvent) => {\n      if (event.matches) {\n        setIsSheetOpen(false)\n        setIsFilterDrawerOpen(false)\n        setIsSortDrawerOpen(false)\n      }\n    }\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [])\n\n  const priceRangeValue: [number, number] = priceRangeConfig\n    ? (selectedPriceRange ?? [priceRangeConfig.min, priceRangeConfig.max])\n    : [0, 0]\n\n  const emitFilters = (overrides: Partial<CategoryListingFilters> = {}) => {\n    onFilterChange?.(\n      buildFilterChange({\n        categories: selectedCategories,\n        collections: selectedCollections,\n        ...(priceRangeConfig ? { priceRange: priceRangeValue } : {}),\n        facets: selectedFacets,\n        ...overrides,\n      }),\n    )\n  }\n\n  const handleCategoryChange = (category: string, checked: boolean) => {\n    emitFilters({ categories: toggleFilterValue(selectedCategories, category, checked) })\n  }\n\n  const handleCollectionChange = (collection: string, checked: boolean) => {\n    emitFilters({ collections: toggleFilterValue(selectedCollections, collection, checked) })\n  }\n\n  const handleFacetChange = (group: CategoryListingFacetGroup, value: string, checked: boolean) => {\n    const current = selectedFacets[group.id] ?? []\n    const nextValues = toggleFilterValue(current, value, checked)\n    const nextFacets: Record<string, string[]> = { ...selectedFacets }\n    if (nextValues.length > 0) nextFacets[group.id] = nextValues\n    else delete nextFacets[group.id]\n    emitFilters({ facets: nextFacets })\n  }\n\n  const handlePriceChange = (next: [number, number]) => {\n    emitFilters({ priceRange: next })\n  }\n\n  const handleClearAll = () => {\n    emitFilters({\n      categories: [],\n      collections: [],\n      ...(priceRangeConfig ? { priceRange: [priceRangeConfig.min, priceRangeConfig.max] as [number, number] } : {}),\n      facets: {},\n    })\n  }\n\n  const handlePageSizeChange = (size: number) => {\n    if (Number.isFinite(size)) onPageSizeChange?.(size)\n  }\n\n  const handlePageChange = (page: number | string) => {\n    if (page === '...') return\n    const numeric = Number(page)\n    if (Number.isFinite(numeric)) onPageChange?.(numeric)\n  }\n\n  const handleSortChange = (sort: string) => {\n    onSortChange?.(sort)\n  }\n\n  const handleSearchChange = (text: string) => {\n    setDraftSearch(text)\n    onSearchChange?.(text)\n  }\n\n  const fields = (\n    <CategoryListingFilterFields\n      selectedText={selectedText}\n      clearAllLabel={clearAllLabel}\n      priceRangeTitle={priceRangeTitle}\n      priceRange={priceRangeValue}\n      priceRangeConfig={showPrice ? priceRangeConfig : undefined}\n      minLabel={minLabel}\n      maxLabel={maxLabel}\n      onPriceChange={handlePriceChange}\n      categoriesTitle={categoriesTitle}\n      categories={categories}\n      selectedCategories={selectedCategories}\n      onCategoryChange={handleCategoryChange}\n      collectionsTitle={collectionsTitle}\n      collections={collections}\n      selectedCollections={selectedCollections}\n      onCollectionChange={handleCollectionChange}\n      facets={facets}\n      selectedFacets={selectedFacets}\n      onFacetChange={handleFacetChange}\n      onClearAll={handleClearAll}\n    />\n  )\n\n  const sortControl = (ariaLabel: string) =>\n    showSort && sortOptions.length > 0 ? (\n      <Select value={selectedSort} onValueChange={handleSortChange}>\n        <SelectTrigger className='h-8 w-[180px]' aria-label={ariaLabel}>\n          <SelectValue placeholder={sortPlaceholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {sortOptions.map(option => (\n            <SelectItem key={option.value} value={option.value}>\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    ) : null\n\n  const searchControl = showSearch ? (\n    <div className='relative w-full sm:w-64'>\n      <label htmlFor={searchInputId} className='sr-only'>\n        {searchLabel}\n      </label>\n      <Search\n        aria-hidden='true'\n        className='text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2'\n      />\n      <Input\n        id={searchInputId}\n        type='search'\n        value={draftSearch}\n        onChange={event => handleSearchChange(event.target.value)}\n        placeholder={searchPlaceholder}\n        aria-label={searchLabel}\n        className='h-8 pl-8'\n      />\n    </div>\n  ) : null\n\n  const pageSizeControl =\n    viewOptions.length > 0 ? (\n      <div className='hidden items-center gap-2 sm:flex'>\n        <span className='text-sm'>{viewLabel}</span>\n        <Select\n          value={String(selectedPageSize)}\n          onValueChange={value => {\n            const option = viewOptions.find(candidate => String(candidate) === value)\n            handlePageSizeChange(option ?? Number(value))\n          }}\n        >\n          <SelectTrigger className='h-8 w-[100px]' aria-label={viewLabel}>\n            <SelectValue placeholder={viewPlaceholder} />\n          </SelectTrigger>\n          <SelectContent>\n            {viewOptions.map(option => (\n              <SelectItem key={option} value={String(option)}>\n                {option}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    ) : null\n\n  const statusView = (\n    <CategoryListingStatusView\n      status={status}\n      activeFilters={activeFilters}\n      loadingLabel={loadingLabel}\n      emptyTitle={emptyTitle}\n      emptyDescription={emptyDescription}\n      clearFiltersLabel={clearFiltersLabel}\n      invalidQueryTitle={invalidQueryTitle}\n      unsupportedQueryTitle={unsupportedQueryTitle}\n      unmountedCapabilityTitle={unmountedCapabilityTitle}\n      errorTitle={errorTitle}\n      errorDescription={errorDescription}\n      repairLabel={repairLabel}\n      retryLabel={retryLabel}\n      activeFiltersTitle={activeFiltersTitle}\n      removeFilterLabel={removeFilterLabel}\n      onClearFilters={onClearFilters}\n      onRepair={onRepair}\n      onRetry={onRetry}\n      onRemoveFilter={onRemoveFilter}\n    />\n  )\n\n  const results =\n    status.state === 'ready' ? (\n      <section aria-labelledby='products-heading' className='flex flex-col gap-6'>\n        <h2 id='products-heading' className='sr-only'>\n          {productsTitle}\n        </h2>\n        <ul\n          data-slot='category-listing-products'\n          className={cn(\n            'grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6',\n            presentation === 'sidebar' ? 'lg:grid-cols-3' : 'lg:grid-cols-4',\n          )}\n        >\n          {products.map(product => (\n            <li key={product.id}>\n              <ProductCard\n                item={product}\n                presentation='minimal'\n                hideAddToCart\n                onProductClick={onProductClick}\n              />\n            </li>\n          ))}\n        </ul>\n\n        {pagination.length > 0 ? (\n          <Pagination aria-label='Paginación'>\n            <PaginationContent>\n              {pagination.map((page, index) =>\n                page === '...' ? (\n                  <PaginationEllipsis key={`${page}-${index}`} />\n                ) : (\n                  <PaginationItem key={page}>\n                    <Button\n                      type='button'\n                      variant={selectedPage === page ? 'outline' : 'ghost'}\n                      size='icon'\n                      data-slot='pagination-link'\n                      data-active={selectedPage === page}\n                      aria-current={selectedPage === page ? 'page' : undefined}\n                      className='size-8 cursor-pointer p-0'\n                      onClick={() => handlePageChange(page)}\n                    >\n                      {page}\n                      {selectedPage === page && <span className='sr-only'>{currentLabel}</span>}\n                    </Button>\n                  </PaginationItem>\n                ),\n              )}\n            </PaginationContent>\n          </Pagination>\n        ) : null}\n      </section>\n    ) : null\n\n  return (\n    <div className='mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8'>\n      <div className={cn('flex flex-col gap-8', presentation === 'sidebar' && 'lg:flex-row')}>\n        {presentation === 'sidebar' && showFilters ? (\n          <aside className='hidden w-full flex-none lg:block lg:w-72'>\n            <div className='max-h-100vh sticky top-4 overflow-y-auto'>\n              <div className='flex flex-col gap-6 pb-6'>{fields}</div>\n            </div>\n          </aside>\n        ) : null}\n\n        <main className='flex min-w-0 flex-1 flex-col gap-6'>\n          {presentation === 'toolbar' ? (\n            <>\n              <div className='bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky top-0 z-10 -mx-4 flex items-center gap-2 border-b px-4 py-2 backdrop-blur lg:hidden'>\n                {showFilters ? (\n                  <Button\n                    type='button'\n                    variant='outline'\n                    size='sm'\n                    className='h-9 flex-1 cursor-pointer justify-start'\n                    onClick={() => setIsFilterDrawerOpen(true)}\n                  >\n                    <SlidersHorizontal aria-hidden='true' />\n                    {filtersTitle}\n                    {activeFilters.length > 0 ? (\n                      <Badge variant='secondary' className='ms-auto'>\n                        {activeFilters.length}\n                      </Badge>\n                    ) : null}\n                  </Button>\n                ) : null}\n                {showSort && sortOptions.length > 0 ? (\n                  <Button\n                    type='button'\n                    variant='outline'\n                    size='sm'\n                    className='h-9 cursor-pointer'\n                    aria-label={sortTitle}\n                    onClick={() => setIsSortDrawerOpen(true)}\n                  >\n                    {sortTitle}\n                  </Button>\n                ) : null}\n              </div>\n\n              <div className='hidden items-center gap-3 lg:flex'>\n                {showFilters ? (\n                  <Button\n                    type='button'\n                    variant='outline'\n                    size='sm'\n                    className='h-8 cursor-pointer'\n                    onClick={() => setIsFilterDrawerOpen(true)}\n                  >\n                    <SlidersHorizontal aria-hidden='true' />\n                    {filtersTitle}\n                    {activeFilters.length > 0 ? (\n                      <Badge variant='secondary'>{activeFilters.length}</Badge>\n                    ) : null}\n                  </Button>\n                ) : null}\n                <div className='ms-auto'>{sortControl(sortTitle)}</div>\n              </div>\n            </>\n          ) : null}\n\n          <div className='flex flex-wrap items-center justify-between gap-4'>\n            <div className='flex flex-1 items-center gap-4'>\n              {presentation === 'sidebar' && showFilters ? (\n                <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>\n                  <SheetTrigger asChild>\n                    <Button\n                      variant='outline'\n                      size='sm'\n                      className='h-8 cursor-pointer px-3 text-xs lg:hidden'\n                    >\n                      <SlidersHorizontal aria-hidden='true' />\n                      {filtersTitle}\n                    </Button>\n                  </SheetTrigger>\n                  <SheetContent side='left' className='w-full p-0 sm:w-[380px] lg:hidden'>\n                    <SheetHeader className='border-b px-6 py-4'>\n                      <SheetTitle className='text-lg'>{filtersTitle}</SheetTitle>\n                    </SheetHeader>\n                    <div className='h-[calc(100vh-4rem)] overflow-y-auto p-6'>\n                      <div className='flex flex-col gap-6'>{fields}</div>\n                    </div>\n                  </SheetContent>\n                </Sheet>\n              ) : null}\n              {searchControl}\n              {pageSizeControl}\n            </div>\n            {presentation === 'sidebar' ? (\n              <div className='flex items-center gap-4'>{sortControl(sortPlaceholder)}</div>\n            ) : null}\n          </div>\n\n          {statusView}\n          {results}\n        </main>\n      </div>\n\n      {presentation === 'toolbar' && showFilters ? (\n        <Drawer open={isFilterDrawerOpen} onOpenChange={setIsFilterDrawerOpen}>\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{filtersTitle}</DrawerTitle>\n            </DrawerHeader>\n            <div className='min-h-0 flex-1 overflow-y-auto px-4'>{fields}</div>\n            <div className='flex items-center gap-2 border-t p-4 pb-[max(1rem,env(safe-area-inset-bottom))]'>\n              <Button type='button' variant='ghost' onClick={handleClearAll}>\n                {clearAllLabel}\n              </Button>\n              <Button type='button' className='flex-1' onClick={() => setIsFilterDrawerOpen(false)}>\n                {applyFiltersLabel}\n              </Button>\n            </div>\n          </DrawerContent>\n        </Drawer>\n      ) : null}\n\n      {presentation === 'toolbar' && showSort && sortOptions.length > 0 ? (\n        <Drawer open={isSortDrawerOpen} onOpenChange={setIsSortDrawerOpen}>\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{sortTitle}</DrawerTitle>\n            </DrawerHeader>\n            <div className='px-4 pb-6'>\n              <RadioGroup\n                value={selectedSort}\n                onValueChange={value => {\n                  if (typeof value === 'string') {\n                    handleSortChange(value)\n                    setIsSortDrawerOpen(false)\n                  }\n                }}\n                className='gap-3'\n              >\n                {sortOptions.map(option => (\n                  <div key={option.value} className='flex items-center gap-2'>\n                    <RadioGroupItem value={option.value} id={`listing-sort-${option.value}`} />\n                    <Label htmlFor={`listing-sort-${option.value}`} className='min-h-11 font-normal'>\n                      {option.label}\n                    </Label>\n                  </div>\n                ))}\n              </RadioGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n      ) : null}\n    </div>\n  )\n}\n\nexport default CategoryListing\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/category-filters/category-listing.mjs

@@ -0,0 +1,539 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { Search, SlidersHorizontal, X } from "lucide-react";
+import { Badge } from "../../../ui/badge.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "../../../ui/drawer.mjs";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "../../../ui/empty.mjs";
+import { Input } from "../../../ui/input.mjs";
+import { Label } from "../../../ui/label.mjs";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem
+} from "../../../ui/pagination.mjs";
+import { RadioGroup, RadioGroupItem } from "../../../ui/radio-group.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../ui/select.mjs";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../../../ui/sheet.mjs";
+import { Skeleton } from "../../../ui/skeleton.mjs";
+import { cn } from "../../../lib/utils.mjs";
+import { ProductCard } from "../product-list/product-card.mjs";
+import { CategoryListingFilterFields } from "./category-listing-filter-fields.mjs";
+const DEFAULT_VIEW_OPTIONS = [10, 25, 50, 100];
+function toggleFilterValue(current, value, checked) {
+  return checked ? [...current, value] : current.filter((candidate) => candidate !== value);
+}
+function buildFilterChange(input) {
+  const change = {
+    categories: input.categories,
+    collections: input.collections
+  };
+  if (input.priceRange) change.priceRange = input.priceRange;
+  if (input.facets) change.facets = input.facets;
+  return change;
+}
+function reconcileSearchDraft(input) {
+  const { searchValue, prevSearchValue, draft } = input;
+  if (searchValue === void 0 || searchValue === prevSearchValue) return null;
+  const clean = prevSearchValue === void 0 || draft === prevSearchValue;
+  return { draft: clean ? searchValue : draft, prevSearchValue: searchValue };
+}
+function describeQueryError(error, state) {
+  const fields = error.fields.join(", ");
+  if (state === "unmounted-capability" && error.feature) {
+    return `${fields} pertenece a la funci\xF3n \xAB${error.feature}\xBB, que no est\xE1 instalada.`;
+  }
+  return error.message ?? `Par\xE1metros: ${fields}`;
+}
+function CategoryListingStatusView({
+  status,
+  activeFilters = [],
+  activeFiltersTitle = "Filtros activos",
+  removeFilterLabel = "Quitar filtro",
+  loadingLabel = "Cargando productos",
+  emptyTitle = "Sin resultados",
+  emptyDescription = "Ning\xFAn producto coincide con los filtros activos.",
+  clearFiltersLabel = "Limpiar filtros",
+  invalidQueryTitle = "Consulta no v\xE1lida",
+  unsupportedQueryTitle = "Filtro no disponible",
+  unmountedCapabilityTitle = "Funci\xF3n no disponible",
+  errorTitle = "No se pudieron cargar los productos",
+  errorDescription = "Int\xE9ntalo de nuevo.",
+  repairLabel = "Corregir b\xFAsqueda",
+  retryLabel = "Reintentar",
+  onClearFilters,
+  onRepair,
+  onRetry,
+  onRemoveFilter
+}) {
+  const chips = activeFilters.length > 0 ? /* @__PURE__ */ jsx("div", { role: "group", "aria-label": activeFiltersTitle, className: "flex flex-wrap items-center gap-2", children: activeFilters.map((filter) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1 pr-1", children: [
+    /* @__PURE__ */ jsx("span", { children: filter.label }),
+    /* @__PURE__ */ jsx(
+      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),
+        children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+      }
+    )
+  ] }, filter.id)) }) : null;
+  if (status.state === "ready") return chips;
+  let body;
+  switch (status.state) {
+    case "loading":
+      body = /* @__PURE__ */ jsxs("div", { role: "status", "aria-live": "polite", "aria-busy": "true", className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingLabel }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3", children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "aspect-3/4 w-full rounded-lg" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" })
+        ] }, index)) })
+      ] });
+      break;
+    case "empty":
+      body = /* @__PURE__ */ jsxs(Empty, { role: "status", children: [
+        /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+          /* @__PURE__ */ jsx(EmptyTitle, { children: emptyTitle }),
+          /* @__PURE__ */ jsx(EmptyDescription, { children: emptyDescription })
+        ] }),
+        onClearFilters ? /* @__PURE__ */ jsx(EmptyContent, { children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", "data-action": "clear-filters", onClick: () => onClearFilters(), children: clearFiltersLabel }) }) : null
+      ] });
+      break;
+    case "invalid-query":
+    case "unsupported-query":
+    case "unmounted-capability":
+      body = /* @__PURE__ */ jsxs(Empty, { role: "alert", children: [
+        /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+          /* @__PURE__ */ jsx(EmptyTitle, { children: status.state === "invalid-query" ? invalidQueryTitle : status.state === "unsupported-query" ? unsupportedQueryTitle : unmountedCapabilityTitle }),
+          /* @__PURE__ */ jsx(EmptyDescription, { children: describeQueryError(status.error, status.state) })
+        ] }),
+        onRepair ? /* @__PURE__ */ jsx(EmptyContent, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            "data-action": "repair",
+            onClick: () => onRepair(status.error.fields),
+            children: repairLabel
+          }
+        ) }) : null
+      ] });
+      break;
+    case "error":
+      body = /* @__PURE__ */ jsxs(Empty, { role: "alert", children: [
+        /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+          /* @__PURE__ */ jsx(EmptyTitle, { children: errorTitle }),
+          /* @__PURE__ */ jsx(EmptyDescription, { children: status.message ?? errorDescription })
+        ] }),
+        onRetry ? /* @__PURE__ */ jsx(EmptyContent, { children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "default", "data-action": "retry", onClick: () => onRetry(), children: retryLabel }) }) : null
+      ] });
+      break;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    chips,
+    body
+  ] });
+}
+function CategoryListing({
+  presentation = "sidebar",
+  products,
+  pagination,
+  searchValue,
+  selectedCategories,
+  selectedCollections,
+  selectedSort,
+  selectedPage,
+  selectedPageSize,
+  selectedPriceRange,
+  selectedFacets = {},
+  categories = [],
+  collections = [],
+  sortOptions = [],
+  priceRange: priceRangeConfig,
+  facets = [],
+  viewOptions = DEFAULT_VIEW_OPTIONS,
+  showSearch,
+  showFilters,
+  showSort,
+  showPrice = true,
+  status,
+  activeFilters,
+  filtersTitle = "Filtros",
+  applyFiltersLabel = "Aplicar filtros",
+  selectedText = "Filtros",
+  clearAllLabel = "Restablecer",
+  priceRangeTitle = "Rango de precio",
+  minLabel = "M\xEDnimo",
+  maxLabel = "M\xE1ximo",
+  categoriesTitle = "Categor\xEDa",
+  collectionsTitle = "Colecci\xF3n",
+  sortTitle = "Ordenar por",
+  viewLabel = "Ver",
+  viewPlaceholder = "Seleccionar",
+  sortPlaceholder = "Ordenar por",
+  productsTitle = "Productos",
+  currentLabel = "(actual)",
+  searchLabel = "Buscar",
+  searchPlaceholder = "Buscar",
+  loadingLabel,
+  emptyTitle,
+  emptyDescription,
+  clearFiltersLabel,
+  invalidQueryTitle,
+  unsupportedQueryTitle,
+  unmountedCapabilityTitle,
+  errorTitle,
+  errorDescription,
+  repairLabel,
+  retryLabel,
+  activeFiltersTitle,
+  removeFilterLabel,
+  onProductClick,
+  onPageChange,
+  onPageSizeChange,
+  onSortChange,
+  onFilterChange,
+  onSearchChange,
+  onClearFilters,
+  onRepair,
+  onRetry,
+  onRemoveFilter
+}) {
+  const searchInputId = useId();
+  const [draftSearch, setDraftSearch] = useState(searchValue);
+  const [prevSearchValue, setPrevSearchValue] = useState(searchValue);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false);
+  const [isSortDrawerOpen, setIsSortDrawerOpen] = useState(false);
+  const reconciledSearch = reconcileSearchDraft({ searchValue, prevSearchValue, draft: draftSearch });
+  if (reconciledSearch) {
+    setPrevSearchValue(reconciledSearch.prevSearchValue);
+    if (reconciledSearch.draft !== draftSearch) setDraftSearch(reconciledSearch.draft);
+  }
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(min-width: 1024px)");
+    const handleChange = (event) => {
+      if (event.matches) {
+        setIsSheetOpen(false);
+        setIsFilterDrawerOpen(false);
+        setIsSortDrawerOpen(false);
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const priceRangeValue = priceRangeConfig ? selectedPriceRange ?? [priceRangeConfig.min, priceRangeConfig.max] : [0, 0];
+  const emitFilters = (overrides = {}) => {
+    onFilterChange?.(
+      buildFilterChange({
+        categories: selectedCategories,
+        collections: selectedCollections,
+        ...priceRangeConfig ? { priceRange: priceRangeValue } : {},
+        facets: selectedFacets,
+        ...overrides
+      })
+    );
+  };
+  const handleCategoryChange = (category, checked) => {
+    emitFilters({ categories: toggleFilterValue(selectedCategories, category, checked) });
+  };
+  const handleCollectionChange = (collection, checked) => {
+    emitFilters({ collections: toggleFilterValue(selectedCollections, collection, checked) });
+  };
+  const handleFacetChange = (group, value, checked) => {
+    const current = selectedFacets[group.id] ?? [];
+    const nextValues = toggleFilterValue(current, value, checked);
+    const nextFacets = { ...selectedFacets };
+    if (nextValues.length > 0) nextFacets[group.id] = nextValues;
+    else delete nextFacets[group.id];
+    emitFilters({ facets: nextFacets });
+  };
+  const handlePriceChange = (next) => {
+    emitFilters({ priceRange: next });
+  };
+  const handleClearAll = () => {
+    emitFilters({
+      categories: [],
+      collections: [],
+      ...priceRangeConfig ? { priceRange: [priceRangeConfig.min, priceRangeConfig.max] } : {},
+      facets: {}
+    });
+  };
+  const handlePageSizeChange = (size) => {
+    if (Number.isFinite(size)) onPageSizeChange?.(size);
+  };
+  const handlePageChange = (page) => {
+    if (page === "...") return;
+    const numeric = Number(page);
+    if (Number.isFinite(numeric)) onPageChange?.(numeric);
+  };
+  const handleSortChange = (sort) => {
+    onSortChange?.(sort);
+  };
+  const handleSearchChange = (text) => {
+    setDraftSearch(text);
+    onSearchChange?.(text);
+  };
+  const fields = /* @__PURE__ */ jsx(
+    CategoryListingFilterFields,
+    {
+      selectedText,
+      clearAllLabel,
+      priceRangeTitle,
+      priceRange: priceRangeValue,
+      priceRangeConfig: showPrice ? priceRangeConfig : void 0,
+      minLabel,
+      maxLabel,
+      onPriceChange: handlePriceChange,
+      categoriesTitle,
+      categories,
+      selectedCategories,
+      onCategoryChange: handleCategoryChange,
+      collectionsTitle,
+      collections,
+      selectedCollections,
+      onCollectionChange: handleCollectionChange,
+      facets,
+      selectedFacets,
+      onFacetChange: handleFacetChange,
+      onClearAll: handleClearAll
+    }
+  );
+  const sortControl = (ariaLabel) => showSort && sortOptions.length > 0 ? /* @__PURE__ */ jsxs(Select, { value: selectedSort, onValueChange: handleSortChange, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[180px]", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: sortPlaceholder }) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+  ] }) : null;
+  const searchControl = showSearch ? /* @__PURE__ */ jsxs("div", { className: "relative w-full sm:w-64", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: searchInputId, className: "sr-only", children: searchLabel }),
+    /* @__PURE__ */ jsx(
+      Search,
+      {
+        "aria-hidden": "true",
+        className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: searchInputId,
+        type: "search",
+        value: draftSearch,
+        onChange: (event) => handleSearchChange(event.target.value),
+        placeholder: searchPlaceholder,
+        "aria-label": searchLabel,
+        className: "h-8 pl-8"
+      }
+    )
+  ] }) : null;
+  const pageSizeControl = viewOptions.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2 sm:flex", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm", children: viewLabel }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: String(selectedPageSize),
+        onValueChange: (value) => {
+          const option = viewOptions.find((candidate) => String(candidate) === value);
+          handlePageSizeChange(option ?? Number(value));
+        },
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[100px]", "aria-label": viewLabel, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: viewPlaceholder }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: viewOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option), children: option }, option)) })
+        ]
+      }
+    )
+  ] }) : null;
+  const statusView = /* @__PURE__ */ jsx(
+    CategoryListingStatusView,
+    {
+      status,
+      activeFilters,
+      loadingLabel,
+      emptyTitle,
+      emptyDescription,
+      clearFiltersLabel,
+      invalidQueryTitle,
+      unsupportedQueryTitle,
+      unmountedCapabilityTitle,
+      errorTitle,
+      errorDescription,
+      repairLabel,
+      retryLabel,
+      activeFiltersTitle,
+      removeFilterLabel,
+      onClearFilters,
+      onRepair,
+      onRetry,
+      onRemoveFilter
+    }
+  );
+  const results = status.state === "ready" ? /* @__PURE__ */ jsxs("section", { "aria-labelledby": "products-heading", className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsx("h2", { id: "products-heading", className: "sr-only", children: productsTitle }),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        "data-slot": "category-listing-products",
+        className: cn(
+          "grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6",
+          presentation === "sidebar" ? "lg:grid-cols-3" : "lg:grid-cols-4"
+        ),
+        children: products.map((product) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          ProductCard,
+          {
+            item: product,
+            presentation: "minimal",
+            hideAddToCart: true,
+            onProductClick
+          }
+        ) }, product.id))
+      }
+    ),
+    pagination.length > 0 ? /* @__PURE__ */ jsx(Pagination, { "aria-label": "Paginaci\xF3n", children: /* @__PURE__ */ jsx(PaginationContent, { children: pagination.map(
+      (page, index) => page === "..." ? /* @__PURE__ */ jsx(PaginationEllipsis, {}, `${page}-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: selectedPage === page ? "outline" : "ghost",
+          size: "icon",
+          "data-slot": "pagination-link",
+          "data-active": selectedPage === page,
+          "aria-current": selectedPage === page ? "page" : void 0,
+          className: "size-8 cursor-pointer p-0",
+          onClick: () => handlePageChange(page),
+          children: [
+            page,
+            selectedPage === page && /* @__PURE__ */ jsx("span", { className: "sr-only", children: currentLabel })
+          ]
+        }
+      ) }, page)
+    ) }) }) : null
+  ] }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", presentation === "sidebar" && "lg:flex-row"), children: [
+      presentation === "sidebar" && showFilters ? /* @__PURE__ */ jsx("aside", { className: "hidden w-full flex-none lg:block lg:w-72", children: /* @__PURE__ */ jsx("div", { className: "max-h-100vh sticky top-4 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6 pb-6", children: fields }) }) }) : null,
+      /* @__PURE__ */ jsxs("main", { className: "flex min-w-0 flex-1 flex-col gap-6", children: [
+        presentation === "toolbar" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky top-0 z-10 -mx-4 flex items-center gap-2 border-b px-4 py-2 backdrop-blur lg:hidden", children: [
+            showFilters ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                className: "h-9 flex-1 cursor-pointer justify-start",
+                onClick: () => setIsFilterDrawerOpen(true),
+                children: [
+                  /* @__PURE__ */ jsx(SlidersHorizontal, { "aria-hidden": "true" }),
+                  filtersTitle,
+                  activeFilters.length > 0 ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ms-auto", children: activeFilters.length }) : null
+                ]
+              }
+            ) : null,
+            showSort && sortOptions.length > 0 ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                className: "h-9 cursor-pointer",
+                "aria-label": sortTitle,
+                onClick: () => setIsSortDrawerOpen(true),
+                children: sortTitle
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-3 lg:flex", children: [
+            showFilters ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                className: "h-8 cursor-pointer",
+                onClick: () => setIsFilterDrawerOpen(true),
+                children: [
+                  /* @__PURE__ */ jsx(SlidersHorizontal, { "aria-hidden": "true" }),
+                  filtersTitle,
+                  activeFilters.length > 0 ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: activeFilters.length }) : null
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("div", { className: "ms-auto", children: sortControl(sortTitle) })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-4", children: [
+            presentation === "sidebar" && showFilters ? /* @__PURE__ */ jsxs(Sheet, { open: isSheetOpen, onOpenChange: setIsSheetOpen, children: [
+              /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "h-8 cursor-pointer px-3 text-xs lg:hidden",
+                  children: [
+                    /* @__PURE__ */ jsx(SlidersHorizontal, { "aria-hidden": "true" }),
+                    filtersTitle
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-full p-0 sm:w-[380px] lg:hidden", children: [
+                /* @__PURE__ */ jsx(SheetHeader, { className: "border-b px-6 py-4", children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-lg", children: filtersTitle }) }),
+                /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-4rem)] overflow-y-auto p-6", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: fields }) })
+              ] })
+            ] }) : null,
+            searchControl,
+            pageSizeControl
+          ] }),
+          presentation === "sidebar" ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: sortControl(sortPlaceholder) }) : null
+        ] }),
+        statusView,
+        results
+      ] })
+    ] }),
+    presentation === "toolbar" && showFilters ? /* @__PURE__ */ jsx(Drawer, { open: isFilterDrawerOpen, onOpenChange: setIsFilterDrawerOpen, children: /* @__PURE__ */ jsxs(DrawerContent, { children: [
+      /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: filtersTitle }) }),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-4", children: fields }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t p-4 pb-[max(1rem,env(safe-area-inset-bottom))]", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: handleClearAll, children: clearAllLabel }),
+        /* @__PURE__ */ jsx(Button, { type: "button", className: "flex-1", onClick: () => setIsFilterDrawerOpen(false), children: applyFiltersLabel })
+      ] })
+    ] }) }) : null,
+    presentation === "toolbar" && showSort && sortOptions.length > 0 ? /* @__PURE__ */ jsx(Drawer, { open: isSortDrawerOpen, onOpenChange: setIsSortDrawerOpen, children: /* @__PURE__ */ jsxs(DrawerContent, { children: [
+      /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: sortTitle }) }),
+      /* @__PURE__ */ jsx("div", { className: "px-4 pb-6", children: /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          value: selectedSort,
+          onValueChange: (value) => {
+            if (typeof value === "string") {
+              handleSortChange(value);
+              setIsSortDrawerOpen(false);
+            }
+          },
+          className: "gap-3",
+          children: sortOptions.map((option) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: option.value, id: `listing-sort-${option.value}` }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: `listing-sort-${option.value}`, className: "min-h-11 font-normal", children: option.label })
+          ] }, option.value))
+        }
+      ) })
+    ] }) }) : null
+  ] });
+}
+var category_listing_default = CategoryListing;
+export {
+  CategoryListing,
+  CategoryListingStatusView,
+  buildFilterChange,
+  category_listing_default as default,
+  reconcileSearchDraft,
+  toggleFilterValue
+};
+//# sourceMappingURL=category-listing.mjs.map