@vtex/faststore 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/CHANGELOG.md +59 -0
  2. package/dist/actions.json +42 -0
  3. package/dist/catalog.json +731 -16
  4. package/dist/cli/index.js +1 -1
  5. package/dist/cli/index.js.map +1 -1
  6. package/dist/components.d.ts +9 -4
  7. package/dist/components.js +11 -6
  8. package/dist/content-types.json +300 -0
  9. package/dist/core/dist/define-component.d.ts +6 -1
  10. package/dist/docs/account-entry-point.md +4 -4
  11. package/dist/docs/account-menu.md +2 -2
  12. package/dist/docs/account-saved-cards.md +301 -0
  13. package/dist/docs/binding-switcher.md +154 -0
  14. package/dist/docs/card-entry.md +3 -3
  15. package/dist/docs/card-summary.md +175 -0
  16. package/dist/docs/cart-destination.md +238 -0
  17. package/dist/docs/cart-item.md +21 -3
  18. package/dist/docs/cart-totalizer.md +1 -1
  19. package/dist/docs/cart.md +118 -11
  20. package/dist/docs/footer-social.md +1 -1
  21. package/dist/docs/free-shipping-progress.md +13 -9
  22. package/dist/docs/incentives.md +2 -2
  23. package/dist/docs/logo.md +1 -1
  24. package/dist/docs/payment-method-badges.md +2 -2
  25. package/dist/docs/payment-methods.md +1 -1
  26. package/dist/docs/product-information.md +2 -2
  27. package/dist/docs/product-shelf.md +7 -0
  28. package/dist/docs/select.md +3 -4
  29. package/dist/docs/sign-in-redirect.md +1 -1
  30. package/dist/docs/toast.md +30 -12
  31. package/dist/index.d.ts +2 -1
  32. package/dist/internal/client.d.ts +4 -1
  33. package/dist/internal/client.js +4 -1
  34. package/dist/internal/server.d.ts +4 -2
  35. package/dist/internal/server.js +4 -2
  36. package/dist/matter/account-saved-cards/account-saved-cards.d.ts +383 -0
  37. package/dist/matter/account-saved-cards/account-saved-cards.js +956 -0
  38. package/dist/matter/account-saved-cards/account-saved-cards.js.map +1 -0
  39. package/dist/matter/billing-address/billing-address.js.map +1 -1
  40. package/dist/matter/cart/cart-namespace.d.ts +5 -1
  41. package/dist/matter/cart/cart-namespace.js +5 -1
  42. package/dist/matter/cart/cart-namespace.js.map +1 -1
  43. package/dist/matter/cart/cart.d.ts +34 -4
  44. package/dist/matter/cart/cart.js +238 -28
  45. package/dist/matter/cart/cart.js.map +1 -1
  46. package/dist/matter/cart-destination/cart-destination.d.ts +222 -0
  47. package/dist/matter/cart-destination/cart-destination.js +613 -0
  48. package/dist/matter/cart-destination/cart-destination.js.map +1 -0
  49. package/dist/matter/cart-item/cart-item.d.ts +4 -2
  50. package/dist/matter/cart-item/cart-item.js +75 -16
  51. package/dist/matter/cart-item/cart-item.js.map +1 -1
  52. package/dist/matter/cart-totalizer/cart-totalizer.js +3 -2
  53. package/dist/matter/cart-totalizer/cart-totalizer.js.map +1 -1
  54. package/dist/matter/free-shipping-progress/free-shipping-progress.d.ts +6 -3
  55. package/dist/matter/free-shipping-progress/free-shipping-progress.js +76 -33
  56. package/dist/matter/free-shipping-progress/free-shipping-progress.js.map +1 -1
  57. package/dist/matter/pricing/pricing.js.map +1 -1
  58. package/dist/matter/product-shelf/product-shelf.d.ts +7 -0
  59. package/dist/matter/product-shelf/product-shelf.js +115 -1
  60. package/dist/matter/product-shelf/product-shelf.js.map +1 -1
  61. package/dist/matter/shipping-address/shipping-address.js.map +1 -1
  62. package/dist/matter/shipping-simulator/shipping-simulator.d.ts +1 -1
  63. package/dist/matter/shipping-simulator/shipping-simulator.js +6 -2
  64. package/dist/matter/shipping-simulator/shipping-simulator.js.map +1 -1
  65. package/dist/particles/binding-switcher/binding-switcher.d.ts +38 -0
  66. package/dist/particles/binding-switcher/binding-switcher.js +183 -0
  67. package/dist/particles/binding-switcher/binding-switcher.js.map +1 -0
  68. package/dist/particles/card-summary/card-network.d.ts +17 -0
  69. package/dist/particles/card-summary/card-network.js +25 -0
  70. package/dist/particles/card-summary/card-network.js.map +1 -0
  71. package/dist/particles/card-summary/card-summary.d.ts +83 -0
  72. package/dist/particles/card-summary/card-summary.js +188 -0
  73. package/dist/particles/card-summary/card-summary.js.map +1 -0
  74. package/dist/particles/footer-social/footer-social.d.ts +1 -1
  75. package/dist/particles/footer-social/footer-social.js +1 -1
  76. package/dist/particles/footer-social/footer-social.js.map +1 -1
  77. package/dist/particles/incentives/incentives.d.ts +1 -1
  78. package/dist/particles/incentives/incentives.js +1 -1
  79. package/dist/particles/incentives/incentives.js.map +1 -1
  80. package/dist/particles/payment-methods/payment-methods.d.ts +1 -1
  81. package/dist/particles/payment-methods/payment-methods.js +1 -1
  82. package/dist/particles/payment-methods/payment-methods.js.map +1 -1
  83. package/dist/particles/toast/toast.d.ts +20 -6
  84. package/dist/particles/toast/toast.js +49 -7
  85. package/dist/particles/toast/toast.js.map +1 -1
  86. package/dist/schema.graphql +298 -34
  87. package/dist/sdk/actions/index.d.ts +3 -1
  88. package/dist/sdk/actions/index.js +3 -1
  89. package/dist/sdk/actions/locale-action-provider.d.ts +16 -0
  90. package/dist/sdk/actions/locale-action-provider.js +20 -0
  91. package/dist/sdk/actions/locale-action-provider.js.map +1 -0
  92. package/dist/sdk/actions/saved-card-action-provider.d.ts +12 -0
  93. package/dist/sdk/actions/saved-card-action-provider.js +16 -0
  94. package/dist/sdk/actions/saved-card-action-provider.js.map +1 -0
  95. package/dist/sdk/actions/types.d.ts +6 -2
  96. package/dist/sdk/cache/storefront-cache.js +2 -1
  97. package/dist/sdk/cache/storefront-cache.js.map +1 -1
  98. package/dist/sdk/cart/operations.d.ts +2 -1
  99. package/dist/sdk/cart/operations.js +55 -1
  100. package/dist/sdk/cart/operations.js.map +1 -1
  101. package/dist/sdk/cart/optimistic.d.ts +30 -7
  102. package/dist/sdk/cart/optimistic.js +78 -41
  103. package/dist/sdk/cart/optimistic.js.map +1 -1
  104. package/dist/sdk/cart/use-cart-actions.d.ts +7 -0
  105. package/dist/sdk/cart/use-cart-actions.js +61 -15
  106. package/dist/sdk/cart/use-cart-actions.js.map +1 -1
  107. package/dist/sdk/cart/use-cart-sync-sales-channel.js +70 -0
  108. package/dist/sdk/cart/use-cart-sync-sales-channel.js.map +1 -0
  109. package/dist/sdk/generated/gql.js +15 -11
  110. package/dist/sdk/generated/gql.js.map +1 -1
  111. package/dist/sdk/generated/graphql.d.ts +177 -46
  112. package/dist/sdk/generated/graphql.js +2314 -93
  113. package/dist/sdk/generated/graphql.js.map +1 -1
  114. package/dist/sdk/i18n/messages/en-US.js +19 -0
  115. package/dist/sdk/i18n/messages/en-US.json +19 -0
  116. package/dist/sdk/i18n/messages/en-US.json.d.ts +19 -0
  117. package/dist/sdk/i18n/messages/es-ES.js +19 -0
  118. package/dist/sdk/i18n/messages/es-ES.json +19 -0
  119. package/dist/sdk/i18n/messages/pt-BR.js +19 -0
  120. package/dist/sdk/i18n/messages/pt-BR.json +19 -0
  121. package/dist/sdk/i18n/provider.js +1 -1
  122. package/dist/sdk/i18n/provider.js.map +1 -1
  123. package/dist/sdk/locale/binding-switch-provider.d.ts +13 -0
  124. package/dist/sdk/locale/binding-switch-provider.js +20 -0
  125. package/dist/sdk/locale/binding-switch-provider.js.map +1 -0
  126. package/dist/sdk/locale/use-locale-actions.d.ts +16 -0
  127. package/dist/sdk/locale/use-locale-actions.js +70 -0
  128. package/dist/sdk/locale/use-locale-actions.js.map +1 -0
  129. package/dist/sdk/navigation/binding-switch.d.ts +39 -0
  130. package/dist/sdk/navigation/binding-switch.js +129 -0
  131. package/dist/sdk/navigation/binding-switch.js.map +1 -0
  132. package/dist/sdk/navigation/decode-route-params.d.ts +11 -0
  133. package/dist/sdk/navigation/decode-route-params.js +32 -0
  134. package/dist/sdk/navigation/decode-route-params.js.map +1 -0
  135. package/dist/sdk/saved-cards/operations.d.ts +16 -0
  136. package/dist/sdk/saved-cards/operations.js +41 -0
  137. package/dist/sdk/saved-cards/operations.js.map +1 -0
  138. package/dist/sdk/saved-cards/use-saved-card-actions.d.ts +26 -0
  139. package/dist/sdk/saved-cards/use-saved-card-actions.js +86 -0
  140. package/dist/sdk/saved-cards/use-saved-card-actions.js.map +1 -0
  141. package/dist/sdk/seo/page-alternates.d.ts +5 -3
  142. package/dist/sdk/seo/page-alternates.js +7 -12
  143. package/dist/sdk/seo/page-alternates.js.map +1 -1
  144. package/dist/sdk/shipping/shipping-operations.d.ts +1 -1
  145. package/dist/sdk/shipping/shipping-operations.js +13 -0
  146. package/dist/sdk/shipping/shipping-operations.js.map +1 -1
  147. package/dist/sdk/state/cart.d.ts +9 -2
  148. package/dist/sdk/state/cart.js +9 -2
  149. package/dist/sdk/state/cart.js.map +1 -1
  150. package/package.json +2 -2
  151. package/src/styles/tailwind.css +1 -2
