@numueg/theme-sdk 0.10.0 → 0.12.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 export { resolveThemeSettings } from './chunk-XF2FGIVS.mjs';
-export { KNOWN_SETTING_TYPES, KNOWN_TEMPLATES, REQUIRED_TEMPLATES, SDK_VERSION, THEME_CONTRACT_VERSION, mergeResults, validateBuiltManifest, validateManifest, validateSectionSchema, validateSettingsAgainstSchema } from './chunk-EB2ESBLD.mjs';
-import { ShopContext, ThemeSettingsContext, CurrentTemplateContext, PageContext, LocalizationContext, CurrencyContext, CartContext, CustomerContext, NavigationContext, CollectionContext, ProductContext, useShop, useLocalization, useCustomer, useThemeSettings } from './chunk-4TMO5Y5W.mjs';
-export { CartContext, CollectionContext, CurrencyContext, CustomerContext, LocalizationContext, NavigationContext, PageContext, ProductContext, ShopContext, ThemeSettingsContext, useCollections, useCustomer, useDirection, useFieldTranslation, useLocale, useLocalization, useNumberFormat, usePage, useProducts, useShop, useThemeSettings, useTranslation } from './chunk-4TMO5Y5W.mjs';
+export { KNOWN_SETTING_TYPES, KNOWN_TEMPLATES, REQUIRED_TEMPLATES, SDK_VERSION, THEME_CONTRACT_VERSION, mergeResults, validateBuiltManifest, validateManifest, validateSectionSchema, validateSettingsAgainstSchema } from './chunk-ZECKSIDL.mjs';
+import { ShopContext, ThemeSettingsContext, CurrentTemplateContext, PageContext, LocalizationContext, CurrencyContext, CartContext, CustomerContext, NavigationContext, CollectionContext, ProductContext, useShop, useLocalization, useCustomer, useThemeSettings } from './chunk-ZYZZG4JR.mjs';
+export { CartContext, CollectionContext, CurrencyContext, CustomerContext, LocalizationContext, NavigationContext, PageContext, ProductContext, ShopContext, ThemeSettingsContext, useCollections, useCustomer, useDirection, useFieldTranslation, useLocale, useLocalization, useNumberFormat, usePage, useProducts, useShop, useThemeSettings, useTranslation } from './chunk-ZYZZG4JR.mjs';
 import { createContext, forwardRef, useState, useImperativeHandle, useEffect, useCallback, useMemo, useRef, useContext, useSyncExternalStore, StrictMode, createElement, Component } from 'react';
 import { hydrateRoot, createRoot } from 'react-dom/client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -24,6 +24,20 @@ function useCollection() {
 function useCollectionOptional() {
   return useContext(CollectionContext);
 }
