@commercengine/checkout 0.1.0

package/dist/vue.cjs

@@ -0,0 +1,98 @@
+const require_store = require('./store.cjs');
+let vue = require("vue");
+
+//#region src/vue.ts
+/**
+* Commerce Engine Checkout - Vue Binding
+*
+* Vue composable for checkout integration with automatic reactivity.
+*
+* @example
+* ```vue
+* <script setup>
+* import { useCheckout, initCheckout } from "@commercengine/checkout/vue";
+* import { onMounted, onUnmounted } from "vue";
+*
+* // Initialize once at app root (App.vue or plugin)
+* onMounted(() => {
+*   initCheckout({
+*     storeId: "store_xxx",
+*     apiKey: "ak_xxx",
+*   });
+* });
+*
+* // Use anywhere
+* const { cartCount, openCart, isReady } = useCheckout();
+* <\/script>
+*
+* <template>
+*   <button @click="openCart" :disabled="!isReady">
+*     Cart ({{ cartCount }})
+*   </button>
+* </template>
+* ```
+*
+* @packageDocumentation
+*/
+/**
+* Vue composable for checkout integration
+*
+* Provides reactive access to checkout state and methods.
+* No provider required - works anywhere in your component tree.
+*
+* @returns Checkout state (reactive refs) and methods
+*
+* @example Basic usage
+* ```vue
+* <script setup>
+* import { useCheckout } from "@commercengine/checkout/vue";
+*
+* const { cartCount, openCart, isReady } = useCheckout();
+* <\/script>
+*
+* <template>
+*   <button @click="openCart" :disabled="!isReady">
+*     Cart ({{ cartCount }})
+*   </button>
+* </template>
+* ```
+*/
+function useCheckout() {
+	const initialState = require_store.checkoutStore.getState();
+	const isReady = (0, vue.ref)(initialState.isReady);
+	const isOpen = (0, vue.ref)(initialState.isOpen);
+	const cartCount = (0, vue.ref)(initialState.cartCount);
+	const cartTotal = (0, vue.ref)(initialState.cartTotal);
+	const cartCurrency = (0, vue.ref)(initialState.cartCurrency);
+	const unsubscribe = require_store.checkoutStore.subscribe((state) => {
+		isReady.value = state.isReady;
+		isOpen.value = state.isOpen;
+		cartCount.value = state.cartCount;
+		cartTotal.value = state.cartTotal;
+		cartCurrency.value = state.cartCurrency;
+	});
+	(0, vue.onUnmounted)(() => {
+		unsubscribe();
+	});
+	return {
+		isReady: (0, vue.readonly)(isReady),
+		isOpen: (0, vue.readonly)(isOpen),
+		cartCount: (0, vue.readonly)(cartCount),
+		cartTotal: (0, vue.readonly)(cartTotal),
+		cartCurrency: (0, vue.readonly)(cartCurrency),
+		openCart: () => require_store.checkoutStore.getState().openCart(),
+		openCheckout: () => require_store.checkoutStore.getState().openCheckout(),
+		close: () => require_store.checkoutStore.getState().close(),
+		addToCart: (productId, variantId, quantity) => require_store.checkoutStore.getState().addToCart(productId, variantId, quantity),
+		updateTokens: (accessToken, refreshToken) => require_store.checkoutStore.getState().updateTokens(accessToken, refreshToken)
+	};
+}
+
+//#endregion
+exports.checkoutStore = require_store.checkoutStore;
+exports.destroyCheckout = require_store.destroyCheckout;
+exports.getCheckout = require_store.getCheckout;
+exports.initCheckout = require_store.initCheckout;
+exports.subscribeToCheckout = require_store.subscribeToCheckout;
+exports.useCheckout = useCheckout;
+//# sourceMappingURL=vue.cjs.map

