@commercengine/checkout 0.1.0

package/dist/store.cjs

@@ -0,0 +1,250 @@
+let _commercengine_js = require("@commercengine/js");
+let zustand_middleware = require("zustand/middleware");
+let zustand_vanilla = require("zustand/vanilla");
+
+//#region src/store.ts
+/**
+* Commerce Engine Checkout - Universal Store
+*
+* Framework-agnostic state management using Zustand vanilla.
+* This is the core store that all framework bindings use.
+*
+* ## Architecture
+*
+* - **Singleton**: One store instance shared across all components/routes
+* - **Non-blocking**: Checkout iframe loads asynchronously in the background
+* - **SSR-safe**: Initialization is skipped on server, only runs on client
+* - **Zero CWV impact**: Hidden iframe, no layout shifts, no main thread blocking
+*
+* ## Lifecycle
+*
+* 1. `initCheckout()` creates a hidden iframe and returns immediately
+* 2. Iframe loads in background (non-blocking)
+* 3. `onReady` callback fires when checkout is ready
+* 4. `useCheckout()` can be called from any component to access state
+* 5. Same instance persists across route changes (SPA navigation)
+*
+* @commercengine/checkout
+*/
+const DEFAULT_STATE = {
+	checkout: null,
+	isReady: false,
+	isOpen: false,
+	cartCount: 0,
+	cartTotal: 0,
+	cartCurrency: "INR"
+};
+/**
+* Vanilla Zustand store for checkout state
+*
+* This is framework-agnostic and can be used directly or via framework bindings.
+*
+* @example Direct usage (vanilla JS)
+* ```ts
+* import { checkoutStore } from "@commercengine/checkout";
+*
+* // Initialize
+* checkoutStore.getState().init({ storeId: "...", apiKey: "..." });
+*
+* // Get current state
+* const { cartCount, isReady } = checkoutStore.getState();
+*
+* // Subscribe to changes
+* checkoutStore.subscribe((state) => {
+*   console.log("Cart count:", state.cartCount);
+* });
+*
+* // Call actions
+* checkoutStore.getState().openCart();
+* ```
+*/
+const checkoutStore = (0, zustand_vanilla.createStore)()((0, zustand_middleware.subscribeWithSelector)((set, get) => ({
+	...DEFAULT_STATE,
+	init: (config) => {
+		if (typeof window === "undefined") return;
+		const existing = get().checkout;
+		if (existing) existing.destroy();
+		set({ checkout: new _commercengine_js.Checkout({
+			...config,
+			onReady: () => {
+				set({ isReady: true });
+				config.onReady?.();
+			},
+			onOpen: () => {
+				set({ isOpen: true });
+				config.onOpen?.();
+			},
+			onClose: () => {
+				set({ isOpen: false });
+				config.onClose?.();
+			},
+			onCartUpdate: (cart) => {
+				set({
+					cartCount: cart.count,
+					cartTotal: cart.total,
+					cartCurrency: cart.currency
+				});
+				config.onCartUpdate?.(cart);
+			},
+			onComplete: (order) => {
+				config.onComplete?.(order);
+			},
+			onLogin: (data) => {
+				config.onLogin?.(data);
+			},
+			onLogout: (data) => {
+				config.onLogout?.(data);
+			},
+			onTokenRefresh: (data) => {
+				config.onTokenRefresh?.(data);
+			},
+			onSessionError: () => {
+				config.onSessionError?.();
+			},
+			onError: (error) => {
+				set({ isReady: true });
+				config.onError?.(error);
+			}
+		}) });
+	},
+	destroy: () => {
+		const { checkout } = get();
+		if (checkout) checkout.destroy();
+		set(DEFAULT_STATE);
+	},
+	openCart: () => {
+		get().checkout?.openCart();
+	},
+	openCheckout: () => {
+		get().checkout?.openCheckout();
+	},
+	close: () => {
+		get().checkout?.close();
+	},
+	addToCart: (productId, variantId, quantity) => {
+		get().checkout?.addToCart(productId, variantId, quantity);
+	},
+	updateTokens: (accessToken, refreshToken) => {
+		get().checkout?.updateTokens(accessToken, refreshToken);
+	}
+})));
+/**
+* Initialize checkout
+*
+* @example
+* ```ts
+* import { initCheckout } from "@commercengine/checkout";
+*
+* initCheckout({
+*   storeId: "store_xxx",
+*   apiKey: "ak_xxx",
+*   onComplete: (order) => console.log("Order placed:", order.orderNumber),
+* });
+* ```
+*/
+function initCheckout(config) {
+	checkoutStore.getState().init(config);
+}
+/**
+* Destroy checkout instance
+*
+* @example
+* ```ts
+* import { destroyCheckout } from "@commercengine/checkout";
+*
+* destroyCheckout();
+* ```
+*/
+function destroyCheckout() {
+	checkoutStore.getState().destroy();
+}
+/**
+* Get checkout state and methods (non-reactive)
+*
+* Use this outside of reactive frameworks or when you don't need reactivity.
+*
+* @example
+* ```ts
+* import { getCheckout } from "@commercengine/checkout";
+*
+* document.getElementById("cart-btn").onclick = () => {
+*   getCheckout().openCart();
+* };
+*
+* // Check state
+* if (getCheckout().isReady) {
+*   console.log("Cart has", getCheckout().cartCount, "items");
+* }
+* ```
+*/
+function getCheckout() {
+	const state = checkoutStore.getState();
+	return {
+		isReady: state.isReady,
+		isOpen: state.isOpen,
+		cartCount: state.cartCount,
+		cartTotal: state.cartTotal,
+		cartCurrency: state.cartCurrency,
+		openCart: state.openCart,
+		openCheckout: state.openCheckout,
+		close: state.close,
+		addToCart: state.addToCart,
+		updateTokens: state.updateTokens
+	};
+}
+/**
+* Subscribe to checkout state changes
+*
+* @example
+* ```ts
+* import { subscribeToCheckout } from "@commercengine/checkout";
+*
+* // Subscribe to all changes
+* const unsubscribe = subscribeToCheckout((state) => {
+*   console.log("State changed:", state);
+* });
+*
+* // Subscribe to specific state with selector
+* const unsubscribe = subscribeToCheckout(
+*   (state) => state.cartCount,
+*   (cartCount) => console.log("Cart count:", cartCount)
+* );
+*
+* // Cleanup
+* unsubscribe();
+* ```
+*/
+const subscribeToCheckout = checkoutStore.subscribe;
+
+//#endregion
+Object.defineProperty(exports, 'checkoutStore', {
+  enumerable: true,
+  get: function () {
+    return checkoutStore;
+  }
+});
+Object.defineProperty(exports, 'destroyCheckout', {
+  enumerable: true,
+  get: function () {
+    return destroyCheckout;
+  }
+});
+Object.defineProperty(exports, 'getCheckout', {
+  enumerable: true,
+  get: function () {
+    return getCheckout;
+  }
+});
+Object.defineProperty(exports, 'initCheckout', {
+  enumerable: true,
+  get: function () {
+    return initCheckout;
+  }
+});
+Object.defineProperty(exports, 'subscribeToCheckout', {
+  enumerable: true,
+  get: function () {
+    return subscribeToCheckout;
+  }
+});
+//# sourceMappingURL=store.cjs.map

