@numueg/theme-sdk 0.1.2 → 0.2.1

package/dist/index.mjs

@@ -1,7 +1,9 @@
-import { createContext, useContext, useMemo, useState, useEffect, useCallback, useRef, createElement, Component } from 'react';
+import { createContext, forwardRef, useState, useImperativeHandle, useEffect, useCallback, useMemo, useRef, useContext, StrictMode, createElement, Component } from 'react';
+import { createRoot } from 'react-dom/client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/hooks/useShop.ts
+// src/types/theme.ts
+var MAX_BLOCK_DEPTH = 5;
 var ShopContext = createContext(null);
 var ProductContext = createContext(null);
 var CollectionContext = createContext(null);
@@ -10,6 +12,10 @@ var CustomerContext = createContext(null);
 var ThemeSettingsContext = createContext(null);
 var LocalizationContext = createContext(null);
 var PageContext = createContext(null);
+var CurrentTemplateContext = createContext("home");
+var NavigationContext = createContext(
+  {}
+);
 function useLocalization() {
   const ctx = useContext(LocalizationContext);
   if (!ctx) throw new Error("useLocalization must be used within NuMuProvider");
@@ -118,6 +124,9 @@ function useThemeSettings() {
   if (!ctx) throw new Error("useThemeSettings must be used within NuMuProvider");
   return ctx;
 }
+function useCurrentTemplate() {
+  return useContext(CurrentTemplateContext);
+}
 function usePage() {
   return useContext(PageContext);
 }
@@ -487,15 +496,67 @@ function useCustomerAddresses() {
   };
 }
 var cache = /* @__PURE__ */ new Map();
+function localizeLabel(label, locale) {
+  if (!label) return "";
+  return label[locale] || label.en || label.ar || Object.values(label).find((v) => !!v) || "";
+}
+function mapResourceType(type) {
+  switch (type) {
+    case "product":
+      return "product";
+    case "collection":
+      return "collection";
+    case "page":
+      return "page";
+    case "blog":
+      return "blog";
+    case "article":
+      return "article";
+    case "http":
+    case "url":
+      return "url";
+    default:
+      return null;
+  }
+}
+function toNavigationItem(raw, locale) {
+  return {
+    id: raw.id,
+    title: localizeLabel(raw.label, locale),
+    url: raw.url || "/",
+    resource_type: mapResourceType(raw.type),
+    resource_handle: raw.resource_id ?? null,
+    children: (raw.children ?? []).map(
+      (child) => toNavigationItem(child, locale)
+    )
+  };
+}
 function useNavigation(handle, options) {
+  const navMap = useContext(NavigationContext);
+  const localization = useContext(LocalizationContext);
+  const locale = localization?.locale ?? "en";
+  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 (hostProvidedAny) return [];
+    return null;
+  }, [rawItems, hostProvidedAny, locale]);
   const [items, setItems] = useState(
-    options?.initialItems ?? cache.get(handle) ?? []
+    hostItems ?? options?.initialItems ?? cache.get(handle) ?? []
   );
   const [loading, setLoading] = useState(
-    !options?.initialItems && !cache.has(handle)
+    hostItems === null && !options?.initialItems && !cache.has(handle)
   );
   const [error, setError] = useState(null);
   useEffect(() => {
+    if (hostItems === null) return;
+    setItems(hostItems);
+    setLoading(false);
+    setError(null);
+  }, [hostItems]);
+  useEffect(() => {
+    if (hostItems !== null) return;
     if (typeof window === "undefined") return;
     if (!handle) {
       setItems([]);
@@ -538,7 +599,7 @@ function useNavigation(handle, options) {
     return () => {
       cancelled = true;
     };
-  }, [handle]);
+  }, [handle, hostItems === null]);
   return { items, loading, error };
 }
 var EMPTY = {
@@ -612,34 +673,92 @@ function useSearch(query, options = {}) {
   }, [query, mode, debounceMs, immediate, limit, types?.join(",")]);
   return { query, results, loading, error };
 }