@@ -124,7 +124,7 @@ verbatim can still resolve to a declared key — `"WH Google Pay"` resolves to `
124
124
  set of names a strip can produce is wider than the store's literal method labels and has to be read off this
125
125
  list, not off the payment configuration's screen.
126
126
 
127
- **If the store's `global.json` already has an `icons` object, extend it — do not replace it**, for the same
127
+ **If the store's `foundation.json` already has an `icons` object, extend it — do not replace it**, for the same
128
128
  reason `card-entry.md` gives: replacing it silently drops `collection` (or any existing `include` entries),
129
129
  and every other icon in that store re-resolves through the fallback default with no error to flag it.
130
130
 
@@ -202,7 +202,7 @@ and every other icon in that store re-resolves through the fallback default with
202
202
 
203
203
  ## Styling
204
204
 
205
- `PaymentMethodBadges` and `AcceptedPaymentMethodBadges` render one root you style directly, plus per-part hooks — the identical set for both, since both are produced by the same internal render path. Each carries its own catalog name, so each gets its own independent swatch entry in `global.json`'s `styles` key even though the two emit the same hooks; style each surface separately if it needs to look different.
205
+ `PaymentMethodBadges` and `AcceptedPaymentMethodBadges` render one root you style directly, plus per-part hooks — the identical set for both, since both are produced by the same internal render path. Each carries its own catalog name, so each gets its own independent swatch entry in `foundation.json`'s `styles` key even though the two emit the same hooks; style each surface separately if it needs to look different.
206
206
 
207
207
  | Component | What you style | Plausible classes |
208
208
  |---|---|---|
@@ -48,7 +48,7 @@ FooterRoot
48
48
 
49
49
  **Nothing in the model is required, so a half-filled entry still renders.** An entry with only a heading keeps the authored `methods` prop under the merchant's heading, and vice versa. What the component drops is per item, never the whole strip: an item is skipped when its label is blank, or when it carries neither a `method` nor an `iconUrl` — an icon nobody can name is the one thing this must not ship.
50
50
 
51
- **Every predefined name must be registered.** A `method` resolves to a sprite symbol the store's build has to include; the store's `global.json` writes the names out under `icons.include` — it is JSON, so it cannot import `PAYMENT_METHOD_NAMES`, and a test that derives the expected set from the exported constant is what keeps the two in step. A name the store never registered renders an empty `<svg>` — no build error and no runtime error, just a missing flag.
51
+ **Every predefined name must be registered.** A `method` resolves to a sprite symbol the store's build has to include; the store's `foundation.json` writes the names out under `icons.include` — it is JSON, so it cannot import `PAYMENT_METHOD_NAMES`, and a test that derives the expected set from the exported constant is what keeps the two in step. A name the store never registered renders an empty `<svg>` — no build error and no runtime error, just a missing flag.
52
52
 
53
53
  ---
54
54
 
@@ -96,7 +96,7 @@ Renders the product description, optionally collapsed behind a "show more" toggl
96
96
  | `moreLabel` | string | `'Show more'` | Trigger label shown when the panel is collapsed. Localize per storefront (e.g. `'mais informações'` for pt-BR). |
97
97
  | `lessLabel` | string | `'Show less'` | Trigger label shown when the panel is expanded (e.g. `'menos informações'`). |
98
98
 
99
- The wrapper element follows from the resolved branch: plain text renders as `<p>` (semantic body-text exposure for screen-reader paragraph navigation and SEO); rich HTML renders as `<div>` so block-level markup inside `descriptionHtml` (`<p>`, `<ul>`, headings) stays valid DOM. The element that hosts the rendered description text carries `data-fs-text=""` so project-level `Text` typography defined in `global.json` cascades to the description automatically — no need to repeat font, size, color, leading, or tracking classes inline on every description node. With `collapse: 'none'` that element is the wrapper itself; with `collapse: 'showMore'` or `'section'` it is the panel (the `Collapsible.Root` and the trigger `<button>` deliberately do not carry it so body typography does not cascade onto the trigger label).
99
+ The wrapper element follows from the resolved branch: plain text renders as `<p>` (semantic body-text exposure for screen-reader paragraph navigation and SEO); rich HTML renders as `<div>` so block-level markup inside `descriptionHtml` (`<p>`, `<ul>`, headings) stays valid DOM. The element that hosts the rendered description text carries `data-fs-text=""` so project-level `Text` typography defined in `foundation.json` cascades to the description automatically — no need to repeat font, size, color, leading, or tracking classes inline on every description node. With `collapse: 'none'` that element is the wrapper itself; with `collapse: 'showMore'` or `'section'` it is the panel (the `Collapsible.Root` and the trigger `<button>` deliberately do not carry it so body typography does not cascade onto the trigger label).
100
100
 
101
101
  Rich HTML is rendered via `dangerouslySetInnerHTML`; Storefront API Core sanitizes `descriptionHtml` upstream, so this is safe for first-party catalogs.
102
102
 
@@ -253,7 +253,7 @@ The main heading — large and bold. Typical: `text-[20px] leading-[1.3] font-se
253
253
 