package/dist/vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.cjs","names":["checkoutStore"],"sources":["../src/vue.ts"],"sourcesContent":["/**\n * Commerce Engine Checkout - Vue Binding\n *\n * Vue composable for checkout integration with automatic reactivity.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useCheckout, initCheckout } from \"@commercengine/checkout/vue\";\n * import { onMounted, onUnmounted } from \"vue\";\n *\n * // Initialize once at app root (App.vue or plugin)\n * onMounted(() => {\n *   initCheckout({\n *     storeId: \"store_xxx\",\n *     apiKey: \"ak_xxx\",\n *   });\n * });\n *\n * // Use anywhere\n * const { cartCount, openCart, isReady } = useCheckout();\n * </script>\n *\n * <template>\n *   <button @click=\"openCart\" :disabled=\"!isReady\">\n *     Cart ({{ cartCount }})\n *   </button>\n * </template>\n * ```\n *\n * @packageDocumentation\n */\n\nimport { type DeepReadonly, onUnmounted, type Ref, readonly, ref } from \"vue\";\nimport { checkoutStore } from \"./store\";\n\n// Re-export types from @commercengine/js\nexport type {\n  AddToCartItem,\n  AuthLoginData,\n  AuthLogoutData,\n  AuthMode,\n  AuthRefreshData,\n  CartData,\n  Channel,\n  CheckoutConfig,\n  CheckoutEventType,\n  Environment,\n  ErrorData,\n  LoginMethod,\n  OrderData,\n  QuickBuyConfig,\n  SessionMode,\n  UserInfo,\n} from \"@commercengine/js\";\n// Re-export everything from vanilla for convenience\nexport {\n  type CheckoutActions,\n  type CheckoutState,\n  type CheckoutStore,\n  checkoutStore,\n  destroyCheckout,\n  getCheckout,\n  initCheckout,\n  subscribeToCheckout,\n} from \"./store\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Return type from useCheckout composable\n */\nexport interface UseCheckoutReturn {\n  /** Whether checkout is ready to use (reactive) */\n  isReady: DeepReadonly<Ref<boolean>>;\n  /** Whether checkout overlay is currently open (reactive) */\n  isOpen: DeepReadonly<Ref<boolean>>;\n  /** Number of items in cart (reactive) */\n  cartCount: DeepReadonly<Ref<number>>;\n  /** Cart subtotal amount (reactive) */\n  cartTotal: DeepReadonly<Ref<number>>;\n  /** Cart currency code (reactive) */\n  cartCurrency: DeepReadonly<Ref<string>>;\n  /** Open the cart drawer */\n  openCart: () => void;\n  /** Open the checkout drawer directly */\n  openCheckout: () => void;\n  /** Close the checkout overlay */\n  close: () => void;\n  /** Add item to cart */\n  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n  /** Update authentication tokens */\n  updateTokens: (accessToken: string, refreshToken?: string) => void;\n}\n\n// =============================================================================\n// COMPOSABLE\n// =============================================================================\n\n/**\n * Vue composable for checkout integration\n *\n * Provides reactive access to checkout state and methods.\n * No provider required - works anywhere in your component tree.\n *\n * @returns Checkout state (reactive refs) and methods\n *\n * @example Basic usage\n * ```vue\n * <script setup>\n * import { useCheckout } from \"@commercengine/checkout/vue\";\n *\n * const { cartCount, openCart, isReady } = useCheckout();\n * </script>\n *\n * <template>\n *   <button @click=\"openCart\" :disabled=\"!isReady\">\n *     Cart ({{ cartCount }})\n *   </button>\n * </template>\n * ```\n */\nexport function useCheckout(): UseCheckoutReturn {\n  // Create reactive refs for state\n  const initialState = checkoutStore.getState();\n\n  const isReady = ref(initialState.isReady);\n  const isOpen = ref(initialState.isOpen);\n  const cartCount = ref(initialState.cartCount);\n  const cartTotal = ref(initialState.cartTotal);\n  const cartCurrency = ref(initialState.cartCurrency);\n\n  // Subscribe to store changes and update refs\n  const unsubscribe = checkoutStore.subscribe((state) => {\n    isReady.value = state.isReady;\n    isOpen.value = state.isOpen;\n    cartCount.value = state.cartCount;\n    cartTotal.value = state.cartTotal;\n    cartCurrency.value = state.cartCurrency;\n  });\n\n  // Cleanup subscription on unmount\n  onUnmounted(() => {\n    unsubscribe();\n  });\n\n  return {\n    // Reactive state (readonly to prevent direct mutation)\n    isReady: readonly(isReady),\n    isOpen: readonly(isOpen),\n    cartCount: readonly(cartCount),\n    cartTotal: readonly(cartTotal),\n    cartCurrency: readonly(cartCurrency),\n    // Actions\n    openCart: () => checkoutStore.getState().openCart(),\n    openCheckout: () => checkoutStore.getState().openCheckout(),\n    close: () => checkoutStore.getState().close(),\n    addToCart: (productId, variantId, quantity) =>\n      checkoutStore.getState().addToCart(productId, variantId, quantity),\n    updateTokens: (accessToken, refreshToken) =>\n      checkoutStore.getState().updateTokens(accessToken, refreshToken),\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4HA,SAAgB,cAAiC;CAE/C,MAAM,eAAeA,4BAAc,UAAU;CAE7C,MAAM,uBAAc,aAAa,QAAQ;CACzC,MAAM,sBAAa,aAAa,OAAO;CACvC,MAAM,yBAAgB,aAAa,UAAU;CAC7C,MAAM,yBAAgB,aAAa,UAAU;CAC7C,MAAM,4BAAmB,aAAa,aAAa;CAGnD,MAAM,cAAcA,4BAAc,WAAW,UAAU;AACrD,UAAQ,QAAQ,MAAM;AACtB,SAAO,QAAQ,MAAM;AACrB,YAAU,QAAQ,MAAM;AACxB,YAAU,QAAQ,MAAM;AACxB,eAAa,QAAQ,MAAM;GAC3B;AAGF,4BAAkB;AAChB,eAAa;GACb;AAEF,QAAO;EAEL,2BAAkB,QAAQ;EAC1B,0BAAiB,OAAO;EACxB,6BAAoB,UAAU;EAC9B,6BAAoB,UAAU;EAC9B,gCAAuB,aAAa;EAEpC,gBAAgBA,4BAAc,UAAU,CAAC,UAAU;EACnD,oBAAoBA,4BAAc,UAAU,CAAC,cAAc;EAC3D,aAAaA,4BAAc,UAAU,CAAC,OAAO;EAC7C,YAAY,WAAW,WAAW,aAChCA,4BAAc,UAAU,CAAC,UAAU,WAAW,WAAW,SAAS;EACpE,eAAe,aAAa,iBAC1BA,4BAAc,UAAU,CAAC,aAAa,aAAa,aAAa;EACnE"}