+var EVENT_TO_FUNNEL_STEP = {
+  page_view: "page_view",
+  view_item: "product_view",
+  view_collection: "page_view",
+  add_to_cart: "add_to_cart",
+  begin_checkout: "checkout_started",
+  purchase: "order_completed",
+  // Wave 2+ standard Meta events — backend's FUNNEL_STEP_TO_META_EVENT
+  // table accepts these as funnel steps directly.
+  search: "search",
+  lead: "lead",
+  sign_up: "complete_registration",
+  add_to_wishlist: "add_to_wishlist",
+  add_payment_info: "add_payment_info"
+};
+function readAttribution() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.__numu_attribution?.get?.() ?? null;
+  } catch {
+    return null;
+  }
+}
+function readCustomerId() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.__numu_customer?.getId?.() ?? null;
+  } catch {
+    return null;
+  }
+}
+function getFingerprint() {
+  if (typeof window === "undefined") return "ssr";
+  const env = readAttribution();
+  if (env?.session_id) return env.session_id;
+  const w = window;
+  if (w.__numu_session_fp) return w.__numu_session_fp;
+  const fp = crypto.randomUUID();
+  w.__numu_session_fp = fp;
+  return fp;
+}
+function dispatchAnalyticsEvent(eventName, payload = {}) {
+  if (typeof window === "undefined") return;
+  try {
+    window.dispatchEvent(
+      new CustomEvent("numu:analytics:event", {
+        detail: { event: eventName, payload, ts: Date.now() }
+      })
+    );
+  } catch {
+  }
+  const step = EVENT_TO_FUNNEL_STEP[eventName] ?? null;
+  const customerId = readCustomerId();
+  const body = step ? {
+    event_id: crypto.randomUUID(),
+    path: window.location.pathname,
+    fingerprint: getFingerprint(),
+    step,
+    step_data: payload,
+    referrer: typeof document !== "undefined" && document.referrer ? document.referrer : void 0,
+    attribution: readAttribution() ?? void 0,
+    customer_id: customerId ?? void 0
+  } : {
+    event: eventName,
+    payload,
+    ts: Date.now(),
+    attribution: readAttribution() ?? void 0,
+    customer_id: customerId ?? void 0
+  };
+  void (async () => {
+    try {
+      await fetch("/api/storefront/track", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+        keepalive: true
+        // survive page-unload (e.g. begin_checkout → redirect)
+      });
+    } catch {
+    }
+  })();
+}
 function useAnalytics() {
   const track = useCallback(
     (eventName, payload = {}) => {
-      if (typeof window === "undefined") return;
-      try {
-        window.dispatchEvent(
-          new CustomEvent("numu:analytics:event", {
-            detail: { event: eventName, payload, ts: Date.now() }
-          })
-        );
-      } catch {
-      }
-      void (async () => {
-        try {
-          await fetch("/api/storefront/track", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              event: eventName,
-              payload,
-              ts: Date.now()
-            }),
-            keepalive: true
-            // survive page-unload (e.g. begin_checkout → redirect)
-          });
-        } catch {
-        }
-      })();
+      dispatchAnalyticsEvent(eventName, payload);
     },
     []
   );
@@ -1326,6 +1445,16 @@ var EMPTY_CART = {
   total: 0,
   currency: "EGP"
 };
