@shopify/hydrogen 2026.10.0-preview.4 → 2026.10.0

package/dist/development/vue/index.mjs

@@ -1,8 +1,8 @@
-import { createCartComponents, useCartActions, useCartAnalytics } from "./cart.mjs";
+import { createCartComponents, useCartAnalytics } from "./cart.mjs";
 import { CollectionProvider, useCollection, useCollectionActions, useCollectionForm } from "./collection.mjs";
 import { PredictiveSearchProvider, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm } from "./predictive-search.mjs";
 import { createProductComponents, useProductForm } from "./product.mjs";
 import { ShopPayButton } from "./shop-pay.mjs";
 import { ShopifyScripts } from "./shopify-scripts.mjs";
 
-export { CollectionProvider, PredictiveSearchProvider, ShopPayButton, ShopifyScripts, createCartComponents, createProductComponents, useCartActions, useCartAnalytics, useCollection, useCollectionActions, useCollectionForm, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm, useProductForm };
+export { CollectionProvider, PredictiveSearchProvider, ShopPayButton, ShopifyScripts, createCartComponents, createProductComponents, useCartAnalytics, useCollection, useCollectionActions, useCollectionForm, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm, useProductForm };

package/dist/development/vue/predictive-search.d.mts

@@ -5,28 +5,35 @@ import * as _$vue from "vue";
 import { PropType, ShallowRef } from "vue";
 
 //#region src/vue/predictive-search.d.ts
-/** Options for the form props builder returned by {@link usePredictiveSearchForm}. */
+/**
+ * Options for the form props function of the predictive search form composable.
+ *
+ * Accepts any form attribute. Attributes that you pass override the default action, method, and role.
+ */
 type PredictiveSearchFormPropsOptions = {
-  /** When `true`, prevents the native form submission and triggers a client-side search instead. */preventDefault?: boolean; /** Called on submit with the submit event and the extracted search term. Calling `event.preventDefault()` cancels both the native submission and Hydrogen's client-side search. */
+  /** Set to `true` to cancel the native submission and run a client-side search with the submitted term. */preventDefault?: boolean; /** Runs on submit with the submit event and the search term. Calling preventDefault on the event cancels the native submission and the client-side search. */
   onSubmit?: (event: SubmitEvent, term: string) => void;
   [key: string]: unknown;
 };
-/** Options for the query input props builder returned by {@link usePredictiveSearchForm}'s `register` method. */
+/** Options for the query input attributes that the register function returns. */
 type PredictiveSearchQueryInputPropsOptions = {
-  /** Called on input with the input event and the current input value. Call `event.preventDefault()` to skip the automatic search trigger. */onInput?: (event: Event, term: string) => void;
+  /** Runs on input with the input event and the input value. Calling preventDefault on the event skips the automatic search. */onInput?: (event: Event, term: string) => void;
   [key: string]: unknown;
 };