254
254
  ### ProductInformationDescription
255
255
 
256
- Body copy — smaller, lighter, comfortable line height. Typical: `text-[14px] leading-[1.6] font-normal text-[#666666]`. The element that hosts the text carries `data-fs-text=""` in every collapse mode (the wrapper itself for `collapse: 'none'`, the panel for `'showMore'` and `'section'`), so if the project's `global.json` defines `Text.base` with the body-text typography (font, size, leading, weight, color), those styles cascade to the description automatically and no inline typography classes are needed on the description node.
256
+ Body copy — smaller, lighter, comfortable line height. Typical: `text-[14px] leading-[1.6] font-normal text-[#666666]`. The element that hosts the text carries `data-fs-text=""` in every collapse mode (the wrapper itself for `collapse: 'none'`, the panel for `'showMore'` and `'section'`), so if the project's `foundation.json` defines `Text.base` with the body-text typography (font, size, leading, weight, color), those styles cascade to the description automatically and no inline typography classes are needed on the description node.
257
257
 
258
258
  When `collapse` is `'showMore'` or `'section'`, the trigger element is a real `<button>` rendered as a sibling of the panel inside the Collapsible root. Style it via the `data-fs-product-information-description-trigger` attribute hook so the trigger inherits the description's flex container without being centered or stretched. Typical: `[&_[data-fs-product-information-description-trigger]]:self-start [&_[data-fs-product-information-description-trigger]]:text-[14px] [&_[data-fs-product-information-description-trigger]]:font-medium [&_[data-fs-product-information-description-trigger]]:underline`. Pair with the brand's link color via an arbitrary hex (e.g. `[&_[data-fs-product-information-description-trigger]]:text-[#e60014]`).
259
259
 
@@ -26,11 +26,14 @@ The image is the source of truth for the heading text, `first`/`itemsPerPage`, a
26
26
 
27
27
  - A cross-sell / discovery shelf on the PDP (Related Products), PLP, or Search Results: a facet-scoped, navigable carousel of product cards configured entirely in the VTEX Studio.
28
28
 
29
+ - A shelf inside a conditional branch that is often not shown, such as the empty state of the cart: use `ProductShelfOnMountRoot`. It is the same shelf, but its data is fetched by the client when the element mounts and never reaches the server HTML or the page query.
30
+
29
31
  ## When NOT to use
30
32
 
31
33
  - A full-page product listing driven by the route/search → use `ProductListRoot` (prop-driven) with the PLP grid.
32
34
  - PDP single-product pricing → use `PricingRoot` (it fetches one `productBySlug`; it cannot price a per-card item in a list).
33
35
  - A generic non-product track of children → use the `Carousel` particle directly.
36
+ - `ProductShelfOnMountRoot` above the fold, or anywhere the products must be in the server HTML → use `ProductShelfRoot`.
34
37
 
35
38
  ---
36
39
 