package/dist/vue.d.cts

@@ -0,0 +1,59 @@
+import { a as destroyCheckout, c as subscribeToCheckout, i as checkoutStore, n as CheckoutState, o as getCheckout, r as CheckoutStore, s as initCheckout, t as CheckoutActions } from "./store.cjs";
+import { AddToCartItem, AuthLoginData, AuthLogoutData, AuthMode, AuthRefreshData, CartData, Channel, CheckoutConfig, CheckoutEventType, Environment, ErrorData, LoginMethod, OrderData, QuickBuyConfig, SessionMode, UserInfo } from "@commercengine/js";
+import { DeepReadonly, Ref } from "vue";
+
+//#region src/vue.d.ts
+
+/**
+ * Return type from useCheckout composable
+ */
+interface UseCheckoutReturn {
+  /** Whether checkout is ready to use (reactive) */
+  isReady: DeepReadonly<Ref<boolean>>;
+  /** Whether checkout overlay is currently open (reactive) */
+  isOpen: DeepReadonly<Ref<boolean>>;
+  /** Number of items in cart (reactive) */
+  cartCount: DeepReadonly<Ref<number>>;
+  /** Cart subtotal amount (reactive) */
+  cartTotal: DeepReadonly<Ref<number>>;
+  /** Cart currency code (reactive) */
+  cartCurrency: DeepReadonly<Ref<string>>;
+  /** Open the cart drawer */
+  openCart: () => void;
+  /** Open the checkout drawer directly */
+  openCheckout: () => void;
+  /** Close the checkout overlay */
+  close: () => void;
+  /** Add item to cart */
+  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;
+  /** Update authentication tokens */
+  updateTokens: (accessToken: string, refreshToken?: string) => void;
+}
+/**
+ * Vue composable for checkout integration
+ *
+ * Provides reactive access to checkout state and methods.
+ * No provider required - works anywhere in your component tree.
+ *
+ * @returns Checkout state (reactive refs) and methods
+ *
+ * @example Basic usage
+ * ```vue
+ * <script setup>
+ * import { useCheckout } from "@commercengine/checkout/vue";
+ *
+ * const { cartCount, openCart, isReady } = useCheckout();
+ * </script>
+ *
+ * <template>
+ *   <button @click="openCart" :disabled="!isReady">
+ *     Cart ({{ cartCount }})
+ *   </button>
+ * </template>
+ * ```
+ */
+declare function useCheckout(): UseCheckoutReturn;
+//# sourceMappingURL=vue.d.ts.map
+//#endregion
+export { type AddToCartItem, type AuthLoginData, type AuthLogoutData, type AuthMode, type AuthRefreshData, type CartData, type Channel, type CheckoutActions, type CheckoutConfig, type CheckoutEventType, type CheckoutState, type CheckoutStore, type Environment, type ErrorData, type LoginMethod, type OrderData, type QuickBuyConfig, type SessionMode, UseCheckoutReturn, type UserInfo, checkoutStore, destroyCheckout, getCheckout, initCheckout, subscribeToCheckout, useCheckout };
+//# sourceMappingURL=vue.d.cts.map

