@numueg/theme-sdk 0.4.0 → 0.5.0

package/dist/index.d.mts

@@ -1286,6 +1286,29 @@ interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "
  */
 declare function Image({ src, alt, sizes, responsive, loading, aspectRatio, objectFit, objectPosition, transform, className, style, ...rest }: ImageProps): react.JSX.Element;
 
+interface LogoProps {
+    /** Explicit logo URL; falls back to global_settings.logo_url then shop.logo_url. */
+    src?: string | null;
+    /** Alt text; falls back to the brand name / shop name. */
+    alt?: string;
+    /** Overrides `global_settings.logo_shape` (none/square/rounded/circle/triangle). */
+    shape?: string;
+    /** Overrides `global_settings.logo_size` (small/medium/large). */
+    size?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** Rendered when there is no logo URL (e.g. brand-name text). */
+    fallback?: ReactNode;
+}
+/**
+ * Engine-level store logo. Reads `logo_url`, `logo_shape`, and `logo_size` from
+ * the theme's global settings (overridable via props), and renders a plain
+ * `<img>` with the chosen shape/size applied via inline styles — so it works in
+ * any theme regardless of its CSS setup and keeps **animated GIF logos playing**
+ * under every shape. Renders `fallback` (or nothing) when no logo is set.
+ */
+declare function Logo({ src, alt, shape, size, className, style, fallback, }: LogoProps): react.JSX.Element;
+
 interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
     /**
      * Path relative to the storefront root, e.g. "/products/foo",
@@ -2051,6 +2074,76 @@ declare function computeGlobalStyleTokens(globalSettings: GlobalSettings): Compu
  */
 declare function applyGlobalStyleTokens(globalSettings: GlobalSettings, el: HTMLElement | null | undefined): void;
 
