@numueg/theme-sdk 0.2.1 → 0.2.3

package/dist/index.d.mts

@@ -1,9 +1,9 @@
-import { S as Store, e as Product, b as Collection, C as Cart, c as Customer, P as Page, g as ProductVariant } from './entities-iiuRSPpk.mjs';
-export { A as Address, a as CartItem, O as Order, d as OrderItem, f as ProductImage, h as ProductOption } from './entities-iiuRSPpk.mjs';
+import { S as Store, e as Product, b as Collection, C as Cart, c as Customer, P as Page, g as ProductVariant } from './entities-C8B2U-V0.mjs';
+export { A as Address, a as CartItem, O as Order, d as OrderItem, f as ProductImage, h as ProductOption } from './entities-C8B2U-V0.mjs';
 import { T as ThemeSettingsV3, c as SectionInstance, M as MountResult, B as BlockInstance, b as BlockSchema, a as BlockProps$1, f as SectionSchema, e as SectionProps$1 } from './theme-D0QybTQS.mjs';
 export { E as ExternalThemeMetadata, h as MAX_BLOCK_DEPTH, P as PageTemplate, i as PresetBlock, S as SectionGroup, d as SectionPreset, g as SettingDefinition } from './theme-D0QybTQS.mjs';
 import * as react from 'react';