+function useListingHeading(options = {}) {
+  const collection = useContext(CollectionContext);
+  const clean = (v) => typeof v === "string" && v.trim() !== "" ? v.trim() : "";
+  const collectionName = clean(collection?.name);
+  const collectionDescription = clean(
+    collection?.description
+  );
+  return {
+    collection: collection ?? null,
+    isCollection: collectionName !== "",
+    title: collectionName || clean(options.title) || clean(options.defaultTitle) || "",
+    description: collectionDescription || clean(options.description) || ""
+  };
+}
 function useCart() {
   const ctx = useContext(CartContext);
   if (!ctx) throw new Error("useCart must be used within NuMuProvider");
@@ -32,6 +46,59 @@ function useCart() {
 function useCurrentTemplate() {
   return useContext(CurrentTemplateContext);
 }
+function isMetafield(value) {
+  return typeof value === "object" && value !== null && typeof value.namespace === "string" && typeof value.key === "string";
+}
+function pageMetafields(data) {
+  if (!data) return [];
+  const record = data.page;
+  for (const candidate of [record?.metafields, data.metafields]) {
+    if (Array.isArray(candidate)) return candidate.filter(isMetafield);
+  }
+  return [];
+}
+function useMetafields(owner) {
+  const product = useContext(ProductContext);
+  const collection = useContext(CollectionContext);
+  const page = useContext(PageContext);
+  switch (owner) {
+    case "product":
+      return product?.metafields ?? [];
+    case "collection":
+      return collection?.metafields ?? [];
+    case "page":
+      return pageMetafields(page?.data);
+    default:
+      return [];
+  }
+}
+function useMetafield(owner, namespace, key) {
+  const fields = useMetafields(owner);
+  return fields.find((m) => m.namespace === namespace && m.key === key) ?? null;
+}
+function pageData() {
+  return useContext(PageContext)?.data;
+}
+function useBlogs() {
+  const data = pageData();
+  const blogs = data?.blogs;
+  return Array.isArray(blogs) ? blogs : [];
+}
+function useBlog() {
+  const data = pageData();
+  const blog = data?.blog ?? data?.article?.blog;
+  return blog && typeof blog === "object" ? blog : null;
+}
+function useArticles() {
+  const data = pageData();
+  const articles = data?.articles;
+  return Array.isArray(articles) ? articles : [];
+}
+function useArticle() {
+  const data = pageData();
+  const article = data?.article;
+  return article && typeof article === "object" ? article : null;
+}
 var SectionContext = createContext(null);
 function useSection() {
   const ctx = useContext(SectionContext);
@@ -81,16 +148,16 @@ function useCurrency() {
 
 // src/hooks/useMoney.ts
 function useMoney(currencyOverride) {
-  const { formatMoney } = useLocalization();
+  const { formatMoney: formatMoney2 } = useLocalization();
   const shop = useShop();
   const { selected, base, autoConvert, convert } = useCurrency();
   return (amount) => {
     const shouldConvert = autoConvert && !currencyOverride && !!selected && selected !== base;
     if (shouldConvert) {
       const converted = convert(Math.round(amount * 100), selected) / 100;
-      return formatMoney(converted, selected);
+      return formatMoney2(converted, selected);
     }
-    return formatMoney(amount, currencyOverride || shop?.currency);
+    return formatMoney2(amount, currencyOverride || shop?.currency);
   };
 }
 var DEFAULT_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600, 1920];
@@ -588,10 +655,11 @@ function getFingerprint() {
 }
 function dispatchAnalyticsEvent(eventName, payload = {}) {
   if (typeof window === "undefined") return;
+  const eventId = crypto.randomUUID();
   try {
     window.dispatchEvent(
       new CustomEvent("numu:analytics:event", {
-        detail: { event: eventName, payload, ts: Date.now() }
+        detail: { event: eventName, payload, event_id: eventId, ts: Date.now() }
       })
     );
   } catch {
@@ -599,7 +667,7 @@ function dispatchAnalyticsEvent(eventName, payload = {}) {
   const step = EVENT_TO_FUNNEL_STEP[eventName] ?? null;
   const customerId = readCustomerId();
   const body = step ? {
-    event_id: crypto.randomUUID(),
+    event_id: eventId,
     path: window.location.pathname,
     fingerprint: getFingerprint(),
     step,
@@ -610,6 +678,7 @@ function dispatchAnalyticsEvent(eventName, payload = {}) {
   } : {
     event: eventName,
     payload,
+    event_id: eventId,
     ts: Date.now(),
     attribution: readAttribution() ?? void 0,
     customer_id: customerId ?? void 0
@@ -1492,8 +1561,9 @@ async function postCartMutation(endpoint, body, applyCart, reserveToken) {
     return { ok: false, status: res.status, message };
   }
   const json = await res.json();
-  applyCart(unwrapCart(json));
-  return { ok: true, status: res.status };
+  const applied = unwrapCart(json);
+  applyCart(applied);
+  return { ok: true, status: res.status, cart: normalizeCartFromServer(applied) };
 }
 function NuMuProvider({
   store,
@@ -1741,6 +1811,10 @@ function NuMuProvider({
       if (!result.ok) return result;
       try {
         if (typeof window !== "undefined") {
+          const line = result.cart?.items.find(
+            (it) => variantId ? it.variant_id === variantId : it.product_id === productId
+          );
+          const value = line && typeof line.price === "number" && line.price > 0 ? Math.round(line.price * qty * 100) / 100 : void 0;
           window.dispatchEvent(
             new CustomEvent("numu:analytics:event", {
               detail: {
@@ -1748,7 +1822,8 @@ function NuMuProvider({
                 payload: {
                   content_ids: [productId],
                   content_type: "product",
-                  num_items: qty
+                  num_items: qty,
+                  ...value !== void 0 ? { value, currency: result.cart?.currency } : {}
                 },
                 event_id: eventId
               }
@@ -2246,13 +2321,13 @@ function pickDemo(ctx, themeSettings) {
   const t = themeSettings.templates;
   return !t || Object.keys(t).length === 0;
 }
-function wrapEntityProviders(app, pageData) {
+function wrapEntityProviders(app, pageData2) {
   let inner = app;
-  if (pageData.collection) {
-    inner = /* @__PURE__ */ jsx(CollectionProvider, { collection: pageData.collection, children: inner });
+  if (pageData2.collection) {
+    inner = /* @__PURE__ */ jsx(CollectionProvider, { collection: pageData2.collection, children: inner });
   }
-  if (pageData.product) {
-    inner = /* @__PURE__ */ jsx(ProductProvider, { product: pageData.product, children: inner });
+  if (pageData2.product) {
+    inner = /* @__PURE__ */ jsx(ProductProvider, { product: pageData2.product, children: inner });
   }
   return inner;
 }
@@ -2275,7 +2350,7 @@ var ThemeMountBridge = forwardRef(function ThemeMountBridge2({ ctx, mountEl, ren
   const store = pickStore(ctx);
   const template = pickTemplate(ctx);
   const demo = pickDemo(ctx, themeSettings);
-  const pageData = ctx.page?.data ?? {};
+  const pageData2 = ctx.page?.data ?? {};
   const app = renderApp({
     currentTemplate: template,
     demo,
@@ -2293,11 +2368,11 @@ var ThemeMountBridge = forwardRef(function ThemeMountBridge2({ ctx, mountEl, ren
       locale: ctx.locale,
       translations: ctx.translations,
       navigation: ctx.navigation,
-      initialProducts: pageData.products,
-      initialCollections: pageData.collections,
+      initialProducts: pageData2.products,
+      initialCollections: pageData2.collections,
       currentTemplate: template,
       pageTemplate: ctx.page?.template,
-      children: wrapEntityProviders(app, pageData)
+      children: wrapEntityProviders(app, pageData2)
     }
   );
 });
@@ -2340,7 +2415,7 @@ function Money({
   className,
   as = "span"
 }) {
-  const { formatMoney } = useLocalization();
+  const { formatMoney: formatMoney2 } = useLocalization();
   const shop = useShop();
   const { selected, base, autoConvert, convert } = useCurrency();
   const shouldConvert = autoConvert && !currency && !!selected && selected !== base;
@@ -2348,12 +2423,12 @@ function Money({
   const toDisplay = (major) => shouldConvert ? convert(Math.round(major * 100), selected) / 100 : major;
   const showCompare = compareAt != null && compareAt > amount;
   const children = [
-    /* @__PURE__ */ jsx("span", { children: formatMoney(toDisplay(amount), ccy) }, "amt")
+    /* @__PURE__ */ jsx("span", { children: formatMoney2(toDisplay(amount), ccy) }, "amt")
   ];
   if (showCompare) {
     children.push(" ");
     children.push(
-      /* @__PURE__ */ jsx("s", { style: { opacity: 0.6 }, children: formatMoney(toDisplay(compareAt), ccy) }, "cmp")
+      /* @__PURE__ */ jsx("s", { style: { opacity: 0.6 }, children: formatMoney2(toDisplay(compareAt), ccy) }, "cmp")
     );
   }
   return createElement(
@@ -2373,7 +2448,7 @@ function asImageTransform(v) {
   return void 0;
 }
 function applyImageTransform(t, fit = "cover") {
-  if (!t) return { objectFit: fit };
+  if (!t) return {};
   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);
@@ -2576,7 +2651,10 @@ function HeroMedia({
   const activeBase = useMobile ? MOBILE_BASE_WIDTH : DESKTOP_BASE_WIDTH;
   const activeSrc = rawFallback ? activeUrl : focalSrc(activeUrl, { width: activeBase, ...activeCrop });
   const activeSrcSet = rawFallback ? void 0 : heroSrcSet(activeUrl, activeCrop);
-  const fitStyle = applyImageTransform(useMobile ? mobileTransform ?? transform : transform, fit);
+  const fitStyle = {
+    objectFit: fit,
+    ...applyImageTransform(useMobile ? mobileTransform ?? transform : transform, fit)
+  };
   return /* @__PURE__ */ jsx(
     "img",
     {
@@ -2917,6 +2995,20 @@ function Form({
     }
   );
 }
+
+// src/utils/routes.ts
+function productHref(slugOrId) {
+  if (!slugOrId) return "/products";
+  return `/products/${slugOrId}`;
+}
+function collectionHref(category) {
+  if (!category) return "/collections";
+  if (typeof category === "string") {
+    return category ? `/collections/${category}` : "/collections";
+  }
+  const key = category.slug || category.id;
+  return key ? `/collections/${key}` : "/collections";
+}
 function joinClass(...names) {
   return names.filter(Boolean).join(" ");
 }
@@ -2927,7 +3019,7 @@ function ProductCard({
   slots,
   imageSizes
 }) {
-  const target = href ?? `/products/${product.slug}`;
+  const target = href ?? productHref(product.slug);
   const firstImage = product.images?.[0];
   const inStock = product.in_stock;
   const badge = slots?.badge !== void 0 ? slots.badge : inStock ? null : /* @__PURE__ */ jsx("span", { className: "numu-product-card__badge", children: "Sold out" });
@@ -3540,7 +3632,19 @@ function resolveSourcePath(path, ctx) {
       return null;
   }
 }
+function resolveMetafield(metafields, field) {
+  const address = field.slice("metafield:".length);
+  const dot = address.indexOf(".");
+  if (dot === -1) return null;
+  const namespace = address.slice(0, dot);
+  const key = address.slice(dot + 1);
+  const hit = (metafields ?? []).find(
+    (m) => m.namespace === namespace && m.key === key
+  );
+  return hit ? hit.value ?? null : null;
+}
 function resolveProductField(p, field) {
+  if (field.startsWith("metafield:")) return resolveMetafield(p.metafields, field);
   switch (field) {
     case "title":
     case "name":
@@ -3563,6 +3667,7 @@ function resolveProductField(p, field) {
   }
 }
 function resolveCollectionField(c, field) {
+  if (field.startsWith("metafield:")) return resolveMetafield(c.metafields, field);
   switch (field) {
     case "title":
     case "name":
@@ -3745,6 +3850,76 @@ function assetUrl(name) {
   return `${cleanBase}${filename}`;
 }
 
+// src/utils/money.ts
+function resolveLocale(locale) {
+  return locale === "ar" ? "ar-EG" : "en-EG";
+}
+function formatMoney(cents, options = {}) {
+  const { currency, locale, fractionDigits = 0 } = options;
+  const safe = Number.isFinite(cents) ? cents : 0;
+  return new Intl.NumberFormat(resolveLocale(locale), {
+    style: "currency",
+    currency: currency || "EGP",
+    maximumFractionDigits: fractionDigits
+  }).format(safe / 100);
+}
+function formatMoneyMajor(amount, options = {}) {
+  return formatMoney(
+    (Number.isFinite(amount) ? amount : 0) * 100,
+    options
+  );
+}
+function centsToMajor(cents) {
+  return (Number.isFinite(cents) ? cents : 0) / 100;
+}
+function majorToCents(amount) {
+  return Math.round((Number.isFinite(amount) ? amount : 0) * 100);
+}
+
+// src/utils/templates.ts
+function resolveSections(group) {
+  if (!group) return [];
+  if (Array.isArray(group.sections)) {
+    return group.sections.map((instance, idx) => ({
+      id: `${instance.type}-${idx}`,
+      instance
+    }));
+  }
+  const map = group.sections ?? {};
+  const order = group.order ?? Object.keys(map);
+  const out = [];
+  for (const id of order) {
+    const instance = map[id];
+    if (instance) out.push({ id, instance });
+  }
+  return out;
+}
+function selectTemplateSections(hostTemplate, builtinTemplate, isKnown) {
+  const hostSections = resolveSections(hostTemplate);
+  if (hostSections.length === 0) {
+    return resolveSections(builtinTemplate);
+  }
+  const anyKnown = hostSections.some(({ instance }) => isKnown(instance.type));
+  if (!anyKnown) return resolveSections(builtinTemplate);
+  return hostSections.filter(({ instance }) => isKnown(instance.type));
+}
+function selectChromeSections(options) {
+  const { hostGroup, presetGroup, inline, templates, isChrome, isKnown } = options;
+  const known = (list) => list.filter(({ instance }) => isKnown(instance.type));
+  const fromHost = known(resolveSections(hostGroup));
+  if (fromHost.length > 0) return fromHost;
+  if (inline && inline.length > 0) return known(inline);
+  const fromPreset = known(resolveSections(presetGroup));
+  if (fromPreset.length > 0) return fromPreset;
+  for (const template of templates ?? []) {
+    const borrowed = known(resolveSections(template)).filter(
+      ({ instance }) => isChrome(instance.type)
+    );
+    if (borrowed.length > 0) return borrowed;
+  }
+  return [];
+}
+
 // src/utils/locales.ts
 function flattenMessages(source, prefix = "") {
   const out = {};
@@ -3789,6 +3964,6 @@ function buildLocaleBundle(modules) {
   return bundle;
 }
 
-export { AddToCartButton, Block, CollectionCard, CollectionProvider, CurrencySwitcher, EditableImage, EditableText, Form, HeroMedia, ICON_NAMES, Icon, IconMap, Image, LOGO_SHAPE_OPTIONS, LOGO_SIZE_OPTIONS, Link, LocaleSwitcher, Logo, MAX_BLOCK_DEPTH, Money, NAVIGATE_EVENT, NuMuProvider, ProductCard, ProductProvider, RichText, Section, SectionContext, 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, mountTheme, pickTranslations, publishVariantSelection, readVariantSelection, registerReactSingleton, registerSdkSingleton, requestNavigate, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSizeChart, resolveSourcePath, sanitizeHtml, useAnalytics, useApp, useCachedResource, useCart, useCheckout, useCollection, useCollectionOptional, useCurrency, useCurrentTemplate, useCustomerActions, useCustomerAddresses, useGiftCardBalance, useImage, useMoney, useNavigation, useOrder, useOrders, useProduct, useProductOptional, useProductSizeChart, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionGroup, useSectionOptional, useShippingRates, useVariantSelection, useWishlist };
+export { AddToCartButton, Block, CollectionCard, CollectionProvider, CurrencySwitcher, EditableImage, EditableText, Form, HeroMedia, ICON_NAMES, Icon, IconMap, Image, LOGO_SHAPE_OPTIONS, LOGO_SIZE_OPTIONS, Link, LocaleSwitcher, Logo, MAX_BLOCK_DEPTH, Money, NAVIGATE_EVENT, NuMuProvider, ProductCard, ProductProvider, RichText, Section, SectionContext, applyGlobalStyleTokens, applyImageTransform, asImageTransform, assetUrl, availableValues, buildLocaleBundle, buildThemeElement, centsToMajor, clearSdkSingleton, collectBlocks, collectSections, collectionHref, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, formatMoney, formatMoneyMajor, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, logoImgStyle, logoStyleTokens, majorToCents, mountTheme, pickTranslations, productHref, publishVariantSelection, readVariantSelection, registerReactSingleton, registerSdkSingleton, requestNavigate, resolveDynamicValue, resolveFontStack, resolveSections, resolveSettingsMap, resolveSizeChart, resolveSourcePath, sanitizeHtml, selectChromeSections, selectTemplateSections, useAnalytics, useApp, useArticle, useArticles, useBlog, useBlogs, useCachedResource, useCart, useCheckout, useCollection, useCollectionOptional, useCurrency, useCurrentTemplate, useCustomerActions, useCustomerAddresses, useGiftCardBalance, useImage, useListingHeading, useMetafield, useMetafields, useMoney, useNavigation, useOrder, useOrders, useProduct, useProductOptional, useProductSizeChart, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionGroup, useSectionOptional, useShippingRates, useVariantSelection, useWishlist };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map