@shopify/hydrogen 2026.4.5 → 2026.10.0-preview.2

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

@@ -0,0 +1,171 @@
+import { createPredictiveSearchFormRegister, getPredictiveSearchFormAttributes, readPredictiveSearchFormTerm } from "../core/predictive-search/form.mjs";
+import { createPredictiveSearchStore } from "../core/predictive-search/store.mjs";
+import { defineComponent, inject, onMounted, onUnmounted, provide, shallowRef, watch } from "vue";
+
+//#region src/vue/predictive-search.ts
+const CONFIG_ARRAY_SEPARATOR = "\0";
+const PredictiveSearchKey = Symbol("PredictiveSearch");
+const PredictiveSearchProvider = defineComponent({
+	name: "PredictiveSearchProvider",
+	props: {
+		predictiveSearchEndpoint: {
+			type: String,
+			default: void 0
+		},
+		searchAction: {
+			type: String,
+			default: void 0
+		},
+		debounceInMs: {
+			type: Number,
+			default: void 0
+		},
+		minTermLength: {
+			type: Number,
+			default: void 0
+		},
+		fetch: {
+			type: Function,
+			default: void 0
+		},
+		limit: {
+			type: Number,
+			default: void 0
+		},
+		limitScope: {
+			type: String,
+			default: void 0
+		},
+		types: {
+			type: Array,
+			default: void 0
+		},
+		searchableFields: {
+			type: Array,
+			default: void 0
+		},
+		unavailableProducts: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		function buildStoreOptions() {
+			return {
+				predictiveSearchEndpoint: props.predictiveSearchEndpoint,
+				debounceInMs: props.debounceInMs,
+				minTermLength: props.minTermLength,
+				fetch: props.fetch,
+				limit: props.limit,
+				limitScope: props.limitScope,
+				types: props.types,
+				searchableFields: props.searchableFields,
+				unavailableProducts: props.unavailableProducts
+			};
+		}
+		const storeRef = shallowRef(createPredictiveSearchStore(buildStoreOptions()));
+		const searchActionRef = shallowRef(props.searchAction);
+		provide(PredictiveSearchKey, {
+			storeRef,
+			searchActionRef
+		});
+		watch(() => props.searchAction, (next) => {
+			searchActionRef.value = next;
+		});
+		watch(() => [
+			props.predictiveSearchEndpoint,
+			props.debounceInMs,
+			props.minTermLength,
+			props.fetch,
+			props.limit,
+			props.limitScope,
+			getArrayKey(props.types),
+			getArrayKey(props.searchableFields),
+			props.unavailableProducts
+		], () => {
+			storeRef.value.destroy();
+			storeRef.value = createPredictiveSearchStore(buildStoreOptions());
+			storeRef.value.connect();
+		});
+		onMounted(() => {
+			storeRef.value.connect();
+		});
+		onUnmounted(() => {
+			storeRef.value.destroy();
+		});
+		return () => slots.default?.();
+	}
+});
+function getArrayKey(values) {
+	return values?.join(CONFIG_ARRAY_SEPARATOR) ?? "";
+}
+function useRequiredContext(composableName) {
+	const context = inject(PredictiveSearchKey, null);
+	if (!context) throw new Error(`${composableName} must be used inside a <PredictiveSearchProvider>.`);
+	return context;
+}
+function usePredictiveSearch(selector, isEqual) {
+	const { storeRef } = useRequiredContext("usePredictiveSearch");
+	const resolve = selector ?? ((state) => state);
+	const selected = shallowRef(resolve(storeRef.value.getState()));
+	watch(() => storeRef.value, (store, _, onCleanup) => {
+		const typedStore = store;
+		selected.value = resolve(typedStore.getState());
+		onCleanup(typedStore.subscribe(() => {
+			const next = resolve(typedStore.getState());
+			if (isEqual && selector) {
+				if (isEqual(selected.value, next)) return;
+			}
+			selected.value = next;
+		}));
+	}, { immediate: true });
+	return selected;
+}
+function usePredictiveSearchActions() {
+	const { storeRef } = useRequiredContext("usePredictiveSearchActions");
+	return {
+		search: (term) => storeRef.value.search(term),
+		clear: () => storeRef.value.clear()
+	};
+}
+function usePredictiveSearchForm() {
+	const { storeRef, searchActionRef } = useRequiredContext("usePredictiveSearchForm");
+	const coreRegister = createPredictiveSearchFormRegister();
+	function register(field, options = {}) {
+		const { onInput, ...attributes } = options;
+		const coreAttributes = coreRegister(field);
+		return {
+			...attributes,
+			...coreAttributes,
+			onInput: (event) => {
+				const term = event.target.value;
+				onInput?.(event, term);
+				if (event.defaultPrevented) return;
+				storeRef.value.search(term);
+			}
+		};
+	}
+	function formProps(options = {}) {
+		const { onSubmit, preventDefault, ...attributes } = options;
+		return {
+			...getPredictiveSearchFormAttributes(searchActionRef.value),
+			...attributes,
+			onSubmit: (event) => {
+				const term = readPredictiveSearchFormTerm(new FormData(event.currentTarget));
+				onSubmit?.(event, term);
+				if (event.defaultPrevented) return;
+				if (!preventDefault) return;
+				event.preventDefault();
+				storeRef.value.search(term);
+			}
+		};
+	}
+	return {
+		formProps,
+		register
+	};
+}
+
+//#endregion
+export { PredictiveSearchProvider, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm };
+//# sourceMappingURL=predictive-search.mjs.map

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

