@thorprovider/storefront 0.3.1 → 0.4.0-mvp.0

package/assets/templates/views/category/assembly/slots/filter/CategoryFilter2/catalog.part

@@ -0,0 +1,5 @@
+  CategoryFilter2: {
+    props: categoryFilterPropsSchema,
+    description:
+      'Listado de categoría: una sola presentación controlada CategoryFilter2 con productos, paginación, búsqueda y filtros opcionales.',
+  },

package/assets/templates/views/category/assembly/slots/filter/CategoryFilter2/element.part

@@ -0,0 +1,34 @@
+  'category.filter': {
+    type: 'CategoryFilter2',
+    props: {
+      // User-owned copy first, so a customization can be overridden by the
+      // feature config (search placeholder) and the derived state bindings.
+      ...categoryFilterProps,
+      showSearch: hasSearch,
+      showFilters: hasFilters,
+      showSort: true,
+      showPrice: filtersConfig.showPrice === true,
+      ...(hasSearch && searchConfig.placeholder
+        ? { searchPlaceholder: searchConfig.placeholder }
+        : {}),
+      // Composition context for generated navigation (task 4.11): the client
+      // registry drops a removed feature's owned orphan parameters on a UI
+      // action. Read separately from the block props; never a `CategoryFilter2`
+      // prop and never bound to state.
+      mountedFeatures,
+      products: { $state: '/categoryFilterProducts' },
+      pagination: { $state: '/categoryFilterPagination' },
+      status: { $state: '/categoryFilterStatus' },
+      activeFilters: { $state: '/categoryFilterActiveFilters' },
+      searchValue: { $state: '/categoryFilterSearchValue' },
+      selectedCategories: { $state: '/categoryFilterSelectedCategories' },
+      selectedCollections: { $state: '/categoryFilterSelectedCollections' },
+      selectedSort: { $state: '/categoryFilterSelectedSort' },
+      selectedPage: { $state: '/categoryFilterSelectedPage' },
+      selectedPageSize: { $state: '/categoryFilterSelectedPageSize' },
+      sortOptions: { $state: '/categoryFilterSortOptions' },
+      categories: { $state: '/categoryFilterCategories' },
+      collections: { $state: '/categoryFilterCollections' },
+      priceRange: { $state: '/categoryFilterPriceRange' },
+    },
+  },

package/assets/templates/views/category/assembly/slots/filter/CategoryFilter2/registry.part

@@ -0,0 +1,71 @@
+  CategoryFilter2: ({ props, emit }) => {
+    const router = useRouter()
+    const pathname = usePathname()
+    const { set } = useStateStore()
+    const p = props as unknown as CategoryFilter2RegistryProps
+
+    // Minimal `updateURL` seam (task 6.1; task 5.2 verified the criterion and is
+    // complete): apply one change to the current browser URL and let the server
+    // loader rebuild the listing. The page reset rules live in the pure helper,
+    // not here. The installed-feature context is passed so generated navigation
+    // drops a removed feature's owned orphan parameters (task 4.11) while never
+    // dropping the base listing's route scope, `sort`, `page`, or `pageSize`.
+    //
+    // History policy (task 5.3): an intentional filter/sort/page/pageSize commit
+    // pushes a history entry so reload and back/forward restore the previous
+    // query and products; repair and the immediate per-keystroke search replace
+    // the current entry (no per-keystroke history explosion). The choice is the
+    // pure `catalogHistoryMode` seam, not ad-hoc logic here.
+    const apply = (change: CategoryQueryChange) => {
+      const search = typeof window === 'undefined' ? '' : window.location.search
+      const href = buildCategoryQueryHref(pathname, search, change, p.mountedFeatures)
+      if (catalogHistoryMode(change) === 'push') router.push(href)
+      else router.replace(href)
+    }
+
+    return (
+      <CategoryFilter2Block
+        products={p.products}
+        categories={p.categories}
+        collections={p.collections}
+        sortOptions={p.sortOptions}
+        pagination={p.pagination}
+        priceRange={p.priceRange}
+        showSearch={p.showSearch}
+        showFilters={p.showFilters}
+        showSort={p.showSort}
+        showPrice={p.showPrice}
+        searchValue={p.searchValue}
+        selectedCategories={p.selectedCategories}
+        selectedCollections={p.selectedCollections}
+        selectedSort={p.selectedSort}
+        selectedPage={p.selectedPage}
+        selectedPageSize={p.selectedPageSize}
+        selectedPriceRange={p.selectedPriceRange}
+        status={p.status}
+        activeFilters={p.activeFilters}
+        filtersTitle={p.filtersTitle}
+        searchLabel={p.searchLabel}
+        searchPlaceholder={p.searchPlaceholder}
+        sortPlaceholder={p.sortPlaceholder}
+        productsTitle={p.productsTitle}
+        onSearchChange={(text) => apply({ kind: 'search', text })}
+        onSortChange={(sort) => apply({ kind: 'sort', sort })}
+        onPageChange={(page) => apply({ kind: 'page', page })}
+        onPageSizeChange={(size) => apply({ kind: 'pageSize', pageSize: size })}
+        onFilterChange={(filters: CategoryFilter2Filters) =>
+          apply({ kind: 'filters', categories: filters.categories, collections: filters.collections ?? [] })
+        }
+        onClearFilters={() => apply({ kind: 'clearFilters' })}
+        onRepair={(remove) => apply({ kind: 'repair', remove })}
+        onRetry={() => router.refresh()}
+        onRemoveFilter={(filter: CategoryFilter2ActiveFilter) =>
+          apply({ kind: 'removeFilter', filter })
+        }
+        onProductClick={(product) => {
+          set('/lastClicked', { id: product.id })
+          emit('openProduct')
+        }}
+      />
+    )
+  },