package/dist/store.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.cjs","names":["Checkout"],"sources":["../src/store.ts"],"sourcesContent":["/**\n * Commerce Engine Checkout - Universal Store\n *\n * Framework-agnostic state management using Zustand vanilla.\n * This is the core store that all framework bindings use.\n *\n * ## Architecture\n *\n * - **Singleton**: One store instance shared across all components/routes\n * - **Non-blocking**: Checkout iframe loads asynchronously in the background\n * - **SSR-safe**: Initialization is skipped on server, only runs on client\n * - **Zero CWV impact**: Hidden iframe, no layout shifts, no main thread blocking\n *\n * ## Lifecycle\n *\n * 1. `initCheckout()` creates a hidden iframe and returns immediately\n * 2. Iframe loads in background (non-blocking)\n * 3. `onReady` callback fires when checkout is ready\n * 4. `useCheckout()` can be called from any component to access state\n * 5. Same instance persists across route changes (SPA navigation)\n *\n * @commercengine/checkout\n */\n\nimport {\n  type AuthLoginData,\n  type AuthLogoutData,\n  type AuthRefreshData,\n  type CartData,\n  Checkout,\n  type CheckoutConfig,\n  type ErrorData,\n  type OrderData,\n} from \"@commercengine/js\";\nimport { subscribeWithSelector } from \"zustand/middleware\";\nimport { createStore } from \"zustand/vanilla\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\n/**\n * Checkout state\n */\nexport interface CheckoutState {\n  /** Internal checkout instance */\n  checkout: Checkout | null;\n  /** Whether checkout is ready to use */\n  isReady: boolean;\n  /** Whether checkout overlay is currently open */\n  isOpen: boolean;\n  /** Number of items in cart */\n  cartCount: number;\n  /** Cart subtotal amount */\n  cartTotal: number;\n  /** Cart currency code */\n  cartCurrency: string;\n}\n\n/**\n * Checkout actions\n */\nexport interface CheckoutActions {\n  /**\n   * Initialize checkout with configuration\n   * Call this once at app startup\n   */\n  init: (config: CheckoutConfig) => void;\n\n  /**\n   * Destroy checkout instance and reset state\n   */\n  destroy: () => void;\n\n  /**\n   * Open the cart drawer\n   */\n  openCart: () => void;\n\n  /**\n   * Open the checkout drawer directly (for Buy Now flow)\n   */\n  openCheckout: () => void;\n\n  /**\n   * Close the checkout overlay\n   */\n  close: () => void;\n\n  /**\n   * Add item to cart\n   * @param productId - Product ID (required)\n   * @param variantId - Variant ID (required, null for non-variant products)\n   * @param quantity - Quantity to add (default: 1)\n   */\n  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;\n\n  /**\n   * Update authentication tokens\n   * Use this when user logs in/out on the parent site\n   */\n  updateTokens: (accessToken: string, refreshToken?: string) => void;\n}\n\n/**\n * Complete checkout store type\n */\nexport type CheckoutStore = CheckoutState & CheckoutActions;\n\n// =============================================================================\n// DEFAULT STATE\n// =============================================================================\n\nconst DEFAULT_STATE: CheckoutState = {\n  checkout: null,\n  isReady: false,\n  isOpen: false,\n  cartCount: 0,\n  cartTotal: 0,\n  cartCurrency: \"INR\",\n};\n\n// =============================================================================\n// STORE\n// =============================================================================\n\n/**\n * Vanilla Zustand store for checkout state\n *\n * This is framework-agnostic and can be used directly or via framework bindings.\n *\n * @example Direct usage (vanilla JS)\n * ```ts\n * import { checkoutStore } from \"@commercengine/checkout\";\n *\n * // Initialize\n * checkoutStore.getState().init({ storeId: \"...\", apiKey: \"...\" });\n *\n * // Get current state\n * const { cartCount, isReady } = checkoutStore.getState();\n *\n * // Subscribe to changes\n * checkoutStore.subscribe((state) => {\n *   console.log(\"Cart count:\", state.cartCount);\n * });\n *\n * // Call actions\n * checkoutStore.getState().openCart();\n * ```\n */\nexport const checkoutStore = createStore<CheckoutStore>()(\n  subscribeWithSelector((set, get) => ({\n    // State\n    ...DEFAULT_STATE,\n\n    // Actions\n    init: (config) => {\n      // Skip on server\n      if (typeof window === \"undefined\") return;\n\n      // Destroy existing instance if reinitializing\n      const existing = get().checkout;\n      if (existing) {\n        existing.destroy();\n      }\n\n      // Create new checkout instance with callbacks that update store\n      const checkout = new Checkout({\n        ...config,\n        onReady: () => {\n          set({ isReady: true });\n          config.onReady?.();\n        },\n        onOpen: () => {\n          set({ isOpen: true });\n          config.onOpen?.();\n        },\n        onClose: () => {\n          set({ isOpen: false });\n          config.onClose?.();\n        },\n        onCartUpdate: (cart: CartData) => {\n          set({\n            cartCount: cart.count,\n            cartTotal: cart.total,\n            cartCurrency: cart.currency,\n          });\n          config.onCartUpdate?.(cart);\n        },\n        onComplete: (order: OrderData) => {\n          config.onComplete?.(order);\n        },\n        onLogin: (data: AuthLoginData) => {\n          config.onLogin?.(data);\n        },\n        onLogout: (data: AuthLogoutData) => {\n          config.onLogout?.(data);\n        },\n        onTokenRefresh: (data: AuthRefreshData) => {\n          config.onTokenRefresh?.(data);\n        },\n        onSessionError: () => {\n          config.onSessionError?.();\n        },\n        onError: (error: ErrorData) => {\n          // Still set ready so buttons are enabled (error drawer will show)\n          set({ isReady: true });\n          config.onError?.(error);\n        },\n      });\n\n      set({ checkout });\n    },\n\n    destroy: () => {\n      const { checkout } = get();\n      if (checkout) {\n        checkout.destroy();\n      }\n      set(DEFAULT_STATE);\n    },\n\n    openCart: () => {\n      get().checkout?.openCart();\n    },\n\n    openCheckout: () => {\n      get().checkout?.openCheckout();\n    },\n\n    close: () => {\n      get().checkout?.close();\n    },\n\n    addToCart: (productId, variantId, quantity) => {\n      get().checkout?.addToCart(productId, variantId, quantity);\n    },\n\n    updateTokens: (accessToken, refreshToken) => {\n      get().checkout?.updateTokens(accessToken, refreshToken);\n    },\n  }))\n);\n\n// =============================================================================\n// CONVENIENCE EXPORTS\n// =============================================================================\n\n/**\n * Initialize checkout\n *\n * @example\n * ```ts\n * import { initCheckout } from \"@commercengine/checkout\";\n *\n * initCheckout({\n *   storeId: \"store_xxx\",\n *   apiKey: \"ak_xxx\",\n *   onComplete: (order) => console.log(\"Order placed:\", order.orderNumber),\n * });\n * ```\n */\nexport function initCheckout(config: CheckoutConfig): void {\n  checkoutStore.getState().init(config);\n}\n\n/**\n * Destroy checkout instance\n *\n * @example\n * ```ts\n * import { destroyCheckout } from \"@commercengine/checkout\";\n *\n * destroyCheckout();\n * ```\n */\nexport function destroyCheckout(): void {\n  checkoutStore.getState().destroy();\n}\n\n/**\n * Get checkout state and methods (non-reactive)\n *\n * Use this outside of reactive frameworks or when you don't need reactivity.\n *\n * @example\n * ```ts\n * import { getCheckout } from \"@commercengine/checkout\";\n *\n * document.getElementById(\"cart-btn\").onclick = () => {\n *   getCheckout().openCart();\n * };\n *\n * // Check state\n * if (getCheckout().isReady) {\n *   console.log(\"Cart has\", getCheckout().cartCount, \"items\");\n * }\n * ```\n */\nexport function getCheckout(): Omit<CheckoutStore, \"checkout\" | \"init\" | \"destroy\"> {\n  const state = checkoutStore.getState();\n  return {\n    isReady: state.isReady,\n    isOpen: state.isOpen,\n    cartCount: state.cartCount,\n    cartTotal: state.cartTotal,\n    cartCurrency: state.cartCurrency,\n    openCart: state.openCart,\n    openCheckout: state.openCheckout,\n    close: state.close,\n    addToCart: state.addToCart,\n    updateTokens: state.updateTokens,\n  };\n}\n\n/**\n * Subscribe to checkout state changes\n *\n * @example\n * ```ts\n * import { subscribeToCheckout } from \"@commercengine/checkout\";\n *\n * // Subscribe to all changes\n * const unsubscribe = subscribeToCheckout((state) => {\n *   console.log(\"State changed:\", state);\n * });\n *\n * // Subscribe to specific state with selector\n * const unsubscribe = subscribeToCheckout(\n *   (state) => state.cartCount,\n *   (cartCount) => console.log(\"Cart count:\", cartCount)\n * );\n *\n * // Cleanup\n * unsubscribe();\n * ```\n */\nexport const subscribeToCheckout = checkoutStore.subscribe;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,MAAM,gBAA+B;CACnC,UAAU;CACV,SAAS;CACT,QAAQ;CACR,WAAW;CACX,WAAW;CACX,cAAc;CACf;;;;;;;;;;;;;;;;;;;;;;;;;AA8BD,MAAa,kDAA4C,gDAChC,KAAK,SAAS;CAEnC,GAAG;CAGH,OAAO,WAAW;AAEhB,MAAI,OAAO,WAAW,YAAa;EAGnC,MAAM,WAAW,KAAK,CAAC;AACvB,MAAI,SACF,UAAS,SAAS;AAgDpB,MAAI,EAAE,UA5CW,IAAIA,2BAAS;GAC5B,GAAG;GACH,eAAe;AACb,QAAI,EAAE,SAAS,MAAM,CAAC;AACtB,WAAO,WAAW;;GAEpB,cAAc;AACZ,QAAI,EAAE,QAAQ,MAAM,CAAC;AACrB,WAAO,UAAU;;GAEnB,eAAe;AACb,QAAI,EAAE,QAAQ,OAAO,CAAC;AACtB,WAAO,WAAW;;GAEpB,eAAe,SAAmB;AAChC,QAAI;KACF,WAAW,KAAK;KAChB,WAAW,KAAK;KAChB,cAAc,KAAK;KACpB,CAAC;AACF,WAAO,eAAe,KAAK;;GAE7B,aAAa,UAAqB;AAChC,WAAO,aAAa,MAAM;;GAE5B,UAAU,SAAwB;AAChC,WAAO,UAAU,KAAK;;GAExB,WAAW,SAAyB;AAClC,WAAO,WAAW,KAAK;;GAEzB,iBAAiB,SAA0B;AACzC,WAAO,iBAAiB,KAAK;;GAE/B,sBAAsB;AACpB,WAAO,kBAAkB;;GAE3B,UAAU,UAAqB;AAE7B,QAAI,EAAE,SAAS,MAAM,CAAC;AACtB,WAAO,UAAU,MAAM;;GAE1B,CAAC,EAEc,CAAC;;CAGnB,eAAe;EACb,MAAM,EAAE,aAAa,KAAK;AAC1B,MAAI,SACF,UAAS,SAAS;AAEpB,MAAI,cAAc;;CAGpB,gBAAgB;AACd,OAAK,CAAC,UAAU,UAAU;;CAG5B,oBAAoB;AAClB,OAAK,CAAC,UAAU,cAAc;;CAGhC,aAAa;AACX,OAAK,CAAC,UAAU,OAAO;;CAGzB,YAAY,WAAW,WAAW,aAAa;AAC7C,OAAK,CAAC,UAAU,UAAU,WAAW,WAAW,SAAS;;CAG3D,eAAe,aAAa,iBAAiB;AAC3C,OAAK,CAAC,UAAU,aAAa,aAAa,aAAa;;CAE1D,EAAE,CACJ;;;;;;;;;;;;;;;AAoBD,SAAgB,aAAa,QAA8B;AACzD,eAAc,UAAU,CAAC,KAAK,OAAO;;;;;;;;;;;;AAavC,SAAgB,kBAAwB;AACtC,eAAc,UAAU,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;AAsBpC,SAAgB,cAAoE;CAClF,MAAM,QAAQ,cAAc,UAAU;AACtC,QAAO;EACL,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,WAAW,MAAM;EACjB,WAAW,MAAM;EACjB,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,cAAc,MAAM;EACpB,OAAO,MAAM;EACb,WAAW,MAAM;EACjB,cAAc,MAAM;EACrB;;;;;;;;;;;;;;;;;;;;;;;;AAyBH,MAAa,sBAAsB,cAAc"}