@@ -0,0 +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 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 = Pick<PredictiveSearchStore, \"search\" | \"clear\">;\n\nexport type PredictiveSearchFormPropsOptions = {\n  preventDefault?: boolean;\n  onSubmit?: (event: SubmitEvent, term: string) => void;\n  [key: string]: unknown;\n};\n\nexport type PredictiveSearchQueryInputPropsOptions = {\n  onInput?: (event: Event, term: string) => void;\n  [key: string]: unknown;\n};\n\nexport type PredictiveSearchFormResult = {\n  formProps(options?: PredictiveSearchFormPropsOptions): Record<string, unknown>;\n  register: (\n    field: \"query\",\n    options?: PredictiveSearchQueryInputPropsOptions,\n  ) => Record<string, unknown>;\n};\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\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\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\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

@@ -0,0 +1,57 @@
+import { CartLine } from "../core/cart/state.mjs";
+import { ProductInput, ProductVariantFrom } from "../core/product/state.mjs";
+import { ProductFormErrors, ProductFormOptions, ProductFormStore, ValidProductSelectionResult, VariantSelectionResult } from "../core/product/product-form.mjs";
+import { ProductFormRegister } from "../core/product/form.mjs";
+import { ShallowRef, defineComponent } from "vue";
+
+//#region src/vue/product.d.ts
+interface UseProductFormOptions<TProduct extends ProductInput> {
+  onSelect?: (result: ValidProductSelectionResult<TProduct>) => void;
+}
+interface UseProductFormResult<TProduct extends ProductInput> {
+  options: ProductFormOptions<TProduct>;
+  selectedVariant: ProductVariantFrom<TProduct> | null;
+  register: ProductFormRegister;
+  formProps: (opts?: {
+    beforeSubmit?: (e: Event) => void;
+    afterSubmit?: (e: Event) => void;
+  }) => Record<string, unknown>;
+  errors: ProductFormErrors;
+  matchedLineItem: CartLine | null;
+  pending: ShallowRef<boolean>;
+  selectOption: (name: string, value: string) => VariantSelectionResult<ProductVariantFrom<TProduct>>;
+}
+interface UseProductResult<TProduct extends ProductInput> {
+  options: ProductFormOptions<TProduct>;
+  selectedVariant: ProductVariantFrom<TProduct> | null;
+  selectOption: (name: string, value: string) => VariantSelectionResult<ProductVariantFrom<TProduct>>;
+  errors: ProductFormErrors;
+  matchedLineItem: CartLine | null;
+}
+/**
+ * Subscribes to a {@link ProductFormStore} and returns form-ready state.
+ *
+ * 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.
+ */
+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 `{ 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)
+ *
+ * Requires a `<CartProvider>` ancestor.
+ */
+declare function createProductComponents<TProduct extends ProductInput>(): {
+  ProductProvider: ReturnType<typeof defineComponent>;
+  useProduct: () => UseProductResult<TProduct>;
+  useProductForm: () => UseProductFormResult<TProduct>;
+};
+//#endregion
+export { UseProductFormOptions, UseProductFormResult, UseProductResult, createProductComponents, useProductForm };
+//# sourceMappingURL=product.d.mts.map

package/dist/development/vue/product.mjs

@@ -0,0 +1,167 @@
+import { getLogger } from "../core/logging/logging.mjs";
+import { createProductFormStore } from "../core/product/product-form.mjs";
+import { createProductFormRegister } from "../core/product/form.mjs";
+import { getCartEndpoint, useCartStore } from "./cart.mjs";
+import { defineComponent, inject, onScopeDispose, onUnmounted, provide, shallowRef, watch } from "vue";
+
+//#region src/vue/product.ts
+const log = getLogger("product");
+/**
+* Shared implementation backing both the standalone composable and the factory
+* composable. Accepts a `getOnSelect` getter so the factory version can always
+* read the latest provider prop, while the standalone version captures the
+* caller's callback at setup time.
+*/
+function useProductFormImpl(store, getOnSelect) {
+	const state = shallowRef(store.getState());
+	const pending = shallowRef(false);
+	onScopeDispose(store.subscribe(() => {
+		state.value = store.getState();
+	}));
+	function selectOption(name, value) {
+		const result = store.selectOption(name, value);
+		if (result.status !== "invalid") getOnSelect()?.(result);
+		return result;
+	}
+	function formProps(opts) {
+		return {
+			onSubmit: (e) => {
+				opts?.beforeSubmit?.(e);
+				if (e.defaultPrevented) return;
+				e.preventDefault();
+				pending.value = true;
+				store.handleFormSubmit(e).then(() => opts?.afterSubmit?.(e), (error) => {
+					log.error("form submission error", { error });
+				}).finally(() => {
+					pending.value = false;
+				});
+			},
+			method: "post",
+			action: getCartEndpoint()
+		};
+	}
+	return {
+		get options() {
+			return state.value.options;
+		},
+		get selectedVariant() {
+			return state.value.selectedVariant;
+		},
+		get register() {
+			return createProductFormRegister(state.value.selectedVariant, selectOption);
+		},
+		formProps,
+		get errors() {
+			return state.value.errors;
+		},
+		get matchedLineItem() {
+			return state.value.matchedLineItem;
+		},
+		pending,
+		selectOption
+	};
+}
+/**
+* Subscribes to a {@link ProductFormStore} and returns form-ready state.
+*
+* 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.
+*/
+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 `{ 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)
+*
+* Requires a `<CartProvider>` ancestor.
+*/
+function createProductComponents() {
+	const ProductStoreKey = Symbol("ProductFormStore");
+	function useProductContext(composableName) {
+		const ctx = inject(ProductStoreKey);
+		if (!ctx) throw new Error(`${composableName} must be used inside a <ProductProvider>. Wrap your component tree with the ProductProvider from createProductComponents(), or use the standalone useProductForm(store) composable instead.`);
+		return ctx;
+	}
+	const ProductProvider = defineComponent({
+		name: "ProductProvider",
+		props: {
+			product: {
+				type: Object,
+				required: true
+			},
+			onSelect: {
+				type: Function,
+				default: void 0
+			}
+		},
+		setup(props, { slots }) {
+			const product = props.product;
+			const store = createProductFormStore(product, useCartStore());
+			provide(ProductStoreKey, {
+				store,
+				getOnSelect: () => props.onSelect
+			});
+			let mounted = false;
+			watch(() => {
+				const p = props.product;
+				return `${p.id}:${p.selectedOrFirstAvailableVariant?.id ?? ""}`;
+			}, () => {
+				if (!mounted) {
+					mounted = true;
+					return;
+				}
+				store.hydrate(props.product);
+			}, { immediate: true });
+			onUnmounted(() => store.destroy());
+			return () => slots.default?.();
+		}
+	});
+	function useProduct() {
+		const ctx = useProductContext("useProduct");
+		const state = shallowRef(ctx.store.getState());
+		onScopeDispose(ctx.store.subscribe(() => {
+			state.value = ctx.store.getState();
+		}));
+		function selectOption(name, value) {
+			const result = ctx.store.selectOption(name, value);
+			if (result.status !== "invalid") ctx.getOnSelect()?.(result);
+			return result;
+		}
+		return {
+			get options() {
+				return state.value.options;
+			},
+			get selectedVariant() {
+				return state.value.selectedVariant;
+			},
+			selectOption,
+			get errors() {
+				return state.value.errors;
+			},
+			get matchedLineItem() {
+				return state.value.matchedLineItem;
+			}
+		};
+	}
+	function useProductFormHook() {
+		const ctx = useProductContext("useProductForm");
+		return useProductFormImpl(ctx.store, ctx.getOnSelect);
+	}
+	return {
+		ProductProvider,
+		useProduct,
+		useProductForm: useProductFormHook
+	};
+}
+
+//#endregion
+export { createProductComponents, useProductForm };
+//# sourceMappingURL=product.mjs.map

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

