@dutchiesdk/ecommerce-extensions-sdk 0.35.0 → 0.36.1

package/dist/components/client-only.cjs

@@ -0,0 +1,56 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useIsHydrated: ()=>useIsHydrated,
+    ClientOnly: ()=>ClientOnly
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+function useIsHydrated() {
+    const [isHydrated, setIsHydrated] = (0, external_react_namespaceObject.useState)(false);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        setIsHydrated(true);
+    }, []);
+    return isHydrated;
+}
+function ClientOnly({ children, fallback = null }) {
+    const isHydrated = useIsHydrated();
+    if (!isHydrated) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+        children: fallback
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+        children: children
+    });
+}
+exports.ClientOnly = __webpack_exports__.ClientOnly;
+exports.useIsHydrated = __webpack_exports__.useIsHydrated;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ClientOnly",
+    "useIsHydrated"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/client-only.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+/**
+ * True once the component has mounted on the client. Always `false` during server
+ * rendering and during the client's first render (pre-hydration) -- this is what
+ * lets consumers avoid a hydration mismatch: server and first client render agree.
+ */
+export declare function useIsHydrated(): boolean;
+export type ClientOnlyProps = {
+    children: ReactNode;
+    /** Rendered on the server and during the pre-hydration client render. Defaults to nothing. */
+    fallback?: ReactNode;
+};
+/**
+ * Renders `children` only once mounted on the client; renders `fallback` (default: nothing)
+ * on the server and during the initial client render.
+ *
+ * Use this for anything that is genuinely browser-only -- maps, video players,
+ * geolocation-driven widgets, anything reading `window`/`document` at render time --
+ * instead of a hand-rolled `typeof window !== 'undefined'` guard. A guard like that
+ * still causes a hydration mismatch (the server renders one thing, the client's first
+ * render renders another); `ClientOnly` renders the *same* fallback on the server and
+ * the first client pass, then swaps to the real content post-hydration, so there's
+ * nothing for React to reconcile against.
+ */
+export declare function ClientOnly({ children, fallback }: ClientOnlyProps): import("react/jsx-runtime").JSX.Element;

package/dist/context/ecommerce-data-bridge.cjs

@@ -25,18 +25,24 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     DataBridgeContext: ()=>DataBridgeContext,
+    useCommerceData: ()=>useCommerceData,
     DataBridgeVersion: ()=>DataBridgeVersion,
     useAsyncLoader: ()=>useAsyncLoader,
     useDataBridge: ()=>useDataBridge
 });
 const external_react_namespaceObject = require("react");
-const DataBridgeVersion = '0.35.0';
+const DataBridgeVersion = '0.36.1';
 const DataBridgeContext = (0, external_react_namespaceObject.createContext)(void 0);
 const useDataBridge = ()=>{
     const context = (0, external_react_namespaceObject.useContext)(DataBridgeContext);
     if (void 0 === context) throw new Error('useDataBridge must be used within a DataBridgeProvider');
     return context;
 };