package/dist/store.d.cts

@@ -0,0 +1,176 @@
+import { Checkout, CheckoutConfig } from "@commercengine/js";
+import * as zustand0 from "zustand";
+
+//#region src/store.d.ts
+
+/**
+ * Checkout state
+ */
+interface CheckoutState {
+  /** Internal checkout instance */
+  checkout: Checkout | null;
+  /** Whether checkout is ready to use */
+  isReady: boolean;
+  /** Whether checkout overlay is currently open */
+  isOpen: boolean;
+  /** Number of items in cart */
+  cartCount: number;
+  /** Cart subtotal amount */
+  cartTotal: number;
+  /** Cart currency code */
+  cartCurrency: string;
+}
+/**
+ * Checkout actions
+ */
+interface CheckoutActions {
+  /**
+   * Initialize checkout with configuration
+   * Call this once at app startup
+   */
+  init: (config: CheckoutConfig) => void;
+  /**
+   * Destroy checkout instance and reset state
+   */
+  destroy: () => void;
+  /**
+   * Open the cart drawer
+   */
+  openCart: () => void;
+  /**
+   * Open the checkout drawer directly (for Buy Now flow)
+   */
+  openCheckout: () => void;
+  /**
+   * Close the checkout overlay
+   */
+  close: () => void;
+  /**
+   * Add item to cart
+   * @param productId - Product ID (required)
+   * @param variantId - Variant ID (required, null for non-variant products)
+   * @param quantity - Quantity to add (default: 1)
+   */
+  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;
+  /**
+   * Update authentication tokens
+   * Use this when user logs in/out on the parent site
+   */
+  updateTokens: (accessToken: string, refreshToken?: string) => void;
+}
+/**
+ * Complete checkout store type
+ */
+type CheckoutStore = CheckoutState & CheckoutActions;
+/**
+ * Vanilla Zustand store for checkout state
+ *
+ * This is framework-agnostic and can be used directly or via framework bindings.
+ *
+ * @example Direct usage (vanilla JS)
+ * ```ts
+ * import { checkoutStore } from "@commercengine/checkout";
+ *
+ * // Initialize
+ * checkoutStore.getState().init({ storeId: "...", apiKey: "..." });
+ *
+ * // Get current state
+ * const { cartCount, isReady } = checkoutStore.getState();
+ *
+ * // Subscribe to changes
+ * checkoutStore.subscribe((state) => {
+ *   console.log("Cart count:", state.cartCount);
+ * });
+ *
+ * // Call actions
+ * checkoutStore.getState().openCart();
+ * ```
+ */
+declare const checkoutStore: Omit<zustand0.StoreApi<CheckoutStore>, "subscribe"> & {
+  subscribe: {
+    (listener: (selectedState: CheckoutStore, previousSelectedState: CheckoutStore) => void): () => void;
+    <U>(selector: (state: CheckoutStore) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+      equalityFn?: ((a: U, b: U) => boolean) | undefined;
+      fireImmediately?: boolean;
+    } | undefined): () => void;
+  };
+};
+/**
+ * Initialize checkout
+ *
+ * @example
+ * ```ts
+ * import { initCheckout } from "@commercengine/checkout";
+ *
+ * initCheckout({
+ *   storeId: "store_xxx",
+ *   apiKey: "ak_xxx",
+ *   onComplete: (order) => console.log("Order placed:", order.orderNumber),
+ * });
+ * ```
+ */
+declare function initCheckout(config: CheckoutConfig): void;
+/**
+ * Destroy checkout instance
+ *
+ * @example
+ * ```ts
+ * import { destroyCheckout } from "@commercengine/checkout";
+ *
+ * destroyCheckout();
+ * ```
+ */
+declare function destroyCheckout(): void;
+/**
+ * Get checkout state and methods (non-reactive)
+ *
+ * Use this outside of reactive frameworks or when you don't need reactivity.
+ *
+ * @example
+ * ```ts
+ * import { getCheckout } from "@commercengine/checkout";
+ *
+ * document.getElementById("cart-btn").onclick = () => {
+ *   getCheckout().openCart();
+ * };
+ *
+ * // Check state
+ * if (getCheckout().isReady) {
+ *   console.log("Cart has", getCheckout().cartCount, "items");
+ * }
+ * ```
+ */
+declare function getCheckout(): Omit<CheckoutStore, "checkout" | "init" | "destroy">;
+/**
+ * Subscribe to checkout state changes
+ *
+ * @example
+ * ```ts
+ * import { subscribeToCheckout } from "@commercengine/checkout";
+ *
+ * // Subscribe to all changes
+ * const unsubscribe = subscribeToCheckout((state) => {
+ *   console.log("State changed:", state);
+ * });
+ *
+ * // Subscribe to specific state with selector
+ * const unsubscribe = subscribeToCheckout(
+ *   (state) => state.cartCount,
+ *   (cartCount) => console.log("Cart count:", cartCount)
+ * );
+ *
+ * // Cleanup
+ * unsubscribe();
+ * ```
+ */
+declare const subscribeToCheckout: {
+  (listener: (selectedState: CheckoutStore, previousSelectedState: CheckoutStore) => void): () => void;
+  <U>(selector: (state: CheckoutStore) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+    equalityFn?: ((a: U, b: U) => boolean) | undefined;
+    fireImmediately?: boolean;
+  } | undefined): () => void;
+};
+//# sourceMappingURL=store.d.ts.map
+//#endregion
+export { destroyCheckout as a, subscribeToCheckout as c, checkoutStore as i, CheckoutState as n, getCheckout as o, CheckoutStore as r, initCheckout as s, CheckoutActions as t };
+//# sourceMappingURL=store.d.cts.map