-import { ReactNode, ElementType, ImgHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
+import { ReactNode, ElementType, CSSProperties, ImgHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
 export { resolveThemeSettings } from './normalize.mjs';
 
 /**
@@ -1263,6 +1263,78 @@ interface MoneyProps {
  */
 declare function Money({ amount, currency, compareAt, className, as, }: MoneyProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
 
+/**
+ * Non-destructive image framing transform (focal / zoom / rotation).
+ *
+ * An image setting value may carry optional `transform` metadata
+ * (`{ url, alt, transform }`). The original asset is never modified — the
+ * storefront reproduces the framing purely from these numbers via CSS, so the
+ * SAME uploaded image can be framed differently per placement (hero vs card).
+ *
+ * Hoisted into the SDK (was duplicated in every theme's `_shared.ts` and in
+ * the merchant-hub editor's `imageTransform.ts`). The editor copy MUST stay
+ * equivalent so its preview matches the storefront render exactly.
+ */
+interface ImageTransform {
+    v: 1;
+    focal?: {
+        x: number;
+        y: number;
+    };
+    zoom?: number;
+    rotation?: number;
+    fit?: "cover" | "contain";
+}
+/** Read the transform off an image setting value (string | {url,alt,transform}). */
+declare function asImageTransform(v: unknown): ImageTransform | undefined;
+/**
+ * CSS reproducing the transform on an `<img>` that fills a fixed-aspect,
+ * overflow-hidden frame. Default fit is `cover` (Shopify-style: the image
+ * fills its frame, cropping to the focal point) — pass `"contain"` only for
+ * placements that must show the whole image (e.g. a logo). Empty object when
+ * there is no transform AND the caller wants the section's own className to
+ * decide; pass an explicit `fit` to force a default even without a transform.
+ */
+declare function applyImageTransform(t: ImageTransform | undefined | null, fit?: "cover" | "contain"): CSSProperties;
+/**
+ * focalSrc — build a URL for a server-side, focal-point-aware image transform.
+ *
+ * OPT-IN helper. A theme that wants a bandwidth-efficient SMART CROP for a big
+ * image (typically a hero) calls this to point the <img src> at the storefront's
+ * `/api/image-transform` endpoint with focal/aspect params. The endpoint honors
+ * them only when Cloudflare Image Resizing is enabled on the zone
+ * (NUMU_CF_IMAGE_RESIZING=1); otherwise it gracefully ignores them and serves a
+ * plain resized image — so the theme's CSS `applyImageTransform` framing remains
+ * the correctness baseline either way. This is purely a perf optimization.
+ *
+ * Returns a RELATIVE path (`/api/image-transform?...`) — the SDK runs
+ * same-origin inside the storefront, matching how <Form>/useShop build URLs.
+ *
+ * @example
+ *   <img
+ *     src={focalSrc(hero.url, { width: 1600, focal: t?.focal, aspect: "16/9" })}
+ *     style={applyImageTransform(t, "cover")}   // CSS still frames as fallback
+ *   />
+ */
+interface FocalSrcOptions {
+    /** Target width in px (e.g. 1600 for a desktop hero). Required for a crop. */
+    width?: number;
+    /** Focal point, normalized 0..1 (0.5,0.5 = center). */
+    focal?: {
+        x?: number;
+        y?: number;
+    };
+    /** Target aspect ratio "W/H" (e.g. "16/9"); drives the crop box height. */
+    aspect?: string;
+    /** Crop mode. Default "cover". */
+    fit?: "cover" | "contain";
+    /** Quality 1..100. */
+    quality?: number;
+    /** Output format. */
+    format?: "webp" | "avif" | "jpeg" | "jpg" | "png";
+}
+declare function focalSrc(url: string | null | undefined, options?: FocalSrcOptions): string;
+
 interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet"> {
     src: string | undefined | null;
     alt: string;
@@ -1283,6 +1355,29 @@ interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "
      * "eager" for above-the-fold imagery.
      */
     loading?: "eager" | "lazy";
+    /**
+     * Shopify-style frame. When set (e.g. "3/4", "16/9", "1/1") the image is
+     * wrapped in a fixed-aspect, overflow-hidden box and the `<img>` fills it.
+     * Combined with `objectFit="cover"` (the default) this guarantees the image
+     * ALWAYS fits its frame — no letterboxing, no overflow — cropping to the
+     * focal point. Omit to render a bare `<img>` (legacy behavior).
+     */
+    aspectRatio?: string;
+    /**
+     * How the image fills its box. Default "cover" (fill + crop) — the merchant
+     * never sees a letterboxed/squashed image. Use "contain" for logos/badges
+     * that must show in full.
+     */
+    objectFit?: "cover" | "contain" | "fill" | "scale-down" | "none";
+    /** CSS object-position (e.g. "50% 50%"). Ignored if `transform` is set. */
+    objectPosition?: string;
+    /**
+     * Non-destructive focal/zoom/rotation metadata from the image setting value
+     * (`asImageTransform(setting)`). When present it drives object-fit +
+     * object-position + scale/rotate so the editor preview and the live render
+     * match exactly. Overrides `objectFit`/`objectPosition`.
+     */
+    transform?: ImageTransform | null;
 }
 /**
  * <Image> — drop-in replacement for `<img>` with srcSet + lazy loading
@@ -1293,7 +1388,7 @@ interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "
  * If `src` is empty/null, renders a placeholder div so the layout
  * doesn't shift while a merchant configures images in the customizer.
  */
-declare function Image({ src, alt, sizes, responsive, loading, className, style, ...rest }: ImageProps): react.JSX.Element;
+declare function Image({ src, alt, sizes, responsive, loading, aspectRatio, objectFit, objectPosition, transform, className, style, ...rest }: ImageProps): react.JSX.Element;
 
 interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
     /**
@@ -2097,4 +2192,4 @@ declare function pickTranslations(bundle: LocaleBundle, locale: string): LocaleM
  */
 declare function buildLocaleBundle<T extends Record<string, unknown>>(modules: T): LocaleBundle;
 
-export { AddToCartButton, type AddressInput, type AnalyticsApi, type AnalyticsPayload, type AppManifestBlock, type AppPayload, type AppState, Block, BlockInstance, BlockProps$1 as BlockProps, BlockSchema, Cart, CartContext, type CheckoutAddress, type CheckoutApi, type CheckoutSessionState, type CheckoutStep, Collection, CollectionCard, type CollectionCardProps, type CollectionCardSlots, CollectionContext, CollectionProvider, type CurrencyConfig, type CurrencyState, CurrencySwitcher, type CurrencySwitcherProps, Customer, type CustomerAddress, type CustomerAddressesState, CustomerContext, type DefineBlockInput, type DefineSectionInput, type DefinedBlock, type DefinedSection, type DynamicResolveContext, type DynamicSourceRef, EditableImage, type EditableImageProps, EditableText, type EditableTextProps, Form, type GiftCardBalance, ICON_NAMES, Icon, IconMap, type IconProps, Image, Link, type LocaleBundle, type LocaleMessages, LocaleSwitcher, type LocaleSwitcherProps, LocalizationContext, type MenuItemData, Money, MountResult, NavigationContext, type NavigationItem, type NavigationState, NuMuProvider, type OrderDetail, type OrderListEntry, type OrderListState, type OrderState, Page, PageContext, type PlaceOrderResult, Product, ProductCard, type ProductCardProps, type ProductCardSlots, ProductContext, ProductProvider, ProductVariant, type RelatedProductsState, type ReorderResult, type ReorderSkipReason, type ReorderSkippedItem, RichText, type RichTextProps, type SearchResults, type SearchState, Section, SectionContext, SectionInstance, SectionProps$1 as SectionProps, SectionSchema, type ShippingRateOption, ShopContext, type ShopWithHelpers, Store, type ThemeMountContext, type ThemeMountPage, type ThemeRenderArgs, ThemeSettingsContext, ThemeSettingsV3, type UseGiftCardBalance, type UseReorder, type UseSearchOptions, type UseShippingRatesOptions, type UseShippingRatesState, type UseVariantSelection, type WishlistItem, type WishlistState, applyGlobalStyleTokens, assetUrl, availableValues, buildLocaleBundle, clearSdkSingleton, collectBlocks, collectSections, defaultVariant, defineBlock, defineSection, dynamicSource, findVariantByOptions, flattenMessages, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, mountTheme, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSourcePath, sanitizeHtml, useAnalytics, useApp, useCart, useCheckout, useCollection, useCollectionOptional, useCollections, useCurrency, useCurrentTemplate, useCustomer, useCustomerActions, useCustomerAddresses, useDirection, useFieldTranslation, useGiftCardBalance, useImage, useLocale, useLocalization, useMoney, useNavigation, useNumberFormat, useOrder, useOrders, usePage, useProduct, useProductOptional, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist };
+export { AddToCartButton, type AddressInput, type AnalyticsApi, type AnalyticsPayload, type AppManifestBlock, type AppPayload, type AppState, Block, BlockInstance, BlockProps$1 as BlockProps, BlockSchema, Cart, CartContext, type CheckoutAddress, type CheckoutApi, type CheckoutSessionState, type CheckoutStep, Collection, CollectionCard, type CollectionCardProps, type CollectionCardSlots, CollectionContext, CollectionProvider, type CurrencyConfig, type CurrencyState, CurrencySwitcher, type CurrencySwitcherProps, Customer, type CustomerAddress, type CustomerAddressesState, CustomerContext, type DefineBlockInput, type DefineSectionInput, type DefinedBlock, type DefinedSection, type DynamicResolveContext, type DynamicSourceRef, EditableImage, type EditableImageProps, EditableText, type EditableTextProps, type FocalSrcOptions, Form, type GiftCardBalance, ICON_NAMES, Icon, IconMap, type IconProps, Image, type ImageTransform, Link, type LocaleBundle, type LocaleMessages, LocaleSwitcher, type LocaleSwitcherProps, LocalizationContext, type MenuItemData, Money, MountResult, NavigationContext, type NavigationItem, type NavigationState, NuMuProvider, type OrderDetail, type OrderListEntry, type OrderListState, type OrderState, Page, PageContext, type PlaceOrderResult, Product, ProductCard, type ProductCardProps, type ProductCardSlots, ProductContext, ProductProvider, ProductVariant, type RelatedProductsState, type ReorderResult, type ReorderSkipReason, type ReorderSkippedItem, RichText, type RichTextProps, type SearchResults, type SearchState, Section, SectionContext, SectionInstance, SectionProps$1 as SectionProps, SectionSchema, type ShippingRateOption, ShopContext, type ShopWithHelpers, Store, type ThemeMountContext, type ThemeMountPage, type ThemeRenderArgs, ThemeSettingsContext, ThemeSettingsV3, type UseGiftCardBalance, type UseReorder, type UseSearchOptions, type UseShippingRatesOptions, type UseShippingRatesState, type UseVariantSelection, type WishlistItem, type WishlistState, applyGlobalStyleTokens, applyImageTransform, asImageTransform, assetUrl, availableValues, buildLocaleBundle, clearSdkSingleton, collectBlocks, collectSections, defaultVariant, defineBlock, defineSection, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, mountTheme, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSourcePath, sanitizeHtml, useAnalytics, useApp, useCart, useCheckout, useCollection, useCollectionOptional, useCollections, useCurrency, useCurrentTemplate, useCustomer, useCustomerActions, useCustomerAddresses, useDirection, useFieldTranslation, useGiftCardBalance, useImage, useLocale, useLocalization, useMoney, useNavigation, useNumberFormat, useOrder, useOrders, usePage, useProduct, useProductOptional, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { S as Store, e as Product, b as Collection, C as Cart, c as Customer, P as Page, g as ProductVariant } from './entities-iiuRSPpk.js';
-export { A as Address, a as CartItem, O as Order, d as OrderItem, f as ProductImage, h as ProductOption } from './entities-iiuRSPpk.js';
+import { S as Store, e as Product, b as Collection, C as Cart, c as Customer, P as Page, g as ProductVariant } from './entities-C8B2U-V0.js';
+export { A as Address, a as CartItem, O as Order, d as OrderItem, f as ProductImage, h as ProductOption } from './entities-C8B2U-V0.js';
 import { T as ThemeSettingsV3, c as SectionInstance, M as MountResult, B as BlockInstance, b as BlockSchema, a as BlockProps$1, f as SectionSchema, e as SectionProps$1 } from './theme-D0QybTQS.js';
 export { E as ExternalThemeMetadata, h as MAX_BLOCK_DEPTH, P as PageTemplate, i as PresetBlock, S as SectionGroup, d as SectionPreset, g as SettingDefinition } from './theme-D0QybTQS.js';
 import * as react from 'react';
-import { ReactNode, ElementType, ImgHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
+import { ReactNode, ElementType, CSSProperties, ImgHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
 export { resolveThemeSettings } from './normalize.js';
 
 /**
@@ -1263,6 +1263,78 @@ interface MoneyProps {
  */
 declare function Money({ amount, currency, compareAt, className, as, }: MoneyProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
 
+/**
+ * Non-destructive image framing transform (focal / zoom / rotation).
+ *
+ * An image setting value may carry optional `transform` metadata
+ * (`{ url, alt, transform }`). The original asset is never modified — the
+ * storefront reproduces the framing purely from these numbers via CSS, so the
+ * SAME uploaded image can be framed differently per placement (hero vs card).
+ *
+ * Hoisted into the SDK (was duplicated in every theme's `_shared.ts` and in
+ * the merchant-hub editor's `imageTransform.ts`). The editor copy MUST stay
+ * equivalent so its preview matches the storefront render exactly.
+ */
+interface ImageTransform {
+    v: 1;
+    focal?: {
+        x: number;
+        y: number;
+    };
+    zoom?: number;
+    rotation?: number;
+    fit?: "cover" | "contain";
+}
+/** Read the transform off an image setting value (string | {url,alt,transform}). */
+declare function asImageTransform(v: unknown): ImageTransform | undefined;
+/**
+ * CSS reproducing the transform on an `<img>` that fills a fixed-aspect,
+ * overflow-hidden frame. Default fit is `cover` (Shopify-style: the image
+ * fills its frame, cropping to the focal point) — pass `"contain"` only for
+ * placements that must show the whole image (e.g. a logo). Empty object when
+ * there is no transform AND the caller wants the section's own className to
+ * decide; pass an explicit `fit` to force a default even without a transform.
+ */
+declare function applyImageTransform(t: ImageTransform | undefined | null, fit?: "cover" | "contain"): CSSProperties;
+/**
+ * focalSrc — build a URL for a server-side, focal-point-aware image transform.
+ *
+ * OPT-IN helper. A theme that wants a bandwidth-efficient SMART CROP for a big
+ * image (typically a hero) calls this to point the <img src> at the storefront's
+ * `/api/image-transform` endpoint with focal/aspect params. The endpoint honors
+ * them only when Cloudflare Image Resizing is enabled on the zone
+ * (NUMU_CF_IMAGE_RESIZING=1); otherwise it gracefully ignores them and serves a
+ * plain resized image — so the theme's CSS `applyImageTransform` framing remains
+ * the correctness baseline either way. This is purely a perf optimization.
+ *
+ * Returns a RELATIVE path (`/api/image-transform?...`) — the SDK runs
+ * same-origin inside the storefront, matching how <Form>/useShop build URLs.
+ *
+ * @example
+ *   <img
+ *     src={focalSrc(hero.url, { width: 1600, focal: t?.focal, aspect: "16/9" })}
+ *     style={applyImageTransform(t, "cover")}   // CSS still frames as fallback
+ *   />
+ */
+interface FocalSrcOptions {
+    /** Target width in px (e.g. 1600 for a desktop hero). Required for a crop. */
+    width?: number;
+    /** Focal point, normalized 0..1 (0.5,0.5 = center). */
+    focal?: {
+        x?: number;
+        y?: number;
+    };
+    /** Target aspect ratio "W/H" (e.g. "16/9"); drives the crop box height. */
+    aspect?: string;
+    /** Crop mode. Default "cover". */
+    fit?: "cover" | "contain";
+    /** Quality 1..100. */
+    quality?: number;
+    /** Output format. */
+    format?: "webp" | "avif" | "jpeg" | "jpg" | "png";
+}
+declare function focalSrc(url: string | null | undefined, options?: FocalSrcOptions): string;
+
 interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet"> {
     src: string | undefined | null;
     alt: string;
@@ -1283,6 +1355,29 @@ interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "
      * "eager" for above-the-fold imagery.
      */
     loading?: "eager" | "lazy";
+    /**
+     * Shopify-style frame. When set (e.g. "3/4", "16/9", "1/1") the image is
+     * wrapped in a fixed-aspect, overflow-hidden box and the `<img>` fills it.
+     * Combined with `objectFit="cover"` (the default) this guarantees the image
+     * ALWAYS fits its frame — no letterboxing, no overflow — cropping to the
+     * focal point. Omit to render a bare `<img>` (legacy behavior).
+     */
+    aspectRatio?: string;
+    /**
+     * How the image fills its box. Default "cover" (fill + crop) — the merchant
+     * never sees a letterboxed/squashed image. Use "contain" for logos/badges
+     * that must show in full.
+     */
+    objectFit?: "cover" | "contain" | "fill" | "scale-down" | "none";
+    /** CSS object-position (e.g. "50% 50%"). Ignored if `transform` is set. */
+    objectPosition?: string;
+    /**
+     * Non-destructive focal/zoom/rotation metadata from the image setting value
+     * (`asImageTransform(setting)`). When present it drives object-fit +
+     * object-position + scale/rotate so the editor preview and the live render
+     * match exactly. Overrides `objectFit`/`objectPosition`.
+     */
+    transform?: ImageTransform | null;
 }
 /**
  * <Image> — drop-in replacement for `<img>` with srcSet + lazy loading
@@ -1293,7 +1388,7 @@ interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "
  * If `src` is empty/null, renders a placeholder div so the layout
  * doesn't shift while a merchant configures images in the customizer.
  */
-declare function Image({ src, alt, sizes, responsive, loading, className, style, ...rest }: ImageProps): react.JSX.Element;
+declare function Image({ src, alt, sizes, responsive, loading, aspectRatio, objectFit, objectPosition, transform, className, style, ...rest }: ImageProps): react.JSX.Element;
 
 interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
     /**
@@ -2097,4 +2192,4 @@ declare function pickTranslations(bundle: LocaleBundle, locale: string): LocaleM
  */
 declare function buildLocaleBundle<T extends Record<string, unknown>>(modules: T): LocaleBundle;
 
-export { AddToCartButton, type AddressInput, type AnalyticsApi, type AnalyticsPayload, type AppManifestBlock, type AppPayload, type AppState, Block, BlockInstance, BlockProps$1 as BlockProps, BlockSchema, Cart, CartContext, type CheckoutAddress, type CheckoutApi, type CheckoutSessionState, type CheckoutStep, Collection, CollectionCard, type CollectionCardProps, type CollectionCardSlots, CollectionContext, CollectionProvider, type CurrencyConfig, type CurrencyState, CurrencySwitcher, type CurrencySwitcherProps, Customer, type CustomerAddress, type CustomerAddressesState, CustomerContext, type DefineBlockInput, type DefineSectionInput, type DefinedBlock, type DefinedSection, type DynamicResolveContext, type DynamicSourceRef, EditableImage, type EditableImageProps, EditableText, type EditableTextProps, Form, type GiftCardBalance, ICON_NAMES, Icon, IconMap, type IconProps, Image, Link, type LocaleBundle, type LocaleMessages, LocaleSwitcher, type LocaleSwitcherProps, LocalizationContext, type MenuItemData, Money, MountResult, NavigationContext, type NavigationItem, type NavigationState, NuMuProvider, type OrderDetail, type OrderListEntry, type OrderListState, type OrderState, Page, PageContext, type PlaceOrderResult, Product, ProductCard, type ProductCardProps, type ProductCardSlots, ProductContext, ProductProvider, ProductVariant, type RelatedProductsState, type ReorderResult, type ReorderSkipReason, type ReorderSkippedItem, RichText, type RichTextProps, type SearchResults, type SearchState, Section, SectionContext, SectionInstance, SectionProps$1 as SectionProps, SectionSchema, type ShippingRateOption, ShopContext, type ShopWithHelpers, Store, type ThemeMountContext, type ThemeMountPage, type ThemeRenderArgs, ThemeSettingsContext, ThemeSettingsV3, type UseGiftCardBalance, type UseReorder, type UseSearchOptions, type UseShippingRatesOptions, type UseShippingRatesState, type UseVariantSelection, type WishlistItem, type WishlistState, applyGlobalStyleTokens, assetUrl, availableValues, buildLocaleBundle, clearSdkSingleton, collectBlocks, collectSections, defaultVariant, defineBlock, defineSection, dynamicSource, findVariantByOptions, flattenMessages, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, mountTheme, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSourcePath, sanitizeHtml, useAnalytics, useApp, useCart, useCheckout, useCollection, useCollectionOptional, useCollections, useCurrency, useCurrentTemplate, useCustomer, useCustomerActions, useCustomerAddresses, useDirection, useFieldTranslation, useGiftCardBalance, useImage, useLocale, useLocalization, useMoney, useNavigation, useNumberFormat, useOrder, useOrders, usePage, useProduct, useProductOptional, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist };
+export { AddToCartButton, type AddressInput, type AnalyticsApi, type AnalyticsPayload, type AppManifestBlock, type AppPayload, type AppState, Block, BlockInstance, BlockProps$1 as BlockProps, BlockSchema, Cart, CartContext, type CheckoutAddress, type CheckoutApi, type CheckoutSessionState, type CheckoutStep, Collection, CollectionCard, type CollectionCardProps, type CollectionCardSlots, CollectionContext, CollectionProvider, type CurrencyConfig, type CurrencyState, CurrencySwitcher, type CurrencySwitcherProps, Customer, type CustomerAddress, type CustomerAddressesState, CustomerContext, type DefineBlockInput, type DefineSectionInput, type DefinedBlock, type DefinedSection, type DynamicResolveContext, type DynamicSourceRef, EditableImage, type EditableImageProps, EditableText, type EditableTextProps, type FocalSrcOptions, Form, type GiftCardBalance, ICON_NAMES, Icon, IconMap, type IconProps, Image, type ImageTransform, Link, type LocaleBundle, type LocaleMessages, LocaleSwitcher, type LocaleSwitcherProps, LocalizationContext, type MenuItemData, Money, MountResult, NavigationContext, type NavigationItem, type NavigationState, NuMuProvider, type OrderDetail, type OrderListEntry, type OrderListState, type OrderState, Page, PageContext, type PlaceOrderResult, Product, ProductCard, type ProductCardProps, type ProductCardSlots, ProductContext, ProductProvider, ProductVariant, type RelatedProductsState, type ReorderResult, type ReorderSkipReason, type ReorderSkippedItem, RichText, type RichTextProps, type SearchResults, type SearchState, Section, SectionContext, SectionInstance, SectionProps$1 as SectionProps, SectionSchema, type ShippingRateOption, ShopContext, type ShopWithHelpers, Store, type ThemeMountContext, type ThemeMountPage, type ThemeRenderArgs, ThemeSettingsContext, ThemeSettingsV3, type UseGiftCardBalance, type UseReorder, type UseSearchOptions, type UseShippingRatesOptions, type UseShippingRatesState, type UseVariantSelection, type WishlistItem, type WishlistState, applyGlobalStyleTokens, applyImageTransform, asImageTransform, assetUrl, availableValues, buildLocaleBundle, clearSdkSingleton, collectBlocks, collectSections, defaultVariant, defineBlock, defineSection, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, mountTheme, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSourcePath, sanitizeHtml, useAnalytics, useApp, useCart, useCheckout, useCollection, useCollectionOptional, useCollections, useCurrency, useCurrentTemplate, useCustomer, useCustomerActions, useCustomerAddresses, useDirection, useFieldTranslation, useGiftCardBalance, useImage, useLocale, useLocalization, useMoney, useNavigation, useNumberFormat, useOrder, useOrders, usePage, useProduct, useProductOptional, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist };

package/dist/index.mjs

@@ -1455,6 +1455,12 @@ function normalizeCartFromServer(cart) {
     items: Array.isArray(cart.items) ? cart.items.map((it) => ({ ...it, price: toMajor(it.price) })) : []
   };
 }
+function unwrapCart(json) {
+  if (json && typeof json === "object" && "data" in json && json.data && typeof json.data === "object") {
+    return json.data;
+  }
+  return json;
+}
 function readCsrfCookie() {
   if (typeof document === "undefined") return null;
   const match = document.cookie.match(/(?:^|;\s*)numu_csrf=([^;]+)/);
@@ -1474,8 +1480,8 @@ async function postCartMutation(endpoint, body, applyCart, reserveToken) {
     body: body === void 0 ? void 0 : JSON.stringify(body)
   });
   if (!res.ok) return;
-  const data = await res.json();
-  applyCart(data);
+  const json = await res.json();
+  applyCart(unwrapCart(json));
 }
 function NuMuProvider({
   store,
@@ -1655,7 +1661,8 @@ function NuMuProvider({
           cache: "no-store"
         });
         if (!res.ok || cancelled) return;
-        const data = await res.json();
+        const json = await res.json();
+        const data = unwrapCart(json);
         if (data && typeof data === "object") {
           setCart(normalizeCartFromServer(data));
         }
@@ -1702,11 +1709,32 @@ function NuMuProvider({
   );
   const addItem = useCallback(
     async (productId, variantId, quantity) => {
+      const eventId = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}`;
+      const qty = quantity || 1;
       await mutate("/api/cart/add", {
         product_id: productId,
         variant_id: variantId,
-        quantity: quantity || 1
+        quantity: qty,
+        _event_id: eventId
       });
+      try {
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(
+            new CustomEvent("numu:analytics:event", {
+              detail: {
+                event: "add_to_cart",
+                payload: {
+                  content_ids: [productId],
+                  content_type: "product",
+                  num_items: qty
+                },
+                event_id: eventId
+              }
+            })
+          );
+        }
+      } catch {
+      }
     },
     [mutate]
   );
@@ -2131,6 +2159,46 @@ function Money({
     children
   );
 }
+
+// src/utils/imageTransform.ts
+var _clampT = (n, lo, hi) => Math.min(hi, Math.max(lo, Number.isFinite(n) ? n : lo));
+function asImageTransform(v) {
+  if (v && typeof v === "object" && "transform" in v) {
+    const t = v.transform;
+    if (t && typeof t === "object") return t;
+  }
+  return void 0;
+}
+function applyImageTransform(t, fit = "cover") {
+  if (!t) return { objectFit: fit };
+  const fx = Math.round(_clampT(t.focal?.x ?? 0.5, 0, 1) * 1e4) / 100;
+  const fy = Math.round(_clampT(t.focal?.y ?? 0.5, 0, 1) * 1e4) / 100;
+  const zoom = _clampT(t.zoom ?? 1, 1, 4);
+  const rot = ((t.rotation ?? 0) % 360 + 360) % 360;
+  const effFit = t.fit ?? fit;
+  const style = {
+    transform: `scale(${zoom}) rotate(${rot}deg)`,
+    transformOrigin: `${fx}% ${fy}%`,
+    objectFit: effFit
+  };
+  if (effFit === "cover") style.objectPosition = `${fx}% ${fy}%`;
+  return style;
+}
+var clamp01 = (n) => Math.min(1, Math.max(0, n));
+function focalSrc(url, options = {}) {
+  if (!url) return "";
+  if (url.startsWith("data:") || /[?&](fp-x|fp-y)=/.test(url)) return url;
+  const p = new URLSearchParams();
+  p.set("url", url);
+  if (options.width) p.set("w", String(Math.round(options.width)));
+  if (options.focal?.x != null) p.set("fp-x", String(clamp01(options.focal.x)));
+  if (options.focal?.y != null) p.set("fp-y", String(clamp01(options.focal.y)));
+  if (options.aspect) p.set("ar", options.aspect);
+  if (options.fit) p.set("fit", options.fit);
+  if (options.quality) p.set("q", String(Math.min(100, Math.max(1, Math.round(options.quality)))));
+  if (options.format) p.set("f", options.format.toLowerCase());
+  return `/api/image-transform?${p.toString()}`;
+}
 var DEFAULT_WIDTHS2 = [320, 480, 640, 768, 1024, 1280, 1600, 1920];
 function buildSrcSet(src, widths = DEFAULT_WIDTHS2) {
   if (/[?&]w=\d+/.test(src)) return "";
@@ -2143,27 +2211,48 @@ function Image({
   sizes = "(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw",
   responsive = true,
   loading = "lazy",
+  aspectRatio,
+  objectFit,
+  objectPosition,
+  transform,
   className,
   style,
   ...rest
 }) {
+  const framed = Boolean(aspectRatio);
   if (!src) {
-    return /* @__PURE__ */ jsx(
+    const placeholder = /* @__PURE__ */ jsx(
       "div",
       {
-        className,
+        className: framed ? void 0 : className,
         role: "img",
         "aria-label": alt,
         style: {
           backgroundColor: "rgba(0,0,0,0.05)",
           display: "block",
-          ...style
+          width: "100%",
+          height: framed ? "100%" : void 0,
+          ...framed ? {} : style
         }
       }
     );
+    if (!framed) return placeholder;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className,
+        style: { display: "block", aspectRatio, overflow: "hidden", ...style },
+        children: placeholder
+      }
+    );
   }
   const srcSet = responsive ? buildSrcSet(src) : void 0;
-  return /* @__PURE__ */ jsx(
+  const effFit = objectFit ?? (framed ? "cover" : void 0);
+  const fitStyle = transform ? applyImageTransform(transform, effFit === "contain" ? "contain" : "cover") : {
+    ...effFit ? { objectFit: effFit } : {},
+    ...objectPosition ? { objectPosition } : {}
+  };
+  const img = /* @__PURE__ */ jsx(
     "img",
     {
       src,
@@ -2172,11 +2261,27 @@ function Image({
       sizes: srcSet ? sizes : void 0,
       loading,
       decoding: "async",
-      className,
-      style,
+      className: framed ? void 0 : className,
+      style: framed ? { width: "100%", height: "100%", display: "block", ...fitStyle } : { ...fitStyle, ...style },
       ...rest
     }
   );
+  if (!framed) return img;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      style: {
+        display: "block",
+        position: "relative",
+        width: "100%",
+        aspectRatio,
+        overflow: "hidden",
+        ...style
+      },
+      children: img
+    }
+  );
 }
 var ABSOLUTE_URL = /^[a-z]+:|^\/\//i;
 function Link({ to, children, ...rest }) {
@@ -3376,6 +3481,6 @@ function buildLocaleBundle(modules) {
   return bundle;
 }
 
-export { AddToCartButton, Block, CartContext, CollectionCard, CollectionContext, CollectionProvider, CurrencySwitcher, CustomerContext, EditableImage, EditableText, Form, ICON_NAMES, Icon, IconMap, Image, Link, LocaleSwitcher, LocalizationContext, MAX_BLOCK_DEPTH, Money, NavigationContext, NuMuProvider, PageContext, ProductCard, ProductContext, ProductProvider, RichText, Section, SectionContext, ShopContext, ThemeSettingsContext, applyGlobalStyleTokens, assetUrl, availableValues, buildLocaleBundle, clearSdkSingleton, collectBlocks, collectSections, defaultVariant, defineBlock, defineSection, dynamicSource, findVariantByOptions, flattenMessages, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, mountTheme, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSourcePath, resolveThemeSettings, sanitizeHtml, useAnalytics, useApp, useCart, useCheckout, useCollection, useCollectionOptional, useCollections, useCurrency, useCurrentTemplate, useCustomer, useCustomerActions, useCustomerAddresses, useDirection, useFieldTranslation, useGiftCardBalance, useImage, useLocale, useLocalization, useMoney, useNavigation, useNumberFormat, useOrder, useOrders, usePage, useProduct, useProductOptional, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist };
+export { AddToCartButton, Block, CartContext, CollectionCard, CollectionContext, CollectionProvider, CurrencySwitcher, CustomerContext, EditableImage, EditableText, Form, ICON_NAMES, Icon, IconMap, Image, Link, LocaleSwitcher, LocalizationContext, MAX_BLOCK_DEPTH, Money, NavigationContext, NuMuProvider, PageContext, ProductCard, ProductContext, ProductProvider, RichText, Section, SectionContext, ShopContext, ThemeSettingsContext, applyGlobalStyleTokens, applyImageTransform, asImageTransform, assetUrl, availableValues, buildLocaleBundle, clearSdkSingleton, collectBlocks, collectSections, defaultVariant, defineBlock, defineSection, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, mountTheme, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSourcePath, resolveThemeSettings, sanitizeHtml, useAnalytics, useApp, useCart, useCheckout, useCollection, useCollectionOptional, useCollections, useCurrency, useCurrentTemplate, useCustomer, useCustomerActions, useCustomerAddresses, useDirection, useFieldTranslation, useGiftCardBalance, useImage, useLocale, useLocalization, useMoney, useNavigation, useNumberFormat, useOrder, useOrders, usePage, useProduct, useProductOptional, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map