package/assets/templates/views/category/content.ts

@@ -0,0 +1,30 @@
+// Thor Commerce view content: category
+// User-owned view content — listing copy for the single controlled
+// `CategoryFilter2`. Reconcile seeds this file once and never rewrites it; the
+// derived view module (./index.tsx) imports it and wires it into the element
+// tree, so your edits here survive `storefront sync` and unit removal. Plain
+// data only: no React and no server imports.
+//
+// The sort OPTIONS are not listed here: they come from the adapter-advertised
+// set (`getCatalogSortKeys`), never from assumed global price sorts.
+
+export const filterContent = {
+  filtersTitle: 'Filtros',
+  searchLabel: 'Buscar',
+  searchPlaceholder: 'Buscar productos',
+  sortPlaceholder: 'Ordenar por',
+  productsTitle: 'Productos',
+  emptyTitle: 'Sin resultados',
+  emptyDescription: 'Ningún producto coincide con los filtros activos.',
+  clearFiltersLabel: 'Limpiar filtros',
+}
+
+/**
+ * Editorial section instance content, keyed by the section instance id the
+ * manifest persists (`views[].sections[].id`, e.g. `category-faq-1`). The derived
+ * view module reads `sectionContent[id]`, so adding, reordering, or removing a
+ * section never rewrites this file and your copy survives `storefront sync`.
+ * Plain data only, matching the section fragment's props; an unset id renders
+ * the section's neutral default.
+ */
+export const sectionContent: Record<string, Record<string, unknown>> = {}

package/assets/templates/views/category/data.ts

@@ -0,0 +1,12 @@
+// Thor Commerce view data: category
+// User-owned loader shaping for the category view. Reconcile seeds this file once
+// and never rewrites it; the derived view module (./index.tsx) imports these
+// helpers and calls them from its loader, so edits here survive `storefront sync`
+// and unit removal. Pure functions only: no React and no server imports.
+
+export function selectCategoryProducts<T>(
+  all: readonly T[],
+  scoped: readonly T[] | null,
+): T[] {
+  return scoped ? [...scoped] : [...all]
+}

package/assets/templates/views/category/index.tsx

