@numueg/theme-sdk 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -9,7 +9,7 @@ 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",
@@ -2330,6 +2330,64 @@ function NuMuProvider({
 function ProductProvider({ product, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ProductContext.Provider, { value: product, children });
 }
+function CollectionProvider({ collection, children }) {
+  return /* @__PURE__ */ jsxRuntime.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 = {
@@ -2470,6 +2528,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) {
@@ -2512,6 +2576,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__ */ jsxRuntime.jsx(CollectionProvider, { collection: pageData.collection, children: inner });
+  }
+  if (pageData.product) {
+    inner = /* @__PURE__ */ jsxRuntime.jsx(ProductProvider, { product: pageData.product, children: inner });
+  }
+  return inner;
+}
 var ThemeMountBridge = react.forwardRef(function ThemeMountBridge2({ ctx, mountEl, renderApp }, ref) {
   const [themeSettings, setThemeSettings] = react.useState(
     ctx.themeSettings
@@ -2552,7 +2626,7 @@ var ThemeMountBridge = react.forwardRef(function ThemeMountBridge2({ ctx, mountE
       initialProducts: pageData.products,
       initialCollections: pageData.collections,
       currentTemplate: template,
-      children: pageData.product ? /* @__PURE__ */ jsxRuntime.jsx(ProductProvider, { product: pageData.product, children: app }) : app
+      children: wrapEntityProviders(app, pageData)
     }
   );
 });
@@ -2588,9 +2662,6 @@ function defineThemeEntry(renderApp) {
     createApp: (ctx) => buildThemeElement(ctx, null, renderApp)
   };
 }
-function CollectionProvider({ collection, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(CollectionContext.Provider, { value: collection, children });
-}
 function Money({
   amount,
   currency,
@@ -2741,6 +2812,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__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.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();
@@ -3968,9 +4076,12 @@ exports.IconMap = IconMap;
 exports.Image = Image;
 exports.KNOWN_SETTING_TYPES = KNOWN_SETTING_TYPES;
 exports.KNOWN_TEMPLATES = KNOWN_TEMPLATES;
+exports.LOGO_SHAPE_OPTIONS = LOGO_SHAPE_OPTIONS;
+exports.LOGO_SIZE_OPTIONS = LOGO_SIZE_OPTIONS;
 exports.Link = Link;
 exports.LocaleSwitcher = LocaleSwitcher;
 exports.LocalizationContext = LocalizationContext;
+exports.Logo = Logo;
 exports.MAX_BLOCK_DEPTH = MAX_BLOCK_DEPTH;
 exports.Money = Money;
 exports.NavigationContext = NavigationContext;
@@ -4012,6 +4123,8 @@ exports.isDefinedBlock = isDefinedBlock;
 exports.isDefinedSection = isDefinedSection;
 exports.isDynamicSource = isDynamicSource;
 exports.isSdkAvailable = isSdkAvailable;
+exports.logoImgStyle = logoImgStyle;
+exports.logoStyleTokens = logoStyleTokens;
 exports.mergeResults = mergeResults;
 exports.mountTheme = mountTheme;
 exports.pickTranslations = pickTranslations;