@numueg/theme-sdk 0.2.3 → 0.3.2

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createContext, forwardRef, useState, useImperativeHandle, useEffect, useCallback, useMemo, useRef, useContext, StrictMode, createElement, Component } from 'react';
-import { createRoot } from 'react-dom/client';
+import { hydrateRoot, createRoot } from 'react-dom/client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/types/theme.ts
@@ -526,9 +526,8 @@ function toNavigationItem(raw, locale) {
     url: raw.url || "/",
     resource_type: mapResourceType(raw.type),
     resource_handle: raw.resource_id ?? null,
-    children: (raw.children ?? []).map(
-      (child) => toNavigationItem(child, locale)
-    )
+    target_visible: raw.target_visible !== false,
+    children: (raw.children ?? []).map((child) => toNavigationItem(child, locale)).filter((child) => child.target_visible)
   };
 }
 function useNavigation(handle, options) {
@@ -538,7 +537,8 @@ function useNavigation(handle, options) {
   const hostProvidedAny = !!navMap && Object.keys(navMap).length > 0;
   const rawItems = handle ? navMap?.[handle] : void 0;
   const hostItems = useMemo(() => {
-    if (rawItems) return rawItems.map((it) => toNavigationItem(it, locale));
+    if (rawItems)
+      return rawItems.map((it) => toNavigationItem(it, locale)).filter((it) => it.target_visible);
     if (hostProvidedAny) return [];
     return null;
   }, [rawItems, hostProvidedAny, locale]);
@@ -940,6 +940,29 @@ function useRelatedProducts(productId, options = {}) {
   }, [productId, limit]);
   return { items, loading, error };
 }