@@ -66,6 +69,10 @@ The image is the source of truth for the heading text, `first`/`itemsPerPage`, a
66
69
  | `$data` | slice | — | Compiler-injected fragment result |
67
70
  | `products` | `ProductShelfItem[]` | — | Pre-shaped items (stories/tests; bypasses `$data`). Rendered as given: `first` does not limit them |
68
71
 
72
+ ### ProductShelfOnMountRoot
73
+
74
+ `ProductShelfRoot` with `fetchStrategy: 'lazy-on-mount'`. It renders `ProductShelfRoot` and reuses its fragment, `variables` block and props (all of the table above except `$content` and `$data`). The difference is delivery: the page query never selects its `products` field, and the client sends the request, in its own operation, only when the element mounts. The generated page wraps it in a `HotDataProvider` with a `null` fallback, so until the response arrives, and when the request fails or returns no products, it renders nothing (no skeleton). Without that provider and without a `products` prop it has no source and renders the loading skeleton permanently; pass `products` outside a generated page. It has no content model, so its variables come from props only. Place it inside a conditional branch (for example `CartEmpty`), never above the fold; a layout cannot compose it.
75
+
69
76
  ### Content model `product-shelf`
70
77
 
71
78
  `ProductShelfContent` declares the merchant-facing fields: `first` (number, minimum 1), `sort` (the eight members above), `categoryId`, `brandId`, `collectionId`, `searchTerm` (string) and `availableOnly` (boolean). None is required. In a store with a `cms` binding the merchant fills them in the Content Platform entry keyed by the element id, and the shelf re-queries on the next request with no deploy; an empty field falls to the prop, and an empty facet relaxes the filter.
@@ -26,10 +26,9 @@ Signals that distinguish it from other controls:
26
26
  - A **country/region selector** (ISO codes resolved to display names), a **sort-order dropdown**, or a
27
27
  **quantity/unit picker** are the most common PDP/checkout uses.
28
28
 
29
- This particle currently has no `store-editor` knowledge-base row: it is a leaf control with no
30
- distinct visual region of its own, and the bound `FieldSelect.*` parts cannot be generated from a
31
- screenshot without the bound Control that consumes them (`ShippingAddressCountryControl`). This section documents the
32
- visual pattern for a human reader; it is not wired into image→schema detection.
29
+ This particle is a leaf control with no distinct visual region of its own, and the bound `FieldSelect.*`
30
+ parts cannot be generated from a screenshot without the bound Control that consumes them
31
+ (`ShippingAddressCountryControl`). This section documents the visual pattern for a human reader.
33
32
 
34
33
  ---
35
34
 
@@ -118,7 +118,7 @@ That element carries both hooks: `data-fs-sign-in-redirect` is the component's i
118
118
  }
119
119
  ```
120
120
 
121
- A spinner beside the text is a decoration the component does not render. Draw it from the element itself, once per store, as the `SignInRedirect` base swatch in `global.json → styles`. `before:block` is what makes the pseudo-element take a width and height — an inline one ignores both:
121
+ A spinner beside the text is a decoration the component does not render. Draw it from the element itself, once per store, as the `SignInRedirect` base swatch in `foundation.json → styles`. `before:block` is what makes the pseudo-element take a width and height — an inline one ignores both:
122
122
 
123
123
  ```json
