@shopify/hydrogen 2026.10.0-preview.2 → 2026.10.0-preview.4

package/dist/vue/cart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cart.mjs","names":[],"sources":["../../src/vue/cart.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  onMounted,\n  onScopeDispose,\n  onUnmounted,\n  provide,\n  shallowRef,\n  type ComputedRef,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport { trackCartAnalytics } from \"../core/analytics/cart-tracker\";\nimport {\n  configureCartEndpoint as configureCoreCartEndpoint,\n  createCartStore,\n  type CreateCartStoreOptions,\n  type CartStore,\n} from \"../core/cart/cart\";\nimport { createCartFormRegister, type CartFormRegister } from \"../core/cart/form\";\nimport type { CartDataFromHandlers } from \"../core/cart/server-handlers\";\nimport type { CartData, CartState } from \"../core/cart/state\";\n\nconst DEFAULT_CART_ENDPOINT = \"/api/cart\";\n\nlet cartEndpoint = DEFAULT_CART_ENDPOINT;\n\nconst CartStoreKey: InjectionKey<CartStore> = Symbol(\"CartStore\");\n\nexport function configureCartEndpoint(endpoint: string): void {\n  cartEndpoint = endpoint;\n  configureCoreCartEndpoint(endpoint);\n}\n\nexport function getCartEndpoint(): string {\n  return cartEndpoint;\n}\n\ntype TypedUseCart<TData extends CartData> = {\n  (): Readonly<ShallowRef<CartState<TData>>>;\n  <S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ): Readonly<ShallowRef<S>>;\n};\n\ntype TypedUseOptionalCart<TData extends CartData> = <S>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n) => Readonly<ShallowRef<S | undefined>>;\n\ntype CartInitialData<TData extends CartData = CartData> =\n  CreateCartStoreOptions<TData>[\"initialData\"];\n\ntype TypedCartProvider<TData extends CartData> = {\n  new (): { $props: { initialData?: CartInitialData<TData> } };\n};\n\n/** Actions for reconciling cart state after updates outside Standard Actions. */\nexport type CartActions = Pick<CartStore, \"refresh\">;\n\ntype TypedCartComponents<TData extends CartData> = {\n  CartProvider: TypedCartProvider<TData>;\n  useCart: TypedUseCart<TData>;\n  useOptionalCart: TypedUseOptionalCart<TData>;\n  useCartActions: typeof useCartActions;\n  useCartForm: typeof useCartForm;\n};\n\nfunction createTypedCartProvider<TData extends CartData>(): TypedCartProvider<TData> {\n  const TypedCartProvider = defineComponent(\n    (props: { initialData?: CartInitialData<TData> }, { slots }) => {\n      return () =>\n        h(\n          CartProvider,\n          { initialData: props.initialData as CartInitialData | undefined },\n          slots.default,\n        );\n    },\n    { name: \"CartProvider\", props: [\"initialData\"] },\n  );\n\n  return TypedCartProvider as unknown as TypedCartProvider<TData>;\n}\n\nexport function useCartStore(composableName = \"useCartStore\"): CartStore {\n  const store = inject(CartStoreKey, null);\n  if (!store) {\n    throw new Error(`${composableName} must be used inside a <CartProvider>.`);\n  }\n  return store;\n}\n\nfunction useOptionalCartStore(): CartStore | null {\n  return inject(CartStoreKey, null);\n}\n\nexport const CartProvider = defineComponent({\n  name: \"CartProvider\",\n  props: {\n    initialData: {\n      type: Object as PropType<CartInitialData>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const store = createCartStore({ initialData: props.initialData });\n    provide(CartStoreKey, store);\n\n    onMounted(() => {\n      configureCoreCartEndpoint(cartEndpoint);\n      store.connect();\n    });\n\n    onUnmounted(() => {\n      store.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n\nexport function useCart(): Readonly<ShallowRef<CartState>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector?: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | CartState>> {\n  const store = useCartStore(\"useCart\");\n  const resolve = selector ?? ((state: CartState<TData>) => state as unknown as S);\n  return useCartSelector(store, resolve, isEqual) as Readonly<ShallowRef<S>>;\n}\n\nexport function useCartActions(): CartActions {\n  const store = useCartStore(\"useCartActions\");\n  return { refresh: store.refresh };\n}\n\nexport function useCartAnalytics(): void {\n  const store = useCartStore(\"useCartAnalytics\");\n  let stopTracking: (() => void) | undefined;\n\n  onMounted(() => {\n    stopTracking = trackCartAnalytics(store);\n  });\n\n  onScopeDispose(() => stopTracking?.());\n}\n\n/**\n * Like `useCart`, but returns `undefined` when rendered outside a `<CartProvider>`.\n * @internal\n */\nexport function useOptionalCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | undefined>> {\n  const store = useOptionalCartStore();\n  if (!store) return shallowRef<S | undefined>(undefined);\n  return useCartSelector(store, selector, isEqual);\n}\n\nfunction useCartSelector<TData extends CartData = CartData, S = unknown>(\n  store: CartStore,\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>> {\n  const selected = shallowRef<S>(selector(store.getState() as CartState<TData>));\n\n  const unsubscribe = store.subscribe(() => {\n    const next = selector(store.getState() as CartState<TData>);\n    if (isEqual?.(selected.value, next)) return;\n    selected.value = next;\n  });\n\n  onScopeDispose(unsubscribe);\n\n  return selected as Readonly<ShallowRef<S>>;\n}\n\nexport function useCartForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }) => Record<string, unknown>;\n  register: CartFormRegister;\n  isPending: {\n    initial: ComputedRef<boolean>;\n    lines: (lineId?: string) => boolean;\n  };\n} {\n  const store = useCartStore(\"useCartForm\");\n  const loading = useCart((s) => s.loading);\n  const pendingLines = useCart((s) => s.pending.lines);\n  const register = createCartFormRegister();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: Event) => void;\n    afterSubmit?: (e: Event) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: Event) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      store.handleFormSubmit(e as SubmitEvent).catch(() => {});\n      opts?.afterSubmit?.(e);\n    },\n    method: \"post\",\n    action: cartEndpoint,\n  });\n\n  const isPending = {\n    initial: computed(() => loading.value),\n    lines: (lineId?: string): boolean =>\n      lineId ? pendingLines.value.has(lineId) : pendingLines.value.size > 0,\n  };\n\n  return { formProps, register, isPending };\n}\n\nexport function createCartComponents<THandlers>(): TypedCartComponents<\n  CartDataFromHandlers<THandlers>\n> {\n  type TData = CartDataFromHandlers<THandlers>;\n  const TypedCartProvider = createTypedCartProvider<TData>();\n\n  const useTypedCart = ((\n    selector?: (state: CartState<TData>) => unknown,\n    isEqual?: (a: unknown, b: unknown) => boolean,\n  ) => {\n    if (!selector) return useCart() as Readonly<ShallowRef<CartState<TData>>>;\n    return useCart<TData, unknown>(selector, isEqual);\n  }) as TypedUseCart<TData>;\n\n  const useTypedOptionalCart = (<S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ) => useOptionalCart<TData, S>(selector, isEqual)) as TypedUseOptionalCart<TData>;\n\n  return {\n    CartProvider: TypedCartProvider,\n    useCart: useTypedCart,\n    useOptionalCart: useTypedOptionalCart,\n    useCartActions,\n    useCartForm,\n  };\n}\n"],"mappings":";;;;;;AA6BA,IAAI,eAAe;AAEnB,MAAM,eAAwC,OAAO,YAAY;AAOjE,SAAgB,kBAA0B;AACxC,QAAO;;AAkCT,SAAS,0BAA4E;AAanF,QAZ0B,iBACvB,OAAiD,EAAE,YAAY;AAC9D,eACE,EACE,cACA,EAAE,aAAa,MAAM,aAA4C,EACjE,MAAM,QACP;IAEL;EAAE,MAAM;EAAgB,OAAO,CAAC,cAAc;EAAE,CAG1B;;AAG1B,SAAgB,aAAa,iBAAiB,gBAA2B;CACvE,MAAM,QAAQ,OAAO,cAAc,KAAK;AACxC,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,GAAG,eAAe,wCAAwC;AAE5E,QAAO;;AAGT,SAAS,uBAAyC;AAChD,QAAO,OAAO,cAAc,KAAK;;AAGnC,MAAa,eAAe,gBAAgB;CAC1C,MAAM;CACN,OAAO,EACL,aAAa;EACX,MAAM;EACN,SAAS;EACV,EACF;CACD,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,QAAQ,gBAAgB,EAAE,aAAa,MAAM,aAAa,CAAC;AACjE,UAAQ,cAAc,MAAM;AAE5B,kBAAgB;AACd,yBAA0B,aAAa;AACvC,SAAM,SAAS;IACf;AAEF,oBAAkB;AAChB,SAAM,SAAS;IACf;AAEF,eAAa,MAAM,WAAW;;CAEjC,CAAC;AAOF,SAAgB,QACd,UACA,SACqC;AAGrC,QAAO,gBAFO,aAAa,UAEC,EADZ,cAAc,UAA4B,QACnB,QAAQ;;AAGjD,SAAgB,iBAA8B;AAE5C,QAAO,EAAE,SADK,aAAa,iBACJ,CAAC,SAAS;;AAGnC,SAAgB,mBAAyB;CACvC,MAAM,QAAQ,aAAa,mBAAmB;CAC9C,IAAI;AAEJ,iBAAgB;AACd,iBAAe,mBAAmB,MAAM;GACxC;AAEF,sBAAqB,gBAAgB,CAAC;;;;;;AAOxC,SAAgB,gBACd,UACA,SACqC;CACrC,MAAM,QAAQ,sBAAsB;AACpC,KAAI,CAAC,MAAO,QAAO,WAA0B,OAAU;AACvD,QAAO,gBAAgB,OAAO,UAAU,QAAQ;;AAGlD,SAAS,gBACP,OACA,UACA,SACyB;CACzB,MAAM,WAAW,WAAc,SAAS,MAAM,UAAU,CAAqB,CAAC;AAQ9E,gBANoB,MAAM,gBAAgB;EACxC,MAAM,OAAO,SAAS,MAAM,UAAU,CAAqB;AAC3D,MAAI,UAAU,SAAS,OAAO,KAAK,CAAE;AACrC,WAAS,QAAQ;GAGO,CAAC;AAE3B,QAAO;;AAGT,SAAgB,cAUd;CACA,MAAM,QAAQ,aAAa,cAAc;CACzC,MAAM,UAAU,SAAS,MAAM,EAAE,QAAQ;CACzC,MAAM,eAAe,SAAS,MAAM,EAAE,QAAQ,MAAM;CACpD,MAAM,WAAW,wBAAwB;CAEzC,MAAM,aAAa,UAGa;EAC9B,WAAW,MAAa;AACtB,SAAM,eAAe,EAAE;AACvB,OAAI,EAAE,iBAAkB;AACxB,KAAE,gBAAgB;AAClB,SAAM,iBAAiB,EAAiB,CAAC,YAAY,GAAG;AACxD,SAAM,cAAc,EAAE;;EAExB,QAAQ;EACR,QAAQ;EACT;AAQD,QAAO;EAAE;EAAW;EAAU;GAL5B,SAAS,eAAe,QAAQ,MAAM;GACtC,QAAQ,WACN,SAAS,aAAa,MAAM,IAAI,OAAO,GAAG,aAAa,MAAM,OAAO;GAGjC;EAAE;;AAG3C,SAAgB,uBAEd;CAEA,MAAM,oBAAoB,yBAAgC;CAE1D,MAAM,iBACJ,UACA,YACG;AACH,MAAI,CAAC,SAAU,QAAO,SAAS;AAC/B,SAAO,QAAwB,UAAU,QAAQ;;CAGnD,MAAM,yBACJ,UACA,YACG,gBAA0B,UAAU,QAAQ;AAEjD,QAAO;EACL,cAAc;EACd,SAAS;EACT,iBAAiB;EACjB;EACA;EACD"}
+{"version":3,"file":"cart.mjs","names":[],"sources":["../../src/vue/cart.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  onMounted,\n  onScopeDispose,\n  onUnmounted,\n  provide,\n  shallowRef,\n  type ComputedRef,\n  type InjectionKey,\n  type PropType,\n  type ShallowRef,\n} from \"vue\";\n\nimport { trackCartAnalytics } from \"../core/analytics/cart-tracker\";\nimport {\n  configureCartEndpoint as configureCoreCartEndpoint,\n  createCartStore,\n  type CreateCartStoreOptions,\n  type CartActions,\n  type CartStore,\n} from \"../core/cart/cart\";\nimport { createCartFormRegister, type CartFormRegister } from \"../core/cart/form\";\nimport type { CartDataFromHandlers } from \"../core/cart/server-handlers\";\nimport type { CartData, CartState } from \"../core/cart/state\";\n\nconst DEFAULT_CART_ENDPOINT = \"/api/cart\";\n\nlet cartEndpoint = DEFAULT_CART_ENDPOINT;\n\nconst CartStoreKey: InjectionKey<CartStore> = Symbol(\"CartStore\");\n\nexport function configureCartEndpoint(endpoint: string): void {\n  cartEndpoint = endpoint;\n  configureCoreCartEndpoint(endpoint);\n}\n\nexport function getCartEndpoint(): string {\n  return cartEndpoint;\n}\n\ntype TypedUseCart<TData extends CartData> = {\n  (): Readonly<ShallowRef<CartState<TData>>>;\n  <S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ): Readonly<ShallowRef<S>>;\n};\n\ntype TypedUseOptionalCart<TData extends CartData> = <S>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n) => Readonly<ShallowRef<S | undefined>>;\n\ntype CartInitialData<TData extends CartData = CartData> =\n  CreateCartStoreOptions<TData>[\"initialData\"];\n\ntype TypedCartProvider<TData extends CartData> = {\n  new (): { $props: { initialData?: CartInitialData<TData> } };\n};\n\nexport type { CartActions };\n\ntype TypedCartComponents<TData extends CartData> = {\n  CartProvider: TypedCartProvider<TData>;\n  useCart: TypedUseCart<TData>;\n  useOptionalCart: TypedUseOptionalCart<TData>;\n  useCartActions: typeof useCartActions;\n  useCartForm: typeof useCartForm;\n};\n\nfunction createTypedCartProvider<TData extends CartData>(): TypedCartProvider<TData> {\n  const TypedCartProvider = defineComponent(\n    (props: { initialData?: CartInitialData<TData> }, { slots }) => {\n      return () =>\n        h(\n          CartProvider,\n          { initialData: props.initialData as CartInitialData | undefined },\n          slots.default,\n        );\n    },\n    { name: \"CartProvider\", props: [\"initialData\"] },\n  );\n\n  return TypedCartProvider as unknown as TypedCartProvider<TData>;\n}\n\nexport function useCartStore(composableName = \"useCartStore\"): CartStore {\n  const store = inject(CartStoreKey, null);\n  if (!store) {\n    throw new Error(`${composableName} must be used inside a <CartProvider>.`);\n  }\n  return store;\n}\n\nfunction useOptionalCartStore(): CartStore | null {\n  return inject(CartStoreKey, null);\n}\n\n/**\n * Vue component that creates and manages a {@link CartStore} instance.\n *\n * Calls {@link CartStore.connect} on mount and {@link CartStore.destroy} on unmount.\n * All cart composables (`useCart`, `useCartForm`, `useCartActions`) must be\n * descendants of this component.\n *\n * @example\n * ```vue\n * <CartProvider :initialData=\"{ cart: loaderData.cart }\">\n *   <App />\n * </CartProvider>\n * ```\n */\nexport const CartProvider = defineComponent({\n  name: \"CartProvider\",\n  props: {\n    initialData: {\n      type: Object as PropType<CartInitialData>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const store = createCartStore({ initialData: props.initialData });\n    provide(CartStoreKey, store);\n\n    onMounted(() => {\n      configureCoreCartEndpoint(cartEndpoint);\n      store.connect();\n    });\n\n    onUnmounted(() => {\n      store.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n\n/**\n * Subscribes to {@link CartState} as a Vue `ShallowRef`.\n *\n * Without a selector, returns the full `CartState`. With a selector, returns\n * a `ShallowRef` of the selected slice — the ref updates only when the\n * selected value changes (by reference, or by custom `isEqual`).\n *\n * @example\n * ```vue\n * <script setup>\n * // Full state\n * const state = useCart();\n *\n * // Selected slice — re-renders only when lines change\n * const lines = useCart((s) => s.data.lines.nodes);\n *\n * // Check if a specific line is pending\n * const isPending = useCart((s) => s.pending.lines.has(lineId));\n * </script>\n * ```\n */\nexport function useCart(): Readonly<ShallowRef<CartState>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>>;\nexport function useCart<TData extends CartData = CartData, S = unknown>(\n  selector?: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | CartState>> {\n  const store = useCartStore(\"useCart\");\n  const resolve = selector ?? ((state: CartState<TData>) => state as unknown as S);\n  return useCartSelector(store, resolve, isEqual) as Readonly<ShallowRef<S>>;\n}\n\n/**\n * Returns cart actions for reconciling state after out-of-band mutations.\n *\n * Currently exposes {@link CartStore.refresh} — call it after server-side cart\n * mutations that bypass the form system.\n *\n * @example\n * ```vue\n * <script setup>\n * const { refresh } = useCartActions();\n *\n * async function handleServerAction() {\n *   await createCartOnServer();\n *   refresh();\n * }\n * </script>\n * ```\n */\nexport function useCartActions(): CartActions {\n  const store = useCartStore(\"useCartActions\");\n  return { refresh: store.refresh };\n}\n\n/**\n * Subscribes the {@link CartStore} to the analytics event dispatcher.\n *\n * Call once near the root of your app. Starts tracking on mount via `onMounted`\n * and cleans up via `onScopeDispose`.\n *\n * @example\n * ```vue\n * <script setup>\n * useCartAnalytics();\n * </script>\n * ```\n */\nexport function useCartAnalytics(): void {\n  const store = useCartStore(\"useCartAnalytics\");\n  let stopTracking: (() => void) | undefined;\n\n  onMounted(() => {\n    stopTracking = trackCartAnalytics(store);\n  });\n\n  onScopeDispose(() => stopTracking?.());\n}\n\n/**\n * Like `useCart`, but returns `undefined` when rendered outside a `<CartProvider>`.\n * @internal\n */\nexport function useOptionalCart<TData extends CartData = CartData, S = unknown>(\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S | undefined>> {\n  const store = useOptionalCartStore();\n  if (!store) return shallowRef<S | undefined>(undefined);\n  return useCartSelector(store, selector, isEqual);\n}\n\nfunction useCartSelector<TData extends CartData = CartData, S = unknown>(\n  store: CartStore,\n  selector: (state: CartState<TData>) => S,\n  isEqual?: (a: S, b: S) => boolean,\n): Readonly<ShallowRef<S>> {\n  const selected = shallowRef<S>(selector(store.getState() as CartState<TData>));\n\n  const unsubscribe = store.subscribe(() => {\n    const next = selector(store.getState() as CartState<TData>);\n    if (isEqual?.(selected.value, next)) return;\n    selected.value = next;\n  });\n\n  onScopeDispose(unsubscribe);\n\n  return selected as Readonly<ShallowRef<S>>;\n}\n\n/**\n * Returns form props, a field register function, and reactive pending state\n * for building cart forms in Vue.\n *\n * Unlike the React hook, the Vue variant includes `isPending` — a reactive\n * object with `initial` (`ComputedRef<boolean>`) for the initial cart load\n * and `lines(lineId?)` for checking per-line or any-line pending state.\n *\n * Note: `interactive: true` returns numeric input attributes but does **not**\n * auto-submit on change — that behavior requires `attachQuantityInput`, which\n * is only wired by the React adapter.\n *\n * @example\n * ```vue\n * <script setup>\n * const { formProps, register, isPending } = useCartForm();\n * </script>\n *\n * <template>\n *   <form v-bind=\"formProps()\">\n *     <input v-bind=\"register('lineId', { value: line.id })\" />\n *     <input v-bind=\"register('quantity', { value: line.quantity })\" />\n *     <button v-bind=\"register('set')\" />\n *     <button v-bind=\"register('increase')\">+</button>\n *     <button v-bind=\"register('decrease')\">−</button>\n *     <span v-if=\"isPending.lines(line.id)\">Updating…</span>\n *   </form>\n * </template>\n * ```\n */\nexport function useCartForm(): {\n  formProps: (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }) => Record<string, unknown>;\n  register: CartFormRegister;\n  isPending: {\n    initial: ComputedRef<boolean>;\n    lines: (lineId?: string) => boolean;\n  };\n} {\n  const store = useCartStore(\"useCartForm\");\n  const loading = useCart((s) => s.loading);\n  const pendingLines = useCart((s) => s.pending.lines);\n  const register = createCartFormRegister();\n\n  const formProps = (opts?: {\n    beforeSubmit?: (e: SubmitEvent) => void;\n    afterSubmit?: (e: SubmitEvent) => void;\n  }): Record<string, unknown> => ({\n    onSubmit: (e: SubmitEvent) => {\n      opts?.beforeSubmit?.(e);\n      if (e.defaultPrevented) return;\n      e.preventDefault();\n      store.handleFormSubmit(e).catch(() => {});\n      opts?.afterSubmit?.(e);\n    },\n    method: \"post\",\n    action: cartEndpoint,\n  });\n\n  const isPending = {\n    initial: computed(() => loading.value),\n    lines: (lineId?: string): boolean =>\n      lineId ? pendingLines.value.has(lineId) : pendingLines.value.size > 0,\n  };\n\n  return { formProps, register, isPending };\n}\n\n/**\n * Factory that returns typed cart components and composables matched to your\n * server handler's cart query shape.\n *\n * The generic `THandlers` parameter is inferred from your `createCartServerHandlers`\n * call, so every composable's {@link CartState} carries your custom cart fields.\n *\n * @example\n * ```ts\n * import type { cartServerHandlers } from \"./server/cart.server\";\n *\n * const {\n *   CartProvider,\n *   useCart,\n *   useOptionalCart,\n *   useCartActions,\n *   useCartForm,\n * } = createCartComponents<typeof cartServerHandlers>();\n * ```\n */\nexport function createCartComponents<THandlers>(): TypedCartComponents<\n  CartDataFromHandlers<THandlers>\n> {\n  type TData = CartDataFromHandlers<THandlers>;\n  const TypedCartProvider = createTypedCartProvider<TData>();\n\n  const useTypedCart = ((\n    selector?: (state: CartState<TData>) => unknown,\n    isEqual?: (a: unknown, b: unknown) => boolean,\n  ) => {\n    if (!selector) return useCart() as Readonly<ShallowRef<CartState<TData>>>;\n    return useCart<TData, unknown>(selector, isEqual);\n  }) as TypedUseCart<TData>;\n\n  const useTypedOptionalCart = (<S>(\n    selector: (state: CartState<TData>) => S,\n    isEqual?: (a: S, b: S) => boolean,\n  ) => useOptionalCart<TData, S>(selector, isEqual)) as TypedUseOptionalCart<TData>;\n\n  return {\n    CartProvider: TypedCartProvider,\n    useCart: useTypedCart,\n    useOptionalCart: useTypedOptionalCart,\n    useCartActions,\n    useCartForm,\n  };\n}\n"],"mappings":";;;;;;AA8BA,IAAI,eAAe;AAEnB,MAAM,eAAwC,OAAO,YAAY;AAOjE,SAAgB,kBAA0B;AACxC,QAAO;;AAiCT,SAAS,0BAA4E;AAanF,QAZ0B,iBACvB,OAAiD,EAAE,YAAY;AAC9D,eACE,EACE,cACA,EAAE,aAAa,MAAM,aAA4C,EACjE,MAAM,QACP;IAEL;EAAE,MAAM;EAAgB,OAAO,CAAC,cAAc;EAAE,CAG1B;;AAG1B,SAAgB,aAAa,iBAAiB,gBAA2B;CACvE,MAAM,QAAQ,OAAO,cAAc,KAAK;AACxC,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,GAAG,eAAe,wCAAwC;AAE5E,QAAO;;AAGT,SAAS,uBAAyC;AAChD,QAAO,OAAO,cAAc,KAAK;;;;;;;;;;;;;;;;AAiBnC,MAAa,eAAe,gBAAgB;CAC1C,MAAM;CACN,OAAO,EACL,aAAa;EACX,MAAM;EACN,SAAS;EACV,EACF;CACD,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,QAAQ,gBAAgB,EAAE,aAAa,MAAM,aAAa,CAAC;AACjE,UAAQ,cAAc,MAAM;AAE5B,kBAAgB;AACd,yBAA0B,aAAa;AACvC,SAAM,SAAS;IACf;AAEF,oBAAkB;AAChB,SAAM,SAAS;IACf;AAEF,eAAa,MAAM,WAAW;;CAEjC,CAAC;AA4BF,SAAgB,QACd,UACA,SACqC;AAGrC,QAAO,gBAFO,aAAa,UAEC,EADZ,cAAc,UAA4B,QACnB,QAAQ;;;;;;;;;;;;;;;;;;;;AAqBjD,SAAgB,iBAA8B;AAE5C,QAAO,EAAE,SADK,aAAa,iBACJ,CAAC,SAAS;;;;;;;;;;;;;;;AAgBnC,SAAgB,mBAAyB;CACvC,MAAM,QAAQ,aAAa,mBAAmB;CAC9C,IAAI;AAEJ,iBAAgB;AACd,iBAAe,mBAAmB,MAAM;GACxC;AAEF,sBAAqB,gBAAgB,CAAC;;;;;;AAOxC,SAAgB,gBACd,UACA,SACqC;CACrC,MAAM,QAAQ,sBAAsB;AACpC,KAAI,CAAC,MAAO,QAAO,WAA0B,OAAU;AACvD,QAAO,gBAAgB,OAAO,UAAU,QAAQ;;AAGlD,SAAS,gBACP,OACA,UACA,SACyB;CACzB,MAAM,WAAW,WAAc,SAAS,MAAM,UAAU,CAAqB,CAAC;AAQ9E,gBANoB,MAAM,gBAAgB;EACxC,MAAM,OAAO,SAAS,MAAM,UAAU,CAAqB;AAC3D,MAAI,UAAU,SAAS,OAAO,KAAK,CAAE;AACrC,WAAS,QAAQ;GAGO,CAAC;AAE3B,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCT,SAAgB,cAUd;CACA,MAAM,QAAQ,aAAa,cAAc;CACzC,MAAM,UAAU,SAAS,MAAM,EAAE,QAAQ;CACzC,MAAM,eAAe,SAAS,MAAM,EAAE,QAAQ,MAAM;CACpD,MAAM,WAAW,wBAAwB;CAEzC,MAAM,aAAa,UAGa;EAC9B,WAAW,MAAmB;AAC5B,SAAM,eAAe,EAAE;AACvB,OAAI,EAAE,iBAAkB;AACxB,KAAE,gBAAgB;AAClB,SAAM,iBAAiB,EAAE,CAAC,YAAY,GAAG;AACzC,SAAM,cAAc,EAAE;;EAExB,QAAQ;EACR,QAAQ;EACT;AAQD,QAAO;EAAE;EAAW;EAAU;GAL5B,SAAS,eAAe,QAAQ,MAAM;GACtC,QAAQ,WACN,SAAS,aAAa,MAAM,IAAI,OAAO,GAAG,aAAa,MAAM,OAAO;GAGjC;EAAE;;;;;;;;;;;;;;;;;;;;;;AAuB3C,SAAgB,uBAEd;CAEA,MAAM,oBAAoB,yBAAgC;CAE1D,MAAM,iBACJ,UACA,YACG;AACH,MAAI,CAAC,SAAU,QAAO,SAAS;AAC/B,SAAO,QAAwB,UAAU,QAAQ;;CAGnD,MAAM,yBACJ,UACA,YACG,gBAA0B,UAAU,QAAQ;AAEjD,QAAO;EACL,cAAc;EACd,SAAS;EACT,iBAAiB;EACjB;EACA;EACD"}