-/** Return type of {@link usePredictiveSearchForm}, providing methods to build a progressively-enhanced search form. */
+/** Functions that build a predictive search form that works without JavaScript. */
 type PredictiveSearchFormResult = {
-  /** Generates form element attributes including the search action and submit handler. */formProps(options?: PredictiveSearchFormPropsOptions): Record<string, unknown>; /** Generates input element attributes for a named form field and wires up the search trigger. */
+  /** Returns the form attributes, including the search action and a submit handler. */formProps(options?: PredictiveSearchFormPropsOptions): Record<string, unknown>; /** Returns the query input attributes, including an input handler that searches on every input event. The function accepts only the `query` field and throws for any other field name. */
   register: (field: "query", options?: PredictiveSearchQueryInputPropsOptions) => Record<string, unknown>;
 };
 /**
- * Creates and manages a predictive search store, providing it to descendant
- * composables via Vue's provide/inject.
+ * Creates a predictive search store and shares the store with the predictive search composables in the default slot.
+ *
+ * The provider connects the store on mount and destroys the store on unmount. A change to a store option prop replaces the store with a new one. The provider compares the types and searchable fields arrays by their values.
  *
- * Recreates the store when configuration props change. Connects the store
- * on mount and destroys it on unmount.
+ * The provider throws when neither the fetch prop nor a global fetch function exists.
+ *
+ * @throws {Error} When neither the fetch prop nor a global fetch function exists.
+ * @publicDocs
  */
 declare const PredictiveSearchProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   predictiveSearchEndpoint: {
@@ -125,45 +132,33 @@ declare const PredictiveSearchProvider: _$vue.DefineComponent<_$vue.ExtractPropT
   unavailableProducts: SearchUnavailableProductsType;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 /**
- * Subscribes to the predictive search store's state as a reactive ref.
- *
- * Without arguments, returns a `ShallowRef` of the full
- * {@link PredictiveSearchState}. With a `selector`, returns a ref of the
- * derived value that only updates when the selected value changes
- * (reference equality by default, or a custom `isEqual`).
+ * Returns the predictive search state as a read-only shallow ref that updates when the state changes.
  *
- * Must be used inside a {@link PredictiveSearchProvider}.
+ * With a selector, the ref holds the selected value and updates only when that value changes.
+ * The composable compares values by reference unless you pass an equality function.
  *
- * @throws {Error} When called outside a PredictiveSearchProvider.
+ * @throws {Error} When you call it outside a PredictiveSearchProvider.
+ * @publicDocs
  */
 declare function usePredictiveSearch<TData extends PredictiveSearchData = PredictiveSearchData>(): Readonly<ShallowRef<PredictiveSearchState<TData>>>;
 declare function usePredictiveSearch<TData extends PredictiveSearchData = PredictiveSearchData, S = PredictiveSearchState<TData>>(selector: (state: PredictiveSearchState<TData>) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S>>;
 /**
- * Returns `search` and `clear` methods that delegate to the current store.
+ * Returns methods that search and clear results in the provider's current store.
  *
- * These are thin wrappers that read from the reactive store ref on each call,
- * so they always target the active store even after a provider prop change
- * triggers store recreation.
+ * After a store option prop change replaces the store, the methods act on the new store.
  *
- * Must be used inside a {@link PredictiveSearchProvider}.
- *
- * @throws {Error} When called outside a PredictiveSearchProvider.
+ * @throws {Error} When you call it outside a PredictiveSearchProvider.
+ * @publicDocs
  */
 declare function usePredictiveSearchActions(): PredictiveSearchActions;
 /**
- * Returns `formProps` and `register` for building a progressively-enhanced
- * search form.
- *
- * `formProps()` generates form element attributes including the search
- * action URL. `register("query")` generates input attributes and calls the
- * store's search action on every `input` event. The store debounces requests
- * and resets state for terms shorter than `minTermLength`.
- * Both support an optional callback that receives the event and extracted
- * term, and respect `event.preventDefault()` to cancel the automatic behavior.
+ * Returns functions that build a predictive search form that works without JavaScript.
  *
- * Must be used inside a {@link PredictiveSearchProvider}.
+ * The form props function returns the form attributes. The register function returns the query input attributes and searches on every input event.
+ * Both functions accept a callback that receives the event and the search term. Calling preventDefault on the event cancels the automatic behavior.
  *
- * @throws {Error} When called outside a PredictiveSearchProvider.
+ * @throws {Error} When you call it outside a PredictiveSearchProvider.
+ * @publicDocs
  */
 declare function usePredictiveSearchForm(): PredictiveSearchFormResult;
 //#endregion

package/dist/development/vue/predictive-search.mjs

@@ -6,11 +6,14 @@ import { defineComponent, inject, onMounted, onUnmounted, provide, shallowRef, w
 const CONFIG_ARRAY_SEPARATOR = "\0";
 const PredictiveSearchKey = Symbol("PredictiveSearch");
 /**
-* Creates and manages a predictive search store, providing it to descendant
-* composables via Vue's provide/inject.
+* Creates a predictive search store and shares the store with the predictive search composables in the default slot.
 *
-* Recreates the store when configuration props change. Connects the store
-* on mount and destroys it on unmount.
+* The provider connects the store on mount and destroys the store on unmount. A change to a store option prop replaces the store with a new one. The provider compares the types and searchable fields arrays by their values.
+*
+* The provider throws when neither the fetch prop nor a global fetch function exists.
+*
+* @throws {Error} When neither the fetch prop nor a global fetch function exists.
+* @publicDocs
 */
 const PredictiveSearchProvider = defineComponent({
 	name: "PredictiveSearchProvider",
@@ -129,15 +132,12 @@ function usePredictiveSearch(selector, isEqual) {
 	return selected;
 }
 /**
-* Returns `search` and `clear` methods that delegate to the current store.
+* Returns methods that search and clear results in the provider's current store.
 *
-* These are thin wrappers that read from the reactive store ref on each call,
-* so they always target the active store even after a provider prop change
-* triggers store recreation.
+* After a store option prop change replaces the store, the methods act on the new store.
 *
-* Must be used inside a {@link PredictiveSearchProvider}.
-*
-* @throws {Error} When called outside a PredictiveSearchProvider.
+* @throws {Error} When you call it outside a PredictiveSearchProvider.
+* @publicDocs
 */
 function usePredictiveSearchActions() {
 	const { storeRef } = useRequiredContext("usePredictiveSearchActions");
@@ -147,19 +147,13 @@ function usePredictiveSearchActions() {
 	};
 }
 /**
-* Returns `formProps` and `register` for building a progressively-enhanced
-* search form.
-*
-* `formProps()` generates form element attributes including the search
-* action URL. `register("query")` generates input attributes and calls the
-* store's search action on every `input` event. The store debounces requests
-* and resets state for terms shorter than `minTermLength`.
-* Both support an optional callback that receives the event and extracted
-* term, and respect `event.preventDefault()` to cancel the automatic behavior.
+* Returns functions that build a predictive search form that works without JavaScript.
 *
-* Must be used inside a {@link PredictiveSearchProvider}.
+* The form props function returns the form attributes. The register function returns the query input attributes and searches on every input event.
+* Both functions accept a callback that receives the event and the search term. Calling preventDefault on the event cancels the automatic behavior.
 *
-* @throws {Error} When called outside a PredictiveSearchProvider.
+* @throws {Error} When you call it outside a PredictiveSearchProvider.
+* @publicDocs
 */
 function usePredictiveSearchForm() {
 	const { storeRef, searchActionRef } = useRequiredContext("usePredictiveSearchForm");

package/dist/development/vue/predictive-search.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"predictive-search.mjs","names":[],"sources":["../../../src/vue/predictive-search.ts"],"sourcesContent":["import {\n  defineComponent,\n  inject,\n  onMounted,\n  onUnmounted,\n  provide,\n  shallowRef,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport {\n  createPredictiveSearchFormRegister,\n  createPredictiveSearchStore,\n  getPredictiveSearchFormAttributes,\n  readPredictiveSearchFormTerm,\n  type CreatePredictiveSearchStoreOptions,\n  type PredictiveSearchActions,\n  type PredictiveSearchData,\n  type PredictiveSearchState,\n  type PredictiveSearchStore,\n} from \"../core/predictive-search\";\nimport type {\n  PredictiveSearchLimitScope,\n  PredictiveSearchType,\n  SearchableField,\n  SearchUnavailableProductsType,\n} from \"../graphql/generated/storefront-api-types\";\n\nconst CONFIG_ARRAY_SEPARATOR = \"\\0\";\n\ntype PredictiveSearchContextValue = {\n  storeRef: ShallowRef<PredictiveSearchStore>;\n  searchActionRef: ShallowRef<string | undefined>;\n};\n\nconst PredictiveSearchKey: InjectionKey<PredictiveSearchContextValue> = Symbol(\"PredictiveSearch\");\n\nexport type { PredictiveSearchActions };\n\n/** Options for the form props builder returned by {@link usePredictiveSearchForm}. */\nexport type PredictiveSearchFormPropsOptions = {\n  /** When `true`, prevents the native form submission and triggers a client-side search instead. */\n  preventDefault?: boolean;\n  /** Called on submit with the submit event and the extracted search term. Calling `event.preventDefault()` cancels both the native submission and Hydrogen's client-side search. */\n  onSubmit?: (event: SubmitEvent, term: string) => void;\n  [key: string]: unknown;\n};\n\n/** Options for the query input props builder returned by {@link usePredictiveSearchForm}'s `register` method. */\nexport type PredictiveSearchQueryInputPropsOptions = {\n  /** Called on input with the input event and the current input value. Call `event.preventDefault()` to skip the automatic search trigger. */\n  onInput?: (event: Event, term: string) => void;\n  [key: string]: unknown;\n};\n\n/** Return type of {@link usePredictiveSearchForm}, providing methods to build a progressively-enhanced search form. */\nexport type PredictiveSearchFormResult = {\n  /** Generates form element attributes including the search action and submit handler. */\n  formProps(options?: PredictiveSearchFormPropsOptions): Record<string, unknown>;\n  /** Generates input element attributes for a named form field and wires up the search trigger. */\n  register: (\n    field: \"query\",\n    options?: PredictiveSearchQueryInputPropsOptions,\n  ) => Record<string, unknown>;\n};\n\n/**\n * Creates and manages a predictive search store, providing it to descendant\n * composables via Vue's provide/inject.\n *\n * Recreates the store when configuration props change. Connects the store\n * on mount and destroys it on unmount.\n */\nexport const PredictiveSearchProvider = defineComponent({\n  name: \"PredictiveSearchProvider\",\n  props: {\n    predictiveSearchEndpoint: { type: String, default: undefined },\n    searchAction: { type: String, default: undefined },\n    debounceInMs: { type: Number, default: undefined },\n    minTermLength: { type: Number, default: undefined },\n    fetch: { type: Function as PropType<typeof globalThis.fetch>, default: undefined },\n    limit: { type: Number, default: undefined },\n    limitScope: { type: String as PropType<PredictiveSearchLimitScope>, default: undefined },\n    types: { type: Array as PropType<PredictiveSearchType[]>, default: undefined },\n    searchableFields: { type: Array as PropType<SearchableField[]>, default: undefined },\n    unavailableProducts: {\n      type: String as PropType<SearchUnavailableProductsType>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    function buildStoreOptions(): CreatePredictiveSearchStoreOptions {\n      return {\n        predictiveSearchEndpoint: props.predictiveSearchEndpoint,\n        debounceInMs: props.debounceInMs,\n        minTermLength: props.minTermLength,\n        fetch: props.fetch as typeof globalThis.fetch | undefined,\n        limit: props.limit,\n        limitScope: props.limitScope,\n        types: props.types,\n        searchableFields: props.searchableFields,\n        unavailableProducts: props.unavailableProducts,\n      };\n    }\n\n    const storeRef = shallowRef<PredictiveSearchStore>(\n      createPredictiveSearchStore(buildStoreOptions()),\n    );\n    const searchActionRef = shallowRef(props.searchAction);\n\n    provide(PredictiveSearchKey, { storeRef, searchActionRef });\n\n    watch(\n      () => props.searchAction,\n      (next) => {\n        searchActionRef.value = next;\n      },\n    );\n\n    watch(\n      () => [\n        props.predictiveSearchEndpoint,\n        props.debounceInMs,\n        props.minTermLength,\n        props.fetch,\n        props.limit,\n        props.limitScope,\n        getArrayKey(props.types),\n        getArrayKey(props.searchableFields),\n        props.unavailableProducts,\n      ],\n      () => {\n        storeRef.value.destroy();\n        storeRef.value = createPredictiveSearchStore(buildStoreOptions());\n        storeRef.value.connect();\n      },\n    );\n\n    onMounted(() => {\n      storeRef.value.connect();\n    });\n\n    onUnmounted(() => {\n      storeRef.value.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n\nfunction getArrayKey(values: readonly string[] | undefined): string {\n  return values?.join(CONFIG_ARRAY_SEPARATOR) ?? \"\";\n}\n\nfunction useRequiredContext(composableName: string): PredictiveSearchContextValue {\n  const context = inject(PredictiveSearchKey, null);\n  if (!context) {\n    throw new Error(`${composableName} must be used inside a <PredictiveSearchProvider>.`);\n  }\n  return context;\n}\n\n/**\n * Subscribes to the predictive search store's state as a reactive ref.\n *\n * Without arguments, returns a `ShallowRef` of the full\n * {@link PredictiveSearchState}. With a `selector`, returns a ref of the\n * derived value that only updates when the selected value changes\n * (reference equality by default, or a custom `isEqual`).\n *\n * Must be used inside a {@link PredictiveSearchProvider}.\n *\n * @throws {Error} When called outside a PredictiveSearchProvider.\n */\nexport function usePredictiveSearch<\n  TData extends PredictiveSearchData = PredictiveSearchData,\n>(): Readonly<ShallowRef<PredictiveSearchState<TData>>>;\nexport function usePredictiveSearch<\n  TData extends PredictiveSearchData = PredictiveSearchData,\n  S = PredictiveSearchState<TData>,\n>(\n  selector: (state: PredictiveSearchState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function usePredictiveSearch<\n  TData extends PredictiveSearchData = PredictiveSearchData,\n  S = PredictiveSearchState<TData>,\n>(\n  selector?: (state: PredictiveSearchState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<PredictiveSearchState<TData> | S>> {\n  const { storeRef } = useRequiredContext(\"usePredictiveSearch\");\n  const resolve = selector ?? ((state: PredictiveSearchState<TData>) => state as unknown as S);\n  const selected = shallowRef<PredictiveSearchState<TData> | S>(\n    resolve((storeRef.value as PredictiveSearchStore<TData>).getState()),\n  );\n\n  watch(\n    () => storeRef.value,\n    (store, _, onCleanup) => {\n      const typedStore = store as PredictiveSearchStore<TData>;\n      selected.value = resolve(typedStore.getState());\n\n      const unsubscribe = typedStore.subscribe(() => {\n        const next = resolve(typedStore.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<PredictiveSearchState<TData> | S>>;\n}\n\n/**\n * Returns `search` and `clear` methods that delegate to the current store.\n *\n * These are thin wrappers that read from the reactive store ref on each call,\n * so they always target the active store even after a provider prop change\n * triggers store recreation.\n *\n * Must be used inside a {@link PredictiveSearchProvider}.\n *\n * @throws {Error} When called outside a PredictiveSearchProvider.\n */\nexport function usePredictiveSearchActions(): PredictiveSearchActions {\n  const { storeRef } = useRequiredContext(\"usePredictiveSearchActions\");\n\n  return {\n    search: (term) => storeRef.value.search(term),\n    clear: () => storeRef.value.clear(),\n  };\n}\n\n/**\n * Returns `formProps` and `register` for building a progressively-enhanced\n * search form.\n *\n * `formProps()` generates form element attributes including the search\n * action URL. `register(\"query\")` generates input attributes and calls the\n * store's search action on every `input` event. The store debounces requests\n * and resets state for terms shorter than `minTermLength`.\n * Both support an optional callback that receives the event and extracted\n * term, and respect `event.preventDefault()` to cancel the automatic behavior.\n *\n * Must be used inside a {@link PredictiveSearchProvider}.\n *\n * @throws {Error} When called outside a PredictiveSearchProvider.\n */\nexport function usePredictiveSearchForm(): PredictiveSearchFormResult {\n  const { storeRef, searchActionRef } = useRequiredContext(\"usePredictiveSearchForm\");\n  const coreRegister = createPredictiveSearchFormRegister();\n\n  function register(\n    field: \"query\",\n    options: PredictiveSearchQueryInputPropsOptions = {},\n  ): Record<string, unknown> {\n    const { onInput, ...attributes } = options;\n    const coreAttributes = coreRegister(field);\n\n    return {\n      ...attributes,\n      ...coreAttributes,\n      onInput: (event: Event) => {\n        const term = (event.target as HTMLInputElement).value;\n        onInput?.(event, term);\n        if (event.defaultPrevented) return;\n        void storeRef.value.search(term);\n      },\n    };\n  }\n\n  function formProps(options: PredictiveSearchFormPropsOptions = {}): Record<string, unknown> {\n    const { onSubmit, preventDefault, ...attributes } = options;\n\n    return {\n      ...getPredictiveSearchFormAttributes(searchActionRef.value),\n      ...attributes,\n      onSubmit: (event: SubmitEvent) => {\n        const term = readPredictiveSearchFormTerm(\n          new FormData(event.currentTarget as HTMLFormElement),\n        );\n        onSubmit?.(event, term);\n        if (event.defaultPrevented) return;\n        if (!preventDefault) return;\n        event.preventDefault();\n        void storeRef.value.search(term);\n      },\n    };\n  }\n\n  return { formProps, register };\n}\n"],"mappings":"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"}
+{"version":3,"file":"predictive-search.mjs","names":[],"sources":["../../../src/vue/predictive-search.ts"],"sourcesContent":["import {\n  defineComponent,\n  inject,\n  onMounted,\n  onUnmounted,\n  provide,\n  shallowRef,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport {\n  createPredictiveSearchFormRegister,\n  createPredictiveSearchStore,\n  getPredictiveSearchFormAttributes,\n  readPredictiveSearchFormTerm,\n  type CreatePredictiveSearchStoreOptions,\n  type PredictiveSearchActions,\n  type PredictiveSearchData,\n  type PredictiveSearchState,\n  type PredictiveSearchStore,\n} from \"../core/predictive-search\";\nimport type {\n  PredictiveSearchLimitScope,\n  PredictiveSearchType,\n  SearchableField,\n  SearchUnavailableProductsType,\n} from \"../graphql/generated/storefront-api-types\";\n\nconst CONFIG_ARRAY_SEPARATOR = \"\\0\";\n\ntype PredictiveSearchContextValue = {\n  storeRef: ShallowRef<PredictiveSearchStore>;\n  searchActionRef: ShallowRef<string | undefined>;\n};\n\nconst PredictiveSearchKey: InjectionKey<PredictiveSearchContextValue> = Symbol(\"PredictiveSearch\");\n\nexport type { PredictiveSearchActions };\n\n/**\n * Options for the form props function of the predictive search form composable.\n *\n * Accepts any form attribute. Attributes that you pass override the default action, method, and role.\n */\nexport type PredictiveSearchFormPropsOptions = {\n  /** Set to `true` to cancel the native submission and run a client-side search with the submitted term. */\n  preventDefault?: boolean;\n  /** Runs on submit with the submit event and the search term. Calling preventDefault on the event cancels the native submission and the client-side search. */\n  onSubmit?: (event: SubmitEvent, term: string) => void;\n  [key: string]: unknown;\n};\n\n/** Options for the query input attributes that the register function returns. */\nexport type PredictiveSearchQueryInputPropsOptions = {\n  /** Runs on input with the input event and the input value. Calling preventDefault on the event skips the automatic search. */\n  onInput?: (event: Event, term: string) => void;\n  [key: string]: unknown;\n};\n\n/** Functions that build a predictive search form that works without JavaScript. */\nexport type PredictiveSearchFormResult = {\n  /** Returns the form attributes, including the search action and a submit handler. */\n  formProps(options?: PredictiveSearchFormPropsOptions): Record<string, unknown>;\n  /** Returns the query input attributes, including an input handler that searches on every input event. The function accepts only the `query` field and throws for any other field name. */\n  register: (\n    field: \"query\",\n    options?: PredictiveSearchQueryInputPropsOptions,\n  ) => Record<string, unknown>;\n};\n\n/**\n * Creates a predictive search store and shares the store with the predictive search composables in the default slot.\n *\n * The provider connects the store on mount and destroys the store on unmount. A change to a store option prop replaces the store with a new one. The provider compares the types and searchable fields arrays by their values.\n *\n * The provider throws when neither the fetch prop nor a global fetch function exists.\n *\n * @throws {Error} When neither the fetch prop nor a global fetch function exists.\n * @publicDocs\n */\nexport const PredictiveSearchProvider = defineComponent({\n  name: \"PredictiveSearchProvider\",\n  props: {\n    predictiveSearchEndpoint: { type: String, default: undefined },\n    searchAction: { type: String, default: undefined },\n    debounceInMs: { type: Number, default: undefined },\n    minTermLength: { type: Number, default: undefined },\n    fetch: { type: Function as PropType<typeof globalThis.fetch>, default: undefined },\n    limit: { type: Number, default: undefined },\n    limitScope: { type: String as PropType<PredictiveSearchLimitScope>, default: undefined },\n    types: { type: Array as PropType<PredictiveSearchType[]>, default: undefined },\n    searchableFields: { type: Array as PropType<SearchableField[]>, default: undefined },\n    unavailableProducts: {\n      type: String as PropType<SearchUnavailableProductsType>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    function buildStoreOptions(): CreatePredictiveSearchStoreOptions {\n      return {\n        predictiveSearchEndpoint: props.predictiveSearchEndpoint,\n        debounceInMs: props.debounceInMs,\n        minTermLength: props.minTermLength,\n        fetch: props.fetch as typeof globalThis.fetch | undefined,\n        limit: props.limit,\n        limitScope: props.limitScope,\n        types: props.types,\n        searchableFields: props.searchableFields,\n        unavailableProducts: props.unavailableProducts,\n      };\n    }\n\n    const storeRef = shallowRef<PredictiveSearchStore>(\n      createPredictiveSearchStore(buildStoreOptions()),\n    );\n    const searchActionRef = shallowRef(props.searchAction);\n\n    provide(PredictiveSearchKey, { storeRef, searchActionRef });\n\n    watch(\n      () => props.searchAction,\n      (next) => {\n        searchActionRef.value = next;\n      },\n    );\n\n    watch(\n      () => [\n        props.predictiveSearchEndpoint,\n        props.debounceInMs,\n        props.minTermLength,\n        props.fetch,\n        props.limit,\n        props.limitScope,\n        getArrayKey(props.types),\n        getArrayKey(props.searchableFields),\n        props.unavailableProducts,\n      ],\n      () => {\n        storeRef.value.destroy();\n        storeRef.value = createPredictiveSearchStore(buildStoreOptions());\n        storeRef.value.connect();\n      },\n    );\n\n    onMounted(() => {\n      storeRef.value.connect();\n    });\n\n    onUnmounted(() => {\n      storeRef.value.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n\nfunction getArrayKey(values: readonly string[] | undefined): string {\n  return values?.join(CONFIG_ARRAY_SEPARATOR) ?? \"\";\n}\n\nfunction useRequiredContext(composableName: string): PredictiveSearchContextValue {\n  const context = inject(PredictiveSearchKey, null);\n  if (!context) {\n    throw new Error(`${composableName} must be used inside a <PredictiveSearchProvider>.`);\n  }\n  return context;\n}\n\n/**\n * Returns the predictive search state as a read-only shallow ref that updates when the state changes.\n *\n * With a selector, the ref holds the selected value and updates only when that value changes.\n * The composable compares values by reference unless you pass an equality function.\n *\n * @throws {Error} When you call it outside a PredictiveSearchProvider.\n * @publicDocs\n */\nexport function usePredictiveSearch<\n  TData extends PredictiveSearchData = PredictiveSearchData,\n>(): Readonly<ShallowRef<PredictiveSearchState<TData>>>;\nexport function usePredictiveSearch<\n  TData extends PredictiveSearchData = PredictiveSearchData,\n  S = PredictiveSearchState<TData>,\n>(\n  selector: (state: PredictiveSearchState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function usePredictiveSearch<\n  TData extends PredictiveSearchData = PredictiveSearchData,\n  S = PredictiveSearchState<TData>,\n>(\n  selector?: (state: PredictiveSearchState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<PredictiveSearchState<TData> | S>> {\n  const { storeRef } = useRequiredContext(\"usePredictiveSearch\");\n  const resolve = selector ?? ((state: PredictiveSearchState<TData>) => state as unknown as S);\n  const selected = shallowRef<PredictiveSearchState<TData> | S>(\n    resolve((storeRef.value as PredictiveSearchStore<TData>).getState()),\n  );\n\n  watch(\n    () => storeRef.value,\n    (store, _, onCleanup) => {\n      const typedStore = store as PredictiveSearchStore<TData>;\n      selected.value = resolve(typedStore.getState());\n\n      const unsubscribe = typedStore.subscribe(() => {\n        const next = resolve(typedStore.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<PredictiveSearchState<TData> | S>>;\n}\n\n/**\n * Returns methods that search and clear results in the provider's current store.\n *\n * After a store option prop change replaces the store, the methods act on the new store.\n *\n * @throws {Error} When you call it outside a PredictiveSearchProvider.\n * @publicDocs\n */\nexport function usePredictiveSearchActions(): PredictiveSearchActions {\n  const { storeRef } = useRequiredContext(\"usePredictiveSearchActions\");\n\n  return {\n    search: (term) => storeRef.value.search(term),\n    clear: () => storeRef.value.clear(),\n  };\n}\n\n/**\n * Returns functions that build a predictive search form that works without JavaScript.\n *\n * The form props function returns the form attributes. The register function returns the query input attributes and searches on every input event.\n * Both functions accept a callback that receives the event and the search term. Calling preventDefault on the event cancels the automatic behavior.\n *\n * @throws {Error} When you call it outside a PredictiveSearchProvider.\n * @publicDocs\n */\nexport function usePredictiveSearchForm(): PredictiveSearchFormResult {\n  const { storeRef, searchActionRef } = useRequiredContext(\"usePredictiveSearchForm\");\n  const coreRegister = createPredictiveSearchFormRegister();\n\n  function register(\n    field: \"query\",\n    options: PredictiveSearchQueryInputPropsOptions = {},\n  ): Record<string, unknown> {\n    const { onInput, ...attributes } = options;\n    const coreAttributes = coreRegister(field);\n\n    return {\n      ...attributes,\n      ...coreAttributes,\n      onInput: (event: Event) => {\n        const term = (event.target as HTMLInputElement).value;\n        onInput?.(event, term);\n        if (event.defaultPrevented) return;\n        void storeRef.value.search(term);\n      },\n    };\n  }\n\n  function formProps(options: PredictiveSearchFormPropsOptions = {}): Record<string, unknown> {\n    const { onSubmit, preventDefault, ...attributes } = options;\n\n    return {\n      ...getPredictiveSearchFormAttributes(searchActionRef.value),\n      ...attributes,\n      onSubmit: (event: SubmitEvent) => {\n        const term = readPredictiveSearchFormTerm(\n          new FormData(event.currentTarget as HTMLFormElement),\n        );\n        onSubmit?.(event, term);\n        if (event.defaultPrevented) return;\n        if (!preventDefault) return;\n        event.preventDefault();\n        void storeRef.value.search(term);\n      },\n    };\n  }\n\n  return { formProps, register };\n}\n"],"mappings":"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"}

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

@@ -5,11 +5,12 @@ import { ProductFormRegister } from "../core/product/form.mjs";
 import { ShallowRef, defineComponent } from "vue";
 
 //#region src/vue/product.d.ts
-/** Options for {@link useProductForm}. */
+/** Options for the standalone product form composable. */
 interface UseProductFormOptions<TProduct extends ProductInput> {
+  /** Runs after each resolved or unresolved option selection. The composable captures the callback at setup time. */
   onSelect?: (result: ValidProductSelectionResult<TProduct>) => void;
 }
-/** Return value of {@link useProductForm}. */
+/** Return value of the product form composables. */
 interface UseProductFormResult<TProduct extends ProductInput> {
   options: ProductFormOptions<TProduct>;
   selectedVariant: ProductVariantFrom<TProduct> | null;
@@ -20,11 +21,11 @@ interface UseProductFormResult<TProduct extends ProductInput> {
   }) => Record<string, unknown>;
   errors: ProductFormErrors;
   matchedLineItem: CartLine | null;
-  /** Reactive ref that is `true` while a form submission is in flight. */
+  /** Shallow ref that holds `true` while a form submission is in flight. */
   pending: ShallowRef<boolean>;
   selectOption: (name: string, value: string) => VariantSelectionResult<ProductVariantFrom<TProduct>>;
 }
-/** Return value of the `useProduct` composable from {@link createProductComponents}. */
+/** Return value of the product state composable that the product components factory returns. */
 interface UseProductResult<TProduct extends ProductInput> {
   options: ProductFormOptions<TProduct>;
   selectedVariant: ProductVariantFrom<TProduct> | null;
@@ -33,23 +34,23 @@ interface UseProductResult<TProduct extends ProductInput> {
   matchedLineItem: CartLine | null;
 }
 /**
- * Subscribes to a {@link ProductFormStore} and returns form-ready state.
+ * Returns form state from a product form store and updates on each store change.
  *
- * This is a pure subscription composable — it does **not** manage store
- * lifecycle. Create the store with `createProductFormStore` and manage its
- * lifecycle (hydration, destruction) yourself, or use
- * `createProductComponents` for a provider-based approach.
+ * The composable subscribes to the store and leaves the store lifecycle to you. Create the store with createProductFormStore, then hydrate and destroy the store yourself. For a provider that manages the store, use createProductComponents.
+ *
+ * Read properties from the returned object. Destructuring reads each getter once and loses reactivity.
+ *
+ * @publicDocs
  */
 declare function useProductForm<TProduct extends ProductInput>(store: ProductFormStore<TProduct>, options?: UseProductFormOptions<TProduct>): UseProductFormResult<TProduct>;
 /**
- * Creates a typed set of product components bound to a specific product type.
+ * Returns a product provider and composables typed to your product query.
+ *
+ * The provider creates a product form store, hydrates the store when the product changes, and destroys the store on unmount. The product composable returns option state and variant selection. The form composable adds field registration, form props, and pending state. Both composables read the latest `onSelect` prop.
  *
- * Returns `{ ProductProvider, useProduct, useProductForm }` where:
- * - `ProductProvider` manages store lifecycle (creation, hydration, cleanup)
- * - `useProduct` provides read-only state and variant selection
- * - `useProductForm` provides form-binding utilities (register, formProps, pending)
+ * The provider throws an error without a cart provider ancestor. Each composable throws an error outside the product provider.
  *
- * Requires a `<CartProvider>` ancestor.
+ * @publicDocs
  */
 declare function createProductComponents<TProduct extends ProductInput>(): {
   ProductProvider: ReturnType<typeof defineComponent>;

package/dist/development/vue/product.mjs

@@ -62,26 +62,26 @@ function useProductFormImpl(store, getOnSelect) {
 	};
 }
 /**
-* Subscribes to a {@link ProductFormStore} and returns form-ready state.
+* Returns form state from a product form store and updates on each store change.
 *
-* This is a pure subscription composable — it does **not** manage store
-* lifecycle. Create the store with `createProductFormStore` and manage its
-* lifecycle (hydration, destruction) yourself, or use
-* `createProductComponents` for a provider-based approach.
+* The composable subscribes to the store and leaves the store lifecycle to you. Create the store with createProductFormStore, then hydrate and destroy the store yourself. For a provider that manages the store, use createProductComponents.
+*
+* Read properties from the returned object. Destructuring reads each getter once and loses reactivity.
+*
+* @publicDocs
 */
 function useProductForm(store, options) {
 	const onSelect = options?.onSelect;
 	return useProductFormImpl(store, () => onSelect);
 }
 /**
-* Creates a typed set of product components bound to a specific product type.
+* Returns a product provider and composables typed to your product query.
+*
+* The provider creates a product form store, hydrates the store when the product changes, and destroys the store on unmount. The product composable returns option state and variant selection. The form composable adds field registration, form props, and pending state. Both composables read the latest `onSelect` prop.
 *
-* Returns `{ ProductProvider, useProduct, useProductForm }` where:
-* - `ProductProvider` manages store lifecycle (creation, hydration, cleanup)
-* - `useProduct` provides read-only state and variant selection
-* - `useProductForm` provides form-binding utilities (register, formProps, pending)
+* The provider throws an error without a cart provider ancestor. Each composable throws an error outside the product provider.
 *
-* Requires a `<CartProvider>` ancestor.
+* @publicDocs
 */
 function createProductComponents() {
 	const ProductStoreKey = Symbol("ProductFormStore");

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

@@ -1 +1 @@
-{"version":3,"file":"product.mjs","names":[],"sources":["../../../src/vue/product.ts"],"sourcesContent":["import {\n  defineComponent,\n  inject,\n  onScopeDispose,\n  onUnmounted,\n  provide,\n  shallowRef,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport type { CartLine } from \"../core/cart/state\";\nimport { getLogger } from \"../core/logging\";\nimport {\n  createProductFormRegister,\n  createProductFormStore,\n  type ProductFormErrors,\n  type ProductFormOptions,\n  type ProductFormRegister,\n  type ProductFormStore,\n  type ProductInput,\n  type ProductVariantFrom,\n  type ValidProductSelectionResult,\n  type VariantSelectionResult,\n} from \"../core/product\";\nimport { getCartEndpoint, useCartStore } from \"./cart\";\n\nconst log = getLogger(\"product\");\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type { ValidProductSelectionResult } from \"../core/product\";\n\n/** Options for {@link useProductForm}. */\nexport interface UseProductFormOptions<TProduct extends ProductInput> {\n  onSelect?: (result: ValidProductSelectionResult<TProduct>) => void;\n}\n\n/** Return value of {@link useProductForm}. */\nexport interface UseProductFormResult<TProduct extends ProductInput> {\n  options: ProductFormOptions<TProduct>;\n  selectedVariant: ProductVariantFrom<TProduct> | null;\n  register: ProductFormRegister;\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n  errors: ProductFormErrors;\n  matchedLineItem: CartLine | null;\n  /** Reactive ref that is `true` while a form submission is in flight. */\n  pending: ShallowRef<boolean>;\n  selectOption: (\n    name: string,\n    value: string,\n  ) => VariantSelectionResult<ProductVariantFrom<TProduct>>;\n}\n\n/** Return value of the `useProduct` composable from {@link createProductComponents}. */\nexport interface UseProductResult<TProduct extends ProductInput> {\n  options: ProductFormOptions<TProduct>;\n  selectedVariant: ProductVariantFrom<TProduct> | null;\n  selectOption: (\n    name: string,\n    value: string,\n  ) => VariantSelectionResult<ProductVariantFrom<TProduct>>;\n  errors: ProductFormErrors;\n  matchedLineItem: CartLine | null;\n}\n\n// ---------------------------------------------------------------------------\n// Internal helpers\n// ---------------------------------------------------------------------------\n\ninterface ProductContextValue<TProduct extends ProductInput> {\n  store: ProductFormStore<TProduct>;\n  getOnSelect: () => ((result: ValidProductSelectionResult<TProduct>) => void) | undefined;\n}\n\n/**\n * Shared implementation backing both the standalone composable and the factory\n * composable. Accepts a `getOnSelect` getter so the factory version can always\n * read the latest provider prop, while the standalone version captures the\n * caller's callback at setup time.\n */\nfunction useProductFormImpl<TProduct extends ProductInput>(\n  store: ProductFormStore<TProduct>,\n  getOnSelect: () => ((result: ValidProductSelectionResult<TProduct>) => void) | undefined,\n): UseProductFormResult<TProduct> {\n  const state = shallowRef(store.getState());\n  const pending = shallowRef(false);\n\n  const unsubscribe = store.subscribe(() => {\n    state.value = store.getState();\n  });\n  onScopeDispose(unsubscribe);\n\n  function selectOption(\n    name: string,\n    value: string,\n  ): VariantSelectionResult<ProductVariantFrom<TProduct>> {\n    const result = store.selectOption(name, value);\n    if (result.status !== \"invalid\") {\n      getOnSelect()?.(result);\n    }\n    return result;\n  }\n\n  function formProps(opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> {\n    return {\n      onSubmit: (e: SubmitEvent) => {\n        opts?.beforeSubmit?.(e);\n        if (e.defaultPrevented) return;\n        e.preventDefault();\n        pending.value = true;\n        store\n          .handleFormSubmit(e)\n          .then(\n            () => opts?.afterSubmit?.(e),\n            (error: unknown) => {\n              log.error(\"form submission error\", { error });\n            },\n          )\n          .finally(() => {\n            pending.value = false;\n          });\n      },\n      method: \"post\",\n      action: getCartEndpoint(),\n    };\n  }\n\n  return {\n    get options() {\n      return state.value.options;\n    },\n    get selectedVariant() {\n      return state.value.selectedVariant;\n    },\n    get register() {\n      return createProductFormRegister(state.value.selectedVariant, selectOption);\n    },\n    formProps,\n    get errors() {\n      return state.value.errors;\n    },\n    get matchedLineItem() {\n      return state.value.matchedLineItem;\n    },\n    pending,\n    selectOption,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Standalone composable\n// ---------------------------------------------------------------------------\n\n/**\n * Subscribes to a {@link ProductFormStore} and returns form-ready state.\n *\n * This is a pure subscription composable — it does **not** manage store\n * lifecycle. Create the store with `createProductFormStore` and manage its\n * lifecycle (hydration, destruction) yourself, or use\n * `createProductComponents` for a provider-based approach.\n */\nexport function useProductForm<TProduct extends ProductInput>(\n  store: ProductFormStore<TProduct>,\n  options?: UseProductFormOptions<TProduct>,\n): UseProductFormResult<TProduct> {\n  const onSelect = options?.onSelect;\n  return useProductFormImpl(store, () => onSelect);\n}\n\n// ---------------------------------------------------------------------------\n// Factory\n// ---------------------------------------------------------------------------\n\n/**\n * Creates a typed set of product components bound to a specific product type.\n *\n * Returns `{ ProductProvider, useProduct, useProductForm }` where:\n * - `ProductProvider` manages store lifecycle (creation, hydration, cleanup)\n * - `useProduct` provides read-only state and variant selection\n * - `useProductForm` provides form-binding utilities (register, formProps, pending)\n *\n * Requires a `<CartProvider>` ancestor.\n */\nexport function createProductComponents<TProduct extends ProductInput>(): {\n  ProductProvider: ReturnType<typeof defineComponent>;\n  useProduct: () => UseProductResult<TProduct>;\n  useProductForm: () => UseProductFormResult<TProduct>;\n} {\n  const ProductStoreKey: InjectionKey<ProductContextValue<TProduct>> = Symbol(\"ProductFormStore\");\n\n  function useProductContext(composableName: string): ProductContextValue<TProduct> {\n    const ctx = inject(ProductStoreKey);\n    if (!ctx) {\n      throw new Error(\n        `${composableName} must be used inside a <ProductProvider>. ` +\n          \"Wrap your component tree with the ProductProvider from createProductComponents(), \" +\n          \"or use the standalone useProductForm(store) composable instead.\",\n      );\n    }\n    return ctx;\n  }\n\n  const ProductProvider = defineComponent({\n    name: \"ProductProvider\",\n    props: {\n      product: {\n        type: Object as PropType<TProduct>,\n        required: true,\n      },\n      onSelect: {\n        type: Function as PropType<(result: ValidProductSelectionResult<TProduct>) => void>,\n        default: undefined,\n      },\n    },\n    setup(props, { slots }) {\n      const product = props.product as TProduct;\n      const cartStore = useCartStore();\n      const store = createProductFormStore<TProduct>(product, cartStore);\n\n      provide(ProductStoreKey, {\n        store,\n        getOnSelect: () =>\n          props.onSelect as ((result: ValidProductSelectionResult<TProduct>) => void) | undefined,\n      });\n\n      let mounted = false;\n      watch(\n        () => {\n          const p = props.product as TProduct;\n          return `${p.id}:${p.selectedOrFirstAvailableVariant?.id ?? \"\"}`;\n        },\n        () => {\n          if (!mounted) {\n            mounted = true;\n            return;\n          }\n          store.hydrate(props.product as TProduct);\n        },\n        { immediate: true },\n      );\n\n      onUnmounted(() => store.destroy());\n\n      return () => slots.default?.();\n    },\n  });\n\n  function useProduct(): UseProductResult<TProduct> {\n    const ctx = useProductContext(\"useProduct\");\n    const state = shallowRef(ctx.store.getState());\n\n    const unsubscribe = ctx.store.subscribe(() => {\n      state.value = ctx.store.getState();\n    });\n    onScopeDispose(unsubscribe);\n\n    function selectOption(\n      name: string,\n      value: string,\n    ): VariantSelectionResult<ProductVariantFrom<TProduct>> {\n      const result = ctx.store.selectOption(name, value);\n      if (result.status !== \"invalid\") {\n        ctx.getOnSelect()?.(result);\n      }\n      return result;\n    }\n\n    return {\n      get options() {\n        return state.value.options;\n      },\n      get selectedVariant() {\n        return state.value.selectedVariant;\n      },\n      selectOption,\n      get errors() {\n        return state.value.errors;\n      },\n      get matchedLineItem() {\n        return state.value.matchedLineItem;\n      },\n    };\n  }\n\n  function useProductFormHook(): UseProductFormResult<TProduct> {\n    const ctx = useProductContext(\"useProductForm\");\n    return useProductFormImpl(ctx.store, ctx.getOnSelect);\n  }\n\n  return {\n    ProductProvider,\n    useProduct,\n    useProductForm: useProductFormHook,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"product.mjs","names":[],"sources":["../../../src/vue/product.ts"],"sourcesContent":["import {\n  defineComponent,\n  inject,\n  onScopeDispose,\n  onUnmounted,\n  provide,\n  shallowRef,\n  watch,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport type { CartLine } from \"../core/cart/state\";\nimport { getLogger } from \"../core/logging\";\nimport {\n  createProductFormRegister,\n  createProductFormStore,\n  type ProductFormErrors,\n  type ProductFormOptions,\n  type ProductFormRegister,\n  type ProductFormStore,\n  type ProductInput,\n  type ProductVariantFrom,\n  type ValidProductSelectionResult,\n  type VariantSelectionResult,\n} from \"../core/product\";\nimport { getCartEndpoint, useCartStore } from \"./cart\";\n\nconst log = getLogger(\"product\");\n\n// ---------------------------------------------------------------------------\n// Shared types\n// ---------------------------------------------------------------------------\n\nexport type { ValidProductSelectionResult } from \"../core/product\";\n\n/** Options for the standalone product form composable. */\nexport interface UseProductFormOptions<TProduct extends ProductInput> {\n  /** Runs after each resolved or unresolved option selection. The composable captures the callback at setup time. */\n  onSelect?: (result: ValidProductSelectionResult<TProduct>) => void;\n}\n\n/** Return value of the product form composables. */\nexport interface UseProductFormResult<TProduct extends ProductInput> {\n  options: ProductFormOptions<TProduct>;\n  selectedVariant: ProductVariantFrom<TProduct> | null;\n  register: ProductFormRegister;\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n  errors: ProductFormErrors;\n  matchedLineItem: CartLine | null;\n  /** Shallow ref that holds `true` while a form submission is in flight. */\n  pending: ShallowRef<boolean>;\n  selectOption: (\n    name: string,\n    value: string,\n  ) => VariantSelectionResult<ProductVariantFrom<TProduct>>;\n}\n\n/** Return value of the product state composable that the product components factory returns. */\nexport interface UseProductResult<TProduct extends ProductInput> {\n  options: ProductFormOptions<TProduct>;\n  selectedVariant: ProductVariantFrom<TProduct> | null;\n  selectOption: (\n    name: string,\n    value: string,\n  ) => VariantSelectionResult<ProductVariantFrom<TProduct>>;\n  errors: ProductFormErrors;\n  matchedLineItem: CartLine | null;\n}\n\n// ---------------------------------------------------------------------------\n// Internal helpers\n// ---------------------------------------------------------------------------\n\ninterface ProductContextValue<TProduct extends ProductInput> {\n  store: ProductFormStore<TProduct>;\n  getOnSelect: () => ((result: ValidProductSelectionResult<TProduct>) => void) | undefined;\n}\n\n/**\n * Shared implementation backing both the standalone composable and the factory\n * composable. Accepts a `getOnSelect` getter so the factory version can always\n * read the latest provider prop, while the standalone version captures the\n * caller's callback at setup time.\n */\nfunction useProductFormImpl<TProduct extends ProductInput>(\n  store: ProductFormStore<TProduct>,\n  getOnSelect: () => ((result: ValidProductSelectionResult<TProduct>) => void) | undefined,\n): UseProductFormResult<TProduct> {\n  const state = shallowRef(store.getState());\n  const pending = shallowRef(false);\n\n  const unsubscribe = store.subscribe(() => {\n    state.value = store.getState();\n  });\n  onScopeDispose(unsubscribe);\n\n  function selectOption(\n    name: string,\n    value: string,\n  ): VariantSelectionResult<ProductVariantFrom<TProduct>> {\n    const result = store.selectOption(name, value);\n    if (result.status !== \"invalid\") {\n      getOnSelect()?.(result);\n    }\n    return result;\n  }\n\n  function formProps(opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> {\n    return {\n      onSubmit: (e: SubmitEvent) => {\n        opts?.beforeSubmit?.(e);\n        if (e.defaultPrevented) return;\n        e.preventDefault();\n        pending.value = true;\n        store\n          .handleFormSubmit(e)\n          .then(\n            () => opts?.afterSubmit?.(e),\n            (error: unknown) => {\n              log.error(\"form submission error\", { error });\n            },\n          )\n          .finally(() => {\n            pending.value = false;\n          });\n      },\n      method: \"post\",\n      action: getCartEndpoint(),\n    };\n  }\n\n  return {\n    get options() {\n      return state.value.options;\n    },\n    get selectedVariant() {\n      return state.value.selectedVariant;\n    },\n    get register() {\n      return createProductFormRegister(state.value.selectedVariant, selectOption);\n    },\n    formProps,\n    get errors() {\n      return state.value.errors;\n    },\n    get matchedLineItem() {\n      return state.value.matchedLineItem;\n    },\n    pending,\n    selectOption,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Standalone composable\n// ---------------------------------------------------------------------------\n\n/**\n * Returns form state from a product form store and updates on each store change.\n *\n * The composable subscribes to the store and leaves the store lifecycle to you. Create the store with createProductFormStore, then hydrate and destroy the store yourself. For a provider that manages the store, use createProductComponents.\n *\n * Read properties from the returned object. Destructuring reads each getter once and loses reactivity.\n *\n * @publicDocs\n */\nexport function useProductForm<TProduct extends ProductInput>(\n  store: ProductFormStore<TProduct>,\n  options?: UseProductFormOptions<TProduct>,\n): UseProductFormResult<TProduct> {\n  const onSelect = options?.onSelect;\n  return useProductFormImpl(store, () => onSelect);\n}\n\n// ---------------------------------------------------------------------------\n// Factory\n// ---------------------------------------------------------------------------\n\n/**\n * Returns a product provider and composables typed to your product query.\n *\n * The provider creates a product form store, hydrates the store when the product changes, and destroys the store on unmount. The product composable returns option state and variant selection. The form composable adds field registration, form props, and pending state. Both composables read the latest `onSelect` prop.\n *\n * The provider throws an error without a cart provider ancestor. Each composable throws an error outside the product provider.\n *\n * @publicDocs\n */\nexport function createProductComponents<TProduct extends ProductInput>(): {\n  ProductProvider: ReturnType<typeof defineComponent>;\n  useProduct: () => UseProductResult<TProduct>;\n  useProductForm: () => UseProductFormResult<TProduct>;\n} {\n  const ProductStoreKey: InjectionKey<ProductContextValue<TProduct>> = Symbol(\"ProductFormStore\");\n\n  function useProductContext(composableName: string): ProductContextValue<TProduct> {\n    const ctx = inject(ProductStoreKey);\n    if (!ctx) {\n      throw new Error(\n        `${composableName} must be used inside a <ProductProvider>. ` +\n          \"Wrap your component tree with the ProductProvider from createProductComponents(), \" +\n          \"or use the standalone useProductForm(store) composable instead.\",\n      );\n    }\n    return ctx;\n  }\n\n  const ProductProvider = defineComponent({\n    name: \"ProductProvider\",\n    props: {\n      product: {\n        type: Object as PropType<TProduct>,\n        required: true,\n      },\n      onSelect: {\n        type: Function as PropType<(result: ValidProductSelectionResult<TProduct>) => void>,\n        default: undefined,\n      },\n    },\n    setup(props, { slots }) {\n      const product = props.product as TProduct;\n      const cartStore = useCartStore();\n      const store = createProductFormStore<TProduct>(product, cartStore);\n\n      provide(ProductStoreKey, {\n        store,\n        getOnSelect: () =>\n          props.onSelect as ((result: ValidProductSelectionResult<TProduct>) => void) | undefined,\n      });\n\n      let mounted = false;\n      watch(\n        () => {\n          const p = props.product as TProduct;\n          return `${p.id}:${p.selectedOrFirstAvailableVariant?.id ?? \"\"}`;\n        },\n        () => {\n          if (!mounted) {\n            mounted = true;\n            return;\n          }\n          store.hydrate(props.product as TProduct);\n        },\n        { immediate: true },\n      );\n\n      onUnmounted(() => store.destroy());\n\n      return () => slots.default?.();\n    },\n  });\n\n  function useProduct(): UseProductResult<TProduct> {\n    const ctx = useProductContext(\"useProduct\");\n    const state = shallowRef(ctx.store.getState());\n\n    const unsubscribe = ctx.store.subscribe(() => {\n      state.value = ctx.store.getState();\n    });\n    onScopeDispose(unsubscribe);\n\n    function selectOption(\n      name: string,\n      value: string,\n    ): VariantSelectionResult<ProductVariantFrom<TProduct>> {\n      const result = ctx.store.selectOption(name, value);\n      if (result.status !== \"invalid\") {\n        ctx.getOnSelect()?.(result);\n      }\n      return result;\n    }\n\n    return {\n      get options() {\n        return state.value.options;\n      },\n      get selectedVariant() {\n        return state.value.selectedVariant;\n      },\n      selectOption,\n      get errors() {\n        return state.value.errors;\n      },\n      get matchedLineItem() {\n        return state.value.matchedLineItem;\n      },\n    };\n  }\n\n  function useProductFormHook(): UseProductFormResult<TProduct> {\n    const ctx = useProductContext(\"useProductForm\");\n    return useProductFormImpl(ctx.store, ctx.getOnSelect);\n  }\n\n  return {\n    ProductProvider,\n    useProduct,\n    useProductForm: useProductFormHook,\n  };\n}\n"],"mappings":"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"}

package/dist/development/vue/shop-pay.d.mts

@@ -2,24 +2,21 @@ import { ShopPayButtonOptions } from "../core/shop-pay/shop-pay.mjs";
 import * as _$vue from "vue";
 
 //#region src/vue/shop-pay.d.ts
+/**
+ * Props for the Vue ShopPayButton component.
+ *
+ * @publicDocs
+ */
 type ShopPayButtonProps = ShopPayButtonOptions;
-declare const ShopPayButton: _$vue.DefineSetupFnComponent<ShopPayButtonOptions, {}, {}, {
-  checkoutUrl?: string;
-  paymentOption?: "shop_pay" | "shop_pay_installments";
-  source?: string;
-  sourceToken?: string;
-  nonce?: string;
-  channel?: "headless" | "hydrogen";
-  disabled?: boolean;
-  width?: string;
-  borderRadius?: string;
-  accessibilityLabel?: string;
-} & {
-  variants?: readonly string[] | readonly {
-    id: string;
-    quantity?: number;
-  }[];
-} & {}, _$vue.PublicProps>;
+/**
+ * Renders the Shop Pay button custom element. During server rendering, the component outputs
+ * declarative shadow DOM, which displays the button before scripts load.
+ *
+ * The component takes the createShopPayButton options as Vue props. The component renders no slot content and drops extra attributes, including `class` and `style`. Vue templates can pass the props in kebab-case, such as `border-radius` and `accessibility-label`.
+ *
+ * @publicDocs
+ */
+declare const ShopPayButton: _$vue.DefineSetupFnComponent<ShopPayButtonOptions, {}, {}, ShopPayButtonOptions & {}, _$vue.PublicProps>;
 //#endregion
 export { ShopPayButton, ShopPayButtonProps };
 //# sourceMappingURL=shop-pay.d.mts.map

package/dist/development/vue/shop-pay.mjs

@@ -4,6 +4,14 @@ import { defineComponent, h } from "vue";
 //#region src/vue/shop-pay.ts
 const canUseDom = typeof document !== "undefined";
 defineShopPayButton();
+/**
+* Renders the Shop Pay button custom element. During server rendering, the component outputs
+* declarative shadow DOM, which displays the button before scripts load.
+*
+* The component takes the createShopPayButton options as Vue props. The component renders no slot content and drops extra attributes, including `class` and `style`. Vue templates can pass the props in kebab-case, such as `border-radius` and `accessibility-label`.
+*
+* @publicDocs
+*/
 const ShopPayButton = defineComponent((props) => {
 	return () => {
 		const attributes = getShopPayButtonElementAttributes(props);

package/dist/development/vue/shop-pay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shop-pay.mjs","names":[],"sources":["../../../src/vue/shop-pay.ts"],"sourcesContent":["import { defineComponent, h } from \"vue\";\n\nimport {\n  defineShopPayButton,\n  getShopPayButtonDeclarativeShadowDomHtml,\n  getShopPayButtonElementAttributes,\n  SHOP_PAY_BUTTON_TAG_NAME,\n  type ShopPayButtonOptions,\n} from \"../core/shop-pay/shop-pay\";\n\nexport type ShopPayButtonProps = ShopPayButtonOptions;\n\ntype CompletePropOptions<T> = {\n  [K in keyof T]-?: unknown;\n};\n\nconst canUseDom = typeof document !== \"undefined\";\ndefineShopPayButton();\n\nexport const ShopPayButton = defineComponent(\n  (props: ShopPayButtonProps) => {\n    return () => {\n      const attributes = getShopPayButtonElementAttributes(props);\n      return canUseDom\n        ? h(SHOP_PAY_BUTTON_TAG_NAME, attributes)\n        : h(SHOP_PAY_BUTTON_TAG_NAME, {\n            ...attributes,\n            innerHTML: getShopPayButtonDeclarativeShadowDomHtml(props),\n          });\n    };\n  },\n  {\n    name: \"ShopPayButton\",\n    inheritAttrs: false,\n    props: {\n      variants: null,\n      channel: null,\n      checkoutUrl: String,\n      paymentOption: null,\n      source: String,\n      sourceToken: String,\n      nonce: String,\n      disabled: Boolean,\n      width: String,\n      borderRadius: String,\n      accessibilityLabel: String,\n    } satisfies CompletePropOptions<ShopPayButtonProps>,\n  },\n);\n"],"mappings":";;;;AAgBA,MAAM,YAAY,OAAO,aAAa;AACtC,qBAAqB;AAErB,MAAa,gBAAgB,iBAC1B,UAA8B;AAC7B,cAAa;EACX,MAAM,aAAa,kCAAkC,MAAM;AAC3D,SAAO,YACH,EAAE,0BAA0B,WAAW,GACvC,EAAE,0BAA0B;GAC1B,GAAG;GACH,WAAW,yCAAyC,MAAM;GAC3D,CAAC;;GAGV;CACE,MAAM;CACN,cAAc;CACd,OAAO;EACL,UAAU;EACV,SAAS;EACT,aAAa;EACb,eAAe;EACf,QAAQ;EACR,aAAa;EACb,OAAO;EACP,UAAU;EACV,OAAO;EACP,cAAc;EACd,oBAAoB;EACrB;CACF,CACF"}
+{"version":3,"file":"shop-pay.mjs","names":[],"sources":["../../../src/vue/shop-pay.ts"],"sourcesContent":["import { defineComponent, h } from \"vue\";\n\nimport {\n  defineShopPayButton,\n  getShopPayButtonDeclarativeShadowDomHtml,\n  getShopPayButtonElementAttributes,\n  SHOP_PAY_BUTTON_TAG_NAME,\n  type ShopPayButtonOptions,\n} from \"../core/shop-pay/shop-pay\";\n\n/**\n * Props for the Vue ShopPayButton component.\n *\n * @publicDocs\n */\nexport type ShopPayButtonProps = ShopPayButtonOptions;\n\ntype CompletePropOptions<T> = {\n  [K in keyof T]-?: unknown;\n};\n\nconst canUseDom = typeof document !== \"undefined\";\ndefineShopPayButton();\n\n/**\n * Renders the Shop Pay button custom element. During server rendering, the component outputs\n * declarative shadow DOM, which displays the button before scripts load.\n *\n * The component takes the createShopPayButton options as Vue props. The component renders no slot content and drops extra attributes, including `class` and `style`. Vue templates can pass the props in kebab-case, such as `border-radius` and `accessibility-label`.\n *\n * @publicDocs\n */\nexport const ShopPayButton = defineComponent(\n  (props: ShopPayButtonProps) => {\n    return () => {\n      const attributes = getShopPayButtonElementAttributes(props);\n      return canUseDom\n        ? h(SHOP_PAY_BUTTON_TAG_NAME, attributes)\n        : h(SHOP_PAY_BUTTON_TAG_NAME, {\n            ...attributes,\n            innerHTML: getShopPayButtonDeclarativeShadowDomHtml(props),\n          });\n    };\n  },\n  {\n    name: \"ShopPayButton\",\n    inheritAttrs: false,\n    props: {\n      variants: null,\n      channel: null,\n      checkoutUrl: String,\n      paymentOption: null,\n      source: String,\n      sourceToken: String,\n      nonce: String,\n      disabled: Boolean,\n      width: String,\n      borderRadius: String,\n      accessibilityLabel: String,\n    } satisfies CompletePropOptions<ShopPayButtonProps>,\n  },\n);\n"],"mappings":";;;;AAqBA,MAAM,YAAY,OAAO,aAAa;AACtC,qBAAqB;;;;;;;;;AAUrB,MAAa,gBAAgB,iBAC1B,UAA8B;AAC7B,cAAa;EACX,MAAM,aAAa,kCAAkC,MAAM;AAC3D,SAAO,YACH,EAAE,0BAA0B,WAAW,GACvC,EAAE,0BAA0B;GAC1B,GAAG;GACH,WAAW,yCAAyC,MAAM;GAC3D,CAAC;;GAGV;CACE,MAAM;CACN,cAAc;CACd,OAAO;EACL,UAAU;EACV,SAAS;EACT,aAAa;EACb,eAAe;EACf,QAAQ;EACR,aAAa;EACb,OAAO;EACP,UAAU;EACV,OAAO;EACP,cAAc;EACd,oBAAoB;EACrB;CACF,CACF"}

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

@@ -3,11 +3,22 @@ import { ConsentConfig, ConsentSetup } from "../core/analytics/types.mjs";
 import * as _$vue from "vue";
 
 //#region src/vue/shopify-scripts.d.ts
+/**
+ * Props for the Vue ShopifyScripts component.
+ *
+ * @publicDocs
+ */
 type ShopifyScriptsProps = ShopifyScriptTagsOptions & {
   navigate?: ShopifyRoutesOptions["navigate"];
   routes?: ShopifyRoutesOptions["routes"];
   webMcp?: boolean;
 };
+/**
+ * Renders Shopify's script tags during server rendering and starts the scripts once, when the
+ * component mounts.
+ *
+ * @publicDocs
+ */
 declare const ShopifyScripts: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   i18n: {
     type: () => ShopifyScriptsI18n;

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

@@ -12,6 +12,12 @@ const analyticsProp = Object;
 const debugProp = Object;
 const inboxProp = Boolean;
 const accountProp = Boolean;
+/**
+* Renders Shopify's script tags during server rendering and starts the scripts once, when the
+* component mounts.
+*
+* @publicDocs
+*/
 const ShopifyScripts = defineComponent({
 	name: "ShopifyScripts",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"shopify-scripts.mjs","names":[],"sources":["../../../src/vue/shopify-scripts.ts"],"sourcesContent":["import { defineComponent, h, onMounted, type PropType } from \"vue\";\n\nimport {\n  getShopifyScriptTags,\n  initializeShopifyScripts,\n  type ShopifyScriptsShop,\n  type ShopifyScriptsI18n,\n  type ShopifyScriptTagsOptions,\n  type ShopifyRoutesOptions,\n} from \"../core/shopify-scripts/index\";\n\nexport type ShopifyScriptsProps = ShopifyScriptTagsOptions & {\n  navigate?: ShopifyRoutesOptions[\"navigate\"];\n  routes?: ShopifyRoutesOptions[\"routes\"];\n  webMcp?: boolean;\n};\n\ntype CompletePropOptions<T> = {\n  [K in keyof T]-?: unknown;\n};\n\nconst i18nProp: PropType<ShopifyScriptsI18n> = Object;\nconst navigateProp: PropType<NonNullable<ShopifyRoutesOptions[\"navigate\"]>> | null = null;\nconst routesProp: PropType<NonNullable<ShopifyRoutesOptions[\"routes\"]>> | null = null;\nconst shopProp: PropType<ShopifyScriptsShop> = Object;\nconst consentProp: PropType<ShopifyScriptTagsOptions[\"consent\"]> = Object;\nconst analyticsProp: PropType<ShopifyScriptTagsOptions[\"analytics\"]> = Object;\nconst debugProp: PropType<ShopifyScriptTagsOptions[\"debug\"]> = Object;\nconst inboxProp: PropType<ShopifyScriptTagsOptions[\"inbox\"]> = Boolean;\nconst accountProp: PropType<ShopifyScriptTagsOptions[\"account\"]> = Boolean;\n\nexport const ShopifyScripts = defineComponent({\n  name: \"ShopifyScripts\",\n  props: {\n    i18n: {\n      type: i18nProp,\n      default: undefined,\n    },\n    nonce: {\n      type: String,\n      default: undefined,\n    },\n    routes: {\n      type: routesProp,\n      default: undefined,\n    },\n    navigate: {\n      type: navigateProp,\n      default: undefined,\n    },\n    consent: {\n      type: consentProp,\n      default: undefined,\n    },\n    analytics: {\n      type: analyticsProp,\n      default: undefined,\n    },\n    debug: {\n      type: debugProp,\n      default: undefined,\n    },\n    webMcp: {\n      type: Boolean,\n      default: undefined,\n    },\n    inbox: {\n      type: inboxProp,\n      default: undefined,\n    },\n    account: {\n      type: accountProp,\n      default: undefined,\n    },\n    shopifyAnalytics: {\n      type: Boolean,\n      default: undefined,\n    },\n    shop: {\n      type: shopProp,\n      required: true as const,\n    },\n  } satisfies CompletePropOptions<ShopifyScriptsProps>,\n  setup(props) {\n    onMounted(() => {\n      void initializeShopifyScripts({\n        consent: props.consent,\n        navigate: props.navigate,\n        routes: props.routes,\n        webMcp: props.webMcp !== false,\n      });\n    });\n\n    return () =>\n      getShopifyScriptTags(props).tags.map(({ tagName, attributes, innerHTML }) =>\n        h(tagName, {\n          ...attributes,\n          ...(innerHTML ? { innerHTML } : {}),\n        }),\n      );\n  },\n});\n"],"mappings":";;;;;AAqBA,MAAM,WAAyC;AAC/C,MAAM,eAA+E;AACrF,MAAM,aAA2E;AACjF,MAAM,WAAyC;AAC/C,MAAM,cAA6D;AACnE,MAAM,gBAAiE;AACvE,MAAM,YAAyD;AAC/D,MAAM,YAAyD;AAC/D,MAAM,cAA6D;AAEnE,MAAa,iBAAiB,gBAAgB;CAC5C,MAAM;CACN,OAAO;EACL,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EACF;CACD,MAAM,OAAO;AACX,kBAAgB;AACd,GAAK,yBAAyB;IAC5B,SAAS,MAAM;IACf,UAAU,MAAM;IAChB,QAAQ,MAAM;IACd,QAAQ,MAAM,WAAW;IAC1B,CAAC;IACF;AAEF,eACE,qBAAqB,MAAM,CAAC,KAAK,KAAK,EAAE,SAAS,YAAY,gBAC3D,EAAE,SAAS;GACT,GAAG;GACH,GAAI,YAAY,EAAE,WAAW,GAAG,EAAE;GACnC,CAAC,CACH;;CAEN,CAAC"}
+{"version":3,"file":"shopify-scripts.mjs","names":[],"sources":["../../../src/vue/shopify-scripts.ts"],"sourcesContent":["import { defineComponent, h, onMounted, type PropType } from \"vue\";\n\nimport {\n  getShopifyScriptTags,\n  initializeShopifyScripts,\n  type ShopifyScriptsShop,\n  type ShopifyScriptsI18n,\n  type ShopifyScriptTagsOptions,\n  type ShopifyRoutesOptions,\n} from \"../core/shopify-scripts/index\";\n\n/**\n * Props for the Vue ShopifyScripts component.\n *\n * @publicDocs\n */\nexport type ShopifyScriptsProps = ShopifyScriptTagsOptions & {\n  navigate?: ShopifyRoutesOptions[\"navigate\"];\n  routes?: ShopifyRoutesOptions[\"routes\"];\n  webMcp?: boolean;\n};\n\ntype CompletePropOptions<T> = {\n  [K in keyof T]-?: unknown;\n};\n\nconst i18nProp: PropType<ShopifyScriptsI18n> = Object;\nconst navigateProp: PropType<NonNullable<ShopifyRoutesOptions[\"navigate\"]>> | null = null;\nconst routesProp: PropType<NonNullable<ShopifyRoutesOptions[\"routes\"]>> | null = null;\nconst shopProp: PropType<ShopifyScriptsShop> = Object;\nconst consentProp: PropType<ShopifyScriptTagsOptions[\"consent\"]> = Object;\nconst analyticsProp: PropType<ShopifyScriptTagsOptions[\"analytics\"]> = Object;\nconst debugProp: PropType<ShopifyScriptTagsOptions[\"debug\"]> = Object;\nconst inboxProp: PropType<ShopifyScriptTagsOptions[\"inbox\"]> = Boolean;\nconst accountProp: PropType<ShopifyScriptTagsOptions[\"account\"]> = Boolean;\n\n/**\n * Renders Shopify's script tags during server rendering and starts the scripts once, when the\n * component mounts.\n *\n * @publicDocs\n */\nexport const ShopifyScripts = defineComponent({\n  name: \"ShopifyScripts\",\n  props: {\n    i18n: {\n      type: i18nProp,\n      default: undefined,\n    },\n    nonce: {\n      type: String,\n      default: undefined,\n    },\n    routes: {\n      type: routesProp,\n      default: undefined,\n    },\n    navigate: {\n      type: navigateProp,\n      default: undefined,\n    },\n    consent: {\n      type: consentProp,\n      default: undefined,\n    },\n    analytics: {\n      type: analyticsProp,\n      default: undefined,\n    },\n    debug: {\n      type: debugProp,\n      default: undefined,\n    },\n    webMcp: {\n      type: Boolean,\n      default: undefined,\n    },\n    inbox: {\n      type: inboxProp,\n      default: undefined,\n    },\n    account: {\n      type: accountProp,\n      default: undefined,\n    },\n    shopifyAnalytics: {\n      type: Boolean,\n      default: undefined,\n    },\n    shop: {\n      type: shopProp,\n      required: true as const,\n    },\n  } satisfies CompletePropOptions<ShopifyScriptsProps>,\n  setup(props) {\n    onMounted(() => {\n      void initializeShopifyScripts({\n        consent: props.consent,\n        navigate: props.navigate,\n        routes: props.routes,\n        webMcp: props.webMcp !== false,\n      });\n    });\n\n    return () =>\n      getShopifyScriptTags(props).tags.map(({ tagName, attributes, innerHTML }) =>\n        h(tagName, {\n          ...attributes,\n          ...(innerHTML ? { innerHTML } : {}),\n        }),\n      );\n  },\n});\n"],"mappings":";;;;;AA0BA,MAAM,WAAyC;AAC/C,MAAM,eAA+E;AACrF,MAAM,aAA2E;AACjF,MAAM,WAAyC;AAC/C,MAAM,cAA6D;AACnE,MAAM,gBAAiE;AACvE,MAAM,YAAyD;AAC/D,MAAM,YAAyD;AAC/D,MAAM,cAA6D;;;;;;;AAQnE,MAAa,iBAAiB,gBAAgB;CAC5C,MAAM;CACN,OAAO;EACL,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EACD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EACF;CACD,MAAM,OAAO;AACX,kBAAgB;AACd,GAAK,yBAAyB;IAC5B,SAAS,MAAM;IACf,UAAU,MAAM;IAChB,QAAQ,MAAM;IACd,QAAQ,MAAM,WAAW;IAC1B,CAAC;IACF;AAEF,eACE,qBAAqB,MAAM,CAAC,KAAK,KAAK,EAAE,SAAS,YAAY,gBAC3D,EAAE,SAAS;GACT,GAAG;GACH,GAAI,YAAY,EAAE,WAAW,GAAG,EAAE;GACnC,CAAC,CACH;;CAEN,CAAC"}

package/dist/globals.d.mts

@@ -4,9 +4,14 @@ import { ShopifyStandardActions } from "./vendor/standard-actions.mjs";
 import { StorefrontAnalytics } from "./core/analytics/types.mjs";
 
 //#region src/globals.d.ts
+/**
+ * The `window.Shopify` object that Shopify's scripts and Hydrogen share in the browser.
+ *
+ * @publicDocs
+ */
 type ShopifyGlobal = {
   actions: ShopifyStandardActions;
-  analytics?: StorefrontAnalytics;
+  analytics?: StorefrontAnalytics; /** The store settings that Shopify's storefront web components read. */
   components: {
     config: {
       storeDomain: string;
@@ -15,11 +20,11 @@ type ShopifyGlobal = {
       country?: string;
       language?: string;
     };
-  };
-  country: I18nConfig["country"] | string;
+  }; /** The customer's country code. Defaults to `US`. */
+  country: I18nConfig["country"] | string; /** The active currency code, in uppercase. */
   currency?: {
     active: string;
-  };
+  }; /** Shopify's Customer Privacy API, which reads and updates the customer's consent. */
   customerPrivacy: {
     config?: {
       isHeadless?: boolean;
@@ -36,14 +41,18 @@ type ShopifyGlobal = {
     setTrackingConsent: (consent: Record<string, unknown>) => Promise<unknown>;
     shouldShowBanner: () => boolean;
     shouldShowGDPRBanner: () => boolean;
-  };
-  locale: Lowercase<I18nConfig["language"]> | string; /** @deprecated Use `Shopify.routes.navigate` instead. */
-  navigate?: (url: string) => void | Promise<void>;
+  }; /** The customer's language code, in lowercase. Defaults to `en`. */
+  locale: Lowercase<I18nConfig["language"]> | string;
+  /**
+   * Navigates to a storefront URL.
+   * @deprecated Use `Shopify.routes.navigate` instead.
+   */
+  navigate?: (url: string) => void | Promise<void>; /** The storefront's route settings and navigation helper. */
   routes: {
-    root: string; /** @internal */
-    apiProxyPrefix?: string; /** @internal */
-    match?: (url: string) => ShopifyStandardRouteMatch | null; /** @internal */
-    resolve?: (url: string) => string; /** @internal */
+    /** The locale path prefix with a trailing slash, or `"/"` when the storefront has no prefix. */root: string; /** @private */
+    apiProxyPrefix?: string; /** @private */
+    match?: (url: string) => ShopifyStandardRouteMatch | null; /** @private */
+    resolve?: (url: string) => string; /** Navigates to a storefront URL after resolving it to your app's route. */
     navigate?: (url: string) => void | Promise<void>;
     [key: string]: unknown;
   }; /** The shop's permanent `*.myshopify.com` domain. */