@shopify/shop-minis-react 0.1.8 → 0.2.1

package/dist/providers/ImagePickerProvider.js

@@ -1,109 +1,108 @@
-import { jsxs as R, jsx as p } from "react/jsx-runtime";
-import { useRef as o, useCallback as s, useEffect as I, useMemo as b, createContext as A, useContext as L } from "react";
-import { useRequestPermissions as M } from "../hooks/util/useRequestPermissions.js";
-const v = A(null);
-function U() {
-  const f = L(v);
+import { jsxs as x, jsx as m } from "react/jsx-runtime";
+import { useRef as i, useCallback as s, useEffect as R, useMemo as I, createContext as b, useContext as A } from "react";
+import { useRequestPermissions as L } from "../hooks/util/useRequestPermissions.js";
+const k = b(null);
+function H() {
+  const f = A(k);
   if (!f)
     throw new Error(
       "useImagePickerContext must be used within an ImagePickerProvider"
     );
   return f;
 }
-const E = () => window?.minisParams?.platform === "android";
-function F({ children: f }) {
-  const C = o(null), h = o(null), g = o(null), n = o(null), e = o(null), a = o(null), { requestPermission: d } = M(), t = s(() => {
+function U({ children: f }) {
+  const C = i(null), h = i(null), g = i(null), n = i(null), e = i(null), a = i(null), { requestPermission: p } = L(), r = s(() => {
     if (a.current) {
-      const { input: l, handler: c } = a.current;
-      l.removeEventListener("cancel", c), a.current = null;
+      const { input: u, handler: c } = a.current;
+      u.removeEventListener("cancel", c), a.current = null;
     }
-  }, []), i = s(() => {
+  }, []), o = s(() => {
     e.current && (e.current(
       new Error("New file picker opened before previous completed")
     ), n.current = null, e.current = null);
-  }, []), m = s(
-    (l) => {
-      const c = l.target.files?.[0];
-      c && n.current && (n.current(c), n.current = null, e.current = null, t()), l.target.value = "";
+  }, []), d = s(
+    (u) => {
+      const c = u.target.files?.[0];
+      c && n.current && (n.current(c), n.current = null, e.current = null, r()), u.target.value = "";
     },
-    [t]
-  ), w = s(() => new Promise((l, c) => {
-    i(), t(), n.current = l, e.current = c;
-    const r = C.current;
-    if (!r) {
+    [r]
+  ), E = s(() => new Promise((u, c) => {
+    o(), r(), n.current = u, e.current = c;
+    const t = C.current;
+    if (!t) {
       c(new Error("Gallery input not found")), n.current = null, e.current = null;
       return;
     }
-    const u = () => {
-      e.current && (e.current(new Error("User cancelled file selection")), n.current = null, e.current = null), t();
+    const l = () => {
+      e.current && (e.current(new Error("User cancelled file selection")), n.current = null, e.current = null), r();
     };
-    r.addEventListener("cancel", u), a.current = { input: r, handler: u }, E() ? d({ permission: "CAMERA" }).then(() => {
-      r.click();
+    t.addEventListener("cancel", l), a.current = { input: t, handler: l }, p({ permission: "CAMERA" }).then(() => {
+      t.click();
     }).catch(() => {
-      r.click();
-    }) : r.click();
-  }), [i, t, d]), P = s(
-    (l = "back") => new Promise((c, r) => {
-      i(), t(), n.current = c, e.current = r;
-      const u = l === "front" ? h.current : g.current;
-      if (!u) {
-        r(new Error("Camera input not found")), n.current = null, e.current = null;
+      t.click();
+    });
+  }), [o, r, p]), P = s(
+    (u = "back") => new Promise((c, t) => {
+      o(), r(), n.current = c, e.current = t;
+      const l = u === "front" ? h.current : g.current;
+      if (!l) {
+        t(new Error("Camera input not found")), n.current = null, e.current = null;
         return;
       }
-      const k = () => {
-        e.current && (e.current(new Error("User cancelled camera")), n.current = null, e.current = null), t();
+      const w = () => {
+        e.current && (e.current(new Error("User cancelled camera")), n.current = null, e.current = null), r();
       };
-      u.addEventListener("cancel", k), a.current = { input: u, handler: k }, E() ? d({ permission: "CAMERA" }).then(({ granted: x }) => {
-        x ? u.click() : (r(new Error("Camera permission not granted")), n.current = null, e.current = null);
+      l.addEventListener("cancel", w), a.current = { input: l, handler: w }, p({ permission: "CAMERA" }).then(({ granted: y }) => {
+        y ? l.click() : (t(new Error("Camera permission not granted")), n.current = null, e.current = null);
       }).catch(() => {
-        r(new Error("Camera permission not granted")), n.current = null, e.current = null;
-      }) : u.click();
+        t(new Error("Camera permission not granted")), n.current = null, e.current = null;
+      });
     }),
-    [i, t, d]
+    [o, r, p]
   );
-  I(() => () => {
-    i(), t();
-  }, [i, t]);
-  const y = b(
+  R(() => () => {
+    o(), r();
+  }, [o, r]);
+  const v = I(
     () => ({
       openCamera: P,
-      openGallery: w
+      openGallery: E
     }),
-    [P, w]
+    [P, E]
   );
-  return /* @__PURE__ */ R(v.Provider, { value: y, children: [
+  return /* @__PURE__ */ x(k.Provider, { value: v, children: [
     f,
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ m(
       "input",
       {
         ref: C,
         type: "file",
         accept: "image/*",
-        onChange: m,
+        onChange: d,
         style: { display: "none" },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ m(
       "input",
       {
         ref: h,
         type: "file",
         accept: "image/*",
         capture: "user",
-        onChange: m,
+        onChange: d,
         style: { display: "none" },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ m(
       "input",
       {
         ref: g,
         type: "file",
         accept: "image/*",
         capture: "environment",
-        onChange: m,
+        onChange: d,
         style: { display: "none" },
         "aria-hidden": "true"
       }
@@ -111,7 +110,7 @@ function F({ children: f }) {
   ] });
 }
 export {
-  F as ImagePickerProvider,
-  U as useImagePickerContext
+  U as ImagePickerProvider,
+  H as useImagePickerContext
 };
 //# sourceMappingURL=ImagePickerProvider.js.map

package/dist/providers/ImagePickerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePickerProvider.js","sources":["../../src/providers/ImagePickerProvider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useRef,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react'\n\nimport {useRequestPermissions} from '../hooks/util/useRequestPermissions'\n\nexport type CameraFacing = 'front' | 'back'\n\ninterface ImagePickerContextValue {\n  openCamera: (cameraFacing?: CameraFacing) => Promise<File>\n  openGallery: () => Promise<File>\n}\n\nconst ImagePickerContext = createContext<ImagePickerContextValue | null>(null)\n\nexport function useImagePickerContext() {\n  const context = useContext(ImagePickerContext)\n  if (!context) {\n    throw new Error(\n      'useImagePickerContext must be used within an ImagePickerProvider'\n    )\n  }\n  return context\n}\n\ninterface ImagePickerProviderProps {\n  children: React.ReactNode\n}\n\nconst isAndroid = () => window?.minisParams?.platform === 'android'\n\nexport function ImagePickerProvider({children}: ImagePickerProviderProps) {\n  const galleryInputRef = useRef<HTMLInputElement>(null)\n  const frontCameraInputRef = useRef<HTMLInputElement>(null)\n  const backCameraInputRef = useRef<HTMLInputElement>(null)\n  const resolveRef = useRef<((file: File) => void) | null>(null)\n  const rejectRef = useRef<((reason: Error) => void) | null>(null)\n  const activeCancelHandlerRef = useRef<{\n    input: HTMLInputElement\n    handler: () => void\n  } | null>(null)\n\n  const {requestPermission} = useRequestPermissions()\n\n  const cleanupCancelHandler = useCallback(() => {\n    if (activeCancelHandlerRef.current) {\n      const {input, handler} = activeCancelHandlerRef.current\n      input.removeEventListener('cancel', handler)\n      activeCancelHandlerRef.current = null\n    }\n  }, [])\n\n  const rejectPendingPromise = useCallback(() => {\n    if (rejectRef.current) {\n      rejectRef.current(\n        new Error('New file picker opened before previous completed')\n      )\n      resolveRef.current = null\n      rejectRef.current = null\n    }\n  }, [])\n\n  const handleFileChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0]\n\n      if (file && resolveRef.current) {\n        resolveRef.current(file)\n\n        resolveRef.current = null\n        rejectRef.current = null\n\n        cleanupCancelHandler()\n      }\n\n      event.target.value = ''\n    },\n    [cleanupCancelHandler]\n  )\n\n  const openGallery = useCallback(() => {\n    return new Promise<File>((resolve, reject) => {\n      rejectPendingPromise()\n      cleanupCancelHandler()\n\n      resolveRef.current = resolve\n      rejectRef.current = reject\n\n      const input = galleryInputRef.current\n\n      if (!input) {\n        reject(new Error('Gallery input not found'))\n        resolveRef.current = null\n        rejectRef.current = null\n        return\n      }\n\n      const handleCancel = () => {\n        if (rejectRef.current) {\n          rejectRef.current(new Error('User cancelled file selection'))\n          resolveRef.current = null\n          rejectRef.current = null\n        }\n        cleanupCancelHandler()\n      }\n\n      input.addEventListener('cancel', handleCancel)\n      activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n      if (isAndroid()) {\n        // Android requires explicit camera permission for camera picker\n        requestPermission({permission: 'CAMERA'})\n          .then(() => {\n            // This will show both Camera and Gallery\n            input.click()\n          })\n          .catch(() => {\n            // Show only Gallery\n            input.click()\n          })\n      } else {\n        input.click()\n      }\n    })\n  }, [rejectPendingPromise, cleanupCancelHandler, requestPermission])\n\n  const openCamera = useCallback(\n    (cameraFacing: CameraFacing = 'back') => {\n      return new Promise<File>((resolve, reject) => {\n        rejectPendingPromise()\n        cleanupCancelHandler()\n\n        resolveRef.current = resolve\n        rejectRef.current = reject\n\n        const input =\n          cameraFacing === 'front'\n            ? frontCameraInputRef.current\n            : backCameraInputRef.current\n\n        if (!input) {\n          reject(new Error('Camera input not found'))\n          resolveRef.current = null\n          rejectRef.current = null\n          return\n        }\n\n        const handleCancel = () => {\n          if (rejectRef.current) {\n            rejectRef.current(new Error('User cancelled camera'))\n            resolveRef.current = null\n            rejectRef.current = null\n          }\n          cleanupCancelHandler()\n        }\n\n        input.addEventListener('cancel', handleCancel)\n        activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n        if (isAndroid()) {\n          // Android requires explicit camera permission\n          requestPermission({permission: 'CAMERA'})\n            .then(({granted}) => {\n              if (granted) {\n                input.click()\n              } else {\n                reject(new Error('Camera permission not granted'))\n                resolveRef.current = null\n                rejectRef.current = null\n              }\n            })\n            .catch(() => {\n              reject(new Error('Camera permission not granted'))\n              resolveRef.current = null\n              rejectRef.current = null\n            })\n        } else {\n          input.click()\n        }\n      })\n    },\n    [rejectPendingPromise, cleanupCancelHandler, requestPermission]\n  )\n\n  useEffect(() => {\n    return () => {\n      rejectPendingPromise()\n      cleanupCancelHandler()\n    }\n  }, [rejectPendingPromise, cleanupCancelHandler])\n\n  const contextValue: ImagePickerContextValue = useMemo(\n    () => ({\n      openCamera,\n      openGallery,\n    }),\n    [openCamera, openGallery]\n  )\n\n  return (\n    <ImagePickerContext.Provider value={contextValue}>\n      {children}\n      <input\n        ref={galleryInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n      <input\n        ref={frontCameraInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"user\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n      <input\n        ref={backCameraInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n    </ImagePickerContext.Provider>\n  )\n}\n"],"names":["ImagePickerContext","createContext","useImagePickerContext","context","useContext","isAndroid","ImagePickerProvider","children","galleryInputRef","useRef","frontCameraInputRef","backCameraInputRef","resolveRef","rejectRef","activeCancelHandlerRef","requestPermission","useRequestPermissions","cleanupCancelHandler","useCallback","input","handler","rejectPendingPromise","handleFileChange","event","file","openGallery","resolve","reject","handleCancel","openCamera","cameraFacing","granted","useEffect","contextValue","useMemo","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"ImagePickerProvider.js","sources":["../../src/providers/ImagePickerProvider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useRef,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react'\n\nimport {useRequestPermissions} from '../hooks/util/useRequestPermissions'\n\nexport type CameraFacing = 'front' | 'back'\n\ninterface ImagePickerContextValue {\n  openCamera: (cameraFacing?: CameraFacing) => Promise<File>\n  openGallery: () => Promise<File>\n}\n\nconst ImagePickerContext = createContext<ImagePickerContextValue | null>(null)\n\nexport function useImagePickerContext() {\n  const context = useContext(ImagePickerContext)\n  if (!context) {\n    throw new Error(\n      'useImagePickerContext must be used within an ImagePickerProvider'\n    )\n  }\n  return context\n}\n\ninterface ImagePickerProviderProps {\n  children: React.ReactNode\n}\n\nexport function ImagePickerProvider({children}: ImagePickerProviderProps) {\n  const galleryInputRef = useRef<HTMLInputElement>(null)\n  const frontCameraInputRef = useRef<HTMLInputElement>(null)\n  const backCameraInputRef = useRef<HTMLInputElement>(null)\n  const resolveRef = useRef<((file: File) => void) | null>(null)\n  const rejectRef = useRef<((reason: Error) => void) | null>(null)\n  const activeCancelHandlerRef = useRef<{\n    input: HTMLInputElement\n    handler: () => void\n  } | null>(null)\n\n  const {requestPermission} = useRequestPermissions()\n\n  const cleanupCancelHandler = useCallback(() => {\n    if (activeCancelHandlerRef.current) {\n      const {input, handler} = activeCancelHandlerRef.current\n      input.removeEventListener('cancel', handler)\n      activeCancelHandlerRef.current = null\n    }\n  }, [])\n\n  const rejectPendingPromise = useCallback(() => {\n    if (rejectRef.current) {\n      rejectRef.current(\n        new Error('New file picker opened before previous completed')\n      )\n      resolveRef.current = null\n      rejectRef.current = null\n    }\n  }, [])\n\n  const handleFileChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0]\n\n      if (file && resolveRef.current) {\n        resolveRef.current(file)\n\n        resolveRef.current = null\n        rejectRef.current = null\n\n        cleanupCancelHandler()\n      }\n\n      event.target.value = ''\n    },\n    [cleanupCancelHandler]\n  )\n\n  const openGallery = useCallback(() => {\n    return new Promise<File>((resolve, reject) => {\n      rejectPendingPromise()\n      cleanupCancelHandler()\n\n      resolveRef.current = resolve\n      rejectRef.current = reject\n\n      const input = galleryInputRef.current\n\n      if (!input) {\n        reject(new Error('Gallery input not found'))\n        resolveRef.current = null\n        rejectRef.current = null\n        return\n      }\n\n      const handleCancel = () => {\n        if (rejectRef.current) {\n          rejectRef.current(new Error('User cancelled file selection'))\n          resolveRef.current = null\n          rejectRef.current = null\n        }\n        cleanupCancelHandler()\n      }\n\n      input.addEventListener('cancel', handleCancel)\n      activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n      requestPermission({permission: 'CAMERA'})\n        .then(() => {\n          // This will show both Camera and Gallery\n          input.click()\n        })\n        .catch(() => {\n          // Show only Gallery\n          input.click()\n        })\n    })\n  }, [rejectPendingPromise, cleanupCancelHandler, requestPermission])\n\n  const openCamera = useCallback(\n    (cameraFacing: CameraFacing = 'back') => {\n      return new Promise<File>((resolve, reject) => {\n        rejectPendingPromise()\n        cleanupCancelHandler()\n\n        resolveRef.current = resolve\n        rejectRef.current = reject\n\n        const input =\n          cameraFacing === 'front'\n            ? frontCameraInputRef.current\n            : backCameraInputRef.current\n\n        if (!input) {\n          reject(new Error('Camera input not found'))\n          resolveRef.current = null\n          rejectRef.current = null\n          return\n        }\n\n        const handleCancel = () => {\n          if (rejectRef.current) {\n            rejectRef.current(new Error('User cancelled camera'))\n            resolveRef.current = null\n            rejectRef.current = null\n          }\n          cleanupCancelHandler()\n        }\n\n        input.addEventListener('cancel', handleCancel)\n        activeCancelHandlerRef.current = {input, handler: handleCancel}\n\n        requestPermission({permission: 'CAMERA'})\n          .then(({granted}) => {\n            if (granted) {\n              input.click()\n            } else {\n              reject(new Error('Camera permission not granted'))\n              resolveRef.current = null\n              rejectRef.current = null\n            }\n          })\n          .catch(() => {\n            reject(new Error('Camera permission not granted'))\n            resolveRef.current = null\n            rejectRef.current = null\n          })\n      })\n    },\n    [rejectPendingPromise, cleanupCancelHandler, requestPermission]\n  )\n\n  useEffect(() => {\n    return () => {\n      rejectPendingPromise()\n      cleanupCancelHandler()\n    }\n  }, [rejectPendingPromise, cleanupCancelHandler])\n\n  const contextValue: ImagePickerContextValue = useMemo(\n    () => ({\n      openCamera,\n      openGallery,\n    }),\n    [openCamera, openGallery]\n  )\n\n  return (\n    <ImagePickerContext.Provider value={contextValue}>\n      {children}\n      <input\n        ref={galleryInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n      <input\n        ref={frontCameraInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"user\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n      <input\n        ref={backCameraInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        onChange={handleFileChange}\n        style={{display: 'none'}}\n        aria-hidden=\"true\"\n      />\n    </ImagePickerContext.Provider>\n  )\n}\n"],"names":["ImagePickerContext","createContext","useImagePickerContext","context","useContext","ImagePickerProvider","children","galleryInputRef","useRef","frontCameraInputRef","backCameraInputRef","resolveRef","rejectRef","activeCancelHandlerRef","requestPermission","useRequestPermissions","cleanupCancelHandler","useCallback","input","handler","rejectPendingPromise","handleFileChange","event","file","openGallery","resolve","reject","handleCancel","openCamera","cameraFacing","granted","useEffect","contextValue","useMemo","jsxs","jsx"],"mappings":"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"}

package/dist/shop-minis-react/node_modules/.pnpm/@radix-ui_react-use-is-hydrated@0.1.0_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-use-is-hydrated/dist/index.js

@@ -1,4 +1,4 @@
-import { s as r } from "../../../../../../../../_virtual/index6.js";
+import { s as r } from "../../../../../../../../_virtual/index7.js";
 function s() {
   return r.useSyncExternalStore(
     e,

package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js

@@ -1,4 +1,4 @@
-import { __module as q } from "../../../../../../../../_virtual/index4.js";
+import { __module as q } from "../../../../../../../../_virtual/index5.js";
 import { __require as F } from "../../../../../global@4.4.0/node_modules/global/window.js";
 import { __require as N } from "../../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/extends.js";
 import { __require as J } from "../../../../../is-function@1.0.2/node_modules/is-function/index.js";

package/dist/shop-minis-react/node_modules/.pnpm/mpd-parser@1.3.1/node_modules/mpd-parser/dist/mpd-parser.es.js

@@ -2,7 +2,7 @@ import L from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-ut
 import T from "../../../../../../../_virtual/window.js";
 import { forEachMediaGroup as Z } from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-groups.js";
 import J from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/decode-b64-to-uint8-array.js";
-import { l as Q } from "../../../../../../../_virtual/index5.js";
+import { l as Q } from "../../../../../../../_virtual/index6.js";
 /*! @name mpd-parser @version 1.3.1 @license Apache-2.0 */
 const w = (e) => !!e && typeof e == "object", E = (...e) => e.reduce((n, t) => (typeof t != "object" || Object.keys(t).forEach((r) => {
   Array.isArray(n[r]) && Array.isArray(t[r]) ? n[r] = n[r].concat(t[r]) : w(n[r]) && w(t[r]) ? n[r] = E(n[r], t[r]) : n[r] = t[r];

package/dist/shop-minis-react/node_modules/.pnpm/querystringify@2.2.0/node_modules/querystringify/index.js

@@ -1,4 +1,4 @@
-import { __exports as i } from "../../../../../../_virtual/index7.js";
+import { __exports as i } from "../../../../../../_virtual/index4.js";
 var c;
 function d() {
   if (c) return i;

package/generated-hook-maps/hook-scopes-map.json

@@ -1,48 +1,48 @@
 {
   "useBuyerAttributes": [
-    "PROFILE"
+    "profile"
   ],
   "useCurrentUser": [
-    "USER_SETTINGS_READ"
+    "user_settings:read"
   ],
   "useFollowedShops": [
-    "SHOPS_FOLLOWS_READ"
+    "shops:follows:read"
   ],
   "useFollowedShopsActions": [
-    "SHOPS_FOLLOWS_WRITE"
+    "shops:follows:write"
   ],
   "useGenerateUserToken": [
-    "OPENID"
+    "openid"
   ],
   "useOrders": [
-    "ORDERS"
+    "orders"
   ],
   "useProductList": [
-    "PRODUCT_LIST_READ"
+    "product_list:read"
   ],
   "useProductListActions": [
-    "PRODUCT_LIST_ITEM_WRITE",
-    "PRODUCT_LIST_WRITE"
+    "product_list:write",
+    "product_list_item:write"
   ],
   "useProductLists": [
-    "PRODUCT_LIST_READ"
+    "product_list:read"
   ],
   "useRecentProducts": [
-    "PRODUCTS_RECENT_READ"
+    "products:recent:read"
   ],
   "useRecentShops": [
-    "SHOPS_RECENT_READ"
+    "shops:recent:read"
   ],
   "useRecommendedProducts": [
-    "PRODUCTS_RECOMMENDATIONS_READ"
+    "products:recommendations:read"
   ],
   "useRecommendedShops": [
-    "SHOPS_RECOMMENDATIONS_READ"
+    "shops:recommendations:read"
   ],
   "useSavedProducts": [
-    "FAVORITES"
+    "product_list:read"
   ],
   "useSavedProductsActions": [
-    "FAVORITES_WRITE"
+    "product_list:write"
   ]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.1.8",
+  "version": "0.2.1",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -43,7 +43,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.5.0",
+    "@shopify/shop-minis-platform": "0.7.0",
     "@tailwindcss/vite": "4.1.8",
     "@types/color": "3.0.6",
     "@types/lodash": "4.17.20",

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,25 @@
+import React, {Component} from 'react'
+
+import {ReportErrorParams} from '@shopify/shop-minis-platform/actions'
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode
+  onError: (params: ReportErrorParams) => void
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps> {
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // Report the error to the app
+    this.props.onError({
+      message: error.message,
+      stack: error.stack,
+      additionalContext: {
+        componentStack: errorInfo.componentStack,
+      },
+    })
+  }
+
+  render() {
+    return this.props.children
+  }
+}

package/src/components/MinisContainer.tsx

@@ -1,12 +1,30 @@
-import React, {useEffect, useState} from 'react'
+import React, {useCallback, useEffect, useState} from 'react'
 
+import {ReportErrorParams} from '@shopify/shop-minis-platform/actions'
+
+import {useShopActions} from '../internal/useShopActions'
 import {injectMocks} from '../mocks'
 import {ImagePickerProvider} from '../providers/ImagePickerProvider'
 
+import {ErrorBoundary} from './ErrorBoundary'
+
 injectMocks()
 
 export function MinisContainer({children}: {children: React.ReactNode}) {
   const [isSDKReady, setIsSDKReady] = useState(false)
+  const {reportError} = useShopActions()
+
+  const handleError = useCallback(
+    async (params: ReportErrorParams) => {
+      try {
+        await reportError(params)
+      } catch (error) {
+        // If reporting fails, at least log to console
+        console.error('Failed to report error to app:', error)
+      }
+    },
+    [reportError]
+  )
 
   useEffect(() => {
     // Function to check if SDK is ready
@@ -63,5 +81,9 @@ export function MinisContainer({children}: {children: React.ReactNode}) {
     )
   }
 
-  return <ImagePickerProvider>{children}</ImagePickerProvider>
+  return (
+    <ErrorBoundary onError={handleError}>
+      <ImagePickerProvider>{children}</ImagePickerProvider>
+    </ErrorBoundary>
+  )
 }

package/src/components/atoms/image.test.tsx

@@ -76,12 +76,13 @@ describe('Image', () => {
     expect(wrapper.style.aspectRatio).toBe('16/9')
   })
 
-  it('uses thumbhash as background when provided', () => {
+  it('uses thumbhash as background when provided with fixed aspect ratio', () => {
     const {container} = render(
       <Image
         src="https://example.com/image.jpg"
         alt="Test image"
         thumbhash="testThumbhash"
+        aspectRatio="1"
       />
     )
 
@@ -91,6 +92,45 @@ describe('Image', () => {
     )
   })
 
+  it('renders with natural sizing when aspectRatio is auto', () => {
+    const {container} = render(
+      <Image
+        src="https://example.com/image.jpg"
+        alt="Test image"
+        aspectRatio="auto"
+        className="custom-class"
+      />
+    )
+
+    const wrapper = container.firstChild as HTMLElement
+    const img = screen.getByRole('img')
+
+    expect(wrapper.tagName).toBe('DIV')
+    expect(wrapper).toHaveClass('custom-class')
+    expect(wrapper.style.aspectRatio).toBe('')
+    expect(img).toHaveClass('w-full', 'h-auto')
+    expect(img).toHaveAttribute('src', 'https://example.com/image.jpg')
+  })
+
+  it('preserves thumbhash with natural sizing', () => {
+    const {container} = render(
+      <Image
+        src="https://example.com/image.jpg"
+        alt="Test image"
+        aspectRatio="auto"
+        thumbhash="testThumbhash"
+      />
+    )
+
+    const wrapper = container.firstChild as HTMLElement
+    const img = screen.getByRole('img')
+
+    expect(wrapper.style.backgroundImage).toContain(
+      'data:image/png;base64,testThumbhash'
+    )
+    expect(img).toHaveClass('w-full', 'h-auto')
+  })
+
   it('passes additional props to img element', () => {
     render(
       <Image

package/src/components/atoms/image.tsx

@@ -17,6 +17,7 @@ type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
   file?: File
   thumbhash?: string | null
   aspectRatio?: number | string
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'
 }
 
 export const Image = memo(function Image(props: ImageProps) {
@@ -28,6 +29,7 @@ export const Image = memo(function Image(props: ImageProps) {
     className,
     style,
     aspectRatio = 'auto',
+    objectFit = 'contain',
     ...restProps
   } = props
 
@@ -71,10 +73,10 @@ export const Image = memo(function Image(props: ImageProps) {
 
   return (
     <div
-      className={cn('relative w-full ', className)}
+      className={cn('relative w-full', className)}
       style={{
         ...style,
-        aspectRatio,
+        ...(aspectRatio !== 'auto' && {aspectRatio}),
         backgroundImage: thumbhashDataURL
           ? `url(${thumbhashDataURL})`
           : undefined,
@@ -84,7 +86,10 @@ export const Image = memo(function Image(props: ImageProps) {
     >
       <img
         className={cn(
-          'absolute inset-0 opacity-0 size-full object-cover',
+          aspectRatio === 'auto'
+            ? 'opacity-0 w-full h-auto'
+            : 'absolute inset-0 opacity-0 size-full',
+          `object-${objectFit}`,
           isLoaded && 'opacity-100'
         )}
         src={imageSrc}

package/src/hooks/storage/useAsyncStorage.test.ts

@@ -29,7 +29,7 @@ describe('useAsyncStorage', () => {
 
     // Set up mock actions with proper implementations
     mockActions = {
-      getPersistedItem: vi.fn().mockResolvedValue('stored-value'),
+      getPersistedItem: vi.fn().mockResolvedValue(null),
       setPersistedItem: vi.fn().mockResolvedValue(undefined),
       removePersistedItem: vi.fn().mockResolvedValue(undefined),
       getAllPersistedKeys: vi.fn().mockResolvedValue(['key1', 'key2', 'key3']),
@@ -65,11 +65,12 @@ describe('useAsyncStorage', () => {
 
   describe('getItem', () => {
     it('calls getPersistedItem with correct parameters', async () => {
+      mockActions.getPersistedItem.mockResolvedValue('test-value')
       const {result} = renderHook(() => useAsyncStorage())
 
       await act(async () => {
         const value = await result.current.getItem({key: 'test-key'})
-        expect(value).toBe('stored-value')
+        expect(value).toBe('test-value')
       })
 
       expect(mockActions.getPersistedItem).toHaveBeenCalledWith({

package/src/internal/useReportImpression.ts

@@ -0,0 +1,33 @@
+import {useCallback} from 'react'
+
+import {ReportImpressionParams} from '@shopify/shop-minis-platform/actions'
+
+import {getWindowLocationPathname} from '../utils/getWindowLocationPathname'
+
+import {useHandleAction} from './useHandleAction'
+import {useShopActions} from './useShopActions'
+
+interface UseReportImpressionReturns {
+  /**
+   * Report an impression event for analytics.
+   */
+  reportImpression: (params: ReportImpressionParams) => Promise<void>
+}
+
+export const useReportImpression = (): UseReportImpressionReturns => {
+  const {reportImpression} = useShopActions()
+  const handleAction = useHandleAction(reportImpression)
+
+  const report = useCallback(
+    (params: ReportImpressionParams) => {
+      const enrichedParams = {
+        ...params,
+        pageValue: params.pageValue || getWindowLocationPathname(),
+      }
+      return handleAction(enrichedParams)
+    },
+    [handleAction]
+  )
+
+  return {reportImpression: report}
+}

package/src/internal/useReportInteraction.ts

@@ -0,0 +1,33 @@
+import {useCallback} from 'react'
+
+import {ReportInteractionParams} from '@shopify/shop-minis-platform/actions'
+
+import {getWindowLocationPathname} from '../utils/getWindowLocationPathname'
+
+import {useHandleAction} from './useHandleAction'
+import {useShopActions} from './useShopActions'
+
+interface UseReportInteractionReturns {
+  /**
+   * Report a user interaction event for analytics.
+   */
+  reportInteraction: (params: ReportInteractionParams) => Promise<void>
+}
+
+export const useReportInteraction = (): UseReportInteractionReturns => {
+  const {reportInteraction} = useShopActions()
+  const handleAction = useHandleAction(reportInteraction)
+
+  const report = useCallback(
+    (params: ReportInteractionParams) => {
+      const enrichedParams = {
+        ...params,
+        pageValue: params.pageValue || getWindowLocationPathname(),
+      }
+      return handleAction(enrichedParams)
+    },
+    [handleAction]
+  )
+
+  return {reportInteraction: report}
+}

package/src/mocks.ts

@@ -249,12 +249,12 @@ export function makeMockActions(): ShopActions {
         },
       ],
     },
-    getPersistedItem: 'stored-value',
+    getPersistedItem: null,
     setPersistedItem: undefined,
     removePersistedItem: undefined,
     getAllPersistedKeys: ['key1', 'key2', 'key3'],
     clearPersistedItems: undefined,
-    getInternalPersistedItem: 'internal-value',
+    getInternalPersistedItem: null,
     setInternalPersistedItem: undefined,
     removeInternalPersistedItem: undefined,
     getAllInternalPersistedKeys: ['internal-key1', 'internal-key2'],
@@ -461,6 +461,7 @@ export function makeMockActions(): ShopActions {
     requestPermission: {
       granted: true,
     },
+    reportError: undefined,
   } as const
 
   const mock: Partial<ShopActions> = {}