@@ -0,0 +1,230 @@
+// Thor Commerce view module: category
+// Server Component module: elements + catalog entries + route + loader only.
+// The client-side component mappings live in ./registry.tsx ('use client'); this
+// module imports them as data so the RSC graph never evaluates @json-render/react
+// on the server. Registered by importing it in ../index.ts. Recipe: recipes.json -> "category".
+//
+// E2 task 6.1: the category listing is ONE controlled `CategoryFilter2` — the
+// base listing slot `category.filter`, always present. The optional
+// `catalog-search` / `category-filters` features are control contributions to
+// that single block (logical mounts `category.search` / `category.filters`),
+// never a second listing/controller. Their visibility and config are read from
+// the installed manifest (`mountedFeatures` / `mountedFeatureConfigs`) that
+// `sync` derives from `storefront.config.json`; no loader is hand-edited to add
+// or remove them.
+
+import { z } from 'zod'
+import {
+  buildActiveFilterChips,
+  getCatalog,
+  getCatalogSortKeys,
+  getCollectionOptions,
+  loadCategoryListing,
+  mapCatalogOutcomeToStatus,
+  mapCatalogResultsToFilterProps,
+} from '@thorprovider/runtime/commerce'
+import { getDataSource, getStoreContext, isRealMode } from '../../store-context'
+import { mountedFeatures, mountedFeatureConfigs } from '../../composition'
+import { pageRoot } from '../../spec/page-root'
+import type { StorefrontElement } from '../../spec/types'
+import type { ViewModule } from '../types'
+import { registry } from './registry'
+import { categoryFilterProps } from './props'
+import { categoryFilterPropsSchema } from './schema'
+
+// The single controlled `CategoryFilter2` base listing. The search/filter
+// controls are shown only when the matching feature is installed; the base
+// listing always owns the route scope, `sort`, `page`, `pageSize`, the products,
+// and pagination.
+const hasSearch = mountedFeatures.includes('catalog-search')
+const hasFilters = mountedFeatures.includes('category-filters')
+const searchConfig = (mountedFeatureConfigs['catalog-search'] ?? {}) as { placeholder?: string }
+const filtersConfig = (mountedFeatureConfigs['category-filters'] ?? {}) as {
+  filterSet?: string[]
+  showPrice?: boolean
+}
+
+// UI labels for the adapter-advertised sort keys. The keys themselves come from
+// the provider (`getCatalogSortKeys`); no global price sort is ever assumed.
+const SORT_LABELS: Record<string, string> = {
+  featured: 'Destacados',
+  name: 'Nombre',
+  newest: 'Más recientes',
+}
+
+const elements: Record<string, StorefrontElement> = {
+  'category.filter': {
+    type: 'CategoryFilter2',
+    props: {
+      // User-owned copy first, so a customization can be overridden by the
+      // feature config (search placeholder) and the derived state bindings.
+      ...categoryFilterProps,
+      showSearch: hasSearch,
+      showFilters: hasFilters,
+      showSort: true,
+      showPrice: filtersConfig.showPrice === true,
+      ...(hasSearch && searchConfig.placeholder
+        ? { searchPlaceholder: searchConfig.placeholder }
+        : {}),
+      // Composition context for generated navigation (task 4.11): the client
+      // registry drops a removed feature's owned orphan parameters on a UI
+      // action. Read separately from the block props; never a `CategoryFilter2`
+      // prop and never bound to state.
+      mountedFeatures,
+      products: { $state: '/categoryFilterProducts' },
+      pagination: { $state: '/categoryFilterPagination' },
+      status: { $state: '/categoryFilterStatus' },
+      activeFilters: { $state: '/categoryFilterActiveFilters' },
+      searchValue: { $state: '/categoryFilterSearchValue' },
+      selectedCategories: { $state: '/categoryFilterSelectedCategories' },
+      selectedCollections: { $state: '/categoryFilterSelectedCollections' },
+      selectedSort: { $state: '/categoryFilterSelectedSort' },
+      selectedPage: { $state: '/categoryFilterSelectedPage' },
+      selectedPageSize: { $state: '/categoryFilterSelectedPageSize' },
+      sortOptions: { $state: '/categoryFilterSortOptions' },
+      categories: { $state: '/categoryFilterCategories' },
+      collections: { $state: '/categoryFilterCollections' },
+      priceRange: { $state: '/categoryFilterPriceRange' },
+    },
+  },
+}
+
+const catalog = {
+  CategoryFilter2: {
+    props: categoryFilterPropsSchema,
+    description:
+      'Listado de categoría: una sola presentación controlada CategoryFilter2 con productos, paginación, búsqueda y filtros opcionales.',
+  },
+}
+
+/** Empty state for the single listing, used on every failure path. */
+const emptyFilterState = () => ({
+  categoryFilterProducts: [],
+  categoryFilterPagination: [] as (number | string)[],
+  categoryFilterActiveFilters: [],
+  categoryFilterSearchValue: '',
+  categoryFilterSelectedCategories: [] as string[],
+  categoryFilterSelectedCollections: [] as string[],
+  categoryFilterSelectedSort: 'featured',
+  categoryFilterSelectedPage: 1,
+  categoryFilterSelectedPageSize: 50,
+  categoryFilterSortOptions: [],
+  categoryFilterCategories: [],
+  categoryFilterCollections: [],
+  categoryFilterPriceRange: undefined,
+})
+
+export const category: ViewModule = {
+  name: 'category',
+  elements,
+  catalog,
+  registry,
+  route: {
+    path: '/categorias/[[...slug]]',
+    loaderName: 'category',
+    layout: 'default',
+    metadata: {
+      title: 'Categoría',
+      description: 'Explora los productos de esta categoría en __SITE_NAME__.',
+    },
+    entry: pageRoot('category', ['category.filter'], elements),
+  },
+  loader: {
+    category: async (params, searchParams) => {
+      const slug = Array.isArray(params.slug) ? params.slug[0] : params.slug
+      try {
+        // Validate the raw URL through the pure boundary before any commerce
+        // call. An invalid, repeated, or unknown parameter — or one owned by a
+        // feature that is not installed — returns a typed error with zero
+        // provider resolution, not even the sidebar catalog (E2 task 5.1/6.1).
+        const listing = await loadCategoryListing({
+          searchParams: searchParams ?? {},
+          ...(slug ? { categoryScope: slug } : {}),
+          mountedFeatures,
+          ...(isRealMode() ? { context: getStoreContext() } : {}),
+        })
+
+        if (!listing.ok) {
+          return {
+            storeCategories: [],
+            dataSource: getDataSource(),
+            dataError: null,
+            ...emptyFilterState(),
+            categoryFilterStatus: mapCatalogOutcomeToStatus({ ok: false, error: listing.error }),
+          }
+        }
+
+        const catalog = await getCatalog()
+        const advertisedSortKeys = await getCatalogSortKeys()
+        const sortOptions = advertisedSortKeys.map((key) => ({
+          value: key,
+          label: SORT_LABELS[key] ?? key,
+        }))
+        // Real adapter category options (handle + name). No fake counts/ranges.
+        const allCategories = catalog.categoriesRaw.map((entry) => ({
+          id: entry.handle,
+          label: entry.name,
+        }))
+        const filterSet = filtersConfig.filterSet ?? ['categories', 'collections']
+        const categories = filterSet.includes('categories') ? allCategories : undefined
+        // Real, backend-scoped collection options (handle + title), fetched only
+        // when `category-filters` is installed and owns the collections control.
+        // An empty backend list omits the control; no option is ever fabricated.
+        const showCollections = hasFilters && filterSet.includes('collections')
+        const allCollections = showCollections
+          ? (await getCollectionOptions()).map((entry) => ({
+              id: entry.id,
+              label: entry.label,
+            }))
+          : []
+        const collections = allCollections.length > 0 ? allCollections : undefined
+        const presentation = mapCatalogResultsToFilterProps({
+          query: listing.query,
+          results: listing.results,
+          // A scoped listing (`/categorias/<handle>`) must not offer the
+          // category facet: the scope already fixes the category. The root
+          // catalog passes no scope and keeps it.
+          ...(slug ? { categoryScope: slug } : {}),
+          // Product links point at the product-detail route. The runtime stays
+          // route-agnostic, so this view supplies the href builder.
+          productHref: (handle: string) => `/productos/${handle}`,
+          ...(categories ? { categories } : {}),
+          ...(collections ? { collections } : {}),
+          sortOptions,
+        })
+        const activeFilters = buildActiveFilterChips(listing.query, {
+          categories: Object.fromEntries(allCategories.map((entry) => [entry.id, entry.label])),
+          collections: Object.fromEntries(allCollections.map((entry) => [entry.id, entry.label])),
+        })
+
+        return {
+          storeCategories: catalog.categories,
+          dataSource: catalog.source,
+          dataError: null,
+          categoryFilterProducts: presentation.products,
+          categoryFilterPagination: presentation.pagination,
+          categoryFilterStatus: mapCatalogOutcomeToStatus({ ok: true, results: listing.results }),
+          categoryFilterActiveFilters: activeFilters,
+          categoryFilterSearchValue: presentation.searchValue,
+          categoryFilterSelectedCategories: presentation.selectedCategories,
+          categoryFilterSelectedCollections: presentation.selectedCollections,
+          categoryFilterSelectedSort: presentation.selectedSort,
+          categoryFilterSelectedPage: presentation.selectedPage,
+          categoryFilterSelectedPageSize: presentation.selectedPageSize,
+          categoryFilterSortOptions: presentation.sortOptions ?? [],
+          categoryFilterCategories: presentation.categories ?? [],
+          categoryFilterCollections: presentation.collections ?? [],
+          categoryFilterPriceRange: presentation.priceRange,
+        }
+      } catch (error) {
+        return {
+          storeCategories: [],
+          dataSource: getDataSource(),
+          dataError: error instanceof Error ? error.message : 'No se pudo cargar la categoría.',
+          ...emptyFilterState(),
+          categoryFilterStatus: { state: 'error' as const },
+        }
+      }
+    },
+  },
+}