+/**
+ * Engine-level logo appearance (shape + size).
+ *
+ * A merchant can crop the store logo into a shape and pick its size from the
+ * theme editor's global settings (`logo_shape` / `logo_size`). The logic lives
+ * here — once, in the SDK — so EVERY V3 theme renders the chosen shape the same
+ * way instead of each theme re-implementing it.
+ *
+ * Why inline styles (not Tailwind classes): the SDK is consumed from
+ * `node_modules`, which a theme's Tailwind build does not scan — so utility
+ * classes like `rounded-full` / `h-16` would never be generated. Inline
+ * `CSSProperties` are self-contained and work in any theme regardless of its
+ * CSS setup. The shapes are pure CSS (border-radius / clip-path) applied to a
+ * plain `<img>`, so animated **GIF logos keep playing** under every shape.
+ */
+
+type LogoShape = "none" | "square" | "rounded" | "circle" | "triangle";
+type LogoSize = "small" | "medium" | "large";
+/** Bilingual options for the `logo_shape` global setting (schema authoring). */
+declare const LOGO_SHAPE_OPTIONS: readonly [{
+    readonly value: "none";
+    readonly label: "Original";
+    readonly label_ar: "الأصلي";
+}, {
+    readonly value: "square";
+    readonly label: "Square";
+    readonly label_ar: "مربع";
+}, {
+    readonly value: "rounded";
+    readonly label: "Rounded square";
+    readonly label_ar: "مربع بزوايا دائرية";
+}, {
+    readonly value: "circle";
+    readonly label: "Circle";
+    readonly label_ar: "دائرة";
+}, {
+    readonly value: "triangle";
+    readonly label: "Triangle";
+    readonly label_ar: "مثلث";
+}];
+/** Bilingual options for the `logo_size` global setting (schema authoring). */
+declare const LOGO_SIZE_OPTIONS: readonly [{
+    readonly value: "small";
+    readonly label: "Small";
+    readonly label_ar: "صغير";
+}, {
+    readonly value: "medium";
+    readonly label: "Medium";
+    readonly label_ar: "متوسط";
+}, {
+    readonly value: "large";
+    readonly label: "Large";
+    readonly label_ar: "كبير";
+}];
+/**
+ * Inline style for a logo `<img>` given the merchant's shape + size.
+ *
+ * Returns `undefined` for `none` (and unknown shapes) so the theme keeps its
+ * own native logo sizing untouched — only an explicitly chosen shape overrides
+ * it. A shaped logo gets a fixed square box with `object-fit: cover` plus the
+ * shape (border-radius for square/rounded/circle, clip-path for triangle).
+ */
+declare function logoImgStyle(shape: string | undefined, size: string | undefined): CSSProperties | undefined;
+/**
+ * Derived CSS-custom-property tokens for the chosen logo shape/size. Emitted by
+ * `computeGlobalStyleTokens` so host-rendered surfaces (e.g. the checkout
+ * header) can match the storefront logo. Returns `{}` for `none`.
+ */
+declare function logoStyleTokens(shape: string | undefined, size: string | undefined): Record<string, string>;
+
 /**
  * Theme-bundled locale files: load + merge.
  *
@@ -2109,4 +2202,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, type CheckoutAddress, type CheckoutApi, type CheckoutSessionState, type CheckoutStep, Collection, CollectionCard, type CollectionCardProps, type CollectionCardSlots, CollectionProvider, type ComputedStyleTokens, type CurrencyConfig, type CurrencyState, CurrencySwitcher, type CurrencySwitcherProps, Customer, type CustomerAddress, type CustomerAddressesState, 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, MenuItemData, Money, MountResult, type NavigationItem, type NavigationState, NuMuProvider, type OrderDetail, type OrderListEntry, type OrderListState, type OrderState, Page, type PlaceOrderResult, Product, ProductCard, type ProductCardProps, type ProductCardSlots, 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, type ShopWithHelpers, SizeChart, Store, type ThemeEntry, ThemeMountContext, ThemeRenderArgs, 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, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSizeChart, 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, useProductSizeChart, 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, type CheckoutAddress, type CheckoutApi, type CheckoutSessionState, type CheckoutStep, Collection, CollectionCard, type CollectionCardProps, type CollectionCardSlots, CollectionProvider, type ComputedStyleTokens, type CurrencyConfig, type CurrencyState, CurrencySwitcher, type CurrencySwitcherProps, Customer, type CustomerAddress, type CustomerAddressesState, 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, LOGO_SHAPE_OPTIONS, LOGO_SIZE_OPTIONS, Link, type LocaleBundle, type LocaleMessages, LocaleSwitcher, type LocaleSwitcherProps, Logo, type LogoProps, type LogoShape, type LogoSize, MenuItemData, Money, MountResult, type NavigationItem, type NavigationState, NuMuProvider, type OrderDetail, type OrderListEntry, type OrderListState, type OrderState, Page, type PlaceOrderResult, Product, ProductCard, type ProductCardProps, type ProductCardSlots, 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, type ShopWithHelpers, SizeChart, Store, type ThemeEntry, ThemeMountContext, ThemeRenderArgs, 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, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, logoImgStyle, logoStyleTokens, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSizeChart, 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, useProductSizeChart, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist };

package/dist/index.d.ts

@@ -1286,6 +1286,29 @@ interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "
  */
 declare function Image({ src, alt, sizes, responsive, loading, aspectRatio, objectFit, objectPosition, transform, className, style, ...rest }: ImageProps): react.JSX.Element;
 