package/dist/vue.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.cts","names":[],"sources":["../src/vue.ts"],"sourcesContent":[],"mappings":";;;;;;;;;UA0EiB,iBAAA;;WAEN,aAAa;;UAEd,aAAa;;aAEV,aAAa;;aAEb,aAAa;;gBAEV,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwCb,WAAA,CAAA,GAAe"}

package/dist/vue.d.ts

@@ -0,0 +1,59 @@
+import { a as destroyCheckout, c as subscribeToCheckout, i as checkoutStore, n as CheckoutState, o as getCheckout, r as CheckoutStore, s as initCheckout, t as CheckoutActions } from "./store.js";
+import { AddToCartItem, AuthLoginData, AuthLogoutData, AuthMode, AuthRefreshData, CartData, Channel, CheckoutConfig, CheckoutEventType, Environment, ErrorData, LoginMethod, OrderData, QuickBuyConfig, SessionMode, UserInfo } from "@commercengine/js";
+import { DeepReadonly, Ref } from "vue";
+
+//#region src/vue.d.ts
+
+/**
+ * Return type from useCheckout composable
+ */
+interface UseCheckoutReturn {
+  /** Whether checkout is ready to use (reactive) */
+  isReady: DeepReadonly<Ref<boolean>>;
+  /** Whether checkout overlay is currently open (reactive) */
+  isOpen: DeepReadonly<Ref<boolean>>;
+  /** Number of items in cart (reactive) */
+  cartCount: DeepReadonly<Ref<number>>;
+  /** Cart subtotal amount (reactive) */
+  cartTotal: DeepReadonly<Ref<number>>;
+  /** Cart currency code (reactive) */
+  cartCurrency: DeepReadonly<Ref<string>>;
+  /** Open the cart drawer */
+  openCart: () => void;
+  /** Open the checkout drawer directly */
+  openCheckout: () => void;
+  /** Close the checkout overlay */
+  close: () => void;
+  /** Add item to cart */
+  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;
+  /** Update authentication tokens */
+  updateTokens: (accessToken: string, refreshToken?: string) => void;
+}
+/**
+ * Vue composable for checkout integration
+ *
+ * Provides reactive access to checkout state and methods.
+ * No provider required - works anywhere in your component tree.
+ *
+ * @returns Checkout state (reactive refs) and methods
+ *
+ * @example Basic usage
+ * ```vue
+ * <script setup>
+ * import { useCheckout } from "@commercengine/checkout/vue";
+ *
+ * const { cartCount, openCart, isReady } = useCheckout();
+ * </script>
+ *
+ * <template>
+ *   <button @click="openCart" :disabled="!isReady">
+ *     Cart ({{ cartCount }})
+ *   </button>
+ * </template>
+ * ```
+ */
+declare function useCheckout(): UseCheckoutReturn;
+//# sourceMappingURL=vue.d.ts.map
+//#endregion
+export { type AddToCartItem, type AuthLoginData, type AuthLogoutData, type AuthMode, type AuthRefreshData, type CartData, type Channel, type CheckoutActions, type CheckoutConfig, type CheckoutEventType, type CheckoutState, type CheckoutStore, type Environment, type ErrorData, type LoginMethod, type OrderData, type QuickBuyConfig, type SessionMode, UseCheckoutReturn, type UserInfo, checkoutStore, destroyCheckout, getCheckout, initCheckout, subscribeToCheckout, useCheckout };
+//# sourceMappingURL=vue.d.ts.map

