@numueg/theme-sdk 0.2.2 → 0.3.1

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
@@ -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) {
@@ -1455,6 +1478,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 +1503,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 +1684,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 +1732,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]
   );
@@ -1961,6 +2012,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) {
@@ -1969,39 +2023,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",
@@ -2036,19 +2120,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);
@@ -2078,22 +2152,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: () => {
@@ -2102,6 +2176,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 });
 }
@@ -2131,6 +2213,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 +2265,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 +2315,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 }) {
@@ -2648,7 +2807,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(
@@ -3314,8 +3480,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 "";
@@ -3332,23 +3503,6 @@ function assetUrl(name) {
   return `${cleanBase}${filename}`;
 }
 
-// src/utils/imageTransform.ts
-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()}`;
-}
-
 // src/utils/locales.ts
 function flattenMessages(source, prefix = "") {
   const out = {};
@@ -3393,6 +3547,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, 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