@vtex/faststore 0.0.6 → 0.0.7

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          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\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      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  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":";;;;;;;;;;;;AA+BA,MAAa,sBAAsB,kBAAkB;CACnD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,OAAO;IAAE,MAAM;IAAW,OAAO;IAAsB,SAAS;IAAG,SAAS;GAAI;GAChF,MAAM;IACJ,MAAM;IACN,MAAM;KAAC;KAAa;KAAa;KAAc;KAAY;KAAa;KAAW;KAAU;IAAU;IACvG,OAAO;GACT;GACA,YAAY;IAAE,MAAM;IAAU,OAAO;GAAc;GACnD,SAAS;IAAE,MAAM;IAAU,OAAO;GAAW;GAC7C,cAAc;IAAE,MAAM;IAAU,OAAO;GAAgB;GACvD,YAAY;IAAE,MAAM;IAAU,OAAO;GAAc;GACnD,eAAe;IAAE,MAAM;IAAW,OAAO;GAAiB;EAC5D;CACF;AACF,CAAC;AAWD,MAAM,WAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiL/B,MAAM,8BAA8B,cAAkC,CAAC,CAAC;AAExE,MAAM,sBAAsB,cAA+C,IAAI;AAS/E,MAAM,6BAA6B,cAAsD,IAAI;AAE7F,SAAgB,kBAA4C;CAC1D,MAAM,MAAM,WAAW,mBAAmB;CAC1C,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,uDAAuD;CAEzE,OAAO;AACT;AAEA,SAAS,yBAA0D;CACjE,MAAM,MAAM,WAAW,0BAA0B;CACjD,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,2DAA2D;CAE7E,OAAO;AACT;AAEA,SAAgB,sBAAwC;CACtD,MAAM,OAAO,WAAW,sBAAsB;CAC9C,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,gEAAgE;CAElF,OAAO;AACT;AAQA,MAAa,yBAA0G;CACrH,WAAW;EAAE,OAAO;EAAa,WAAW;CAAO;CACnD,WAAW;EAAE,OAAO;EAAS,WAAW;CAAM;CAC9C,YAAY;EAAE,OAAO;EAAS,WAAW;CAAO;CAChD,UAAU;EAAE,OAAO;EAAS,WAAW;CAAM;CAC7C,WAAW;EAAE,OAAO;EAAS,WAAW;CAAO;CAC/C,SAAS;EAAE,OAAO;EAAgB,WAAW;CAAO;CACpD,QAAQ;EAAE,OAAO;EAAgB,WAAW;CAAO;CAEnD,UAAU;EAAE,OAAO;EAAa,WAAW;CAAO;AACpD;AAMA,SAAgB,kBAAkB,MAA4C;CAC5E,OAAO,KAAK,MAAM,KAAK,EAAE,WAA6B;EACpD,MAAM,QAAQ,KAAK,OAAO,MAAM,EAAE,EAAE;EACpC,MAAM,UAAU,KAAK,SAAS,MAAM,EAAE,EAAE;EAExC,MAAM,SADS,SAAS,QAAQ,MAAM,MAAM,EAAE,SAAS,KAAK,SAAS,QAAQ,GAAA,EACvD,SAAS;EAE/B,MAAM,QAAQ,OAAO,MAAM,UAAU,SAAS,MAAM,UAAU;EAC9D,MAAM,YAAY,OAAO,UAAU,UAAU,SAAS,gBAAgB;EACtE,MAAM,YAAY,OAAO,UAAU;EACnC,MAAM,WAAW,OAAO,MAAM,gBAAgB,SAAS,MAAM;EAE7D,OAAO;GACL,IAAI,KAAK;GACT,MAAM,KAAK;GACX,MAAM,KAAK;GACX,WAAW,KAAK;GAChB,OAAO;IAAE,KAAK,OAAO,OAAO;IAAI,KAAK,OAAO,WAAW,KAAK;GAAM;GAClE;GACA,GAAI,cAAc,KAAA,IAAY,EAAE,UAAU,IAAI,CAAC;GAC/C,GAAI,cAAc,KAAA,IAAY,EAAE,UAAU,IAAI,CAAC;GAC/C,GAAI,QAAQ;IAAE,KAAK,MAAM,IAAI;IAAQ,eAAe,MAAM;GAAc,IAAI,CAAC;GAC7E,GAAI,UAAU,EAAE,kBAAkB,QAAQ,iBAAiB,IAAI,CAAC;GAChE,GAAI,SAAS,qBAAqB,OAAO,EAAE,mBAAmB,QAAQ,kBAAkB,IAAI,CAAC;GAC7F,GAAI,WAAW,EAAE,SAAS,IAAI,CAAC;EACjC;CACF,CAAC;AACH;AAMA,MAAa,6BAA6B,gBAAuC;CAC/E,MAAM;CACN,YAAY;CACZ,WAAW;CACX;CACA,eAAe;CACf,UAAU;CACV,SAAS;CAGT,WAAW,EACT,SAAS;EACP,MAAM;EACN,QAAQ;GACN,WAAW;IAAE,OAAO;IAAa,WAAW;GAAO;GACnD,WAAW;IAAE,OAAO;IAAS,WAAW;GAAM;GAC9C,YAAY;IAAE,OAAO;IAAS,WAAW;GAAO;GAChD,UAAU;IAAE,OAAO;IAAS,WAAW;GAAM;GAC7C,WAAW;IAAE,OAAO;IAAS,WAAW;GAAO;GAC/C,SAAS;IAAE,OAAO;IAAgB,WAAW;GAAO;GACpD,QAAQ;IAAE,OAAO;IAAgB,WAAW;GAAO;GACnD,UAAU;IAAE,OAAO;IAAa,WAAW;GAAO;EACpD;CACF,EACF;CACA,QAAQ;EAAE,OAAO;EAAsB,UAAU;CAAW;CAC5D,iBAAiB;CACjB,QAAQ;EACN,cAAc;GAAE,MAAM;GAAU,SAAS;GAAG,OAAO;EAAiB;EACpE,mBAAmB;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAuB;EACpF,YAAY;GAAE,MAAM;GAAU,SAAS;GAAgB,OAAO;EAAc;EAG5E,OAAO;GAAE,MAAM;GAAU,SAAS;GAAG,OAAO;EAAqB;EACjE,MAAM;GACJ,MAAM;IAAC;IAAa;IAAa;IAAc;IAAY;IAAa;IAAW;IAAU;GAAU;GACvG,SAAS;GACT,OAAO;EACT;EACA,YAAY;GAAE,MAAM;GAAU,OAAO;EAAc;EACnD,YAAY;GAAE,MAAM;GAAU,OAAO;EAAc;EACnD,SAAS;GAAE,MAAM;GAAU,OAAO;EAAW;EAC7C,cAAc;GAAE,MAAM;GAAU,OAAO;EAAgB;EACvD,eAAe;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAiB;CAC5E;CACA,WACE;AACJ,CAAC;AAED,MAAa,8BAA8B,gBAAwC;CACjF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAuB,UAAU;CAAW;CAC7D,iBAAiB;CACjB,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,gCAAgC,gBAA0C;CACrF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAyB,UAAU;CAAW;CAC/D,iBAAiB;CACjB,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;;AAOD,SAAS,cAAiB,SAAwB,MAAY;CAC5D,IAAI,YAAY,KAAA,KAAa,oBAAoB,OAAO,GAAG,OAAO;CAClE,OAAO;AACT;AAEA,SAAgB,iBAAiB,EAC/B,QAAQ,GACR,eAAe,GACf,OAAO,aACP,YACA,YACA,SACA,cACA,gBAAgB,OAChB,oBAAoB,OACpB,aAAa,gBACb,UACA,UACA,OAAO,WACP,WACA,UACA,GAAG,SACqB;CACxB,MAAM,QAAQ,gBAAqD,SAAS;CAG5E,MAAM,cAAc,eACX;EACL,OAAO,cAAc,UAAU,OAAO,KAAK;EAC3C,MAAM,cAAc,UAAU,MAAM,IAAI;EACxC,YAAY,cAAc,UAAU,YAAY,UAAU;EAC1D,YAAY,cAAc,UAAU,YAAY,UAAU;EAC1D,SAAS,cAAc,UAAU,SAAS,OAAO;EACjD,cAAc,cAAc,UAAU,cAAc,YAAY;EAChE,eAAe,cAAc,UAAU,eAAe,aAAa;CACrE,IACA;EAAC;EAAU;EAAO;EAAM;EAAY;EAAY;EAAS;EAAc;CAAa,CACtF;CACA,MAAM,YAAY,MAAM;CAGxB,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAClD,MAAM,kBAAkB,kBAAkB;EACxC,iBAAiB,UAAU,QAAQ,CAAC;EACpC,aAAa,iBAAiB,UAAU,QAAQ,CAAC;CACnD,GAAG,CAAC,CAAC;CACL,MAAM,iBAAiB,eAAe;EAAE;EAAW;CAAgB,IAAI,CAAC,WAAW,eAAe,CAAC;CACnG,MAAM,SAAS,eAAe;EAAE;EAAmB;CAAW,IAAI,CAAC,mBAAmB,UAAU,CAAC;CACjG,MAAM,QAAQ,cAAkC;EAC9C,IAAI,aAAa,KAAA,GAAW,OAAO;EACnC,OAAO,QAAQ,kBAAkB,KAAK,IAAI,CAAC;CAC7C,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,QAAQ,eACL;EAAE;EAAc,QAAQ;EAAa,OAAO,MAAM;CAAO,IAChE;EAAC;EAAc;EAAa,MAAM;CAAM,CAC1C;CACA,MAAM,aAAa,eAAe;CAElC,IAAI,aAAa,KAAA,KAAa,UAAU,KAAA,GAEtC,OAAO,oBAAC,sBAAD,EAAiC,UAAY,CAAA;CAItD,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAAC,6BAAD;GAA6B,OAAO;GAClC,UAAA,oBAAC,qBAAD;IAAqB,OAAO;IAC1B,UAAA,oBAAC,4BAAD;KAA4B,OAAO;KACjC,UAAA,oBAAC,WAAD;MACE,GAAI;MACO;MACX,yBAAsB;MACtB,mBAAiB,aAAa,YAAY,KAAA;MAEzC;KACM,CAAA;IACiB,CAAA;GACT,CAAA;EACM,CAAA;CACL,CAAA;AAE9B;AAEA,SAAgB,oBAAoB,EAAE,WAAW,UAAU,GAAG,SAAmC;CAC/F,MAAM,EAAE,WAAW,oBAAoB,uBAAuB;CAC9D,MAAM,aAAa,YAAY,QAAQ,aAAa;CAIpD,gBAAgB;EACd,IAAI,CAAC,YACH;EAEF,OAAO,gBAAgB;CACzB,GAAG,CAAC,YAAY,eAAe,CAAC;CAEhC,IAAI,CAAC,YACH,OAAO;CAGT,OACE,oBAAC,MAAD;EAAM,GAAI;EAAO,IAAG;EAAK,IAAI;EAAsB;EAAW,iCAA8B;EACzF;CACG,CAAA;AAEV;AAEA,SAAgB,kBAAkB,EAAE,UAAU,GAAG,SAAiC;CAChF,MAAM,QAAQ,WAAW,2BAA2B;CAEpD,OACE,oBAAC,eAAD;EAAe,GAAI;EAAO,+BAA4B;EACnD,UAAA,MAAM,KAAK,SACV,oBAAC,wBAAD;GAAsC,OAAO;GAC1C;EACqB,GAFK,KAAK,EAEV,CACzB;CACY,CAAA;AAEnB;AAMA,SAAgB,qBAAqB,EAAE,WAAW,GAAG,SAAuC;CAC1F,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,kCAA+B;EAAG,eAAY;EAApF,UAAA;GACE,oBAAC,QAAD,EAAM,uCAAoC,GAAI,CAAA;GAC9C,oBAAC,QAAD,EAAM,uCAAoC,GAAI,CAAA;GAC9C,oBAAC,QAAD,EAAM,uCAAoC,GAAI,CAAA;EAC3C;;AAET;AAEA,iBAAiB,WAAW;AAM5B,MAAa,eAAe;CAC1B,MAAM;CACN,SAAS;CACT,OAAO;CACP,UAAU;AACZ"}

