@shopify/shop-minis-react 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,15 +1,15 @@
 import { DATA_NAVIGATION_TYPE_ATTRIBUTE as o, NAVIGATION_TYPES as t } from "./types/index.js";
 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 x, ProductCardPrice as c, ProductCardTitle as d } from "./components/commerce/product-card.js";
+import { ProductCard as n, ProductCardBadge as m, ProductCardContainer as s, ProductCardFavoriteButton as l, ProductCardImage as u, ProductCardImageContainer as f, ProductCardInfo as x, ProductCardPrice as c, 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 A, MerchantCardHeader as P, MerchantCardInfo as h, MerchantCardName as T, MerchantCardRating as I } from "./components/commerce/merchant-card.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 B, SearchInput as E, SearchProvider as F, 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 O } from "./components/navigation/transition-link.js";
+import { ProductCardSkeleton as R } from "./components/commerce/product-card-skeleton.js";
+import { MerchantCardSkeleton as w } from "./components/commerce/merchant-card-skeleton.js";
+import { QuantitySelector as F } from "./components/commerce/quantity-selector.js";
+import { Search as b, SearchInput as k, SearchProvider as E, SearchResultsList as L } from "./components/commerce/search.js";
+import { ImageContentWrapper as O } from "./components/content/image-content-wrapper.js";
+import { MinisRouter as G } 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 Q } from "./components/atoms/icon-button.js";
@@ -20,28 +20,28 @@ import { AlertDialogAtom as er } from "./components/atoms/alert-dialog.js";
 import { List as tr } from "./components/atoms/list.js";
 import { VideoPlayer as ir } from "./components/atoms/video-player.js";
 import { TextInput as nr } from "./components/atoms/text-input.js";
-import { Accordion as lr, AccordionContent as sr, AccordionItem as ur, AccordionTrigger as fr } from "./components/ui/accordion.js";
+import { Accordion as sr, AccordionContent as lr, AccordionItem as ur, AccordionTrigger as fr } from "./components/ui/accordion.js";
 import { Alert as cr, AlertDescription as dr, AlertTitle as Cr } from "./components/ui/alert.js";
-import { AlertDialog as Sr, AlertDialogAction as Dr, AlertDialogCancel as Ar, AlertDialogContent as Pr, AlertDialogDescription as hr, AlertDialogFooter as Tr, AlertDialogHeader as Ir, AlertDialogOverlay as Rr, AlertDialogPortal as vr, AlertDialogTitle as wr, AlertDialogTrigger as Mr } from "./components/ui/alert-dialog.js";
-import { Avatar as br, AvatarFallback as kr, AvatarImage as Br } from "./components/ui/avatar.js";
-import { Badge as Fr, badgeVariants as Lr } from "./components/ui/badge.js";
-import { Card as yr, CardAction as Gr, CardContent as Hr, CardDescription as Vr, CardFooter as Or, CardHeader as zr, CardTitle as _r } from "./components/ui/card.js";
+import { AlertDialog as Sr, AlertDialogAction as Dr, AlertDialogCancel as Ar, AlertDialogContent as Pr, AlertDialogDescription as hr, AlertDialogFooter as Tr, AlertDialogHeader as Ir, AlertDialogOverlay as Mr, AlertDialogPortal as Rr, AlertDialogTitle as vr, AlertDialogTrigger as wr } from "./components/ui/alert-dialog.js";
+import { Avatar as Fr, AvatarFallback as Ur, AvatarImage as br } from "./components/ui/avatar.js";
+import { Badge as Er, badgeVariants as Lr } from "./components/ui/badge.js";
+import { Card as Or, CardAction as yr, CardContent as Gr, CardDescription as Hr, CardFooter as Vr, CardHeader as zr, CardTitle as _r } from "./components/ui/card.js";
 import { Carousel as Yr, CarouselContent as Kr, CarouselItem as Qr, CarouselNext as jr, CarouselPrevious as qr } from "./components/ui/carousel.js";
 import { Checkbox as Xr } from "./components/ui/checkbox.js";
 import { Dialog as $r, DialogClose as re, DialogContent as ee, DialogDescription as oe, DialogFooter as te, DialogHeader as ae, DialogOverlay as ie, DialogPortal as pe, DialogTitle as ne, DialogTrigger as me } from "./components/ui/dialog.js";
