@thorprovider/storefront 0.3.1 → 0.4.0-mvp.0

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

@@ -0,0 +1,378 @@
+'use client'
+
+// Thor Commerce view registry fragment: account
+// Client boundary for the account view. Imports value bindings from
+// @json-render/react and components from @thorprovider/blocks — both must stay
+// on the client side of the RSC graph. Kept separate from index.tsx so the view
+// spec (elements/catalog/route/loader) stays a pure Server Component module.
+//
+// Security invariant: the block-owned credential payload (email/password) is
+// passed straight from the block callback to the Server Action and is NEVER
+// written to the json-render state store, so no password reaches client state,
+// HTML, or logs. Only the non-secret result (customer/error) is stored.
+
+import { useEffect, useRef } from 'react'
+import {
+  Button,
+  LoginPage1 as LoginBlock,
+  OrderHistory2,
+  SignUpPage1 as SignUpBlock,
+} from '@thorprovider/blocks'
+import { useStateStore } from '@json-render/react'
+import type { Customer } from '@thorprovider/types'
+import {
+  loadAccountAction,
+  loadOrdersAction,
+  loginAction,
+  logoutAction,
+  registerAction,
+} from '../../actions'
+import type { AccountOrderView } from '../../state.core'
+import type { ViewRegistry } from '../types'
+import {
+  accountLoginPropsSchema,
+  accountOrdersPropsSchema,
+  accountRegisterPropsSchema,
+} from './schema'
+
+// The structured result the auth Server Actions return (see ../../actions).
+type AuthResult = { ok: true; customer: Customer | null } | { ok: false; error: string }
+type SetState = (path: string, value: unknown) => void
+
+// Apply a settled auth result truthfully: a failure sets an error and NEVER a
+// logged-in state; a success stores the customer (or null) and nothing else.
+function applyAuthResult(set: SetState, result: AuthResult): void {
+  set('/accountPending', false)
+  if (result.ok) {
+    set('/accountCustomer', result.customer)
+    set('/accountAuthenticated', result.customer !== null)
+    set('/accountError', null)
+    set('/accountMode', 'login')
+    return
+  }
+  set('/accountError', result.error)
+}
+
+// A rejected Server Action (network/RPC) must clear pending and surface a
+// message; never swallow it. Only a non-secret context line is logged.
+function authFailure(set: SetState, scope: string) {
+  return (error: unknown) => {
+    console.error(
+      `[storefront/account] ${scope} failed`,
+      error instanceof Error ? error.message : error,
+    )
+    set('/accountPending', false)
+    set('/accountError', 'No se pudo completar la operación. Inténtalo de nuevo.')
+  }
+}
+
+// Non-secret status surface for the block pages, which expose no error/pending
+// prop of their own. Renders nothing when there is no pending work or error.
+function AuthNotice({ pending, error }: { pending: boolean; error: string | null }) {
+  if (!pending && !error) return null
+  return (
+    <div
+      role="alert"
+      aria-live="polite"
+      className="bg-background text-foreground fixed inset-x-0 top-4 z-50 mx-auto w-fit max-w-md rounded-md border px-4 py-2 text-center text-sm shadow-lg"
+    >
+      {pending ? 'Procesando…' : error}
+    </div>
+  )
+}
+
+// The OrderHistory2 block's order shape (see @thorprovider/blocks). Kept local
+// so the registry maps the account order rows to the block contract without a
+// shared dependency on block internals.
+interface BlockOrderItem {
+  id: string
+  name: string
+  image: string
+  details: string
+  price: string
+  quantity: number
+}
+interface BlockOrder {
+  id: string
+  date: string
+  status: string
+  total: string
+  items: BlockOrderItem[]
+}
+
+// Map a backend-sourced account order row to the block's order shape. The order
+// number is the list key; an absent variant/image becomes '' because the block
+// contract is a string — never an invented value.
+function toBlockOrder(order: AccountOrderView): BlockOrder {
+  return {
+    id: order.number,
+    date: order.date,
+    status: order.status,
+    total: order.total,
+    items: order.items.map((item) => ({
+      id: item.id,
+      name: item.name,
+      image: item.image ?? '',
+      details: item.variant ?? '',
+      price: item.lineTotal,
+      quantity: item.quantity,
+    })),
+  }
+}
+
+// Inline order detail assembled from the already-fetched list row (no second
+// backend request). Only fields the backend supplied are shown.
+function OrderDetail({ order }: { order: AccountOrderView }) {
+  const totals = (
+    [
+      { label: 'Subtotal', value: order.subtotal },
+      { label: 'Impuestos', value: order.tax },
+      { label: 'Envío', value: order.shipping },
+      { label: 'Total', value: order.total },
+    ] as { label: string; value?: string }[]
+  ).filter((row): row is { label: string; value: string } => row.value !== undefined)
+  return (
+    <div className="mx-auto w-full max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
+      <div className="rounded-lg border p-6">
+        <h3 className="text-lg font-semibold">Pedido {order.number}</h3>
+        <p className="text-muted-foreground mt-1 text-sm">
+          {order.date} · {order.status}
+        </p>
+        {order.address ? (
+          <p className="text-muted-foreground mt-2 text-sm">{order.address}</p>
+        ) : null}
+        <ul className="mt-4 divide-y">
+          {order.items.map((item) => (
+            <li key={item.id} className="flex items-center justify-between py-2 text-sm">
+              <span>
+                {item.name}
+                {item.variant ? (
+                  <span className="text-muted-foreground"> · {item.variant}</span>
+                ) : null}
+                <span className="text-muted-foreground"> × {item.quantity}</span>
+              </span>
+              <span>{item.lineTotal}</span>
+            </li>
+          ))}
+        </ul>
+        <dl className="mt-4 space-y-1 border-t pt-4 text-sm">
+          {totals.map((row) => (
+            <div key={row.label} className="flex justify-between">
+              <dt className="text-muted-foreground">{row.label}</dt>
+              <dd>{row.value}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </div>
+  )
+}
+
+export const registry: ViewRegistry = {
+  /**
+   * Headless bootstrap rendered on the account route. It resolves the current
+   * customer from the cookie-authorized Server Action once, so a reload keeps
+   * the signed-in state without re-entering credentials. It never reads a token.
+   */
+  AccountBoot: () => {
+    const { set } = useStateStore()
+    const booted = useRef(false)
+    useEffect(() => {
+      if (booted.current) return
+      booted.current = true
+      void loadAccountAction()
+        .then((result) => {
+          if (!result.ok) {
+            set('/accountCustomer', null)
+            set('/accountAuthenticated', false)
+            set('/accountError', result.error)
+            return
+          }
+          set('/accountCustomer', result.customer)
+          set('/accountAuthenticated', result.customer !== null)
+          set('/accountError', null)
+        })
+        .catch((error) => {
+          console.error(
+            '[storefront/account] loadAccount failed',
+            error instanceof Error ? error.message : error,
+          )
+          set('/accountCustomer', null)
+          set('/accountAuthenticated', false)
+          set('/accountError', 'No se pudo cargar la cuenta. Inténtalo de nuevo.')
+        })
+    }, [])
+    return null
+  },
+  AccountLogin: ({ props, emit }) => {
+    const { state, set } = useStateStore()
+    const parsed = accountLoginPropsSchema.parse(props)
+    const error = typeof state.accountError === 'string' ? state.accountError : null
+    const pending = Boolean(state.accountPending)
+    return (
+      <>
+        <AuthNotice pending={pending} error={error} />
+        <LoginBlock
+          logoText={parsed.logoText}
+          welcomeTitleLabel={parsed.welcomeTitleLabel}
+          welcomeDescriptionLabel={parsed.welcomeDescriptionLabel}
+          emailLabel={parsed.emailLabel}
+          passwordLabel={parsed.passwordLabel}
+          signInLabel={parsed.signInLabel}
+          createAccountLabel={parsed.createAccountLabel}
+          // The credentials stay in the block's local state and go straight to
+          // the Server Action; they are never written to the store.
+          onSubmit={(data) => {
+            set('/accountPending', true)
+            set('/accountError', null)
+            void loginAction({ email: data.email, password: data.password })
+              .then((result) => applyAuthResult(set, result))
+              .catch(authFailure(set, 'login'))
+          }}
+          onCreateAccount={() => emit('showRegister')}
+        />
+      </>
+    )
+  },
+  AccountRegister: ({ props, emit }) => {
+    const { state, set } = useStateStore()
+    const parsed = accountRegisterPropsSchema.parse(props)
+    const error = typeof state.accountError === 'string' ? state.accountError : null
+    const pending = Boolean(state.accountPending)
+    return (
+      <>
+        <AuthNotice pending={pending} error={error} />
+        <SignUpBlock
+          logoText={parsed.logoText}
+          createAccountTitleLabel={parsed.createAccountTitleLabel}
+          createAccountDescriptionLabel={parsed.createAccountDescriptionLabel}
+          fullNameLabel={parsed.fullNameLabel}
+          emailLabel={parsed.emailLabel}
+          passwordLabel={parsed.passwordLabel}
+          createAccountLabel={parsed.createAccountLabel}
+          signInLabel={parsed.signInLabel}
+          onSubmit={(data) => {
+            const parts = data.fullName.trim().split(/\s+/).filter(Boolean)
+            set('/accountPending', true)
+            set('/accountError', null)
+            void registerAction({
+              email: data.email,
+              password: data.password,
+              first_name: parts[0] ?? '',
+              last_name: parts.slice(1).join(' '),
+            })
+              .then((result) => applyAuthResult(set, result))
+              .catch(authFailure(set, 'register'))
+          }}
+          onSignIn={() => emit('showLogin')}
+        />
+      </>
+    )
+  },
+  AccountPanel: ({ emit }) => {
+    const { state } = useStateStore()
+    const customer = (state.accountCustomer ?? null) as Customer | null
+    const error = typeof state.accountError === 'string' ? state.accountError : null
+    const pending = Boolean(state.accountPending)
+    const name = customer
+      ? [customer.firstName, customer.lastName].filter(Boolean).join(' ') || customer.email
+      : ''
+    return (
+      <div className="mx-auto max-w-md px-4 py-16 text-center">
+        <h1 className="text-2xl font-bold">Mi cuenta</h1>
+        <p className="text-muted-foreground mt-2 text-sm">Has iniciado sesión como</p>
+        <p className="mt-1 text-lg font-medium">{name}</p>
+        {customer?.email ? <p className="text-muted-foreground text-sm">{customer.email}</p> : null}
+        {error ? (
+          <p role="alert" className="text-destructive mt-4 text-sm">
+            {error}
+          </p>
+        ) : null}
+        <Button className="mt-6" disabled={pending} onClick={() => emit('logout')}>
+          {pending ? 'Cerrando sesión…' : 'Cerrar sesión'}
+        </Button>
+      </div>
+    )
+  },
+  /**
+   * Signed-in order history. The load runs once from the cookie-authorized
+   * Server Action; loading/empty/error are distinct and a failure never renders
+   * a fabricated order. `onViewDetails` records the selected order in state and
+   * the detail is assembled below from the already-fetched row — no second
+   * backend request. No token is read, stored, or rendered here.
+   */
+  AccountOrders: ({ props }) => {
+    const { state, set } = useStateStore()
+    const parsed = accountOrdersPropsSchema.parse(props)
+    const loaded = useRef(false)
+    useEffect(() => {
+      if (loaded.current) return
+      loaded.current = true
+      set('/accountOrdersPending', true)
+      set('/accountOrdersError', null)
+      void loadOrdersAction()
+        .then((result) => {
+          set('/accountOrdersPending', false)
+          if (result.ok) {
+            set('/accountOrders', result.orders)
+            set('/accountOrdersError', null)
+            return
+          }
+          set('/accountOrdersError', result.error)
+        })
+        .catch((error) => {
+          console.error(
+            '[storefront/account] loadOrders failed',
+            error instanceof Error ? error.message : error,
+          )
+          set('/accountOrdersPending', false)
+          set('/accountOrdersError', parsed.errorLabel ?? 'No se pudieron cargar tus pedidos.')
+        })
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    const pending = Boolean(state.accountOrdersPending)
+    const error = typeof state.accountOrdersError === 'string' ? state.accountOrdersError : null
+    const orders = Array.isArray(state.accountOrders)
+      ? (state.accountOrders as AccountOrderView[])
+      : []
+    const selectedId =
+      typeof state.accountSelectedOrderId === 'string' ? state.accountSelectedOrderId : null
+    const selected = selectedId
+      ? orders.find((order) => order.number === selectedId) ?? null
+      : null
+
+    if (pending) {
+      return (
+        <p className="text-muted-foreground mx-auto max-w-7xl px-4 py-8 text-sm">
+          {parsed.loadingLabel ?? 'Cargando pedidos…'}
+        </p>
+      )
+    }
+    if (error) {
+      return (
+        <p role="alert" className="text-destructive mx-auto max-w-7xl px-4 py-8 text-sm">
+          {error}
+        </p>
+      )
+    }
+    if (orders.length === 0) {
+      return (
+        <p className="text-muted-foreground mx-auto max-w-7xl px-4 py-8 text-sm">
+          {parsed.emptyLabel ?? 'Aún no tienes pedidos.'}
+        </p>
+      )
+    }
+    return (
+      <>
+        <OrderHistory2
+          orders={orders.map(toBlockOrder)}
+          titleLabel={parsed.titleLabel}
+          descriptionLabel={parsed.descriptionLabel}
+          onViewDetails={(order) => set('/accountSelectedOrderId', order.id)}
+        />
+        {selected ? <OrderDetail order={selected} /> : null}
+      </>
+    )
+  },
+}

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

@@ -0,0 +1,52 @@
+// Thor Commerce view schema fragment: account
+// Zod mirrors of the block contracts for this view — the single source for the
+// catalog entries 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'
+
+// Mirrors the LoginPage1 optional props. Every prop is optional with a neutral
+// default in the block, so the curated view forwards only the labels it owns.
+export const accountLoginPropsSchema = z.object({
+  logoText: z.string().optional(),
+  welcomeTitleLabel: z.string().optional(),
+  welcomeDescriptionLabel: z.string().optional(),
+  emailLabel: z.string().optional(),
+  passwordLabel: z.string().optional(),
+  signInLabel: z.string().optional(),
+  createAccountLabel: z.string().optional(),
+})
+
+// Mirrors the SignUpPage1 optional props.
+export const accountRegisterPropsSchema = z.object({
+  logoText: z.string().optional(),
+  createAccountTitleLabel: z.string().optional(),
+  createAccountDescriptionLabel: z.string().optional(),
+  fullNameLabel: z.string().optional(),
+  emailLabel: z.string().optional(),
+  passwordLabel: z.string().optional(),
+  createAccountLabel: z.string().optional(),
+  signInLabel: z.string().optional(),
+})
+
+// Mirrors the OrderHistory2 label props the curated view forwards, plus the
+// explicit loading/empty/error copy the registry renders for the orders states.
+export const accountOrdersPropsSchema = z.object({
+  titleLabel: z.string().optional(),
+  descriptionLabel: z.string().optional(),
+  emptyLabel: z.string().optional(),
+  errorLabel: z.string().optional(),
+  loadingLabel: z.string().optional(),
+})
+
+// The headless bootstrap and the signed-in panel read their data from the
+// feature state, not from element props; declared so the catalog is complete.
+export const accountEmptyPropsSchema = z.object({})
+
+export type AccountLoginProps = z.infer<typeof accountLoginPropsSchema>
+export type AccountRegisterProps = z.infer<typeof accountRegisterPropsSchema>
+export type AccountOrdersProps = z.infer<typeof accountOrdersPropsSchema>

package/assets/templates/views/category/assembly/assembly.json

@@ -0,0 +1,28 @@
+{
+  "view": "category",
+  "slots": [
+    { "id": "category.filter", "slot": "filter", "default": "CategoryFilter2" },
+    {
+      "id": "category.productCard",
+      "slot": "productCard",
+      "default": "ProductCard1",
+      "nested": true
+    }
+  ],
+  "sections": {
+    "faq": {
+      "elementType": "Faq",
+      "registryModule": "../sections/faq.client",
+      "registryExport": "faqRegistry",
+      "propsModule": "./content",
+      "defaultProps": "{ items: [] }"
+    },
+    "cta": {
+      "elementType": "Cta",
+      "registryModule": "../sections/cta.client",
+      "registryExport": "ctaRegistry",
+      "propsModule": "./content",
+      "defaultProps": "{}"
+    }
+  }
+}

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

@@ -0,0 +1,193 @@
+// 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'@@SECTION_IMPORTS@@
+
+// 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> = {
+@@ELEMENTS@@
+}
+
+const catalog = {
+@@CATALOG@@
+}
+
+/** 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', [@@SLOT_IDS@@], 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/assembly/registry.skeleton.tsx

@@ -0,0 +1,33 @@
+'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'@@BLOCK_IMPORTS@@@@SECTION_REGISTRY_IMPORTS@@
+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 = {
+@@REGISTRY@@
+}