@shopify/shop-minis-react 0.1.7 → 0.2.0

package/dist/components/atoms/image.js

@@ -1,58 +1,60 @@
-import { jsx as n } from "react/jsx-runtime";
-import { memo as v, useState as i, useEffect as k, useMemo as u, useCallback as I } from "react";
-import { cn as m } from "../../lib/utils.js";
-import { getThumbhashDataURL as j, getResizedImageUrl as y } from "../../utils/image.js";
-const O = v(function(d) {
+import { jsx as u } from "react/jsx-runtime";
+import { memo as j, useState as i, useEffect as k, useMemo as m, useCallback as y } from "react";
+import { cn as d } from "../../lib/utils.js";
+import { getThumbhashDataURL as I, getResizedImageUrl as z } from "../../utils/image.js";
+const O = j(function(b) {
   const {
     src: r,
     file: t,
-    thumbhash: a,
-    onLoad: s,
-    className: b,
-    style: f,
-    aspectRatio: g = "auto",
-    ...h
-  } = d, [L, p] = i(!1), [o, c] = i(null);
+    thumbhash: s,
+    onLoad: c,
+    className: f,
+    style: h,
+    aspectRatio: o = "auto",
+    objectFit: g = "contain",
+    ...L
+  } = b, [p, U] = i(!1), [a, l] = i(null);
   k(() => {
     if (!t) {
-      c(null);
+      l(null);
       return;
     }
     const e = URL.createObjectURL(t);
-    return c(e), () => {
+    return l(e), () => {
       URL.revokeObjectURL(e);
     };
   }, [t]);
-  const l = u(
-    () => j(a ?? void 0),
-    [a]
-  ), U = I(
+  const n = m(
+    () => I(s ?? void 0),
+    [s]
+  ), R = y(
     (e) => {
-      p(!0), s?.(e);
+      U(!0), c?.(e);
     },
-    [s]
-  ), R = u(() => o || y(r), [o, r]);
-  return /* @__PURE__ */ n(
+    [c]
+  ), v = m(() => a || z(r), [a, r]);
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: m("relative w-full ", b),
+      className: d("relative w-full", f),
       style: {
-        ...f,
-        aspectRatio: g,
-        backgroundImage: l ? `url(${l})` : void 0,
+        ...h,
+        ...o !== "auto" && { aspectRatio: o },
+        backgroundImage: n ? `url(${n})` : void 0,
         backgroundSize: "cover",
         backgroundPosition: "center"
       },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ u(
         "img",
         {
-          className: m(
-            "absolute inset-0 opacity-0 size-full object-cover",
-            L && "opacity-100"
+          className: d(
+            o === "auto" ? "opacity-0 w-full h-auto" : "absolute inset-0 opacity-0 size-full",
+            `object-${g}`,
+            p && "opacity-100"
           ),
-          src: R,
-          onLoad: U,
-          ...h
+          src: v,
+          onLoad: R,
+          ...L
         }
       )
     }

package/dist/components/atoms/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../src/components/atoms/image.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/alt-text */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport {\n  ImgHTMLAttributes,\n  useCallback,\n  useMemo,\n  memo,\n  useState,\n  useEffect,\n} from 'react'\n\nimport {cn} from '../../lib/utils'\nimport {getThumbhashDataURL, getResizedImageUrl} from '../../utils'\n\ntype ImageProps = ImgHTMLAttributes<HTMLImageElement> & {\n  src?: string\n  file?: File\n  thumbhash?: string | null\n  aspectRatio?: number | string\n}\n\nexport const Image = memo(function Image(props: ImageProps) {\n  const {\n    src,\n    file,\n    thumbhash,\n    onLoad,\n    className,\n    style,\n    aspectRatio = 'auto',\n    ...restProps\n  } = props\n\n  const [isLoaded, setIsLoaded] = useState(false)\n  const [blobUrl, setBlobUrl] = useState<string | null>(null)\n\n  // Create and manage blob URL for File objects\n  useEffect(() => {\n    if (!file) {\n      setBlobUrl(null)\n      return\n    }\n\n    const url = URL.createObjectURL(file)\n    setBlobUrl(url)\n\n    // Cleanup on unmount or when file changes\n    return () => {\n      URL.revokeObjectURL(url)\n    }\n  }, [file])\n\n  const thumbhashDataURL = useMemo(\n    () => getThumbhashDataURL(thumbhash ?? undefined),\n    [thumbhash]\n  )\n\n  const handleLoad = useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setIsLoaded(true)\n      onLoad?.(event)\n    },\n    [onLoad]\n  )\n\n  // Use blob URL if file is provided, otherwise use src\n  const imageSrc = useMemo(() => {\n    if (blobUrl) return blobUrl\n    return getResizedImageUrl(src)\n  }, [blobUrl, src])\n\n  return (\n    <div\n      className={cn('relative w-full ', className)}\n      style={{\n        ...style,\n        aspectRatio,\n        backgroundImage: thumbhashDataURL\n          ? `url(${thumbhashDataURL})`\n          : undefined,\n        backgroundSize: 'cover',\n        backgroundPosition: 'center',\n      }}\n    >\n      <img\n        className={cn(\n          'absolute inset-0 opacity-0 size-full object-cover',\n          isLoaded && 'opacity-100'\n        )}\n        src={imageSrc}\n        onLoad={handleLoad}\n        {...restProps}\n      />\n    </div>\n  )\n})\n"],"names":["Image","memo","props","src","file","thumbhash","onLoad","className","style","aspectRatio","restProps","isLoaded","setIsLoaded","useState","blobUrl","setBlobUrl","useEffect","url","thumbhashDataURL","useMemo","getThumbhashDataURL","handleLoad","useCallback","event","imageSrc","getResizedImageUrl","jsx","cn"],"mappings":";;;;AAqBO,MAAMA,IAAQC,EAAK,SAAeC,GAAmB;AACpD,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,GAAGC;AAAA,EAAA,IACDR,GAEE,CAACS,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAASC,CAAU,IAAIF,EAAwB,IAAI;AAG1D,EAAAG,EAAU,MAAM;AACd,QAAI,CAACZ,GAAM;AACT,MAAAW,EAAW,IAAI;AACf;AAAA,IAAA;AAGI,UAAAE,IAAM,IAAI,gBAAgBb,CAAI;AACpC,WAAAW,EAAWE,CAAG,GAGP,MAAM;AACX,UAAI,gBAAgBA,CAAG;AAAA,IACzB;AAAA,EAAA,GACC,CAACb,CAAI,CAAC;AAET,QAAMc,IAAmBC;AAAA,IACvB,MAAMC,EAAoBf,KAAa,MAAS;AAAA,IAChD,CAACA,CAAS;AAAA,EACZ,GAEMgB,IAAaC;AAAA,IACjB,CAACC,MAAyD;AACxD,MAAAX,EAAY,EAAI,GAChBN,IAASiB,CAAK;AAAA,IAChB;AAAA,IACA,CAACjB,CAAM;AAAA,EACT,GAGMkB,IAAWL,EAAQ,MACnBL,KACGW,EAAmBtB,CAAG,GAC5B,CAACW,GAASX,CAAG,CAAC;AAGf,SAAA,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,oBAAoBpB,CAAS;AAAA,MAC3C,OAAO;AAAA,QACL,GAAGC;AAAA,QACH,aAAAC;AAAA,QACA,iBAAiBS,IACb,OAAOA,CAAgB,MACvB;AAAA,QACJ,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACtB;AAAA,MAEA,UAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,YACAhB,KAAY;AAAA,UACd;AAAA,UACA,KAAKa;AAAA,UACL,QAAQH;AAAA,UACP,GAAGX;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"image.js","sources":["../../../src/components/atoms/image.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/alt-text */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport {\n  ImgHTMLAttributes,\n  useCallback,\n  useMemo,\n  memo,\n  useState,\n  useEffect,\n} from 'react'\n\nimport {cn} from '../../lib/utils'\nimport {getThumbhashDataURL, getResizedImageUrl} from '../../utils'\n\ntype ImageProps = ImgHTMLAttributes<HTMLImageElement> & {\n  src?: string\n  file?: File\n  thumbhash?: string | null\n  aspectRatio?: number | string\n  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'\n}\n\nexport const Image = memo(function Image(props: ImageProps) {\n  const {\n    src,\n    file,\n    thumbhash,\n    onLoad,\n    className,\n    style,\n    aspectRatio = 'auto',\n    objectFit = 'contain',\n    ...restProps\n  } = props\n\n  const [isLoaded, setIsLoaded] = useState(false)\n  const [blobUrl, setBlobUrl] = useState<string | null>(null)\n\n  // Create and manage blob URL for File objects\n  useEffect(() => {\n    if (!file) {\n      setBlobUrl(null)\n      return\n    }\n\n    const url = URL.createObjectURL(file)\n    setBlobUrl(url)\n\n    // Cleanup on unmount or when file changes\n    return () => {\n      URL.revokeObjectURL(url)\n    }\n  }, [file])\n\n  const thumbhashDataURL = useMemo(\n    () => getThumbhashDataURL(thumbhash ?? undefined),\n    [thumbhash]\n  )\n\n  const handleLoad = useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setIsLoaded(true)\n      onLoad?.(event)\n    },\n    [onLoad]\n  )\n\n  // Use blob URL if file is provided, otherwise use src\n  const imageSrc = useMemo(() => {\n    if (blobUrl) return blobUrl\n    return getResizedImageUrl(src)\n  }, [blobUrl, src])\n\n  return (\n    <div\n      className={cn('relative w-full', className)}\n      style={{\n        ...style,\n        ...(aspectRatio !== 'auto' && {aspectRatio}),\n        backgroundImage: thumbhashDataURL\n          ? `url(${thumbhashDataURL})`\n          : undefined,\n        backgroundSize: 'cover',\n        backgroundPosition: 'center',\n      }}\n    >\n      <img\n        className={cn(\n          aspectRatio === 'auto'\n            ? 'opacity-0 w-full h-auto'\n            : 'absolute inset-0 opacity-0 size-full',\n          `object-${objectFit}`,\n          isLoaded && 'opacity-100'\n        )}\n        src={imageSrc}\n        onLoad={handleLoad}\n        {...restProps}\n      />\n    </div>\n  )\n})\n"],"names":["Image","memo","props","src","file","thumbhash","onLoad","className","style","aspectRatio","objectFit","restProps","isLoaded","setIsLoaded","useState","blobUrl","setBlobUrl","useEffect","url","thumbhashDataURL","useMemo","getThumbhashDataURL","handleLoad","useCallback","event","imageSrc","getResizedImageUrl","jsx","cn"],"mappings":";;;;AAsBO,MAAMA,IAAQC,EAAK,SAAeC,GAAmB;AACpD,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACDT,GAEE,CAACU,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAASC,CAAU,IAAIF,EAAwB,IAAI;AAG1D,EAAAG,EAAU,MAAM;AACd,QAAI,CAACb,GAAM;AACT,MAAAY,EAAW,IAAI;AACf;AAAA,IAAA;AAGI,UAAAE,IAAM,IAAI,gBAAgBd,CAAI;AACpC,WAAAY,EAAWE,CAAG,GAGP,MAAM;AACX,UAAI,gBAAgBA,CAAG;AAAA,IACzB;AAAA,EAAA,GACC,CAACd,CAAI,CAAC;AAET,QAAMe,IAAmBC;AAAA,IACvB,MAAMC,EAAoBhB,KAAa,MAAS;AAAA,IAChD,CAACA,CAAS;AAAA,EACZ,GAEMiB,IAAaC;AAAA,IACjB,CAACC,MAAyD;AACxD,MAAAX,EAAY,EAAI,GAChBP,IAASkB,CAAK;AAAA,IAChB;AAAA,IACA,CAAClB,CAAM;AAAA,EACT,GAGMmB,IAAWL,EAAQ,MACnBL,KACGW,EAAmBvB,CAAG,GAC5B,CAACY,GAASZ,CAAG,CAAC;AAGf,SAAA,gBAAAwB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBrB,CAAS;AAAA,MAC1C,OAAO;AAAA,QACL,GAAGC;AAAA,QACH,GAAIC,MAAgB,UAAU,EAAC,aAAAA,EAAW;AAAA,QAC1C,iBAAiBU,IACb,OAAOA,CAAgB,MACvB;AAAA,QACJ,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACtB;AAAA,MAEA,UAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACTnB,MAAgB,SACZ,4BACA;AAAA,YACJ,UAAUC,CAAS;AAAA,YACnBE,KAAY;AAAA,UACd;AAAA,UACA,KAAKa;AAAA,UACL,QAAQH;AAAA,UACP,GAAGX;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}

package/dist/hooks/navigation/useDeeplink.js

@@ -1,23 +1,23 @@
-import { useMemo as e } from "react";
-import { parseUrl as s } from "../../utils/parseUrl.js";
-const t = () => {
-  const { initialUrl: r } = window.minisParams;
-  return e(() => {
+import { useMemo as i } from "react";
+import { parseUrl as n } from "../../utils/parseUrl.js";
+const m = () => {
+  const { initialUrl: r, handle: e } = window.minisParams;
+  return i(() => {
     if (!r)
       return {
         path: void 0,
         queryParams: void 0,
         hash: void 0
       };
-    const a = s(r);
+    const a = n(r), t = `/mini/${e}`;
     return {
-      path: a.pathname,
+      path: a.pathname.startsWith(t) ? a.pathname.replace(t, "") : a.pathname,
       queryParams: a.query,
       hash: a.hash
     };
-  }, [r]);
+  }, [e, r]);
 };
 export {
-  t as useDeeplink
+  m as useDeeplink
 };
 //# sourceMappingURL=useDeeplink.js.map

package/dist/hooks/navigation/useDeeplink.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDeeplink.js","sources":["../../../src/hooks/navigation/useDeeplink.ts"],"sourcesContent":["import {useMemo} from 'react'\n\nimport {parseUrl} from '../../utils/parseUrl'\n\ninterface UseDeeplinkReturnType {\n  /**\n   * The path of the deeplink.\n   */\n  path?: string\n  /**\n   * The query parameters of the deeplink.\n   */\n  queryParams?: {[key: string]: string | undefined}\n  /**\n   * The hash of the deeplink.\n   */\n  hash?: string\n}\n\nexport const useDeeplink = (): UseDeeplinkReturnType => {\n  const {initialUrl} = window.minisParams\n\n  return useMemo(() => {\n    if (!initialUrl) {\n      return {\n        path: undefined,\n        queryParams: undefined,\n        hash: undefined,\n      }\n    }\n\n    const parsedUrl = parseUrl(initialUrl)\n\n    return {\n      path: parsedUrl.pathname,\n      queryParams: parsedUrl.query,\n      hash: parsedUrl.hash,\n    }\n  }, [initialUrl])\n}\n"],"names":["useDeeplink","initialUrl","useMemo","parsedUrl","parseUrl"],"mappings":";;AAmBO,MAAMA,IAAc,MAA6B;AAChD,QAAA,EAAC,YAAAC,MAAc,OAAO;AAE5B,SAAOC,EAAQ,MAAM;AACnB,QAAI,CAACD;AACI,aAAA;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,MAAM;AAAA,MACR;AAGI,UAAAE,IAAYC,EAASH,CAAU;AAE9B,WAAA;AAAA,MACL,MAAME,EAAU;AAAA,MAChB,aAAaA,EAAU;AAAA,MACvB,MAAMA,EAAU;AAAA,IAClB;AAAA,EAAA,GACC,CAACF,CAAU,CAAC;AACjB;"}
+{"version":3,"file":"useDeeplink.js","sources":["../../../src/hooks/navigation/useDeeplink.ts"],"sourcesContent":["import {useMemo} from 'react'\n\nimport {parseUrl} from '../../utils/parseUrl'\n\ninterface UseDeeplinkReturnType {\n  /**\n   * The path of the deeplink.\n   */\n  path?: string\n  /**\n   * The query parameters of the deeplink.\n   */\n  queryParams?: {[key: string]: string | undefined}\n  /**\n   * The hash of the deeplink.\n   */\n  hash?: string\n}\n\nexport const useDeeplink = (): UseDeeplinkReturnType => {\n  const {initialUrl, handle} = window.minisParams\n\n  return useMemo(() => {\n    if (!initialUrl) {\n      return {\n        path: undefined,\n        queryParams: undefined,\n        hash: undefined,\n      }\n    }\n\n    const parsedUrl = parseUrl(initialUrl)\n    const deeplinkPathnamePrefix = `/mini/${handle}`\n\n    return {\n      path: parsedUrl.pathname.startsWith(deeplinkPathnamePrefix)\n        ? parsedUrl.pathname.replace(deeplinkPathnamePrefix, '')\n        : parsedUrl.pathname,\n      queryParams: parsedUrl.query,\n      hash: parsedUrl.hash,\n    }\n  }, [handle, initialUrl])\n}\n"],"names":["useDeeplink","initialUrl","handle","useMemo","parsedUrl","parseUrl","deeplinkPathnamePrefix"],"mappings":";;AAmBO,MAAMA,IAAc,MAA6B;AACtD,QAAM,EAAC,YAAAC,GAAY,QAAAC,EAAM,IAAI,OAAO;AAEpC,SAAOC,EAAQ,MAAM;AACnB,QAAI,CAACF;AACI,aAAA;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,MAAM;AAAA,MACR;AAGI,UAAAG,IAAYC,EAASJ,CAAU,GAC/BK,IAAyB,SAASJ,CAAM;AAEvC,WAAA;AAAA,MACL,MAAME,EAAU,SAAS,WAAWE,CAAsB,IACtDF,EAAU,SAAS,QAAQE,GAAwB,EAAE,IACrDF,EAAU;AAAA,MACd,aAAaA,EAAU;AAAA,MACvB,MAAMA,EAAU;AAAA,IAClB;AAAA,EAAA,GACC,CAACF,GAAQD,CAAU,CAAC;AACzB;"}

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/eslint/README.md

@@ -0,0 +1,201 @@
+# Shop Minis ESLint Plugin
+
+Custom ESLint rules for Shop Minis apps. ESLint is included with the SDK.
+
+## Quick Setup
+
+Create **`eslint.config.js`** (NOT `.eslintrc.js`):
+
+```javascript
+const shopMinisConfig = require('@shopify/shop-minis-react/eslint/config')
+
+module.exports = [shopMinisConfig]
+```
+
+**That's it!** TypeScript and JSX are supported out of the box.
+
+**Important:**
+- File must be named `eslint.config.js` (no dot, no "rc")
+- This will lint all `.js`, `.jsx`, `.ts`, `.tsx` files in your project
+- TypeScript and JSX parsing is configured automatically
+
+## Usage
+
+```bash
+# Check for errors
+npx eslint .
+
+# Auto-fix (converts <img> to <Image> AND adds import!)
+npx eslint . --fix
+```
+
+## What You Get
+
+- ✅ No internal imports allowed
+- ✅ Warnings for `<img>`, `<button>`, `<label>` tags (auto-fixes with imports)
+- ✅ Manifest scope validation - ensures manifest.json has scopes for hooks you use (auto-fixes manifest)
+
+## Rules
+
+### `no-internal-imports`
+
+Prevents importing from internal SDK directories.
+
+```tsx
+// ❌ Error
+import {something} from '@shopify/shop-minis-react/internal'
+
+// ✅ Correct
+import {Component} from '@shopify/shop-minis-react'
+```
+
+### `prefer-sdk-components`
+
+Suggests using SDK components instead of native HTML elements. **Fully auto-fixable** - fixes both tags and imports!
+
+**Before:**
+```tsx
+const MyComponent = () => (
+  <img src="product.jpg" alt="Product" />
+)
+```
+
+**After running `npx eslint . --fix`:**
+```tsx
+import {Image} from '@shopify/shop-minis-react'
+
+const MyComponent = () => (
+  <Image src="product.jpg" alt="Product" />
+)
+```
+
+**Supported Components:**
+- `<img>` → `<Image>`
+- `<button>` → `<Button>`
+- `<label>` → `<Label>`
+
+**Auto-fix does TWO things:**
+1. ✅ Replaces native element with SDK component
+2. ✅ Adds import statement automatically (or adds to existing import)
+
+### `validate-manifest`
+
+Validates `src/manifest.json` configuration for scopes and permissions. **Auto-fixable** - adds missing values to manifest!
+
+#### Scopes
+
+Checks that hooks have required scopes:
+
+```tsx
+// If you use this hook:
+import {useCurrentUser} from '@shopify/shop-minis-react'
+
+// Manifest must include:
+{
+  "scopes": ["USER_SETTINGS_READ"]
+}
+```
+
+**Scope Requirements:**
+- `useCurrentUser` → `USER_SETTINGS_READ`
+- `useSavedProducts` → `FAVORITES`
+- `useOrders` → `ORDERS`
+
+#### Permissions
+
+Checks for native permission usage:
+
+```tsx
+// If you use this hook:
+import {useImagePicker} from '@shopify/shop-minis-react'
+
+// Or browser APIs:
+navigator.mediaDevices.getUserMedia({video: true})
+
+// Manifest must include:
+{
+  "permissions": ["CAMERA"]
+}
+```
+
+**Supported Permissions:**
+- `CAMERA` - Required for `useImagePicker` hook or getUserMedia video
+- `MICROPHONE` - Required for getUserMedia audio
+- `MOTION` - Required for DeviceOrientation/DeviceMotion events
+
+#### Trusted Domains
+
+Checks that external URLs are in trusted_domains. Detects:
+
+**Network Requests:**
+- `fetch('https://api.example.com/data')`
+- `new XMLHttpRequest().open('GET', 'https://...')`
+- `new WebSocket('wss://api.example.com')`
+- `new EventSource('https://api.example.com/events')`
+- `navigator.sendBeacon('https://analytics.example.com')`
+- `window.open('https://external.com')`
+
+**Media & Resources:**
+- `<img src="https://cdn.shopify.com/image.jpg" />`
+- `<video src="https://videos.example.com/video.mp4" />`
+- `<video poster="https://cdn.example.com/poster.jpg" />`
+- `<audio src="https://audio.example.com/sound.mp3" />`
+- `<source src="https://media.example.com/video.mp4" />`
+- `<track src="https://cdn.example.com/captions.vtt" />`
+- `<object data="https://cdn.example.com/file.pdf" />`
+- `<embed src="https://cdn.example.com/file.swf" />`
+- `<form action="https://api.example.com/submit" />`
+
+**Note:** External scripts (`<script>`), stylesheets (`<link>`), and iframes are not supported and excluded from validation.
+
+**Example manifest:**
+```json
+{
+  "trusted_domains": [
+    "api.example.com",
+    "cdn.shopify.com",
+    "videos.example.com"
+  ]
+}
+```
+
+**Wildcard support:**
+```json
+{
+  "trusted_domains": [
+    "*.shopify.com",     // Matches any Shopify subdomain
+    "api.example.com",   // Exact domain
+    "cdn.example.com/assets"  // Specific path
+  ]
+}
+```
+
+**Auto-fix:**
+```bash
+npx eslint . --fix
+# Automatically updates src/manifest.json
+```
+
+**Example errors:**
+```
+Hook "useCurrentUser" requires scope "USER_SETTINGS_READ" in src/manifest.json.
+Hook "useImagePicker" requires permission "CAMERA" in src/manifest.json.
+fetch() call loads from "api.example.com" which is not in trusted_domains.
+<img> src attribute loads from "cdn.shopify.com" which is not in trusted_domains.
+```
+
+## Extending Rules
+
+To add more component mappings to `prefer-sdk-components`, edit `eslint/rules/prefer-sdk-components.cjs`:
+
+```javascript
+const defaultComponents = {
+  img: 'Image',
+  button: 'Button',
+  label: 'Label',
+  input: 'Input', // Add this
+  a: 'TransitionLink', // Add this
+}
+```
+
+All consumers automatically get new rules - no config changes needed!

package/eslint/config.cjs

@@ -0,0 +1,32 @@
+/* eslint-disable import/extensions */
+/**
+ * ESLint config for projects using @shopify/shop-minis-react
+ * @fileoverview Recommended ESLint configuration for Shop Minis apps
+ *
+ * This config uses ESLint flat config format (supported in ESLint 8.57+)
+ */
+
+// Import the plugin directly so consumers don't need to install it separately
+const shopMinisPlugin = require('./index.cjs')
+
+module.exports = {
+  files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+  languageOptions: {
+    parser: require('@typescript-eslint/parser'),
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+  plugins: {
+    'shop-minis': shopMinisPlugin,
+  },
+  rules: {
+    'shop-minis/no-internal-imports': 'error',
+    'shop-minis/prefer-sdk-components': 'warn',
+    'shop-minis/validate-manifest': 'error',
+  },
+}

package/eslint/index.cjs

@@ -0,0 +1,17 @@
+/* eslint-disable import/extensions */
+/**
+ * ESLint plugin for @shopify/shop-minis-react
+ * @fileoverview Custom ESLint rules for Shop Minis React SDK
+ */
+
+const noInternalImports = require('./rules/no-internal-imports.cjs')
+const preferSdkComponents = require('./rules/prefer-sdk-components.cjs')
+const validateManifest = require('./rules/validate-manifest.cjs')
+
+module.exports = {
+  rules: {
+    'no-internal-imports': noInternalImports,
+    'prefer-sdk-components': preferSdkComponents,
+    'validate-manifest': validateManifest,
+  },
+}