+function normalizeCartFromServer(cart) {
+  const toMajor = (n) => typeof n === "number" ? n / 100 : 0;
+  return {
+    ...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) })) : []
+  };
+}
 function readCsrfCookie() {
   if (typeof document === "undefined") return null;
   const match = document.cookie.match(/(?:^|;\s*)numu_csrf=([^;]+)/);
@@ -1355,8 +1484,23 @@ function NuMuProvider({
   customer,
   locale: initialLocale,
   translations: initialTranslations,
+  currentTemplate = "home",
+  initialProducts,
+  initialCollections,
+  navigation,
   children
 }) {
+  const pageValue = useMemo(
+    () => ({
+      type: currentTemplate,
+      title: store?.name ?? "",
+      data: {
+        products: initialProducts ?? [],
+        collections: initialCollections ?? []
+      }
+    }),
+    [currentTemplate, store?.name, initialProducts, initialCollections]
+  );
   const [cart, setCart] = useState(
     initialCart || { ...EMPTY_CART, currency: store.currency }
   );
@@ -1513,7 +1657,7 @@ function NuMuProvider({
         if (!res.ok || cancelled) return;
         const data = await res.json();
         if (data && typeof data === "object") {
-          setCart(data);
+          setCart(normalizeCartFromServer(data));
         }
       } catch {
       }
@@ -1534,7 +1678,7 @@ function NuMuProvider({
         return;
       }
       latestApplied.current = token;
-      setCart(newCart);
+      setCart(normalizeCartFromServer(newCart));
     },
     []
   );
@@ -1726,11 +1870,238 @@ function NuMuProvider({
       defaultNumberFmt
     ]
   );
-  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: store, children: /* @__PURE__ */ jsx(ThemeSettingsContext.Provider, { value: themeSettings, children: /* @__PURE__ */ jsx(LocalizationContext.Provider, { value: localization, children: /* @__PURE__ */ jsx(CartContext.Provider, { value: cartValue, children: /* @__PURE__ */ jsx(CustomerContext.Provider, { value: customerState, children: /* @__PURE__ */ jsx(CustomerActionsContext.Provider, { value: customerActions, children }) }) }) }) }) });
+  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: store, children: /* @__PURE__ */ jsx(ThemeSettingsContext.Provider, { value: themeSettings, children: /* @__PURE__ */ jsx(CurrentTemplateContext.Provider, { value: currentTemplate, children: /* @__PURE__ */ jsx(PageContext.Provider, { value: pageValue, children: /* @__PURE__ */ jsx(LocalizationContext.Provider, { value: localization, children: /* @__PURE__ */ jsx(CartContext.Provider, { value: cartValue, children: /* @__PURE__ */ jsx(CustomerContext.Provider, { value: customerState, children: /* @__PURE__ */ jsx(CustomerActionsContext.Provider, { value: customerActions, children: /* @__PURE__ */ jsx(NavigationContext.Provider, { value: navigation ?? {}, children }) }) }) }) }) }) }) }) });
 }
 function ProductProvider({ product, children }) {
   return /* @__PURE__ */ jsx(ProductContext.Provider, { value: product, children });
 }