+interface LogoProps {
+    /** Explicit logo URL; falls back to global_settings.logo_url then shop.logo_url. */
+    src?: string | null;
+    /** Alt text; falls back to the brand name / shop name. */
+    alt?: string;
+    /** Overrides `global_settings.logo_shape` (none/square/rounded/circle/triangle). */
+    shape?: string;
+    /** Overrides `global_settings.logo_size` (small/medium/large). */
+    size?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** Rendered when there is no logo URL (e.g. brand-name text). */
+    fallback?: ReactNode;
+}
+/**
+ * Engine-level store logo. Reads `logo_url`, `logo_shape`, and `logo_size` from
+ * the theme's global settings (overridable via props), and renders a plain
+ * `<img>` with the chosen shape/size applied via inline styles — so it works in
+ * any theme regardless of its CSS setup and keeps **animated GIF logos playing**
+ * under every shape. Renders `fallback` (or nothing) when no logo is set.
+ */
+declare function Logo({ src, alt, shape, size, className, style, fallback, }: LogoProps): react.JSX.Element;
+
 interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
     /**
      * Path relative to the storefront root, e.g. "/products/foo",
@@ -2051,6 +2074,76 @@ declare function computeGlobalStyleTokens(globalSettings: GlobalSettings): Compu
  */
 declare function applyGlobalStyleTokens(globalSettings: GlobalSettings, el: HTMLElement | null | undefined): void;
 
+/**
+ * Engine-level logo appearance (shape + size).
+ *
+ * A merchant can crop the store logo into a shape and pick its size from the
+ * theme editor's global settings (`logo_shape` / `logo_size`). The logic lives
+ * here — once, in the SDK — so EVERY V3 theme renders the chosen shape the same
+ * way instead of each theme re-implementing it.
+ *
+ * Why inline styles (not Tailwind classes): the SDK is consumed from
+ * `node_modules`, which a theme's Tailwind build does not scan — so utility
+ * classes like `rounded-full` / `h-16` would never be generated. Inline
+ * `CSSProperties` are self-contained and work in any theme regardless of its
+ * CSS setup. The shapes are pure CSS (border-radius / clip-path) applied to a
+ * plain `<img>`, so animated **GIF logos keep playing** under every shape.
+ */
+
+type LogoShape = "none" | "square" | "rounded" | "circle" | "triangle";
+type LogoSize = "small" | "medium" | "large";
+/** Bilingual options for the `logo_shape` global setting (schema authoring). */
+declare const LOGO_SHAPE_OPTIONS: readonly [{
+    readonly value: "none";
+    readonly label: "Original";
+    readonly label_ar: "الأصلي";
+}, {
+    readonly value: "square";
+    readonly label: "Square";
+    readonly label_ar: "مربع";
+}, {
+    readonly value: "rounded";
+    readonly label: "Rounded square";
+    readonly label_ar: "مربع بزوايا دائرية";
+}, {
+    readonly value: "circle";
+    readonly label: "Circle";
+    readonly label_ar: "دائرة";
+}, {
+    readonly value: "triangle";
+    readonly label: "Triangle";
+    readonly label_ar: "مثلث";
+}];
+/** Bilingual options for the `logo_size` global setting (schema authoring). */
+declare const LOGO_SIZE_OPTIONS: readonly [{
+    readonly value: "small";
+    readonly label: "Small";
+    readonly label_ar: "صغير";
+}, {
+    readonly value: "medium";
+    readonly label: "Medium";
+    readonly label_ar: "متوسط";
+}, {
+    readonly value: "large";
+    readonly label: "Large";
+    readonly label_ar: "كبير";
+}];
+/**
+ * Inline style for a logo `<img>` given the merchant's shape + size.
+ *
+ * Returns `undefined` for `none` (and unknown shapes) so the theme keeps its
+ * own native logo sizing untouched — only an explicitly chosen shape overrides
+ * it. A shaped logo gets a fixed square box with `object-fit: cover` plus the
+ * shape (border-radius for square/rounded/circle, clip-path for triangle).
+ */
+declare function logoImgStyle(shape: string | undefined, size: string | undefined): CSSProperties | undefined;
+/**
+ * Derived CSS-custom-property tokens for the chosen logo shape/size. Emitted by
+ * `computeGlobalStyleTokens` so host-rendered surfaces (e.g. the checkout
+ * header) can match the storefront logo. Returns `{}` for `none`.
+ */
+declare function logoStyleTokens(shape: string | undefined, size: string | undefined): Record<string, string>;
+
 /**
  * Theme-bundled locale files: load + merge.
  *
@@ -2109,4 +2202,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, type CheckoutAddress, type CheckoutApi, type CheckoutSessionState, type CheckoutStep, Collection, CollectionCard, type CollectionCardProps, type CollectionCardSlots, CollectionProvider, type ComputedStyleTokens, type CurrencyConfig, type CurrencyState, CurrencySwitcher, type CurrencySwitcherProps, Customer, type CustomerAddress, type CustomerAddressesState, 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, MenuItemData, Money, MountResult, type NavigationItem, type NavigationState, NuMuProvider, type OrderDetail, type OrderListEntry, type OrderListState, type OrderState, Page, type PlaceOrderResult, Product, ProductCard, type ProductCardProps, type ProductCardSlots, 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, type ShopWithHelpers, SizeChart, Store, type ThemeEntry, ThemeMountContext, ThemeRenderArgs, 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, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSizeChart, 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, useProductSizeChart, 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, type CheckoutAddress, type CheckoutApi, type CheckoutSessionState, type CheckoutStep, Collection, CollectionCard, type CollectionCardProps, type CollectionCardSlots, CollectionProvider, type ComputedStyleTokens, type CurrencyConfig, type CurrencyState, CurrencySwitcher, type CurrencySwitcherProps, Customer, type CustomerAddress, type CustomerAddressesState, 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, LOGO_SHAPE_OPTIONS, LOGO_SIZE_OPTIONS, Link, type LocaleBundle, type LocaleMessages, LocaleSwitcher, type LocaleSwitcherProps, Logo, type LogoProps, type LogoShape, type LogoSize, MenuItemData, Money, MountResult, type NavigationItem, type NavigationState, NuMuProvider, type OrderDetail, type OrderListEntry, type OrderListState, type OrderState, Page, type PlaceOrderResult, Product, ProductCard, type ProductCardProps, type ProductCardSlots, 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, type ShopWithHelpers, SizeChart, Store, type ThemeEntry, ThemeMountContext, ThemeRenderArgs, 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, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, logoImgStyle, logoStyleTokens, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSizeChart, 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, useProductSizeChart, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist };

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import { createContext, forwardRef, useState, useImperativeHandle, useEffect, useCallback, useMemo, useRef, useContext, StrictMode, createElement, Component } from 'react';
 import { hydrateRoot, createRoot } from 'react-dom/client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 // src/types/theme.ts
 var MAX_BLOCK_DEPTH = 5;
 
 // src/validation/index.ts
 var THEME_CONTRACT_VERSION = 1;
-var SDK_VERSION = "0.4.0" ;
+var SDK_VERSION = "0.5.0" ;
 var REQUIRED_TEMPLATES = [
   "home",
   "product",
@@ -2328,6 +2328,64 @@ function NuMuProvider({
 function ProductProvider({ product, children }) {
   return /* @__PURE__ */ jsx(ProductContext.Provider, { value: product, children });
 }