package/dist/vue/collection.d.mts

@@ -1,10 +1,39 @@
 import { CollectionState } from "../core/collection/state.mjs";
-import { CollectionData, CollectionStore } from "../core/collection/collection.mjs";
+import { CollectionActions, CollectionData } from "../core/collection/collection.mjs";
 import * as _$vue from "vue";
 import { PropType, ShallowRef } from "vue";
 
 //#region src/vue/collection.d.ts
-type CollectionActions = Pick<CollectionStore, "setFilters" | "toggleFilter" | "toggleFilterInput" | "setSortKey" | "setSortByValue" | "reset" | "handleFormSubmit">;
+/**
+ * Manages the lifecycle of a {@link CollectionStore}: creates on mount and syncs
+ * with URL changes. Recreates the store when `data.handle` changes
+ * (navigating to a different collection).
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { CollectionProvider, type CollectionData } from '@shopify/hydrogen/vue';
+ * import { useRoute, useRouter } from 'vue-router';
+ *
+ * const props = defineProps<{ data: CollectionData; urlSearch: string }>();
+ * const route = useRoute();
+ * const router = useRouter();
+ *
+ * // `search` includes the leading `?`, so append it to the path as-is.
+ * const onChange = (search: string) => router.replace(`${route.path}${search}`);
+ * </script>
+ *
+ * <template>
+ *   <CollectionProvider
+ *     :data="props.data"
+ *     :url-search="props.urlSearch"
+ *     @change="onChange"
+ *   >
+ *     <slot />
+ *   </CollectionProvider>
+ * </template>
+ * ```
+ */
 declare const CollectionProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   data: {
     type: PropType<CollectionData>;
@@ -32,15 +61,64 @@ declare const CollectionProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
 }>, {
   urlSearch: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * Subscribes to the collection store and returns a reactive ref of the full
+ * state snapshot.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * const state = useCollection();
+ * </script>
+ *
+ * <template>
+ *   <p>{{ state.status }}</p>
+ * </template>
+ * ```
+ */
 declare function useCollection(): Readonly<ShallowRef<CollectionState>>;
+/**
+ * Subscribes to the collection store and returns a reactive ref of a derived
+ * value via `selector`. Optionally accepts an `isEqual` comparator to skip
+ * updates when the derived value is structurally unchanged.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * const status = useCollection(s => s.status);
+ * </script>
+ * ```
+ */
 declare function useCollection<S>(selector: (state: CollectionState) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S>>;
+/**
+ * Returns methods that change filters and sort. The store's `onBrowseChange`
+ * callback (set by {@link CollectionProvider}) handles emitting `change` with a
+ * serialized search string.
+ */
 declare function useCollectionActions(): CollectionActions;
+/**
+ * Returns form props for progressive-enhancement of collection filter forms.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * const { formProps } = useCollectionForm();
+ * </script>
+ *
+ * <template>
+ *   <form v-bind="formProps()" action="/collections/shoes">
+ *     <input type="checkbox" name="filter.p.tag" value="sale" />
+ *     <button type="submit">Apply</button>
+ *   </form>
+ * </template>
+ * ```
+ */
 declare function useCollectionForm(): {
   formProps: (opts?: {
-    beforeSubmit?: (e: Event) => void;
-    afterSubmit?: (e: Event) => void;
+    beforeSubmit?: (e: SubmitEvent) => void;
+    afterSubmit?: (e: SubmitEvent) => void;
   }) => Record<string, unknown>;
 };
 //#endregion
-export { CollectionActions, CollectionProvider, useCollection, useCollectionActions, useCollectionForm };
+export { CollectionProvider, useCollection, useCollectionActions, useCollectionForm };
 //# sourceMappingURL=collection.d.mts.map

package/dist/vue/collection.mjs

@@ -4,6 +4,36 @@ import { defineComponent, inject, onUnmounted, provide, shallowRef, toValue, wat
 
 //#region src/vue/collection.ts
 const CollectionStoreKey = Symbol("CollectionStore");
+/**
+* Manages the lifecycle of a {@link CollectionStore}: creates on mount and syncs
+* with URL changes. Recreates the store when `data.handle` changes
+* (navigating to a different collection).
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+* import { CollectionProvider, type CollectionData } from '@shopify/hydrogen/vue';
+* import { useRoute, useRouter } from 'vue-router';
+*
+* const props = defineProps<{ data: CollectionData; urlSearch: string }>();
+* const route = useRoute();
+* const router = useRouter();
+*
+* // `search` includes the leading `?`, so append it to the path as-is.
+* const onChange = (search: string) => router.replace(`${route.path}${search}`);
+* <\/script>
+*
+* <template>
+*   <CollectionProvider
+*     :data="props.data"
+*     :url-search="props.urlSearch"
+*     @change="onChange"
+*   >
+*     <slot />
+*   </CollectionProvider>
+* </template>
+* ```
+*/
 const CollectionProvider = defineComponent({
 	name: "CollectionProvider",
 	props: {
@@ -79,6 +109,11 @@ function useCollection(selector, isEqual) {
 	}, { immediate: true });
 	return selected;
 }
+/**
+* Returns methods that change filters and sort. The store's `onBrowseChange`
+* callback (set by {@link CollectionProvider}) handles emitting `change` with a
+* serialized search string.
+*/
 function useCollectionActions() {
 	const storeRef = useRequiredStoreRef("useCollectionActions");
 	return {
@@ -91,6 +126,23 @@ function useCollectionActions() {
 		handleFormSubmit: (...args) => storeRef.value.handleFormSubmit(...args)
 	};
 }
+/**
+* Returns form props for progressive-enhancement of collection filter forms.
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+* const { formProps } = useCollectionForm();
+* <\/script>
+*
+* <template>
+*   <form v-bind="formProps()" action="/collections/shoes">
+*     <input type="checkbox" name="filter.p.tag" value="sale" />
+*     <button type="submit">Apply</button>
+*   </form>
+* </template>
+* ```
+*/
 function useCollectionForm() {
 	const actions = useCollectionActions();
 	const formProps = (opts) => ({ onSubmit: (e) => {

package/dist/vue/collection.mjs.map

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

package/dist/vue/index.d.mts

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

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

@@ -1,24 +1,33 @@
 import { PredictiveSearchLimitScope, PredictiveSearchType, SearchUnavailableProductsType, SearchableField } from "../graphql/generated/storefront-api-types.mjs";
 import { PredictiveSearchData } from "../core/predictive-search/search.mjs";
-import { PredictiveSearchState, PredictiveSearchStore } from "../core/predictive-search/store.mjs";
+import { PredictiveSearchActions, PredictiveSearchState } from "../core/predictive-search/store.mjs";
 import * as _$vue from "vue";
 import { PropType, ShallowRef } from "vue";
 
 //#region src/vue/predictive-search.d.ts
-type PredictiveSearchActions = Pick<PredictiveSearchStore, "search" | "clear">;
+/** Options for the form props builder returned by {@link usePredictiveSearchForm}. */
 type PredictiveSearchFormPropsOptions = {
-  preventDefault?: boolean;
+  /** 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. */
   onSubmit?: (event: SubmitEvent, term: string) => void;
   [key: string]: unknown;
 };
+/** Options for the query input props builder returned by {@link usePredictiveSearchForm}'s `register` method. */
 type PredictiveSearchQueryInputPropsOptions = {
-  onInput?: (event: Event, term: string) => void;
+  /** 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;
   [key: string]: unknown;
 };
+/** Return type of {@link usePredictiveSearchForm}, providing methods to build a progressively-enhanced search form. */
 type PredictiveSearchFormResult = {
-  formProps(options?: PredictiveSearchFormPropsOptions): Record<string, unknown>;
+  /** 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. */
   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.
+ *
+ * Recreates the store when configuration props change. Connects the store
+ * on mount and destroys it on unmount.
+ */
 declare const PredictiveSearchProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   predictiveSearchEndpoint: {
     type: StringConstructor;
@@ -115,10 +124,48 @@ declare const PredictiveSearchProvider: _$vue.DefineComponent<_$vue.ExtractPropT
   searchableFields: SearchableField[];
   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`).
+ *
+ * Must be used inside a {@link PredictiveSearchProvider}.
+ *
+ * @throws {Error} When called outside a PredictiveSearchProvider.
+ */
 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.
+ *
+ * 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.
+ *
+ * Must be used inside a {@link PredictiveSearchProvider}.
+ *
+ * @throws {Error} When called outside a PredictiveSearchProvider.
+ */
 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.
+ *
+ * Must be used inside a {@link PredictiveSearchProvider}.
+ *
+ * @throws {Error} When called outside a PredictiveSearchProvider.
+ */
 declare function usePredictiveSearchForm(): PredictiveSearchFormResult;
 //#endregion
-export { PredictiveSearchActions, PredictiveSearchFormPropsOptions, PredictiveSearchFormResult, PredictiveSearchProvider, PredictiveSearchQueryInputPropsOptions, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm };
+export { PredictiveSearchFormPropsOptions, PredictiveSearchFormResult, PredictiveSearchProvider, PredictiveSearchQueryInputPropsOptions, usePredictiveSearch, usePredictiveSearchActions, usePredictiveSearchForm };
 //# sourceMappingURL=predictive-search.d.mts.map

package/dist/vue/predictive-search.mjs

@@ -5,6 +5,13 @@ import { defineComponent, inject, onMounted, onUnmounted, provide, shallowRef, w
 //#region src/vue/predictive-search.ts
 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.
+*
+* Recreates the store when configuration props change. Connects the store
+* on mount and destroys it on unmount.
+*/
 const PredictiveSearchProvider = defineComponent({
 	name: "PredictiveSearchProvider",
 	props: {
@@ -121,6 +128,17 @@ function usePredictiveSearch(selector, isEqual) {
 	}, { immediate: true });
 	return selected;
 }
+/**
+* Returns `search` and `clear` methods that delegate to the 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.
+*
+* Must be used inside a {@link PredictiveSearchProvider}.
+*
+* @throws {Error} When called outside a PredictiveSearchProvider.
+*/
 function usePredictiveSearchActions() {
 	const { storeRef } = useRequiredContext("usePredictiveSearchActions");
 	return {
@@ -128,6 +146,21 @@ function usePredictiveSearchActions() {
 		clear: () => storeRef.value.clear()
 	};
 }
+/**
+* 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.
+*
+* Must be used inside a {@link PredictiveSearchProvider}.
+*
+* @throws {Error} When called outside a PredictiveSearchProvider.
+*/
 function usePredictiveSearchForm() {
 	const { storeRef, searchActionRef } = useRequiredContext("usePredictiveSearchForm");
 	const coreRegister = createPredictiveSearchFormRegister();

package/dist/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 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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"}
+{"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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"}

package/dist/vue/product.d.mts

@@ -5,22 +5,26 @@ import { ProductFormRegister } from "../core/product/form.mjs";
 import { ShallowRef, defineComponent } from "vue";
 
 //#region src/vue/product.d.ts
+/** Options for {@link useProductForm}. */
 interface UseProductFormOptions<TProduct extends ProductInput> {
   onSelect?: (result: ValidProductSelectionResult<TProduct>) => void;
 }
+/** Return value of {@link useProductForm}. */
 interface UseProductFormResult<TProduct extends ProductInput> {
   options: ProductFormOptions<TProduct>;
   selectedVariant: ProductVariantFrom<TProduct> | null;
   register: ProductFormRegister;
   formProps: (opts?: {
-    beforeSubmit?: (e: Event) => void;
-    afterSubmit?: (e: Event) => void;
+    beforeSubmit?: (e: SubmitEvent) => void;
+    afterSubmit?: (e: SubmitEvent) => void;
   }) => Record<string, unknown>;
   errors: ProductFormErrors;
   matchedLineItem: CartLine | null;
+  /** Reactive ref that is `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}. */
 interface UseProductResult<TProduct extends ProductInput> {
   options: ProductFormOptions<TProduct>;
   selectedVariant: ProductVariantFrom<TProduct> | null;

package/dist/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\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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"}
+{"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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"}