@shopify/shop-minis-react 0.0.33 → 0.0.34

package/dist/hooks/storage/useImageUpload.js

@@ -1,51 +1,50 @@
 import { useCallback as m } from "react";
-import { useShopActions as u } from "../../internal/useShopActions.js";
+import { useShopActions as c } from "../../internal/useShopActions.js";
+import { fileToDataUri as u } from "../../utils/image.js";
 const d = async (e) => {
-  const r = await (await fetch(e.uri)).blob();
+  const r = await u(e), o = await (await fetch(r)).blob();
   return {
-    ...e,
-    fileSize: e.fileSize ?? r.size,
-    fileBlob: r
+    mimeType: e.type,
+    fileSize: e.size ?? o.size,
+    fileBlob: o
   };
-}, f = async (e, o) => {
-  const r = new FormData();
-  o.parameters.forEach(({ name: l, value: t }) => {
-    r.append(l, t);
-  }), r.append("file", e.fileBlob);
-  const a = await fetch(o.url, {
+}, f = async (e, r) => {
+  const t = new FormData();
+  r.parameters.forEach(({ name: s, value: a }) => {
+    t.append(s, a);
+  }), t.append("file", e.fileBlob);
+  const o = await fetch(r.url, {
     method: "POST",
-    body: r
+    body: t
   });
-  return a.ok ? {} : (console.error("Failed to upload image", {
-    response: await a.text()
+  return o.ok ? {} : (console.error("Failed to upload image", {
+    response: await o.text()
   }), { error: "Failed to upload image" });
-}, h = () => {
-  const { createImageUploadLink: e, completeImageUpload: o } = u();
+}, U = () => {
+  const { createImageUploadLink: e, completeImageUpload: r } = c();
   return {
     uploadImage: m(
-      async (a) => {
-        if (a.length > 1)
-          throw new Error("Multiple image upload is not supported yet");
-        const l = a[0], t = await d(l), s = await e({
+      async (o) => {
+        const s = await d(o), a = await e({
           input: [
             {
-              mimeType: t.mimeType,
-              fileSize: t.fileSize
+              mimeType: s.mimeType,
+              fileSize: s.fileSize
             }
           ]
         });
-        if (!s.ok)
-          throw new Error(s.error.message);
-        const { error: p } = await f(
-          t,
-          s?.data?.targets?.[0]
+        if (!a.ok)
+          throw new Error(a.error.message);
+        const { error: n } = await f(
+          s,
+          a?.data?.targets?.[0]
         );
-        if (p)
-          throw new Error(p);
-        let c = 0;
-        for (; c < 30; ) {
-          const i = await o({
-            resourceUrls: s?.data?.targets?.map((n) => n.resourceUrl) || []
+        if (n)
+          throw new Error(n);
+        let p = 0;
+        for (; p < 30; ) {
+          const i = await r({
+            resourceUrls: a?.data?.targets?.map((l) => l.resourceUrl) || []
           });
           if (!i.ok)
             throw new Error(i.error.message);
@@ -54,18 +53,18 @@ const d = async (e) => {
               {
                 id: i.data.files[0].id,
                 imageUrl: i.data.files[0].image?.url,
-                resourceUrl: s?.data?.targets?.[0]?.resourceUrl
+                resourceUrl: a?.data?.targets?.[0]?.resourceUrl
               }
             ];
-          await new Promise((n) => setTimeout(n, 1e3)), c++;
+          await new Promise((l) => setTimeout(l, 1e3)), p++;
         }
         throw new Error("Image upload completion timed out");
       },
-      [e, o]
+      [e, r]
     )
   };
 };
 export {
-  h as useImageUpload
+  U as useImageUpload
 };
 //# sourceMappingURL=useImageUpload.js.map

package/dist/hooks/storage/useImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\nimport type {UploadTarget} from '@shopify/shop-minis-platform/actions'\n\nexport interface UploadImageParams {\n  /**\n   * The MIME type of the image.\n   */\n  mimeType: string\n  /**\n   * The size of the image in bytes.\n   */\n  fileSize?: number\n  /**\n   * The URI of the image to upload.\n   */\n  uri: string\n}\n\nexport interface UploadedImage {\n  /**\n   * The ID of the uploaded image.\n   */\n  id: string\n  /**\n   * The URL of the uploaded image.\n   */\n  imageUrl?: string\n  /**\n   * The resource URL of the uploaded image.\n   */\n  resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n  /**\n   * Upload an image attached to the current user.\n   */\n  uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>\n}\n\n// Fetch file data and detect file sizes if not provided\n// Works with file://, data:, and http(s):// URIs\nconst processFileData = async (image: UploadImageParams) => {\n  const response = await fetch(image.uri)\n  const blob = await response.blob()\n\n  return {\n    ...image,\n    fileSize: image.fileSize ?? blob.size,\n    fileBlob: blob,\n  }\n}\n\nconst uploadFileToGCS = async (\n  image: UploadImageParams & {fileSize: number; fileBlob: Blob},\n  target: UploadTarget\n) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}: {name: string; value: string}) => {\n    formData.append(name, value)\n  })\n\n  formData.append('file', image.fileBlob)\n\n  const uploadResponse = await fetch(target.url, {\n    method: 'POST',\n    body: formData,\n  })\n\n  if (!uploadResponse.ok) {\n    console.error('Failed to upload image', {\n      response: await uploadResponse.text(),\n    })\n    return {error: 'Failed to upload image'}\n  }\n\n  return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n  const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n  const uploadImage = useCallback(\n    async (params: UploadImageParams[]) => {\n      if (params.length > 1) {\n        throw new Error('Multiple image upload is not supported yet')\n      }\n\n      const imageParams = params[0]\n      const processedImageParams = await processFileData(imageParams)\n\n      const links = await createImageUploadLink({\n        input: [\n          {\n            mimeType: processedImageParams.mimeType,\n            fileSize: processedImageParams.fileSize,\n          },\n        ],\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        processedImageParams,\n        links?.data?.targets?.[0]!\n      )\n\n      if (uploadError) {\n        throw new Error(uploadError)\n      }\n\n      // 10 second polling for image upload\n      let count = 0\n      while (count < 30) {\n        const result = await completeImageUpload({\n          resourceUrls:\n            links?.data?.targets?.map(target => target.resourceUrl) || [],\n        })\n\n        if (!result.ok) {\n          throw new Error(result.error.message)\n        }\n\n        if (result.data?.files?.[0]?.fileStatus === 'READY') {\n          return [\n            {\n              id: result.data.files[0].id,\n              imageUrl: result.data.files[0].image?.url,\n              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n            },\n          ]\n        }\n\n        await new Promise(resolve => setTimeout(resolve, 1000))\n        count++\n      }\n\n      throw new Error('Image upload completion timed out')\n    },\n    [createImageUploadLink, completeImageUpload]\n  )\n\n  return {\n    uploadImage,\n  }\n}\n"],"names":["processFileData","image","blob","uploadFileToGCS","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","params","imageParams","processedImageParams","links","uploadError","count","result","resolve"],"mappings":";;AA6CA,MAAMA,IAAkB,OAAOC,MAA6B;AAEpD,QAAAC,IAAO,OADI,MAAM,MAAMD,EAAM,GAAG,GACV,KAAK;AAE1B,SAAA;AAAA,IACL,GAAGA;AAAA,IACH,UAAUA,EAAM,YAAYC,EAAK;AAAA,IACjC,UAAUA;AAAA,EACZ;AACF,GAEMC,IAAkB,OACtBF,GACAG,MACG;AACG,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAA0C;AACjE,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEQF,EAAA,OAAO,QAAQJ,EAAM,QAAQ;AAEtC,QAAMO,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AAiE7D,SAAA;AAAA,IACL,aAhEkBC;AAAA,MAClB,OAAOC,MAAgC;AACjC,YAAAA,EAAO,SAAS;AACZ,gBAAA,IAAI,MAAM,4CAA4C;AAGxD,cAAAC,IAAcD,EAAO,CAAC,GACtBE,IAAuB,MAAMhB,EAAgBe,CAAW,GAExDE,IAAQ,MAAMP,EAAsB;AAAA,UACxC,OAAO;AAAA,YACL;AAAA,cACE,UAAUM,EAAqB;AAAA,cAC/B,UAAUA,EAAqB;AAAA,YAAA;AAAA,UACjC;AAAA,QACF,CACD;AAEG,YAAA,CAACC,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAIrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMf;AAAA,UACjCa;AAAA,UACAC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMT,EAAoB;AAAA,YACvC,cACEM,GAAO,MAAM,SAAS,IAAI,CAAUb,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACgB,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAGtC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACT,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}
+{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\nimport {fileToDataUri} from '../../utils'\n\nimport type {UploadTarget} from '@shopify/shop-minis-platform/actions'\n\nexport interface UploadImageParams {\n  /**\n   * The file to upload.\n   */\n  image: File\n}\n\ninterface ProcessedImage {\n  /**\n   * The MIME type of the image.\n   */\n  mimeType: string\n  /**\n   * The size of the image in bytes.\n   */\n  fileSize: number\n  /**\n   * The file blob of the image.\n   */\n  fileBlob: Blob\n}\n\nexport interface UploadedImage {\n  /**\n   * The ID of the uploaded image.\n   */\n  id: string\n  /**\n   * The URL of the uploaded image.\n   */\n  imageUrl?: string\n  /**\n   * The resource URL of the uploaded image.\n   */\n  resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n  /**\n   * Upload an image which will be attached to the current user.\n   */\n  uploadImage: (image: File) => Promise<UploadedImage[]>\n}\n\n// Fetch file data and detect file sizes if not provided\n// Works with file://, data:, and http(s):// URIs\nconst processFileData = async (image: File): Promise<ProcessedImage> => {\n  const uri = await fileToDataUri(image)\n\n  const response = await fetch(uri)\n  const blob = await response.blob()\n\n  return {\n    mimeType: image.type,\n    fileSize: image.size ?? blob.size,\n    fileBlob: blob,\n  }\n}\n\nconst uploadFileToGCS = async (image: ProcessedImage, target: UploadTarget) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}: {name: string; value: string}) => {\n    formData.append(name, value)\n  })\n\n  formData.append('file', image.fileBlob)\n\n  const uploadResponse = await fetch(target.url, {\n    method: 'POST',\n    body: formData,\n  })\n\n  if (!uploadResponse.ok) {\n    console.error('Failed to upload image', {\n      response: await uploadResponse.text(),\n    })\n    return {error: 'Failed to upload image'}\n  }\n\n  return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n  const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n  const uploadImage = useCallback(\n    async (image: File) => {\n      const processedImageParams = await processFileData(image)\n\n      const links = await createImageUploadLink({\n        input: [\n          {\n            mimeType: processedImageParams.mimeType,\n            fileSize: processedImageParams.fileSize,\n          },\n        ],\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        processedImageParams,\n        links?.data?.targets?.[0]!\n      )\n\n      if (uploadError) {\n        throw new Error(uploadError)\n      }\n\n      // 10 second polling for image upload\n      let count = 0\n      while (count < 30) {\n        const result = await completeImageUpload({\n          resourceUrls:\n            links?.data?.targets?.map(target => target.resourceUrl) || [],\n        })\n\n        if (!result.ok) {\n          throw new Error(result.error.message)\n        }\n\n        if (result.data?.files?.[0]?.fileStatus === 'READY') {\n          return [\n            {\n              id: result.data.files[0].id,\n              imageUrl: result.data.files[0].image?.url,\n              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n            },\n          ]\n        }\n\n        await new Promise(resolve => setTimeout(resolve, 1000))\n        count++\n      }\n\n      throw new Error('Image upload completion timed out')\n    },\n    [createImageUploadLink, completeImageUpload]\n  )\n\n  return {\n    uploadImage,\n  }\n}\n"],"names":["processFileData","image","uri","fileToDataUri","blob","uploadFileToGCS","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","processedImageParams","links","uploadError","count","result","resolve"],"mappings":";;;AAqDA,MAAMA,IAAkB,OAAOC,MAAyC;AAChE,QAAAC,IAAM,MAAMC,EAAcF,CAAK,GAG/BG,IAAO,OADI,MAAM,MAAMF,CAAG,GACJ,KAAK;AAE1B,SAAA;AAAA,IACL,UAAUD,EAAM;AAAA,IAChB,UAAUA,EAAM,QAAQG,EAAK;AAAA,IAC7B,UAAUA;AAAA,EACZ;AACF,GAEMC,IAAkB,OAAOJ,GAAuBK,MAAyB;AACvE,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAA0C;AACjE,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEQF,EAAA,OAAO,QAAQN,EAAM,QAAQ;AAEtC,QAAMS,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AA4D7D,SAAA;AAAA,IACL,aA3DkBC;AAAA,MAClB,OAAOd,MAAgB;AACf,cAAAe,IAAuB,MAAMhB,EAAgBC,CAAK,GAElDgB,IAAQ,MAAML,EAAsB;AAAA,UACxC,OAAO;AAAA,YACL;AAAA,cACE,UAAUI,EAAqB;AAAA,cAC/B,UAAUA,EAAqB;AAAA,YAAA;AAAA,UACjC;AAAA,QACF,CACD;AAEG,YAAA,CAACC,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAIrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMb;AAAA,UACjCW;AAAA,UACAC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMP,EAAoB;AAAA,YACvC,cACEI,GAAO,MAAM,SAAS,IAAI,CAAUX,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACc,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAGtC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACP,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}

package/dist/index.js

@@ -3,17 +3,17 @@ import { MinisContainer as i } from "./components/MinisContainer.js";
 import { ProductCard as n, ProductCardBadge as m, ProductCardContainer as l, ProductCardFavoriteButton as s, ProductCardImage as u, ProductCardImageContainer as f, ProductCardInfo as c, ProductCardPrice as x, ProductCardTitle as d } from "./components/commerce/product-card.js";
 import { ProductLink as g } from "./components/commerce/product-link.js";
 import { MerchantCard as D, MerchantCardContainer as P, MerchantCardHeader as A, MerchantCardInfo as h, MerchantCardName as T, MerchantCardRating as I } from "./components/commerce/merchant-card.js";
-import { ProductCardSkeleton as w } from "./components/commerce/product-card-skeleton.js";
+import { ProductCardSkeleton as v } from "./components/commerce/product-card-skeleton.js";
 import { MerchantCardSkeleton as M } from "./components/commerce/merchant-card-skeleton.js";
-import { QuantitySelector as B } from "./components/commerce/quantity-selector.js";
-import { Search as F, SearchInput as b, SearchProvider as U, SearchResultsList as L } from "./components/commerce/search.js";
+import { QuantitySelector as k } from "./components/commerce/quantity-selector.js";
+import { Search as E, SearchInput as F, SearchProvider as b, SearchResultsList as L } from "./components/commerce/search.js";
 import { ImageContentWrapper as y } from "./components/content/image-content-wrapper.js";
 import { MinisRouter as H } from "./components/navigation/minis-router.js";
 import { TransitionLink as V } from "./components/navigation/transition-link.js";
 import { Button as _ } from "./components/atoms/button.js";
 import { FavoriteButton as Y } from "./components/atoms/favorite-button.js";
 import { IconButton as j } from "./components/atoms/icon-button.js";
-import { ThumbhashImage as J } from "./components/atoms/thumbhash-image.js";
+import { Image as J } from "./components/atoms/image.js";
 import { Touchable as X } from "./components/atoms/touchable.js";
 import { LongPressDetector as $ } from "./components/atoms/long-press-detector.js";
 import { AlertDialogAtom as er } from "./components/atoms/alert-dialog.js";
@@ -21,9 +21,9 @@ import { List as tr } from "./components/atoms/list.js";
 import { VideoPlayer as ir } from "./components/atoms/video-player.js";
 import { Accordion as nr, AccordionContent as mr, AccordionItem as lr, AccordionTrigger as sr } from "./components/ui/accordion.js";
 import { Alert as fr, AlertDescription as cr, AlertTitle as xr } from "./components/ui/alert.js";
-import { AlertDialog as Cr, AlertDialogAction as gr, AlertDialogCancel as Sr, AlertDialogContent as Dr, AlertDialogDescription as Pr, AlertDialogFooter as Ar, AlertDialogHeader as hr, AlertDialogOverlay as Tr, AlertDialogPortal as Ir, AlertDialogTitle as vr, AlertDialogTrigger as wr } from "./components/ui/alert-dialog.js";
-import { Avatar as Mr, AvatarFallback as kr, AvatarImage as Br } from "./components/ui/avatar.js";
-import { Badge as Fr, badgeVariants as br } from "./components/ui/badge.js";
+import { AlertDialog as Cr, AlertDialogAction as gr, AlertDialogCancel as Sr, AlertDialogContent as Dr, AlertDialogDescription as Pr, AlertDialogFooter as Ar, AlertDialogHeader as hr, AlertDialogOverlay as Tr, AlertDialogPortal as Ir, AlertDialogTitle as Rr, AlertDialogTrigger as vr } from "./components/ui/alert-dialog.js";
+import { Avatar as Mr, AvatarFallback as Ur, AvatarImage as kr } from "./components/ui/avatar.js";
+import { Badge as Er, badgeVariants as Fr } from "./components/ui/badge.js";
 import { Card as Lr, CardAction as Nr, CardContent as yr, CardDescription as Gr, CardFooter as Hr, CardHeader as Or, CardTitle as Vr } from "./components/ui/card.js";
 import { Carousel as _r, CarouselContent as Wr, CarouselItem as Yr, CarouselNext as Qr, CarouselPrevious as jr } from "./components/ui/carousel.js";
 import { Checkbox as Jr } from "./components/ui/checkbox.js";
@@ -32,9 +32,9 @@ import { Drawer as me, DrawerClose as le, DrawerContent as se, DrawerDescription
 import { Input as De } from "./components/ui/input.js";
 import { Label as Ae } from "./components/ui/label.js";
 import { Progress as Te } from "./components/ui/progress.js";
-import { RadioGroup as ve, RadioGroupItem as we } from "./components/ui/radio-group.js";
-import { ResizableHandle as Me, ResizablePanel as ke, ResizablePanelGroup as Be } from "./components/ui/resizable.js";
-import { ScrollArea as Fe, ScrollBar as be } from "./components/ui/scroll-area.js";
+import { RadioGroup as Re, RadioGroupItem as ve } from "./components/ui/radio-group.js";
+import { ResizableHandle as Me, ResizablePanel as Ue, ResizablePanelGroup as ke } from "./components/ui/resizable.js";
+import { ScrollArea as Ee, ScrollBar as Fe } from "./components/ui/scroll-area.js";
 import { Select as Le, SelectContent as Ne, SelectGroup as ye, SelectItem as Ge, SelectLabel as He, SelectScrollDownButton as Oe, SelectScrollUpButton as Ve, SelectSeparator as ze, SelectTrigger as _e, SelectValue as We } from "./components/ui/select.js";
 import { Separator as Qe } from "./components/ui/separator.js";
 import { Sheet as qe, SheetClose as Je, SheetContent as Ke, SheetDescription as Xe, SheetFooter as Ze, SheetHeader as $e, SheetTitle as ro, SheetTrigger as eo } from "./components/ui/sheet.js";
@@ -49,11 +49,11 @@ import { useFollowedShopsActions as So } from "./hooks/user/useFollowedShopsActi
 import { useCurrentUser as Po } from "./hooks/user/useCurrentUser.js";
 import { useOrders as ho } from "./hooks/user/useOrders.js";
 import { useBuyerAttributes as Io } from "./hooks/user/useBuyerAttributes.js";
-import { useGenerateUserToken as wo } from "./hooks/user/useGenerateUserToken.js";
+import { useGenerateUserToken as vo } from "./hooks/user/useGenerateUserToken.js";
 import { useProductListActions as Mo } from "./hooks/product/useProductListActions.js";
-import { useProductLists as Bo } from "./hooks/product/useProductLists.js";
-import { useProductList as Fo } from "./hooks/product/useProductList.js";
-import { useProduct as Uo } from "./hooks/product/useProduct.js";
+import { useProductLists as ko } from "./hooks/product/useProductLists.js";
+import { useProductList as Eo } from "./hooks/product/useProductList.js";
+import { useProduct as bo } from "./hooks/product/useProduct.js";
 import { useProducts as No } from "./hooks/product/useProducts.js";
 import { useProductVariants as Go } from "./hooks/product/useProductVariants.js";
 import { useProductMedia as Oo } from "./hooks/product/useProductMedia.js";
@@ -76,13 +76,13 @@ import { useErrorToast as St } from "./hooks/util/useErrorToast.js";
 import { useErrorScreen as Pt } from "./hooks/util/useErrorScreen.js";
 import { useShare as ht } from "./hooks/util/useShare.js";
 import { useImagePicker as It } from "./hooks/util/useImagePicker.js";
-import { MiniEntityNotFoundError as wt, MiniError as Rt, MiniNetworkError as Mt, formatError as kt } from "./utils/errors.js";
-import { extractBrandTheme as Et, formatReviewCount as Ft, getFeaturedImages as bt, normalizeRating as Ut } from "./utils/merchant-card.js";
+import { MiniEntityNotFoundError as vt, MiniError as wt, MiniNetworkError as Mt, formatError as Ut } from "./utils/errors.js";
+import { extractBrandTheme as Bt, formatReviewCount as Et, getFeaturedImages as Ft, normalizeRating as bt } from "./utils/merchant-card.js";
 import { parseUrl as Nt } from "./utils/parseUrl.js";
-import { fileToDataUri as Gt } from "./utils/imageToDataUri.js";
-import { UserState as Ot, UserTokenGenerateUserErrorCode as Vt } from "./shop-minis-platform/src/types/user.js";
-import { ContentCreateUserErrorCode as _t } from "./shop-minis-platform/src/types/content.js";
-import { Consent as Yt, ConsentStatus as Qt } from "./shop-minis-platform/src/types/permissions.js";
+import { fileToDataUri as Gt, getResizedImageUrl as Ht, getThumbhashDataURL as Ot } from "./utils/image.js";
+import { UserState as zt, UserTokenGenerateUserErrorCode as _t } from "./shop-minis-platform/src/types/user.js";
+import { ContentCreateUserErrorCode as Yt } from "./shop-minis-platform/src/types/content.js";
+import { Consent as jt, ConsentStatus as qt } from "./shop-minis-platform/src/types/permissions.js";
 export {
   nr as Accordion,
   mr as AccordionContent,
@@ -100,13 +100,13 @@ export {
   hr as AlertDialogHeader,
   Tr as AlertDialogOverlay,
   Ir as AlertDialogPortal,
-  vr as AlertDialogTitle,
-  wr as AlertDialogTrigger,
+  Rr as AlertDialogTitle,
+  vr as AlertDialogTrigger,
   xr as AlertTitle,
   Mr as Avatar,
-  kr as AvatarFallback,
-  Br as AvatarImage,
-  Fr as Badge,
+  Ur as AvatarFallback,
+  kr as AvatarImage,
+  Er as Badge,
   _ as Button,
   Lr as Card,
   Nr as CardAction,
@@ -121,9 +121,9 @@ export {
   Qr as CarouselNext,
   jr as CarouselPrevious,
   Jr as Checkbox,
-  Yt as Consent,
-  Qt as ConsentStatus,
-  _t as ContentCreateUserErrorCode,
+  jt as Consent,
+  qt as ConsentStatus,
+  Yt as ContentCreateUserErrorCode,
   o as DATA_NAVIGATION_TYPE_ATTRIBUTE,
   Xr as Dialog,
   Zr as DialogClose,
@@ -147,6 +147,7 @@ export {
   ge as DrawerTrigger,
   Y as FavoriteButton,
   j as IconButton,
+  J as Image,
   y as ImageContentWrapper,
   De as Input,
   Ae as Label,
@@ -159,8 +160,8 @@ export {
   T as MerchantCardName,
   I as MerchantCardRating,
   M as MerchantCardSkeleton,
-  wt as MiniEntityNotFoundError,
-  Rt as MiniError,
+  vt as MiniEntityNotFoundError,
+  wt as MiniError,
   Mt as MiniNetworkError,
   i as MinisContainer,
   H as MinisRouter,
@@ -173,21 +174,21 @@ export {
   f as ProductCardImageContainer,
   c as ProductCardInfo,
   x as ProductCardPrice,
-  w as ProductCardSkeleton,
+  v as ProductCardSkeleton,
   d as ProductCardTitle,
   g as ProductLink,
   Te as Progress,
-  B as QuantitySelector,
-  ve as RadioGroup,
-  we as RadioGroupItem,
+  k as QuantitySelector,
+  Re as RadioGroup,
+  ve as RadioGroupItem,
   Me as ResizableHandle,
-  ke as ResizablePanel,
-  Be as ResizablePanelGroup,
-  Fe as ScrollArea,
-  be as ScrollBar,
-  F as Search,
-  b as SearchInput,
-  U as SearchProvider,
+  Ue as ResizablePanel,
+  ke as ResizablePanelGroup,
+  Ee as ScrollArea,
+  Fe as ScrollBar,
+  E as Search,
+  F as SearchInput,
+  b as SearchProvider,
   L as SearchResultsList,
   Le as Select,
   Ne as SelectContent,
@@ -209,20 +210,21 @@ export {
   ro as SheetTitle,
   eo as SheetTrigger,
   io as Skeleton,
-  J as ThumbhashImage,
   to as Toaster,
   X as Touchable,
   V as TransitionLink,
-  Ot as UserState,
-  Vt as UserTokenGenerateUserErrorCode,
+  zt as UserState,
+  _t as UserTokenGenerateUserErrorCode,
   ir as VideoPlayer,
-  br as badgeVariants,
-  Et as extractBrandTheme,
+  Fr as badgeVariants,
+  Bt as extractBrandTheme,
   Gt as fileToDataUri,
-  kt as formatError,
-  Ft as formatReviewCount,
-  bt as getFeaturedImages,
-  Ut as normalizeRating,
+  Ut as formatError,
+  Et as formatReviewCount,
+  Ft as getFeaturedImages,
+  Ht as getResizedImageUrl,
+  Ot as getThumbhashDataURL,
+  bt as normalizeRating,
   Nt as parseUrl,
   Ko as useAsyncStorage,
   Io as useBuyerAttributes,
@@ -235,16 +237,16 @@ export {
   St as useErrorToast,
   Co as useFollowedShops,
   So as useFollowedShopsActions,
-  wo as useGenerateUserToken,
+  vo as useGenerateUserToken,
   It as useImagePicker,
   rt as useImageUpload,
   mt as useNavigateWithTransition,
   ho as useOrders,
   Qo as usePopularProducts,
-  Uo as useProduct,
-  Fo as useProductList,
+  bo as useProduct,
+  Eo as useProductList,
   Mo as useProductListActions,
-  Bo as useProductLists,
+  ko as useProductLists,
   Oo as useProductMedia,
   zo as useProductSearch,
   Go as useProductVariants,

package/dist/shop-minis-platform/src/types/content.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.js","sources":["../../../../../shop-minis-platform/src/types/content.ts"],"sourcesContent":["/* eslint-disable @shopify/typescript/prefer-pascal-case-enums */\nexport interface Image {\n  url: string\n  altText?: string | null\n  height?: number | null\n  width?: number | null\n  /**\n   * @deprecated This property will be removed in a future version\n   */\n  sensitive: boolean\n  thumbhash?: string | null\n}\n\nexport interface ContentImage {\n  id?: string | null\n  url: string\n  width?: number | null\n  height?: number | null\n}\n\nexport interface ContentProduct {\n  id: string\n  title: string\n  featuredImage?: ContentImage | null\n}\n\nexport type ContentVisibility = 'DISCOVERABLE' | 'LINKABLE'\n\nexport interface Content {\n  publicId: string\n  externalId?: string | null\n  image: ContentImage\n  title: string\n  description?: string | null\n  visibility: ContentVisibility[]\n  shareableUrl?: string | null\n  products?: ContentProduct[] | null\n}\n\nexport enum ContentCreateUserErrorCode {\n  DUPLICATE_EXTERNAL_ID = 'DUPLICATE_EXTERNAL_ID',\n  INELIGIBLE_PRODUCTS = 'INELIGIBLE_PRODUCTS',\n}\n\nexport interface ContentCreateUserErrors {\n  code: ContentCreateUserErrorCode\n  message: string\n}\n\nexport interface ContentIdentifierInput {\n  externalId?: string | null\n  publicId?: string | null\n}\n"],"names":["ContentCreateUserErrorCode"],"mappings":"AAuCY,IAAAA,sBAAAA,OACVA,EAAA,wBAAwB,yBACxBA,EAAA,sBAAsB,uBAFZA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"content.js","sources":["../../../../../shop-minis-platform/src/types/content.ts"],"sourcesContent":["/* eslint-disable @shopify/typescript/prefer-pascal-case-enums */\nexport interface ImageType {\n  url: string\n  altText?: string | null\n  height?: number | null\n  width?: number | null\n  /**\n   * @deprecated This property will be removed in a future version\n   */\n  sensitive: boolean\n  thumbhash?: string | null\n}\n\nexport interface ContentImage {\n  id?: string | null\n  url: string\n  width?: number | null\n  height?: number | null\n  thumbhash?: string | null\n  altText?: string | null\n}\n\nexport interface ContentProduct {\n  id: string\n  title: string\n  featuredImage?: ContentImage | null\n}\n\nexport type ContentVisibility = 'DISCOVERABLE' | 'LINKABLE'\n\nexport interface Content {\n  publicId: string\n  externalId?: string | null\n  image: ContentImage\n  title: string\n  description?: string | null\n  visibility: ContentVisibility[]\n  shareableUrl?: string | null\n  products?: ContentProduct[] | null\n}\n\nexport enum ContentCreateUserErrorCode {\n  DUPLICATE_EXTERNAL_ID = 'DUPLICATE_EXTERNAL_ID',\n  INELIGIBLE_PRODUCTS = 'INELIGIBLE_PRODUCTS',\n}\n\nexport interface ContentCreateUserErrors {\n  code: ContentCreateUserErrorCode\n  message: string\n}\n\nexport interface ContentIdentifierInput {\n  externalId?: string | null\n  publicId?: string | null\n}\n"],"names":["ContentCreateUserErrorCode"],"mappings":"AAyCY,IAAAA,sBAAAA,OACVA,EAAA,wBAAwB,yBACxBA,EAAA,sBAAsB,uBAFZA,IAAAA,KAAA,CAAA,CAAA;"}

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/index7.js";
+import { s as r } from "../../../../../../../../_virtual/index6.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/index5.js";
+import { __module as q } from "../../../../../../../../_virtual/index4.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/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js

@@ -1,4 +1,4 @@
-import { __exports as r } from "../../../../../../../../_virtual/index8.js";
+import { __exports as r } from "../../../../../../../../_virtual/index9.js";
 import { __require as a } from "./dom.js";
 import { __require as o } from "./dom-parser.js";
 var i;

package/dist/shop-minis-react/node_modules/.pnpm/color-string@1.9.1/node_modules/color-string/index.js

@@ -1,4 +1,4 @@
-import { __module as p } from "../../../../../../_virtual/index10.js";
+import { __module as p } from "../../../../../../_virtual/index8.js";
 import { __require as F } from "../../../color-name@1.1.4/node_modules/color-name/index.js";
 import { __require as x } from "../../../simple-swizzle@0.2.2/node_modules/simple-swizzle/index.js";
 var M;

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/index6.js";
+import { l as Q } from "../../../../../../../_virtual/index5.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/index4.js";
+import { __exports as i } from "../../../../../../_virtual/index7.js";
 var c;
 function d() {
   if (c) return i;

package/dist/shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js

@@ -1,4 +1,4 @@
-import { __module as r } from "../../../../../../../_virtual/index9.js";
+import { __module as r } from "../../../../../../../_virtual/index10.js";
 import { __require as o } from "../cjs/use-sync-external-store-shim.production.js";
 import { __require as i } from "../cjs/use-sync-external-store-shim.development.js";
 var e;

package/dist/shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js

@@ -1,6 +1,6 @@
 import S from "../../../../../../../_virtual/window.js";
 import B from "../../../../../../../_virtual/document.js";
-import il from "../../../../../../../_virtual/index2.js";
+import il from "../../../../../../../_virtual/index3.js";
 import ao from "../../../../../../../_virtual/browser-index.js";
 import xe from "../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/extends.js";
 import Kc from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/resolve-url.js";

package/dist/utils/colors.js

@@ -1,4 +1,4 @@
-import o from "../_virtual/index3.js";
+import o from "../_virtual/index2.js";
 const a = (r) => o(r).darken(0.2).isDark();
 export {
   a as isDarkColor

package/dist/utils/image.js

@@ -1,15 +1,51 @@
-import { toUint8Array as o } from "../shop-minis-react/node_modules/.pnpm/js-base64@3.7.7/node_modules/js-base64/base64.js";
-import { thumbHashToDataURL as a } from "../shop-minis-react/node_modules/.pnpm/thumbhash@0.1.1/node_modules/thumbhash/thumbhash.js";
-function n(r) {
-  if (r)
+import { toUint8Array as s } from "../shop-minis-react/node_modules/.pnpm/js-base64@3.7.7/node_modules/js-base64/base64.js";
+import { thumbHashToDataURL as i } from "../shop-minis-react/node_modules/.pnpm/thumbhash@0.1.1/node_modules/thumbhash/thumbhash.js";
+function U(t) {
+  if (t)
     try {
-      const t = o(r);
-      return a(t);
-    } catch (t) {
-      console.warn("Failed to decode thumbhash to data URL", t);
+      const e = s(t);
+      return i(e);
+    } catch (e) {
+      console.warn("Failed to decode thumbhash to data URL", e);
     }
 }
+function f(t) {
+  return new Promise((e, n) => {
+    const r = new FileReader();
+    r.onloadend = () => e(r.result), r.onerror = n, r.readAsDataURL(t);
+  });
+}
+const o = {
+  xxsUrl: 32,
+  xsUrl: 64,
+  sUrl: 128,
+  xxsmUrl: 256,
+  xsmUrl: 384,
+  smUrl: 512,
+  mUrl: 640,
+  lUrl: 1080,
+  xlUrl: 2048
+}, a = 0.05, c = Object.entries(o).sort(
+  ([, t], [, e]) => t - e
+), d = (t) => {
+  for (const [e, n] of c) {
+    const r = n + n * a;
+    if (t <= r) return e;
+  }
+  return "xlUrl";
+}, m = (t, e) => {
+  const r = new RegExp(/\?+/g).test(t) ? "&" : "?";
+  return `${t}${r}width=${e}`;
+}, u = (t) => {
+  if (!t) return "";
+  if (!t.startsWith("https://cdn.shopify.com"))
+    return t;
+  const e = window.innerWidth ?? screen.width, n = d(e);
+  return m(t, o[n]);
+};
 export {
-  n as getThumbhashDataURL
+  f as fileToDataUri,
+  u as getResizedImageUrl,
+  U as getThumbhashDataURL
 };
 //# sourceMappingURL=image.js.map

package/dist/utils/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../src/utils/image.ts"],"sourcesContent":["import {toUint8Array} from 'js-base64'\nimport {thumbHashToDataURL} from 'thumbhash'\n\n/**\n * Converts a thumbhash string to a data URL for use as an image placeholder\n * @param thumbhash Base64 encoded thumbhash string\n * @returns Data URL that can be used as image source or undefined if conversion fails\n */\nexport function getThumbhashDataURL(thumbhash?: string): string | undefined {\n  if (!thumbhash) return\n\n  try {\n    const thumbhashArray = toUint8Array(thumbhash)\n    return thumbHashToDataURL(thumbhashArray)\n  } catch (error) {\n    console.warn('Failed to decode thumbhash to data URL', error)\n  }\n}\n"],"names":["getThumbhashDataURL","thumbhash","thumbhashArray","toUint8Array","thumbHashToDataURL","error"],"mappings":";;AAQO,SAASA,EAAoBC,GAAwC;AAC1E,MAAKA;AAED,QAAA;AACI,YAAAC,IAAiBC,EAAaF,CAAS;AAC7C,aAAOG,EAAmBF,CAAc;AAAA,aACjCG,GAAO;AACN,cAAA,KAAK,0CAA0CA,CAAK;AAAA,IAAA;AAEhE;"}
+{"version":3,"file":"image.js","sources":["../../src/utils/image.ts"],"sourcesContent":["import {toUint8Array} from 'js-base64'\nimport {thumbHashToDataURL} from 'thumbhash'\n\n/**\n * Converts a thumbhash string to a data URL for use as an image placeholder\n * @param thumbhash Base64 encoded thumbhash string\n * @returns Data URL that can be used as image source or undefined if conversion fails\n */\nexport function getThumbhashDataURL(thumbhash?: string): string | undefined {\n  if (!thumbhash) return\n\n  try {\n    const thumbhashArray = toUint8Array(thumbhash)\n    return thumbHashToDataURL(thumbhashArray)\n  } catch (error) {\n    console.warn('Failed to decode thumbhash to data URL', error)\n  }\n}\n\n/** Converts a file to a data URI\n * @param file The file to convert\n * @returns A promise that resolves to the data URI string\n */\nexport function fileToDataUri(file: File): Promise<string> {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader()\n    reader.onloadend = () => resolve(reader.result as string)\n    reader.onerror = reject\n    reader.readAsDataURL(file)\n  })\n}\n\nconst ImageSizes = {\n  xxsUrl: 32,\n  xsUrl: 64,\n  sUrl: 128,\n  xxsmUrl: 256,\n  xsmUrl: 384,\n  smUrl: 512,\n  mUrl: 640,\n  lUrl: 1080,\n  xlUrl: 2048,\n} as const\n\ntype Key = keyof typeof ImageSizes\n\n/**\n * Acceptable offset for image sizes. An image could use the size that is within this offset.\n */\nconst offsetPercentage = 0.05\n\nconst sortedImageSizes = Object.entries(ImageSizes).sort(\n  ([, firstSize], [, secondSize]) => firstSize - secondSize\n)\n\nconst getImageSizeKeyWithSize = (size: number): Key => {\n  for (const [key, imgSize] of sortedImageSizes) {\n    const upperBoundSize = imgSize + imgSize * offsetPercentage\n    if (size <= upperBoundSize) return key as Key\n  }\n\n  return 'xlUrl'\n}\n\nconst resizeImage = (imageUrl: string, width: number) => {\n  const pattern = new RegExp(/\\?+/g)\n  const delimiter = pattern.test(imageUrl) ? '&' : '?'\n  return `${imageUrl}${delimiter}width=${width}`\n}\n\n/**\n * Optimizes Shopify CDN image URLs by adding a width parameter based on screen size\n * @param url The image URL to optimize\n * @returns The optimized URL with width parameter if it's a Shopify CDN image, otherwise returns the original URL\n */\n\nexport const getResizedImageUrl = (url?: string): string => {\n  if (!url) return ''\n\n  // Only process Shopify CDN images\n  if (!url.startsWith('https://cdn.shopify.com')) {\n    return url\n  }\n\n  const width = window.innerWidth ?? screen.width\n\n  const key = getImageSizeKeyWithSize(width)\n\n  return resizeImage(url, ImageSizes[key])\n}\n"],"names":["getThumbhashDataURL","thumbhash","thumbhashArray","toUint8Array","thumbHashToDataURL","error","fileToDataUri","file","resolve","reject","reader","ImageSizes","offsetPercentage","sortedImageSizes","firstSize","secondSize","getImageSizeKeyWithSize","size","key","imgSize","upperBoundSize","resizeImage","imageUrl","width","delimiter","getResizedImageUrl","url"],"mappings":";;AAQO,SAASA,EAAoBC,GAAwC;AAC1E,MAAKA;AAED,QAAA;AACI,YAAAC,IAAiBC,EAAaF,CAAS;AAC7C,aAAOG,EAAmBF,CAAc;AAAA,aACjCG,GAAO;AACN,cAAA,KAAK,0CAA0CA,CAAK;AAAA,IAAA;AAEhE;AAMO,SAASC,EAAcC,GAA6B;AACzD,SAAO,IAAI,QAAQ,CAACC,GAASC,MAAW;AAChC,UAAAC,IAAS,IAAI,WAAW;AAC9B,IAAAA,EAAO,YAAY,MAAMF,EAAQE,EAAO,MAAgB,GACxDA,EAAO,UAAUD,GACjBC,EAAO,cAAcH,CAAI;AAAA,EAAA,CAC1B;AACH;AAEA,MAAMI,IAAa;AAAA,EACjB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT,GAOMC,IAAmB,MAEnBC,IAAmB,OAAO,QAAQF,CAAU,EAAE;AAAA,EAClD,CAAC,CAAG,EAAAG,CAAS,GAAG,GAAGC,CAAU,MAAMD,IAAYC;AACjD,GAEMC,IAA0B,CAACC,MAAsB;AACrD,aAAW,CAACC,GAAKC,CAAO,KAAKN,GAAkB;AACvC,UAAAO,IAAiBD,IAAUA,IAAUP;AACvC,QAAAK,KAAQG,EAAuB,QAAAF;AAAA,EAAA;AAG9B,SAAA;AACT,GAEMG,IAAc,CAACC,GAAkBC,MAAkB;AAEvD,QAAMC,IADU,IAAI,OAAO,MAAM,EACP,KAAKF,CAAQ,IAAI,MAAM;AACjD,SAAO,GAAGA,CAAQ,GAAGE,CAAS,SAASD,CAAK;AAC9C,GAQaE,IAAqB,CAACC,MAAyB;AACtD,MAAA,CAACA,EAAY,QAAA;AAGjB,MAAI,CAACA,EAAI,WAAW,yBAAyB;AACpC,WAAAA;AAGH,QAAAH,IAAQ,OAAO,cAAc,OAAO,OAEpCL,IAAMF,EAAwBO,CAAK;AAEzC,SAAOF,EAAYK,GAAKf,EAAWO,CAAG,CAAC;AACzC;"}

package/package.json

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

package/src/components/atoms/{thumbhash-image.tsx → image.tsx}

@@ -1,22 +1,19 @@
+/* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import {ImgHTMLAttributes, useCallback, useMemo, memo, useState} from 'react'
 
 import {cn} from '../../lib/utils'
-import {getThumbhashDataURL} from '../../utils/image'
+import {getThumbhashDataURL, getResizedImageUrl} from '../../utils'
 
-type ThumbhashImageProps = ImgHTMLAttributes<HTMLImageElement> & {
-  src: string
-  thumbhash: string
-  alt?: string | null
+type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+  src?: string
+  thumbhash?: string | null
   aspectRatio?: number | string
 }
 
-export const ThumbhashImage = memo(function ThumbhashImage(
-  props: ThumbhashImageProps
-) {
+export const Image = memo(function Image(props: ImageProps) {
   const {
     src,
-    alt,
     thumbhash,
     onLoad,
     className,
@@ -27,7 +24,7 @@ export const ThumbhashImage = memo(function ThumbhashImage(
 
   const [isLoaded, setIsLoaded] = useState(false)
 
-  const dataURL = useMemo(
+  const thumbhashDataURL = useMemo(
     () => getThumbhashDataURL(thumbhash ?? undefined),
     [thumbhash]
   )
@@ -40,24 +37,27 @@ export const ThumbhashImage = memo(function ThumbhashImage(
     [onLoad]
   )
 
+  const resizedImageSrc = useMemo(() => getResizedImageUrl(src), [src])
+
   return (
     <div
       className={cn('relative w-full ', className)}
       style={{
         ...style,
         aspectRatio,
-        backgroundImage: dataURL ? `url(${dataURL})` : undefined,
+        backgroundImage: thumbhashDataURL
+          ? `url(${thumbhashDataURL})`
+          : undefined,
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
     >
       <img
         className={cn(
-          'absolute inset-0 w-full h-full opacity-0 object-cover',
+          'absolute inset-0 opacity-0 object-cover',
           isLoaded && 'opacity-100'
         )}
-        src={src}
-        alt={alt}
+        src={resizedImageSrc}
         onLoad={handleLoad}
         {...restProps}
       />

package/src/components/commerce/merchant-card.tsx

@@ -14,7 +14,7 @@ import {
   normalizeRating,
 } from '../../utils'
 import {isDarkColor} from '../../utils/colors'
-import {ThumbhashImage} from '../atoms/thumbhash-image'
+import {Image} from '../atoms/image'
 import {Touchable} from '../atoms/touchable'
 
 interface MerchantCardContextValue {
@@ -100,7 +100,7 @@ function MerchantCardImage({
 
   if (thumbhash) {
     return (
-      <ThumbhashImage
+      <Image
         data-slot="merchant-card-image"
         src={src}
         alt={alt}