@shopify/shop-minis-react 0.9.0 → 0.11.0

package/dist/components/atoms/safe-area.js

@@ -0,0 +1,37 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useSafeArea as g } from "../../hooks/util/useSafeArea.js";
+const m = ["top", "right", "bottom", "left"], d = {
+  top: "var(--safe-area-inset-top, 0px)",
+  right: "var(--safe-area-inset-right, 0px)",
+  bottom: "var(--safe-area-inset-bottom, 0px)",
+  left: "var(--safe-area-inset-left, 0px)"
+}, c = {
+  padding: {
+    top: "paddingTop",
+    right: "paddingRight",
+    bottom: "paddingBottom",
+    left: "paddingLeft"
+  },
+  margin: {
+    top: "marginTop",
+    right: "marginRight",
+    bottom: "marginBottom",
+    left: "marginLeft"
+  }
+};
+function x({
+  edges: e = m,
+  mode: a = "padding",
+  className: i,
+  style: r,
+  children: n
+}) {
+  const o = { ...r }, s = c[a], p = g();
+  for (const t of e)
+    p?.[t] > 0 && (o[s[t]] = d[t]);
+  return /* @__PURE__ */ f("div", { className: i, style: o, children: n });
+}
+export {
+  x as SafeArea
+};
+//# sourceMappingURL=safe-area.js.map

package/dist/components/atoms/safe-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-area.js","sources":["../../../src/components/atoms/safe-area.tsx"],"sourcesContent":["import {useSafeArea} from '../../hooks/util/useSafeArea'\n\ntype Edge = 'top' | 'right' | 'bottom' | 'left'\n\nexport interface SafeAreaDocProps {\n  /** Which edges to apply safe area insets to. Defaults to all edges. */\n  edges?: Edge[]\n  /** Whether to apply insets as padding or margin. Defaults to 'padding'. */\n  mode?: 'padding' | 'margin'\n  /** Additional CSS classes */\n  className?: string\n  /** Additional inline styles */\n  style?: React.CSSProperties\n  /** Content to render inside the safe area */\n  children?: React.ReactNode\n}\n\nconst ALL_EDGES: Edge[] = ['top', 'right', 'bottom', 'left']\n\nconst CSS_VAR_MAP: {[key in Edge]: string} = {\n  top: 'var(--safe-area-inset-top, 0px)',\n  right: 'var(--safe-area-inset-right, 0px)',\n  bottom: 'var(--safe-area-inset-bottom, 0px)',\n  left: 'var(--safe-area-inset-left, 0px)',\n}\n\nconst STYLE_KEY_MAP: {[key in 'padding' | 'margin']: {[edge in Edge]: string}} =\n  {\n    padding: {\n      top: 'paddingTop',\n      right: 'paddingRight',\n      bottom: 'paddingBottom',\n      left: 'paddingLeft',\n    },\n    margin: {\n      top: 'marginTop',\n      right: 'marginRight',\n      bottom: 'marginBottom',\n      left: 'marginLeft',\n    },\n  }\n\n/**\n * A container that applies safe area insets as padding or margin.\n *\n * Ensures content isn't hidden behind system UI (home indicator,\n * navigation bar, etc).\n *\n * Uses CSS custom properties (`--safe-area-inset-*`) injected by the\n * Shop app, which work reliably on both iOS and Android.\n *\n * Only applies inline padding/margin for edges where the safe area\n * inset is non-zero, so your Tailwind classes and styles are preserved\n * on edges that don't need safe area handling.\n *\n * @example\n * ```tsx\n * <SafeArea edges={['bottom']}>\n *   <footer>Sticky footer content</footer>\n * </SafeArea>\n * ```\n *\n * @example\n * ```tsx\n * <SafeArea className=\"pt-12 px-4\">\n *   <div>Custom top/side padding, safe area bottom</div>\n * </SafeArea>\n * ```\n */\nexport function SafeArea({\n  edges = ALL_EDGES,\n  mode = 'padding',\n  className,\n  style: styleProp,\n  children,\n}: SafeAreaDocProps) {\n  const style: React.CSSProperties = {...styleProp}\n  const keys = STYLE_KEY_MAP[mode]\n  const insets = useSafeArea()\n\n  for (const edge of edges) {\n    if (insets?.[edge] > 0) {\n      ;(style as any)[keys[edge]] = CSS_VAR_MAP[edge]\n    }\n  }\n\n  return (\n    <div className={className} style={style}>\n      {children}\n    </div>\n  )\n}\n"],"names":["ALL_EDGES","CSS_VAR_MAP","STYLE_KEY_MAP","SafeArea","edges","mode","className","styleProp","children","style","keys","insets","useSafeArea","edge","jsx"],"mappings":";;AAiBA,MAAMA,IAAoB,CAAC,OAAO,SAAS,UAAU,MAAM,GAErDC,IAAuC;AAAA,EAC3C,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR,GAEMC,IACJ;AAAA,EACE,SAAS;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAEV;AA6BK,SAASC,EAAS;AAAA,EACvB,OAAAC,IAAQJ;AAAA,EACR,MAAAK,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,OAAOC;AAAA,EACP,UAAAC;AACF,GAAqB;AACb,QAAAC,IAA6B,EAAC,GAAGF,EAAS,GAC1CG,IAAOR,EAAcG,CAAI,GACzBM,IAASC,EAAY;AAE3B,aAAWC,KAAQT;AACb,IAAAO,IAASE,CAAI,IAAI,MACjBJ,EAAcC,EAAKG,CAAI,CAAC,IAAIZ,EAAYY,CAAI;AAIlD,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAAR,GAAsB,OAAAG,GACxB,UAAAD,EACH,CAAA;AAEJ;"}

package/dist/hooks/util/useSafeArea.js

@@ -0,0 +1,8 @@
+const t = { top: 0, right: 0, bottom: 0, left: 0 };
+function e() {
+  return window.minisParams?.safeAreaInsets ?? t;
+}
+export {
+  e as useSafeArea
+};
+//# sourceMappingURL=useSafeArea.js.map

