@shopify/hydrogen 2026.10.0-preview.4 → 2026.10.0

package/dist/development/react/shopify-scripts.d.mts

@@ -2,11 +2,23 @@ import { ShopifyRoutesOptions, ShopifyScriptTagsOptions } from "../core/shopify-
 import * as React from "react";
 
 //#region src/react/shopify-scripts.d.ts
-type ShopifyScriptsProps = ShopifyScriptTagsOptions & {
+/**
+ * Props for the `ShopifyScripts` component in React and Vue. The component renders Shopify's script
+ * tags and starts the scripts in the browser after hydration. The component starts the scripts
+ * once, with the first props. Later prop changes don't restart the scripts.
+ *
+ * In Next.js App Router, render the component from a client component when you pass a consent `setup` function. Function props can't cross the server-to-client boundary.
+ *
+ * @publicDocs
+ */
+interface ShopifyScriptsProps extends ShopifyScriptTagsOptions {
+  /** Navigates after Shopify's scripts resolve a URL to your app's route. Defaults to a full page load. */
   navigate?: ShopifyRoutesOptions["navigate"];
+  /** Your app's custom route templates, which Shopify's scripts use to match storefront URLs. */
   routes?: ShopifyRoutesOptions["routes"];
+  /** Loads Shopify's WebMCP tools when the browser supports WebMCP. Defaults to `true`. */
   webMcp?: boolean;
-};
+}
 declare module "react" {
   namespace JSX {
     interface IntrinsicElements {
@@ -14,6 +26,15 @@ declare module "react" {
     }
   }
 }
+/**
+ * Renders Shopify's script tags and starts the scripts in the browser after hydration. The component starts the scripts once, with the first props. Later prop changes don't restart the scripts.
+ *
+ * `ShopifyScripts` is a client component. In Next.js App Router, render it from a client component when you pass a consent `setup` function. Function props can't cross the server-to-client boundary.
+ *
+ * @param options - The script tag options, plus the consent, route, and WebMCP settings for starting the scripts.
+ * @returns Shopify's link and script tags, with the link tags first.
+ * @publicDocs
+ */
 declare function ShopifyScripts(options: ShopifyScriptsProps): React.FunctionComponentElement<React.FragmentProps>;
 //#endregion
 export { ShopifyScripts, ShopifyScriptsProps };

package/dist/development/react/shopify-scripts.mjs

@@ -5,6 +5,15 @@ import { getShopifyScriptTags } from "../core/shopify-scripts/index.mjs";
 import { Fragment, createElement, useEffect } from "react";
 
 //#region src/react/shopify-scripts.tsx
+/**
+* Renders Shopify's script tags and starts the scripts in the browser after hydration. The component starts the scripts once, with the first props. Later prop changes don't restart the scripts.
+*
+* `ShopifyScripts` is a client component. In Next.js App Router, render it from a client component when you pass a consent `setup` function. Function props can't cross the server-to-client boundary.
+*
+* @param options - The script tag options, plus the consent, route, and WebMCP settings for starting the scripts.
+* @returns Shopify's link and script tags, with the link tags first.
+* @publicDocs
+*/
 function ShopifyScripts(options) {
 	const { consent, navigate, routes, webMcp = true, ...scriptOptions } = options;
 	useEffect(() => {

package/dist/development/react/shopify-scripts.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shopify-scripts.mjs","names":[],"sources":["../../../src/react/shopify-scripts.tsx"],"sourcesContent":["\"use client\";\n\nimport { createElement, Fragment, useEffect } from \"react\";\nimport type * as React from \"react\";\n\nimport {\n  getShopifyScriptTags,\n  initializeShopifyScripts,\n  type ShopifyRoutesOptions,\n  type ShopifyScriptTagsOptions,\n} from \"../core/shopify-scripts\";\n\nexport type ShopifyScriptsProps = ShopifyScriptTagsOptions & {\n  navigate?: ShopifyRoutesOptions[\"navigate\"];\n  routes?: ShopifyRoutesOptions[\"routes\"];\n  webMcp?: boolean;\n};\n\ndeclare module \"react\" {\n  namespace JSX {\n    interface IntrinsicElements {\n      \"shopify-chat\": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;\n    }\n  }\n}\n\nexport function ShopifyScripts(options: ShopifyScriptsProps) {\n  const { consent, navigate, routes, webMcp = true, ...scriptOptions } = options;\n\n  useEffect(() => {\n    void initializeShopifyScripts({ consent, navigate, routes, webMcp });\n    // oxlint-disable-next-line react-hooks/exhaustive-deps -- ShopifyScripts browser startup is initialized once from initial props.\n  }, []);\n\n  return createElement(\n    Fragment,\n    null,\n    getShopifyScriptTags({ ...scriptOptions, consent }).tags.map(\n      ({ tagName, attributes, innerHTML }, index) =>\n        createElement(tagName, {\n          key: index,\n          ...getReactAttributes(attributes),\n          ...(innerHTML ? { dangerouslySetInnerHTML: { __html: innerHTML } } : {}),\n        }),\n    ),\n  );\n}\n\nfunction getReactAttributes(attributes: Record<string, string | boolean> = {}) {\n  const reactAttributes = Object.fromEntries(\n    Object.entries(attributes).map(([name, value]) => [\n      name === \"crossorigin\" ? \"crossOrigin\" : name,\n      value,\n    ]),\n  );\n\n  if (attributes.nonce !== undefined) {\n    // Browsers intentionally hide nonce content attributes from getAttribute(),\n    // which can make React report a false hydration mismatch for SSR scripts.\n    reactAttributes.suppressHydrationWarning = true;\n  }\n\n  if (attributes.async === true && typeof attributes.src === \"string\") {\n    // React hoists async scripts without handlers, which can let them execute before\n    // the inline Shopify bootstrap scripts that configure their globals.\n    return { ...reactAttributes, onLoad: disableReactScriptHoisting };\n  }\n\n  return reactAttributes;\n}\n\nconst disableReactScriptHoisting = () => {};\n"],"mappings":";;;;;;;AA0BA,SAAgB,eAAe,SAA8B;CAC3D,MAAM,EAAE,SAAS,UAAU,QAAQ,SAAS,MAAM,GAAG,kBAAkB;AAEvE,iBAAgB;AACd,EAAK,yBAAyB;GAAE;GAAS;GAAU;GAAQ;GAAQ,CAAC;IAEnE,EAAE,CAAC;AAEN,QAAO,cACL,UACA,MACA,qBAAqB;EAAE,GAAG;EAAe;EAAS,CAAC,CAAC,KAAK,KACtD,EAAE,SAAS,YAAY,aAAa,UACnC,cAAc,SAAS;EACrB,KAAK;EACL,GAAG,mBAAmB,WAAW;EACjC,GAAI,YAAY,EAAE,yBAAyB,EAAE,QAAQ,WAAW,EAAE,GAAG,EAAE;EACxE,CAAC,CACL,CACF;;AAGH,SAAS,mBAAmB,aAA+C,EAAE,EAAE;CAC7E,MAAM,kBAAkB,OAAO,YAC7B,OAAO,QAAQ,WAAW,CAAC,KAAK,CAAC,MAAM,WAAW,CAChD,SAAS,gBAAgB,gBAAgB,MACzC,MACD,CAAC,CACH;AAED,KAAI,WAAW,UAAU,OAGvB,iBAAgB,2BAA2B;AAG7C,KAAI,WAAW,UAAU,QAAQ,OAAO,WAAW,QAAQ,SAGzD,QAAO;EAAE,GAAG;EAAiB,QAAQ;EAA4B;AAGnE,QAAO;;AAGT,MAAM,mCAAmC"}
+{"version":3,"file":"shopify-scripts.mjs","names":[],"sources":["../../../src/react/shopify-scripts.tsx"],"sourcesContent":["\"use client\";\n\nimport { createElement, Fragment, useEffect } from \"react\";\nimport type * as React from \"react\";\n\nimport {\n  getShopifyScriptTags,\n  initializeShopifyScripts,\n  type ShopifyRoutesOptions,\n  type ShopifyScriptTagsOptions,\n} from \"../core/shopify-scripts\";\n\n/**\n * Props for the `ShopifyScripts` component in React and Vue. The component renders Shopify's script\n * tags and starts the scripts in the browser after hydration. The component starts the scripts\n * once, with the first props. Later prop changes don't restart the scripts.\n *\n * In Next.js App Router, render the component from a client component when you pass a consent `setup` function. Function props can't cross the server-to-client boundary.\n *\n * @publicDocs\n */\nexport interface ShopifyScriptsProps extends ShopifyScriptTagsOptions {\n  /** Navigates after Shopify's scripts resolve a URL to your app's route. Defaults to a full page load. */\n  navigate?: ShopifyRoutesOptions[\"navigate\"];\n  /** Your app's custom route templates, which Shopify's scripts use to match storefront URLs. */\n  routes?: ShopifyRoutesOptions[\"routes\"];\n  /** Loads Shopify's WebMCP tools when the browser supports WebMCP. Defaults to `true`. */\n  webMcp?: boolean;\n}\n\ndeclare module \"react\" {\n  namespace JSX {\n    interface IntrinsicElements {\n      \"shopify-chat\": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;\n    }\n  }\n}\n\n/**\n * Renders Shopify's script tags and starts the scripts in the browser after hydration. The component starts the scripts once, with the first props. Later prop changes don't restart the scripts.\n *\n * `ShopifyScripts` is a client component. In Next.js App Router, render it from a client component when you pass a consent `setup` function. Function props can't cross the server-to-client boundary.\n *\n * @param options - The script tag options, plus the consent, route, and WebMCP settings for starting the scripts.\n * @returns Shopify's link and script tags, with the link tags first.\n * @publicDocs\n */\nexport function ShopifyScripts(options: ShopifyScriptsProps) {\n  const { consent, navigate, routes, webMcp = true, ...scriptOptions } = options;\n\n  useEffect(() => {\n    void initializeShopifyScripts({ consent, navigate, routes, webMcp });\n    // oxlint-disable-next-line react-hooks/exhaustive-deps -- ShopifyScripts browser startup is initialized once from initial props.\n  }, []);\n\n  return createElement(\n    Fragment,\n    null,\n    getShopifyScriptTags({ ...scriptOptions, consent }).tags.map(\n      ({ tagName, attributes, innerHTML }, index) =>\n        createElement(tagName, {\n          key: index,\n          ...getReactAttributes(attributes),\n          ...(innerHTML ? { dangerouslySetInnerHTML: { __html: innerHTML } } : {}),\n        }),\n    ),\n  );\n}\n\nfunction getReactAttributes(attributes: Record<string, string | boolean> = {}) {\n  const reactAttributes = Object.fromEntries(\n    Object.entries(attributes).map(([name, value]) => [\n      name === \"crossorigin\" ? \"crossOrigin\" : name,\n      value,\n    ]),\n  );\n\n  if (attributes.nonce !== undefined) {\n    // Browsers intentionally hide nonce content attributes from getAttribute(),\n    // which can make React report a false hydration mismatch for SSR scripts.\n    reactAttributes.suppressHydrationWarning = true;\n  }\n\n  if (attributes.async === true && typeof attributes.src === \"string\") {\n    // React hoists async scripts without handlers, which can let them execute before\n    // the inline Shopify bootstrap scripts that configure their globals.\n    return { ...reactAttributes, onLoad: disableReactScriptHoisting };\n  }\n\n  return reactAttributes;\n}\n\nconst disableReactScriptHoisting = () => {};\n"],"mappings":";;;;;;;;;;;;;;;;AA+CA,SAAgB,eAAe,SAA8B;CAC3D,MAAM,EAAE,SAAS,UAAU,QAAQ,SAAS,MAAM,GAAG,kBAAkB;AAEvE,iBAAgB;AACd,EAAK,yBAAyB;GAAE;GAAS;GAAU;GAAQ;GAAQ,CAAC;IAEnE,EAAE,CAAC;AAEN,QAAO,cACL,UACA,MACA,qBAAqB;EAAE,GAAG;EAAe;EAAS,CAAC,CAAC,KAAK,KACtD,EAAE,SAAS,YAAY,aAAa,UACnC,cAAc,SAAS;EACrB,KAAK;EACL,GAAG,mBAAmB,WAAW;EACjC,GAAI,YAAY,EAAE,yBAAyB,EAAE,QAAQ,WAAW,EAAE,GAAG,EAAE;EACxE,CAAC,CACL,CACF;;AAGH,SAAS,mBAAmB,aAA+C,EAAE,EAAE;CAC7E,MAAM,kBAAkB,OAAO,YAC7B,OAAO,QAAQ,WAAW,CAAC,KAAK,CAAC,MAAM,WAAW,CAChD,SAAS,gBAAgB,gBAAgB,MACzC,MACD,CAAC,CACH;AAED,KAAI,WAAW,UAAU,OAGvB,iBAAgB,2BAA2B;AAG7C,KAAI,WAAW,UAAU,QAAQ,OAAO,WAAW,QAAQ,SAGzD,QAAO;EAAE,GAAG;EAAiB,QAAQ;EAA4B;AAGnE,QAAO;;AAGT,MAAM,mCAAmC"}

package/dist/development/vue/cart.d.mts

@@ -18,18 +18,20 @@ type TypedCartProvider<TData extends CartData> = {
     };
   };
 };