+function useProductSizeChart(productOverride) {
+  const ctxProduct = useProductOptional();
+  const product = productOverride ?? ctxProduct;
+  const shop = useShop();
+  const storeSettings = shop?.settings;
+  return useMemo(
+    () => resolveSizeChart(product?.attributes, storeSettings),
+    [product?.attributes, storeSettings]
+  );
+}
+function hasRows(c) {
+  return !!c && typeof c === "object" && Array.isArray(c.rows) && c.rows.length > 0;
+}
+function resolveSizeChart(productAttributes, storeSettings) {
+  const product = productAttributes?.size_chart;
+  const storeDefault = storeSettings?.size_chart;
+  if (product?.mode === "off") return null;
+  if (product?.mode === "custom") return hasRows(product) ? product : null;
+  if (product?.mode === "default") return hasRows(storeDefault) ? storeDefault : null;
+  if (hasRows(product)) return product;
+  if (hasRows(storeDefault)) return storeDefault;
+  return null;
+}
 var COOKIE_NAME = "numu_currency";
 var COOKIE_MAX_AGE = 60 * 60 * 24 * 30;
 function readCookie(name) {
@@ -1452,7 +1475,15 @@ function normalizeCartFromServer(cart) {
     subtotal: toMajor(cart.subtotal),
     total: toMajor(cart.total),
     ...cart.discount_amount != null ? { discount_amount: toMajor(cart.discount_amount) } : {},
-    items: Array.isArray(cart.items) ? cart.items.map((it) => ({ ...it, price: toMajor(it.price) })) : []
+    items: Array.isArray(cart.items) ? cart.items.map((it) => {
+      const raw = it;
+      return {
+        ...it,
+        name: raw.name || raw.product_name || "",
+        price: toMajor(raw.price ?? raw.unit_price),
+        variant_name: raw.variant_name ?? void 0
+      };
+    }) : []
   };
 }
 function unwrapCart(json) {
@@ -1989,6 +2020,9 @@ function injectFontLink(href) {
   link.setAttribute("data-numu-font", "");
   document.head.appendChild(link);
 }
+function lookupFontStack(value) {
+  return FONT_REGISTRY[value]?.stack ?? value;
+}
 function resolveFontStack(value) {
   const entry = FONT_REGISTRY[value];
   if (entry) {
@@ -1997,39 +2031,69 @@ function resolveFontStack(value) {
   }
   return value;
 }
-function applyGlobalStyleTokens(globalSettings, el) {
-  if (!el || !globalSettings || typeof globalSettings !== "object") return;
-  const style = el.style;
+function computeGlobalStyleTokens(globalSettings) {
+  const cssVars = {};
+  const fontHrefs = [];
+  if (!globalSettings || typeof globalSettings !== "object") {
+    return { cssVars, fontHrefs };
+  }
+  const pushHref = (href) => {
+    if (href && !fontHrefs.includes(href)) fontHrefs.push(href);
+  };
   for (const [key, value] of Object.entries(globalSettings)) {
     if (!key || key.startsWith("__")) continue;
     if (value && typeof value === "object" && !Array.isArray(value)) {
       for (const [role, c] of Object.entries(value)) {
-        if (isColorValue(c)) style.setProperty(`--scheme-${key}-${role}`, c);
+        if (isColorValue(c)) cssVars[`--scheme-${key}-${role}`] = c;
       }
       continue;
     }
     if (isColorValue(value)) {
-      style.setProperty(`--theme-${key}`, value.trim());
+      cssVars[`--theme-${key}`] = value.trim();
       const role = COLOR_ROLE_ALIASES[key];
-      if (role) style.setProperty(`--theme-color-${role}`, value.trim());
+      if (role) cssVars[`--theme-color-${role}`] = value.trim();
       continue;
     }
     if (isFontToken(value)) {
-      const stack = resolveFontStack(value);
-      style.setProperty(`--theme-${key}`, stack);
+      const entry = FONT_REGISTRY[value];
+      cssVars[`--theme-${key}`] = entry.stack;
       const role = FONT_ROLE_ALIASES[key];
-      if (role) style.setProperty(`--theme-font-${role}`, stack);
+      if (role) cssVars[`--theme-font-${role}`] = entry.stack;
+      pushHref(entry.href);
       continue;
     }
     if (typeof value === "string" || typeof value === "number") {
       const v = String(value).trim();
-      if (v) style.setProperty(`--theme-${key}`, v);
+      if (v) cssVars[`--theme-${key}`] = v;
+    }
+  }
+  for (const id of ["heading_font", "body_font"]) {
+    const value = globalSettings[id];
+    if (typeof value === "string" && value.trim()) {
+      cssVars[`--theme-${id}`] = lookupFontStack(value);
+      pushHref(FONT_REGISTRY[value]?.href);
     }
   }
+  return { cssVars, fontHrefs };
+}
+function applyGlobalStyleTokens(globalSettings, el) {
+  if (!el || !globalSettings || typeof globalSettings !== "object") return;
+  const { cssVars, fontHrefs } = computeGlobalStyleTokens(globalSettings);
+  const style = el.style;
+  for (const [prop, value] of Object.entries(cssVars)) {
+    style.setProperty(prop, value);
+  }
+  for (const href of fontHrefs) injectFontLink(href);
 }
 function pickStore(ctx) {
   const s = ctx.storeData ?? ctx.store;
-  if (s) return s;
+  if (s) {
+    const raw = s;
+    if (!raw.currency && raw.default_currency) {
+      return { ...raw, currency: raw.default_currency };
+    }
+    return s;
+  }
   return {
     id: "unknown",
     name: "Store",
@@ -2064,19 +2128,9 @@ var ThemeMountBridge = forwardRef(function ThemeMountBridge2({ ctx, mountEl, ren
     []
   );
   useEffect(() => {
+    if (!mountEl) return;
     const gs = themeSettings.global_settings ?? {};
     applyGlobalStyleTokens(gs, mountEl);
-    const headingFont = gs.heading_font;
-    if (typeof headingFont === "string" && headingFont.trim()) {
-      mountEl.style.setProperty(
-        "--theme-heading_font",
-        resolveFontStack(headingFont)
-      );
-    }
-    const bodyFont = gs.body_font;
-    if (typeof bodyFont === "string" && bodyFont.trim()) {
-      mountEl.style.setProperty("--theme-body_font", resolveFontStack(bodyFont));
-    }
   }, [themeSettings, mountEl]);
   const store = pickStore(ctx);
   const template = pickTemplate(ctx);
@@ -2106,22 +2160,22 @@ var ThemeMountBridge = forwardRef(function ThemeMountBridge2({ ctx, mountEl, ren
     }
   );
 });
+function buildThemeElement(ctx, mountEl, renderApp, ref) {
+  return /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(ThemeMountBridge, { ctx, mountEl, renderApp, ref }) });
+}
 function mountTheme(el, ctx, renderApp) {
-  const root = createRoot(el);
   const handleRef = { current: null };
-  root.render(
-    /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(
-      ThemeMountBridge,
-      {
-        ctx,
-        mountEl: el,
-        renderApp,
-        ref: (h) => {
-          handleRef.current = h;
-        }
-      }
-    ) })
-  );
+  const element = buildThemeElement(ctx, el, renderApp, (h) => {
+    handleRef.current = h;
+  });
+  const shouldHydrate = ctx.hydrate === true && el.firstElementChild !== null;
+  let root;
+  if (shouldHydrate) {
+    root = hydrateRoot(el, element);
+  } else {
+    root = createRoot(el);
+    root.render(element);
+  }
   return {
     applyDraft: (next) => handleRef.current?.applyDraft(next),
     cleanup: () => {
@@ -2130,6 +2184,14 @@ function mountTheme(el, ctx, renderApp) {
     }
   };
 }
+
+// src/entry.tsx
+function defineThemeEntry(renderApp) {
+  return {
+    mount: (el, ctx) => mountTheme(el, ctx, renderApp),
+    createApp: (ctx) => buildThemeElement(ctx, null, renderApp)
+  };
+}
 function CollectionProvider({ collection, children }) {
   return /* @__PURE__ */ jsx(CollectionContext.Provider, { value: collection, children });
 }
@@ -2753,7 +2815,14 @@ function sanitizeHtmlServer(input) {
   return s;
 }
 function RichText({ html, className, as = "div" }) {
-  const safe = useMemo(() => sanitizeHtml(html || ""), [html]);
+  const [domReady, setDomReady] = useState(false);
+  useEffect(() => {
+    setDomReady(true);
+  }, []);
+  const safe = useMemo(
+    () => domReady ? sanitizeHtml(html || "") : sanitizeHtmlServer(html || ""),
+    [html, domReady]
+  );
   if (!safe) return null;
   const Tag = as;
   return /* @__PURE__ */ jsx(
@@ -3419,8 +3488,13 @@ function collectBlocks(modules) {
 
 // src/utils/assetUrl.ts
 function getRuntime() {
-  if (typeof window === "undefined") return {};
-  return window;
+  if (typeof window !== "undefined") {
+    return window;
+  }
+  if (typeof globalThis !== "undefined") {
+    return globalThis;
+  }
+  return {};
 }
 function assetUrl(name) {
   if (!name) return "";
@@ -3481,6 +3555,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, 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 };
+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, buildThemeElement, clearSdkSingleton, collectBlocks, collectSections, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, 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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map