package/dist/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","names":[],"sources":["../src/vue.ts"],"sourcesContent":[],"mappings":";;;;;;;;;UA0EiB,iBAAA;;WAEN,aAAa;;UAEd,aAAa;;aAEV,aAAa;;aAEb,aAAa;;gBAEV,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwCb,WAAA,CAAA,GAAe"}

package/dist/vue.js

@@ -0,0 +1,93 @@
+import { a as subscribeToCheckout, i as initCheckout, n as destroyCheckout, r as getCheckout, t as checkoutStore } from "./store.js";
+import { onUnmounted, readonly, ref } from "vue";
+
+//#region src/vue.ts
+/**
+* Commerce Engine Checkout - Vue Binding
+*
+* Vue composable for checkout integration with automatic reactivity.
+*
+* @example
+* ```vue
+* <script setup>
+* import { useCheckout, initCheckout } from "@commercengine/checkout/vue";
+* import { onMounted, onUnmounted } from "vue";
+*
+* // Initialize once at app root (App.vue or plugin)
+* onMounted(() => {
+*   initCheckout({
+*     storeId: "store_xxx",
+*     apiKey: "ak_xxx",
+*   });
+* });
+*
+* // Use anywhere
+* const { cartCount, openCart, isReady } = useCheckout();
+* <\/script>
+*
+* <template>
+*   <button @click="openCart" :disabled="!isReady">
+*     Cart ({{ cartCount }})
+*   </button>
+* </template>
+* ```
+*
+* @packageDocumentation
+*/
+/**
+* Vue composable for checkout integration
+*
+* Provides reactive access to checkout state and methods.
+* No provider required - works anywhere in your component tree.
+*
+* @returns Checkout state (reactive refs) and methods
+*
+* @example Basic usage
+* ```vue
+* <script setup>
+* import { useCheckout } from "@commercengine/checkout/vue";
+*
+* const { cartCount, openCart, isReady } = useCheckout();
+* <\/script>
+*
+* <template>
+*   <button @click="openCart" :disabled="!isReady">
+*     Cart ({{ cartCount }})
+*   </button>
+* </template>
+* ```
+*/
+function useCheckout() {
+	const initialState = checkoutStore.getState();
+	const isReady = ref(initialState.isReady);
+	const isOpen = ref(initialState.isOpen);
+	const cartCount = ref(initialState.cartCount);
+	const cartTotal = ref(initialState.cartTotal);
+	const cartCurrency = ref(initialState.cartCurrency);
+	const unsubscribe = checkoutStore.subscribe((state) => {
+		isReady.value = state.isReady;
+		isOpen.value = state.isOpen;
+		cartCount.value = state.cartCount;
+		cartTotal.value = state.cartTotal;
+		cartCurrency.value = state.cartCurrency;
+	});
+	onUnmounted(() => {
+		unsubscribe();
+	});
+	return {
+		isReady: readonly(isReady),
+		isOpen: readonly(isOpen),
+		cartCount: readonly(cartCount),
+		cartTotal: readonly(cartTotal),
+		cartCurrency: readonly(cartCurrency),
+		openCart: () => checkoutStore.getState().openCart(),
+		openCheckout: () => checkoutStore.getState().openCheckout(),
+		close: () => checkoutStore.getState().close(),
+		addToCart: (productId, variantId, quantity) => checkoutStore.getState().addToCart(productId, variantId, quantity),
+		updateTokens: (accessToken, refreshToken) => checkoutStore.getState().updateTokens(accessToken, refreshToken)
+	};
+}
+
+//#endregion
+export { checkoutStore, destroyCheckout, getCheckout, initCheckout, subscribeToCheckout, useCheckout };
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.js","names":[],"sources":["../src/vue.ts"],"sourcesContent":["/**\n * Commerce Engine Checkout - Vue Binding\n *\n * Vue composable for checkout integration with automatic reactivity.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useCheckout, initCheckout } from \"@commercengine/checkout/vue\";\n * import { onMounted, onUnmounted } from \"vue\";\n *\n * // Initialize once at app root (App.vue or plugin)\n * onMounted(() => {\n *   initCheckout({\n *     storeId: \"store_xxx\",\n *     apiKey: \"ak_xxx\",\n *   });\n * });\n *\n * // Use anywhere\n * const { cartCount, openCart, isReady } = useCheckout();\n * </script>\n *\n * <template>\n *   <button @click=\"openCart\" :disabled=\"!isReady\">\n *     Cart ({{ cartCount }})\n *   </button>\n * </template>\n * ```\n *\n * @packageDocumentation\n */\n\nimport { type DeepReadonly, onUnmounted, type Ref, readonly, ref } from \"vue\";\nimport { checkoutStore } from \"./store\";\n\n// Re-export types from @commercengine/js\nexport type {\n  AddToCartItem,\n  AuthLoginData,\n  AuthLogoutData,\n  AuthMode,\n  AuthRefreshData,\n  CartData,\n  Channel,\n  CheckoutConfig,\n  CheckoutEventType,\n  Environment,\n  ErrorData,\n  LoginMethod,\n  OrderData,\n  QuickBuyConfig,\n  SessionMode,\n  UserInfo,\n} from \"@commercengine/js\";\n// Re-export everything from vanilla for convenience\nexport {\n  type CheckoutActions,\n  type CheckoutState,\n  type CheckoutStore,\n  checkoutStore,\n  destroyCheckout,\n  getCheckout,\n  initCheckout,\n  subscribeToCheckout,\n} from \"./store\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Return type from useCheckout composable\n */\nexport interface UseCheckoutReturn {\n  /** Whether checkout is ready to use (reactive) */\n  isReady: DeepReadonly<Ref<boolean>>;\n  /** Whether checkout overlay is currently open (reactive) */\n  isOpen: DeepReadonly<Ref<boolean>>;\n  /** Number of items in cart (reactive) */\n  cartCount: DeepReadonly<Ref<number>>;\n  /** Cart subtotal amount (reactive) */\n  cartTotal: DeepReadonly<Ref<number>>;\n  /** Cart currency code (reactive) */\n  cartCurrency: DeepReadonly<Ref<string>>;\n  /** Open the cart drawer */\n  openCart: () => void;\n  /** Open the checkout drawer directly */\n  openCheckout: () => void;\n  /** Close the checkout overlay */\n  close: () => void;\n  /** Add item to cart */\n  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n  /** Update authentication tokens */\n  updateTokens: (accessToken: string, refreshToken?: string) => void;\n}\n\n// =============================================================================\n// COMPOSABLE\n// =============================================================================\n\n/**\n * Vue composable for checkout integration\n *\n * Provides reactive access to checkout state and methods.\n * No provider required - works anywhere in your component tree.\n *\n * @returns Checkout state (reactive refs) and methods\n *\n * @example Basic usage\n * ```vue\n * <script setup>\n * import { useCheckout } from \"@commercengine/checkout/vue\";\n *\n * const { cartCount, openCart, isReady } = useCheckout();\n * </script>\n *\n * <template>\n *   <button @click=\"openCart\" :disabled=\"!isReady\">\n *     Cart ({{ cartCount }})\n *   </button>\n * </template>\n * ```\n */\nexport function useCheckout(): UseCheckoutReturn {\n  // Create reactive refs for state\n  const initialState = checkoutStore.getState();\n\n  const isReady = ref(initialState.isReady);\n  const isOpen = ref(initialState.isOpen);\n  const cartCount = ref(initialState.cartCount);\n  const cartTotal = ref(initialState.cartTotal);\n  const cartCurrency = ref(initialState.cartCurrency);\n\n  // Subscribe to store changes and update refs\n  const unsubscribe = checkoutStore.subscribe((state) => {\n    isReady.value = state.isReady;\n    isOpen.value = state.isOpen;\n    cartCount.value = state.cartCount;\n    cartTotal.value = state.cartTotal;\n    cartCurrency.value = state.cartCurrency;\n  });\n\n  // Cleanup subscription on unmount\n  onUnmounted(() => {\n    unsubscribe();\n  });\n\n  return {\n    // Reactive state (readonly to prevent direct mutation)\n    isReady: readonly(isReady),\n    isOpen: readonly(isOpen),\n    cartCount: readonly(cartCount),\n    cartTotal: readonly(cartTotal),\n    cartCurrency: readonly(cartCurrency),\n    // Actions\n    openCart: () => checkoutStore.getState().openCart(),\n    openCheckout: () => checkoutStore.getState().openCheckout(),\n    close: () => checkoutStore.getState().close(),\n    addToCart: (productId, variantId, quantity) =>\n      checkoutStore.getState().addToCart(productId, variantId, quantity),\n    updateTokens: (accessToken, refreshToken) =>\n      checkoutStore.getState().updateTokens(accessToken, refreshToken),\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4HA,SAAgB,cAAiC;CAE/C,MAAM,eAAe,cAAc,UAAU;CAE7C,MAAM,UAAU,IAAI,aAAa,QAAQ;CACzC,MAAM,SAAS,IAAI,aAAa,OAAO;CACvC,MAAM,YAAY,IAAI,aAAa,UAAU;CAC7C,MAAM,YAAY,IAAI,aAAa,UAAU;CAC7C,MAAM,eAAe,IAAI,aAAa,aAAa;CAGnD,MAAM,cAAc,cAAc,WAAW,UAAU;AACrD,UAAQ,QAAQ,MAAM;AACtB,SAAO,QAAQ,MAAM;AACrB,YAAU,QAAQ,MAAM;AACxB,YAAU,QAAQ,MAAM;AACxB,eAAa,QAAQ,MAAM;GAC3B;AAGF,mBAAkB;AAChB,eAAa;GACb;AAEF,QAAO;EAEL,SAAS,SAAS,QAAQ;EAC1B,QAAQ,SAAS,OAAO;EACxB,WAAW,SAAS,UAAU;EAC9B,WAAW,SAAS,UAAU;EAC9B,cAAc,SAAS,aAAa;EAEpC,gBAAgB,cAAc,UAAU,CAAC,UAAU;EACnD,oBAAoB,cAAc,UAAU,CAAC,cAAc;EAC3D,aAAa,cAAc,UAAU,CAAC,OAAO;EAC7C,YAAY,WAAW,WAAW,aAChC,cAAc,UAAU,CAAC,UAAU,WAAW,WAAW,SAAS;EACpE,eAAe,aAAa,iBAC1B,cAAc,UAAU,CAAC,aAAa,aAAa,aAAa;EACnE"}

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@commercengine/checkout",
+  "version": "0.1.0",
+  "description": "Universal checkout SDK for Commerce Engine - works with React, Vue, Svelte, Solid, and vanilla JS",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.js"
+      },
+      "require": {
+        "types": "./dist/react.d.cts",
+        "default": "./dist/react.cjs"
+      }
+    },
+    "./vue": {
+      "import": {
+        "types": "./dist/vue.d.ts",
+        "default": "./dist/vue.js"
+      },
+      "require": {
+        "types": "./dist/vue.d.cts",
+        "default": "./dist/vue.cjs"
+      }
+    },
+    "./svelte": {
+      "import": {
+        "types": "./dist/svelte.d.ts",
+        "default": "./dist/svelte.js"
+      },
+      "require": {
+        "types": "./dist/svelte.d.cts",
+        "default": "./dist/svelte.cjs"
+      }
+    },
+    "./solid": {
+      "import": {
+        "types": "./dist/solid.d.ts",
+        "default": "./dist/solid.js"
+      },
+      "require": {
+        "types": "./dist/solid.d.cts",
+        "default": "./dist/solid.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "dependencies": {
+    "zustand": "^5.0.0",
+    "@commercengine/js": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "vue": ">=3.0.0",
+    "svelte": ">=5.0.0",
+    "solid-js": ">=1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "tsdown": "^0.12.6",
+    "typescript": "^5.8.3"
+  },
+  "keywords": [
+    "commerce",
+    "checkout",
+    "ecommerce",
+    "cart",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "zustand"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercengine/ce-checkout"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
+}