124
124
  {
@@ -21,23 +21,23 @@
21
21
 
22
22
  ## Composition
23
23
 
24
- `Toast` is not authored as a per-toast PageSchema tree. Only the **stack scaffolding** is mounted once, near the layout root, and a `ToastViewport` with no children renders every toast itself:
24
+ `Toast` is not authored as a per-toast PageSchema tree. The stack is mounted once in the layout schema, near the root. A `ToastViewport` with no children renders every toast itself; to control the markup, put a `ToastList` inside it with the per-toast card as a template:
25
25
 
26
26
  ```
27
27
  ToastProvider
28
28
  └── ToastPortal
29
29
  └── ToastViewport
30
+ └── ToastList ← repeats its children once per queued toast
31
+ └── ToastRoot ← the template; reads its toast from ToastList
32
+ ├── ToastTitle (optional — auto-renders toast.title with no children)
33
+ ├── ToastDescription (optional — auto-renders toast.description with no children)
34
+ ├── ToastAction (optional) ← reversible action, e.g. "Undo"
35
+ └── ToastClose (optional)
30
36
  ```
31
37
 
32
- A `ToastViewport` with no children renders one default toast per entry of `useToast().toasts` (see below), so a page schema never lists a toast. To control the markup, pass children: map over `useToast().toasts` and render a `ToastRoot` for each. A typical per-toast render tree (authored in application code, not in a schema):
38
+ A `ToastViewport` with no children renders one default toast per entry of `useToast().toasts` (see below), so a page schema never lists a toast. Passing children takes control of the markup, and `ToastList` is the schema-composable way to do it: it renders its template once per queued toast and `ToastRoot` reads each toast from it. In application code you can instead map over `useToast().toasts` and pass `toast` to `ToastRoot` yourself.
33
39
 
34
- ```
35
- ToastRoot ← one per queued toast, keyed by toast.id
36
- ├── ToastTitle (optional — auto-renders toast.title with no children)
37
- ├── ToastDescription (optional — auto-renders toast.description with no children)
38
- ├── ToastAction (optional) ← reversible action, e.g. "Undo"
39
- └── ToastClose (optional)
40
- ```
40
+ The message text is not in the schema. It comes from whoever calls `add()` at runtime. With no children, `ToastList` renders `ToastRoot > ToastTitle + ToastDescription` for each toast; a `ToastViewport` containing a `ToastList` counts as having children, so the default toasts do not render alongside it.
41
41
 
42
42
  `Icon` (existing particle) may be composed as a plain sibling of `ToastTitle`/`ToastDescription` inside `ToastRoot` — there is no dedicated status-icon sub-component. Wrap it in a plain `<span data-fs-toast-icon-container="">` at the call site for a tinted background; `ToastRoot` does not inject this wrapper itself, since it renders `children` verbatim. Style both hooks off `data-fs-toast-root-type`.
43
43
 
@@ -67,13 +67,19 @@ The fixed-position stack container. Renders a `<div>` — style it directly.
67
67
 
68
68
  No props beyond standard `className`/HTML attributes. It reads the message catalog, so it needs an intl provider ancestor (a generated app's root layout provides one).
69
69
 
70
+ ### ToastList
71
+
72
+ Renders its `children` once for each queued toast, in the order of `useToast().toasts`, each inside a per-toast context that `ToastRoot` reads. With no children it renders `ToastRoot > ToastTitle + ToastDescription`. It renders no element of its own, so it adds no `data-fs-*` hook and takes no `style`. Without a `ToastProvider` ancestor it renders nothing. Place it as the direct child of `ToastViewport`.
73
+
74
+ No props beyond `children`.
75
+
70
76
  ### ToastRoot
71
77
 
72
- One instance per active toast.
78
+ One instance per active toast. Place it inside `ToastList` as the template, or render it yourself with an explicit `toast`. With neither, it renders nothing.
73
79
 
74
80
  | Prop | Type | Default | Notes |
75
81
  |------|------|---------|-------|
76
- | `toast` | `ToastObject` | — | Required. One entry from `useToast().toasts`. |
82
+ | `toast` | `ToastObject` | toast from the enclosing `ToastList` | One entry from `useToast().toasts`. Wins over the list's toast when both exist. |
77
83
  | `swipeDirection` | `'up' \| 'down' \| 'left' \| 'right'` or an array of those | `['down', 'right']` | Directions the shopper can swipe to dismiss. |
78
84
 
79
85
  ### ToastTitle / ToastDescription
@@ -101,7 +107,18 @@ function SaveProfileButton() {
101
107
  }
102
108
  ```
103
109
 
104
- `useToast()` is Base UI's `useToastManager()` re-exported under the FastStore name — `toasts`, `add`, `close`, `update`, and `promise` all behave exactly as documented at [base-ui.com/react/components/toast](https://base-ui.com/react/components/toast).
110
+ Under a provider-optional caller, such as a component that renders in layouts with or without a provider, use `useOptionalToast()`. It returns the same value as `useToast()`, or `null` when no `ToastProvider` is mounted, and never throws:
111
+
112
+ ```tsx
113
+ import { useOptionalToast } from '@vtex/faststore/components';
114
+
115
+ function RemoveButton() {
116
+ const toast = useOptionalToast();
117
+ return <button onClick={() => toast?.add({ title: 'Item removed' })}>Remove</button>;
118
+ }
119
+ ```
120
+
121
+ `useToast()` is Base UI's `useToastManager()` re-exported under the FastStore name, and it still throws without a provider. `toasts`, `add`, `close`, `update`, and `promise` all behave exactly as documented at [base-ui.com/react/components/toast](https://base-ui.com/react/components/toast).
105
122
 
106
123
  ---
107
124
 
@@ -110,6 +127,7 @@ function SaveProfileButton() {
110
127
  | Component | What you style | Plausible classes |
111
128
  |---|---|---|
112
129
  | `ToastViewport` | Positions the stack on the screen | `fixed bottom-4 right-4 flex flex-col gap-2 w-[320px]` |
130
+ | `ToastList` | Nothing. It renders no element | — |
113
131
  | `ToastRoot` | The toast card's surface; key off `data-fs-toast-root-type` for status color | `rounded-lg px-4 py-3 shadow-lg data-[fs-toast-root-type=error]:bg-red-50` |
114
132
  | `ToastTitle` | Toast heading typography | `text-sm font-semibold` |
115
133
  | `ToastDescription` | Toast body typography | `text-sm text-gray-600` |
package/dist/index.d.ts CHANGED
@@ -9,6 +9,7 @@ import { CartUserError } from "./sdk/cart/operations.js";
9
9
  import { AddItemPayload, CartActions, CartCouponPayload, CartLinePayload, CartLinesPayload, CartQuantityPayload } from "./sdk/cart/use-cart-actions.js";
10
10
  import { ClientPreferenceKey, ClientProfileUserError, CustomerProfileUserError } from "./sdk/identity/operations.js";
11
11
  import { ClientPreferencesUpdatePayload, ClientProfileUpdatePayload, CustomerProfileUpdatePayload, IdentityActions } from "./sdk/identity/use-identity-actions.js";
12
+ import { LocaleActions } from "./sdk/locale/use-locale-actions.js";
12
13
  import { OrderCancelOrder, OrderCancelUserError } from "./sdk/orders/order-operations.js";
13
14
  import { OrderActions, OrderCancelInput, OrderCancelResult } from "./sdk/orders/use-order-actions.js";
14
15
  import { PaymentBillingAddressUpdateInput, PaymentMethodSelectInput, PaymentMoney, PaymentUserError } from "./sdk/payment/operations.js";
@@ -23,4 +24,4 @@ import { ShippingAddressInput, ShippingAddressUpdateErrorEntity } from "./sdk/sh
23
24
  import { ShippingActions } from "./sdk/shipping/use-shipping-actions.js";
24
25
  import { ComponentActions } from "./sdk/actions/types.js";
25
26
  import { resolveStorefrontHref } from "./sdk/navigation/resolve-storefront-href.js";
26
- export { type ActionSelector, type AddItemPayload, type CartActions, type CartCouponPayload, type CartLinePayload, type CartLinesPayload, type CartQuantityPayload, type CartUserError, type ClientPreferenceKey, type ClientPreferencesUpdatePayload, type ClientProfileUpdatePayload, type ClientProfileUserError, type ComponentActions, type ComponentDefinition, type ContentArraySchema, type ContentNestedObjectShape, type ContentObjectPropertySchema, type ContentObjectSchema, type ContentPropertySchema, type ContentPropertyType, type ContentScalarSchema, type ContentScalarType, type ContentTypeDefinition, type ContentValue, type CustomerProfileUpdatePayload, type CustomerProfileUserError, type EditorMetadata, type FetchStrategy, type IdentityActions, type JsonValue, type MockActions, type OrderActions, type OrderCancelInput, type OrderCancelOrder, type OrderCancelResult, type OrderCancelUserError, type PageRef, type PaymentActions, type PaymentBillingAddressUpdateInput, type PaymentGatewayCallbackResult, type PaymentGatewayCard, type PaymentGatewayNewCard, type PaymentGatewayResult, type PaymentGatewaySavedCard, type PaymentGatewayTransaction, type PaymentMethodSelectInput, type PaymentMoney, type PaymentStartTransactionResult, type PaymentUserError, type PropSchema, type PropSchemaField, type PropType, type RegionActions, type RegionUserError, type ResolveHrefReason, type ResolveHrefResult, type RouteIdentity, type RouteKind, type RouteMap, type RouteMapEntry, type SendPaymentsRequest, type SessionAccessCodeRequestResult, type SessionActions, type SessionPasswordLoginPayload, type SessionRequestAccessCodePayload, type SessionUserError, type SessionValidateAccessCodePayload, type ShippingActions, type ShippingAddressInput, type ShippingAddressUpdateErrorEntity, type ShippingOptionSelectUserError, type StandardName, type StorefrontContext, type VariableBinding, type VariableBindings, defineComponent, defineContentType, mockAction, resolveStorefrontHref };
27
+ export { type ActionSelector, type AddItemPayload, type CartActions, type CartCouponPayload, type CartLinePayload, type CartLinesPayload, type CartQuantityPayload, type CartUserError, type ClientPreferenceKey, type ClientPreferencesUpdatePayload, type ClientProfileUpdatePayload, type ClientProfileUserError, type ComponentActions, type ComponentDefinition, type ContentArraySchema, type ContentNestedObjectShape, type ContentObjectPropertySchema, type ContentObjectSchema, type ContentPropertySchema, type ContentPropertyType, type ContentScalarSchema, type ContentScalarType, type ContentTypeDefinition, type ContentValue, type CustomerProfileUpdatePayload, type CustomerProfileUserError, type EditorMetadata, type FetchStrategy, type IdentityActions, type JsonValue, type LocaleActions, type MockActions, type OrderActions, type OrderCancelInput, type OrderCancelOrder, type OrderCancelResult, type OrderCancelUserError, type PageRef, type PaymentActions, type PaymentBillingAddressUpdateInput, type PaymentGatewayCallbackResult, type PaymentGatewayCard, type PaymentGatewayNewCard, type PaymentGatewayResult, type PaymentGatewaySavedCard, type PaymentGatewayTransaction, type PaymentMethodSelectInput, type PaymentMoney, type PaymentStartTransactionResult, type PaymentUserError, type PropSchema, type PropSchemaField, type PropType, type RegionActions, type RegionUserError, type ResolveHrefReason, type ResolveHrefResult, type RouteIdentity, type RouteKind, type RouteMap, type RouteMapEntry, type SendPaymentsRequest, type SessionAccessCodeRequestResult, type SessionActions, type SessionPasswordLoginPayload, type SessionRequestAccessCodePayload, type SessionUserError, type SessionValidateAccessCodePayload, type ShippingActions, type ShippingAddressInput, type ShippingAddressUpdateErrorEntity, type ShippingOptionSelectUserError, type StandardName, type StorefrontContext, type VariableBinding, type VariableBindings, defineComponent, defineContentType, mockAction, resolveStorefrontHref };
@@ -5,9 +5,11 @@ import { AddressActionProvider, AddressActionProviderProps } from "../sdk/action
5
5
  import { AnalyticsActionProvider, AnalyticsActionProviderProps } from "../sdk/actions/analytics-action-provider.js";
6
6
  import { CartActionProvider, CartActionProviderProps } from "../sdk/actions/cart-action-provider.js";
7
7
  import { IdentityActionProvider, IdentityActionProviderProps } from "../sdk/actions/identity-action-provider.js";
8
+ import { LocaleActionProvider, LocaleActionProviderProps } from "../sdk/actions/locale-action-provider.js";
8
9
  import { OrderActionProvider, OrderActionProviderProps } from "../sdk/actions/order-action-provider.js";
9
10
  import { PaymentActionProvider, PaymentActionProviderProps } from "../sdk/actions/payment-action-provider.js";
10
11
  import { RegionActionProvider, RegionActionProviderProps } from "../sdk/actions/region-action-provider.js";
12
+ import { SavedCardActionProvider, SavedCardActionProviderProps } from "../sdk/actions/saved-card-action-provider.js";
11
13
  import { SessionActionProvider, SessionActionProviderProps } from "../sdk/actions/session-action-provider.js";
12
14
  import { ShippingActionProvider, ShippingActionProviderProps } from "../sdk/actions/shipping-action-provider.js";
13
15
  import "../sdk/actions/index.js";
@@ -21,6 +23,7 @@ import { ClientVariablesMap, PageReactiveDataRoot, PageReactiveDataRootProps, Re
21
23
  import { ReactiveDataProvider, ReactiveDataProviderProps } from "../sdk/data/reactive-data-provider.js";
22
24
  import { ReactiveListItemDataProvider, ReactiveListItemDataProviderProps } from "../sdk/data/reactive-list-item-data-provider.js";
23
25
  import "../sdk/data/index.js";
26
+ import { BindingSwitchProvider, BindingSwitchProviderProps } from "../sdk/locale/binding-switch-provider.js";
24
27
  import { RouteMapProvider, RouteMapProviderProps, ToLogicalPath } from "../sdk/navigation/route-map-provider.js";
25
28
  import { reportNotFoundRequest } from "../sdk/navigation/not-found-log.js";
26
29
  import { RouteIdentityProvider, RouteIdentityProviderProps } from "../sdk/navigation/route-identity-provider.js";
@@ -28,4 +31,4 @@ import { StorefrontProvider, StorefrontProviderProps } from "../sdk/provider/sto
28
31
  import "../sdk/provider/index.js";
29
32
  import { cartCouponErrorsVar, cartLastAddVar, cartUserErrorsVar, miniCartOpenVar, orderFormIdVar } from "../sdk/state/cart.js";
30
33
  import { SelectedVariant, publishedVariantIdFor, selectedVariantVar } from "../sdk/state/variant-selector.js";
31
- export { AddressActionProvider, type AddressActionProviderProps, AnalyticsActionProvider, type AnalyticsActionProviderProps, CartActionProvider, type CartActionProviderProps, type ClientVariablesMap, DataOverrideContext, HotDataProvider, type HotDataProviderProps, IdentityActionProvider, type IdentityActionProviderProps, type ListItemRef, ListItemRefContext, type MessageId, type Messages, MultipleReactiveDataProvider, type MultipleReactiveDataProviderEntity, type MultipleReactiveDataProviderProps, OrderActionProvider, type OrderActionProviderProps, PageReactiveDataRoot, type PageReactiveDataRootProps, PaymentActionProvider, type PaymentActionProviderProps, ReactiveDataProvider, type ReactiveDataProviderProps, ReactiveListItemDataProvider, type ReactiveListItemDataProviderProps, ReactiveRootContext, type ReactiveRootContextValue, RegionActionProvider, type RegionActionProviderProps, RouteIdentityProvider, type RouteIdentityProviderProps, RouteMapProvider, type RouteMapProviderProps, type SelectedVariant, SessionActionProvider, type SessionActionProviderProps, ShippingActionProvider, type ShippingActionProviderProps, StorefrontProvider, type StorefrontProviderProps, type ToLogicalPath, buildOptimisticDecrease, buildOptimisticIncrease, buildOptimisticRemove, buildStorefrontContextHeaders, cartCouponErrorsVar, cartLastAddVar, cartUserErrorsVar, gql, miniCartOpenVar, orderFormIdVar, publishedVariantIdFor, reportNotFoundRequest, selectedVariantVar, useDataOverride, useListItemRef };
34
+ export { AddressActionProvider, type AddressActionProviderProps, AnalyticsActionProvider, type AnalyticsActionProviderProps, BindingSwitchProvider, type BindingSwitchProviderProps, CartActionProvider, type CartActionProviderProps, type ClientVariablesMap, DataOverrideContext, HotDataProvider, type HotDataProviderProps, IdentityActionProvider, type IdentityActionProviderProps, type ListItemRef, ListItemRefContext, LocaleActionProvider, type LocaleActionProviderProps, type MessageId, type Messages, MultipleReactiveDataProvider, type MultipleReactiveDataProviderEntity, type MultipleReactiveDataProviderProps, OrderActionProvider, type OrderActionProviderProps, PageReactiveDataRoot, type PageReactiveDataRootProps, PaymentActionProvider, type PaymentActionProviderProps, ReactiveDataProvider, type ReactiveDataProviderProps, ReactiveListItemDataProvider, type ReactiveListItemDataProviderProps, ReactiveRootContext, type ReactiveRootContextValue, RegionActionProvider, type RegionActionProviderProps, RouteIdentityProvider, type RouteIdentityProviderProps, RouteMapProvider, type RouteMapProviderProps, SavedCardActionProvider, type SavedCardActionProviderProps, type SelectedVariant, SessionActionProvider, type SessionActionProviderProps, ShippingActionProvider, type ShippingActionProviderProps, StorefrontProvider, type StorefrontProviderProps, type ToLogicalPath, buildOptimisticDecrease, buildOptimisticIncrease, buildOptimisticRemove, buildStorefrontContextHeaders, cartCouponErrorsVar, cartLastAddVar, cartUserErrorsVar, gql, miniCartOpenVar, orderFormIdVar, publishedVariantIdFor, reportNotFoundRequest, selectedVariantVar, useDataOverride, useListItemRef };
@@ -12,9 +12,12 @@ import { AddressActionProvider } from "../sdk/actions/address-action-provider.js
12
12
  import { AnalyticsActionProvider } from "../sdk/actions/analytics-action-provider.js";
13
13
  import { CartActionProvider } from "../sdk/actions/cart-action-provider.js";
14
14
  import { IdentityActionProvider } from "../sdk/actions/identity-action-provider.js";
15
+ import { BindingSwitchProvider } from "../sdk/locale/binding-switch-provider.js";
16
+ import { LocaleActionProvider } from "../sdk/actions/locale-action-provider.js";
15
17
  import { OrderActionProvider } from "../sdk/actions/order-action-provider.js";
16
18
  import { PaymentActionProvider } from "../sdk/actions/payment-action-provider.js";
17
19
  import { RegionActionProvider } from "../sdk/actions/region-action-provider.js";
20
+ import { SavedCardActionProvider } from "../sdk/actions/saved-card-action-provider.js";
18
21
  import { SessionActionProvider } from "../sdk/actions/session-action-provider.js";
19
22
  import { ShippingActionProvider } from "../sdk/actions/shipping-action-provider.js";
20
23
  import "../sdk/actions/index.js";
@@ -27,4 +30,4 @@ import { reportNotFoundRequest } from "../sdk/navigation/not-found-log.js";
27
30
  import { StorefrontProvider } from "../sdk/provider/storefront-provider.js";
28
31
  import "../sdk/provider/index.js";
29
32
  import "../sdk/state/index.js";
30
- export { AddressActionProvider, AnalyticsActionProvider, CartActionProvider, DataOverrideContext, HotDataProvider, IdentityActionProvider, ListItemRefContext, MultipleReactiveDataProvider, OrderActionProvider, PageReactiveDataRoot, PaymentActionProvider, ReactiveDataProvider, ReactiveListItemDataProvider, ReactiveRootContext, RegionActionProvider, RouteIdentityProvider, RouteMapProvider, SessionActionProvider, ShippingActionProvider, StorefrontProvider, buildOptimisticDecrease, buildOptimisticIncrease, buildOptimisticRemove, buildStorefrontContextHeaders, cartCouponErrorsVar, cartLastAddVar, cartUserErrorsVar, gql, miniCartOpenVar, orderFormIdVar, publishedVariantIdFor, reportNotFoundRequest, selectedVariantVar, useDataOverride, useListItemRef };
33
+ export { AddressActionProvider, AnalyticsActionProvider, BindingSwitchProvider, CartActionProvider, DataOverrideContext, HotDataProvider, IdentityActionProvider, ListItemRefContext, LocaleActionProvider, MultipleReactiveDataProvider, OrderActionProvider, PageReactiveDataRoot, PaymentActionProvider, ReactiveDataProvider, ReactiveListItemDataProvider, ReactiveRootContext, RegionActionProvider, RouteIdentityProvider, RouteMapProvider, SavedCardActionProvider, SessionActionProvider, ShippingActionProvider, StorefrontProvider, buildOptimisticDecrease, buildOptimisticIncrease, buildOptimisticRemove, buildStorefrontContextHeaders, cartCouponErrorsVar, cartLastAddVar, cartUserErrorsVar, gql, miniCartOpenVar, orderFormIdVar, publishedVariantIdFor, reportNotFoundRequest, selectedVariantVar, useDataOverride, useListItemRef };
@@ -1,14 +1,16 @@
1
1
  import { resolveStorefrontHref } from "../sdk/navigation/resolve-storefront-href.js";
2
2
  import { buildStorefrontContextHeaders } from "../sdk/context/headers.js";
3
+ import { AlternateBinding, BuildPageAlternatesOptions, CATALOG_ROUTE_ALTERNATES_QUERY, PageAlternates, RouteParams, RouteVariant, buildPageAlternates, catalogClusterPaths, routeLogicalPath } from "../sdk/seo/page-alternates.js";
4
+ import { BindingSwitchRequest, BindingSwitchResult, ResolveBindingSwitchOptions, resolveBindingSwitch } from "../sdk/navigation/binding-switch.js";
3
5
  import { customerOrdersFilter } from "../matter/order-list/customer-orders-filter.js";
4
6
  import { CreateClientOptions, createClient } from "../sdk/client/create-client.js";
5
7
  import { FetchPageDataOptions, FetchPageDataResult, fetchPageData } from "../sdk/client/fetch-page-data.js";
6
8
  import { PreloadQueryRegistry, RegisterPreloadQueryOptions, registerPreloadQuery } from "../sdk/client/register-preload-query.js";
7
9
  import { ContentVariableField, ContentVariablesSpec, VariablesFromContentOptions, variablesFromContent } from "../sdk/data/variables-from-content.js";
8
10
  import { getIntl, loadMessages } from "../sdk/i18n/server.js";
11
+ import { decodeRouteParams } from "../sdk/navigation/decode-route-params.js";
9
12
  import { permanentRedirectToStorefrontPage, redirectToStorefrontPage } from "../sdk/navigation/redirect.js";
10
- import { AlternateBinding, BuildPageAlternatesOptions, CATALOG_ROUTE_ALTERNATES_QUERY, PageAlternates, RouteParams, RouteVariant, buildPageAlternates, catalogClusterPaths, routeLogicalPath } from "../sdk/seo/page-alternates.js";
11
13
  import { ServerSessionRead, readServerSession } from "../sdk/session/read-server-session.js";
12
14
  import { signInTarget } from "../utils/safe-href.js";
13
15
  import { PreloadQueryProps } from "@apollo/client-integration-nextjs";
14
- export { type AlternateBinding, type BuildPageAlternatesOptions, CATALOG_ROUTE_ALTERNATES_QUERY, type ContentVariableField, type ContentVariablesSpec, type CreateClientOptions, type FetchPageDataOptions, type FetchPageDataResult, type PageAlternates, type PreloadQueryProps, type PreloadQueryRegistry, type RegisterPreloadQueryOptions, type RouteParams, type RouteVariant, type ServerSessionRead, type VariablesFromContentOptions, buildPageAlternates, buildStorefrontContextHeaders, catalogClusterPaths, createClient, customerOrdersFilter, fetchPageData, getIntl, loadMessages, permanentRedirectToStorefrontPage, readServerSession, redirectToStorefrontPage, registerPreloadQuery, resolveStorefrontHref, routeLogicalPath, signInTarget, variablesFromContent };
16
+ export { type AlternateBinding, type BindingSwitchRequest, type BindingSwitchResult, type BuildPageAlternatesOptions, CATALOG_ROUTE_ALTERNATES_QUERY, type ContentVariableField, type ContentVariablesSpec, type CreateClientOptions, type FetchPageDataOptions, type FetchPageDataResult, type PageAlternates, type PreloadQueryProps, type PreloadQueryRegistry, type RegisterPreloadQueryOptions, type ResolveBindingSwitchOptions, type RouteParams, type RouteVariant, type ServerSessionRead, type VariablesFromContentOptions, buildPageAlternates, buildStorefrontContextHeaders, catalogClusterPaths, createClient, customerOrdersFilter, decodeRouteParams, fetchPageData, getIntl, loadMessages, permanentRedirectToStorefrontPage, readServerSession, redirectToStorefrontPage, registerPreloadQuery, resolveBindingSwitch, resolveStorefrontHref, routeLogicalPath, signInTarget, variablesFromContent };
@@ -7,7 +7,9 @@ import { fetchPageData } from "../sdk/client/fetch-page-data.js";
7
7
  import { registerPreloadQuery } from "../sdk/client/register-preload-query.js";
8
8
  import { variablesFromContent } from "../sdk/data/variables-from-content.js";
9
9
  import { getIntl, loadMessages } from "../sdk/i18n/server.js";
10
- import { permanentRedirectToStorefrontPage, redirectToStorefrontPage } from "../sdk/navigation/redirect.js";
11
10
  import { CATALOG_ROUTE_ALTERNATES_QUERY, buildPageAlternates, catalogClusterPaths, routeLogicalPath } from "../sdk/seo/page-alternates.js";
11
+ import { decodeRouteParams } from "../sdk/navigation/decode-route-params.js";
12
+ import { resolveBindingSwitch } from "../sdk/navigation/binding-switch.js";
13
+ import { permanentRedirectToStorefrontPage, redirectToStorefrontPage } from "../sdk/navigation/redirect.js";
12
14
  import { readServerSession } from "../sdk/session/read-server-session.js";
13
- export { CATALOG_ROUTE_ALTERNATES_QUERY, buildPageAlternates, buildStorefrontContextHeaders, catalogClusterPaths, createClient, customerOrdersFilter, fetchPageData, getIntl, loadMessages, permanentRedirectToStorefrontPage, readServerSession, redirectToStorefrontPage, registerPreloadQuery, resolveStorefrontHref, routeLogicalPath, signInTarget, variablesFromContent };
15
+ export { CATALOG_ROUTE_ALTERNATES_QUERY, buildPageAlternates, buildStorefrontContextHeaders, catalogClusterPaths, createClient, customerOrdersFilter, decodeRouteParams, fetchPageData, getIntl, loadMessages, permanentRedirectToStorefrontPage, readServerSession, redirectToStorefrontPage, registerPreloadQuery, resolveBindingSwitch, resolveStorefrontHref, routeLogicalPath, signInTarget, variablesFromContent };