package/dist/matter/saved-cards/saved-cards.js

@@ -123,6 +123,7 @@ const SavedCardCvvFieldDefinition = defineComponent({
 	component: SavedCardCvvField,
 	requiresContext: "saved-card-data",
 	actions: { payment: ["sendPayments"] },
+	hardened: true,
 	editor: {
 		label: "Saved Card CVV Field",
 		category: "commerce"

package/dist/matter/saved-cards/saved-cards.js.map

@@ -1 +1 @@
-{"version":3,"file":"saved-cards.js","names":[],"sources":["../../../src/matter/saved-cards/saved-cards.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { Fieldset } from '../../particles/fieldset/fieldset.js';\nimport { RadioGroup, RadioIndicator, RadioRoot } from '../../particles/radio/radio.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { ListItemRefContext } from '../../sdk/data/list-item-ref-context.js';\nimport { PAYMENT_NETWORK_ERROR_CODE, type PaymentUserError } from '../../sdk/payment/operations.js';\nimport { isSecurityCodeComplete, SECURITY_CODE_MASK_STYLE } from '../../sdk/payment/security-code-mask.js';\nimport {\n  type PaymentPreflightCheck,\n  type PaymentSubmission,\n  useRegisterPaymentSubmission,\n} from '../../sdk/payment/submission-registry.js';\nimport { resolveAuthoredCopy } from '../../utils/resolve-authored-copy.js';\nimport { usePayment } from '../payment/payment.js';\n\n/**\n * Pick a saved card and enter only the CVV (specs/saved-cards.md, T12 of the Credit Card epic;\n * docs/features/credit-card/rfc.md § D7). Three components, split by data-fetch role rather than by\n * visual grouping (ADR-0012 Option B, per `SavedCard`'s own schema doc comment):\n *\n * - `SavedCards` — the list root. Owns the minimal `{ id, accountId, methodId }` selection needed to\n *   iterate and to dispatch selection; publishes each row's entity ref via `ListItemRefContext`,\n *   mirroring `CartList`.\n * - `SavedCardOption` — the per-row template. Independently subscribes to its own `SavedCard:<id>`\n *   cache entity through the shipped `reactive-list-item` runtime, mirroring `CartItemRoot`.\n * - `SavedCardCvvField` — the one PCI-bearing, action-dispatching leaf. Declares no `fetchStrategy` of\n *   its own; it reads its row through `SavedCardOption`'s plain context, mirroring `CartItemRemove`'s\n *   split from `CartItemRoot` (spec Decision 1).\n *\n * The submission continuation is the PCI-critical core (epic § \"The card-data submission channel\"):\n * `SavedCardCvvField` (via its internal `SavedCardCvvInput`) registers the `'saved-card'` continuation\n * on T5's submission registry, closing over the re-entered CVV and the account reference, and calls\n * `$actions.payment.sendPayments` itself. T13's `usePlaceOrder` resolves and invokes it; this module\n * never returns the CVV, only `userErrors`.\n *\n * Selecting a row dispatches `usePayment().selectMethod({ methodId, accountId, bin })` — the\n * `bin` is this row's own projected BIN, never `usePayment().draft.bin`. The epic's and the RFC's\n * own text says the saved-card continuation closes over \"the account id and BIN\", which conflates\n * two different calls: `paymentMethodSelect` (this dispatch) sends the saved card's own BIN alongside\n * `accountId` — a `bin` that does not match the saved card's own BIN is rejected with\n * `MISMATCHED_BIN_FOR_SAVED_CARD`, verified against\n * `apps/storefront-api-core/src/graphql/modules/checkout/index.ts`. The gateway send (inside\n * `SavedCardCvvInput`, below) legitimately carries both, because it is a different wire contract\n * (spec Decision 2 has the full correction).\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragments — raw template literals, matching the `payment.tsx` sibling: the codegen\n// `documents` glob does not scan `src/matter/saved-cards*`. Both fragments drill the identical\n// `payment.savedCards` path and merge at compile time (ADR-0011/ADR-0012); `data-component-contract.\n// test.ts` validates each against the real schema.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment SavedCardsListData on Query {\n    payment {\n      __typename\n      id\n      savedCards {\n        __typename\n        id\n        accountId\n        methodId\n        bin\n      }\n    }\n  }\n`;\n\nconst optionFragment = /* GraphQL */ `\n  fragment SavedCardOptionData on Query {\n    payment {\n      savedCards {\n        __typename\n        id\n        accountId\n        methodId\n        network\n        lastFourDigits\n        bin\n        label\n        expired\n        cvvRequired\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** The minimal per-row identifiers `SavedCards` needs to iterate and to dispatch selection. */\nexport type SavedCardsListEntry = Readonly<{\n  id: string;\n  accountId: string;\n  methodId: string;\n  bin: string;\n}>;\n\nexport type SavedCardsData = {\n  savedCards?: readonly SavedCardsListEntry[];\n} | null;\n\nexport type SavedCardsProps = ComponentPropsWithRef<'div'> & {\n  /** Unwrapped `payment` value from the reactive runtime (arity-1 fragment, ADR-0015); `null` until resolved. */\n  $data?: SavedCardsData;\n  /** The per-row template, typically one `SavedCardOption`, repeated once per saved card. */\n  children?: ReactNode;\n  /**\n   * The radio group's accessible name, rendered as a visible `Fieldset.Legend` (T38, Decision 1).\n   * Resolved through `resolveAuthoredCopy`: an authored empty or whitespace-only string falls back to\n   * the default rather than rendering a nameless group.\n   */\n  legend?: string;\n};\n\n/** The full per-row slice `SavedCardOption` independently resolves via `reactive-list-item`. */\nexport type SavedCardOptionSlice = Readonly<{\n  accountId: string;\n  methodId: string;\n  network: string;\n  lastFourDigits: string;\n  bin: string;\n  label: string | null;\n  expired: boolean;\n  cvvRequired: boolean;\n}>;\n\nexport type SavedCardOptionProps = ComponentPropsWithRef<'div'> & {\n  /** Per-row slice from the reactive-list-item runtime; injected/overridden by the wrapper, or passed directly in tests. */\n  $data?: SavedCardOptionSlice | null;\n  /** Typically a `SavedCardCvvField`. */\n  children?: ReactNode;\n};\n\nexport type SavedCardCvvFieldProps = ComponentPropsWithRef<'input'> & {\n  /** Compiler-injected action surface; carries `payment.sendPayments`. */\n  $actions?: ComponentActions;\n  /**\n   * Accessible name for the CVV input. No visible `<label>` renders (Accessibility Contract), so this\n   * is the input's only accessible name — authorable rather than a hardcoded English string.\n   */\n  securityCodeLabel?: string;\n  /**\n   * Helper copy rendered as a sibling `<p>` and linked to the input via `aria-describedby` (this\n   * component's root is the input itself, so there is no `Field.Root` to host a `Field.Description` —\n   * saved-cards.md Decision 3). An empty string renders nothing. Copy configuration only — never the\n   * security code itself.\n   */\n  securityCodeDescription?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Saved-card-data context — provided by SavedCardOption, read only by SavedCardCvvField. A plain\n// React context, not a data-fetch strategy: SavedCardCvvField has no fragment of its own (Decision 1).\n// ---------------------------------------------------------------------------\n\nconst SavedCardDataContext = createContext<SavedCardOptionSlice | null>(null);\n\nfunction useSavedCardData(): SavedCardOptionSlice {\n  const data = useContext(SavedCardDataContext);\n  if (!data) {\n    throw new Error('SavedCardCvvField must be used inside a <SavedCardOption> subtree.');\n  }\n  return data;\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const SavedCardsDefinition = defineComponent<SavedCardsProps>({\n  name: 'SavedCards',\n  importPath: '@vtex/faststore/components',\n  component: SavedCards,\n  fragment,\n  fetchStrategy: 'reactive',\n  requiresContext: 'payment',\n  providesContext: 'saved-card',\n  editor: { label: 'Saved Cards', category: 'commerce' },\n  schema: {\n    // T38: an inline literal, never an identifier — the native catalog builder extracts `schema`\n    // statically and silently drops an identifier-valued default (INV-8).\n    legend: { type: 'string', default: 'Saved cards', label: 'Legend' },\n  },\n  guideline:\n    'Radio list of the shopper\\'s saved cards (network, last four, label); expired cards render present but disabled, never selectable. Place a SavedCardOption inside as the per-card template, itself wrapping a SavedCardCvvField so the shopper can complete payment with a stored card — omitting the CVV field means a shopper can select a card but never pay with it. Picking a row dispatches the payment method selection by methodId and accountId only, never a card number or BIN, plus the inline selection error (role=\"alert\") if the server rejects it. \"Use a new card\" is CardEntry composed as a sibling, not a control inside this list. Renders one container div and no chrome of its own; always carries a loading/empty/ready state hook. Must be inside a PaymentSectionRoot or PaymentSectionController. See saved-cards.md.',\n});\n\nexport const SavedCardOptionDefinition = defineComponent<SavedCardOptionProps>({\n  name: 'SavedCardOption',\n  importPath: '@vtex/faststore/components',\n  component: SavedCardOption,\n  fragment: optionFragment,\n  fetchStrategy: 'reactive-list-item',\n  requiresContext: 'saved-card',\n  providesContext: 'saved-card-data',\n  editor: { label: 'Saved Card Option', category: 'commerce' },\n  schema: {},\n  guideline:\n    'One saved card as a radio row: network, masked last four, and its label when set; disabled when expired. Place a SavedCardCvvField inside so the CVV appears once this row is selected. Must be inside SavedCards.',\n});\n\nexport const SavedCardCvvFieldDefinition = defineComponent<SavedCardCvvFieldProps>({\n  name: 'SavedCardCvvField',\n  importPath: '@vtex/faststore/components',\n  component: SavedCardCvvField,\n  requiresContext: 'saved-card-data',\n  actions: { payment: ['sendPayments'] },\n  editor: { label: 'Saved Card CVV Field', category: 'commerce' },\n  schema: {\n    securityCodeLabel: { type: 'string', default: 'Security code', label: 'Security code label' },\n    // en-US, per requirement 12.27's own quoted copy (spec mask-the-security-code-field-and.md,\n    // OQ-1 Option B) — matches this component's existing en-US securityCodeLabel default.\n    securityCodeDescription: {\n      type: 'string',\n      default: 'The 3-4 digit number on your card',\n      label: 'Security code description',\n    },\n  },\n  guideline:\n    \"The CVV re-entry field for its saved card row; renders nothing until that row is selected and requires a CVV. Registers the direct-to-gateway submission for the saved-card path on selection — the CVV never transits our backend, only the gateway leg's userErrors return. Must be inside SavedCardOption.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\n/** Mirrors `PaymentMethodList`'s own state hook, so an empty or loading region stays swatch-targetable. */\nfunction savedCardsState({ loading, count }: { loading: boolean; count: number }): 'loading' | 'empty' | 'ready' {\n  if (loading) return 'loading';\n  if (count === 0) return 'empty';\n  return 'ready';\n}\n\n/**\n * The account a row should treat as \"the current selection.\" `selectedAccountId` is server state that\n * `selectNewCard()` never clears — only `draft.path` flips to `'new-card'` (`use-payment-method-\n * selection.ts`) — so reading `selectedAccountId` alone leaves the previously picked row wedged\n * checked, with its CVV field still mounted and registered, after the shopper picks \"use a new card\"\n * instead. Every read site in this module goes through this one function — the radio group's own\n * `value`, a row's `-selected` state, and the CVV field's visibility gate — so the three can never\n * drift out of sync with each other. Reads only `draft.path`, never `draft.bin`: that stays a fully\n * separate concern (Decision 2) that no call site in this module touches.\n */\nfunction resolveEffectiveSelectedAccountId(selectedAccountId: string | null, draftPath: string | null): string | null {\n  return draftPath === 'new-card' ? null : selectedAccountId;\n}\n\nexport function SavedCards({ $data: $dataProp, legend, className, children, ...props }: SavedCardsProps) {\n  const $data = useDataOverride($dataProp);\n  // `draft` here only for `.path`, to resolve the effective selection below — never `.bin`. The\n  // dispatch in handleValueChange still never reads `draft` at all; see its own comment.\n  const { selectedAccountId, selectMethod, selectionError, draft, placing, cardPaymentCollapsed } = usePayment();\n  const loading = $data == null;\n  const savedCards = $data?.savedCards ?? [];\n  const effectiveSelectedAccountId = resolveEffectiveSelectedAccountId(selectedAccountId, draft.path);\n\n  const handleValueChange = useCallback(\n    (accountId: string) => {\n      const card = savedCards.find((entry) => entry.accountId === accountId);\n      if (!card) return;\n      // methodId, accountId, and this row's own bin — from this list's own read model, never\n      // usePayment().draft.bin. draft.bin can be non-null on the saved-card path too (e.g.\n      // Installments calling setDraftBin for its own BIN-keyed lookup; use-payment-method-selection.ts\n      // does not clear it on this transition), but the bin sent here must be the saved card's own\n      // so paymentMethodSelect can persist a BIN-precise selection. A bin that does not match the\n      // saved card's own BIN is rejected with MISMATCHED_BIN_FOR_SAVED_CARD (spec Decision 2). The\n      // gateway send (SavedCardCvvInput, below) is the different call that legitimately carries both\n      // bin and accountId, reading bin from this row's own resolved slice, never the draft.\n      selectMethod({\n        methodId: card.methodId,\n        accountId: card.accountId,\n        ...(card.bin ? { bin: card.bin } : {}),\n      });\n    },\n    [savedCards, selectMethod],\n  );\n\n  // T191 (FR-7, Decision 3): nothing renders while the card payment is collapsed — the card option brings\n  // the list back. Returned after the last hook, so this instance stays mounted.\n  if (cardPaymentCollapsed) return null;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      inert={placing}\n      aria-disabled={placing || undefined}\n      data-fs-saved-cards=\"\"\n      data-fs-saved-cards-state={savedCardsState({ loading, count: savedCards.length })}\n      {...(placing ? { 'data-fs-saved-cards-placing': '' } : {})}\n    >\n      {selectionError ? (\n        <div role=\"alert\" data-fs-saved-cards-error=\"\">\n          {selectionError}\n        </div>\n      ) : null}\n      {savedCards.length > 0 ? (\n        // T38, Decision 1: Fieldset.Root + Fieldset.Legend, exactly what card-entry.tsx:1101-1112\n        // already ships — Base UI propagates the legend's id as aria-labelledby onto the descendant\n        // RadioGroup, so this one wrapper names both the fieldset and the radiogroup (measured).\n        <Fieldset.Root data-fs-saved-cards-fieldset=\"\">\n          <Fieldset.Legend>{resolveAuthoredCopy(legend, 'Saved cards')}</Fieldset.Legend>\n          <RadioGroup value={effectiveSelectedAccountId ?? ''} onValueChange={handleValueChange}>\n            {savedCards.map((card) => (\n              <ListItemRefContext\n                key={card.id}\n                // No fallback slice: this list's own fragment selects only { id, accountId, methodId }\n                // (Decision 3), so it has no complete row to fall back to. An incomplete cache slice\n                // should render nothing until it resolves, not a partial, silently-wrong row.\n                value={{ __typename: 'SavedCard', id: card.id, fallbackData: undefined }}\n              >\n                {children}\n              </ListItemRefContext>\n            ))}\n          </RadioGroup>\n        </Fieldset.Root>\n      ) : null}\n    </div>\n  );\n}\n\nexport function SavedCardOption({ $data: $dataProp, className, children, ...props }: SavedCardOptionProps) {\n  // Delivery-agnostic: the slice arrives through the DataOverrideContext seam the reactive-list-item\n  // wrapper publishes (or via $data in tests); this component calls no data hook of its own.\n  const slice = useDataOverride<SavedCardOptionSlice | null | undefined>($dataProp) ?? null;\n  const { selectedAccountId, draft } = usePayment();\n\n  if (!slice) return null;\n\n  // Path-aware, not just account-aware — see resolveEffectiveSelectedAccountId's own comment: without\n  // this, a row that was picked before \"use a new card\" stays marked selected forever.\n  const isSelected = slice.accountId === resolveEffectiveSelectedAccountId(selectedAccountId, draft.path);\n\n  return (\n    <SavedCardDataContext value={slice}>\n      <div\n        {...props}\n        className={className}\n        data-fs-saved-card-option=\"\"\n        {...(isSelected ? { 'data-fs-saved-card-option-selected': '' } : {})}\n        {...(slice.expired ? { 'data-fs-saved-card-option-expired': '' } : {})}\n      >\n        <RadioRoot value={slice.accountId} disabled={slice.expired}>\n          <RadioIndicator data-fs-saved-card-option-indicator=\"\" />\n          <span data-fs-saved-card-option-network=\"\">{slice.network}</span>\n          <span data-fs-saved-card-option-last-four=\"\">{`•••• ${slice.lastFourDigits}`}</span>\n          {slice.label ? <span data-fs-saved-card-option-label=\"\">{slice.label}</span> : null}\n        </RadioRoot>\n        {children}\n      </div>\n    </SavedCardDataContext>\n  );\n}\n\nconst MISSING_ACTION_ERROR: PaymentUserError = {\n  code: PAYMENT_NETWORK_ERROR_CODE,\n  message: 'Unable to complete the request. Please try again.',\n};\n\n/**\n * The saved-card path's own client-synthesized refusal (T27, specs/place-order-preflight-card-\n * validation.md FR-11/FR-12; Decision 8). Distinct from `card-entry`'s `INVALID_CARD_DATA` (a\n * different path, a different set of fields, and importing it here would be a matter → matter\n * dependency) and from the gateway's own codes.\n *\n * Never name this constant, or its string value, inside `sdk/payment/use-place-order.ts`: it contains\n * `security` and would fail `CARD_FIELD_PATTERN`. The pre-flight only ever handles the opaque\n * `PaymentUserError` (spec NFR-1, Risk R9).\n */\nexport const SAVED_CARD_INVALID_SECURITY_CODE = 'INVALID_SECURITY_CODE';\n\nconst INVALID_SECURITY_CODE_ERROR: PaymentUserError = {\n  code: SAVED_CARD_INVALID_SECURITY_CODE,\n  message: 'Enter a valid security code before placing the order.',\n};\n\n/** VTEX's own CVV upper bound across the networks this codebase's masks cover (Decision 4). */\nconst CVV_MAX_LENGTH = 4;\n\nfunction sanitizeCvv(value: string): string {\n  return value.replace(/\\D/g, '').slice(0, CVV_MAX_LENGTH);\n}\n\n/**\n * Three or four digits (T27, FR-11). `sanitizeCvv` already strips non-digits and caps at\n * `CVV_MAX_LENGTH`, so the only rule left is the floor — and three-or-four is `card-entry`'s own\n * fallback for a method that declares no `cvvRegex` (its `isValidCvv`, `/^\\d{3,4}$/`). Requiredness is\n * not checked here: `SavedCardCvvInput` renders only when the row is selected and `cvvRequired` is\n * true, so its presence *is* the requiredness signal.\n */\nconst SAVED_CARD_CVV_PATTERN = /^\\d{3,4}$/;\n\n/**\n * The length at which this field's security code counts as fully typed, and the mask engages (T173,\n * specs/mask-the-cvv-only-once-it.md, FR-3). Three — the floor of `SAVED_CARD_CVV_PATTERN` above,\n * for the same reason that pattern accepts either length: a saved card carries no per-network CVV\n * length. Its slice exposes a display `network` string, not a `cvvMask`, so nothing here tells a\n * 3-digit network apart from Amex's 4 the way `CardEntry` can, and inferring one from the display\n * name would hardcode a network table this package deliberately does not own.\n *\n * Masking at the floor is the side to err on: a complete code is never left legible on either kind\n * of card, and a 4-digit code is simply already masked when its last digit arrives.\n */\nconst SAVED_CARD_CVV_COMPLETE_LENGTH = 3;\n\ntype SavedCardCvvInputProps = ComponentPropsWithRef<'input'> & {\n  /** `SavedCard.accountId` from this row's own resolved slice — never `usePayment().draft`. */\n  accountId: string;\n  /**\n   * `SavedCard.bin` from this row's own resolved slice — the one this row is actually being paid\n   * with. Deliberately **not** `usePayment().draft.bin`: that field can be populated on the\n   * saved-card path too (e.g. Installments calling `setDraftBin` for its own BIN-keyed lookup;\n   * `use-payment-method-selection.ts` does not clear it on this transition), so it can carry a\n   * different card's BIN, or a stale one, at the moment this continuation runs. Forwarding it here\n   * instead of the row's own field would be the same class of bug Decision 2 already closed for the\n   * `selectMethod` dispatch — undetectable by type-checking, since both are plain `string`.\n   */\n  bin: string;\n  /** Accessible name applied verbatim as `aria-label` — see `SavedCardCvvFieldProps`'s own doc comment. */\n  securityCodeLabel: string;\n  /** Helper copy rendered as a sibling `<p>` — see `SavedCardCvvFieldProps`'s own doc comment. Threaded\n   * through exactly like `securityCodeLabel`. An empty string renders nothing. */\n  securityCodeDescription: string;\n  $actions?: ComponentActions;\n};\n\n/** Merges a caller-forwarded `aria-describedby` (from `...props`) with the description `<p>`'s own\n * id, rather than clobbering it — the accessibility wiring `Field.Root` would otherwise provide for\n * free (saved-cards.md Decision 3). */\nfunction mergeDescribedBy(existing: string | undefined, id: string): string {\n  return existing ? `${existing} ${id}` : id;\n}\n\n/**\n * The stateful, registering half of the CVV field — split out from `SavedCardCvvField` so this row's\n * conditional visibility never skips a hook call (spec Decision 5). This component mounts wholesale\n * when its row is selected and requires a CVV, and unmounts wholesale otherwise, so its own hooks\n * always run the same number of times across its own lifetime; only its *presence* is conditional,\n * decided by its caller.\n */\nfunction SavedCardCvvInput({\n  accountId,\n  bin,\n  securityCodeLabel,\n  securityCodeDescription,\n  $actions,\n  ref: forwardedRef,\n  ...props\n}: SavedCardCvvInputProps) {\n  const [cvv, setCvv] = useState('');\n  const inputRef = useRef<HTMLInputElement>(null);\n  const sendPayments = $actions?.payment?.sendPayments;\n  const descriptionId = useId();\n\n  // Attaches both this component's own ref (needed to focus the field on refusal, in checkCvv below)\n  // and whatever ref a caller already forwarded onto SavedCardCvvField/SavedCardCvvInput — `props`\n  // spreads onto the element below and `SavedCardCvvInputProps` is `ComponentPropsWithRef<'input'>`, so\n  // writing `ref={inputRef}` after the spread would silently drop a caller-forwarded ref instead.\n  const setInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n\n      if (typeof forwardedRef !== 'function') {\n        if (forwardedRef) forwardedRef.current = node;\n        return;\n      }\n\n      // React 19: a ref callback may itself return a cleanup function instead of being re-invoked\n      // with `null` on detach. Preserve whichever form the caller used — never call a React-19\n      // cleanup-style ref with `null`, a value that form is documented never to receive (fix pass,\n      // review F2). A caller using the legacy form (no returned cleanup) keeps today's behaviour:\n      // this callback returns nothing either, so React re-invokes it with `null` on detach, which\n      // falls into this same branch and calls `forwardedRef(null)`, exactly as before.\n      const cleanup = forwardedRef(node);\n      if (typeof cleanup === 'function') {\n        return () => {\n          inputRef.current = null;\n          cleanup();\n        };\n      }\n      return;\n    },\n    [forwardedRef],\n  );\n\n  // The saved-card check (T27, FR-11/FR-12; Decision 8). Three-or-four digits — see\n  // SAVED_CARD_CVV_PATTERN's own doc comment for why nothing narrower is checkable and nothing wider\n  // is safe. The only field on this path, so there is no ordering rule and no inline error node to\n  // fill (FR-12) — the message reaches the shopper through PlaceOrder's existing role=\"alert\".\n  const checkCvv = useCallback<PaymentPreflightCheck>(() => {\n    if (SAVED_CARD_CVV_PATTERN.test(cvv)) return [];\n    inputRef.current?.focus();\n    return [INVALID_SECURITY_CODE_ERROR];\n  }, [cvv]);\n\n  const submit = useCallback<PaymentSubmission>(\n    async (transaction) => {\n      // Same function the pre-flight calls (FR-3, applied to this path) — the two moments cannot\n      // diverge here either.\n      const refusals = checkCvv();\n      if (refusals.length > 0) return refusals;\n      if (!sendPayments) return [MISSING_ACTION_ERROR];\n      // `bin` here is always the `accountId`/`bin` pair from this row's own props — see their doc\n      // comments above for why `usePayment().draft.bin` must never substitute for either.\n      return sendPayments({ transaction, card: { kind: 'saved', accountId, bin, securityCode: cvv } });\n    },\n    [checkCvv, sendPayments, accountId, bin, cvv],\n  );\n\n  useRegisterPaymentSubmission('saved-card', submit, checkCvv);\n\n  // Merges with a caller-forwarded aria-describedby rather than clobbering it — mirrors the ref\n  // merge above (setInputRef) for the same \"don't drop what a caller already passed\" reason.\n  const ariaDescribedBy = securityCodeDescription\n    ? mergeDescribedBy(props['aria-describedby'], descriptionId)\n    : props['aria-describedby'];\n\n  // T101 — the mask merges *over* a caller-forwarded style, inverted from this repo's usual\n  // `...props.style`-last idiom (cart-item.tsx, product-list.tsx): deliberately, so a caller can\n  // never remove the security-code mask. See security-code-mask.ts.\n  //\n  // T173 — that merge now happens from the keystroke that completes the code, not from the first\n  // one, so a shopper can read back what they typed while they type it. Below the trigger the\n  // caller's own style passes through untouched, which is the same thing it did before this field\n  // ever had a mask; the guarantee above is about what a caller cannot do once the code is complete.\n  const inputStyle = isSecurityCodeComplete(cvv, SAVED_CARD_CVV_COMPLETE_LENGTH)\n    ? { ...props.style, ...SECURITY_CODE_MASK_STYLE }\n    : props.style;\n\n  return (\n    <>\n      <input\n        {...props}\n        ref={setInputRef}\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        aria-label={securityCodeLabel}\n        aria-describedby={ariaDescribedBy}\n        value={cvv}\n        onChange={(event) => setCvv(sanitizeCvv(event.target.value))}\n        data-fs-saved-card-cvv-field=\"\"\n        style={inputStyle}\n      />\n      {securityCodeDescription ? (\n        <p id={descriptionId} data-fs-saved-card-cvv-description=\"\">\n          {securityCodeDescription}\n        </p>\n      ) : null}\n    </>\n  );\n}\n\nexport function SavedCardCvvField({\n  $actions: $actionsProp,\n  securityCodeLabel = 'Security code',\n  securityCodeDescription = 'The 3-4 digit number on your card',\n  className,\n  ...props\n}: SavedCardCvvFieldProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { accountId, bin, cvvRequired } = useSavedCardData();\n  const { selectedAccountId, draft } = usePayment();\n\n  // Path-aware, matching SavedCardOption's own isSelected — otherwise this field stays mounted and\n  // registered after \"use a new card\", with selectedAccountId still equal to this row's own accountId.\n  if (accountId !== resolveEffectiveSelectedAccountId(selectedAccountId, draft.path) || !cvvRequired) {\n    return null;\n  }\n\n  return (\n    <SavedCardCvvInput\n      {...props}\n      className={className}\n      accountId={accountId}\n      bin={bin}\n      securityCodeLabel={securityCodeLabel}\n      securityCodeDescription={securityCodeDescription}\n      $actions={$actions}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"saved-cards.js","names":[],"sources":["../../../src/matter/saved-cards/saved-cards.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { Fieldset } from '../../particles/fieldset/fieldset.js';\nimport { RadioGroup, RadioIndicator, RadioRoot } from '../../particles/radio/radio.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { ListItemRefContext } from '../../sdk/data/list-item-ref-context.js';\nimport { PAYMENT_NETWORK_ERROR_CODE, type PaymentUserError } from '../../sdk/payment/operations.js';\nimport { isSecurityCodeComplete, SECURITY_CODE_MASK_STYLE } from '../../sdk/payment/security-code-mask.js';\nimport {\n  type PaymentPreflightCheck,\n  type PaymentSubmission,\n  useRegisterPaymentSubmission,\n} from '../../sdk/payment/submission-registry.js';\nimport { resolveAuthoredCopy } from '../../utils/resolve-authored-copy.js';\nimport { usePayment } from '../payment/payment.js';\n\n/**\n * Pick a saved card and enter only the CVV (specs/saved-cards.md, T12 of the Credit Card epic;\n * docs/features/credit-card/rfc.md § D7). Three components, split by data-fetch role rather than by\n * visual grouping (ADR-0012 Option B, per `SavedCard`'s own schema doc comment):\n *\n * - `SavedCards` — the list root. Owns the minimal `{ id, accountId, methodId }` selection needed to\n *   iterate and to dispatch selection; publishes each row's entity ref via `ListItemRefContext`,\n *   mirroring `CartList`.\n * - `SavedCardOption` — the per-row template. Independently subscribes to its own `SavedCard:<id>`\n *   cache entity through the shipped `reactive-list-item` runtime, mirroring `CartItemRoot`.\n * - `SavedCardCvvField` — the one PCI-bearing, action-dispatching leaf. Declares no `fetchStrategy` of\n *   its own; it reads its row through `SavedCardOption`'s plain context, mirroring `CartItemRemove`'s\n *   split from `CartItemRoot` (spec Decision 1).\n *\n * The submission continuation is the PCI-critical core (epic § \"The card-data submission channel\"):\n * `SavedCardCvvField` (via its internal `SavedCardCvvInput`) registers the `'saved-card'` continuation\n * on T5's submission registry, closing over the re-entered CVV and the account reference, and calls\n * `$actions.payment.sendPayments` itself. T13's `usePlaceOrder` resolves and invokes it; this module\n * never returns the CVV, only `userErrors`.\n *\n * Selecting a row dispatches `usePayment().selectMethod({ methodId, accountId, bin })` — the\n * `bin` is this row's own projected BIN, never `usePayment().draft.bin`. The epic's and the RFC's\n * own text says the saved-card continuation closes over \"the account id and BIN\", which conflates\n * two different calls: `paymentMethodSelect` (this dispatch) sends the saved card's own BIN alongside\n * `accountId` — a `bin` that does not match the saved card's own BIN is rejected with\n * `MISMATCHED_BIN_FOR_SAVED_CARD`, verified against\n * `apps/storefront-api-core/src/graphql/modules/checkout/index.ts`. The gateway send (inside\n * `SavedCardCvvInput`, below) legitimately carries both, because it is a different wire contract\n * (spec Decision 2 has the full correction).\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragments — raw template literals, matching the `payment.tsx` sibling: the codegen\n// `documents` glob does not scan `src/matter/saved-cards*`. Both fragments drill the identical\n// `payment.savedCards` path and merge at compile time (ADR-0011/ADR-0012); `data-component-contract.\n// test.ts` validates each against the real schema.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment SavedCardsListData on Query {\n    payment {\n      __typename\n      id\n      savedCards {\n        __typename\n        id\n        accountId\n        methodId\n        bin\n      }\n    }\n  }\n`;\n\nconst optionFragment = /* GraphQL */ `\n  fragment SavedCardOptionData on Query {\n    payment {\n      savedCards {\n        __typename\n        id\n        accountId\n        methodId\n        network\n        lastFourDigits\n        bin\n        label\n        expired\n        cvvRequired\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** The minimal per-row identifiers `SavedCards` needs to iterate and to dispatch selection. */\nexport type SavedCardsListEntry = Readonly<{\n  id: string;\n  accountId: string;\n  methodId: string;\n  bin: string;\n}>;\n\nexport type SavedCardsData = {\n  savedCards?: readonly SavedCardsListEntry[];\n} | null;\n\nexport type SavedCardsProps = ComponentPropsWithRef<'div'> & {\n  /** Unwrapped `payment` value from the reactive runtime (arity-1 fragment, ADR-0015); `null` until resolved. */\n  $data?: SavedCardsData;\n  /** The per-row template, typically one `SavedCardOption`, repeated once per saved card. */\n  children?: ReactNode;\n  /**\n   * The radio group's accessible name, rendered as a visible `Fieldset.Legend` (T38, Decision 1).\n   * Resolved through `resolveAuthoredCopy`: an authored empty or whitespace-only string falls back to\n   * the default rather than rendering a nameless group.\n   */\n  legend?: string;\n};\n\n/** The full per-row slice `SavedCardOption` independently resolves via `reactive-list-item`. */\nexport type SavedCardOptionSlice = Readonly<{\n  accountId: string;\n  methodId: string;\n  network: string;\n  lastFourDigits: string;\n  bin: string;\n  label: string | null;\n  expired: boolean;\n  cvvRequired: boolean;\n}>;\n\nexport type SavedCardOptionProps = ComponentPropsWithRef<'div'> & {\n  /** Per-row slice from the reactive-list-item runtime; injected/overridden by the wrapper, or passed directly in tests. */\n  $data?: SavedCardOptionSlice | null;\n  /** Typically a `SavedCardCvvField`. */\n  children?: ReactNode;\n};\n\nexport type SavedCardCvvFieldProps = ComponentPropsWithRef<'input'> & {\n  /** Compiler-injected action surface; carries `payment.sendPayments`. */\n  $actions?: ComponentActions;\n  /**\n   * Accessible name for the CVV input. No visible `<label>` renders (Accessibility Contract), so this\n   * is the input's only accessible name — authorable rather than a hardcoded English string.\n   */\n  securityCodeLabel?: string;\n  /**\n   * Helper copy rendered as a sibling `<p>` and linked to the input via `aria-describedby` (this\n   * component's root is the input itself, so there is no `Field.Root` to host a `Field.Description` —\n   * saved-cards.md Decision 3). An empty string renders nothing. Copy configuration only — never the\n   * security code itself.\n   */\n  securityCodeDescription?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Saved-card-data context — provided by SavedCardOption, read only by SavedCardCvvField. A plain\n// React context, not a data-fetch strategy: SavedCardCvvField has no fragment of its own (Decision 1).\n// ---------------------------------------------------------------------------\n\nconst SavedCardDataContext = createContext<SavedCardOptionSlice | null>(null);\n\nfunction useSavedCardData(): SavedCardOptionSlice {\n  const data = useContext(SavedCardDataContext);\n  if (!data) {\n    throw new Error('SavedCardCvvField must be used inside a <SavedCardOption> subtree.');\n  }\n  return data;\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const SavedCardsDefinition = defineComponent<SavedCardsProps>({\n  name: 'SavedCards',\n  importPath: '@vtex/faststore/components',\n  component: SavedCards,\n  fragment,\n  fetchStrategy: 'reactive',\n  requiresContext: 'payment',\n  providesContext: 'saved-card',\n  editor: { label: 'Saved Cards', category: 'commerce' },\n  schema: {\n    // T38: an inline literal, never an identifier — the native catalog builder extracts `schema`\n    // statically and silently drops an identifier-valued default (INV-8).\n    legend: { type: 'string', default: 'Saved cards', label: 'Legend' },\n  },\n  guideline:\n    'Radio list of the shopper\\'s saved cards (network, last four, label); expired cards render present but disabled, never selectable. Place a SavedCardOption inside as the per-card template, itself wrapping a SavedCardCvvField so the shopper can complete payment with a stored card — omitting the CVV field means a shopper can select a card but never pay with it. Picking a row dispatches the payment method selection by methodId and accountId only, never a card number or BIN, plus the inline selection error (role=\"alert\") if the server rejects it. \"Use a new card\" is CardEntry composed as a sibling, not a control inside this list. Renders one container div and no chrome of its own; always carries a loading/empty/ready state hook. Must be inside a PaymentSectionRoot or PaymentSectionController. See saved-cards.md.',\n});\n\nexport const SavedCardOptionDefinition = defineComponent<SavedCardOptionProps>({\n  name: 'SavedCardOption',\n  importPath: '@vtex/faststore/components',\n  component: SavedCardOption,\n  fragment: optionFragment,\n  fetchStrategy: 'reactive-list-item',\n  requiresContext: 'saved-card',\n  providesContext: 'saved-card-data',\n  editor: { label: 'Saved Card Option', category: 'commerce' },\n  schema: {},\n  guideline:\n    'One saved card as a radio row: network, masked last four, and its label when set; disabled when expired. Place a SavedCardCvvField inside so the CVV appears once this row is selected. Must be inside SavedCards.',\n});\n\nexport const SavedCardCvvFieldDefinition = defineComponent<SavedCardCvvFieldProps>({\n  name: 'SavedCardCvvField',\n  importPath: '@vtex/faststore/components',\n  component: SavedCardCvvField,\n  requiresContext: 'saved-card-data',\n  actions: { payment: ['sendPayments'] },\n  hardened: true,\n  editor: { label: 'Saved Card CVV Field', category: 'commerce' },\n  schema: {\n    securityCodeLabel: { type: 'string', default: 'Security code', label: 'Security code label' },\n    // en-US, per requirement 12.27's own quoted copy (spec mask-the-security-code-field-and.md,\n    // OQ-1 Option B) — matches this component's existing en-US securityCodeLabel default.\n    securityCodeDescription: {\n      type: 'string',\n      default: 'The 3-4 digit number on your card',\n      label: 'Security code description',\n    },\n  },\n  guideline:\n    \"The CVV re-entry field for its saved card row; renders nothing until that row is selected and requires a CVV. Registers the direct-to-gateway submission for the saved-card path on selection — the CVV never transits our backend, only the gateway leg's userErrors return. Must be inside SavedCardOption.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\n/** Mirrors `PaymentMethodList`'s own state hook, so an empty or loading region stays swatch-targetable. */\nfunction savedCardsState({ loading, count }: { loading: boolean; count: number }): 'loading' | 'empty' | 'ready' {\n  if (loading) return 'loading';\n  if (count === 0) return 'empty';\n  return 'ready';\n}\n\n/**\n * The account a row should treat as \"the current selection.\" `selectedAccountId` is server state that\n * `selectNewCard()` never clears — only `draft.path` flips to `'new-card'` (`use-payment-method-\n * selection.ts`) — so reading `selectedAccountId` alone leaves the previously picked row wedged\n * checked, with its CVV field still mounted and registered, after the shopper picks \"use a new card\"\n * instead. Every read site in this module goes through this one function — the radio group's own\n * `value`, a row's `-selected` state, and the CVV field's visibility gate — so the three can never\n * drift out of sync with each other. Reads only `draft.path`, never `draft.bin`: that stays a fully\n * separate concern (Decision 2) that no call site in this module touches.\n */\nfunction resolveEffectiveSelectedAccountId(selectedAccountId: string | null, draftPath: string | null): string | null {\n  return draftPath === 'new-card' ? null : selectedAccountId;\n}\n\nexport function SavedCards({ $data: $dataProp, legend, className, children, ...props }: SavedCardsProps) {\n  const $data = useDataOverride($dataProp);\n  // `draft` here only for `.path`, to resolve the effective selection below — never `.bin`. The\n  // dispatch in handleValueChange still never reads `draft` at all; see its own comment.\n  const { selectedAccountId, selectMethod, selectionError, draft, placing, cardPaymentCollapsed } = usePayment();\n  const loading = $data == null;\n  const savedCards = $data?.savedCards ?? [];\n  const effectiveSelectedAccountId = resolveEffectiveSelectedAccountId(selectedAccountId, draft.path);\n\n  const handleValueChange = useCallback(\n    (accountId: string) => {\n      const card = savedCards.find((entry) => entry.accountId === accountId);\n      if (!card) return;\n      // methodId, accountId, and this row's own bin — from this list's own read model, never\n      // usePayment().draft.bin. draft.bin can be non-null on the saved-card path too (e.g.\n      // Installments calling setDraftBin for its own BIN-keyed lookup; use-payment-method-selection.ts\n      // does not clear it on this transition), but the bin sent here must be the saved card's own\n      // so paymentMethodSelect can persist a BIN-precise selection. A bin that does not match the\n      // saved card's own BIN is rejected with MISMATCHED_BIN_FOR_SAVED_CARD (spec Decision 2). The\n      // gateway send (SavedCardCvvInput, below) is the different call that legitimately carries both\n      // bin and accountId, reading bin from this row's own resolved slice, never the draft.\n      selectMethod({\n        methodId: card.methodId,\n        accountId: card.accountId,\n        ...(card.bin ? { bin: card.bin } : {}),\n      });\n    },\n    [savedCards, selectMethod],\n  );\n\n  // T191 (FR-7, Decision 3): nothing renders while the card payment is collapsed — the card option brings\n  // the list back. Returned after the last hook, so this instance stays mounted.\n  if (cardPaymentCollapsed) return null;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      inert={placing}\n      aria-disabled={placing || undefined}\n      data-fs-saved-cards=\"\"\n      data-fs-saved-cards-state={savedCardsState({ loading, count: savedCards.length })}\n      {...(placing ? { 'data-fs-saved-cards-placing': '' } : {})}\n    >\n      {selectionError ? (\n        <div role=\"alert\" data-fs-saved-cards-error=\"\">\n          {selectionError}\n        </div>\n      ) : null}\n      {savedCards.length > 0 ? (\n        // T38, Decision 1: Fieldset.Root + Fieldset.Legend, exactly what card-entry.tsx:1101-1112\n        // already ships — Base UI propagates the legend's id as aria-labelledby onto the descendant\n        // RadioGroup, so this one wrapper names both the fieldset and the radiogroup (measured).\n        <Fieldset.Root data-fs-saved-cards-fieldset=\"\">\n          <Fieldset.Legend>{resolveAuthoredCopy(legend, 'Saved cards')}</Fieldset.Legend>\n          <RadioGroup value={effectiveSelectedAccountId ?? ''} onValueChange={handleValueChange}>\n            {savedCards.map((card) => (\n              <ListItemRefContext\n                key={card.id}\n                // No fallback slice: this list's own fragment selects only { id, accountId, methodId }\n                // (Decision 3), so it has no complete row to fall back to. An incomplete cache slice\n                // should render nothing until it resolves, not a partial, silently-wrong row.\n                value={{ __typename: 'SavedCard', id: card.id, fallbackData: undefined }}\n              >\n                {children}\n              </ListItemRefContext>\n            ))}\n          </RadioGroup>\n        </Fieldset.Root>\n      ) : null}\n    </div>\n  );\n}\n\nexport function SavedCardOption({ $data: $dataProp, className, children, ...props }: SavedCardOptionProps) {\n  // Delivery-agnostic: the slice arrives through the DataOverrideContext seam the reactive-list-item\n  // wrapper publishes (or via $data in tests); this component calls no data hook of its own.\n  const slice = useDataOverride<SavedCardOptionSlice | null | undefined>($dataProp) ?? null;\n  const { selectedAccountId, draft } = usePayment();\n\n  if (!slice) return null;\n\n  // Path-aware, not just account-aware — see resolveEffectiveSelectedAccountId's own comment: without\n  // this, a row that was picked before \"use a new card\" stays marked selected forever.\n  const isSelected = slice.accountId === resolveEffectiveSelectedAccountId(selectedAccountId, draft.path);\n\n  return (\n    <SavedCardDataContext value={slice}>\n      <div\n        {...props}\n        className={className}\n        data-fs-saved-card-option=\"\"\n        {...(isSelected ? { 'data-fs-saved-card-option-selected': '' } : {})}\n        {...(slice.expired ? { 'data-fs-saved-card-option-expired': '' } : {})}\n      >\n        <RadioRoot value={slice.accountId} disabled={slice.expired}>\n          <RadioIndicator data-fs-saved-card-option-indicator=\"\" />\n          <span data-fs-saved-card-option-network=\"\">{slice.network}</span>\n          <span data-fs-saved-card-option-last-four=\"\">{`•••• ${slice.lastFourDigits}`}</span>\n          {slice.label ? <span data-fs-saved-card-option-label=\"\">{slice.label}</span> : null}\n        </RadioRoot>\n        {children}\n      </div>\n    </SavedCardDataContext>\n  );\n}\n\nconst MISSING_ACTION_ERROR: PaymentUserError = {\n  code: PAYMENT_NETWORK_ERROR_CODE,\n  message: 'Unable to complete the request. Please try again.',\n};\n\n/**\n * The saved-card path's own client-synthesized refusal (T27, specs/place-order-preflight-card-\n * validation.md FR-11/FR-12; Decision 8). Distinct from `card-entry`'s `INVALID_CARD_DATA` (a\n * different path, a different set of fields, and importing it here would be a matter → matter\n * dependency) and from the gateway's own codes.\n *\n * Never name this constant, or its string value, inside `sdk/payment/use-place-order.ts`: it contains\n * `security` and would fail `CARD_FIELD_PATTERN`. The pre-flight only ever handles the opaque\n * `PaymentUserError` (spec NFR-1, Risk R9).\n */\nexport const SAVED_CARD_INVALID_SECURITY_CODE = 'INVALID_SECURITY_CODE';\n\nconst INVALID_SECURITY_CODE_ERROR: PaymentUserError = {\n  code: SAVED_CARD_INVALID_SECURITY_CODE,\n  message: 'Enter a valid security code before placing the order.',\n};\n\n/** VTEX's own CVV upper bound across the networks this codebase's masks cover (Decision 4). */\nconst CVV_MAX_LENGTH = 4;\n\nfunction sanitizeCvv(value: string): string {\n  return value.replace(/\\D/g, '').slice(0, CVV_MAX_LENGTH);\n}\n\n/**\n * Three or four digits (T27, FR-11). `sanitizeCvv` already strips non-digits and caps at\n * `CVV_MAX_LENGTH`, so the only rule left is the floor — and three-or-four is `card-entry`'s own\n * fallback for a method that declares no `cvvRegex` (its `isValidCvv`, `/^\\d{3,4}$/`). Requiredness is\n * not checked here: `SavedCardCvvInput` renders only when the row is selected and `cvvRequired` is\n * true, so its presence *is* the requiredness signal.\n */\nconst SAVED_CARD_CVV_PATTERN = /^\\d{3,4}$/;\n\n/**\n * The length at which this field's security code counts as fully typed, and the mask engages (T173,\n * specs/mask-the-cvv-only-once-it.md, FR-3). Three — the floor of `SAVED_CARD_CVV_PATTERN` above,\n * for the same reason that pattern accepts either length: a saved card carries no per-network CVV\n * length. Its slice exposes a display `network` string, not a `cvvMask`, so nothing here tells a\n * 3-digit network apart from Amex's 4 the way `CardEntry` can, and inferring one from the display\n * name would hardcode a network table this package deliberately does not own.\n *\n * Masking at the floor is the side to err on: a complete code is never left legible on either kind\n * of card, and a 4-digit code is simply already masked when its last digit arrives.\n */\nconst SAVED_CARD_CVV_COMPLETE_LENGTH = 3;\n\ntype SavedCardCvvInputProps = ComponentPropsWithRef<'input'> & {\n  /** `SavedCard.accountId` from this row's own resolved slice — never `usePayment().draft`. */\n  accountId: string;\n  /**\n   * `SavedCard.bin` from this row's own resolved slice — the one this row is actually being paid\n   * with. Deliberately **not** `usePayment().draft.bin`: that field can be populated on the\n   * saved-card path too (e.g. Installments calling `setDraftBin` for its own BIN-keyed lookup;\n   * `use-payment-method-selection.ts` does not clear it on this transition), so it can carry a\n   * different card's BIN, or a stale one, at the moment this continuation runs. Forwarding it here\n   * instead of the row's own field would be the same class of bug Decision 2 already closed for the\n   * `selectMethod` dispatch — undetectable by type-checking, since both are plain `string`.\n   */\n  bin: string;\n  /** Accessible name applied verbatim as `aria-label` — see `SavedCardCvvFieldProps`'s own doc comment. */\n  securityCodeLabel: string;\n  /** Helper copy rendered as a sibling `<p>` — see `SavedCardCvvFieldProps`'s own doc comment. Threaded\n   * through exactly like `securityCodeLabel`. An empty string renders nothing. */\n  securityCodeDescription: string;\n  $actions?: ComponentActions;\n};\n\n/** Merges a caller-forwarded `aria-describedby` (from `...props`) with the description `<p>`'s own\n * id, rather than clobbering it — the accessibility wiring `Field.Root` would otherwise provide for\n * free (saved-cards.md Decision 3). */\nfunction mergeDescribedBy(existing: string | undefined, id: string): string {\n  return existing ? `${existing} ${id}` : id;\n}\n\n/**\n * The stateful, registering half of the CVV field — split out from `SavedCardCvvField` so this row's\n * conditional visibility never skips a hook call (spec Decision 5). This component mounts wholesale\n * when its row is selected and requires a CVV, and unmounts wholesale otherwise, so its own hooks\n * always run the same number of times across its own lifetime; only its *presence* is conditional,\n * decided by its caller.\n */\nfunction SavedCardCvvInput({\n  accountId,\n  bin,\n  securityCodeLabel,\n  securityCodeDescription,\n  $actions,\n  ref: forwardedRef,\n  ...props\n}: SavedCardCvvInputProps) {\n  const [cvv, setCvv] = useState('');\n  const inputRef = useRef<HTMLInputElement>(null);\n  const sendPayments = $actions?.payment?.sendPayments;\n  const descriptionId = useId();\n\n  // Attaches both this component's own ref (needed to focus the field on refusal, in checkCvv below)\n  // and whatever ref a caller already forwarded onto SavedCardCvvField/SavedCardCvvInput — `props`\n  // spreads onto the element below and `SavedCardCvvInputProps` is `ComponentPropsWithRef<'input'>`, so\n  // writing `ref={inputRef}` after the spread would silently drop a caller-forwarded ref instead.\n  const setInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n\n      if (typeof forwardedRef !== 'function') {\n        if (forwardedRef) forwardedRef.current = node;\n        return;\n      }\n\n      // React 19: a ref callback may itself return a cleanup function instead of being re-invoked\n      // with `null` on detach. Preserve whichever form the caller used — never call a React-19\n      // cleanup-style ref with `null`, a value that form is documented never to receive (fix pass,\n      // review F2). A caller using the legacy form (no returned cleanup) keeps today's behaviour:\n      // this callback returns nothing either, so React re-invokes it with `null` on detach, which\n      // falls into this same branch and calls `forwardedRef(null)`, exactly as before.\n      const cleanup = forwardedRef(node);\n      if (typeof cleanup === 'function') {\n        return () => {\n          inputRef.current = null;\n          cleanup();\n        };\n      }\n      return;\n    },\n    [forwardedRef],\n  );\n\n  // The saved-card check (T27, FR-11/FR-12; Decision 8). Three-or-four digits — see\n  // SAVED_CARD_CVV_PATTERN's own doc comment for why nothing narrower is checkable and nothing wider\n  // is safe. The only field on this path, so there is no ordering rule and no inline error node to\n  // fill (FR-12) — the message reaches the shopper through PlaceOrder's existing role=\"alert\".\n  const checkCvv = useCallback<PaymentPreflightCheck>(() => {\n    if (SAVED_CARD_CVV_PATTERN.test(cvv)) return [];\n    inputRef.current?.focus();\n    return [INVALID_SECURITY_CODE_ERROR];\n  }, [cvv]);\n\n  const submit = useCallback<PaymentSubmission>(\n    async (transaction) => {\n      // Same function the pre-flight calls (FR-3, applied to this path) — the two moments cannot\n      // diverge here either.\n      const refusals = checkCvv();\n      if (refusals.length > 0) return refusals;\n      if (!sendPayments) return [MISSING_ACTION_ERROR];\n      // `bin` here is always the `accountId`/`bin` pair from this row's own props — see their doc\n      // comments above for why `usePayment().draft.bin` must never substitute for either.\n      return sendPayments({ transaction, card: { kind: 'saved', accountId, bin, securityCode: cvv } });\n    },\n    [checkCvv, sendPayments, accountId, bin, cvv],\n  );\n\n  useRegisterPaymentSubmission('saved-card', submit, checkCvv);\n\n  // Merges with a caller-forwarded aria-describedby rather than clobbering it — mirrors the ref\n  // merge above (setInputRef) for the same \"don't drop what a caller already passed\" reason.\n  const ariaDescribedBy = securityCodeDescription\n    ? mergeDescribedBy(props['aria-describedby'], descriptionId)\n    : props['aria-describedby'];\n\n  // T101 — the mask merges *over* a caller-forwarded style, inverted from this repo's usual\n  // `...props.style`-last idiom (cart-item.tsx, product-list.tsx): deliberately, so a caller can\n  // never remove the security-code mask. See security-code-mask.ts.\n  //\n  // T173 — that merge now happens from the keystroke that completes the code, not from the first\n  // one, so a shopper can read back what they typed while they type it. Below the trigger the\n  // caller's own style passes through untouched, which is the same thing it did before this field\n  // ever had a mask; the guarantee above is about what a caller cannot do once the code is complete.\n  const inputStyle = isSecurityCodeComplete(cvv, SAVED_CARD_CVV_COMPLETE_LENGTH)\n    ? { ...props.style, ...SECURITY_CODE_MASK_STYLE }\n    : props.style;\n\n  return (\n    <>\n      <input\n        {...props}\n        ref={setInputRef}\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        aria-label={securityCodeLabel}\n        aria-describedby={ariaDescribedBy}\n        value={cvv}\n        onChange={(event) => setCvv(sanitizeCvv(event.target.value))}\n        data-fs-saved-card-cvv-field=\"\"\n        style={inputStyle}\n      />\n      {securityCodeDescription ? (\n        <p id={descriptionId} data-fs-saved-card-cvv-description=\"\">\n          {securityCodeDescription}\n        </p>\n      ) : null}\n    </>\n  );\n}\n\nexport function SavedCardCvvField({\n  $actions: $actionsProp,\n  securityCodeLabel = 'Security code',\n  securityCodeDescription = 'The 3-4 digit number on your card',\n  className,\n  ...props\n}: SavedCardCvvFieldProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { accountId, bin, cvvRequired } = useSavedCardData();\n  const { selectedAccountId, draft } = usePayment();\n\n  // Path-aware, matching SavedCardOption's own isSelected — otherwise this field stays mounted and\n  // registered after \"use a new card\", with selectedAccountId still equal to this row's own accountId.\n  if (accountId !== resolveEffectiveSelectedAccountId(selectedAccountId, draft.path) || !cvvRequired) {\n    return null;\n  }\n\n  return (\n    <SavedCardCvvInput\n      {...props}\n      className={className}\n      accountId={accountId}\n      bin={bin}\n      securityCodeLabel={securityCodeLabel}\n      securityCodeDescription={securityCodeDescription}\n      $actions={$actions}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/matter/shipping-address/shipping-address.js

@@ -4,11 +4,11 @@ import "../../core/dist/index.js";
 import { Field, FieldBinding, FieldsetFieldContext, useFieldsetField, useFieldsetFieldNames, useNoAncestorFieldset } from "../../particles/field/field.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { useEntityDataResolved } from "../../sdk/data/entity-resolution-context.js";
+import { useReactiveDataSettled } from "../../sdk/data/use-reactive-data-settled.js";
 import { Fieldset } from "../../particles/fieldset/fieldset.js";
 import { getAvailableCountries, getCountryDescriptor } from "./country-descriptors.js";
 import { useFormRegistry } from "../../particles/form/form.js";
-import { useEntityDataResolved } from "../../sdk/data/entity-resolution-context.js";
-import { useReactiveDataSettled } from "../../sdk/data/use-reactive-data-settled.js";
 import { FieldSelect } from "../../particles/select/field-select.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/particles/avatar/avatar.d.ts

@@ -0,0 +1,17 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/particles/avatar/avatar.d.ts
+/** Props for {@link Avatar}. Extends the native `<span>` attributes, minus `children`. */
+export type AvatarProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {
+  /** Whose avatar this is. The initials derive from it. */
+  name?: string;
+  /** Image URL. Absent or empty, the initials show. */
+  src?: string;
+  /** Accessible name. Absent, the avatar is decorative and hidden from assistive technology. */
+  alt?: string;
+};
+export declare const AvatarDefinition: ComponentDefinition<AvatarProps>;
+export declare function Avatar({ name, src, alt, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=avatar.d.ts.map

package/dist/particles/avatar/avatar.js

@@ -0,0 +1,65 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/particles/avatar/avatar.tsx
+const AvatarDefinition = defineComponent({
+	name: "Avatar",
+	importPath: "@vtex/faststore/components",
+	component: Avatar$1,
+	editor: {
+		label: "Avatar",
+		category: "content"
+	},
+	schema: {
+		name: {
+			type: "string",
+			label: "Name"
+		},
+		src: {
+			type: "string",
+			label: "Image URL"
+		},
+		alt: {
+			type: "string",
+			label: "Alt Text"
+		}
+	},
+	guideline: "A person or account marker: an image with an initials fallback derived from `name`. Decorative unless `alt` is set, so give it an `alt` whenever no adjacent text names the person. Style it through data-fs-avatar."
+});
+/**
+* The first code point of the first and last words of `name`, uppercased. One word yields one initial,
+* and no words yields an empty string. Code points rather than UTF-16 units, so an astral-plane letter
+* is not split in half.
+*/
+function getAvatarInitials(name) {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	const first = words[0];
+	const last = words.at(-1);
+	if (first === void 0 || last === void 0) return "";
+	const initial = (word) => Array.from(word)[0] ?? "";
+	return (words.length === 1 ? initial(first) : initial(first) + initial(last)).toLocaleUpperCase();
+}
+function Avatar$1({ name = "", src, alt, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		...props,
+		className,
+		role: alt ? "img" : void 0,
+		"aria-label": alt || void 0,
+		"aria-hidden": alt ? void 0 : true,
+		"data-fs-avatar": "",
+		children: [src ? /* @__PURE__ */ jsx(Avatar.Image, {
+			src,
+			alt: "",
+			"data-fs-avatar-image": ""
+		}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, {
+			"data-fs-avatar-fallback": "",
+			children: getAvatarInitials(name)
+		})]
+	});
+}
+//#endregion
+export { Avatar$1 as Avatar, AvatarDefinition, getAvatarInitials };
+
+//# sourceMappingURL=avatar.js.map

package/dist/particles/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":["Avatar","BaseAvatar"],"sources":["../../../src/particles/avatar/avatar.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\n\n/** Props for {@link Avatar}. Extends the native `<span>` attributes, minus `children`. */\nexport type AvatarProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {\n  /** Whose avatar this is. The initials derive from it. */\n  name?: string;\n  /** Image URL. Absent or empty, the initials show. */\n  src?: string;\n  /** Accessible name. Absent, the avatar is decorative and hidden from assistive technology. */\n  alt?: string;\n};\n\nexport const AvatarDefinition = defineComponent<AvatarProps>({\n  name: 'Avatar',\n  importPath: '@vtex/faststore/components',\n  component: Avatar,\n  editor: { label: 'Avatar', category: 'content' },\n  schema: {\n    name: { type: 'string', label: 'Name' },\n    src: { type: 'string', label: 'Image URL' },\n    alt: { type: 'string', label: 'Alt Text' },\n  },\n  guideline:\n    'A person or account marker: an image with an initials fallback derived from `name`. Decorative unless `alt` is set, so give it an `alt` whenever no adjacent text names the person. Style it through data-fs-avatar.',\n});\n\n/**\n * The first code point of the first and last words of `name`, uppercased. One word yields one initial,\n * and no words yields an empty string. Code points rather than UTF-16 units, so an astral-plane letter\n * is not split in half.\n */\nexport function getAvatarInitials(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const first = words[0];\n  const last = words.at(-1);\n  if (first === undefined || last === undefined) {\n    return '';\n  }\n\n  const initial = (word: string) => Array.from(word)[0] ?? '';\n  const initials = words.length === 1 ? initial(first) : initial(first) + initial(last);\n  return initials.toLocaleUpperCase();\n}\n\nexport function Avatar({ name = '', src, alt, className, ...props }: AvatarProps) {\n  return (\n    <BaseAvatar.Root\n      {...props}\n      className={className}\n      role={alt ? 'img' : undefined}\n      aria-label={alt || undefined}\n      aria-hidden={alt ? undefined : true}\n      data-fs-avatar=\"\"\n    >\n      {src ? <BaseAvatar.Image src={src} alt=\"\" data-fs-avatar-image=\"\" /> : null}\n      <BaseAvatar.Fallback data-fs-avatar-fallback=\"\">{getAvatarInitials(name)}</BaseAvatar.Fallback>\n    </BaseAvatar.Root>\n  );\n}\n"],"mappings":";;;;;;AAgBA,MAAa,mBAAmB,gBAA6B;CAC3D,MAAM;CACN,YAAY;CACZ,WAAWA;CACX,QAAQ;EAAE,OAAO;EAAU,UAAU;CAAU;CAC/C,QAAQ;EACN,MAAM;GAAE,MAAM;GAAU,OAAO;EAAO;EACtC,KAAK;GAAE,MAAM;GAAU,OAAO;EAAY;EAC1C,KAAK;GAAE,MAAM;GAAU,OAAO;EAAW;CAC3C;CACA,WACE;AACJ,CAAC;;;;;;AAOD,SAAgB,kBAAkB,MAAsB;CACtD,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CACrD,MAAM,QAAQ,MAAM;CACpB,MAAM,OAAO,MAAM,GAAG,EAAE;CACxB,IAAI,UAAU,KAAA,KAAa,SAAS,KAAA,GAClC,OAAO;CAGT,MAAM,WAAW,SAAiB,MAAM,KAAK,IAAI,CAAC,CAAC,MAAM;CAEzD,QADiB,MAAM,WAAW,IAAI,QAAQ,KAAK,IAAI,QAAQ,KAAK,IAAI,QAAQ,IAAI,EAAA,CACpE,kBAAkB;AACpC;AAEA,SAAgBA,SAAO,EAAE,OAAO,IAAI,KAAK,KAAK,WAAW,GAAG,SAAsB;CAChF,OACE,qBAACC,OAAW,MAAZ;EACE,GAAI;EACO;EACX,MAAM,MAAM,QAAQ,KAAA;EACpB,cAAY,OAAO,KAAA;EACnB,eAAa,MAAM,KAAA,IAAY;EAC/B,kBAAe;EANjB,UAAA,CAQG,MAAM,oBAACA,OAAW,OAAZ;GAAuB;GAAK,KAAI;GAAG,wBAAqB;EAAI,CAAA,IAAI,MACvE,oBAACA,OAAW,UAAZ;GAAqB,2BAAwB;GAAI,UAAA,kBAAkB,IAAI;EAAuB,CAAA,CAC/E;;AAErB"}

package/dist/schema.graphql

@@ -419,11 +419,14 @@ extend type Query {
 extend type Query {
   """
   The signed-in shopper's own persistent profile. Takes no id — the identity
-  comes from the session. Non-null like `cart`/`session`: it always resolves to
-  the shopper's entity (a shell with null fields when the record is empty) or
-  throws UNAUTHORIZED / UPSTREAM_ERROR (ADR-00007), never returning null.
+  comes from the session. Nullable because it is permission-gated (ADR-00005).
+  Null with no error when the session names no shopper. Null with an
+  UNAUTHORIZED, UPSTREAM_ERROR, UPSTREAM_TIMEOUT or CIRCUIT_OPEN error on this
+  field's path when the read fails (ADR-00007), so the rest of the operation
+  still resolves. A profile whose fields are null when the shopper has saved
+  nothing yet.
   """
-  customerProfile: CustomerProfile!
+  customerProfile: CustomerProfile
 }
 
 """
@@ -1849,10 +1852,11 @@ type CartItem {
   """
   compositions: [CartItemComposition!]!
   """
-  This item's own available delivery options (not intersected across the cart).
-  Excludes pickup options; delivery channel only.
+  The cart-wide delivery options this item is eligible for: the same ShippingOption
+  entities Shipping.options lists, carrying the shared-pool price, not a per-item
+  quote. Excludes pickup options; delivery channel only.
   """
-  shippingOptions: [ItemShippingOption!]!
+  shippingOptions: [ShippingOption!]!
   """
   This item's own currently selected delivery option, or null when no selection
   is persisted or the persisted selection is a pickup option.
@@ -2402,8 +2406,9 @@ type ShippingEstimate {
 }
 
 """
-A shipping option as it applies to one specific cart item — carries that
-item's own price for the option, distinct from the cart-wide ShippingOption.
+One cart item's current selection. Its price and estimate are Checkout's real values for
+this item; option carries the shared name and channel. All values are a live snapshot:
+another item joining or leaving the same SLA can change them.
 """
 type ItemShippingOption {
   """
@@ -2411,15 +2416,9 @@ type ItemShippingOption {
   from cart-wide options so the Apollo cache never conflates them.
   """
   id: ID!
-  """
-  Human-readable option name (e.g. "Standard Delivery"). Derived from a Checkout simulation, which
-  sends no `Accept-Language` and keys its SKU cache without a locale, so this text is NOT localized:
-  it may read in the account's default culture on a non-default binding.
-  """
-  name: String!
-  """Delivery channel: home delivery or pickup."""
-  channel: DeliveryChannel!
-  """Estimated shipping time."""
+  """The cart-wide shipping option this selection belongs to."""
+  option: ShippingOption!
+  """Estimated shipping time for this item."""
   shippingEstimate: ShippingEstimate!
   """Shipping cost for this item. Zero when free shipping applies."""
   price: Money!
@@ -2427,6 +2426,28 @@ type ItemShippingOption {
   listPrice: Money!
 }
 
+"""
+A shipping option with at least one cart item currently selected on it. Its price and
+shippingEstimateList cover only those items, recomputed on every request.
+"""
+type SelectedShippingOption {
+  """The cart-wide shipping option these items selected."""
+  option: ShippingOption!
+  """
+  Cart items currently selected on this option (not every eligible item).
+  """
+  items: [CartItem!]!
+  """Sum of items[].selectedShippingOption.price."""
+  price: Money!
+  """Sum of items[].selectedShippingOption.listPrice."""
+  listPrice: Money!
+  """
+  items[].selectedShippingOption.shippingEstimate, one entry per item, unreduced and
+  uncompared.
+  """
+  shippingEstimateList: [ShippingEstimate!]!
+}
+
 """A shipping option available for a given item and destination."""
 type ShippingOption {
   """Opaque delivery option identifier."""
@@ -2439,11 +2460,21 @@ type ShippingOption {
   name: String!
   """Delivery channel: home delivery or pickup."""
   channel: DeliveryChannel!
-  """Estimated shipping time."""
-  shippingEstimate: ShippingEstimate!
-  """Shipping cost. Zero when free shipping applies."""
+  """
+  Estimated shipping time, sampled from one eligible item. Delivery estimates can genuinely vary
+  per item under the same option; use shippingEstimateList for every item's own value.
+  """
+  shippingEstimate: ShippingEstimate! @deprecated(reason: "Sampled from one item and can misrepresent the others. Use shippingEstimateList.")
+  """
+  Every eligible item's own shippingEstimate, one entry per item, unreduced and uncompared.
+  """
+  shippingEstimateList: [ShippingEstimate!]!
+  """
+  Shipping cost for every item this option covers. Zero when free shipping applies. A live
+  estimate of the shared per-SLA pool, not a guaranteed quote.
+  """
   price: Money!
-  """Shipping list price before any promotions."""
+  """Shipping list price before any promotions, summed like price."""
   listPrice: Money!
   """Cart items for which this option is currently available."""
   items: [CartItem!]!
@@ -2660,13 +2691,17 @@ type Shipping implements Node @cacheControl(maxAge: 0, scope: PRIVATE) {
   """The logged-in shopper's saved addresses. Empty for anonymous shoppers."""
   savedAddresses: [Address!]!
   """
-  Delivery-channel shipping options common to all cart items for the current address, prices summed.
+  Delivery-channel shipping options any cart item is eligible for at the current address, prices summed across the eligible items.
   """
   options: [ShippingOption!]!
   """
+  Delivery-channel options with at least one item currently selected on them, one entry per option. Pickup selections are excluded.
+  """
+  selectedOptions: [SelectedShippingOption!]!
+  """
   The selected option, when one selection applies to the whole cart. Null when items disagree or the persisted selection is a pickup-channel SLA.
   """
-  selectedOptionId: ID
+  selectedOptionId: ID @deprecated(reason: "Cannot express split shipping. Use Shipping.selectedOptions.")
 }
 
 """A delivery address or saved-address reference."""
@@ -2786,7 +2821,8 @@ type ShippingAddressUpdatePayload {
 """Input for selecting a shipping option for the whole cart."""
 input ShippingOptionSelectInput {
   """
-  The shipping option ID to select. Must be available for all items in the cart.
+  The shipping option ID to select. Must be offered as a delivery option by at least one item in
+  the cart; items that don't offer it fall back to the Checkout API's own choice.
   """
   optionId: ID!
 }
@@ -2797,7 +2833,10 @@ enum ShippingOptionSelectErrorCode {
   MISSING_CART_CONTEXT
   """The cart was not found."""
   CART_NOT_FOUND
-  """The option is not available for all items in the cart."""
+  """
+  The option id is not offered as a delivery option by any item in the cart (unknown id or
+  pickup). Returned without calling Checkout. An option only some items offer is not an error.
+  """
   OPTION_UNAVAILABLE
   """No delivery address is persisted on the cart."""
   MISSING_SHIPPING_ADDRESS

package/dist/sdk/analytics/use-analytics-actions.js

@@ -2,6 +2,7 @@
 import { defineActions } from "../../core/dist/actions/registry.js";
 import "../../core/dist/index.js";
 import { DEFAULT_ANALYTICS_DESTINATION, resolveAnalyticsDestination, useAnalyticsDestination } from "./analytics-destination.js";
+import { loggableErrorName } from "../../utils/loggable-error-name.js";
 import { useCallback, useMemo, useRef } from "react";
 //#region src/sdk/analytics/use-analytics-actions.ts
 function toEcommerceItems(items) {
@@ -61,7 +62,7 @@ function useAnalyticsActions() {
 			});
 			pushToDataLayer(event, destination);
 		} catch (error) {
-			console.error(`[analytics.track] window.${destination} push failed`, error);
+			console.error(`[analytics.track] window.${destination} push failed`, loggableErrorName(error));
 		}
 	}, [override]);
 	return useMemo(() => ({ track }), [track]);