-import { Drawer as se, DrawerClose as ue, DrawerContent as fe, DrawerDescription as xe, DrawerFooter as ce, DrawerHeader as de, DrawerOverlay as Ce, DrawerPortal as ge, DrawerTitle as Se, DrawerTrigger as De } from "./components/ui/drawer.js";
+import { Drawer as le, DrawerClose as ue, DrawerContent as fe, DrawerDescription as xe, DrawerFooter as ce, DrawerHeader as de, DrawerOverlay as Ce, DrawerPortal as ge, DrawerTitle as Se, DrawerTrigger as De } from "./components/ui/drawer.js";
 import { Input as Pe } from "./components/ui/input.js";
 import { Label as Te } from "./components/ui/label.js";
-import { Progress as Re } from "./components/ui/progress.js";
-import { RadioGroup as we, RadioGroupItem as Me } from "./components/ui/radio-group.js";
-import { ResizableHandle as be, ResizablePanel as ke, ResizablePanelGroup as Be } from "./components/ui/resizable.js";
-import { ScrollArea as Fe, ScrollBar as Le } from "./components/ui/scroll-area.js";
-import { Select as ye, SelectContent as Ge, SelectGroup as He, SelectItem as Ve, SelectLabel as Oe, SelectScrollDownButton as ze, SelectScrollUpButton as _e, SelectSeparator as We, SelectTrigger as Ye, SelectValue as Ke } from "./components/ui/select.js";
+import { Progress as Me } from "./components/ui/progress.js";
+import { RadioGroup as ve, RadioGroupItem as we } from "./components/ui/radio-group.js";
+import { ResizableHandle as Fe, ResizablePanel as Ue, ResizablePanelGroup as be } from "./components/ui/resizable.js";
+import { ScrollArea as Ee, ScrollBar as Le } from "./components/ui/scroll-area.js";
+import { Select as Oe, SelectContent as ye, SelectGroup as Ge, SelectItem as He, SelectLabel as Ve, SelectScrollDownButton as ze, SelectScrollUpButton as _e, SelectSeparator as We, SelectTrigger as Ye, SelectValue as Ke } from "./components/ui/select.js";
 import { Separator as je } from "./components/ui/separator.js";
 import { Sheet as Je, SheetClose as Xe, SheetContent as Ze, SheetDescription as $e, SheetFooter as ro, SheetHeader as eo, SheetTitle as oo, SheetTrigger as to } from "./components/ui/sheet.js";
 import { Toaster as io } from "./components/ui/sonner.js";
 import { Skeleton as no } from "./components/ui/skeleton.js";
-import { useRecentProducts as lo } from "./hooks/user/useRecentProducts.js";
+import { useRecentProducts as so } from "./hooks/user/useRecentProducts.js";
 import { useRecentShops as uo } from "./hooks/user/useRecentShops.js";
 import { useSavedProducts as xo } from "./hooks/user/useSavedProducts.js";
 import { useSavedProductsActions as Co } from "./hooks/user/useSavedProductsActions.js";
@@ -49,14 +49,14 @@ import { useFollowedShops as So } from "./hooks/user/useFollowedShops.js";
 import { useFollowedShopsActions as Ao } from "./hooks/user/useFollowedShopsActions.js";
 import { useCurrentUser as ho } from "./hooks/user/useCurrentUser.js";
 import { useOrders as Io } from "./hooks/user/useOrders.js";
-import { useBuyerAttributes as vo } from "./hooks/user/useBuyerAttributes.js";
-import { useGenerateUserToken as Mo } from "./hooks/user/useGenerateUserToken.js";
-import { useProductListActions as bo } from "./hooks/product/useProductListActions.js";
-import { useProductLists as Bo } from "./hooks/product/useProductLists.js";
-import { useProductList as Fo } from "./hooks/product/useProductList.js";
+import { useBuyerAttributes as Ro } from "./hooks/user/useBuyerAttributes.js";
+import { useGenerateUserToken as wo } from "./hooks/user/useGenerateUserToken.js";
+import { useProductListActions as Fo } from "./hooks/product/useProductListActions.js";
+import { useProductLists as bo } from "./hooks/product/useProductLists.js";
+import { useProductList as Eo } from "./hooks/product/useProductList.js";
 import { useProduct as No } from "./hooks/product/useProduct.js";
-import { useProducts as Go } from "./hooks/product/useProducts.js";
-import { useProductVariants as Vo } from "./hooks/product/useProductVariants.js";
+import { useProducts as yo } from "./hooks/product/useProducts.js";
+import { useProductVariants as Ho } from "./hooks/product/useProductVariants.js";
 import { useProductMedia as zo } from "./hooks/product/useProductMedia.js";
 import { useProductSearch as Wo } from "./hooks/product/useProductSearch.js";
 import { useRecommendedProducts as Ko } from "./hooks/product/useRecommendedProducts.js";