+function CollectionProvider({ collection, children }) {
+  return /* @__PURE__ */ jsx(CollectionContext.Provider, { value: collection, children });
+}
+
+// src/utils/logoStyle.ts
+var LOGO_SHAPE_OPTIONS = [
+  { value: "none", label: "Original", label_ar: "\u0627\u0644\u0623\u0635\u0644\u064A" },
+  { value: "square", label: "Square", label_ar: "\u0645\u0631\u0628\u0639" },
+  { value: "rounded", label: "Rounded square", label_ar: "\u0645\u0631\u0628\u0639 \u0628\u0632\u0648\u0627\u064A\u0627 \u062F\u0627\u0626\u0631\u064A\u0629" },
+  { value: "circle", label: "Circle", label_ar: "\u062F\u0627\u0626\u0631\u0629" },
+  { value: "triangle", label: "Triangle", label_ar: "\u0645\u062B\u0644\u062B" }
+];
+var LOGO_SIZE_OPTIONS = [
+  { value: "small", label: "Small", label_ar: "\u0635\u063A\u064A\u0631" },
+  { value: "medium", label: "Medium", label_ar: "\u0645\u062A\u0648\u0633\u0637" },
+  { value: "large", label: "Large", label_ar: "\u0643\u0628\u064A\u0631" }
+];
+var SHAPED_PX = {
+  small: { plain: 32, rounded: 48 },
+  medium: { plain: 40, rounded: 64 },
+  large: { plain: 56, rounded: 80 }
+};
+function normalizeSize(size) {
+  return size === "large" || size === "medium" ? size : "small";
+}
+function logoImgStyle(shape, size) {
+  if (!shape || shape === "none") return void 0;
+  const s = normalizeSize(size);
+  const isRound = shape === "circle" || shape === "rounded";
+  const px = isRound ? SHAPED_PX[s].rounded : SHAPED_PX[s].plain;
+  const base = {
+    height: px,
+    width: px,
+    objectFit: "cover",
+    flex: "0 0 auto"
+  };
+  switch (shape) {
+    case "circle":
+      return { ...base, borderRadius: "9999px" };
+    case "rounded":
+      return { ...base, borderRadius: "0.5rem" };
+    case "triangle":
+      return { ...base, clipPath: "polygon(50% 0%, 100% 100%, 0% 100%)" };
+    case "square":
+    default:
+      return base;
+  }
+}
+function logoStyleTokens(shape, size) {
+  const style = logoImgStyle(shape, size);
+  if (!style) return {};
+  const box = `${style.height}px`;
+  return {
+    "--theme-logo-box": box,
+    "--theme-logo-radius": typeof style.borderRadius === "string" ? style.borderRadius : "0",
+    "--theme-logo-clip": typeof style.clipPath === "string" ? style.clipPath : "none"
+  };
+}
 
 // src/utils/styleTokens.ts
 var COLOR_ROLE_ALIASES = {
@@ -2468,6 +2526,12 @@ function computeGlobalStyleTokens(globalSettings) {
       pushHref(FONT_REGISTRY[value]?.href);
     }
   }