+
+// src/utils/styleTokens.ts
+var COLOR_ROLE_ALIASES = {
+  background_color: "background",
+  color_background: "background",
+  bg_color: "background",
+  text_color: "text",
+  color_text: "text",
+  primary_color: "primary",
+  color_primary: "primary",
+  secondary_color: "secondary",
+  color_secondary: "secondary",
+  accent_color: "accent",
+  color_accent: "accent",
+  border_color: "border",
+  color_border: "border",
+  button_color: "button",
+  color_button: "button",
+  button_text_color: "button-text",
+  color_button_text: "button-text"
+};
+var FONT_ROLE_ALIASES = {
+  heading_font: "heading",
+  font_heading: "heading",
+  headings_font: "heading",
+  body_font: "body",
+  font_body: "body",
+  text_font: "body"
+};
+var FONT_REGISTRY = {
+  cormorant: {
+    stack: '"Cormorant Garamond", Georgia, "Times New Roman", serif',
+    href: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
+  },
+  "dm-sans": {
+    stack: '"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif',
+    href: "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700&display=swap"
+  },
+  playfair: {
+    stack: '"Playfair Display", Georgia, serif',
+    href: "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap"
+  },
+  inter: {
+    stack: '"Inter", system-ui, -apple-system, sans-serif',
+    href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  },
+  poppins: {
+    stack: '"Poppins", system-ui, sans-serif',
+    href: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
+  },
+  montserrat: {
+    stack: '"Montserrat", system-ui, sans-serif',
+    href: "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
+  },
+  lora: {
+    stack: '"Lora", Georgia, serif',
+    href: "https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap"
+  },
+  cairo: {
+    stack: '"Cairo", system-ui, sans-serif',
+    href: "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap"
+  },
+  tajawal: {
+    stack: '"Tajawal", system-ui, sans-serif',
+    href: "https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap"
+  }
+};
+var COLOR_RE = /^(#([0-9a-f]{3,8})|rgba?\(|hsla?\(|color\(|var\()/i;
+function isColorValue(v) {
+  return typeof v === "string" && COLOR_RE.test(v.trim());
+}
+function isFontToken(v) {
+  return typeof v === "string" && Object.prototype.hasOwnProperty.call(FONT_REGISTRY, v);
+}
+function injectFontLink(href) {
+  if (typeof document === "undefined" || !href) return;
+  const existing = document.querySelector(
+    `link[data-numu-font][href="${href}"]`
+  );
+  if (existing) return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = href;
+  link.setAttribute("data-numu-font", "");
+  document.head.appendChild(link);
+}
+function resolveFontStack(value) {
+  const entry = FONT_REGISTRY[value];
+  if (entry) {
+    if (entry.href) injectFontLink(entry.href);
+    return entry.stack;
+  }
+  return value;
+}
+function applyGlobalStyleTokens(globalSettings, el) {
+  if (!el || !globalSettings || typeof globalSettings !== "object") return;
+  const style = el.style;
+  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);
+      }
+      continue;
+    }
+    if (isColorValue(value)) {
+      style.setProperty(`--theme-${key}`, value.trim());
+      const role = COLOR_ROLE_ALIASES[key];
+      if (role) style.setProperty(`--theme-color-${role}`, value.trim());
+      continue;
+    }
+    if (isFontToken(value)) {
+      const stack = resolveFontStack(value);
+      style.setProperty(`--theme-${key}`, stack);
+      const role = FONT_ROLE_ALIASES[key];
+      if (role) style.setProperty(`--theme-font-${role}`, stack);
+      continue;
+    }
+    if (typeof value === "string" || typeof value === "number") {
+      const v = String(value).trim();
+      if (v) style.setProperty(`--theme-${key}`, v);
+    }
+  }
+}
+function pickStore(ctx) {
+  const s = ctx.storeData ?? ctx.store;
+  if (s) return s;
+  return {
+    id: "unknown",
+    name: "Store",
+    slug: "store",
+    currency: "EGP",
+    default_language: "en",
+    use_nextjs_storefront: true
+  };
+}
+function pickTemplate(ctx) {
+  if (typeof ctx.currentTemplate === "string" && ctx.currentTemplate) {
+    return ctx.currentTemplate;
+  }
+  const pageType = ctx.page?.type;
+  if (typeof pageType === "string" && pageType) return pageType;
+  return "home";
+}
+function pickDemo(ctx, themeSettings) {
+  if (typeof ctx.demo === "boolean") return ctx.demo;
+  const t = themeSettings.templates;
+  return !t || Object.keys(t).length === 0;
+}
+var ThemeMountBridge = forwardRef(function ThemeMountBridge2({ ctx, mountEl, renderApp }, ref) {
+  const [themeSettings, setThemeSettings] = useState(
+    ctx.themeSettings
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      applyDraft: (next) => setThemeSettings((prev) => prev === next ? prev : next)
+    }),
+    []
+  );
+  useEffect(() => {
+    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);
+  const demo = pickDemo(ctx, themeSettings);
+  const pageData = ctx.page?.data ?? {};
+  const app = renderApp({
+    currentTemplate: template,
+    demo,
+    page: ctx.page ?? null,
+    store,
+    themeSettings
+  });
+  return /* @__PURE__ */ jsx(
+    NuMuProvider,
+    {
+      store,
+      themeSettings,
+      initialCart: ctx.initialCart,
+      customer: ctx.customer,
+      locale: ctx.locale,
+      translations: ctx.translations,
+      navigation: ctx.navigation,
+      initialProducts: pageData.products,
+      initialCollections: pageData.collections,
+      currentTemplate: template,
+      children: pageData.product ? /* @__PURE__ */ jsx(ProductProvider, { product: pageData.product, children: app }) : app
+    }
+  );
+});
+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;
+        }
+      }
+    ) })
+  );
+  return {
+    applyDraft: (next) => handleRef.current?.applyDraft(next),
+    cleanup: () => {
+      root.unmount();
+      handleRef.current = null;
+    }
+  };
+}
 function CollectionProvider({ collection, children }) {
   return /* @__PURE__ */ jsx(CollectionContext.Provider, { value: collection, children });
 }
@@ -2373,6 +2744,239 @@ function LocaleSwitcher({
     }
   );
 }