package/dist/store.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.cts","names":[],"sources":["../src/store.ts"],"sourcesContent":[],"mappings":";;;;;;AAsQA;AAcA;AAuBgB,UA/PC,aAAA,CA+PU;EAAA;UAAS,EA7PxB,QA6PwB,GAAA,IAAA;;EAAD,OAAA,EAAA,OAAA;EAsCtB;EAA6C,MAAA,EAAA,OAAA;;;;;;;;;;;UAnRzC,eAAA;;;;;iBAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCL,aAAA,GAAgB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;cA2C/B,eAAa,KAAA,QAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;;iBAgHV,YAAA,SAAqB;;;;;;;;;;;iBAcrB,eAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBAuBA,WAAA,CAAA,GAAe,KAAK;;;;;;;;;;;;;;;;;;;;;;;cAsCvB"}

package/dist/store.d.ts

@@ -0,0 +1,176 @@
+import { Checkout, CheckoutConfig } from "@commercengine/js";
+import * as zustand0 from "zustand";
+
+//#region src/store.d.ts
+
+/**
+ * Checkout state
+ */
+interface CheckoutState {
+  /** Internal checkout instance */
+  checkout: Checkout | null;
+  /** Whether checkout is ready to use */
+  isReady: boolean;
+  /** Whether checkout overlay is currently open */
+  isOpen: boolean;
+  /** Number of items in cart */
+  cartCount: number;
+  /** Cart subtotal amount */
+  cartTotal: number;
+  /** Cart currency code */
+  cartCurrency: string;
+}
+/**
+ * Checkout actions
+ */
+interface CheckoutActions {
+  /**
+   * Initialize checkout with configuration
+   * Call this once at app startup
+   */
+  init: (config: CheckoutConfig) => void;
+  /**
+   * Destroy checkout instance and reset state
+   */
+  destroy: () => void;
+  /**
+   * Open the cart drawer
+   */
+  openCart: () => void;
+  /**
+   * Open the checkout drawer directly (for Buy Now flow)
+   */
+  openCheckout: () => void;
+  /**
+   * Close the checkout overlay
+   */
+  close: () => void;
+  /**
+   * Add item to cart
+   * @param productId - Product ID (required)
+   * @param variantId - Variant ID (required, null for non-variant products)
+   * @param quantity - Quantity to add (default: 1)
+   */
+  addToCart: (productId: string, variantId: string | null, quantity?: number) => void;
+  /**
+   * Update authentication tokens
+   * Use this when user logs in/out on the parent site
+   */
+  updateTokens: (accessToken: string, refreshToken?: string) => void;
+}
+/**
+ * Complete checkout store type
+ */
+type CheckoutStore = CheckoutState & CheckoutActions;
+/**
+ * Vanilla Zustand store for checkout state
+ *
+ * This is framework-agnostic and can be used directly or via framework bindings.
+ *
+ * @example Direct usage (vanilla JS)
+ * ```ts
+ * import { checkoutStore } from "@commercengine/checkout";
+ *
+ * // Initialize
+ * checkoutStore.getState().init({ storeId: "...", apiKey: "..." });
+ *
+ * // Get current state
+ * const { cartCount, isReady } = checkoutStore.getState();
+ *
+ * // Subscribe to changes
+ * checkoutStore.subscribe((state) => {
+ *   console.log("Cart count:", state.cartCount);
+ * });
+ *
+ * // Call actions
+ * checkoutStore.getState().openCart();
+ * ```
+ */
+declare const checkoutStore: Omit<zustand0.StoreApi<CheckoutStore>, "subscribe"> & {
+  subscribe: {
+    (listener: (selectedState: CheckoutStore, previousSelectedState: CheckoutStore) => void): () => void;
+    <U>(selector: (state: CheckoutStore) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+      equalityFn?: ((a: U, b: U) => boolean) | undefined;
+      fireImmediately?: boolean;
+    } | undefined): () => void;
+  };
+};
+/**
+ * Initialize checkout
+ *
+ * @example
+ * ```ts
+ * import { initCheckout } from "@commercengine/checkout";
+ *
+ * initCheckout({
+ *   storeId: "store_xxx",
+ *   apiKey: "ak_xxx",
+ *   onComplete: (order) => console.log("Order placed:", order.orderNumber),
+ * });
+ * ```
+ */
+declare function initCheckout(config: CheckoutConfig): void;
+/**
+ * Destroy checkout instance
+ *
+ * @example
+ * ```ts
+ * import { destroyCheckout } from "@commercengine/checkout";
+ *
+ * destroyCheckout();
+ * ```
+ */
+declare function destroyCheckout(): void;
+/**
+ * Get checkout state and methods (non-reactive)
+ *
+ * Use this outside of reactive frameworks or when you don't need reactivity.
+ *
+ * @example
+ * ```ts
+ * import { getCheckout } from "@commercengine/checkout";
+ *
+ * document.getElementById("cart-btn").onclick = () => {
+ *   getCheckout().openCart();
+ * };
+ *
+ * // Check state
+ * if (getCheckout().isReady) {
+ *   console.log("Cart has", getCheckout().cartCount, "items");
+ * }
+ * ```
+ */
+declare function getCheckout(): Omit<CheckoutStore, "checkout" | "init" | "destroy">;
+/**
+ * Subscribe to checkout state changes
+ *
+ * @example
+ * ```ts
+ * import { subscribeToCheckout } from "@commercengine/checkout";
+ *
+ * // Subscribe to all changes
+ * const unsubscribe = subscribeToCheckout((state) => {
+ *   console.log("State changed:", state);
+ * });
+ *
+ * // Subscribe to specific state with selector
+ * const unsubscribe = subscribeToCheckout(
+ *   (state) => state.cartCount,
+ *   (cartCount) => console.log("Cart count:", cartCount)
+ * );
+ *
+ * // Cleanup
+ * unsubscribe();
+ * ```
+ */
+declare const subscribeToCheckout: {
+  (listener: (selectedState: CheckoutStore, previousSelectedState: CheckoutStore) => void): () => void;
+  <U>(selector: (state: CheckoutStore) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+    equalityFn?: ((a: U, b: U) => boolean) | undefined;
+    fireImmediately?: boolean;
+  } | undefined): () => void;
+};
+//# sourceMappingURL=store.d.ts.map
+//#endregion
+export { destroyCheckout as a, subscribeToCheckout as c, checkoutStore as i, CheckoutState as n, getCheckout as o, CheckoutStore as r, initCheckout as s, CheckoutActions as t };
+//# sourceMappingURL=store.d.ts.map

package/dist/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","names":[],"sources":["../src/store.ts"],"sourcesContent":[],"mappings":";;;;;;AAsQA;AAcA;AAuBgB,UA/PC,aAAA,CA+PU;EAAA;UAAS,EA7PxB,QA6PwB,GAAA,IAAA;;EAAD,OAAA,EAAA,OAAA;EAsCtB;EAA6C,MAAA,EAAA,OAAA;;;;;;;;;;;UAnRzC,eAAA;;;;;iBAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCL,aAAA,GAAgB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;cA2C/B,eAAa,KAAA,QAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;;iBAgHV,YAAA,SAAqB;;;;;;;;;;;iBAcrB,eAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBAuBA,WAAA,CAAA,GAAe,KAAK;;;;;;;;;;;;;;;;;;;;;;;cAsCvB"}