+  const gs = globalSettings;
+  const logoTokens = logoStyleTokens(
+    typeof gs.logo_shape === "string" ? gs.logo_shape : void 0,
+    typeof gs.logo_size === "string" ? gs.logo_size : void 0
+  );
+  for (const [k, v] of Object.entries(logoTokens)) cssVars[k] = v;
   return { cssVars, fontHrefs };
 }
 function applyGlobalStyleTokens(globalSettings, el) {
@@ -2510,6 +2574,16 @@ function pickDemo(ctx, themeSettings) {
   const t = themeSettings.templates;
   return !t || Object.keys(t).length === 0;
 }
+function wrapEntityProviders(app, pageData) {
+  let inner = app;
+  if (pageData.collection) {
+    inner = /* @__PURE__ */ jsx(CollectionProvider, { collection: pageData.collection, children: inner });
+  }
+  if (pageData.product) {
+    inner = /* @__PURE__ */ jsx(ProductProvider, { product: pageData.product, children: inner });
+  }
+  return inner;
+}
 var ThemeMountBridge = forwardRef(function ThemeMountBridge2({ ctx, mountEl, renderApp }, ref) {
   const [themeSettings, setThemeSettings] = useState(
     ctx.themeSettings
@@ -2550,7 +2624,7 @@ var ThemeMountBridge = forwardRef(function ThemeMountBridge2({ ctx, mountEl, ren
       initialProducts: pageData.products,
       initialCollections: pageData.collections,
       currentTemplate: template,
-      children: pageData.product ? /* @__PURE__ */ jsx(ProductProvider, { product: pageData.product, children: app }) : app
+      children: wrapEntityProviders(app, pageData)
     }
   );
 });
@@ -2586,9 +2660,6 @@ function defineThemeEntry(renderApp) {
     createApp: (ctx) => buildThemeElement(ctx, null, renderApp)
   };
 }
-function CollectionProvider({ collection, children }) {
-  return /* @__PURE__ */ jsx(CollectionContext.Provider, { value: collection, children });
-}
 function Money({
   amount,
   currency,
@@ -2739,6 +2810,43 @@ function Image({
     }
   );
 }
+var str = (v) => typeof v === "string" ? v : "";
+var NONE_HEIGHT = { small: 28, medium: 36, large: 48 };
+function Logo({
+  src,
+  alt,
+  shape,
+  size,
+  className,
+  style,
+  fallback
+}) {
+  const settings = useThemeSettings();
+  const shop = useShop();
+  const g = settings?.global_settings ?? {};
+  const url = str(src) || str(g.logo_url) || shop?.logo_url || "";
+  const resolvedShape = shape || str(g.logo_shape) || "none";
+  const resolvedSize = size || str(g.logo_size) || "small";
+  const altText = alt || str(g.brand_name) || shop?.name || "";
+  if (!url) return /* @__PURE__ */ jsx(Fragment, { children: fallback ?? null });
+  const shaped = resolvedShape !== "none";
+  const imgStyle = shaped ? { ...logoImgStyle(resolvedShape, resolvedSize), ...style } : {
+    height: NONE_HEIGHT[resolvedSize] ?? NONE_HEIGHT.small,
+    width: "auto",
+    objectFit: "contain",
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: url,
+      alt: altText,
+      className,
+      style: imgStyle,
+      loading: "eager"
+    }
+  );
+}
 var ABSOLUTE_URL = /^[a-z]+:|^\/\//i;
 function Link({ to, children, ...rest }) {
   const shop = useShop();
@@ -3949,6 +4057,6 @@ function buildLocaleBundle(modules) {
   return bundle;
 }
 
-export { AddToCartButton, Block, CartContext, CollectionCard, CollectionContext, CollectionProvider, CurrencySwitcher, CustomerContext, EditableImage, EditableText, Form, ICON_NAMES, Icon, IconMap, Image, KNOWN_SETTING_TYPES, KNOWN_TEMPLATES, Link, LocaleSwitcher, LocalizationContext, MAX_BLOCK_DEPTH, Money, NavigationContext, NuMuProvider, PageContext, ProductCard, ProductContext, ProductProvider, REQUIRED_TEMPLATES, RichText, SDK_VERSION, Section, SectionContext, ShopContext, THEME_CONTRACT_VERSION, ThemeSettingsContext, applyGlobalStyleTokens, applyImageTransform, asImageTransform, assetUrl, availableValues, buildLocaleBundle, buildThemeElement, clearSdkSingleton, collectBlocks, collectSections, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, mergeResults, mountTheme, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSizeChart, 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, useProductSizeChart, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist, validateBuiltManifest, validateManifest, validateSectionSchema, validateSettingsAgainstSchema };
+export { AddToCartButton, Block, CartContext, CollectionCard, CollectionContext, CollectionProvider, CurrencySwitcher, CustomerContext, EditableImage, EditableText, Form, ICON_NAMES, Icon, IconMap, Image, KNOWN_SETTING_TYPES, KNOWN_TEMPLATES, LOGO_SHAPE_OPTIONS, LOGO_SIZE_OPTIONS, Link, LocaleSwitcher, LocalizationContext, Logo, MAX_BLOCK_DEPTH, Money, NavigationContext, NuMuProvider, PageContext, ProductCard, ProductContext, ProductProvider, REQUIRED_TEMPLATES, RichText, SDK_VERSION, Section, SectionContext, ShopContext, THEME_CONTRACT_VERSION, ThemeSettingsContext, applyGlobalStyleTokens, applyImageTransform, asImageTransform, assetUrl, availableValues, buildLocaleBundle, buildThemeElement, clearSdkSingleton, collectBlocks, collectSections, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, logoImgStyle, logoStyleTokens, mergeResults, mountTheme, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSizeChart, 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, useProductSizeChart, useProducts, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionOptional, useShippingRates, useShop, useThemeSettings, useTranslation, useVariantSelection, useWishlist, validateBuiltManifest, validateManifest, validateSectionSchema, validateSettingsAgainstSchema };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map