+function useIsEditor() {
+  const [isEditor, setIsEditor] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const params = new URLSearchParams(window.location.search);
+      const flag = params.get("editor") === "v3" || params.get("preview") === "true";
+      const inFrame = window.parent !== window;
+      setIsEditor(flag && inFrame);
+    } catch {
+    }
+  }, []);
+  return isEditor;
+}
+function postFieldSelected(sectionId, settingId, blockId) {
+  if (typeof window === "undefined") return;
+  if (window.parent === window) return;
+  try {
+    window.parent.postMessage(
+      {
+        type: "numu:editor:select-field",
+        payload: {
+          sectionId,
+          blockId: blockId ?? null,
+          settingId
+        }
+      },
+      "*"
+    );
+  } catch {
+  }
+}
+var EditableText = forwardRef(
+  function EditableText2({
+    sectionId,
+    blockId,
+    settingId,
+    value,
+    as: Component2 = "span",
+    html = false,
+    placeholder,
+    className,
+    onClick,
+    style,
+    ...rest
+  }, ref) {
+    const isEditor = useIsEditor();
+    const handleClick = useCallback(
+      (e) => {
+        onClick?.(e);
+        if (!isEditor) return;
+        e.stopPropagation();
+        postFieldSelected(sectionId, settingId, blockId);
+      },
+      [isEditor, onClick, sectionId, settingId, blockId]
+    );
+    const editorAttrs = useMemo(
+      () => isEditor ? {
+        "data-numu-editable": "text",
+        "data-numu-section-id": sectionId,
+        "data-numu-setting-id": settingId,
+        "data-numu-block-id": blockId ?? void 0,
+        role: "button",
+        tabIndex: 0
+      } : {},
+      [isEditor, sectionId, settingId, blockId]
+    );
+    const effectiveStyle = isEditor ? {
+      ...style,
+      cursor: "text",
+      // Subtle dotted underline so the merchant discovers what's
+      // editable. The dashed style + inherited color keeps the
+      // affordance from clashing with the theme's typography.
+      textDecoration: "underline dotted rgba(99, 102, 241, 0.7)",
+      textUnderlineOffset: "4px"
+    } : style;
+    const isEmpty = value == null || value === "";
+    const display = isEmpty && placeholder !== void 0 ? placeholder : value ?? "";
+    if (html && typeof display === "string") {
+      return /* @__PURE__ */ jsx(
+        Component2,
+        {
+          ref,
+          className,
+          style: effectiveStyle,
+          onClick: handleClick,
+          dangerouslySetInnerHTML: { __html: display },
+          ...editorAttrs,
+          ...rest
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Component2,
+      {
+        ref,
+        className,
+        style: effectiveStyle,
+        onClick: handleClick,
+        ...editorAttrs,
+        ...rest,
+        children: display
+      }
+    );
+  }
+);
+var EMPTY_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+var EditableImage = forwardRef(
+  function EditableImage2({
+    sectionId,
+    blockId,
+    settingId,
+    src,
+    alt,
+    emptyPlaceholderSrc,
+    className,
+    onClick,
+    style,
+    ...rest
+  }, ref) {
+    const isEditor = useIsEditor();
+    const isEmpty = !src;
+    const handleClick = useCallback(
+      (e) => {
+        onClick?.(e);
+        if (!isEditor) return;
+        e.stopPropagation();
+        postFieldSelected(sectionId, settingId, blockId);
+      },
+      [isEditor, onClick, sectionId, settingId, blockId]
+    );
+    const editorAttrs = useMemo(
+      () => isEditor ? {
+        "data-numu-editable": "image",
+        "data-numu-section-id": sectionId,
+        "data-numu-setting-id": settingId,
+        "data-numu-block-id": blockId ?? void 0,
+        role: "button",
+        tabIndex: 0
+      } : {},
+      [isEditor, sectionId, settingId, blockId]
+    );
+    const effectiveStyle = isEditor ? {
+      ...style,
+      cursor: "pointer",
+      outline: isEmpty ? "2px dashed rgba(99, 102, 241, 0.6)" : "2px dashed transparent",
+      outlineOffset: "-2px"
+    } : style;
+    const effectiveSrc = src || emptyPlaceholderSrc || EMPTY_GIF;
+    const effectiveAlt = alt ?? "";
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        src: effectiveSrc,
+        alt: effectiveAlt,
+        className,
+        style: effectiveStyle,
+        onClick: handleClick,
+        ...editorAttrs,
+        ...rest
+      }
+    );
+  }
+);
+var ICON_DEFS = {
+  star: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
+  heart: '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  "check-circle": '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/>',
+  "shield-check": '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/>',
+  truck: '<path d="M10 17h4V5H2v12h3"/><path d="M20 17h2v-3.34a4 4 0 0 0-1.17-2.83L19 9h-5v8h1"/><circle cx="7.5" cy="17.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/>',
+  "shopping-bag": '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>',
+  "shopping-cart": '<circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/>',
+  gift: '<rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5C9 3 10.5 4.5 12 8c1.5-3.5 3-5 4.5-5a2.5 2.5 0 0 1 0 5"/>',
+  tag: '<path d="M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z"/><circle cx="7" cy="7" r="1"/>',
+  zap: '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
+  sparkles: '<path d="M12 3 13.9 9.2 20 11l-6.1 1.8L12 19l-1.9-6.2L4 11l6.1-1.8L12 3Z"/><path d="M5 3v4"/><path d="M3 5h4"/><path d="M19 17v4"/><path d="M17 19h4"/>',
+  flame: '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.29 1-3a2.5 2.5 0 0 0 2.5 2.5Z"/>',
+  leaf: '<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6"/>',
+  globe: '<circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z"/>',
+  "map-pin": '<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>',
+  phone: '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/>',
+  mail: '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
+  clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+  lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+  headphones: '<path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"/>',
+  percent: '<line x1="19" x2="5" y1="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/>',
+  users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+  home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
+  store: '<path d="M2 7l2-4h16l2 4"/><path d="M4 7v13a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7"/><path d="M2 7h20"/><path d="M9 21v-6h6v6"/>',
+  bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+  camera: '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',
+  image: '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21"/>',
+  smile: '<circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/>',
+  send: '<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',
+  "message-circle": '<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5Z"/>',
+  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+  package: '<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
+  award: '<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/>',
+  coffee: '<path d="M10 2v2"/><path d="M14 2v2"/><path d="M6 2v2"/><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/>'
+};
+var ICON_NAMES = Object.keys(ICON_DEFS);
+var IconMap = ICON_DEFS;
+var FALLBACK = ICON_DEFS["check-circle"];
+function Icon({
+  name,
+  size = 24,
+  strokeWidth = 2,
+  className,
+  title
+}) {
+  const inner = ICON_DEFS[name] ?? FALLBACK;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      role: title ? "img" : void 0,
+      "aria-hidden": title ? void 0 : true,
+      "aria-label": title,
+      dangerouslySetInnerHTML: { __html: inner }
+    }
+  );
+}
 
 // src/utils/normalize.ts
 var DEFAULT_THEME_ID = typeof process !== "undefined" && process.env?.NUMU_DEFAULT_THEME_ID || "modern";