package/assets/templates/views/category/props.ts

@@ -0,0 +1,16 @@
+// Thor Commerce view props: category
+// User-owned element props for the category view. Reconcile seeds this file once
+// and never rewrites it; the derived view module (./index.tsx) imports these
+// objects and binds them into the element tree, so edits here survive
+// `storefront sync` and unit removal. Plain data only: no React and no server
+// imports.
+//
+// The listing state (products, pagination, selected query values, status) is
+// derived wiring, not copy: it is bound to `$state` in ./index.tsx from the
+// URL-backed loader. Only presentation copy lives here.
+
+import { filterContent } from './content'
+
+export const categoryFilterProps = {
+  ...filterContent,
+}

package/assets/templates/views/category/registry.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+// Thor Commerce view registry fragment: category
+// The category view's single client boundary: one controlled `CategoryFilter2`
+// (the base listing slot `category.filter`). Search/filters/sort/pagination are
+// URL-backed: the block emits a change, this registry rewrites the URL through
+// the pure `buildCategoryQueryHref` seam, and the server loader re-seeds the
+// controlled props from the new URL. No fetch and no provider call happens on
+// the client. The search and filter controls are only present because the
+// installed manifest enabled them; the block never adds a second listing.
+
+import {
+  CategoryFilter2 as CategoryFilter2Block,
+  type CategoryFilter2ActiveFilter,
+  type CategoryFilter2Filters,
+  type CategoryFilter2Props,
+} from '@thorprovider/blocks'
+import { buildCategoryQueryHref, catalogHistoryMode, type CategoryQueryChange } from '@thorprovider/runtime/commerce'
+import type { CatalogFeatureName } from '@thorprovider/runtime/contracts'
+import { useStateStore } from '@json-render/react'
+import { usePathname, useRouter } from 'next/navigation'
+import type { ViewRegistry } from '../types'
+
+// The generated view module injects the installed-feature context as an element
+// prop (task 4.11); it is composition context, not a `CategoryFilter2` prop, so
+// it is read separately from the block props.
+type CategoryFilter2RegistryProps = CategoryFilter2Props & {
+  mountedFeatures?: readonly CatalogFeatureName[]
+}
+
+export const registry: ViewRegistry = {
+  CategoryFilter2: ({ props, emit }) => {
+    const router = useRouter()
+    const pathname = usePathname()
+    const { set } = useStateStore()
+    const p = props as unknown as CategoryFilter2RegistryProps
+
+    // Minimal `updateURL` seam (task 6.1; task 5.2 verified the criterion and is
+    // complete): apply one change to the current browser URL and let the server
+    // loader rebuild the listing. The page reset rules live in the pure helper,
+    // not here. The installed-feature context is passed so generated navigation
+    // drops a removed feature's owned orphan parameters (task 4.11) while never
+    // dropping the base listing's route scope, `sort`, `page`, or `pageSize`.
+    //
+    // History policy (task 5.3): an intentional filter/sort/page/pageSize commit
+    // pushes a history entry so reload and back/forward restore the previous
+    // query and products; repair and the immediate per-keystroke search replace
+    // the current entry (no per-keystroke history explosion). The choice is the
+    // pure `catalogHistoryMode` seam, not ad-hoc logic here.
+    const apply = (change: CategoryQueryChange) => {
+      const search = typeof window === 'undefined' ? '' : window.location.search
+      const href = buildCategoryQueryHref(pathname, search, change, p.mountedFeatures)
+      if (catalogHistoryMode(change) === 'push') router.push(href)
+      else router.replace(href)
+    }
+
+    return (
+      <CategoryFilter2Block
+        products={p.products}
+        categories={p.categories}
+        collections={p.collections}
+        sortOptions={p.sortOptions}
+        pagination={p.pagination}
+        priceRange={p.priceRange}
+        showSearch={p.showSearch}
+        showFilters={p.showFilters}
+        showSort={p.showSort}
+        showPrice={p.showPrice}
+        searchValue={p.searchValue}
+        selectedCategories={p.selectedCategories}
+        selectedCollections={p.selectedCollections}
+        selectedSort={p.selectedSort}
+        selectedPage={p.selectedPage}
+        selectedPageSize={p.selectedPageSize}
+        selectedPriceRange={p.selectedPriceRange}
+        status={p.status}
+        activeFilters={p.activeFilters}
+        filtersTitle={p.filtersTitle}
+        searchLabel={p.searchLabel}
+        searchPlaceholder={p.searchPlaceholder}
+        sortPlaceholder={p.sortPlaceholder}
+        productsTitle={p.productsTitle}
+        onSearchChange={(text) => apply({ kind: 'search', text })}
+        onSortChange={(sort) => apply({ kind: 'sort', sort })}
+        onPageChange={(page) => apply({ kind: 'page', page })}
+        onPageSizeChange={(size) => apply({ kind: 'pageSize', pageSize: size })}
+        onFilterChange={(filters: CategoryFilter2Filters) =>
+          apply({ kind: 'filters', categories: filters.categories, collections: filters.collections ?? [] })
+        }
+        onClearFilters={() => apply({ kind: 'clearFilters' })}
+        onRepair={(remove) => apply({ kind: 'repair', remove })}
+        onRetry={() => router.refresh()}
+        onRemoveFilter={(filter: CategoryFilter2ActiveFilter) =>
+          apply({ kind: 'removeFilter', filter })
+        }
+        onProductClick={(product) => {
+          set('/lastClicked', { id: product.id })
+          emit('openProduct')
+        }}
+      />
+    )
+  },
+}