package/dist/hooks/util/useSafeArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeArea.js","sources":["../../../src/hooks/util/useSafeArea.ts"],"sourcesContent":["import type {SafeAreaInsets} from '@shopify/shop-minis-platform'\n\nconst DEFAULT_INSETS: SafeAreaInsets = {top: 0, right: 0, bottom: 0, left: 0}\n\n/**\n * Returns the safe area insets for the current device.\n *\n * These values represent the areas of the screen that are obscured by\n * system UI (home indicator, navigation bar, etc). Use them to ensure\n * content isn't hidden behind system chrome.\n *\n * The values are also available as CSS custom properties:\n * `--safe-area-inset-top`, `--safe-area-inset-right`,\n * `--safe-area-inset-bottom`, `--safe-area-inset-left`\n *\n * @example\n * ```tsx\n * const {bottom} = useSafeArea()\n * return <div style={{paddingBottom: bottom}}>Content</div>\n * ```\n */\nexport function useSafeArea(): SafeAreaInsets {\n  return window.minisParams?.safeAreaInsets ?? DEFAULT_INSETS\n}\n"],"names":["DEFAULT_INSETS","useSafeArea"],"mappings":"AAEA,MAAMA,IAAiC,EAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAC;AAmBrE,SAASC,IAA8B;AACrC,SAAA,OAAO,aAAa,kBAAkBD;AAC/C;"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { DATA_NAVIGATION_TYPE_ATTRIBUTE as o, NAVIGATION_TYPES as t } from "./types/index.js";
-import { MinisContainer as i } from "./components/MinisContainer.js";
+import { MinisContainer as p } from "./components/MinisContainer.js";
 import { AddToCartButton as m } from "./components/commerce/add-to-cart.js";
 import { BuyNowButton as s } from "./components/commerce/buy-now.js";
 import { ProductCard as u, ProductCardBadge as f, ProductCardContainer as x, ProductCardFavoriteButton as c, ProductCardImage as d, ProductCardImageContainer as C, ProductCardInfo as g, ProductCardPrice as S, ProductCardReviewStars as A, ProductCardTitle as D } from "./components/commerce/product-card.js";
@@ -18,159 +18,161 @@ import { IconButton as X } from "./components/atoms/icon-button.js";
 import { Image as rr } from "./components/atoms/image.js";
 import { Touchable as or } from "./components/atoms/touchable.js";
 import { LongPressDetector as ar } from "./components/atoms/long-press-detector.js";
-import { AlertDialogAtom as pr } from "./components/atoms/alert-dialog.js";
+import { AlertDialogAtom as ir } from "./components/atoms/alert-dialog.js";
 import { List as nr } from "./components/atoms/list.js";
 import { VideoPlayer as lr } from "./components/atoms/video-player.js";
 import { TextInput as fr } from "./components/atoms/text-input.js";
 import { ContentWrapper as cr } from "./components/atoms/content-wrapper.js";
 import { ProductVariantPrice as Cr } from "./components/atoms/product-variant-price.js";