+/** Cart provider and composables whose cart state carries the custom fields from your cart server handlers. */
 type TypedCartComponents<TData extends CartData> = {
-  CartProvider: TypedCartProvider<TData>;
-  useCart: TypedUseCart<TData>;
-  useOptionalCart: TypedUseOptionalCart<TData>;
-  useCartActions: typeof useCartActions;
+  /** The provider that creates the cart store. The provider connects the store on mount and destroys the store on unmount. */CartProvider: TypedCartProvider<TData>; /** Returns cart state as a read-only shallow ref. The selector is optional. Without a selector, the ref holds the full cart state. */
+  useCart: TypedUseCart<TData>; /** Returns the slice of cart state that the selector picks as a read-only shallow ref. Outside the provider, the ref holds `undefined`. */
+  useOptionalCart: TypedUseOptionalCart<TData>; /** Returns the `refresh` action. Call `refresh` after a server-side cart mutation that bypasses cart forms. */
+  useCartActions: typeof useCartActions; /** Returns form props, a register function, and pending state for cart forms. */
   useCartForm: typeof useCartForm;
 };
 /**
- * Returns cart actions for reconciling state after out-of-band mutations.
+ * Returns the cart action that syncs the cart after a mutation outside cart forms.
  *
- * Currently exposes {@link CartStore.refresh} — call it after server-side cart
- * mutations that bypass the form system.
+ * Call `refresh` after a server-side cart mutation that bypasses cart forms, such as a server action that creates the cart.
+ *
+ * @returns The `refresh` action.
  *
  * @example
  * ```vue
@@ -42,13 +44,13 @@ type TypedCartComponents<TData extends CartData> = {
  * }
  * </script>
  * ```
+ * @publicDocs
  */
 declare function useCartActions(): CartActions;
 /**
- * Subscribes the {@link CartStore} to the analytics event dispatcher.
+ * Publishes cart analytics events when the cart changes.
  *
- * Call once near the root of your app. Starts tracking on mount via `onMounted`
- * and cleans up via `onScopeDispose`.
+ * Call the composable once near the root of your app. The composable starts tracking on mount and stops when the component's scope ends. The composable throws when you call it outside the cart provider.
  *
  * @example
  * ```vue
@@ -56,19 +58,19 @@ declare function useCartActions(): CartActions;
  * useCartAnalytics();
  * </script>
  * ```
+ * @publicDocs
  */
 declare function useCartAnalytics(): void;
 /**
- * Returns form props, a field register function, and reactive pending state
- * for building cart forms in Vue.
+ * Returns form props, a register function, and pending state for cart forms.
+ *
+ * The form props post to the cart endpoint and send each submission through the cart store. A `beforeSubmit` callback that prevents the event's default skips the cart submission.
  *
- * Unlike the React hook, the Vue variant includes `isPending` — a reactive
- * object with `initial` (`ComputedRef<boolean>`) for the initial cart load
- * and `lines(lineId?)` for checking per-line or any-line pending state.
+ * The pending state holds a computed ref that's `true` during a full cart load, and a function that checks whether one line or any line has a mutation in flight.
  *
- * Note: `interactive: true` returns numeric input attributes but does **not**
- * auto-submit on change — that behavior requires `attachQuantityInput`, which
- * is only wired by the React adapter.
+ * Registering the quantity field with `interactive: true` returns numeric input attributes without auto-submit. Call attachQuantityInput on the input to submit the form when the quantity changes.
+ *
+ * @returns The form props function, the register function, and the pending state.
  *
  * @example
  * ```vue
@@ -87,6 +89,7 @@ declare function useCartAnalytics(): void;
  *   </form>
  * </template>
  * ```
+ * @publicDocs
  */
 declare function useCartForm(): {
   formProps: (opts?: {
@@ -100,11 +103,12 @@ declare function useCartForm(): {
   };
 };
 /**
- * Factory that returns typed cart components and composables matched to your
- * server handler's cart query shape.
+ * Returns a cart provider and composables typed to the cart query in your cart server handlers.
+ * Pass the type of your cart server handlers as the `THandlers` type argument. Every composable's cart state then includes your custom cart fields.
+ *
+ * On mount, the provider points cart requests at `/api/cart` and connects the store. Every composable except the optional cart composable throws when you call it outside the provider.
  *
- * The generic `THandlers` parameter is inferred from your `createCartServerHandlers`
- * call, so every composable's {@link CartState} carries your custom cart fields.
+ * @returns The typed cart provider, the cart state composables, and the cart actions and form composables.
  *
  * @example
  * ```ts
@@ -118,8 +122,9 @@ declare function useCartForm(): {
  *   useCartForm,
  * } = createCartComponents<typeof cartServerHandlers>();
  * ```
+ * @publicDocs
  */
 declare function createCartComponents<THandlers>(): TypedCartComponents<CartDataFromHandlers<THandlers>>;
 //#endregion
-export { createCartComponents, useCartActions, useCartAnalytics };
+export { createCartComponents, useCartAnalytics };
 //# sourceMappingURL=cart.d.mts.map

package/dist/development/vue/cart.mjs

@@ -26,11 +26,9 @@ function useOptionalCartStore() {
 	return inject(CartStoreKey, null);
 }
 /**
-* Vue component that creates and manages a {@link CartStore} instance.
+* Creates a cart store and shares the store with the cart composables below the provider.
 *
-* Calls {@link CartStore.connect} on mount and {@link CartStore.destroy} on unmount.
-* All cart composables (`useCart`, `useCartForm`, `useCartActions`) must be
-* descendants of this component.
+* The provider connects the store on mount and destroys the store on unmount. Render every cart composable inside the provider. The provider creates its store once from the first initial data and ignores later changes.
 *
 * @example
 * ```vue
@@ -38,6 +36,7 @@ function useOptionalCartStore() {
 *   <App />
 * </CartProvider>
 * ```
+* @publicDocs
 */
 const CartProvider = defineComponent({
 	name: "CartProvider",
@@ -62,10 +61,11 @@ function useCart(selector, isEqual) {
 	return useCartSelector(useCartStore("useCart"), selector ?? ((state) => state), isEqual);
 }
 /**
-* Returns cart actions for reconciling state after out-of-band mutations.
+* Returns the cart action that syncs the cart after a mutation outside cart forms.
 *
-* Currently exposes {@link CartStore.refresh} — call it after server-side cart
-* mutations that bypass the form system.
+* Call `refresh` after a server-side cart mutation that bypasses cart forms, such as a server action that creates the cart.
+*
+* @returns The `refresh` action.
 *
 * @example
 * ```vue
@@ -78,15 +78,15 @@ function useCart(selector, isEqual) {
 * }
 * <\/script>
 * ```
+* @publicDocs
 */
 function useCartActions() {
 	return { refresh: useCartStore("useCartActions").refresh };
 }
 /**
-* Subscribes the {@link CartStore} to the analytics event dispatcher.
+* Publishes cart analytics events when the cart changes.
 *
-* Call once near the root of your app. Starts tracking on mount via `onMounted`
-* and cleans up via `onScopeDispose`.
+* Call the composable once near the root of your app. The composable starts tracking on mount and stops when the component's scope ends. The composable throws when you call it outside the cart provider.
 *
 * @example
 * ```vue
@@ -94,6 +94,7 @@ function useCartActions() {
 * useCartAnalytics();
 * <\/script>
 * ```
+* @publicDocs
 */
 function useCartAnalytics() {
 	const store = useCartStore("useCartAnalytics");
@@ -104,8 +105,22 @@ function useCartAnalytics() {
 	onScopeDispose(() => stopTracking?.());
 }
 /**
-* Like `useCart`, but returns `undefined` when rendered outside a `<CartProvider>`.
-* @internal
+* Returns the slice of cart state that the selector picks as a read-only shallow ref. Outside the cart provider, the ref holds `undefined`.
+*
+* Use the composable in a component that also renders above the provider, such as a header cart badge on an error page.
+* Wherever the provider always exists, use the cart composable that throws. A missing provider then fails with an error.
+*
+* @example
+* ```vue
+* <script setup>
+* const count = useOptionalCart((state) => state.data.totalQuantity);
+* <\/script>
+*
+* <template>
+*   <span v-if="count !== undefined">Cart ({{ count }})</span>
+* </template>
+* ```
+* @publicDocs
 */
 function useOptionalCart(selector, isEqual) {
 	const store = useOptionalCartStore();
@@ -122,16 +137,15 @@ function useCartSelector(store, selector, isEqual) {
 	return selected;
 }
 /**
-* Returns form props, a field register function, and reactive pending state
-* for building cart forms in Vue.
+* Returns form props, a register function, and pending state for cart forms.
 *
-* Unlike the React hook, the Vue variant includes `isPending` — a reactive
-* object with `initial` (`ComputedRef<boolean>`) for the initial cart load
-* and `lines(lineId?)` for checking per-line or any-line pending state.
+* The form props post to the cart endpoint and send each submission through the cart store. A `beforeSubmit` callback that prevents the event's default skips the cart submission.
 *
-* Note: `interactive: true` returns numeric input attributes but does **not**
-* auto-submit on change — that behavior requires `attachQuantityInput`, which
-* is only wired by the React adapter.
+* The pending state holds a computed ref that's `true` during a full cart load, and a function that checks whether one line or any line has a mutation in flight.
+*
+* Registering the quantity field with `interactive: true` returns numeric input attributes without auto-submit. Call attachQuantityInput on the input to submit the form when the quantity changes.
+*
+* @returns The form props function, the register function, and the pending state.
 *
 * @example
 * ```vue
@@ -150,6 +164,7 @@ function useCartSelector(store, selector, isEqual) {
 *   </form>
 * </template>
 * ```
+* @publicDocs
 */
 function useCartForm() {
 	const store = useCartStore("useCartForm");
@@ -177,11 +192,12 @@ function useCartForm() {
 	};
 }
 /**
-* Factory that returns typed cart components and composables matched to your
-* server handler's cart query shape.
+* Returns a cart provider and composables typed to the cart query in your cart server handlers.
+* Pass the type of your cart server handlers as the `THandlers` type argument. Every composable's cart state then includes your custom cart fields.
+*
+* On mount, the provider points cart requests at `/api/cart` and connects the store. Every composable except the optional cart composable throws when you call it outside the provider.
 *
-* The generic `THandlers` parameter is inferred from your `createCartServerHandlers`
-* call, so every composable's {@link CartState} carries your custom cart fields.
+* @returns The typed cart provider, the cart state composables, and the cart actions and form composables.
 *
 * @example
 * ```ts
@@ -195,6 +211,7 @@ function useCartForm() {
 *   useCartForm,
 * } = createCartComponents<typeof cartServerHandlers>();
 * ```
+* @publicDocs
 */
 function createCartComponents() {
 	const TypedCartProvider = createTypedCartProvider();
@@ -213,5 +230,5 @@ function createCartComponents() {
 }
 
 //#endregion
-export { createCartComponents, getCartEndpoint, useCartActions, useCartAnalytics, useCartStore };
+export { createCartComponents, getCartEndpoint, useCartAnalytics, useCartStore };
 //# sourceMappingURL=cart.mjs.map

package/dist/development/vue/cart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cart.mjs","names":[],"sources":["../../../src/vue/cart.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  onMounted,\n  onScopeDispose,\n  onUnmounted,\n  provide,\n  shallowRef,\n  type ComputedRef,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport { trackCartAnalytics } from \"../core/analytics/cart-tracker\";\nimport {\n  configureCartEndpoint as configureCoreCartEndpoint,\n  createCartStore,\n  type CreateCartStoreOptions,\n  type CartActions,\n  type CartStore,\n} from \"../core/cart/cart\";\nimport { createCartFormRegister, type CartFormRegister } from \"../core/cart/form\";\nimport type { CartDataFromHandlers } from \"../core/cart/server-handlers\";\nimport type { CartData, CartState } from \"../core/cart/state\";\n\nconst DEFAULT_CART_ENDPOINT = \"/api/cart\";\n\nlet cartEndpoint = DEFAULT_CART_ENDPOINT;\n\nconst CartStoreKey: InjectionKey<CartStore> = Symbol(\"CartStore\");\n\nexport function configureCartEndpoint(endpoint: string): void {\n  cartEndpoint = endpoint;\n  configureCoreCartEndpoint(endpoint);\n}\n\nexport function getCartEndpoint(): string {\n  return cartEndpoint;\n}\n\ntype TypedUseCart<TData extends CartData> = {\n  (): Readonly<ShallowRef<CartState<TData>>>;\n  <S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ): Readonly<ShallowRef<S>>;\n};\n\ntype TypedUseOptionalCart<TData extends CartData> = <S>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n) => Readonly<ShallowRef<S | undefined>>;\n\ntype CartInitialData<TData extends CartData = CartData> =\n  CreateCartStoreOptions<TData>[\"initialData\"];\n\ntype TypedCartProvider<TData extends CartData> = {\n  new (): { $props: { initialData?: CartInitialData<TData> } };\n};\n\nexport type { CartActions };\n\ntype TypedCartComponents<TData extends CartData> = {\n  CartProvider: TypedCartProvider<TData>;\n  useCart: TypedUseCart<TData>;\n  useOptionalCart: TypedUseOptionalCart<TData>;\n  useCartActions: typeof useCartActions;\n  useCartForm: typeof useCartForm;\n};\n\nfunction createTypedCartProvider<TData extends CartData>(): TypedCartProvider<TData> {\n  const TypedCartProvider = defineComponent(\n    (props: { initialData?: CartInitialData<TData> }, { slots }) => {\n      return () =>\n        h(\n          CartProvider,\n          { initialData: props.initialData as CartInitialData | undefined },\n          slots.default,\n        );\n    },\n    { name: \"CartProvider\", props: [\"initialData\"] },\n  );\n\n  return TypedCartProvider as unknown as TypedCartProvider<TData>;\n}\n\nexport function useCartStore(composableName = \"useCartStore\"): CartStore {\n  const store = inject(CartStoreKey, null);\n  if (!store) {\n    throw new Error(`${composableName} must be used inside a <CartProvider>.`);\n  }\n  return store;\n}\n\nfunction useOptionalCartStore(): CartStore | null {\n  return inject(CartStoreKey, null);\n}\n\n/**\n * Vue component that creates and manages a {@link CartStore} instance.\n *\n * Calls {@link CartStore.connect} on mount and {@link CartStore.destroy} on unmount.\n * All cart composables (`useCart`, `useCartForm`, `useCartActions`) must be\n * descendants of this component.\n *\n * @example\n * ```vue\n * <CartProvider :initialData=\"{ cart: loaderData.cart }\">\n *   <App />\n * </CartProvider>\n * ```\n */\nexport const CartProvider = defineComponent({\n  name: \"CartProvider\",\n  props: {\n    initialData: {\n      type: Object as PropType<CartInitialData>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const store = createCartStore({ initialData: props.initialData });\n    provide(CartStoreKey, store);\n\n    onMounted(() => {\n      configureCoreCartEndpoint(cartEndpoint);\n      store.connect();\n    });\n\n    onUnmounted(() => {\n      store.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n\n/**\n * Subscribes to {@link CartState} as a Vue `ShallowRef`.\n *\n * Without a selector, returns the full `CartState`. With a selector, returns\n * a `ShallowRef` of the selected slice — the ref updates only when the\n * selected value changes (by reference, or by custom `isEqual`).\n *\n * @example\n * ```vue\n * <script setup>\n * // Full state\n * const state = useCart();\n *\n * // Selected slice — re-renders only when lines change\n * const lines = useCart((s) => s.data.lines.nodes);\n *\n * // Check if a specific line is pending\n * const isPending = useCart((s) => s.pending.lines.has(lineId));\n * </script>\n * ```\n */\nexport function useCart(): Readonly<ShallowRef<CartState>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector?: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | CartState>> {\n  const store = useCartStore(\"useCart\");\n  const resolve = selector ?? ((state: CartState<TData>) => state as unknown as S);\n  return useCartSelector(store, resolve, isEqual) as Readonly<ShallowRef<S>>;\n}\n\n/**\n * Returns cart actions for reconciling state after out-of-band mutations.\n *\n * Currently exposes {@link CartStore.refresh} — call it after server-side cart\n * mutations that bypass the form system.\n *\n * @example\n * ```vue\n * <script setup>\n * const { refresh } = useCartActions();\n *\n * async function handleServerAction() {\n *   await createCartOnServer();\n *   refresh();\n * }\n * </script>\n * ```\n */\nexport function useCartActions(): CartActions {\n  const store = useCartStore(\"useCartActions\");\n  return { refresh: store.refresh };\n}\n\n/**\n * Subscribes the {@link CartStore} to the analytics event dispatcher.\n *\n * Call once near the root of your app. Starts tracking on mount via `onMounted`\n * and cleans up via `onScopeDispose`.\n *\n * @example\n * ```vue\n * <script setup>\n * useCartAnalytics();\n * </script>\n * ```\n */\nexport function useCartAnalytics(): void {\n  const store = useCartStore(\"useCartAnalytics\");\n  let stopTracking: (() => void) | undefined;\n\n  onMounted(() => {\n    stopTracking = trackCartAnalytics(store);\n  });\n\n  onScopeDispose(() => stopTracking?.());\n}\n\n/**\n * Like `useCart`, but returns `undefined` when rendered outside a `<CartProvider>`.\n * @internal\n */\nexport function useOptionalCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | undefined>> {\n  const store = useOptionalCartStore();\n  if (!store) return shallowRef<S | undefined>(undefined);\n  return useCartSelector(store, selector, isEqual);\n}\n\nfunction useCartSelector<TData extends CartData = CartData, S = unknown>(\n  store: CartStore,\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>> {\n  const selected = shallowRef<S>(selector(store.getState() as CartState<TData>));\n\n  const unsubscribe = store.subscribe(() => {\n    const next = selector(store.getState() as CartState<TData>);\n    if (isEqual?.(selected.value, next)) return;\n    selected.value = next;\n  });\n\n  onScopeDispose(unsubscribe);\n\n  return selected as Readonly<ShallowRef<S>>;\n}\n\n/**\n * Returns form props, a field register function, and reactive pending state\n * for building cart forms in Vue.\n *\n * Unlike the React hook, the Vue variant includes `isPending` — a reactive\n * object with `initial` (`ComputedRef<boolean>`) for the initial cart load\n * and `lines(lineId?)` for checking per-line or any-line pending state.\n *\n * Note: `interactive: true` returns numeric input attributes but does **not**\n * auto-submit on change — that behavior requires `attachQuantityInput`, which\n * is only wired by the React adapter.\n *\n * @example\n * ```vue\n * <script setup>\n * const { formProps, register, isPending } = useCartForm();\n * </script>\n *\n * <template>\n *   <form v-bind=\"formProps()\">\n *     <input v-bind=\"register('lineId', { value: line.id })\" />\n *     <input v-bind=\"register('quantity', { value: line.quantity })\" />\n *     <button v-bind=\"register('set')\" />\n *     <button v-bind=\"register('increase')\">+</button>\n *     <button v-bind=\"register('decrease')\">−</button>\n *     <span v-if=\"isPending.lines(line.id)\">Updating…</span>\n *   </form>\n * </template>\n * ```\n */\nexport function useCartForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n  register: CartFormRegister;\n  isPending: {\n    initial: ComputedRef<boolean>;\n    lines: (lineId?: string) => boolean;\n  };\n} {\n  const store = useCartStore(\"useCartForm\");\n  const loading = useCart((s) => s.loading);\n  const pendingLines = useCart((s) => s.pending.lines);\n  const register = createCartFormRegister();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: SubmitEvent) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      store.handleFormSubmit(e).catch(() => {});\n      opts?.afterSubmit?.(e);\n    },\n    method: \"post\",\n    action: cartEndpoint,\n  });\n\n  const isPending = {\n    initial: computed(() => loading.value),\n    lines: (lineId?: string): boolean =>\n      lineId ? pendingLines.value.has(lineId) : pendingLines.value.size > 0,\n  };\n\n  return { formProps, register, isPending };\n}\n\n/**\n * Factory that returns typed cart components and composables matched to your\n * server handler's cart query shape.\n *\n * The generic `THandlers` parameter is inferred from your `createCartServerHandlers`\n * call, so every composable's {@link CartState} carries your custom cart fields.\n *\n * @example\n * ```ts\n * import type { cartServerHandlers } from \"./server/cart.server\";\n *\n * const {\n *   CartProvider,\n *   useCart,\n *   useOptionalCart,\n *   useCartActions,\n *   useCartForm,\n * } = createCartComponents<typeof cartServerHandlers>();\n * ```\n */\nexport function createCartComponents<THandlers>(): TypedCartComponents<\n  CartDataFromHandlers<THandlers>\n> {\n  type TData = CartDataFromHandlers<THandlers>;\n  const TypedCartProvider = createTypedCartProvider<TData>();\n\n  const useTypedCart = ((\n    selector?: (state: CartState<TData>) => unknown,\n    isEqual?: (a: unknown, b: unknown) => boolean,\n  ) => {\n    if (!selector) return useCart() as Readonly<ShallowRef<CartState<TData>>>;\n    return useCart<TData, unknown>(selector, isEqual);\n  }) as TypedUseCart<TData>;\n\n  const useTypedOptionalCart = (<S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ) => useOptionalCart<TData, S>(selector, isEqual)) as TypedUseOptionalCart<TData>;\n\n  return {\n    CartProvider: TypedCartProvider,\n    useCart: useTypedCart,\n    useOptionalCart: useTypedOptionalCart,\n    useCartActions,\n    useCartForm,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"cart.mjs","names":[],"sources":["../../../src/vue/cart.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  onMounted,\n  onScopeDispose,\n  onUnmounted,\n  provide,\n  shallowRef,\n  type ComputedRef,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport { trackCartAnalytics } from \"../core/analytics/cart-tracker\";\nimport {\n  configureCartEndpoint as configureCoreCartEndpoint,\n  createCartStore,\n  type CreateCartStoreOptions,\n  type CartActions,\n  type CartStore,\n} from \"../core/cart/cart\";\nimport { createCartFormRegister, type CartFormRegister } from \"../core/cart/form\";\nimport type { CartDataFromHandlers } from \"../core/cart/server-handlers\";\nimport type { CartData, CartState } from \"../core/cart/state\";\n\nconst DEFAULT_CART_ENDPOINT = \"/api/cart\";\n\nlet cartEndpoint = DEFAULT_CART_ENDPOINT;\n\nconst CartStoreKey: InjectionKey<CartStore> = Symbol(\"CartStore\");\n\nexport function configureCartEndpoint(endpoint: string): void {\n  cartEndpoint = endpoint;\n  configureCoreCartEndpoint(endpoint);\n}\n\nexport function getCartEndpoint(): string {\n  return cartEndpoint;\n}\n\ntype TypedUseCart<TData extends CartData> = {\n  (): Readonly<ShallowRef<CartState<TData>>>;\n  <S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ): Readonly<ShallowRef<S>>;\n};\n\ntype TypedUseOptionalCart<TData extends CartData> = <S>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n) => Readonly<ShallowRef<S | undefined>>;\n\ntype CartInitialData<TData extends CartData = CartData> =\n  CreateCartStoreOptions<TData>[\"initialData\"];\n\ntype TypedCartProvider<TData extends CartData> = {\n  new (): { $props: { initialData?: CartInitialData<TData> } };\n};\n\nexport type { CartActions };\n\n/** Cart provider and composables whose cart state carries the custom fields from your cart server handlers. */\ntype TypedCartComponents<TData extends CartData> = {\n  /** The provider that creates the cart store. The provider connects the store on mount and destroys the store on unmount. */\n  CartProvider: TypedCartProvider<TData>;\n  /** Returns cart state as a read-only shallow ref. The selector is optional. Without a selector, the ref holds the full cart state. */\n  useCart: TypedUseCart<TData>;\n  /** Returns the slice of cart state that the selector picks as a read-only shallow ref. Outside the provider, the ref holds `undefined`. */\n  useOptionalCart: TypedUseOptionalCart<TData>;\n  /** Returns the `refresh` action. Call `refresh` after a server-side cart mutation that bypasses cart forms. */\n  useCartActions: typeof useCartActions;\n  /** Returns form props, a register function, and pending state for cart forms. */\n  useCartForm: typeof useCartForm;\n};\n\nfunction createTypedCartProvider<TData extends CartData>(): TypedCartProvider<TData> {\n  const TypedCartProvider = defineComponent(\n    (props: { initialData?: CartInitialData<TData> }, { slots }) => {\n      return () =>\n        h(\n          CartProvider,\n          { initialData: props.initialData as CartInitialData | undefined },\n          slots.default,\n        );\n    },\n    { name: \"CartProvider\", props: [\"initialData\"] },\n  );\n\n  return TypedCartProvider as unknown as TypedCartProvider<TData>;\n}\n\nexport function useCartStore(composableName = \"useCartStore\"): CartStore {\n  const store = inject(CartStoreKey, null);\n  if (!store) {\n    throw new Error(`${composableName} must be used inside a <CartProvider>.`);\n  }\n  return store;\n}\n\nfunction useOptionalCartStore(): CartStore | null {\n  return inject(CartStoreKey, null);\n}\n\n/**\n * Creates a cart store and shares the store with the cart composables below the provider.\n *\n * The provider connects the store on mount and destroys the store on unmount. Render every cart composable inside the provider. The provider creates its store once from the first initial data and ignores later changes.\n *\n * @example\n * ```vue\n * <CartProvider :initialData=\"{ cart: loaderData.cart }\">\n *   <App />\n * </CartProvider>\n * ```\n * @publicDocs\n */\nexport const CartProvider = defineComponent({\n  name: \"CartProvider\",\n  props: {\n    initialData: {\n      type: Object as PropType<CartInitialData>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const store = createCartStore({ initialData: props.initialData });\n    provide(CartStoreKey, store);\n\n    onMounted(() => {\n      configureCoreCartEndpoint(cartEndpoint);\n      store.connect();\n    });\n\n    onUnmounted(() => {\n      store.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n\n/**\n * Returns cart state as a read-only shallow ref.\n *\n * Without a selector, the ref holds the full cart state. With a selector, the ref holds the selected value. The ref updates when the selected value changes by reference, or when your `isEqual` function reports a change.\n *\n * @example\n * ```vue\n * <script setup>\n * // Full state\n * const state = useCart();\n *\n * // Selected slice — re-renders only when lines change\n * const lines = useCart((s) => s.data.lines.nodes);\n *\n * // Check if a specific line is pending\n * const isPending = useCart((s) => s.pending.lines.has(lineId));\n * </script>\n * ```\n * @publicDocs\n */\nexport function useCart(): Readonly<ShallowRef<CartState>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector?: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | CartState>> {\n  const store = useCartStore(\"useCart\");\n  const resolve = selector ?? ((state: CartState<TData>) => state as unknown as S);\n  return useCartSelector(store, resolve, isEqual) as Readonly<ShallowRef<S>>;\n}\n\n/**\n * Returns the cart action that syncs the cart after a mutation outside cart forms.\n *\n * Call `refresh` after a server-side cart mutation that bypasses cart forms, such as a server action that creates the cart.\n *\n * @returns The `refresh` action.\n *\n * @example\n * ```vue\n * <script setup>\n * const { refresh } = useCartActions();\n *\n * async function handleServerAction() {\n *   await createCartOnServer();\n *   refresh();\n * }\n * </script>\n * ```\n * @publicDocs\n */\nexport function useCartActions(): CartActions {\n  const store = useCartStore(\"useCartActions\");\n  return { refresh: store.refresh };\n}\n\n/**\n * Publishes cart analytics events when the cart changes.\n *\n * Call the composable once near the root of your app. The composable starts tracking on mount and stops when the component's scope ends. The composable throws when you call it outside the cart provider.\n *\n * @example\n * ```vue\n * <script setup>\n * useCartAnalytics();\n * </script>\n * ```\n * @publicDocs\n */\nexport function useCartAnalytics(): void {\n  const store = useCartStore(\"useCartAnalytics\");\n  let stopTracking: (() => void) | undefined;\n\n  onMounted(() => {\n    stopTracking = trackCartAnalytics(store);\n  });\n\n  onScopeDispose(() => stopTracking?.());\n}\n\n/**\n * Returns the slice of cart state that the selector picks as a read-only shallow ref. Outside the cart provider, the ref holds `undefined`.\n *\n * Use the composable in a component that also renders above the provider, such as a header cart badge on an error page.\n * Wherever the provider always exists, use the cart composable that throws. A missing provider then fails with an error.\n *\n * @example\n * ```vue\n * <script setup>\n * const count = useOptionalCart((state) => state.data.totalQuantity);\n * </script>\n *\n * <template>\n *   <span v-if=\"count !== undefined\">Cart ({{ count }})</span>\n * </template>\n * ```\n * @publicDocs\n */\nexport function useOptionalCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | undefined>> {\n  const store = useOptionalCartStore();\n  if (!store) return shallowRef<S | undefined>(undefined);\n  return useCartSelector(store, selector, isEqual);\n}\n\nfunction useCartSelector<TData extends CartData = CartData, S = unknown>(\n  store: CartStore,\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>> {\n  const selected = shallowRef<S>(selector(store.getState() as CartState<TData>));\n\n  const unsubscribe = store.subscribe(() => {\n    const next = selector(store.getState() as CartState<TData>);\n    if (isEqual?.(selected.value, next)) return;\n    selected.value = next;\n  });\n\n  onScopeDispose(unsubscribe);\n\n  return selected as Readonly<ShallowRef<S>>;\n}\n\n/**\n * Returns form props, a register function, and pending state for cart forms.\n *\n * The form props post to the cart endpoint and send each submission through the cart store. A `beforeSubmit` callback that prevents the event's default skips the cart submission.\n *\n * The pending state holds a computed ref that's `true` during a full cart load, and a function that checks whether one line or any line has a mutation in flight.\n *\n * Registering the quantity field with `interactive: true` returns numeric input attributes without auto-submit. Call attachQuantityInput on the input to submit the form when the quantity changes.\n *\n * @returns The form props function, the register function, and the pending state.\n *\n * @example\n * ```vue\n * <script setup>\n * const { formProps, register, isPending } = useCartForm();\n * </script>\n *\n * <template>\n *   <form v-bind=\"formProps()\">\n *     <input v-bind=\"register('lineId', { value: line.id })\" />\n *     <input v-bind=\"register('quantity', { value: line.quantity })\" />\n *     <button v-bind=\"register('set')\" />\n *     <button v-bind=\"register('increase')\">+</button>\n *     <button v-bind=\"register('decrease')\">−</button>\n *     <span v-if=\"isPending.lines(line.id)\">Updating…</span>\n *   </form>\n * </template>\n * ```\n * @publicDocs\n */\nexport function useCartForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n  register: CartFormRegister;\n  isPending: {\n    initial: ComputedRef<boolean>;\n    lines: (lineId?: string) => boolean;\n  };\n} {\n  const store = useCartStore(\"useCartForm\");\n  const loading = useCart((s) => s.loading);\n  const pendingLines = useCart((s) => s.pending.lines);\n  const register = createCartFormRegister();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: SubmitEvent) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      store.handleFormSubmit(e).catch(() => {});\n      opts?.afterSubmit?.(e);\n    },\n    method: \"post\",\n    action: cartEndpoint,\n  });\n\n  const isPending = {\n    initial: computed(() => loading.value),\n    lines: (lineId?: string): boolean =>\n      lineId ? pendingLines.value.has(lineId) : pendingLines.value.size > 0,\n  };\n\n  return { formProps, register, isPending };\n}\n\n/**\n * Returns a cart provider and composables typed to the cart query in your cart server handlers.\n * Pass the type of your cart server handlers as the `THandlers` type argument. Every composable's cart state then includes your custom cart fields.\n *\n * On mount, the provider points cart requests at `/api/cart` and connects the store. Every composable except the optional cart composable throws when you call it outside the provider.\n *\n * @returns The typed cart provider, the cart state composables, and the cart actions and form composables.\n *\n * @example\n * ```ts\n * import type { cartServerHandlers } from \"./server/cart.server\";\n *\n * const {\n *   CartProvider,\n *   useCart,\n *   useOptionalCart,\n *   useCartActions,\n *   useCartForm,\n * } = createCartComponents<typeof cartServerHandlers>();\n * ```\n * @publicDocs\n */\nexport function createCartComponents<THandlers>(): TypedCartComponents<\n  CartDataFromHandlers<THandlers>\n> {\n  type TData = CartDataFromHandlers<THandlers>;\n  const TypedCartProvider = createTypedCartProvider<TData>();\n\n  const useTypedCart = ((\n    selector?: (state: CartState<TData>) => unknown,\n    isEqual?: (a: unknown, b: unknown) => boolean,\n  ) => {\n    if (!selector) return useCart() as Readonly<ShallowRef<CartState<TData>>>;\n    return useCart<TData, unknown>(selector, isEqual);\n  }) as TypedUseCart<TData>;\n\n  const useTypedOptionalCart = (<S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ) => useOptionalCart<TData, S>(selector, isEqual)) as TypedUseOptionalCart<TData>;\n\n  return {\n    CartProvider: TypedCartProvider,\n    useCart: useTypedCart,\n    useOptionalCart: useTypedOptionalCart,\n    useCartActions,\n    useCartForm,\n  };\n}\n"],"mappings":"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"}

package/dist/development/vue/collection.d.mts

@@ -5,9 +5,10 @@ import { PropType, ShallowRef } from "vue";
 
 //#region src/vue/collection.d.ts
 /**
- * Manages the lifecycle of a {@link CollectionStore}: creates on mount and syncs
- * with URL changes. Recreates the store when `data.handle` changes
- * (navigating to a different collection).
+ * Creates a collection store and keeps its filters and sort in sync with the URL.
+ * The provider creates a new store when the collection handle changes, such as on navigation to a different collection.
+ *
+ * The provider takes `data` and `url-search` props, emits a `change` event with the search string to navigate to, and renders its default slot.
  *
  * @example
  * ```vue
@@ -33,6 +34,7 @@ import { PropType, ShallowRef } from "vue";
  *   </CollectionProvider>
  * </template>
  * ```
+ * @publicDocs
  */
 declare const CollectionProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   data: {
@@ -62,8 +64,7 @@ declare const CollectionProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   urlSearch: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 /**
- * Subscribes to the collection store and returns a reactive ref of the full
- * state snapshot.
+ * Returns a read-only shallow ref of the collection state. The ref follows the new store when the provider replaces the store.
  *
  * @example
  * ```vue
@@ -75,12 +76,12 @@ declare const CollectionProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
  *   <p>{{ state.status }}</p>
  * </template>
  * ```
+ * @publicDocs
  */
 declare function useCollection(): Readonly<ShallowRef<CollectionState>>;
 /**
- * Subscribes to the collection store and returns a reactive ref of a derived
- * value via `selector`. Optionally accepts an `isEqual` comparator to skip
- * updates when the derived value is structurally unchanged.
+ * With a selector, the composable returns a ref of the selector's value.
+ * Pass an `isEqual` comparator to skip updates for equal values. The composable throws outside the collection provider.
  *
  * @example
  * ```vue
@@ -88,16 +89,22 @@ declare function useCollection(): Readonly<ShallowRef<CollectionState>>;
  * const status = useCollection(s => s.status);
  * </script>
  * ```
+ * @publicDocs
  */
 declare function useCollection<S>(selector: (state: CollectionState) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S>>;
 /**
- * Returns methods that change filters and sort. The store's `onBrowseChange`
- * callback (set by {@link CollectionProvider}) handles emitting `change` with a
- * serialized search string.
+ * Returns methods that change filters and sort. After each change, the collection provider emits a `change` event with the new search string.
+ *
+ * The composable throws outside the collection provider.
+ *
+ * @publicDocs
  */
 declare function useCollectionActions(): CollectionActions;
 /**
- * Returns form props for progressive-enhancement of collection filter forms.
+ * Returns form props that progressively enhance collection filter forms.
+ *
+ * Bind the result of `formProps()` on the form. Its submit handler cancels the native submission and applies the form's filter and sort fields to the store.
+ * The `beforeSubmit` and `afterSubmit` callbacks receive the native submit event. The composable throws outside the collection provider.
  *
  * @example
  * ```vue
@@ -112,6 +119,7 @@ declare function useCollectionActions(): CollectionActions;
  *   </form>
  * </template>
  * ```
+ * @publicDocs
  */
 declare function useCollectionForm(): {
   formProps: (opts?: {

package/dist/development/vue/collection.mjs

@@ -5,9 +5,10 @@ import { defineComponent, inject, onUnmounted, provide, shallowRef, toValue, wat
 //#region src/vue/collection.ts
 const CollectionStoreKey = Symbol("CollectionStore");
 /**
-* Manages the lifecycle of a {@link CollectionStore}: creates on mount and syncs
-* with URL changes. Recreates the store when `data.handle` changes
-* (navigating to a different collection).
+* Creates a collection store and keeps its filters and sort in sync with the URL.
+* The provider creates a new store when the collection handle changes, such as on navigation to a different collection.
+*
+* The provider takes `data` and `url-search` props, emits a `change` event with the search string to navigate to, and renders its default slot.
 *
 * @example
 * ```vue
@@ -33,6 +34,7 @@ const CollectionStoreKey = Symbol("CollectionStore");
 *   </CollectionProvider>
 * </template>
 * ```
+* @publicDocs
 */
 const CollectionProvider = defineComponent({
 	name: "CollectionProvider",
@@ -110,9 +112,11 @@ function useCollection(selector, isEqual) {
 	return selected;
 }
 /**
-* Returns methods that change filters and sort. The store's `onBrowseChange`
-* callback (set by {@link CollectionProvider}) handles emitting `change` with a
-* serialized search string.
+* Returns methods that change filters and sort. After each change, the collection provider emits a `change` event with the new search string.
+*
+* The composable throws outside the collection provider.
+*
+* @publicDocs
 */
 function useCollectionActions() {
 	const storeRef = useRequiredStoreRef("useCollectionActions");
@@ -127,7 +131,10 @@ function useCollectionActions() {
 	};
 }
 /**
-* Returns form props for progressive-enhancement of collection filter forms.
+* Returns form props that progressively enhance collection filter forms.
+*
+* Bind the result of `formProps()` on the form. Its submit handler cancels the native submission and applies the form's filter and sort fields to the store.
+* The `beforeSubmit` and `afterSubmit` callbacks receive the native submit event. The composable throws outside the collection provider.
 *
 * @example
 * ```vue
@@ -142,6 +149,7 @@ function useCollectionActions() {
 *   </form>
 * </template>
 * ```
+* @publicDocs
 */
 function useCollectionForm() {
 	const actions = useCollectionActions();

package/dist/development/vue/collection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collection.mjs","names":[],"sources":["../../../src/vue/collection.ts"],"sourcesContent":["import {\n  defineComponent,\n  inject,\n  onUnmounted,\n  provide,\n  shallowRef,\n  toValue,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport {\n  createCollectionStore,\n  createCollectionReconciler,\n  type CollectionActions,\n  type CollectionData,\n  type CollectionReconciler,\n  type CollectionStore,\n} from \"../core/collection\";\nimport type { CollectionState } from \"../core/collection\";\n\nexport type { CollectionActions, CollectionData };\n\nconst CollectionStoreKey: InjectionKey<ShallowRef<CollectionStore>> = Symbol(\"CollectionStore\");\n\n/**\n * Manages the lifecycle of a {@link CollectionStore}: creates on mount and syncs\n * with URL changes. Recreates the store when `data.handle` changes\n * (navigating to a different collection).\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { CollectionProvider, type CollectionData } from '@shopify/hydrogen/vue';\n * import { useRoute, useRouter } from 'vue-router';\n *\n * const props = defineProps<{ data: CollectionData; urlSearch: string }>();\n * const route = useRoute();\n * const router = useRouter();\n *\n * // `search` includes the leading `?`, so append it to the path as-is.\n * const onChange = (search: string) => router.replace(`${route.path}${search}`);\n * </script>\n *\n * <template>\n *   <CollectionProvider\n *     :data=\"props.data\"\n *     :url-search=\"props.urlSearch\"\n *     @change=\"onChange\"\n *   >\n *     <slot />\n *   </CollectionProvider>\n * </template>\n * ```\n */\nexport const CollectionProvider = defineComponent({\n  name: \"CollectionProvider\",\n  props: {\n    data: {\n      type: Object as PropType<CollectionData>,\n      required: true,\n    },\n    urlSearch: {\n      type: String,\n      default: \"\",\n    },\n  },\n  emits: {\n    change: (searchString: string) => typeof searchString === \"string\",\n  },\n  setup(props, { slots, emit }) {\n    const readUrlSearch = () => toValue(props.urlSearch);\n\n    const initialStore = createCollectionStore({\n      data: props.data,\n      urlSearch: readUrlSearch(),\n    });\n    const storeRef = shallowRef<CollectionStore>(initialStore);\n    provide(CollectionStoreKey, storeRef);\n\n    let reconciler: CollectionReconciler = createCollectionReconciler(\n      {\n        getStore: () => storeRef.value,\n        readUrlSearch,\n        emitChange: (s) => emit(\"change\", s),\n      },\n      readUrlSearch(),\n    );\n    initialStore.setOnBrowseChange(() => reconciler.handleBrowseChange());\n\n    function resetStore() {\n      storeRef.value.setOnBrowseChange(null);\n      const store = createCollectionStore({\n        data: props.data,\n        urlSearch: readUrlSearch(),\n      });\n      storeRef.value = store;\n      reconciler.reset(readUrlSearch());\n      store.setOnBrowseChange(() => reconciler.handleBrowseChange());\n    }\n\n    watch(\n      () => props.data.handle,\n      (newHandle, oldHandle) => {\n        if (newHandle === oldHandle) return;\n        resetStore();\n      },\n    );\n\n    watch(\n      () => [readUrlSearch(), props.data] as const,\n      () => {\n        reconciler.reconcile(readUrlSearch(), props.data.dataSearch);\n      },\n      { flush: \"sync\", immediate: true, deep: true },\n    );\n\n    onUnmounted(() => {\n      storeRef.value.setOnBrowseChange(null);\n    });\n\n    return () => slots.default?.();\n  },\n});\n\nfunction useRequiredStoreRef(composableName: string): ShallowRef<CollectionStore> {\n  const storeRef = inject(CollectionStoreKey, null);\n  if (!storeRef) {\n    throw new Error(`${composableName} must be used inside a <CollectionProvider>.`);\n  }\n  return storeRef;\n}\n\n/**\n * Subscribes to the collection store and returns a reactive ref of the full\n * state snapshot.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const state = useCollection();\n * </script>\n *\n * <template>\n *   <p>{{ state.status }}</p>\n * </template>\n * ```\n */\nexport function useCollection(): Readonly<ShallowRef<CollectionState>>;\n/**\n * Subscribes to the collection store and returns a reactive ref of a derived\n * value via `selector`. Optionally accepts an `isEqual` comparator to skip\n * updates when the derived value is structurally unchanged.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const status = useCollection(s => s.status);\n * </script>\n * ```\n */\nexport function useCollection<S>(\n  selector: (state: CollectionState) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCollection<S>(\n  selector?: (state: CollectionState) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<CollectionState | S>> {\n  const storeRef = useRequiredStoreRef(\"useCollection\");\n  const resolve = selector ?? ((state: CollectionState) => state as unknown as S);\n  const selected = shallowRef<CollectionState | S>(resolve(storeRef.value.getState()));\n\n  watch(\n    () => storeRef.value,\n    (store, _, onCleanup) => {\n      selected.value = resolve(store.getState());\n\n      const unsubscribe = store.subscribe(() => {\n        const next = resolve(store.getState());\n        if (isEqual && selector) {\n          if (isEqual(selected.value as S, next)) return;\n        }\n        selected.value = next;\n      });\n\n      onCleanup(unsubscribe);\n    },\n    { immediate: true },\n  );\n\n  return selected as Readonly<ShallowRef<CollectionState | S>>;\n}\n\n/**\n * Returns methods that change filters and sort. The store's `onBrowseChange`\n * callback (set by {@link CollectionProvider}) handles emitting `change` with a\n * serialized search string.\n */\nexport function useCollectionActions(): CollectionActions {\n  const storeRef = useRequiredStoreRef(\"useCollectionActions\");\n\n  return {\n    setFilters: (...args) => storeRef.value.setFilters(...args),\n    toggleFilter: (...args) => storeRef.value.toggleFilter(...args),\n    toggleFilterInput: (...args) => storeRef.value.toggleFilterInput(...args),\n    setSortKey: (...args) => storeRef.value.setSortKey(...args),\n    setSortByValue: (...args) => storeRef.value.setSortByValue(...args),\n    reset: (...args) => storeRef.value.reset(...args),\n    handleFormSubmit: (...args) => storeRef.value.handleFormSubmit(...args),\n  };\n}\n\n/**\n * Returns form props for progressive-enhancement of collection filter forms.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const { formProps } = useCollectionForm();\n * </script>\n *\n * <template>\n *   <form v-bind=\"formProps()\" action=\"/collections/shoes\">\n *     <input type=\"checkbox\" name=\"filter.p.tag\" value=\"sale\" />\n *     <button type=\"submit\">Apply</button>\n *   </form>\n * </template>\n * ```\n */\nexport function useCollectionForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n} {\n  const actions = useCollectionActions();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: SubmitEvent) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      actions.handleFormSubmit(e);\n      opts?.afterSubmit?.(e);\n    },\n  });\n\n  return { formProps };\n}\n"],"mappings":"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"}
+{"version":3,"file":"collection.mjs","names":[],"sources":["../../../src/vue/collection.ts"],"sourcesContent":["import {\n  defineComponent,\n  inject,\n  onUnmounted,\n  provide,\n  shallowRef,\n  toValue,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport {\n  createCollectionStore,\n  createCollectionReconciler,\n  type CollectionActions,\n  type CollectionData,\n  type CollectionReconciler,\n  type CollectionStore,\n} from \"../core/collection\";\nimport type { CollectionState } from \"../core/collection\";\n\nexport type { CollectionActions, CollectionData };\n\nconst CollectionStoreKey: InjectionKey<ShallowRef<CollectionStore>> = Symbol(\"CollectionStore\");\n\n/**\n * Creates a collection store and keeps its filters and sort in sync with the URL.\n * The provider creates a new store when the collection handle changes, such as on navigation to a different collection.\n *\n * The provider takes `data` and `url-search` props, emits a `change` event with the search string to navigate to, and renders its default slot.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { CollectionProvider, type CollectionData } from '@shopify/hydrogen/vue';\n * import { useRoute, useRouter } from 'vue-router';\n *\n * const props = defineProps<{ data: CollectionData; urlSearch: string }>();\n * const route = useRoute();\n * const router = useRouter();\n *\n * // `search` includes the leading `?`, so append it to the path as-is.\n * const onChange = (search: string) => router.replace(`${route.path}${search}`);\n * </script>\n *\n * <template>\n *   <CollectionProvider\n *     :data=\"props.data\"\n *     :url-search=\"props.urlSearch\"\n *     @change=\"onChange\"\n *   >\n *     <slot />\n *   </CollectionProvider>\n * </template>\n * ```\n * @publicDocs\n */\nexport const CollectionProvider = defineComponent({\n  name: \"CollectionProvider\",\n  props: {\n    data: {\n      type: Object as PropType<CollectionData>,\n      required: true,\n    },\n    urlSearch: {\n      type: String,\n      default: \"\",\n    },\n  },\n  emits: {\n    change: (searchString: string) => typeof searchString === \"string\",\n  },\n  setup(props, { slots, emit }) {\n    const readUrlSearch = () => toValue(props.urlSearch);\n\n    const initialStore = createCollectionStore({\n      data: props.data,\n      urlSearch: readUrlSearch(),\n    });\n    const storeRef = shallowRef<CollectionStore>(initialStore);\n    provide(CollectionStoreKey, storeRef);\n\n    let reconciler: CollectionReconciler = createCollectionReconciler(\n      {\n        getStore: () => storeRef.value,\n        readUrlSearch,\n        emitChange: (s) => emit(\"change\", s),\n      },\n      readUrlSearch(),\n    );\n    initialStore.setOnBrowseChange(() => reconciler.handleBrowseChange());\n\n    function resetStore() {\n      storeRef.value.setOnBrowseChange(null);\n      const store = createCollectionStore({\n        data: props.data,\n        urlSearch: readUrlSearch(),\n      });\n      storeRef.value = store;\n      reconciler.reset(readUrlSearch());\n      store.setOnBrowseChange(() => reconciler.handleBrowseChange());\n    }\n\n    watch(\n      () => props.data.handle,\n      (newHandle, oldHandle) => {\n        if (newHandle === oldHandle) return;\n        resetStore();\n      },\n    );\n\n    watch(\n      () => [readUrlSearch(), props.data] as const,\n      () => {\n        reconciler.reconcile(readUrlSearch(), props.data.dataSearch);\n      },\n      { flush: \"sync\", immediate: true, deep: true },\n    );\n\n    onUnmounted(() => {\n      storeRef.value.setOnBrowseChange(null);\n    });\n\n    return () => slots.default?.();\n  },\n});\n\nfunction useRequiredStoreRef(composableName: string): ShallowRef<CollectionStore> {\n  const storeRef = inject(CollectionStoreKey, null);\n  if (!storeRef) {\n    throw new Error(`${composableName} must be used inside a <CollectionProvider>.`);\n  }\n  return storeRef;\n}\n\n/**\n * Returns a read-only shallow ref of the collection state. The ref follows the new store when the provider replaces the store.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const state = useCollection();\n * </script>\n *\n * <template>\n *   <p>{{ state.status }}</p>\n * </template>\n * ```\n * @publicDocs\n */\nexport function useCollection(): Readonly<ShallowRef<CollectionState>>;\n/**\n * With a selector, the composable returns a ref of the selector's value.\n * Pass an `isEqual` comparator to skip updates for equal values. The composable throws outside the collection provider.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const status = useCollection(s => s.status);\n * </script>\n * ```\n * @publicDocs\n */\nexport function useCollection<S>(\n  selector: (state: CollectionState) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCollection<S>(\n  selector?: (state: CollectionState) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<CollectionState | S>> {\n  const storeRef = useRequiredStoreRef(\"useCollection\");\n  const resolve = selector ?? ((state: CollectionState) => state as unknown as S);\n  const selected = shallowRef<CollectionState | S>(resolve(storeRef.value.getState()));\n\n  watch(\n    () => storeRef.value,\n    (store, _, onCleanup) => {\n      selected.value = resolve(store.getState());\n\n      const unsubscribe = store.subscribe(() => {\n        const next = resolve(store.getState());\n        if (isEqual && selector) {\n          if (isEqual(selected.value as S, next)) return;\n        }\n        selected.value = next;\n      });\n\n      onCleanup(unsubscribe);\n    },\n    { immediate: true },\n  );\n\n  return selected as Readonly<ShallowRef<CollectionState | S>>;\n}\n\n/**\n * Returns methods that change filters and sort. After each change, the collection provider emits a `change` event with the new search string.\n *\n * The composable throws outside the collection provider.\n *\n * @publicDocs\n */\nexport function useCollectionActions(): CollectionActions {\n  const storeRef = useRequiredStoreRef(\"useCollectionActions\");\n\n  return {\n    setFilters: (...args) => storeRef.value.setFilters(...args),\n    toggleFilter: (...args) => storeRef.value.toggleFilter(...args),\n    toggleFilterInput: (...args) => storeRef.value.toggleFilterInput(...args),\n    setSortKey: (...args) => storeRef.value.setSortKey(...args),\n    setSortByValue: (...args) => storeRef.value.setSortByValue(...args),\n    reset: (...args) => storeRef.value.reset(...args),\n    handleFormSubmit: (...args) => storeRef.value.handleFormSubmit(...args),\n  };\n}\n\n/**\n * Returns form props that progressively enhance collection filter forms.\n *\n * Bind the result of `formProps()` on the form. Its submit handler cancels the native submission and applies the form's filter and sort fields to the store.\n * The `beforeSubmit` and `afterSubmit` callbacks receive the native submit event. The composable throws outside the collection provider.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * const { formProps } = useCollectionForm();\n * </script>\n *\n * <template>\n *   <form v-bind=\"formProps()\" action=\"/collections/shoes\">\n *     <input type=\"checkbox\" name=\"filter.p.tag\" value=\"sale\" />\n *     <button type=\"submit\">Apply</button>\n *   </form>\n * </template>\n * ```\n * @publicDocs\n */\nexport function useCollectionForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n} {\n  const actions = useCollectionActions();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: SubmitEvent) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      actions.handleFormSubmit(e);\n      opts?.afterSubmit?.(e);\n    },\n  });\n\n  return { formProps };\n}\n"],"mappings":"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"}

package/dist/development/vue/index.d.mts

@@ -4,10 +4,10 @@ import { CollectionActions, CollectionData } from "../core/collection/collection
 import { ValidProductSelectionResult } from "../core/product/product-form.mjs";
 import { ProductAddToCartProps, ProductFormRegister, ProductMerchandiseIdProps, ProductOptionValueProps, ProductQuantityDefaultProps, ProductQuantityProps } from "../core/product/form.mjs";
 import { PredictiveSearchActions } from "../core/predictive-search/store.mjs";
-import { createCartComponents, useCartActions, useCartAnalytics } from "./cart.mjs";
+import { createCartComponents, useCartAnalytics } from "./cart.mjs";
 import { CollectionProvider, useCollection, useCollectionActions, useCollectionForm } from "./collection.mjs";
 import { PredictiveSearchFormPropsOptions, PredictiveSearchFormResult, PredictiveSearchProvider, PredictiveSearchQueryInputPropsOptions, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm } from "./predictive-search.mjs";
 import { UseProductFormOptions, UseProductFormResult, UseProductResult, createProductComponents, useProductForm } from "./product.mjs";
 import { ShopPayButton, ShopPayButtonProps } from "./shop-pay.mjs";
 import { ShopifyScripts, ShopifyScriptsProps } from "./shopify-scripts.mjs";
-export { type CartActions, type CollectionActions, type CollectionData, CollectionProvider, type PredictiveSearchActions, type PredictiveSearchFormPropsOptions, type PredictiveSearchFormResult, PredictiveSearchProvider, type PredictiveSearchQueryInputPropsOptions, type ProductAddToCartProps, type ProductFormRegister, type ProductMerchandiseIdProps, type ProductOptionValueProps, type ProductQuantityDefaultProps, type ProductQuantityProps, ShopPayButton, type ShopPayButtonProps, type ShopifyGlobal, ShopifyScripts, type ShopifyScriptsProps, type UseProductFormOptions, type UseProductFormResult, type UseProductResult, type ValidProductSelectionResult, createCartComponents, createProductComponents, useCartActions, useCartAnalytics, useCollection, useCollectionActions, useCollectionForm, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm, useProductForm };
+export { type CartActions, type CollectionActions, type CollectionData, CollectionProvider, type PredictiveSearchActions, type PredictiveSearchFormPropsOptions, type PredictiveSearchFormResult, PredictiveSearchProvider, type PredictiveSearchQueryInputPropsOptions, type ProductAddToCartProps, type ProductFormRegister, type ProductMerchandiseIdProps, type ProductOptionValueProps, type ProductQuantityDefaultProps, type ProductQuantityProps, ShopPayButton, type ShopPayButtonProps, type ShopifyGlobal, ShopifyScripts, type ShopifyScriptsProps, type UseProductFormOptions, type UseProductFormResult, type UseProductResult, type ValidProductSelectionResult, createCartComponents, createProductComponents, useCartAnalytics, useCollection, useCollectionActions, useCollectionForm, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm, useProductForm };