package/assets/templates/views/category/schema.ts

@@ -0,0 +1,78 @@
+// Thor Commerce view schema fragment: category
+// Zod mirror of the single controlled `CategoryFilter2` prop contract for this
+// view — the source for the catalog entry and the client-side registry parsing
+// (json-render does not validate props against the catalog itself, so the
+// registry parses here). Kept free of React and server imports so the Server
+// Component module and the 'use client' registry can share one contract. Block
+// zod contracts are mirrored, not imported: @thorprovider/blocks ships zod v3
+// while the scaffold runs zod v4 and cross-major schema assignment breaks the
+// catalog contract.
+
+import { z } from 'zod'
+
+export const filterProductSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  price: z.string(),
+  image: z.string().optional(),
+  // Product-detail link supplied by the presentation layer; when absent the
+  // block falls back to its onClick path.
+  href: z.string().optional(),
+})
+
+export const categoryFilterSortOptionSchema = z.object({
+  value: z.string(),
+  label: z.string(),
+})
+
+export const categoryFilterOptionSchema = z.object({
+  id: z.string(),
+  label: z.string(),
+})
+
+export const categoryFilterActiveFilterSchema = z.object({
+  id: z.string(),
+  kind: z.string(),
+  label: z.string(),
+  params: z.array(z.string()),
+  value: z.string().optional(),
+})
+
+export const categoryFilterPriceRangeSchema = z.object({
+  min: z.number(),
+  max: z.number(),
+  step: z.number(),
+})
+
+export const categoryFilterStatusSchema = z.object({ state: z.string() }).catchall(z.unknown())
+
+export const categoryFilterPropsSchema = z
+  .object({
+    products: z.array(filterProductSchema),
+    pagination: z.array(z.union([z.number(), z.string()])),
+    status: categoryFilterStatusSchema,
+    activeFilters: z.array(categoryFilterActiveFilterSchema),
+    searchValue: z.string(),
+    selectedCategories: z.array(z.string()),
+    selectedCollections: z.array(z.string()),
+    selectedSort: z.string(),
+    selectedPage: z.union([z.number(), z.string()]),
+    selectedPageSize: z.union([z.number(), z.string()]),
+    selectedPriceRange: z.array(z.number()).optional(),
+    sortOptions: z.array(categoryFilterSortOptionSchema),
+    categories: z.array(categoryFilterOptionSchema),
+    collections: z.array(categoryFilterOptionSchema),
+    priceRange: categoryFilterPriceRangeSchema.optional(),
+    showSearch: z.boolean(),
+    showFilters: z.boolean(),
+    showSort: z.boolean(),
+    showPrice: z.boolean().optional(),
+    filtersTitle: z.string().optional(),
+    searchLabel: z.string().optional(),
+    searchPlaceholder: z.string().optional(),
+    sortPlaceholder: z.string().optional(),
+    productsTitle: z.string().optional(),
+  })
+  .catchall(z.unknown())
+
+export type CategoryFilterProps = z.infer<typeof categoryFilterPropsSchema>