@vtex/faststore 0.0.5 → 0.0.7

package/dist/matter/product-shelf/product-shelf.d.ts

@@ -1,8 +1,51 @@
+import { ContentValue } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ProductListItem } from "../product-list/product-list.js";
 import { ComponentPropsWithRef } from "react";
 //#region src/matter/product-shelf/product-shelf.d.ts
+export declare const ProductShelfContent: {
+  readonly id: "product-shelf";
+  readonly title: "Product Shelf";
+  readonly description: "Which products a shelf shows: how many, in which order, and from which facet.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly first: {
+        readonly type: "integer";
+        readonly title: "Number of products";
+        readonly minimum: 1;
+        readonly maximum: 100;
+      };
+      readonly sort: {
+        readonly type: "string";
+        readonly enum: readonly ["relevance", "price_asc", "price_desc", "name_asc", "name_desc", "release", "orders", "discount"];
+        readonly title: "Sort";
+      };
+      readonly categoryId: {
+        readonly type: "string";
+        readonly title: "Category ID";
+      };
+      readonly brandId: {
+        readonly type: "string";
+        readonly title: "Brand ID";
+      };
+      readonly collectionId: {
+        readonly type: "string";
+        readonly title: "Collection ID";
+      };
+      readonly searchTerm: {
+        readonly type: "string";
+        readonly title: "Search term";
+      };
+      readonly availableOnly: {
+        readonly type: "boolean";
+        readonly title: "Available only";
+      };
+    };
+  };
+};
 type RawMoney = {
   amount: number;
   currencyCode: string;
@@ -29,6 +72,7 @@ type RawProductNode = {
   id: string;
   title: string;
   slug: string;
+  routeSlug: string;
   images: {
     edges: Array<{
       node: {
@@ -53,62 +97,49 @@ export type ProductShelfItem = ProductListItem;
 export type ProductShelfSort = 'relevance' | 'price_asc' | 'price_desc' | 'name_asc' | 'name_desc' | 'release' | 'orders' | 'discount';
 export type ProductSortField = 'TITLE' | 'PRICE' | 'RELEASE_DATE' | 'RELEVANCE' | 'BEST_SELLING';
 export type SortDirection = 'ASC' | 'DESC';
-export type ProductsFilterInput = {
-  searchTerm?: string;
-  categoryIds?: string[];
-  brandIds?: string[];
-  collectionId?: string;
-  specifications?: Array<{
-    name: string;
-    values: string[];
-  }>;
-  availableOnly?: boolean;
-};
-export type ProductShelfVariables = {
-  first: number;
-  orderBy?: {
-    field: ProductSortField;
-    direction: SortDirection;
-  };
-  filter: ProductsFilterInput;
-};
+/**
+ * The query configuration the shelf resolved for this element: the content slice when the
+ * merchant filled a field, else the prop. The query has already applied these values; the
+ * context republishes them for parts that describe the shelf (a "sorted by" label, a facet link).
+ */
 export type ProductShelfConfig = {
-  first?: number;
-  itemsPerPage?: number;
-  sort?: ProductShelfSort;
+  first: number;
+  sort: ProductShelfSort;
   searchTerm?: string;
   categoryId?: string;
   brandId?: string;
   collectionId?: string;
-  specifications?: Array<{
-    name: string;
-    values: string[];
-  }>;
-  availableOnly?: boolean;
+  availableOnly: boolean;
 };
 export type ProductShelfContextValue = {
   itemsPerPage: number;
-  variables: ProductShelfVariables;
+  config: ProductShelfConfig;
   count: number;
 };
-export type ProductShelfRootProps = ComponentPropsWithRef<'section'> & ProductShelfConfig & {
+export type ProductShelfRootProps = ComponentPropsWithRef<'section'> & Partial<ProductShelfConfig> & {
+  itemsPerPage?: number;
   /** When true, card prices render tax-inclusive (from each item's tax data). Default false. */
   usePriceWithTaxes?: boolean;
   /** Text for the tax label part when tax display is on. Default `'Tax included'`. */
   taxesLabel?: string;
   products?: ProductShelfItem[];
+  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */
+  $content?: ContentValue<typeof ProductShelfContent>;
   $data?: ProductShelfData | null;
 };
 export type ProductShelfItemsProps = ComponentPropsWithRef<'div'>;
 export type ProductShelfHeadingProps = ComponentPropsWithRef<'h2'>;
 export declare function useProductShelf(): ProductShelfContextValue;
 export declare function useProductShelfItem(): ProductShelfItem;
-export declare function buildProductShelfVariables(config: ProductShelfConfig): ProductShelfVariables;
+export declare const PRODUCT_SHELF_SORT_MAP: Record<ProductShelfSort, {
+  field: ProductSortField;
+  direction: SortDirection;
+}>;
 export declare function transformProducts(data: ProductShelfData): ProductShelfItem[];
 export declare const ProductShelfRootDefinition: ComponentDefinition<ProductShelfRootProps>;
 export declare const ProductShelfItemsDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const ProductShelfHeadingDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
-export declare function ProductShelfRoot({ first, itemsPerPage, sort, searchTerm, categoryId, brandId, collectionId, specifications, availableOnly, usePriceWithTaxes, taxesLabel, products, $data: $dataProp, className, children, ...props }: ProductShelfRootProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductShelfRoot({ first, itemsPerPage, sort, searchTerm, categoryId, brandId, collectionId, availableOnly, usePriceWithTaxes, taxesLabel, products, $content, $data: $dataProp, className, children, ...props }: ProductShelfRootProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ProductShelfRoot {
   var Skeleton: typeof ProductShelfSkeleton;
 }

package/dist/matter/product-shelf/product-shelf.js

@@ -1,21 +1,85 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { Text } from "../../particles/text/text.js";
 import { ProductListConfigContext, ProductListItemContext } from "../product-list/product-list.js";
 import { CarouselTrack } from "../../particles/carousel/carousel.js";
+import { isEmptyContentValue } from "../../sdk/data/empty-content-value.js";
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/product-shelf/product-shelf.tsx
+const ProductShelfContent = defineContentType({
+	id: "product-shelf",
+	title: "Product Shelf",
+	description: "Which products a shelf shows: how many, in which order, and from which facet.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			first: {
+				type: "integer",
+				title: "Number of products",
+				minimum: 1,
+				maximum: 100
+			},
+			sort: {
+				type: "string",
+				enum: [
+					"relevance",
+					"price_asc",
+					"price_desc",
+					"name_asc",
+					"name_desc",
+					"release",
+					"orders",
+					"discount"
+				],
+				title: "Sort"
+			},
+			categoryId: {
+				type: "string",
+				title: "Category ID"
+			},
+			brandId: {
+				type: "string",
+				title: "Brand ID"
+			},
+			collectionId: {
+				type: "string",
+				title: "Collection ID"
+			},
+			searchTerm: {
+				type: "string",
+				title: "Search term"
+			},
+			availableOnly: {
+				type: "boolean",
+				title: "Available only"
+			}
+		}
+	}
+});
 const fragment = `
   fragment ProductShelfData on Query {
-    products(first: 12, orderBy: { field: RELEVANCE, direction: DESC }) {
+    products(
+      first: $first
+      orderBy: $orderBy
+      filter: {
+        categoryIds: $categoryId
+        brandIds: $brandId
+        collectionId: $collectionId
+        searchTerm: $searchTerm
+        availableOnly: $availableOnly
+      }
+    ) {
       edges {
         node {
           id
           title
           slug
+          routeSlug
           images(first: 1) {
             edges {
               node {
@@ -87,7 +151,7 @@ function useProductShelfItem() {
 	if (!item) throw new Error("Product card components must be used inside ProductShelfItems.");
 	return item;
 }
-const SORT_MAP = {
+const PRODUCT_SHELF_SORT_MAP = {
 	relevance: {
 		field: "RELEVANCE",
 		direction: "DESC"
@@ -121,21 +185,6 @@ const SORT_MAP = {
 		direction: "DESC"
 	}
 };
-function buildProductShelfVariables(config) {
-	const { first = 5, sort = "relevance", searchTerm, categoryId, brandId, collectionId, specifications, availableOnly } = config;
-	const filter = {};
-	if (searchTerm) filter.searchTerm = searchTerm;
-	if (categoryId) filter.categoryIds = [categoryId];
-	if (brandId) filter.brandIds = [brandId];
-	if (collectionId) filter.collectionId = collectionId;
-	if (specifications && specifications.length > 0) filter.specifications = specifications;
-	if (availableOnly) filter.availableOnly = true;
-	return {
-		first,
-		orderBy: SORT_MAP[sort],
-		filter
-	};
-}
 function transformProducts(data) {
 	return data.edges.map(({ node }) => {
 		const image = node.images.edges[0]?.node;
@@ -149,6 +198,7 @@ function transformProducts(data) {
 			id: node.id,
 			name: node.title,
 			slug: node.slug,
+			routeSlug: node.routeSlug,
 			image: {
 				src: image?.url ?? "",
 				alt: image?.altText ?? node.title
@@ -173,21 +223,69 @@ const ProductShelfRootDefinition = defineComponent({
 	fragment,
 	fetchStrategy: "lazy",
 	skeleton: ProductShelfSkeleton,
+	content: ProductShelfContent,
+	variables: { orderBy: {
+		from: "sort",
+		values: {
+			relevance: {
+				field: "RELEVANCE",
+				direction: "DESC"
+			},
+			price_asc: {
+				field: "PRICE",
+				direction: "ASC"
+			},
+			price_desc: {
+				field: "PRICE",
+				direction: "DESC"
+			},
+			name_asc: {
+				field: "TITLE",
+				direction: "ASC"
+			},
+			name_desc: {
+				field: "TITLE",
+				direction: "DESC"
+			},
+			release: {
+				field: "RELEASE_DATE",
+				direction: "DESC"
+			},
+			orders: {
+				field: "BEST_SELLING",
+				direction: "DESC"
+			},
+			discount: {
+				field: "RELEVANCE",
+				direction: "DESC"
+			}
+		}
+	} },
 	editor: {
 		label: "Product Shelf Root",
 		category: "commerce"
 	},
 	providesContext: "product-shelf",
 	schema: {
-		first: {
+		itemsPerPage: {
 			type: "number",
 			default: 5,
-			label: "Number of Products"
+			label: "Items Per Page"
 		},
-		itemsPerPage: {
+		usePriceWithTaxes: {
+			type: "boolean",
+			default: false,
+			label: "Use Price With Taxes"
+		},
+		taxesLabel: {
+			type: "string",
+			default: "Tax included",
+			label: "Taxes Label"
+		},
+		first: {
 			type: "number",
 			default: 5,
-			label: "Items Per Page"
+			label: "Number of Products"
 		},
 		sort: {
 			type: [
@@ -219,27 +317,13 @@ const ProductShelfRootDefinition = defineComponent({
 			type: "string",
 			label: "Collection ID"
 		},
-		specifications: {
-			type: "array",
-			label: "Specification Filters"
-		},
 		availableOnly: {
 			type: "boolean",
 			default: false,
 			label: "Available Only"
-		},
-		usePriceWithTaxes: {
-			type: "boolean",
-			default: false,
-			label: "Use Price With Taxes"
-		},
-		taxesLabel: {
-			type: "string",
-			default: "Tax included",
-			label: "Taxes Label"
 		}
 	},
-	guideline: "Data-owning root of a facet-sourced product shelf. Owns a products(filter:) fragment and receives $data lazily. Compose as: ProductShelfRoot > (ProductShelfHeading + CarouselRoot > (ProductShelfItems + CarouselPrevious + CarouselNext + CarouselBullets)). Compose ProductShelfHeading with the title as its children to render a heading; set the source with categoryId / brandId / collectionId / searchTerm / specifications and tune first, sort, availableOnly. Renders a skeleton while loading and nothing when the result is empty. Bind itemsPerPage to the CarouselRoot so paging matches the shelf config. See product-shelf.md."
+	guideline: "Data-owning root of a facet-sourced product shelf. Owns a products(first:, orderBy:, filter:) fragment whose variables bind to this element: the merchant fills them in the CMS (content model product-shelf) and the props of the same name are the defaults. Receives $data lazily. Compose as: ProductShelfRoot > (ProductShelfHeading + CarouselRoot > (ProductShelfItems + CarouselPrevious + CarouselNext + CarouselBullets)). Compose ProductShelfHeading with the title as its children to render a heading; set the source with categoryId / brandId / collectionId / searchTerm and tune first, sort, availableOnly. Renders a skeleton while loading and nothing when the result is empty. Bind itemsPerPage to the CarouselRoot so paging matches the shelf config. See product-shelf.md."
 });
 const ProductShelfItemsDefinition = defineComponent({
 	name: "ProductShelfItems",
@@ -265,8 +349,31 @@ const ProductShelfHeadingDefinition = defineComponent({
 	schema: {},
 	guideline: "Renders its children as the shelf title (an <h2>) and provides the section's accessible label. Author the title text as its children (props.children). Place it inside ProductShelfRoot where the title should sit — usually above CarouselRoot. Renders nothing when it has no children."
 });
-function ProductShelfRoot({ first = 5, itemsPerPage = 5, sort = "relevance", searchTerm, categoryId, brandId, collectionId, specifications, availableOnly = false, usePriceWithTaxes = false, taxesLabel = "Tax included", products, $data: $dataProp, className, children, ...props }) {
+/** The content value when the merchant filled the field, else the prop (the shared emptiness rule). */
+function contentOrProp(content, prop) {
+	if (content === void 0 || isEmptyContentValue(content)) return prop;
+	return content;
+}
+function ProductShelfRoot({ first = 5, itemsPerPage = 5, sort = "relevance", searchTerm, categoryId, brandId, collectionId, availableOnly = false, usePriceWithTaxes = false, taxesLabel = "Tax included", products, $content, $data: $dataProp, className, children, ...props }) {
 	const $data = useDataOverride($dataProp);
+	const shelfConfig = useMemo(() => ({
+		first: contentOrProp($content?.first, first),
+		sort: contentOrProp($content?.sort, sort),
+		searchTerm: contentOrProp($content?.searchTerm, searchTerm),
+		categoryId: contentOrProp($content?.categoryId, categoryId),
+		brandId: contentOrProp($content?.brandId, brandId),
+		collectionId: contentOrProp($content?.collectionId, collectionId),
+		availableOnly: contentOrProp($content?.availableOnly, availableOnly)
+	}), [
+		$content,
+		first,
+		sort,
+		searchTerm,
+		categoryId,
+		brandId,
+		collectionId,
+		availableOnly
+	]);
 	const headingId = useId();
 	const [headingCount, setHeadingCount] = useState(0);
 	const registerHeading = useCallback(() => {
@@ -281,27 +388,22 @@ function ProductShelfRoot({ first = 5, itemsPerPage = 5, sort = "relevance", sea
 		usePriceWithTaxes,
 		taxesLabel
 	}), [usePriceWithTaxes, taxesLabel]);
-	const hasHeading = headingCount > 0;
-	let items;
-	if (products !== void 0) items = products;
-	else if ($data === void 0) return /* @__PURE__ */ jsx(ProductShelfSkeleton, { className });
-	else items = $data ? transformProducts($data) : [];
-	items = items.slice(0, first);
-	if (items.length === 0) return null;
-	const shelf = {
+	const items = useMemo(() => {
+		if (products !== void 0) return products;
+		return $data ? transformProducts($data) : [];
+	}, [products, $data]);
+	const shelf = useMemo(() => ({
 		itemsPerPage,
-		variables: buildProductShelfVariables({
-			first,
-			sort,
-			searchTerm,
-			categoryId,
-			brandId,
-			collectionId,
-			specifications,
-			availableOnly
-		}),
+		config: shelfConfig,
 		count: items.length
-	};
+	}), [
+		itemsPerPage,
+		shelfConfig,
+		items.length
+	]);
+	const hasHeading = headingCount > 0;
+	if (products === void 0 && $data === void 0) return /* @__PURE__ */ jsx(ProductShelfSkeleton, { className });
+	if (items.length === 0) return null;
 	return /* @__PURE__ */ jsx(ProductListConfigContext, {
 		value: config,
 		children: /* @__PURE__ */ jsx(ProductShelfProductsContext, {
@@ -371,6 +473,6 @@ const ProductShelf = {
 	Skeleton: ProductShelfSkeleton
 };
 //#endregion
-export { ProductShelf, ProductShelfHeading, ProductShelfHeadingDefinition, ProductShelfItems, ProductShelfItemsDefinition, ProductShelfRoot, ProductShelfRootDefinition, ProductShelfSkeleton, buildProductShelfVariables, transformProducts, useProductShelf, useProductShelfItem };
+export { PRODUCT_SHELF_SORT_MAP, ProductShelf, ProductShelfContent, ProductShelfHeading, ProductShelfHeadingDefinition, ProductShelfItems, ProductShelfItemsDefinition, ProductShelfRoot, ProductShelfRootDefinition, ProductShelfSkeleton, transformProducts, useProductShelf, useProductShelfItem };
 
 //# sourceMappingURL=product-shelf.js.map

package/dist/matter/product-shelf/product-shelf.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-shelf.js","names":[],"sources":["../../../src/matter/product-shelf/product-shelf.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\nimport { CarouselTrack } from '../../particles/carousel/carousel.js';\nimport { Text } from '../../particles/text/text.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport {\n  ProductListConfigContext,\n  type ProductListItem,\n  ProductListItemContext,\n} from '../product-list/product-list.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — product connection from the catalog module. The query\n// arguments are fixed literals rather than variables: the compiler resolves\n// fragment variables only from route params, search params, or reactive vars\n// (there is no per-element config-variable source), so a config-sourced\n// $first/$orderBy/$filter cannot be hoisted. Until that binding exists\n// (Decision 4), the shelf fetches a fixed top-relevance slice; the config\n// props still drive the client-side context (itemsPerPage, locale, currency).\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment ProductShelfData on Query {\n    products(first: 12, orderBy: { field: RELEVANCE, direction: DESC }) {\n      edges {\n        node {\n          id\n          title\n          slug\n          images(first: 1) {\n            edges {\n              node {\n                url\n                altText\n              }\n            }\n          }\n          variants(first: 1) {\n            edges {\n              node {\n                availableForSale\n                quantityAvailable\n                price {\n                  amount\n                  currencyCode\n                }\n                compareAtPrice {\n                  amount\n                  currencyCode\n                }\n                sellers {\n                  isDefault\n                  offer {\n                    price {\n                      amount\n                      currencyCode\n                    }\n                    listPrice {\n                      amount\n                      currencyCode\n                    }\n                    spotPrice {\n                      amount\n                      currencyCode\n                    }\n                    tax {\n                      amount\n                      currencyCode\n                    }\n                    taxPercentage\n                    availableQuantity\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n      totalCount\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype RawMoney = { amount: number; currencyCode: string };\n\ntype RawOffer = {\n  price: RawMoney;\n  listPrice: RawMoney;\n  spotPrice: RawMoney;\n  tax: RawMoney;\n  taxPercentage: number | null;\n  availableQuantity: number;\n};\n\ntype RawVariantNode = {\n  availableForSale: boolean;\n  quantityAvailable: number | null;\n  price: RawMoney;\n  compareAtPrice: RawMoney | null;\n  sellers: Array<{ isDefault: boolean; offer: RawOffer | null }>;\n};\n\ntype RawProductNode = {\n  id: string;\n  title: string;\n  slug: string;\n  images: { edges: Array<{ node: { url: string; altText: string | null } }> };\n  variants: { edges: Array<{ node: RawVariantNode }> };\n};\n\n// The `$data` the shelf receives is the unwrapped top-level fragment field:\n// HotDataProvider forwards `data['products']` (the connection value), not the\n// `{ products: ... }` wrapper — same contract as PricingRoot's productBySlug.\nexport type ProductShelfData = {\n  edges: Array<{ node: RawProductNode }>;\n  totalCount: number;\n};\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n// The per-item value object the card parts (T3–T7) read. It is the widened\n// ProductListItem, so the existing ProductList.Card* leaves render unchanged.\nexport type ProductShelfItem = ProductListItem;\n\nexport type ProductShelfSort =\n  | 'relevance'\n  | 'price_asc'\n  | 'price_desc'\n  | 'name_asc'\n  | 'name_desc'\n  | 'release'\n  | 'orders'\n  | 'discount';\n\nexport type ProductSortField = 'TITLE' | 'PRICE' | 'RELEASE_DATE' | 'RELEVANCE' | 'BEST_SELLING';\n\nexport type SortDirection = 'ASC' | 'DESC';\n\nexport type ProductsFilterInput = {\n  searchTerm?: string;\n  categoryIds?: string[];\n  brandIds?: string[];\n  collectionId?: string;\n  specifications?: Array<{ name: string; values: string[] }>;\n  availableOnly?: boolean;\n};\n\nexport type ProductShelfVariables = {\n  first: number;\n  orderBy?: { field: ProductSortField; direction: SortDirection };\n  filter: ProductsFilterInput;\n};\n\nexport type ProductShelfConfig = {\n  first?: number;\n  itemsPerPage?: number;\n  sort?: ProductShelfSort;\n  searchTerm?: string;\n  categoryId?: string;\n  brandId?: string;\n  collectionId?: string;\n  specifications?: Array<{ name: string; values: string[] }>;\n  availableOnly?: boolean;\n};\n\nexport type ProductShelfContextValue = {\n  itemsPerPage: number;\n  variables: ProductShelfVariables;\n  count: number;\n};\n\nexport type ProductShelfRootProps = ComponentPropsWithRef<'section'> &\n  ProductShelfConfig & {\n    /** When true, card prices render tax-inclusive (from each item's tax data). Default false. */\n    usePriceWithTaxes?: boolean;\n    /** Text for the tax label part when tax display is on. Default `'Tax included'`. */\n    taxesLabel?: string;\n    products?: ProductShelfItem[];\n    $data?: ProductShelfData | null;\n  };\n\nexport type ProductShelfItemsProps = ComponentPropsWithRef<'div'>;\n\nexport type ProductShelfHeadingProps = ComponentPropsWithRef<'h2'>;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ProductShelfProductsContext = createContext<ProductShelfItem[]>([]);\n\nconst ProductShelfContext = createContext<ProductShelfContextValue | null>(null);\n\n// Wires the section ⇄ heading `aria-labelledby` link without the root having to\n// know its descendants: `headingId` is the shared id, and a composed\n// ProductShelfHeading registers its presence so the section points at it only\n// when it exists (never a dangling idref). `registerHeading` is ref-counted and\n// returns its unregister, so the heading can be placed anywhere.\ntype ProductShelfHeadingContextValue = { headingId: string; registerHeading: () => () => void };\n\nconst ProductShelfHeadingContext = createContext<ProductShelfHeadingContextValue | null>(null);\n\nexport function useProductShelf(): ProductShelfContextValue {\n  const ctx = useContext(ProductShelfContext);\n  if (!ctx) {\n    throw new Error('useProductShelf must be used inside ProductShelfRoot.');\n  }\n  return ctx;\n}\n\nfunction useProductShelfHeading(): ProductShelfHeadingContextValue {\n  const ctx = useContext(ProductShelfHeadingContext);\n  if (!ctx) {\n    throw new Error('ProductShelfHeading must be used inside ProductShelfRoot.');\n  }\n  return ctx;\n}\n\nexport function useProductShelfItem(): ProductShelfItem {\n  const item = useContext(ProductListItemContext);\n  if (!item) {\n    throw new Error('Product card components must be used inside ProductShelfItems.');\n  }\n  return item;\n}\n\n// ---------------------------------------------------------------------------\n// Config → GraphQL variables (the read-side of the shelf's serializable props)\n// ---------------------------------------------------------------------------\n\nconst SORT_MAP: Record<ProductShelfSort, { field: ProductSortField; direction: SortDirection }> = {\n  relevance: { field: 'RELEVANCE', direction: 'DESC' },\n  price_asc: { field: 'PRICE', direction: 'ASC' },\n  price_desc: { field: 'PRICE', direction: 'DESC' },\n  name_asc: { field: 'TITLE', direction: 'ASC' },\n  name_desc: { field: 'TITLE', direction: 'DESC' },\n  release: { field: 'RELEASE_DATE', direction: 'DESC' },\n  orders: { field: 'BEST_SELLING', direction: 'DESC' },\n  // No direct ProductSortField for legacy \"discount\"; fall back to relevance.\n  discount: { field: 'RELEVANCE', direction: 'DESC' },\n};\n\nexport function buildProductShelfVariables(config: ProductShelfConfig): ProductShelfVariables {\n  const {\n    first = 5,\n    sort = 'relevance',\n    searchTerm,\n    categoryId,\n    brandId,\n    collectionId,\n    specifications,\n    availableOnly,\n  } = config;\n\n  const filter: ProductsFilterInput = {};\n  if (searchTerm) filter.searchTerm = searchTerm;\n  if (categoryId) filter.categoryIds = [categoryId];\n  if (brandId) filter.brandIds = [brandId];\n  if (collectionId) filter.collectionId = collectionId;\n  if (specifications && specifications.length > 0) filter.specifications = specifications;\n  if (availableOnly) filter.availableOnly = true;\n\n  return { first, orderBy: SORT_MAP[sort], filter };\n}\n\n// ---------------------------------------------------------------------------\n// Transform — raw fragment slice → per-item value objects\n// ---------------------------------------------------------------------------\n\nexport function transformProducts(data: ProductShelfData): ProductShelfItem[] {\n  return data.edges.map(({ node }): ProductShelfItem => {\n    const image = node.images.edges[0]?.node;\n    const variant = node.variants.edges[0]?.node;\n    const seller = variant?.sellers.find((s) => s.isDefault) ?? variant?.sellers[0];\n    const offer = seller?.offer ?? null;\n\n    const price = offer?.price.amount ?? variant?.price.amount ?? 0;\n    const listPrice = offer?.listPrice.amount ?? variant?.compareAtPrice?.amount;\n    const spotPrice = offer?.spotPrice.amount;\n    const currency = offer?.price.currencyCode ?? variant?.price.currencyCode;\n\n    return {\n      id: node.id,\n      name: node.title,\n      slug: node.slug,\n      image: { src: image?.url ?? '', alt: image?.altText ?? node.title },\n      price,\n      ...(listPrice !== undefined ? { listPrice } : {}),\n      ...(spotPrice !== undefined ? { spotPrice } : {}),\n      ...(offer ? { tax: offer.tax.amount, taxPercentage: offer.taxPercentage } : {}),\n      ...(variant ? { availableForSale: variant.availableForSale } : {}),\n      ...(variant?.quantityAvailable != null ? { availableQuantity: variant.quantityAvailable } : {}),\n      ...(currency ? { currency } : {}),\n    };\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductShelfRootDefinition = defineComponent<ProductShelfRootProps>({\n  name: 'ProductShelfRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfRoot,\n  fragment,\n  fetchStrategy: 'lazy',\n  skeleton: ProductShelfSkeleton,\n  editor: { label: 'Product Shelf Root', category: 'commerce' },\n  providesContext: 'product-shelf',\n  schema: {\n    first: { type: 'number', default: 5, label: 'Number of Products' },\n    itemsPerPage: { type: 'number', default: 5, label: 'Items Per Page' },\n    sort: {\n      type: ['relevance', 'price_asc', 'price_desc', 'name_asc', 'name_desc', 'release', 'orders', 'discount'] as const,\n      default: 'relevance',\n      label: 'Sort',\n    },\n    searchTerm: { type: 'string', label: 'Search Term' },\n    categoryId: { type: 'string', label: 'Category ID' },\n    brandId: { type: 'string', label: 'Brand ID' },\n    collectionId: { type: 'string', label: 'Collection ID' },\n    specifications: { type: 'array', label: 'Specification Filters' },\n    availableOnly: { type: 'boolean', default: false, label: 'Available Only' },\n    usePriceWithTaxes: { type: 'boolean', default: false, label: 'Use Price With Taxes' },\n    taxesLabel: { type: 'string', default: 'Tax included', label: 'Taxes Label' },\n  },\n  guideline:\n    'Data-owning root of a facet-sourced product shelf. Owns a products(filter:) fragment and receives $data lazily. Compose as: ProductShelfRoot > (ProductShelfHeading + CarouselRoot > (ProductShelfItems + CarouselPrevious + CarouselNext + CarouselBullets)). Compose ProductShelfHeading with the title as its children to render a heading; set the source with categoryId / brandId / collectionId / searchTerm / specifications and tune first, sort, availableOnly. Renders a skeleton while loading and nothing when the result is empty. Bind itemsPerPage to the CarouselRoot so paging matches the shelf config. See product-shelf.md.',\n});\n\nexport const ProductShelfItemsDefinition = defineComponent<ProductShelfItemsProps>({\n  name: 'ProductShelfItems',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfItems,\n  editor: { label: 'Product Shelf Items', category: 'commerce' },\n  requiresContext: 'product-shelf',\n  schema: {},\n  guideline:\n    'Repeats the shelf products into the carousel track, publishing one product per slide through the per-item context the ProductCard* parts read. Place directly inside CarouselRoot (it renders the CarouselTrack). Put the card template (ProductCardImage, ProductCardName, ProductCardPrice, …) as its children.',\n});\n\nexport const ProductShelfHeadingDefinition = defineComponent<ProductShelfHeadingProps>({\n  name: 'ProductShelfHeading',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfHeading,\n  editor: { label: 'Product Shelf Heading', category: 'commerce' },\n  requiresContext: 'product-shelf',\n  schema: {},\n  guideline:\n    \"Renders its children as the shelf title (an <h2>) and provides the section's accessible label. Author the title text as its children (props.children). Place it inside ProductShelfRoot where the title should sit — usually above CarouselRoot. Renders nothing when it has no children.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function ProductShelfRoot({\n  first = 5,\n  itemsPerPage = 5,\n  sort = 'relevance',\n  searchTerm,\n  categoryId,\n  brandId,\n  collectionId,\n  specifications,\n  availableOnly = false,\n  usePriceWithTaxes = false,\n  taxesLabel = 'Tax included',\n  products,\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: ProductShelfRootProps) {\n  const $data = useDataOverride<ProductShelfData | null | undefined>($dataProp);\n  const headingId = useId();\n  // Ref-counted so a composed ProductShelfHeading flips `hasHeading` wherever it is placed; the\n  // section then labels itself only while a heading is mounted, never via a dangling idref.\n  const [headingCount, setHeadingCount] = useState(0);\n  const registerHeading = useCallback(() => {\n    setHeadingCount((count) => count + 1);\n    return () => setHeadingCount((count) => count - 1);\n  }, []);\n  const headingContext = useMemo(() => ({ headingId, registerHeading }), [headingId, registerHeading]);\n  const config = useMemo(() => ({ usePriceWithTaxes, taxesLabel }), [usePriceWithTaxes, taxesLabel]);\n  const hasHeading = headingCount > 0;\n\n  let items: ProductShelfItem[];\n  if (products !== undefined) {\n    items = products;\n  } else if ($data === undefined) {\n    // Lazy source not resolved yet — show the skeleton (the runtime also renders it).\n    return <ProductShelfSkeleton className={className} />;\n  } else {\n    items = $data ? transformProducts($data) : [];\n  }\n\n  items = items.slice(0, first);\n\n  // Empty result renders nothing (legacy parity) rather than an empty carousel.\n  if (items.length === 0) {\n    return null;\n  }\n\n  const variables = buildProductShelfVariables({\n    first,\n    sort,\n    searchTerm,\n    categoryId,\n    brandId,\n    collectionId,\n    specifications,\n    availableOnly,\n  });\n\n  const shelf: ProductShelfContextValue = { itemsPerPage, variables, count: items.length };\n\n  return (\n    <ProductListConfigContext value={config}>\n      <ProductShelfProductsContext value={items}>\n        <ProductShelfContext value={shelf}>\n          <ProductShelfHeadingContext value={headingContext}>\n            <section\n              {...props}\n              className={className}\n              data-fs-product-shelf=\"\"\n              aria-labelledby={hasHeading ? headingId : undefined}\n            >\n              {children}\n            </section>\n          </ProductShelfHeadingContext>\n        </ProductShelfContext>\n      </ProductShelfProductsContext>\n    </ProductListConfigContext>\n  );\n}\n\nexport function ProductShelfHeading({ className, children, ...props }: ProductShelfHeadingProps) {\n  const { headingId, registerHeading } = useProductShelfHeading();\n  const hasContent = children != null && children !== '';\n\n  // Announce presence to the root so its section wires `aria-labelledby` to this heading; the\n  // registration (and its unregister) is scoped to when the heading actually renders content.\n  useEffect(() => {\n    if (!hasContent) {\n      return;\n    }\n    return registerHeading();\n  }, [hasContent, registerHeading]);\n\n  if (!hasContent) {\n    return null;\n  }\n\n  return (\n    <Text {...props} as=\"h2\" id={headingId} className={className} data-fs-product-shelf-heading=\"\">\n      {children}\n    </Text>\n  );\n}\n\nexport function ProductShelfItems({ children, ...props }: ProductShelfItemsProps) {\n  const items = useContext(ProductShelfProductsContext);\n\n  return (\n    <CarouselTrack {...props} data-fs-product-shelf-items=\"\">\n      {items.map((item) => (\n        <ProductListItemContext key={item.id} value={item}>\n          {children}\n        </ProductListItemContext>\n      ))}\n    </CarouselTrack>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\n\nexport function ProductShelfSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-product-shelf-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n    </div>\n  );\n}\n\nProductShelfRoot.Skeleton = ProductShelfSkeleton;\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductShelf = {\n  Root: ProductShelfRoot,\n  Heading: ProductShelfHeading,\n  Items: ProductShelfItems,\n  Skeleton: ProductShelfSkeleton,\n};\n"],"mappings":"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"}
+{"version":3,"file":"product-shelf.js","names":[],"sources":["../../../src/matter/product-shelf/product-shelf.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\nimport { CarouselTrack } from '../../particles/carousel/carousel.js';\nimport { Text } from '../../particles/text/text.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { isEmptyContentValue } from '../../sdk/data/empty-content-value.js';\nimport {\n  ProductListConfigContext,\n  type ProductListItem,\n  ProductListItemContext,\n} from '../product-list/product-list.js';\n\n// ---------------------------------------------------------------------------\n// Content model — the merchant-facing fields that drive the query. Each one is\n// also a schema prop of the same name on the root: the CMS value wins per\n// field, and the prop is the developer default (the only source in a store\n// with no CMS binding). No field is required, so an empty value relaxes the\n// filter or takes the prop instead of omitting the shelf.\n// ---------------------------------------------------------------------------\n\nexport const ProductShelfContent = defineContentType({\n  id: 'product-shelf',\n  title: 'Product Shelf',\n  description: 'Which products a shelf shows: how many, in which order, and from which facet.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      first: { type: 'integer', title: 'Number of products', minimum: 1, maximum: 100 },\n      sort: {\n        type: 'string',\n        enum: ['relevance', 'price_asc', 'price_desc', 'name_asc', 'name_desc', 'release', 'orders', 'discount'],\n        title: 'Sort',\n      },\n      categoryId: { type: 'string', title: 'Category ID' },\n      brandId: { type: 'string', title: 'Brand ID' },\n      collectionId: { type: 'string', title: 'Collection ID' },\n      searchTerm: { type: 'string', title: 'Search term' },\n      availableOnly: { type: 'boolean', title: 'Available only' },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — product connection from the catalog module. Every\n// argument is a variable the compiler binds from the element's configuration\n// (its content slice at request time, else its prop at compile time), one\n// fragment instance per element. A variable left unbound inside `filter`\n// omits that key, so an unset facet relaxes the filter rather than sending\n// null; `$orderBy` reads `sort` through the `values` table in the definition.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment ProductShelfData on Query {\n    products(\n      first: $first\n      orderBy: $orderBy\n      filter: {\n        categoryIds: $categoryId\n        brandIds: $brandId\n        collectionId: $collectionId\n        searchTerm: $searchTerm\n        availableOnly: $availableOnly\n      }\n    ) {\n      edges {\n        node {\n          id\n          title\n          slug\n          routeSlug\n          images(first: 1) {\n            edges {\n              node {\n                url\n                altText\n              }\n            }\n          }\n          variants(first: 1) {\n            edges {\n              node {\n                availableForSale\n                quantityAvailable\n                price {\n                  amount\n                  currencyCode\n                }\n                compareAtPrice {\n                  amount\n                  currencyCode\n                }\n                sellers {\n                  isDefault\n                  offer {\n                    price {\n                      amount\n                      currencyCode\n                    }\n                    listPrice {\n                      amount\n                      currencyCode\n                    }\n                    spotPrice {\n                      amount\n                      currencyCode\n                    }\n                    tax {\n                      amount\n                      currencyCode\n                    }\n                    taxPercentage\n                    availableQuantity\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n      totalCount\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype RawMoney = { amount: number; currencyCode: string };\n\ntype RawOffer = {\n  price: RawMoney;\n  listPrice: RawMoney;\n  spotPrice: RawMoney;\n  tax: RawMoney;\n  taxPercentage: number | null;\n  availableQuantity: number;\n};\n\ntype RawVariantNode = {\n  availableForSale: boolean;\n  quantityAvailable: number | null;\n  price: RawMoney;\n  compareAtPrice: RawMoney | null;\n  sellers: Array<{ isDefault: boolean; offer: RawOffer | null }>;\n};\n\ntype RawProductNode = {\n  id: string;\n  title: string;\n  slug: string;\n  routeSlug: string;\n  images: { edges: Array<{ node: { url: string; altText: string | null } }> };\n  variants: { edges: Array<{ node: RawVariantNode }> };\n};\n\n// The `$data` the shelf receives is the unwrapped top-level fragment field:\n// HotDataProvider forwards `data['products']` (the connection value), not the\n// `{ products: ... }` wrapper — same contract as PricingRoot's productBySlug.\nexport type ProductShelfData = {\n  edges: Array<{ node: RawProductNode }>;\n  totalCount: number;\n};\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n// The per-item value object the card parts (T3–T7) read. It is the widened\n// ProductListItem, so the existing ProductList.Card* leaves render unchanged.\nexport type ProductShelfItem = ProductListItem;\n\nexport type ProductShelfSort =\n  | 'relevance'\n  | 'price_asc'\n  | 'price_desc'\n  | 'name_asc'\n  | 'name_desc'\n  | 'release'\n  | 'orders'\n  | 'discount';\n\nexport type ProductSortField = 'TITLE' | 'PRICE' | 'RELEASE_DATE' | 'RELEVANCE' | 'BEST_SELLING';\n\nexport type SortDirection = 'ASC' | 'DESC';\n\n/**\n * The query configuration the shelf resolved for this element: the content slice when the\n * merchant filled a field, else the prop. The query has already applied these values; the\n * context republishes them for parts that describe the shelf (a \"sorted by\" label, a facet link).\n */\nexport type ProductShelfConfig = {\n  first: number;\n  sort: ProductShelfSort;\n  searchTerm?: string;\n  categoryId?: string;\n  brandId?: string;\n  collectionId?: string;\n  availableOnly: boolean;\n};\n\nexport type ProductShelfContextValue = {\n  itemsPerPage: number;\n  config: ProductShelfConfig;\n  count: number;\n};\n\nexport type ProductShelfRootProps = ComponentPropsWithRef<'section'> &\n  Partial<ProductShelfConfig> & {\n    itemsPerPage?: number;\n    /** When true, card prices render tax-inclusive (from each item's tax data). Default false. */\n    usePriceWithTaxes?: boolean;\n    /** Text for the tax label part when tax display is on. Default `'Tax included'`. */\n    taxesLabel?: string;\n    products?: ProductShelfItem[];\n    /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n    $content?: ContentValue<typeof ProductShelfContent>;\n    $data?: ProductShelfData | null;\n  };\n\nexport type ProductShelfItemsProps = ComponentPropsWithRef<'div'>;\n\nexport type ProductShelfHeadingProps = ComponentPropsWithRef<'h2'>;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ProductShelfProductsContext = createContext<ProductShelfItem[]>([]);\n\nconst ProductShelfContext = createContext<ProductShelfContextValue | null>(null);\n\n// Wires the section ⇄ heading `aria-labelledby` link without the root having to\n// know its descendants: `headingId` is the shared id, and a composed\n// ProductShelfHeading registers its presence so the section points at it only\n// when it exists (never a dangling idref). `registerHeading` is ref-counted and\n// returns its unregister, so the heading can be placed anywhere.\ntype ProductShelfHeadingContextValue = { headingId: string; registerHeading: () => () => void };\n\nconst ProductShelfHeadingContext = createContext<ProductShelfHeadingContextValue | null>(null);\n\nexport function useProductShelf(): ProductShelfContextValue {\n  const ctx = useContext(ProductShelfContext);\n  if (!ctx) {\n    throw new Error('useProductShelf must be used inside ProductShelfRoot.');\n  }\n  return ctx;\n}\n\nfunction useProductShelfHeading(): ProductShelfHeadingContextValue {\n  const ctx = useContext(ProductShelfHeadingContext);\n  if (!ctx) {\n    throw new Error('ProductShelfHeading must be used inside ProductShelfRoot.');\n  }\n  return ctx;\n}\n\nexport function useProductShelfItem(): ProductShelfItem {\n  const item = useContext(ProductListItemContext);\n  if (!item) {\n    throw new Error('Product card components must be used inside ProductShelfItems.');\n  }\n  return item;\n}\n\n// ---------------------------------------------------------------------------\n// `sort` → `$orderBy` (ProductSortingInput). The same table is the `values`\n// block of the definition, so the compiler and the SDK helper apply it; the\n// contract test pins the two to each other.\n// ---------------------------------------------------------------------------\n\nexport const PRODUCT_SHELF_SORT_MAP: Record<ProductShelfSort, { field: ProductSortField; direction: SortDirection }> = {\n  relevance: { field: 'RELEVANCE', direction: 'DESC' },\n  price_asc: { field: 'PRICE', direction: 'ASC' },\n  price_desc: { field: 'PRICE', direction: 'DESC' },\n  name_asc: { field: 'TITLE', direction: 'ASC' },\n  name_desc: { field: 'TITLE', direction: 'DESC' },\n  release: { field: 'RELEASE_DATE', direction: 'DESC' },\n  orders: { field: 'BEST_SELLING', direction: 'DESC' },\n  // No direct ProductSortField for legacy \"discount\"; fall back to relevance.\n  discount: { field: 'RELEVANCE', direction: 'DESC' },\n};\n\n// ---------------------------------------------------------------------------\n// Transform — raw fragment slice → per-item value objects\n// ---------------------------------------------------------------------------\n\nexport function transformProducts(data: ProductShelfData): ProductShelfItem[] {\n  return data.edges.map(({ node }): ProductShelfItem => {\n    const image = node.images.edges[0]?.node;\n    const variant = node.variants.edges[0]?.node;\n    const seller = variant?.sellers.find((s) => s.isDefault) ?? variant?.sellers[0];\n    const offer = seller?.offer ?? null;\n\n    const price = offer?.price.amount ?? variant?.price.amount ?? 0;\n    const listPrice = offer?.listPrice.amount ?? variant?.compareAtPrice?.amount;\n    const spotPrice = offer?.spotPrice.amount;\n    const currency = offer?.price.currencyCode ?? variant?.price.currencyCode;\n\n    return {\n      id: node.id,\n      name: node.title,\n      slug: node.slug,\n      routeSlug: node.routeSlug,\n      image: { src: image?.url ?? '', alt: image?.altText ?? node.title },\n      price,\n      ...(listPrice !== undefined ? { listPrice } : {}),\n      ...(spotPrice !== undefined ? { spotPrice } : {}),\n      ...(offer ? { tax: offer.tax.amount, taxPercentage: offer.taxPercentage } : {}),\n      ...(variant ? { availableForSale: variant.availableForSale } : {}),\n      ...(variant?.quantityAvailable != null ? { availableQuantity: variant.quantityAvailable } : {}),\n      ...(currency ? { currency } : {}),\n    };\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductShelfRootDefinition = defineComponent<ProductShelfRootProps>({\n  name: 'ProductShelfRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfRoot,\n  fragment,\n  fetchStrategy: 'lazy',\n  skeleton: ProductShelfSkeleton,\n  content: ProductShelfContent,\n  // The `values` table is authored as a literal: the Catalog Build serializes the block as JSON and\n  // rejects identifiers. `PRODUCT_SHELF_SORT_MAP` is pinned equal to it by the contract test.\n  variables: {\n    orderBy: {\n      from: 'sort',\n      values: {\n        relevance: { field: 'RELEVANCE', direction: 'DESC' },\n        price_asc: { field: 'PRICE', direction: 'ASC' },\n        price_desc: { field: 'PRICE', direction: 'DESC' },\n        name_asc: { field: 'TITLE', direction: 'ASC' },\n        name_desc: { field: 'TITLE', direction: 'DESC' },\n        release: { field: 'RELEASE_DATE', direction: 'DESC' },\n        orders: { field: 'BEST_SELLING', direction: 'DESC' },\n        discount: { field: 'RELEVANCE', direction: 'DESC' },\n      },\n    },\n  },\n  editor: { label: 'Product Shelf Root', category: 'commerce' },\n  providesContext: 'product-shelf',\n  schema: {\n    itemsPerPage: { type: 'number', default: 5, label: 'Items Per Page' },\n    usePriceWithTaxes: { type: 'boolean', default: false, label: 'Use Price With Taxes' },\n    taxesLabel: { type: 'string', default: 'Tax included', label: 'Taxes Label' },\n    // The content fields again, as props: the developer's defaults, and the only source in a\n    // store with no CMS binding (example stores, Storybook, tests).\n    first: { type: 'number', default: 5, label: 'Number of Products' },\n    sort: {\n      type: ['relevance', 'price_asc', 'price_desc', 'name_asc', 'name_desc', 'release', 'orders', 'discount'] as const,\n      default: 'relevance',\n      label: 'Sort',\n    },\n    searchTerm: { type: 'string', label: 'Search Term' },\n    categoryId: { type: 'string', label: 'Category ID' },\n    brandId: { type: 'string', label: 'Brand ID' },\n    collectionId: { type: 'string', label: 'Collection ID' },\n    availableOnly: { type: 'boolean', default: false, label: 'Available Only' },\n  },\n  guideline:\n    'Data-owning root of a facet-sourced product shelf. Owns a products(first:, orderBy:, filter:) fragment whose variables bind to this element: the merchant fills them in the CMS (content model product-shelf) and the props of the same name are the defaults. Receives $data lazily. Compose as: ProductShelfRoot > (ProductShelfHeading + CarouselRoot > (ProductShelfItems + CarouselPrevious + CarouselNext + CarouselBullets)). Compose ProductShelfHeading with the title as its children to render a heading; set the source with categoryId / brandId / collectionId / searchTerm and tune first, sort, availableOnly. Renders a skeleton while loading and nothing when the result is empty. Bind itemsPerPage to the CarouselRoot so paging matches the shelf config. See product-shelf.md.',\n});\n\nexport const ProductShelfItemsDefinition = defineComponent<ProductShelfItemsProps>({\n  name: 'ProductShelfItems',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfItems,\n  editor: { label: 'Product Shelf Items', category: 'commerce' },\n  requiresContext: 'product-shelf',\n  schema: {},\n  guideline:\n    'Repeats the shelf products into the carousel track, publishing one product per slide through the per-item context the ProductCard* parts read. Place directly inside CarouselRoot (it renders the CarouselTrack). Put the card template (ProductCardImage, ProductCardName, ProductCardPrice, …) as its children.',\n});\n\nexport const ProductShelfHeadingDefinition = defineComponent<ProductShelfHeadingProps>({\n  name: 'ProductShelfHeading',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfHeading,\n  editor: { label: 'Product Shelf Heading', category: 'commerce' },\n  requiresContext: 'product-shelf',\n  schema: {},\n  guideline:\n    \"Renders its children as the shelf title (an <h2>) and provides the section's accessible label. Author the title text as its children (props.children). Place it inside ProductShelfRoot where the title should sit — usually above CarouselRoot. Renders nothing when it has no children.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\n/** The content value when the merchant filled the field, else the prop (the shared emptiness rule). */\nfunction contentOrProp<T>(content: T | undefined, prop: T): T {\n  if (content === undefined || isEmptyContentValue(content)) return prop;\n  return content;\n}\n\nexport function ProductShelfRoot({\n  first = 5,\n  itemsPerPage = 5,\n  sort = 'relevance',\n  searchTerm,\n  categoryId,\n  brandId,\n  collectionId,\n  availableOnly = false,\n  usePriceWithTaxes = false,\n  taxesLabel = 'Tax included',\n  products,\n  $content,\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: ProductShelfRootProps) {\n  const $data = useDataOverride<ProductShelfData | null | undefined>($dataProp);\n  // The query already applied these values (the compiler binds the same slice and props to the\n  // fragment variables); the context only republishes what this element resolved to.\n  const shelfConfig = useMemo<ProductShelfConfig>(\n    () => ({\n      first: contentOrProp($content?.first, first),\n      sort: contentOrProp($content?.sort, sort),\n      searchTerm: contentOrProp($content?.searchTerm, searchTerm),\n      categoryId: contentOrProp($content?.categoryId, categoryId),\n      brandId: contentOrProp($content?.brandId, brandId),\n      collectionId: contentOrProp($content?.collectionId, collectionId),\n      availableOnly: contentOrProp($content?.availableOnly, availableOnly),\n    }),\n    [$content, first, sort, searchTerm, categoryId, brandId, collectionId, availableOnly],\n  );\n  const headingId = useId();\n  // Ref-counted so a composed ProductShelfHeading flips `hasHeading` wherever it is placed; the\n  // section then labels itself only while a heading is mounted, never via a dangling idref.\n  const [headingCount, setHeadingCount] = useState(0);\n  const registerHeading = useCallback(() => {\n    setHeadingCount((count) => count + 1);\n    return () => setHeadingCount((count) => count - 1);\n  }, []);\n  const headingContext = useMemo(() => ({ headingId, registerHeading }), [headingId, registerHeading]);\n  const config = useMemo(() => ({ usePriceWithTaxes, taxesLabel }), [usePriceWithTaxes, taxesLabel]);\n  const items = useMemo<ProductShelfItem[]>(() => {\n    if (products !== undefined) return products;\n    return $data ? transformProducts($data) : [];\n  }, [products, $data]);\n  const shelf = useMemo<ProductShelfContextValue>(\n    () => ({ itemsPerPage, config: shelfConfig, count: items.length }),\n    [itemsPerPage, shelfConfig, items.length],\n  );\n  const hasHeading = headingCount > 0;\n\n  if (products === undefined && $data === undefined) {\n    // Lazy source not resolved yet — show the skeleton (the runtime also renders it).\n    return <ProductShelfSkeleton className={className} />;\n  }\n\n  // Empty result renders nothing (legacy parity) rather than an empty carousel.\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <ProductListConfigContext value={config}>\n      <ProductShelfProductsContext value={items}>\n        <ProductShelfContext value={shelf}>\n          <ProductShelfHeadingContext value={headingContext}>\n            <section\n              {...props}\n              className={className}\n              data-fs-product-shelf=\"\"\n              aria-labelledby={hasHeading ? headingId : undefined}\n            >\n              {children}\n            </section>\n          </ProductShelfHeadingContext>\n        </ProductShelfContext>\n      </ProductShelfProductsContext>\n    </ProductListConfigContext>\n  );\n}\n\nexport function ProductShelfHeading({ className, children, ...props }: ProductShelfHeadingProps) {\n  const { headingId, registerHeading } = useProductShelfHeading();\n  const hasContent = children != null && children !== '';\n\n  // Announce presence to the root so its section wires `aria-labelledby` to this heading; the\n  // registration (and its unregister) is scoped to when the heading actually renders content.\n  useEffect(() => {\n    if (!hasContent) {\n      return;\n    }\n    return registerHeading();\n  }, [hasContent, registerHeading]);\n\n  if (!hasContent) {\n    return null;\n  }\n\n  return (\n    <Text {...props} as=\"h2\" id={headingId} className={className} data-fs-product-shelf-heading=\"\">\n      {children}\n    </Text>\n  );\n}\n\nexport function ProductShelfItems({ children, ...props }: ProductShelfItemsProps) {\n  const items = useContext(ProductShelfProductsContext);\n\n  return (\n    <CarouselTrack {...props} data-fs-product-shelf-items=\"\">\n      {items.map((item) => (\n        <ProductListItemContext key={item.id} value={item}>\n          {children}\n        </ProductListItemContext>\n      ))}\n    </CarouselTrack>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\n\nexport function ProductShelfSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-product-shelf-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n    </div>\n  );\n}\n\nProductShelfRoot.Skeleton = ProductShelfSkeleton;\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductShelf = {\n  Root: ProductShelfRoot,\n  Heading: ProductShelfHeading,\n  Items: ProductShelfItems,\n  Skeleton: ProductShelfSkeleton,\n};\n"],"mappings":"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"}

package/dist/matter/region/region.js

@@ -476,7 +476,7 @@ function RegionPostalCodeControl({ className, mask, label, placeholder, errorMes
 	* from the top. Waits for `pending` to clear, because focusing a still-disabled input is a no-op:
 	* the errors and the pending flag settle in separate microtasks, so there is a render in between
 	* where the rejection is known and the field is not yet editable. The field is reached through the
-	* root the way ClientProfileForm reaches its own fields.
+	* root via a scoped querySelector, not a ref threaded down through props.
 	*/
 	useEffect(() => {
 		if (!refused || pending) return;