@@ -2466,22 +3070,11 @@ function resolveThemeSettings(raw) {
 }
 
 // src/utils/federation.ts
-var SDK_SYMBOL_KEY = "__NUMU_SDK_SLOT__";
-var REACT_SYMBOL_KEY = "__NUMU_REACT_SLOT__";
-function globalSlot(name, slotKey) {
-  const g = globalThis;
-  let sym = g[slotKey];
-  if (!sym) {
-    sym = Symbol.for(name);
-    g[slotKey] = sym;
-  }
-  return sym;
-}
 function sdkSlot() {
-  return globalSlot("@numueg/theme-sdk:singleton", SDK_SYMBOL_KEY);
+  return /* @__PURE__ */ Symbol.for("@numueg/theme-sdk:singleton");
 }
 function reactSlot() {
-  return globalSlot("@numueg/theme-sdk:react", REACT_SYMBOL_KEY);
+  return /* @__PURE__ */ Symbol.for("@numueg/theme-sdk:react");
 }
 function registerSdkSingleton(sdk) {
   if (typeof globalThis === "undefined") return;
@@ -2491,6 +3084,10 @@ function getSdkSingleton() {
   if (typeof globalThis === "undefined") return null;
   return globalThis[sdkSlot()] ?? null;
 }
+function clearSdkSingleton() {
+  if (typeof globalThis === "undefined") return;
+  delete globalThis[sdkSlot()];
+}
 function registerReactSingleton(react, reactDom) {
   if (typeof globalThis === "undefined") return;
   globalThis[reactSlot()] = {
@@ -2506,6 +3103,121 @@ function isSdkAvailable() {
   return getSdkSingleton() !== null;
 }
 
+// src/utils/dynamicSources.ts
+function isDynamicSource(value) {
+  return typeof value === "object" && value !== null && typeof value.__numu_source === "string";
+}
+function dynamicSource(path) {
+  return { __numu_source: path };
+}
+function resolveSourcePath(path, ctx) {
+  const [root, ...rest] = path.split(".");
+  switch (root) {
+    case "product": {
+      const p = ctx.product;
+      if (!p) return null;
+      return resolveProductField(p, rest.join("."));
+    }
+    case "collection": {
+      const c = ctx.collection;
+      if (!c) return null;
+      return resolveCollectionField(c, rest.join("."));
+    }
+    case "store": {
+      const s = ctx.store;
+      if (!s) return null;
+      return resolveStoreField(s, rest.join("."));
+    }
+    default:
+      return null;
+  }
+}
+function resolveProductField(p, field) {
+  switch (field) {
+    case "title":
+    case "name":
+      return p.name;
+    case "description":
+      return p.description ?? "";
+    case "description_snippet":
+      return (p.description ?? "").replace(/<[^>]+>/g, " ").trim().slice(0, 200);
+    case "price":
+      return p.price;
+    case "sku":
+      return p.variants?.[0]?.sku ?? null;
+    case "image":
+    case "first_image_url":
+      return p.images?.[0]?.url ?? null;
+    case "slug":
+      return p.slug;
+    default:
+      return null;
+  }
+}
+function resolveCollectionField(c, field) {
+  switch (field) {
+    case "title":
+    case "name":
+      return c.name;
+    case "description":
+      return c.description ?? "";
+    case "description_snippet":
+      return (c.description ?? "").replace(/<[^>]+>/g, " ").trim().slice(0, 200);
+    case "image":
+      return c.image_url ?? null;
+    case "slug":
+      return c.slug;
+    case "product_count":
+      return c.product_count ?? null;
+    default:
+      return null;
+  }
+}
+function resolveStoreField(s, field) {
+  switch (field) {
+    case "name":
+      return s.name ?? "";
+    case "description":
+      return s.description ?? "";
+    case "logo":
+      return s.logo_url ?? null;
+    default:
+      return null;
+  }
+}
+function resolveDynamicValue(value, ctx) {
+  if (!isDynamicSource(value)) return value;
+  return resolveSourcePath(value.__numu_source, ctx);
+}
+function resolveSettingsMap(settings, ctx) {
+  if (!settings || typeof settings !== "object") return settings;
+  const input = settings;
+  const out = {};
+  for (const key of Object.keys(input)) {
+    const v = input[key];
+    if (isDynamicSource(v)) {
+      const resolved = resolveSourcePath(v.__numu_source, ctx);
+      out[key] = resolved;
+    } else {
+      out[key] = v;
+    }
+  }
+  return out;
+}
+function useResolvedSettings(instance) {
+  const product = useContext(ProductContext);
+  const collection = useContext(CollectionContext);
+  const store = useContext(ShopContext);
+  const ctx = useMemo(
+    () => ({ product, collection, store }),
+    [product, collection, store]
+  );
+  return useMemo(() => {
+    const settings = instance?.settings ?? {};
+    return resolveSettingsMap(settings, ctx);
+  }, [instance, ctx]);
+}
+
 // src/utils/defineSection.ts
 var SECTION_MARKER = /* @__PURE__ */ Symbol.for("numu.theme.section");
 var BLOCK_MARKER = /* @__PURE__ */ Symbol.for("numu.theme.block");
@@ -2664,6 +3376,6 @@ function buildLocaleBundle(modules) {
   return bundle;
 }
 
-export { AddToCartButton, Block, CartContext, CollectionCard, CollectionContext, CollectionProvider, CurrencySwitcher, CustomerContext, Form, Image, Link, LocaleSwitcher, LocalizationContext, Money, NuMuProvider, PageContext, ProductCard, ProductContext, ProductProvider, RichText, Section, SectionContext, ShopContext, ThemeSettingsContext, assetUrl, availableValues, buildLocaleBundle, collectBlocks, collectSections, defaultVariant, defineBlock, defineSection, findVariantByOptions, flattenMessages, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isSdkAvailable, pickTranslations, registerReactSingleton, registerSdkSingleton, resolveThemeSettings, sanitizeHtml, useAnalytics, useApp, useCart, useCheckout, useCollection, useCollectionOptional, useCollections, useCurrency, useCustomer, useCustomerActions, useCustomerAddresses, useDirection, useFieldTranslation, useGiftCardBalance, useImage, useLocale, useLocalization, useMoney, useNavigation, useNumberFormat, useOrder, useOrders, usePage, useProduct, useProductOptional, useProducts, useRelatedProducts, useReorder, 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, assetUrl, availableValues, buildLocaleBundle, clearSdkSingleton, collectBlocks, collectSections, defaultVariant, defineBlock, defineSection, dynamicSource, findVariantByOptions, flattenMessages, 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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map