+const EMPTY_COMMERCE_DATA = {};
+const useCommerceData = ()=>{
+    const { data } = useDataBridge();
+    return data ?? EMPTY_COMMERCE_DATA;
+};
 const useAsyncLoader = (fn, params)=>{
     const [data, setData] = (0, external_react_namespaceObject.useState)(null);
     (0, external_react_namespaceObject.useEffect)(()=>{
@@ -53,11 +59,13 @@ const useAsyncLoader = (fn, params)=>{
 exports.DataBridgeContext = __webpack_exports__.DataBridgeContext;
 exports.DataBridgeVersion = __webpack_exports__.DataBridgeVersion;
 exports.useAsyncLoader = __webpack_exports__.useAsyncLoader;
+exports.useCommerceData = __webpack_exports__.useCommerceData;
 exports.useDataBridge = __webpack_exports__.useDataBridge;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "DataBridgeContext",
     "DataBridgeVersion",
     "useAsyncLoader",
+    "useCommerceData",
     "useDataBridge"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {

package/dist/context/ecommerce-data-bridge.d.ts

@@ -19,9 +19,29 @@ export declare const DataBridgeContext: import("react").Context<CommerceComponen
  * @returns The data bridge context.
  */
 export declare const useDataBridge: () => CommerceComponentsDataInterface;
+/**
+ * Reads the V2 synchronous commerce data (see `CommerceDataV2`) off the data bridge.
+ * Prefer this over `useDataBridge().dataLoaders` in new theme code -- no async, no
+ * `useAsyncLoader`, no loading state to manage for data the host already has. Fields
+ * are `undefined` until the host resolves them for the current page; this returns an
+ * empty object (not `undefined`) when the host hasn't populated `data` at all, so
+ * `useCommerceData().brands` is always safe to read without an extra null check.
+ */
+export declare const useCommerceData: () => NonNullable<CommerceComponentsDataInterface["data"]>;
 /**
  * A hook to load data asynchronously.
  *
+ * CSR-only by design: `useEffect` never runs during server rendering, so this can only
+ * ever produce a loading placeholder on the server. We looked at making this
+ * SSR-available (a keyed, host-resolvable variant with a collect-then-render pass) and
+ * decided against shipping it for now -- the host doesn't yet prefetch most theme data
+ * server-side (see PLAN.md's "V2 pivot"/SSR-today correction), so a general SSR
+ * mechanism here would have zero real consumers. Host-provided commerce data should go
+ * through `useCommerceData()` (`CommerceDataV2`) instead, which the host resolves
+ * synchronously as its own SSR data-fetching expands. This hook remains the right tool
+ * for genuinely dynamic, per-call data (e.g. `dataLoaders.integrationValue(key)`) and
+ * theme-original async work that the host has no way to pre-resolve.
+ *
  * @param fn - The function to load the data.
  * @param params - Optional parameters to pass to the function.
  * @returns The data and a boolean indicating if the data is loading.

package/dist/context/use-host-location.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useHostLocation: ()=>useHostLocation
+});
+const external_ecommerce_data_bridge_cjs_namespaceObject = require("./ecommerce-data-bridge.cjs");
+const EMPTY_LOCATION = {
+    path: '',
+    search: ''
+};
+function useHostLocation() {
+    const { request } = (0, external_ecommerce_data_bridge_cjs_namespaceObject.useDataBridge)();
+    return request ?? EMPTY_LOCATION;
+}
+exports.useHostLocation = __webpack_exports__.useHostLocation;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "useHostLocation"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/context/use-host-location.d.ts

@@ -0,0 +1,14 @@
+import type { HostLocation } from '../types/interface';
+/**
+ * SSR-safe access to the current request's path/query, sourced from the host via the
+ * data bridge instead of `window.location`. Populated identically on the server and the
+ * client, so unlike `typeof window !== 'undefined' ? window.location.pathname : ''`, this
+ * never produces a hydration mismatch (the guarded form renders `''` on the server and
+ * the client's first render, then the "real" value only once effects run -- two different
+ * outputs for what should be the same render).
+ *
+ * Returns an empty location (not undefined) when the host hasn't supplied one (e.g. a
+ * host that hasn't been upgraded to populate `request` yet), so call sites don't need
+ * their own fallback handling.
+ */
+export declare function useHostLocation(): HostLocation;

package/dist/esm/components/client-only.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+/**
+ * True once the component has mounted on the client. Always `false` during server
+ * rendering and during the client's first render (pre-hydration) -- this is what
+ * lets consumers avoid a hydration mismatch: server and first client render agree.
+ */
+export declare function useIsHydrated(): boolean;
+export type ClientOnlyProps = {
+    children: ReactNode;
+    /** Rendered on the server and during the pre-hydration client render. Defaults to nothing. */
+    fallback?: ReactNode;
+};
+/**
+ * Renders `children` only once mounted on the client; renders `fallback` (default: nothing)
+ * on the server and during the initial client render.
+ *
+ * Use this for anything that is genuinely browser-only -- maps, video players,
+ * geolocation-driven widgets, anything reading `window`/`document` at render time --
+ * instead of a hand-rolled `typeof window !== 'undefined'` guard. A guard like that
+ * still causes a hydration mismatch (the server renders one thing, the client's first
+ * render renders another); `ClientOnly` renders the *same* fallback on the server and
+ * the first client pass, then swaps to the real content post-hydration, so there's
+ * nothing for React to reconcile against.
+ */
+export declare function ClientOnly({ children, fallback }: ClientOnlyProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/client-only.js

@@ -0,0 +1,19 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+function useIsHydrated() {
+    const [isHydrated, setIsHydrated] = useState(false);
+    useEffect(()=>{
+        setIsHydrated(true);
+    }, []);
+    return isHydrated;
+}
+function ClientOnly({ children, fallback = null }) {
+    const isHydrated = useIsHydrated();
+    if (!isHydrated) return /*#__PURE__*/ jsx(Fragment, {
+        children: fallback
+    });
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: children
+    });
+}
+export { ClientOnly, useIsHydrated };

package/dist/esm/context/ecommerce-data-bridge.d.ts

@@ -19,9 +19,29 @@ export declare const DataBridgeContext: import("react").Context<CommerceComponen
  * @returns The data bridge context.
  */
 export declare const useDataBridge: () => CommerceComponentsDataInterface;
+/**
+ * Reads the V2 synchronous commerce data (see `CommerceDataV2`) off the data bridge.
+ * Prefer this over `useDataBridge().dataLoaders` in new theme code -- no async, no
+ * `useAsyncLoader`, no loading state to manage for data the host already has. Fields
+ * are `undefined` until the host resolves them for the current page; this returns an
+ * empty object (not `undefined`) when the host hasn't populated `data` at all, so
+ * `useCommerceData().brands` is always safe to read without an extra null check.
+ */
+export declare const useCommerceData: () => NonNullable<CommerceComponentsDataInterface["data"]>;
 /**
  * A hook to load data asynchronously.
  *
+ * CSR-only by design: `useEffect` never runs during server rendering, so this can only
+ * ever produce a loading placeholder on the server. We looked at making this
+ * SSR-available (a keyed, host-resolvable variant with a collect-then-render pass) and
+ * decided against shipping it for now -- the host doesn't yet prefetch most theme data
+ * server-side (see PLAN.md's "V2 pivot"/SSR-today correction), so a general SSR
+ * mechanism here would have zero real consumers. Host-provided commerce data should go
+ * through `useCommerceData()` (`CommerceDataV2`) instead, which the host resolves
+ * synchronously as its own SSR data-fetching expands. This hook remains the right tool
+ * for genuinely dynamic, per-call data (e.g. `dataLoaders.integrationValue(key)`) and
+ * theme-original async work that the host has no way to pre-resolve.
+ *
  * @param fn - The function to load the data.
  * @param params - Optional parameters to pass to the function.
  * @returns The data and a boolean indicating if the data is loading.

package/dist/esm/context/ecommerce-data-bridge.js

@@ -1,11 +1,16 @@
 import { createContext, useContext, useEffect, useState } from "react";
-const DataBridgeVersion = '0.35.0';
+const DataBridgeVersion = '0.36.1';
 const DataBridgeContext = createContext(void 0);
 const useDataBridge = ()=>{
     const context = useContext(DataBridgeContext);
     if (void 0 === context) throw new Error('useDataBridge must be used within a DataBridgeProvider');
     return context;
 };
+const EMPTY_COMMERCE_DATA = {};
+const useCommerceData = ()=>{
+    const { data } = useDataBridge();
+    return data ?? EMPTY_COMMERCE_DATA;
+};
 const useAsyncLoader = (fn, params)=>{
     const [data, setData] = useState(null);
     useEffect(()=>{
@@ -19,4 +24,4 @@ const useAsyncLoader = (fn, params)=>{
         isLoading: null === data
     };
 };
-export { DataBridgeContext, DataBridgeVersion, useAsyncLoader, useDataBridge };
+export { DataBridgeContext, DataBridgeVersion, useAsyncLoader, useCommerceData, useDataBridge };

package/dist/esm/context/use-host-location.d.ts

@@ -0,0 +1,14 @@
+import type { HostLocation } from '../types/interface';
+/**
+ * SSR-safe access to the current request's path/query, sourced from the host via the
+ * data bridge instead of `window.location`. Populated identically on the server and the
+ * client, so unlike `typeof window !== 'undefined' ? window.location.pathname : ''`, this
+ * never produces a hydration mismatch (the guarded form renders `''` on the server and
+ * the client's first render, then the "real" value only once effects run -- two different
+ * outputs for what should be the same render).
+ *
+ * Returns an empty location (not undefined) when the host hasn't supplied one (e.g. a
+ * host that hasn't been upgraded to populate `request` yet), so call sites don't need
+ * their own fallback handling.
+ */
+export declare function useHostLocation(): HostLocation;

package/dist/esm/context/use-host-location.js

@@ -0,0 +1,10 @@
+import { useDataBridge } from "./ecommerce-data-bridge.js";
+const EMPTY_LOCATION = {
+    path: '',
+    search: ''
+};
+function useHostLocation() {
+    const { request } = useDataBridge();
+    return request ?? EMPTY_LOCATION;
+}
+export { useHostLocation };

package/dist/esm/index.d.ts

@@ -1,5 +1,7 @@
+export * from './components/client-only';
 export * from './components/remote-boundary';
 export * from './context/ecommerce-data-bridge';
+export * from './context/use-host-location';
 export * from './types/actions';
 export * from './types/data';
 export * from './types/ecommerce-extension';
@@ -7,3 +9,6 @@ export * from './types/events';
 export * from './types/filter-side-panel';
 export * from './types/interface';
 export * from './types/product-card';
+export * from './utils/environment';
+export * from './utils/safe-storage';
+export * from './utils/use-isomorphic-layout-effect';

package/dist/esm/index.js

@@ -1,5 +1,7 @@
+export * from "./components/client-only.js";
 export * from "./components/remote-boundary.js";
 export * from "./context/ecommerce-data-bridge.js";
+export * from "./context/use-host-location.js";
 export * from "./types/actions.js";
 export * from "./types/data.js";
 export * from "./types/ecommerce-extension.js";
@@ -7,3 +9,6 @@ export * from "./types/events.js";
 export * from "./types/filter-side-panel.js";
 export * from "./types/interface.js";
 export * from "./types/product-card.js";
+export * from "./utils/environment.js";
+export * from "./utils/safe-storage.js";
+export * from "./utils/use-isomorphic-layout-effect.js";

package/dist/esm/types/interface.d.ts

@@ -1,10 +1,69 @@
 import type { Actions } from './actions';
-import type { Cart, DataLoaders, Dispensary, MenuContext, User } from './data';
+import type { Brand, Cart, Category, Collection, DataLoaders, Dispensary, LoyaltyData, MenuContext, Product, Special, User } from './data';
+/**
+ * The current request's URL info, provided by the host so theme code never needs
+ * `window.location` (which is unavailable during server rendering and, even when guarded
+ * with a `typeof window` check, causes a hydration mismatch since the server and the
+ * client's first render would otherwise disagree). Populated identically on the server
+ * and the client -- see `useHostLocation()`.
+ */
+export type HostLocation = {
+    /** Pathname only, e.g. `/product/some-product` (no query string). */
+    path: string;
+    /** Raw query string, including the leading `?` if present, or `''`. */
+    search: string;
+    /** Request host/domain, when known. May be omitted in contexts where the host can't supply it. */
+    host?: string;
+};
+/**
+ * V2 commerce data: plain, already-resolved values instead of promise-returning loader
+ * functions (see {@link DataLoaders} / `dataLoaders`).
+ *
+ * Most `dataLoaders` fields wrap data the host has already fetched for its own
+ * (non-themed) rendering of the same page -- `dataLoaders.brands()` and
+ * `dataLoaders.categories()`, for example, are `Promise.resolve()`-wrapped values that
+ * are never actually asynchronous by the time a theme calls them. Forcing every theme
+ * to treat that data as async (via `useAsyncLoader` or hand-rolled promise handling) is
+ * unnecessary ceremony, and it's specifically what stood in the way of real SSR: an
+ * `useEffect`-based fetch can't produce data during server rendering, but a value that's
+ * already sitting in memory doesn't need an effect at all.
+ *
+ * Prefer this over `dataLoaders` in new theme code. Fields are `undefined` until the
+ * host has resolved them for the current page -- check for presence rather than
+ * awaiting. See the SSR readiness guide for the full rationale and the `dataLoaders`
+ * migration path.
+ */
+export type CommerceDataV2 = {
+    brands?: Brand[];
+    categories?: Category[];
+    collections?: Collection[];
+    /** Only populated on a PDP. */
+    product?: Product | null;
+    products?: Product[];
+    specials?: Special[];
+    /** All dispensary locations of the chain. */
+    locations?: Dispensary[];
+    loyalty?: LoyaltyData | null;
+};
 export type CommerceComponentsDataInterface = {
     actions: Actions;
     cart?: Cart;
+    /**
+     * V2 synchronous commerce data. Prefer this over `dataLoaders` in new theme code --
+     * see {@link CommerceDataV2}.
+     */
+    data?: CommerceDataV2;
+    /**
+     * @deprecated Prefer `data` (see {@link CommerceDataV2}) where the field you need is
+     * available there. Kept fully functional for backward compatibility -- not being
+     * removed, just superseded for new theme code. `integrationValue` has no `data`
+     * equivalent (it's a genuinely dynamic, caller-parameterized lookup) and stays here.
+     */
     dataLoaders: DataLoaders;
+    /** Note: this is the current dispensary location, not URL info -- see `request` for that. */
     location?: Dispensary;
     menuContext: MenuContext;
+    /** Current request URL info (path/search/host). See {@link HostLocation}. */
+    request?: HostLocation;
     user?: User;
 };

package/dist/esm/types/product-card.d.ts

@@ -9,6 +9,8 @@ export type ProductCardProductData = {
     href: string;
     strainType: string | null;
     potency: string[];
+    avgRating: number | null;
+    reviewCount: number | null;
     images: ProductCardImage[];
     fallbackImageUrl: string;
 };

package/dist/esm/utils/environment.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Canonical environment check. Use this instead of ad-hoc `typeof window !== 'undefined'`
+ * checks scattered through theme code -- a single source of truth is easier to audit
+ * (and to lint for) than dozens of hand-rolled variants.
+ */
+export declare const isBrowser: () => boolean;
+/** Inverse of {@link isBrowser}, provided so call sites can read either direction naturally. */
+export declare const isServer: () => boolean;

package/dist/esm/utils/environment.js

@@ -0,0 +1,3 @@
+const isBrowser = ()=>'undefined' != typeof window && 'undefined' != typeof document;
+const isServer = ()=>!isBrowser();
+export { isBrowser, isServer };

package/dist/esm/utils/safe-storage.d.ts

@@ -0,0 +1,14 @@
+export type SafeStorage = {
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+    removeItem: (key: string) => void;
+    clear: () => void;
+};
+/**
+ * `window.localStorage`, but safe to call unconditionally during server rendering
+ * (returns/no-ops instead of throwing `window is not defined`) and safe in
+ * environments where storage access itself can throw (private browsing, quota, policy).
+ */
+export declare const safeLocalStorage: SafeStorage;
+/** `window.sessionStorage` counterpart to {@link safeLocalStorage}. */
+export declare const safeSessionStorage: SafeStorage;

package/dist/esm/utils/safe-storage.js

@@ -0,0 +1,40 @@
+import { isBrowser } from "./environment.js";
+const noopStorage = {
+    getItem: ()=>null,
+    setItem: ()=>{},
+    removeItem: ()=>{},
+    clear: ()=>{}
+};
+function createSafeStorage(getStorage) {
+    return {
+        getItem: (key)=>{
+            if (!isBrowser()) return null;
+            try {
+                return getStorage().getItem(key);
+            } catch  {
+                return null;
+            }
+        },
+        setItem: (key, value)=>{
+            if (!isBrowser()) return;
+            try {
+                getStorage().setItem(key, value);
+            } catch  {}
+        },
+        removeItem: (key)=>{
+            if (!isBrowser()) return;
+            try {
+                getStorage().removeItem(key);
+            } catch  {}
+        },
+        clear: ()=>{
+            if (!isBrowser()) return;
+            try {
+                getStorage().clear();
+            } catch  {}
+        }
+    };
+}
+const safeLocalStorage = isBrowser() ? createSafeStorage(()=>window.localStorage) : noopStorage;
+const safeSessionStorage = isBrowser() ? createSafeStorage(()=>window.sessionStorage) : noopStorage;
+export { safeLocalStorage, safeSessionStorage };

package/dist/esm/utils/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server.
+ *
+ * Plain `useLayoutEffect` is a no-op during server rendering and logs a React warning
+ * ("useLayoutEffect does nothing on the server"). Use this instead anywhere theme code
+ * needs layout-effect timing on the client but must render cleanly on the server.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/esm/utils/use-isomorphic-layout-effect.js

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
+import { isBrowser } from "./environment.js";
+const useIsomorphicLayoutEffect = isBrowser() ? useLayoutEffect : useEffect;
+export { useIsomorphicLayoutEffect };

package/dist/index.cjs

@@ -1,11 +1,17 @@
 "use strict";
 var __webpack_modules__ = {
+    "./components/client-only": function(module) {
+        module.exports = require("./components/client-only.cjs");
+    },
     "./components/remote-boundary": function(module) {
         module.exports = require("./components/remote-boundary.cjs");
     },
     "./context/ecommerce-data-bridge": function(module) {
         module.exports = require("./context/ecommerce-data-bridge.cjs");
     },
+    "./context/use-host-location": function(module) {
+        module.exports = require("./context/use-host-location.cjs");
+    },
     "./types/actions": function(module) {
         module.exports = require("./types/actions.cjs");
     },
@@ -26,6 +32,15 @@ var __webpack_modules__ = {
     },
     "./types/product-card": function(module) {
         module.exports = require("./types/product-card.cjs");
+    },
+    "./utils/environment": function(module) {
+        module.exports = require("./utils/environment.cjs");
+    },
+    "./utils/safe-storage": function(module) {
+        module.exports = require("./utils/safe-storage.cjs");
+    },
+    "./utils/use-isomorphic-layout-effect": function(module) {
+        module.exports = require("./utils/use-isomorphic-layout-effect.cjs");
     }
 };
 var __webpack_module_cache__ = {};
@@ -71,58 +86,88 @@ function __webpack_require__(moduleId) {
 var __webpack_exports__ = {};
 (()=>{
     __webpack_require__.r(__webpack_exports__);
-    var _components_remote_boundary__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./components/remote-boundary");
+    var _components_client_only__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./components/client-only");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _components_client_only__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_client_only__WEBPACK_IMPORTED_MODULE_0__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _components_remote_boundary__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./components/remote-boundary");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _components_remote_boundary__WEBPACK_IMPORTED_MODULE_1__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _components_remote_boundary__WEBPACK_IMPORTED_MODULE_1__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _context_ecommerce_data_bridge__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./context/ecommerce-data-bridge");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _context_ecommerce_data_bridge__WEBPACK_IMPORTED_MODULE_2__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _context_ecommerce_data_bridge__WEBPACK_IMPORTED_MODULE_2__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _context_use_host_location__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./context/use-host-location");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _context_use_host_location__WEBPACK_IMPORTED_MODULE_3__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _context_use_host_location__WEBPACK_IMPORTED_MODULE_3__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _types_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("./types/actions");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _types_actions__WEBPACK_IMPORTED_MODULE_4__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _types_actions__WEBPACK_IMPORTED_MODULE_4__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    var _types_data__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("./types/data");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _components_remote_boundary__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _components_remote_boundary__WEBPACK_IMPORTED_MODULE_0__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _types_data__WEBPACK_IMPORTED_MODULE_5__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _types_data__WEBPACK_IMPORTED_MODULE_5__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _context_ecommerce_data_bridge__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./context/ecommerce-data-bridge");
+    var _types_ecommerce_extension__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("./types/ecommerce-extension");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _context_ecommerce_data_bridge__WEBPACK_IMPORTED_MODULE_1__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _context_ecommerce_data_bridge__WEBPACK_IMPORTED_MODULE_1__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _types_ecommerce_extension__WEBPACK_IMPORTED_MODULE_6__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _types_ecommerce_extension__WEBPACK_IMPORTED_MODULE_6__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _types_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./types/actions");
+    var _types_events__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("./types/events");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _types_actions__WEBPACK_IMPORTED_MODULE_2__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _types_actions__WEBPACK_IMPORTED_MODULE_2__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _types_events__WEBPACK_IMPORTED_MODULE_7__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _types_events__WEBPACK_IMPORTED_MODULE_7__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _types_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./types/data");
+    var _types_filter_side_panel__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__("./types/filter-side-panel");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _types_data__WEBPACK_IMPORTED_MODULE_3__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _types_data__WEBPACK_IMPORTED_MODULE_3__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _types_filter_side_panel__WEBPACK_IMPORTED_MODULE_8__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _types_filter_side_panel__WEBPACK_IMPORTED_MODULE_8__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _types_ecommerce_extension__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("./types/ecommerce-extension");
+    var _types_interface__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__("./types/interface");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _types_ecommerce_extension__WEBPACK_IMPORTED_MODULE_4__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _types_ecommerce_extension__WEBPACK_IMPORTED_MODULE_4__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _types_interface__WEBPACK_IMPORTED_MODULE_9__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _types_interface__WEBPACK_IMPORTED_MODULE_9__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _types_events__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("./types/events");
+    var _types_product_card__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__("./types/product-card");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _types_events__WEBPACK_IMPORTED_MODULE_5__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _types_events__WEBPACK_IMPORTED_MODULE_5__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _types_product_card__WEBPACK_IMPORTED_MODULE_10__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _types_product_card__WEBPACK_IMPORTED_MODULE_10__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _types_filter_side_panel__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("./types/filter-side-panel");
+    var _utils_environment__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__("./utils/environment");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _types_filter_side_panel__WEBPACK_IMPORTED_MODULE_6__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _types_filter_side_panel__WEBPACK_IMPORTED_MODULE_6__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _utils_environment__WEBPACK_IMPORTED_MODULE_11__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _utils_environment__WEBPACK_IMPORTED_MODULE_11__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _types_interface__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("./types/interface");
+    var _utils_safe_storage__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__("./utils/safe-storage");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _types_interface__WEBPACK_IMPORTED_MODULE_7__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _types_interface__WEBPACK_IMPORTED_MODULE_7__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _utils_safe_storage__WEBPACK_IMPORTED_MODULE_12__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _utils_safe_storage__WEBPACK_IMPORTED_MODULE_12__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    var _types_product_card__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__("./types/product-card");
+    var _utils_use_isomorphic_layout_effect__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__("./utils/use-isomorphic-layout-effect");
     var __WEBPACK_REEXPORT_OBJECT__ = {};
-    for(var __WEBPACK_IMPORT_KEY__ in _types_product_card__WEBPACK_IMPORTED_MODULE_8__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
-        return _types_product_card__WEBPACK_IMPORTED_MODULE_8__[key];
+    for(var __WEBPACK_IMPORT_KEY__ in _utils_use_isomorphic_layout_effect__WEBPACK_IMPORTED_MODULE_13__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _utils_use_isomorphic_layout_effect__WEBPACK_IMPORTED_MODULE_13__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
 })();

package/dist/index.d.ts

@@ -1,5 +1,7 @@
+export * from './components/client-only';
 export * from './components/remote-boundary';
 export * from './context/ecommerce-data-bridge';
+export * from './context/use-host-location';
 export * from './types/actions';
 export * from './types/data';
 export * from './types/ecommerce-extension';
@@ -7,3 +9,6 @@ export * from './types/events';
 export * from './types/filter-side-panel';
 export * from './types/interface';
 export * from './types/product-card';
+export * from './utils/environment';
+export * from './utils/safe-storage';
+export * from './utils/use-isomorphic-layout-effect';

package/dist/types/interface.d.ts

@@ -1,10 +1,69 @@
 import type { Actions } from './actions';
-import type { Cart, DataLoaders, Dispensary, MenuContext, User } from './data';
+import type { Brand, Cart, Category, Collection, DataLoaders, Dispensary, LoyaltyData, MenuContext, Product, Special, User } from './data';
+/**
+ * The current request's URL info, provided by the host so theme code never needs
+ * `window.location` (which is unavailable during server rendering and, even when guarded
+ * with a `typeof window` check, causes a hydration mismatch since the server and the
+ * client's first render would otherwise disagree). Populated identically on the server
+ * and the client -- see `useHostLocation()`.
+ */
+export type HostLocation = {
+    /** Pathname only, e.g. `/product/some-product` (no query string). */
+    path: string;
+    /** Raw query string, including the leading `?` if present, or `''`. */
+    search: string;
+    /** Request host/domain, when known. May be omitted in contexts where the host can't supply it. */
+    host?: string;
+};
+/**
+ * V2 commerce data: plain, already-resolved values instead of promise-returning loader
+ * functions (see {@link DataLoaders} / `dataLoaders`).
+ *
+ * Most `dataLoaders` fields wrap data the host has already fetched for its own
+ * (non-themed) rendering of the same page -- `dataLoaders.brands()` and
+ * `dataLoaders.categories()`, for example, are `Promise.resolve()`-wrapped values that
+ * are never actually asynchronous by the time a theme calls them. Forcing every theme
+ * to treat that data as async (via `useAsyncLoader` or hand-rolled promise handling) is
+ * unnecessary ceremony, and it's specifically what stood in the way of real SSR: an
+ * `useEffect`-based fetch can't produce data during server rendering, but a value that's
+ * already sitting in memory doesn't need an effect at all.
+ *
+ * Prefer this over `dataLoaders` in new theme code. Fields are `undefined` until the
+ * host has resolved them for the current page -- check for presence rather than
+ * awaiting. See the SSR readiness guide for the full rationale and the `dataLoaders`
+ * migration path.
+ */
+export type CommerceDataV2 = {
+    brands?: Brand[];
+    categories?: Category[];
+    collections?: Collection[];
+    /** Only populated on a PDP. */
+    product?: Product | null;
+    products?: Product[];
+    specials?: Special[];
+    /** All dispensary locations of the chain. */
+    locations?: Dispensary[];
+    loyalty?: LoyaltyData | null;
+};
 export type CommerceComponentsDataInterface = {
     actions: Actions;
     cart?: Cart;
+    /**
+     * V2 synchronous commerce data. Prefer this over `dataLoaders` in new theme code --
+     * see {@link CommerceDataV2}.
+     */
+    data?: CommerceDataV2;
+    /**
+     * @deprecated Prefer `data` (see {@link CommerceDataV2}) where the field you need is
+     * available there. Kept fully functional for backward compatibility -- not being
+     * removed, just superseded for new theme code. `integrationValue` has no `data`
+     * equivalent (it's a genuinely dynamic, caller-parameterized lookup) and stays here.
+     */
     dataLoaders: DataLoaders;
+    /** Note: this is the current dispensary location, not URL info -- see `request` for that. */
     location?: Dispensary;
     menuContext: MenuContext;
+    /** Current request URL info (path/search/host). See {@link HostLocation}. */
+    request?: HostLocation;
     user?: User;
 };

package/dist/types/product-card.d.ts

@@ -9,6 +9,8 @@ export type ProductCardProductData = {
     href: string;
     strainType: string | null;
     potency: string[];
+    avgRating: number | null;
+    reviewCount: number | null;
     images: ProductCardImage[];
     fallbackImageUrl: string;
 };

package/dist/utils/environment.cjs

@@ -0,0 +1,40 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    isBrowser: ()=>isBrowser,
+    isServer: ()=>isServer
+});
+const isBrowser = ()=>'undefined' != typeof window && 'undefined' != typeof document;
+const isServer = ()=>!isBrowser();
+exports.isBrowser = __webpack_exports__.isBrowser;
+exports.isServer = __webpack_exports__.isServer;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "isBrowser",
+    "isServer"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/utils/environment.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Canonical environment check. Use this instead of ad-hoc `typeof window !== 'undefined'`
+ * checks scattered through theme code -- a single source of truth is easier to audit
+ * (and to lint for) than dozens of hand-rolled variants.
+ */
+export declare const isBrowser: () => boolean;
+/** Inverse of {@link isBrowser}, provided so call sites can read either direction naturally. */
+export declare const isServer: () => boolean;

package/dist/utils/safe-storage.cjs

@@ -0,0 +1,77 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    safeLocalStorage: ()=>safeLocalStorage,
+    safeSessionStorage: ()=>safeSessionStorage
+});
+const external_environment_cjs_namespaceObject = require("./environment.cjs");
+const noopStorage = {
+    getItem: ()=>null,
+    setItem: ()=>{},
+    removeItem: ()=>{},
+    clear: ()=>{}
+};
+function createSafeStorage(getStorage) {
+    return {
+        getItem: (key)=>{
+            if (!(0, external_environment_cjs_namespaceObject.isBrowser)()) return null;
+            try {
+                return getStorage().getItem(key);
+            } catch  {
+                return null;
+            }
+        },
+        setItem: (key, value)=>{
+            if (!(0, external_environment_cjs_namespaceObject.isBrowser)()) return;
+            try {
+                getStorage().setItem(key, value);
+            } catch  {}
+        },
+        removeItem: (key)=>{
+            if (!(0, external_environment_cjs_namespaceObject.isBrowser)()) return;
+            try {
+                getStorage().removeItem(key);
+            } catch  {}
+        },
+        clear: ()=>{
+            if (!(0, external_environment_cjs_namespaceObject.isBrowser)()) return;
+            try {
+                getStorage().clear();
+            } catch  {}
+        }
+    };
+}
+const safeLocalStorage = (0, external_environment_cjs_namespaceObject.isBrowser)() ? createSafeStorage(()=>window.localStorage) : noopStorage;
+const safeSessionStorage = (0, external_environment_cjs_namespaceObject.isBrowser)() ? createSafeStorage(()=>window.sessionStorage) : noopStorage;
+exports.safeLocalStorage = __webpack_exports__.safeLocalStorage;
+exports.safeSessionStorage = __webpack_exports__.safeSessionStorage;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "safeLocalStorage",
+    "safeSessionStorage"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/utils/safe-storage.d.ts

@@ -0,0 +1,14 @@
+export type SafeStorage = {
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+    removeItem: (key: string) => void;
+    clear: () => void;
+};
+/**
+ * `window.localStorage`, but safe to call unconditionally during server rendering
+ * (returns/no-ops instead of throwing `window is not defined`) and safe in
+ * environments where storage access itself can throw (private browsing, quota, policy).
+ */
+export declare const safeLocalStorage: SafeStorage;
+/** `window.sessionStorage` counterpart to {@link safeLocalStorage}. */
+export declare const safeSessionStorage: SafeStorage;

package/dist/utils/use-isomorphic-layout-effect.cjs

@@ -0,0 +1,38 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useIsomorphicLayoutEffect: ()=>useIsomorphicLayoutEffect
+});
+const external_react_namespaceObject = require("react");
+const external_environment_cjs_namespaceObject = require("./environment.cjs");
+const useIsomorphicLayoutEffect = (0, external_environment_cjs_namespaceObject.isBrowser)() ? external_react_namespaceObject.useLayoutEffect : external_react_namespaceObject.useEffect;
+exports.useIsomorphicLayoutEffect = __webpack_exports__.useIsomorphicLayoutEffect;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "useIsomorphicLayoutEffect"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/utils/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server.
+ *
+ * Plain `useLayoutEffect` is a no-op during server rendering and logs a React warning
+ * ("useLayoutEffect does nothing on the server"). Use this instead anywhere theme code
+ * needs layout-effect timing on the client but must render cleanly on the server.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/package.json

@@ -9,7 +9,7 @@
     "url": "git+https://github.com/GetDutchie/ecommerce-extensions-sdk.git",
     "directory": "packages/sdk"
   },
-  "version": "0.35.0",
+  "version": "0.36.1",
   "license": "MIT",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -41,6 +41,7 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "jsdom": "^26.1.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",