-import { StaticArea as Sr } from "./components/atoms/static-area.js";
-import { Accordion as Dr, AccordionContent as Pr, AccordionItem as Tr, AccordionTrigger as hr } from "./components/ui/accordion.js";
-import { Alert as Rr, AlertDescription as vr, AlertTitle as wr } from "./components/ui/alert.js";
-import { AlertDialog as Er, AlertDialogAction as Mr, AlertDialogCancel as Fr, AlertDialogContent as Ur, AlertDialogDescription as br, AlertDialogFooter as Lr, AlertDialogHeader as kr, AlertDialogOverlay as Nr, AlertDialogPortal as Or, AlertDialogTitle as _r, AlertDialogTrigger as yr } from "./components/ui/alert-dialog.js";
-import { Avatar as Hr, AvatarFallback as Vr, AvatarImage as zr } from "./components/ui/avatar.js";
-import { Badge as Yr, badgeVariants as qr } from "./components/ui/badge.js";
-import { Card as Qr, CardAction as Zr, CardContent as jr, CardDescription as Jr, CardFooter as Xr, CardHeader as $r, CardTitle as re } from "./components/ui/card.js";
-import { Carousel as oe, CarouselContent as te, CarouselItem as ae, CarouselNext as ie, CarouselPrevious as pe } from "./components/ui/carousel.js";
-import { Checkbox as ne } from "./components/ui/checkbox.js";
-import { Dialog as le, DialogClose as ue, DialogContent as fe, DialogDescription as xe, DialogFooter as ce, DialogHeader as de, DialogOverlay as Ce, DialogPortal as ge, DialogTitle as Se, DialogTrigger as Ae } from "./components/ui/dialog.js";
-import { Drawer as Pe, DrawerClose as Te, DrawerContent as he, DrawerDescription as Ie, DrawerFooter as Re, DrawerHeader as ve, DrawerOverlay as we, DrawerPortal as Be, DrawerTitle as Ee, DrawerTrigger as Me } from "./components/ui/drawer.js";
-import { Input as Ue } from "./components/ui/input.js";
-import { Label as Le } from "./components/ui/label.js";
-import { Progress as Ne } from "./components/ui/progress.js";
-import { RadioGroup as _e, RadioGroupItem as ye } from "./components/ui/radio-group.js";
-import { ResizableHandle as He, ResizablePanel as Ve, ResizablePanelGroup as ze } from "./components/ui/resizable.js";
-import { ScrollArea as Ye, ScrollBar as qe } from "./components/ui/scroll-area.js";
-import { Select as Qe, SelectContent as Ze, SelectGroup as je, SelectItem as Je, SelectLabel as Xe, SelectScrollDownButton as $e, SelectScrollUpButton as ro, SelectSeparator as eo, SelectTrigger as oo, SelectValue as to } from "./components/ui/select.js";
-import { Separator as io } from "./components/ui/separator.js";
-import { Sheet as mo, SheetClose as no, SheetContent as so, SheetDescription as lo, SheetFooter as uo, SheetHeader as fo, SheetTitle as xo, SheetTrigger as co } from "./components/ui/sheet.js";
-import { Toaster as go } from "./components/ui/sonner.js";
-import { toast as Ao } from "./shop-minis-react/node_modules/.pnpm/sonner@2.0.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/sonner/dist/index.js";
-import { Skeleton as Po } from "./components/ui/skeleton.js";
-import { useRecentProducts as ho } from "./hooks/user/useRecentProducts.js";
-import { useRecentShops as Ro } from "./hooks/user/useRecentShops.js";
-import { useSavedProducts as wo } from "./hooks/user/useSavedProducts.js";
-import { useSavedProductsActions as Eo } from "./hooks/user/useSavedProductsActions.js";
-import { useFollowedShops as Fo } from "./hooks/user/useFollowedShops.js";
-import { useFollowedShopsActions as bo } from "./hooks/user/useFollowedShopsActions.js";
-import { useCurrentUser as ko } from "./hooks/user/useCurrentUser.js";
-import { useOrders as Oo } from "./hooks/user/useOrders.js";
-import { useBuyerAttributes as yo } from "./hooks/user/useBuyerAttributes.js";
-import { useGenerateUserToken as Ho } from "./hooks/user/useGenerateUserToken.js";
-import { useProductListActions as zo } from "./hooks/product/useProductListActions.js";
-import { useProductLists as Yo } from "./hooks/product/useProductLists.js";
-import { useProductList as Ko } from "./hooks/product/useProductList.js";
-import { useProduct as Zo } from "./hooks/product/useProduct.js";
-import { useProducts as Jo } from "./hooks/product/useProducts.js";
-import { useProductVariants as $o } from "./hooks/product/useProductVariants.js";
-import { useProductMedia as et } from "./hooks/product/useProductMedia.js";
-import { useProductReviews as tt } from "./hooks/product/useProductReviews.js";
-import { useProductSearch as it } from "./hooks/product/useProductSearch.js";
-import { useRecommendedProducts as mt } from "./hooks/product/useRecommendedProducts.js";
-import { usePopularProducts as st } from "./hooks/product/usePopularProducts.js";
-import { useARPreview as ut } from "./hooks/product/useARPreview.js";
-import { useAsyncStorage as xt } from "./hooks/storage/useAsyncStorage.js";
-import { useSecureStorage as dt } from "./hooks/storage/useSecureStorage.js";
-import { useImageUpload as gt } 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 ht } from "./hooks/navigation/useDeeplink.js";
-import { useNavigateWithTransition as Rt } from "./hooks/navigation/useNavigateWithTransition.js";
-import { useShop as wt } from "./hooks/shop/useShop.js";
-import { useRecommendedShops as Et } from "./hooks/shop/useRecommendedShops.js";
-import { useCreateImageContent as Ft } from "./hooks/content/useCreateImageContent.js";
-import { useErrorToast as bt } from "./hooks/util/useErrorToast.js";
-import { useErrorScreen as kt } from "./hooks/util/useErrorScreen.js";
-import { useShare as Ot } from "./hooks/util/useShare.js";
-import { useImagePicker as yt } from "./hooks/util/useImagePicker.js";
-import { useKeyboardAvoidingView as Ht } from "./hooks/util/useKeyboardAvoidingView.js";
-import { useRequestPermissions as zt } from "./hooks/util/useRequestPermissions.js";
-import { useOnMiniFocus as Yt } from "./hooks/events/useOnMiniFocus.js";
-import { useOnMiniBlur as Kt } from "./hooks/events/useOnMiniBlur.js";
-import { useOnMiniClose as Zt } from "./hooks/events/useOnMiniClose.js";
-import { useOnAppStateChange as Jt } from "./hooks/events/useOnAppStateChange.js";
-import { useOnNavigateBack as $t } from "./hooks/events/useOnNavigateBack.js";
-import { buildDeeplinkUrl as ea } from "./utils/buildDeeplinkUrl.js";
-import { MiniEntityNotFoundError as ta, MiniError as aa, MiniNetworkError as ia, formatError as pa } from "./utils/errors.js";
-import { extractBrandTheme as na, formatReviewCount as sa, getFeaturedImages as la, normalizeRating as ua } from "./utils/merchant-card.js";
-import { parseUrl as xa } from "./utils/parseUrl.js";
-import { dataURLToBlob as da, fileToDataUri as Ca, getResizedImageUrl as ga, getThumbhashBlobURL as Sa, getThumbhashDataURL as Aa } from "./utils/image.js";
-import { formatMoney as Pa } from "./utils/formatMoney.js";
-import { UserState as ha, UserTokenGenerateUserErrorCode as Ia } from "./shop-minis-platform/src/types/user.js";
-import { ContentCreateUserErrorCode as va, MinisContentStatus as wa } from "./shop-minis-platform/src/types/content.js";
-import { Social as Ea } from "./shop-minis-platform/src/types/share.js";
-import { DATA_FETCHING_DEFAULT_FETCH_POLICY as Fa, DATA_FETCHING_DEFAULT_PAGE_SIZE as Ua } from "./shop-minis-platform/src/constants.js";
+import { SafeArea as Sr } from "./components/atoms/safe-area.js";
+import { StaticArea as Dr } from "./components/atoms/static-area.js";
+import { Accordion as Tr, AccordionContent as hr, AccordionItem as Ir, AccordionTrigger as Rr } from "./components/ui/accordion.js";
+import { Alert as wr, AlertDescription as Br, AlertTitle as Er } from "./components/ui/alert.js";
+import { AlertDialog as Fr, AlertDialogAction as Ur, AlertDialogCancel as br, AlertDialogContent as Lr, AlertDialogDescription as kr, AlertDialogFooter as Nr, AlertDialogHeader as Or, AlertDialogOverlay as _r, AlertDialogPortal as yr, AlertDialogTitle as Gr, AlertDialogTrigger as Hr } from "./components/ui/alert-dialog.js";
+import { Avatar as zr, AvatarFallback as Wr, AvatarImage as Yr } from "./components/ui/avatar.js";
+import { Badge as Kr, badgeVariants as Qr } from "./components/ui/badge.js";
+import { Card as jr, CardAction as Jr, CardContent as Xr, CardDescription as $r, CardFooter as re, CardHeader as ee, CardTitle as oe } from "./components/ui/card.js";
+import { Carousel as ae, CarouselContent as pe, CarouselItem as ie, CarouselNext as me, CarouselPrevious as ne } from "./components/ui/carousel.js";
+import { Checkbox as le } from "./components/ui/checkbox.js";
+import { Dialog as fe, DialogClose as xe, DialogContent as ce, DialogDescription as de, DialogFooter as Ce, DialogHeader as ge, DialogOverlay as Se, DialogPortal as Ae, DialogTitle as De, DialogTrigger as Pe } from "./components/ui/dialog.js";
+import { Drawer as he, DrawerClose as Ie, DrawerContent as Re, DrawerDescription as ve, DrawerFooter as we, DrawerHeader as Be, DrawerOverlay as Ee, DrawerPortal as Me, DrawerTitle as Fe, DrawerTrigger as Ue } from "./components/ui/drawer.js";
+import { Input as Le } from "./components/ui/input.js";
+import { Label as Ne } from "./components/ui/label.js";
+import { Progress as _e } from "./components/ui/progress.js";
+import { RadioGroup as Ge, RadioGroupItem as He } from "./components/ui/radio-group.js";
+import { ResizableHandle as ze, ResizablePanel as We, ResizablePanelGroup as Ye } from "./components/ui/resizable.js";
+import { ScrollArea as Ke, ScrollBar as Qe } from "./components/ui/scroll-area.js";
+import { Select as je, SelectContent as Je, SelectGroup as Xe, SelectItem as $e, SelectLabel as ro, SelectScrollDownButton as eo, SelectScrollUpButton as oo, SelectSeparator as to, SelectTrigger as ao, SelectValue as po } from "./components/ui/select.js";
+import { Separator as mo } from "./components/ui/separator.js";
+import { Sheet as so, SheetClose as lo, SheetContent as uo, SheetDescription as fo, SheetFooter as xo, SheetHeader as co, SheetTitle as Co, SheetTrigger as go } from "./components/ui/sheet.js";
+import { Toaster as Ao } from "./components/ui/sonner.js";
+import { toast as Po } from "./shop-minis-react/node_modules/.pnpm/sonner@2.0.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/sonner/dist/index.js";
+import { Skeleton as ho } from "./components/ui/skeleton.js";
+import { useRecentProducts as Ro } from "./hooks/user/useRecentProducts.js";
+import { useRecentShops as wo } from "./hooks/user/useRecentShops.js";
+import { useSavedProducts as Eo } from "./hooks/user/useSavedProducts.js";
+import { useSavedProductsActions as Fo } from "./hooks/user/useSavedProductsActions.js";
+import { useFollowedShops as bo } from "./hooks/user/useFollowedShops.js";
+import { useFollowedShopsActions as ko } from "./hooks/user/useFollowedShopsActions.js";
+import { useCurrentUser as Oo } from "./hooks/user/useCurrentUser.js";
+import { useOrders as yo } from "./hooks/user/useOrders.js";
+import { useBuyerAttributes as Ho } from "./hooks/user/useBuyerAttributes.js";
+import { useGenerateUserToken as zo } from "./hooks/user/useGenerateUserToken.js";
+import { useProductListActions as Yo } from "./hooks/product/useProductListActions.js";
+import { useProductLists as Ko } from "./hooks/product/useProductLists.js";
+import { useProductList as Zo } from "./hooks/product/useProductList.js";
+import { useProduct as Jo } from "./hooks/product/useProduct.js";
+import { useProducts as $o } from "./hooks/product/useProducts.js";
+import { useProductVariants as et } from "./hooks/product/useProductVariants.js";
+import { useProductMedia as tt } from "./hooks/product/useProductMedia.js";
+import { useProductReviews as pt } from "./hooks/product/useProductReviews.js";
+import { useProductSearch as mt } from "./hooks/product/useProductSearch.js";
+import { useRecommendedProducts as st } from "./hooks/product/useRecommendedProducts.js";
+import { usePopularProducts as ut } from "./hooks/product/usePopularProducts.js";
+import { useARPreview as xt } from "./hooks/product/useARPreview.js";
+import { useAsyncStorage as dt } from "./hooks/storage/useAsyncStorage.js";
+import { useSecureStorage as gt } from "./hooks/storage/useSecureStorage.js";
+import { useImageUpload as At } from "./hooks/storage/useImageUpload.js";
+import { useShopNavigation as Pt } from "./hooks/navigation/useShopNavigation.js";
+import { useCloseMini as ht } from "./hooks/navigation/useCloseMini.js";
+import { useDeeplink as Rt } from "./hooks/navigation/useDeeplink.js";
+import { useNavigateWithTransition as wt } from "./hooks/navigation/useNavigateWithTransition.js";
+import { useShop as Et } from "./hooks/shop/useShop.js";
+import { useRecommendedShops as Ft } from "./hooks/shop/useRecommendedShops.js";
+import { useCreateImageContent as bt } from "./hooks/content/useCreateImageContent.js";
+import { useErrorToast as kt } from "./hooks/util/useErrorToast.js";
+import { useErrorScreen as Ot } from "./hooks/util/useErrorScreen.js";
+import { useSafeArea as yt } from "./hooks/util/useSafeArea.js";
+import { useShare as Ht } from "./hooks/util/useShare.js";
+import { useImagePicker as zt } from "./hooks/util/useImagePicker.js";
+import { useKeyboardAvoidingView as Yt } from "./hooks/util/useKeyboardAvoidingView.js";
+import { useRequestPermissions as Kt } from "./hooks/util/useRequestPermissions.js";
+import { useOnMiniFocus as Zt } from "./hooks/events/useOnMiniFocus.js";
+import { useOnMiniBlur as Jt } from "./hooks/events/useOnMiniBlur.js";
+import { useOnMiniClose as $t } from "./hooks/events/useOnMiniClose.js";
+import { useOnAppStateChange as ea } from "./hooks/events/useOnAppStateChange.js";
+import { useOnNavigateBack as ta } from "./hooks/events/useOnNavigateBack.js";
+import { buildDeeplinkUrl as pa } from "./utils/buildDeeplinkUrl.js";
+import { MiniEntityNotFoundError as ma, MiniError as na, MiniNetworkError as sa, formatError as la } from "./utils/errors.js";
+import { extractBrandTheme as fa, formatReviewCount as xa, getFeaturedImages as ca, normalizeRating as da } from "./utils/merchant-card.js";
+import { parseUrl as ga } from "./utils/parseUrl.js";
+import { dataURLToBlob as Aa, fileToDataUri as Da, getResizedImageUrl as Pa, getThumbhashBlobURL as Ta, getThumbhashDataURL as ha } from "./utils/image.js";
+import { formatMoney as Ra } from "./utils/formatMoney.js";
+import { UserState as wa, UserTokenGenerateUserErrorCode as Ba } from "./shop-minis-platform/src/types/user.js";
+import { ContentCreateUserErrorCode as Ma, MinisContentStatus as Fa } from "./shop-minis-platform/src/types/content.js";
+import { Social as ba } from "./shop-minis-platform/src/types/share.js";
+import { DATA_FETCHING_DEFAULT_FETCH_POLICY as ka, DATA_FETCHING_DEFAULT_PAGE_SIZE as Na } from "./shop-minis-platform/src/constants.js";
 export {
-  Dr as Accordion,
-  Pr as AccordionContent,
-  Tr as AccordionItem,
-  hr as AccordionTrigger,
+  Tr as Accordion,
+  hr as AccordionContent,
+  Ir as AccordionItem,
+  Rr as AccordionTrigger,
   m as AddToCartButton,
-  Rr as Alert,
-  vr as AlertDescription,
-  Er as AlertDialog,
-  Mr as AlertDialogAction,
-  pr as AlertDialogAtom,
-  Fr as AlertDialogCancel,
-  Ur as AlertDialogContent,
-  br as AlertDialogDescription,
-  Lr as AlertDialogFooter,
-  kr as AlertDialogHeader,
-  Nr as AlertDialogOverlay,
-  Or as AlertDialogPortal,
-  _r as AlertDialogTitle,
-  yr as AlertDialogTrigger,
-  wr as AlertTitle,
-  Hr as Avatar,
-  Vr as AvatarFallback,
-  zr as AvatarImage,
-  Yr as Badge,
+  wr as Alert,
+  Br as AlertDescription,
+  Fr as AlertDialog,
+  Ur as AlertDialogAction,
+  ir as AlertDialogAtom,
+  br as AlertDialogCancel,
+  Lr as AlertDialogContent,
+  kr as AlertDialogDescription,
+  Nr as AlertDialogFooter,
+  Or as AlertDialogHeader,
+  _r as AlertDialogOverlay,
+  yr as AlertDialogPortal,
+  Gr as AlertDialogTitle,
+  Hr as AlertDialogTrigger,
+  Er as AlertTitle,
+  zr as Avatar,
+  Wr as AvatarFallback,
+  Yr as AvatarImage,
+  Kr as Badge,
   j as Button,
   s as BuyNowButton,
-  Qr as Card,
-  Zr as CardAction,
-  jr as CardContent,
-  Jr as CardDescription,
-  Xr as CardFooter,
-  $r as CardHeader,
-  re as CardTitle,
-  oe as Carousel,
-  te as CarouselContent,
-  ae as CarouselItem,
-  ie as CarouselNext,
-  pe as CarouselPrevious,
-  ne as Checkbox,
-  va as ContentCreateUserErrorCode,
+  jr as Card,
+  Jr as CardAction,
+  Xr as CardContent,
+  $r as CardDescription,
+  re as CardFooter,
+  ee as CardHeader,
+  oe as CardTitle,
+  ae as Carousel,
+  pe as CarouselContent,
+  ie as CarouselItem,
+  me as CarouselNext,
+  ne as CarouselPrevious,
+  le as Checkbox,
+  Ma as ContentCreateUserErrorCode,
   cr as ContentWrapper,
-  Fa as DATA_FETCHING_DEFAULT_FETCH_POLICY,
-  Ua as DATA_FETCHING_DEFAULT_PAGE_SIZE,
+  ka as DATA_FETCHING_DEFAULT_FETCH_POLICY,
+  Na as DATA_FETCHING_DEFAULT_PAGE_SIZE,
   o as DATA_NAVIGATION_TYPE_ATTRIBUTE,
-  le as Dialog,
-  ue as DialogClose,
-  fe as DialogContent,
-  xe as DialogDescription,
-  ce as DialogFooter,
-  de as DialogHeader,
-  Ce as DialogOverlay,
-  ge as DialogPortal,
-  Se as DialogTitle,
-  Ae as DialogTrigger,
-  Pe as Drawer,
-  Te as DrawerClose,
-  he as DrawerContent,
-  Ie as DrawerDescription,
-  Re as DrawerFooter,
-  ve as DrawerHeader,
-  we as DrawerOverlay,
-  Be as DrawerPortal,
-  Ee as DrawerTitle,
-  Me as DrawerTrigger,
+  fe as Dialog,
+  xe as DialogClose,
+  ce as DialogContent,
+  de as DialogDescription,
+  Ce as DialogFooter,
+  ge as DialogHeader,
+  Se as DialogOverlay,
+  Ae as DialogPortal,
+  De as DialogTitle,
+  Pe as DialogTrigger,
+  he as Drawer,
+  Ie as DrawerClose,
+  Re as DrawerContent,
+  ve as DrawerDescription,
+  we as DrawerFooter,
+  Be as DrawerHeader,
+  Ee as DrawerOverlay,
+  Me as DrawerPortal,
+  Fe as DrawerTitle,
+  Ue as DrawerTrigger,
   V as FavoriteButton,
   X as IconButton,
   rr as Image,
   W as ImageContentWrapper,
-  Ue as Input,
-  Le as Label,
+  Le as Input,
+  Ne as Label,
   nr as List,
   ar as LongPressDetector,
   I as MerchantCard,
@@ -180,11 +182,11 @@ export {
   B as MerchantCardName,
   E as MerchantCardRating,
   b as MerchantCardSkeleton,
-  ta as MiniEntityNotFoundError,
-  aa as MiniError,
-  ia as MiniNetworkError,
-  i as MinisContainer,
-  wa as MinisContentStatus,
+  ma as MiniEntityNotFoundError,
+  na as MiniError,
+  sa as MiniNetworkError,
+  p as MinisContainer,
+  Fa as MinisContentStatus,
   q as MinisRouter,
   t as NAVIGATION_TYPES,
   u as ProductCard,
@@ -200,105 +202,107 @@ export {
   D as ProductCardTitle,
   T as ProductLink,
   Cr as ProductVariantPrice,
-  Ne as Progress,
+  _e as Progress,
   k as QuantitySelector,
-  _e as RadioGroup,
-  ye as RadioGroupItem,
-  He as ResizableHandle,
-  Ve as ResizablePanel,
-  ze as ResizablePanelGroup,
-  Ye as ScrollArea,
-  qe as ScrollBar,
+  Ge as RadioGroup,
+  He as RadioGroupItem,
+  ze as ResizableHandle,
+  We as ResizablePanel,
+  Ye as ResizablePanelGroup,
+  Sr as SafeArea,
+  Ke as ScrollArea,
+  Qe as ScrollBar,
   O as Search,
   _ as SearchInput,
   y as SearchProvider,
   G as SearchResultsList,
-  Qe as Select,
-  Ze as SelectContent,
-  je as SelectGroup,
-  Je as SelectItem,
-  Xe as SelectLabel,
-  $e as SelectScrollDownButton,
-  ro as SelectScrollUpButton,
-  eo as SelectSeparator,
-  oo as SelectTrigger,
-  to as SelectValue,
-  io as Separator,
-  mo as Sheet,
-  no as SheetClose,
-  so as SheetContent,
-  lo as SheetDescription,
-  uo as SheetFooter,
-  fo as SheetHeader,
-  xo as SheetTitle,
-  co as SheetTrigger,
-  Po as Skeleton,
-  Ea as Social,
-  Sr as StaticArea,
+  je as Select,
+  Je as SelectContent,
+  Xe as SelectGroup,
+  $e as SelectItem,
+  ro as SelectLabel,
+  eo as SelectScrollDownButton,
+  oo as SelectScrollUpButton,
+  to as SelectSeparator,
+  ao as SelectTrigger,
+  po as SelectValue,
+  mo as Separator,
+  so as Sheet,
+  lo as SheetClose,
+  uo as SheetContent,
+  fo as SheetDescription,
+  xo as SheetFooter,
+  co as SheetHeader,
+  Co as SheetTitle,
+  go as SheetTrigger,
+  ho as Skeleton,
+  ba as Social,
+  Dr as StaticArea,
   fr as TextInput,
-  go as Toaster,
+  Ao as Toaster,
   or as Touchable,
   Q as TransitionLink,
-  ha as UserState,
-  Ia as UserTokenGenerateUserErrorCode,
+  wa as UserState,
+  Ba as UserTokenGenerateUserErrorCode,
   lr as VideoPlayer,
-  qr as badgeVariants,
-  ea as buildDeeplinkUrl,
-  da as dataURLToBlob,
-  na as extractBrandTheme,
-  Ca as fileToDataUri,
-  pa as formatError,
-  Pa as formatMoney,
-  sa as formatReviewCount,
-  la as getFeaturedImages,
-  ga as getResizedImageUrl,
-  Sa as getThumbhashBlobURL,
-  Aa as getThumbhashDataURL,
-  ua as normalizeRating,
-  xa as parseUrl,
-  Ao as toast,
-  ut as useARPreview,
-  xt as useAsyncStorage,
-  yo as useBuyerAttributes,
-  Pt as useCloseMini,
-  Ft as useCreateImageContent,
-  ko as useCurrentUser,
-  ht as useDeeplink,
-  kt as useErrorScreen,
-  bt as useErrorToast,
-  Fo as useFollowedShops,
-  bo as useFollowedShopsActions,
-  Ho as useGenerateUserToken,
-  yt as useImagePicker,
-  gt as useImageUpload,
-  Ht as useKeyboardAvoidingView,
-  Rt as useNavigateWithTransition,
-  Jt as useOnAppStateChange,
-  Kt as useOnMiniBlur,
-  Zt as useOnMiniClose,
-  Yt as useOnMiniFocus,
-  $t as useOnNavigateBack,
-  Oo as useOrders,
-  st as usePopularProducts,
-  Zo as useProduct,
-  Ko as useProductList,
-  zo as useProductListActions,
-  Yo as useProductLists,
-  et as useProductMedia,
-  tt as useProductReviews,
-  it as useProductSearch,
-  $o as useProductVariants,
-  Jo as useProducts,
-  ho as useRecentProducts,
-  Ro as useRecentShops,
-  mt as useRecommendedProducts,
-  Et as useRecommendedShops,
-  zt as useRequestPermissions,
-  wo as useSavedProducts,
-  Eo as useSavedProductsActions,
-  dt as useSecureStorage,
-  Ot as useShare,
-  wt as useShop,
-  At as useShopNavigation
+  Qr as badgeVariants,
+  pa as buildDeeplinkUrl,
+  Aa as dataURLToBlob,
+  fa as extractBrandTheme,
+  Da as fileToDataUri,
+  la as formatError,
+  Ra as formatMoney,
+  xa as formatReviewCount,
+  ca as getFeaturedImages,
+  Pa as getResizedImageUrl,
+  Ta as getThumbhashBlobURL,
+  ha as getThumbhashDataURL,
+  da as normalizeRating,
+  ga as parseUrl,
+  Po as toast,
+  xt as useARPreview,
+  dt as useAsyncStorage,
+  Ho as useBuyerAttributes,
+  ht as useCloseMini,
+  bt as useCreateImageContent,
+  Oo as useCurrentUser,
+  Rt as useDeeplink,
+  Ot as useErrorScreen,
+  kt as useErrorToast,
+  bo as useFollowedShops,
+  ko as useFollowedShopsActions,
+  zo as useGenerateUserToken,
+  zt as useImagePicker,
+  At as useImageUpload,
+  Yt as useKeyboardAvoidingView,
+  wt as useNavigateWithTransition,
+  ea as useOnAppStateChange,
+  Jt as useOnMiniBlur,
+  $t as useOnMiniClose,
+  Zt as useOnMiniFocus,
+  ta as useOnNavigateBack,
+  yo as useOrders,
+  ut as usePopularProducts,
+  Jo as useProduct,
+  Zo as useProductList,
+  Yo as useProductListActions,
+  Ko as useProductLists,
+  tt as useProductMedia,
+  pt as useProductReviews,
+  mt as useProductSearch,
+  et as useProductVariants,
+  $o as useProducts,
+  Ro as useRecentProducts,
+  wo as useRecentShops,
+  st as useRecommendedProducts,
+  Ft as useRecommendedShops,
+  Kt as useRequestPermissions,
+  yt as useSafeArea,
+  Eo as useSavedProducts,
+  Fo as useSavedProductsActions,
+  gt as useSecureStorage,
+  Ht as useShare,
+  Et as useShop,
+  Pt as useShopNavigation
 };
 //# sourceMappingURL=index.js.map

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/simple-swizzle@0.2.2/node_modules/simple-swizzle/index.js

@@ -1,4 +1,4 @@
-import { __module as t } from "../../../../../../_virtual/index11.js";
+import { __module as t } from "../../../../../../_virtual/index10.js";
 import { __require as z } from "../../../is-arrayish@0.3.2/node_modules/is-arrayish/index.js";
 var l;
 function v() {

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/index10.js";
+import { __module as r } from "../../../../../../../_virtual/index11.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/eslint/rules/validate-manifest.cjs

@@ -122,10 +122,6 @@ module.exports = {
     messages: {
       missingScope:
         '{{source}} requires scope "{{scope}}" in src/manifest.json. Add "{{scope}}" to the "scopes" array.',
-      missingScopeProductCard:
-        'Component "ProductCard" requires scope "{{scope}}" in src/manifest.json. Add "{{scope}}" to the "scopes" array or set favoriteButtonDisabled to true on all ProductCard instances.',
-      missingScopeProductLink:
-        'Component "ProductLink" requires scope "{{scope}}" in src/manifest.json. Add "{{scope}}" to the "scopes" array or set hideFavoriteAction to true (or provide a customAction) on all ProductLink instances.',
       missingPermission:
         '{{reason}} requires permission "{{permission}}" in src/manifest.json. Add "{{permission}}" to the "permissions" array.',
       missingTrustedDomain:
@@ -149,9 +145,6 @@ module.exports = {
     const requiredPermissions = new Set()
     const requiredDomains = new Set()
     const fixedIssues = new Set()
-    // Track how components are actually used (e.g., with specific props)
-    const componentUsagePatterns = new Map()
-
     // Check module-level cache first to avoid repeated file I/O
     if (manifestPathCache && fs.existsSync(manifestPathCache)) {
       // Check if manifest.json has been modified (for IDE integration)
@@ -465,78 +458,6 @@ module.exports = {
         }
       },
 
-      // Track ProductCard and ProductLink usage with disabled favorite functionality
-      JSXElement(node) {
-        const elementName = node.openingElement.name.name
-
-        // Handle ProductCard with favoriteButtonDisabled prop
-        if (elementName === 'ProductCard') {
-          // Check if favoriteButtonDisabled prop is present and true
-          const favoriteDisabledProp = node.openingElement.attributes.find(
-            attr =>
-              attr.type === 'JSXAttribute' &&
-              attr.name?.name === 'favoriteButtonDisabled'
-          )
-
-          const isDisabled =
-            favoriteDisabledProp &&
-            // Shorthand syntax: <ProductCard favoriteButtonDisabled />
-            (favoriteDisabledProp.value === null ||
-              // Explicit true: <ProductCard favoriteButtonDisabled={true} />
-              (favoriteDisabledProp.value?.type === 'JSXExpressionContainer' &&
-                favoriteDisabledProp.value?.expression?.type === 'Literal' &&
-                favoriteDisabledProp.value?.expression?.value === true))
-
-          // Track usage pattern
-          const componentPath = 'commerce/product-card'
-          if (!componentUsagePatterns.has(componentPath)) {
-            componentUsagePatterns.set(componentPath, {
-              allDisabled: true,
-              hasUsage: true,
-            })
-          }
-          const pattern = componentUsagePatterns.get(componentPath)
-          pattern.allDisabled = pattern.allDisabled && isDisabled
-        }
-
-        // Handle ProductLink with hideFavoriteAction or customAction props
-        if (elementName === 'ProductLink') {
-          // Check if hideFavoriteAction prop is present and true
-          const hideFavoriteProp = node.openingElement.attributes.find(
-            attr =>
-              attr.type === 'JSXAttribute' &&
-              attr.name?.name === 'hideFavoriteAction'
-          )
-
-          // Check if customAction prop is present (replaces favorite action)
-          const customActionProp = node.openingElement.attributes.find(
-            attr =>
-              attr.type === 'JSXAttribute' && attr.name?.name === 'customAction'
-          )
-
-          const isFavoriteDisabled =
-            // hideFavoriteAction={true} or shorthand
-            (hideFavoriteProp &&
-              (hideFavoriteProp.value === null || // shorthand
-                (hideFavoriteProp.value?.type === 'JSXExpressionContainer' &&
-                  hideFavoriteProp.value?.expression?.type === 'Literal' &&
-                  hideFavoriteProp.value?.expression?.value === true))) ||
-            // customAction is provided (any truthy value replaces favorites)
-            customActionProp !== undefined
-
-          // Track usage pattern
-          const componentPath = 'commerce/product-link'
-          if (!componentUsagePatterns.has(componentPath)) {
-            componentUsagePatterns.set(componentPath, {
-              allDisabled: true,
-              hasUsage: true,
-            })
-          }
-          const pattern = componentUsagePatterns.get(componentPath)
-          pattern.allDisabled = pattern.allDisabled && isFavoriteDisabled
-        }
-      },
-
       // Check JSX attributes for external URLs
       JSXAttribute(node) {
         if (!node.value || node.value.type !== 'Literal') {
@@ -669,18 +590,6 @@ module.exports = {
         // Check scopes for components
         usedComponents.forEach(
           ({path: componentPath, name: componentName, node}) => {
-            // Special handling for components with conditional favorite functionality
-            if (
-              componentPath === 'commerce/product-card' ||
-              componentPath === 'commerce/product-link'
-            ) {
-              const usagePattern = componentUsagePatterns.get(componentPath)
-              // Skip scope requirement if all usages have favorites disabled
-              if (usagePattern?.hasUsage && usagePattern?.allDisabled) {
-                return // No scope required when favorite functionality is disabled
-              }
-            }
-
             const componentData = componentScopesMap[componentPath]
             if (
               !componentData ||
@@ -789,13 +698,7 @@ module.exports = {
               const sourceName = issue.hookName || issue.componentName
               const sourceType = issue.hookName ? 'Hook' : 'Component'
 
-              // Use custom message for ProductCard and ProductLink
-              let messageId = 'missingScope'
-              if (issue.componentName === 'ProductCard') {
-                messageId = 'missingScopeProductCard'
-              } else if (issue.componentName === 'ProductLink') {
-                messageId = 'missingScopeProductLink'
-              }
+              const messageId = 'missingScope'
 
               context.report({
                 loc: {line: 1, column: 0},

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

@@ -1,18 +1 @@
-{
-  "commerce/product-card": {
-    "scopes": [
-      "product_list:write"
-    ],
-    "hooks": [
-      "useSavedProductsActions"
-    ]
-  },
-  "commerce/product-link": {
-    "scopes": [
-      "product_list:write"
-    ],
-    "hooks": [
-      "useSavedProductsActions"
-    ]
-  }
-}
+{}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "sideEffects": false,
   "type": "module",
   "engines": {

package/src/components/atoms/safe-area.tsx

@@ -0,0 +1,92 @@
+import {useSafeArea} from '../../hooks/util/useSafeArea'
+
+type Edge = 'top' | 'right' | 'bottom' | 'left'
+
+export interface SafeAreaDocProps {
+  /** Which edges to apply safe area insets to. Defaults to all edges. */
+  edges?: Edge[]
+  /** Whether to apply insets as padding or margin. Defaults to 'padding'. */
+  mode?: 'padding' | 'margin'
+  /** Additional CSS classes */
+  className?: string
+  /** Additional inline styles */
+  style?: React.CSSProperties
+  /** Content to render inside the safe area */
+  children?: React.ReactNode
+}
+
+const ALL_EDGES: Edge[] = ['top', 'right', 'bottom', 'left']
+
+const CSS_VAR_MAP: {[key in Edge]: string} = {
+  top: 'var(--safe-area-inset-top, 0px)',
+  right: 'var(--safe-area-inset-right, 0px)',
+  bottom: 'var(--safe-area-inset-bottom, 0px)',
+  left: 'var(--safe-area-inset-left, 0px)',
+}
+
+const STYLE_KEY_MAP: {[key in 'padding' | 'margin']: {[edge in Edge]: string}} =
+  {
+    padding: {
+      top: 'paddingTop',
+      right: 'paddingRight',
+      bottom: 'paddingBottom',
+      left: 'paddingLeft',
+    },
+    margin: {
+      top: 'marginTop',
+      right: 'marginRight',
+      bottom: 'marginBottom',
+      left: 'marginLeft',
+    },
+  }
+
+/**
+ * A container that applies safe area insets as padding or margin.
+ *
+ * Ensures content isn't hidden behind system UI (home indicator,
+ * navigation bar, etc).
+ *
+ * Uses CSS custom properties (`--safe-area-inset-*`) injected by the
+ * Shop app, which work reliably on both iOS and Android.
+ *
+ * Only applies inline padding/margin for edges where the safe area
+ * inset is non-zero, so your Tailwind classes and styles are preserved
+ * on edges that don't need safe area handling.
+ *
+ * @example
+ * ```tsx
+ * <SafeArea edges={['bottom']}>
+ *   <footer>Sticky footer content</footer>
+ * </SafeArea>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <SafeArea className="pt-12 px-4">
+ *   <div>Custom top/side padding, safe area bottom</div>
+ * </SafeArea>
+ * ```
+ */
+export function SafeArea({
+  edges = ALL_EDGES,
+  mode = 'padding',
+  className,
+  style: styleProp,
+  children,
+}: SafeAreaDocProps) {
+  const style: React.CSSProperties = {...styleProp}
+  const keys = STYLE_KEY_MAP[mode]
+  const insets = useSafeArea()
+
+  for (const edge of edges) {
+    if (insets?.[edge] > 0) {
+      ;(style as any)[keys[edge]] = CSS_VAR_MAP[edge]
+    }
+  }
+
+  return (
+    <div className={className} style={style}>
+      {children}
+    </div>
+  )
+}

package/src/components/index.ts

@@ -27,6 +27,7 @@ export * from './atoms/video-player'
 export * from './atoms/text-input'
 export * from './atoms/content-wrapper'
 export * from './atoms/product-variant-price'
+export * from './atoms/safe-area'
 export * from './atoms/static-area'
 
 export * from './ui/accordion'

package/src/hooks/index.ts

@@ -45,6 +45,7 @@ export * from './content/useCreateImageContent'
 // - Utility Hooks
 export * from './util/useErrorToast'
 export * from './util/useErrorScreen'
+export * from './util/useSafeArea'
 export * from './util/useShare'
 export * from './util/useImagePicker'
 export * from './util/useKeyboardAvoidingView'

package/src/hooks/util/useSafeArea.ts

@@ -0,0 +1,24 @@
+import type {SafeAreaInsets} from '@shopify/shop-minis-platform'
+
+const DEFAULT_INSETS: SafeAreaInsets = {top: 0, right: 0, bottom: 0, left: 0}
+
+/**
+ * Returns the safe area insets for the current device.
+ *
+ * These values represent the areas of the screen that are obscured by
+ * system UI (home indicator, navigation bar, etc). Use them to ensure
+ * content isn't hidden behind system chrome.
+ *
+ * The values are also available as CSS custom properties:
+ * `--safe-area-inset-top`, `--safe-area-inset-right`,
+ * `--safe-area-inset-bottom`, `--safe-area-inset-left`
+ *
+ * @example
+ * ```tsx
+ * const {bottom} = useSafeArea()
+ * return <div style={{paddingBottom: bottom}}>Content</div>
+ * ```
+ */
+export function useSafeArea(): SafeAreaInsets {
+  return window.minisParams?.safeAreaInsets ?? DEFAULT_INSETS
+}