@@ -0,0 +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\nexport interface UseProductFormOptions<TProduct extends ProductInput> {\n  onSelect?: (result: ValidProductSelectionResult<TProduct>) => void;\n}\n\nexport interface UseProductFormResult<TProduct extends ProductInput> {\n  options: ProductFormOptions<TProduct>;\n  selectedVariant: ProductVariantFrom<TProduct> | null;\n  register: ProductFormRegister;\n  formProps: (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }) => Record<string, unknown>;\n  errors: ProductFormErrors;\n  matchedLineItem: CartLine | null;\n  pending: ShallowRef<boolean>;\n  selectOption: (\n    name: string,\n    value: string,\n  ) => VariantSelectionResult<ProductVariantFrom<TProduct>>;\n}\n\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: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }): Record<string, unknown> {\n    return {\n      onSubmit: (e: Event) => {\n        opts?.beforeSubmit?.(e);\n        if (e.defaultPrevented) return;\n        e.preventDefault();\n        pending.value = true;\n        store\n          .handleFormSubmit(e as SubmitEvent)\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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"}

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

@@ -0,0 +1,25 @@
+import { ShopPayButtonOptions } from "../core/shop-pay/shop-pay.mjs";
+import * as _$vue from "vue";
+
+//#region src/vue/shop-pay.d.ts
+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>;
+//#endregion
+export { ShopPayButton, ShopPayButtonProps };
+//# sourceMappingURL=shop-pay.d.mts.map

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

@@ -0,0 +1,35 @@
+import { SHOP_PAY_BUTTON_TAG_NAME, defineShopPayButton, getShopPayButtonDeclarativeShadowDomHtml, getShopPayButtonElementAttributes } from "../core/shop-pay/shop-pay.mjs";
+import { defineComponent, h } from "vue";
+
+//#region src/vue/shop-pay.ts
+const canUseDom = typeof document !== "undefined";
+defineShopPayButton();
+const ShopPayButton = defineComponent((props) => {
+	return () => {
+		const attributes = getShopPayButtonElementAttributes(props);
+		return canUseDom ? h(SHOP_PAY_BUTTON_TAG_NAME, attributes) : h(SHOP_PAY_BUTTON_TAG_NAME, {
+			...attributes,
+			innerHTML: getShopPayButtonDeclarativeShadowDomHtml(props)
+		});
+	};
+}, {
+	name: "ShopPayButton",
+	inheritAttrs: false,
+	props: {
+		variants: null,
+		channel: null,
+		checkoutUrl: String,
+		paymentOption: null,
+		source: String,
+		sourceToken: String,
+		nonce: String,
+		disabled: Boolean,
+		width: String,
+		borderRadius: String,
+		accessibilityLabel: String
+	}
+});
+
+//#endregion
+export { ShopPayButton };
+//# sourceMappingURL=shop-pay.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,127 @@
+import { ShopifyRoutesOptions, ShopifyScriptTagsOptions, ShopifyScriptsAnalyticsConfig, ShopifyScriptsI18n, ShopifyScriptsShop } from "../core/shopify-scripts/types.mjs";
+import { ConsentConfig } from "../core/analytics/types.mjs";
+import * as _$vue from "vue";
+
+//#region src/vue/shopify-scripts.d.ts
+type ShopifyScriptsProps = ShopifyScriptTagsOptions & {
+  navigate?: ShopifyRoutesOptions["navigate"];
+  routes?: ShopifyRoutesOptions["routes"];
+  webMcp?: boolean;
+};
+declare const ShopifyScripts: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+  i18n: {
+    type: () => ShopifyScriptsI18n;
+    default: undefined;
+  };
+  nonce: {
+    type: StringConstructor;
+    default: undefined;
+  };
+  routes: {
+    type: null;
+    default: undefined;
+  };
+  navigate: {
+    type: null;
+    default: undefined;
+  };
+  consent: {
+    type: (new (...args: any[]) => ConsentConfig) | (() => ConsentConfig | undefined);
+    default: undefined;
+  };
+  analytics: {
+    type: (new (...args: any[]) => ShopifyScriptsAnalyticsConfig) | (() => ShopifyScriptsAnalyticsConfig | undefined);
+    default: undefined;
+  };
+  debug: {
+    type: (new (...args: any[]) => {
+      standardEventsInspector?: boolean;
+    }) | (() => {
+      standardEventsInspector?: boolean;
+    } | undefined);
+    default: undefined;
+  };
+  webMcp: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  inbox: {
+    type: () => boolean | undefined;
+    default: undefined;
+  };
+  shopifyAnalytics: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  shop: {
+    type: () => ShopifyScriptsShop;
+    required: true;
+  };
+}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+  [key: string]: any;
+}>[], {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+  i18n: {
+    type: () => ShopifyScriptsI18n;
+    default: undefined;
+  };
+  nonce: {
+    type: StringConstructor;
+    default: undefined;
+  };
+  routes: {
+    type: null;
+    default: undefined;
+  };
+  navigate: {
+    type: null;
+    default: undefined;
+  };
+  consent: {
+    type: (new (...args: any[]) => ConsentConfig) | (() => ConsentConfig | undefined);
+    default: undefined;
+  };
+  analytics: {
+    type: (new (...args: any[]) => ShopifyScriptsAnalyticsConfig) | (() => ShopifyScriptsAnalyticsConfig | undefined);
+    default: undefined;
+  };
+  debug: {
+    type: (new (...args: any[]) => {
+      standardEventsInspector?: boolean;
+    }) | (() => {
+      standardEventsInspector?: boolean;
+    } | undefined);
+    default: undefined;
+  };
+  webMcp: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  inbox: {
+    type: () => boolean | undefined;
+    default: undefined;
+  };
+  shopifyAnalytics: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  shop: {
+    type: () => ShopifyScriptsShop;
+    required: true;
+  };
+}>> & Readonly<{}>, {
+  nonce: string;
+  analytics: ShopifyScriptsAnalyticsConfig | undefined;
+  consent: ConsentConfig | undefined;
+  debug: {
+    standardEventsInspector?: boolean;
+  } | undefined;
+  i18n: ShopifyScriptsI18n;
+  inbox: boolean | undefined;
+  shopifyAnalytics: boolean;
+  navigate: any;
+  routes: any;
+  webMcp: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { ShopifyScripts, ShopifyScriptsProps };
+//# sourceMappingURL=shopify-scripts.d.mts.map