@@ -68,7 +68,7 @@ import { useImageUpload as ot } from "./hooks/storage/useImageUpload.js";
 import { useShopNavigation as at } from "./hooks/navigation/useShopNavigation.js";
 import { useCloseMini as pt } from "./hooks/navigation/useCloseMini.js";
 import { useDeeplink as mt } from "./hooks/navigation/useDeeplink.js";
-import { useNavigateWithTransition as st } from "./hooks/navigation/useNavigateWithTransition.js";
+import { useNavigateWithTransition as lt } from "./hooks/navigation/useNavigateWithTransition.js";
 import { useShop as ft } from "./hooks/shop/useShop.js";
 import { useShopCartActions as ct } from "./hooks/shop/useShopCartActions.js";
 import { useRecommendedShops as Ct } from "./hooks/shop/useRecommendedShops.js";
@@ -76,19 +76,23 @@ import { useCreateImageContent as St } from "./hooks/content/useCreateImageConte
 import { useErrorToast as At } from "./hooks/util/useErrorToast.js";
 import { useErrorScreen as ht } from "./hooks/util/useErrorScreen.js";
 import { useShare as It } from "./hooks/util/useShare.js";
-import { useImagePicker as vt } from "./hooks/util/useImagePicker.js";
-import { useKeyboardAvoidingView as Mt } from "./hooks/util/useKeyboardAvoidingView.js";
-import { MiniEntityNotFoundError as bt, MiniError as kt, MiniNetworkError as Bt, formatError as Et } from "./utils/errors.js";
-import { extractBrandTheme as Lt, formatReviewCount as Nt, getFeaturedImages as yt, normalizeRating as Gt } from "./utils/merchant-card.js";
-import { parseUrl as Vt } from "./utils/parseUrl.js";
-import { fileToDataUri as zt, getResizedImageUrl as _t, getThumbhashDataURL as Wt } from "./utils/image.js";
-import { UserState as Kt, UserTokenGenerateUserErrorCode as Qt } from "./shop-minis-platform/src/types/user.js";
-import { ContentCreateUserErrorCode as qt } from "./shop-minis-platform/src/types/content.js";
-import { Consent as Xt, ConsentStatus as Zt } from "./shop-minis-platform/src/types/permissions.js";
-import { Social as ra } from "./shop-minis-platform/src/types/share.js";
+import { useImagePicker as Rt } from "./hooks/util/useImagePicker.js";
+import { useKeyboardAvoidingView as wt } from "./hooks/util/useKeyboardAvoidingView.js";
+import { useOnMiniFocus as Ft } from "./hooks/events/useOnMiniFocus.js";
+import { useOnMiniBlur as bt } from "./hooks/events/useOnMiniBlur.js";
+import { useOnMiniClose as Et } from "./hooks/events/useOnMiniClose.js";
+import { useOnAppStateChange as Nt } from "./hooks/events/useOnAppStateChange.js";
+import { MiniEntityNotFoundError as yt, MiniError as Gt, MiniNetworkError as Ht, formatError as Vt } from "./utils/errors.js";
+import { extractBrandTheme as _t, formatReviewCount as Wt, getFeaturedImages as Yt, normalizeRating as Kt } from "./utils/merchant-card.js";
+import { parseUrl as jt } from "./utils/parseUrl.js";
+import { fileToDataUri as Jt, getResizedImageUrl as Xt, getThumbhashDataURL as Zt } from "./utils/image.js";
+import { UserState as ra, UserTokenGenerateUserErrorCode as ea } from "./shop-minis-platform/src/types/user.js";
+import { ContentCreateUserErrorCode as ta } from "./shop-minis-platform/src/types/content.js";
+import { Consent as ia, ConsentStatus as pa } from "./shop-minis-platform/src/types/permissions.js";
+import { Social as ma } from "./shop-minis-platform/src/types/share.js";
 export {
-  lr as Accordion,
-  sr as AccordionContent,
+  sr as Accordion,
+  lr as AccordionContent,
   ur as AccordionItem,
   fr as AccordionTrigger,
   cr as Alert,
@@ -101,21 +105,21 @@ export {
   hr as AlertDialogDescription,
   Tr as AlertDialogFooter,
   Ir as AlertDialogHeader,
-  Rr as AlertDialogOverlay,
-  vr as AlertDialogPortal,
-  wr as AlertDialogTitle,
-  Mr as AlertDialogTrigger,
+  Mr as AlertDialogOverlay,
+  Rr as AlertDialogPortal,
+  vr as AlertDialogTitle,
+  wr as AlertDialogTrigger,
   Cr as AlertTitle,
-  br as Avatar,
-  kr as AvatarFallback,
-  Br as AvatarImage,
-  Fr as Badge,
+  Fr as Avatar,
+  Ur as AvatarFallback,
+  br as AvatarImage,
+  Er as Badge,
   _ as Button,
-  yr as Card,
-  Gr as CardAction,
-  Hr as CardContent,
-  Vr as CardDescription,
-  Or as CardFooter,
+  Or as Card,
+  yr as CardAction,
+  Gr as CardContent,
+  Hr as CardDescription,
+  Vr as CardFooter,
   zr as CardHeader,
   _r as CardTitle,
   Yr as Carousel,
@@ -124,9 +128,9 @@ export {
   jr as CarouselNext,
   qr as CarouselPrevious,
   Xr as Checkbox,
-  Xt as Consent,
-  Zt as ConsentStatus,
-  qt as ContentCreateUserErrorCode,
+  ia as Consent,
+  pa as ConsentStatus,
+  ta as ContentCreateUserErrorCode,
   o as DATA_NAVIGATION_TYPE_ATTRIBUTE,
   $r as Dialog,
   re as DialogClose,
@@ -138,7 +142,7 @@ export {
   pe as DialogPortal,
   ne as DialogTitle,
   me as DialogTrigger,
-  se as Drawer,
+  le as Drawer,
   ue as DrawerClose,
   fe as DrawerContent,
   xe as DrawerDescription,
@@ -151,7 +155,7 @@ export {
   Y as FavoriteButton,
   Q as IconButton,
   q as Image,
-  y as ImageContentWrapper,
+  O as ImageContentWrapper,
   Pe as Input,
   Te as Label,
   tr as List,
@@ -162,42 +166,42 @@ export {
   h as MerchantCardInfo,
   T as MerchantCardName,
   I as MerchantCardRating,
-  M as MerchantCardSkeleton,
-  bt as MiniEntityNotFoundError,
-  kt as MiniError,
-  Bt as MiniNetworkError,
+  w as MerchantCardSkeleton,
+  yt as MiniEntityNotFoundError,
+  Gt as MiniError,
+  Ht as MiniNetworkError,
   i as MinisContainer,
-  H as MinisRouter,
+  G as MinisRouter,
   t as NAVIGATION_TYPES,
   n as ProductCard,
   m as ProductCardBadge,
-  l as ProductCardContainer,
-  s as ProductCardFavoriteButton,
+  s as ProductCardContainer,
+  l as ProductCardFavoriteButton,
   u as ProductCardImage,
   f as ProductCardImageContainer,
   x as ProductCardInfo,
   c as ProductCardPrice,
-  v as ProductCardSkeleton,
+  R as ProductCardSkeleton,
   d as ProductCardTitle,
   g as ProductLink,
-  Re as Progress,
-  b as QuantitySelector,
-  we as RadioGroup,
-  Me as RadioGroupItem,
-  be as ResizableHandle,
-  ke as ResizablePanel,
-  Be as ResizablePanelGroup,
-  Fe as ScrollArea,
+  Me as Progress,
+  F as QuantitySelector,
+  ve as RadioGroup,
+  we as RadioGroupItem,
+  Fe as ResizableHandle,
+  Ue as ResizablePanel,
+  be as ResizablePanelGroup,
+  Ee as ScrollArea,
   Le as ScrollBar,
-  B as Search,
-  E as SearchInput,
-  F as SearchProvider,
+  b as Search,
+  k as SearchInput,
+  E as SearchProvider,
   L as SearchResultsList,
-  ye as Select,
-  Ge as SelectContent,
-  He as SelectGroup,
-  Ve as SelectItem,
-  Oe as SelectLabel,
+  Oe as Select,
+  ye as SelectContent,
+  Ge as SelectGroup,
+  He as SelectItem,
+  Ve as SelectLabel,
   ze as SelectScrollDownButton,
   _e as SelectScrollUpButton,
   We as SelectSeparator,
@@ -213,26 +217,26 @@ export {
   oo as SheetTitle,
   to as SheetTrigger,
   no as Skeleton,
-  ra as Social,
+  ma as Social,
   nr as TextInput,
   io as Toaster,
   X as Touchable,
-  O as TransitionLink,
-  Kt as UserState,
-  Qt as UserTokenGenerateUserErrorCode,
+  V as TransitionLink,
+  ra as UserState,
+  ea as UserTokenGenerateUserErrorCode,
   ir as VideoPlayer,
   Lr as badgeVariants,
-  Lt as extractBrandTheme,
-  zt as fileToDataUri,
-  Et as formatError,
-  Nt as formatReviewCount,
-  yt as getFeaturedImages,
-  _t as getResizedImageUrl,
-  Wt as getThumbhashDataURL,
-  Gt as normalizeRating,
-  Vt as parseUrl,
+  _t as extractBrandTheme,
+  Jt as fileToDataUri,
+  Vt as formatError,
+  Wt as formatReviewCount,
+  Yt as getFeaturedImages,
+  Xt as getResizedImageUrl,
+  Zt as getThumbhashDataURL,
+  Kt as normalizeRating,
+  jt as parseUrl,
   Zo as useAsyncStorage,
-  vo as useBuyerAttributes,
+  Ro as useBuyerAttributes,
   pt as useCloseMini,
   St as useCreateImageContent,
   Jo as useCuratedProducts,
@@ -242,22 +246,26 @@ export {
   At as useErrorToast,
   So as useFollowedShops,
   Ao as useFollowedShopsActions,
-  Mo as useGenerateUserToken,
-  vt as useImagePicker,
+  wo as useGenerateUserToken,
+  Rt as useImagePicker,
   ot as useImageUpload,
-  Mt as useKeyboardAvoidingView,
-  st as useNavigateWithTransition,
+  wt as useKeyboardAvoidingView,
+  lt as useNavigateWithTransition,
+  Nt as useOnAppStateChange,
+  bt as useOnMiniBlur,
+  Et as useOnMiniClose,
+  Ft as useOnMiniFocus,
   Io as useOrders,
   jo as usePopularProducts,
   No as useProduct,
-  Fo as useProductList,
-  bo as useProductListActions,
-  Bo as useProductLists,
+  Eo as useProductList,
+  Fo as useProductListActions,
+  bo as useProductLists,
   zo as useProductMedia,
   Wo as useProductSearch,
-  Vo as useProductVariants,
-  Go as useProducts,
-  lo as useRecentProducts,
+  Ho as useProductVariants,
+  yo as useProducts,
+  so as useRecentProducts,
   uo as useRecentShops,
   Ko as useRecommendedProducts,
   Ct as useRecommendedShops,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

package/package.json

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

package/src/components/atoms/image.tsx

@@ -1,12 +1,20 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import {ImgHTMLAttributes, useCallback, useMemo, memo, useState} from 'react'
+import {
+  ImgHTMLAttributes,
+  useCallback,
+  useMemo,
+  memo,
+  useState,
+  useEffect,
+} from 'react'
 
 import {cn} from '../../lib/utils'
 import {getThumbhashDataURL, getResizedImageUrl} from '../../utils'
 
 type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
   src?: string
+  file?: File
   thumbhash?: string | null
   aspectRatio?: number | string
 }
@@ -14,6 +22,7 @@ type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
 export const Image = memo(function Image(props: ImageProps) {
   const {
     src,
+    file,
     thumbhash,
     onLoad,
     className,
@@ -23,6 +32,23 @@ export const Image = memo(function Image(props: ImageProps) {
   } = props
 
   const [isLoaded, setIsLoaded] = useState(false)
+  const [blobUrl, setBlobUrl] = useState<string | null>(null)
+
+  // Create and manage blob URL for File objects
+  useEffect(() => {
+    if (!file) {
+      setBlobUrl(null)
+      return
+    }
+
+    const url = URL.createObjectURL(file)
+    setBlobUrl(url)
+
+    // Cleanup on unmount or when file changes
+    return () => {
+      URL.revokeObjectURL(url)
+    }
+  }, [file])
 
   const thumbhashDataURL = useMemo(
     () => getThumbhashDataURL(thumbhash ?? undefined),
@@ -37,7 +63,11 @@ export const Image = memo(function Image(props: ImageProps) {
     [onLoad]
   )
 
-  const resizedImageSrc = useMemo(() => getResizedImageUrl(src), [src])
+  // Use blob URL if file is provided, otherwise use src
+  const imageSrc = useMemo(() => {
+    if (blobUrl) return blobUrl
+    return getResizedImageUrl(src)
+  }, [blobUrl, src])
 
   return (
     <div
@@ -54,10 +84,10 @@ export const Image = memo(function Image(props: ImageProps) {
     >
       <img
         className={cn(
-          'absolute inset-0 opacity-0 object-cover',
+          'absolute inset-0 opacity-0 size-full object-cover',
           isLoaded && 'opacity-100'
         )}
-        src={resizedImageSrc}
+        src={imageSrc}
         onLoad={handleLoad}
         {...restProps}
       />

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

@@ -121,7 +121,7 @@ function ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {
           alt={alt}
           aspectRatio={1}
           thumbhash={thumbhash}
-          className={cn('w-full h-full object-cover', className)}
+          className={cn('size-full object-cover', className)}
           {...props}
         />
       ) : (
@@ -129,7 +129,7 @@ function ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {
           data-slot="product-card-image"
           src={src}
           alt={alt}
-          className={cn('w-full h-full', className)}
+          className={cn('size-full', className)}
           {...props}
         />
       )
@@ -140,7 +140,7 @@ function ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {
   )
 
   return (
-    <div className="bg-gray-100 flex items-center justify-center w-full h-full">
+    <div className="bg-gray-100 flex items-center justify-center size-full">
       {src ? (
         renderImageElement(src)
       ) : (

package/src/hooks/events/useOnAppStateChange.ts

@@ -0,0 +1,20 @@
+import {useEffect, useRef} from 'react'
+
+import {type AppStateChangePayload} from '@shopify/shop-minis-platform/events'
+
+export function useOnAppStateChange(
+  callback: (payload: AppStateChangePayload) => void
+) {
+  // Using a ref allows the callback to be updated without triggering a re-render
+  // This makes the hook nicer to use because developers don't need useCallback
+  const callbackRef = useRef(callback)
+  callbackRef.current = callback
+
+  useEffect(() => {
+    const listenerId = window.minisEvents.on('APP_STATE_CHANGE', payload => {
+      callbackRef.current(payload)
+    })
+
+    return () => window.minisEvents.off(listenerId)
+  }, [])
+}

package/src/hooks/events/useOnMiniBlur.ts

@@ -0,0 +1,16 @@
+import {useEffect, useRef} from 'react'
+
+export function useOnMiniBlur(callback: () => void) {
+  // Using a ref allows the callback to be updated without triggering a re-render
+  // This makes the hook nicer to use because developers don't need useCallback
+  const callbackRef = useRef(callback)
+  callbackRef.current = callback
+
+  useEffect(() => {
+    const listenerId = window.minisEvents.on('MINI_APP_BLUR', () => {
+      callbackRef.current()
+    })
+
+    return () => window.minisEvents.off(listenerId)
+  }, [])
+}

package/src/hooks/events/useOnMiniClose.ts

@@ -0,0 +1,16 @@
+import {useEffect, useRef} from 'react'
+
+export function useOnMiniClose(callback: () => void) {
+  // Using a ref allows the callback to be updated without triggering a re-render
+  // This makes the hook nicer to use because developers don't need useCallback
+  const callbackRef = useRef(callback)
+  callbackRef.current = callback
+
+  useEffect(() => {
+    const listenerId = window.minisEvents.on('MINI_APP_CLOSE', () => {
+      callbackRef.current()
+    })
+
+    return () => window.minisEvents.off(listenerId)
+  }, [])
+}

package/src/hooks/events/useOnMiniFocus.ts

@@ -0,0 +1,16 @@
+import {useEffect, useRef} from 'react'
+
+export function useOnMiniFocus(callback: () => void) {
+  // Using a ref allows the callback to be updated without triggering a re-render
+  // This makes the hook nicer to use because developers don't need useCallback
+  const callbackRef = useRef(callback)
+  callbackRef.current = callback
+
+  useEffect(() => {
+    const listenerId = window.minisEvents.on('MINI_APP_FOCUS', () => {
+      callbackRef.current()
+    })
+
+    return () => window.minisEvents.off(listenerId)
+  }, [])
+}

package/src/hooks/index.ts

@@ -48,3 +48,9 @@ export * from './util/useErrorScreen'
 export * from './util/useShare'
 export * from './util/useImagePicker'
 export * from './util/useKeyboardAvoidingView'
+
+// - Event Hooks
+export * from './events/useOnMiniFocus'
+export * from './events/useOnMiniBlur'
+export * from './events/useOnMiniClose'
+export * from './events/useOnAppStateChange'