@numueg/theme-sdk 0.1.2 → 0.2.1

package/dist/index.cjs

@@ -1,9 +1,11 @@
 'use strict';
 
 var react = require('react');
+var client = require('react-dom/client');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/hooks/useShop.ts
+// src/types/theme.ts
+var MAX_BLOCK_DEPTH = 5;
 var ShopContext = react.createContext(null);
 var ProductContext = react.createContext(null);
 var CollectionContext = react.createContext(null);
@@ -12,6 +14,10 @@ var CustomerContext = react.createContext(null);
 var ThemeSettingsContext = react.createContext(null);
 var LocalizationContext = react.createContext(null);
 var PageContext = react.createContext(null);
+var CurrentTemplateContext = react.createContext("home");
+var NavigationContext = react.createContext(
+  {}
+);
 function useLocalization() {
   const ctx = react.useContext(LocalizationContext);
   if (!ctx) throw new Error("useLocalization must be used within NuMuProvider");
@@ -120,6 +126,9 @@ function useThemeSettings() {
   if (!ctx) throw new Error("useThemeSettings must be used within NuMuProvider");
   return ctx;
 }
+function useCurrentTemplate() {
+  return react.useContext(CurrentTemplateContext);
+}
 function usePage() {
   return react.useContext(PageContext);
 }
@@ -489,15 +498,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 = react.useContext(NavigationContext);
+  const localization = react.useContext(LocalizationContext);
+  const locale = localization?.locale ?? "en";
+  const hostProvidedAny = !!navMap && Object.keys(navMap).length > 0;
+  const rawItems = handle ? navMap?.[handle] : void 0;
+  const hostItems = react.useMemo(() => {
+    if (rawItems) return rawItems.map((it) => toNavigationItem(it, locale));
+    if (hostProvidedAny) return [];
+    return null;
+  }, [rawItems, hostProvidedAny, locale]);
   const [items, setItems] = react.useState(
-    options?.initialItems ?? cache.get(handle) ?? []
+    hostItems ?? options?.initialItems ?? cache.get(handle) ?? []
   );
   const [loading, setLoading] = react.useState(
-    !options?.initialItems && !cache.has(handle)
+    hostItems === null && !options?.initialItems && !cache.has(handle)
   );
   const [error, setError] = react.useState(null);
   react.useEffect(() => {
+    if (hostItems === null) return;
+    setItems(hostItems);
+    setLoading(false);
+    setError(null);
+  }, [hostItems]);
+  react.useEffect(() => {
+    if (hostItems !== null) return;
     if (typeof window === "undefined") return;
     if (!handle) {
       setItems([]);
@@ -540,7 +601,7 @@ function useNavigation(handle, options) {
     return () => {
       cancelled = true;
     };
-  }, [handle]);
+  }, [handle, hostItems === null]);
   return { items, loading, error };
 }
 var EMPTY = {
@@ -614,34 +675,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 = react.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);
     },
     []
   );
@@ -1328,6 +1447,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=([^;]+)/);
@@ -1357,8 +1486,23 @@ function NuMuProvider({
   customer,
   locale: initialLocale,
   translations: initialTranslations,
+  currentTemplate = "home",
+  initialProducts,
+  initialCollections,
+  navigation,
   children
 }) {
+  const pageValue = react.useMemo(
+    () => ({
+      type: currentTemplate,
+      title: store?.name ?? "",
+      data: {
+        products: initialProducts ?? [],
+        collections: initialCollections ?? []
+      }
+    }),
+    [currentTemplate, store?.name, initialProducts, initialCollections]
+  );
   const [cart, setCart] = react.useState(
     initialCart || { ...EMPTY_CART, currency: store.currency }
   );
@@ -1515,7 +1659,7 @@ function NuMuProvider({
         if (!res.ok || cancelled) return;
         const data = await res.json();
         if (data && typeof data === "object") {
-          setCart(data);
+          setCart(normalizeCartFromServer(data));
         }
       } catch {
       }
@@ -1536,7 +1680,7 @@ function NuMuProvider({
         return;
       }
       latestApplied.current = token;
-      setCart(newCart);
+      setCart(normalizeCartFromServer(newCart));
     },
     []
   );
@@ -1728,11 +1872,238 @@ function NuMuProvider({
       defaultNumberFmt
     ]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ShopContext.Provider, { value: store, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsContext.Provider, { value: themeSettings, children: /* @__PURE__ */ jsxRuntime.jsx(LocalizationContext.Provider, { value: localization, children: /* @__PURE__ */ jsxRuntime.jsx(CartContext.Provider, { value: cartValue, children: /* @__PURE__ */ jsxRuntime.jsx(CustomerContext.Provider, { value: customerState, children: /* @__PURE__ */ jsxRuntime.jsx(CustomerActionsContext.Provider, { value: customerActions, children }) }) }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ShopContext.Provider, { value: store, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsContext.Provider, { value: themeSettings, children: /* @__PURE__ */ jsxRuntime.jsx(CurrentTemplateContext.Provider, { value: currentTemplate, children: /* @__PURE__ */ jsxRuntime.jsx(PageContext.Provider, { value: pageValue, children: /* @__PURE__ */ jsxRuntime.jsx(LocalizationContext.Provider, { value: localization, children: /* @__PURE__ */ jsxRuntime.jsx(CartContext.Provider, { value: cartValue, children: /* @__PURE__ */ jsxRuntime.jsx(CustomerContext.Provider, { value: customerState, children: /* @__PURE__ */ jsxRuntime.jsx(CustomerActionsContext.Provider, { value: customerActions, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationContext.Provider, { value: navigation ?? {}, children }) }) }) }) }) }) }) }) });
 }
 function ProductProvider({ product, children }) {
   return /* @__PURE__ */ jsxRuntime.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 = react.forwardRef(function ThemeMountBridge2({ ctx, mountEl, renderApp }, ref) {
+  const [themeSettings, setThemeSettings] = react.useState(
+    ctx.themeSettings
+  );
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      applyDraft: (next) => setThemeSettings((prev) => prev === next ? prev : next)
+    }),
+    []
+  );
+  react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ProductProvider, { product: pageData.product, children: app }) : app
+    }
+  );
+});
+function mountTheme(el, ctx, renderApp) {
+  const root = client.createRoot(el);
+  const handleRef = { current: null };
+  root.render(
+    /* @__PURE__ */ jsxRuntime.jsx(react.StrictMode, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CollectionContext.Provider, { value: collection, children });
 }
@@ -2375,6 +2746,239 @@ function LocaleSwitcher({
     }
   );
 }
+function useIsEditor() {
+  const [isEditor, setIsEditor] = react.useState(false);
+  react.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 = react.forwardRef(
+  function EditableText2({
+    sectionId,
+    blockId,
+    settingId,
+    value,
+    as: Component2 = "span",
+    html = false,
+    placeholder,
+    className,
+    onClick,
+    style,
+    ...rest
+  }, ref) {
+    const isEditor = useIsEditor();
+    const handleClick = react.useCallback(
+      (e) => {
+        onClick?.(e);
+        if (!isEditor) return;
+        e.stopPropagation();
+        postFieldSelected(sectionId, settingId, blockId);
+      },
+      [isEditor, onClick, sectionId, settingId, blockId]
+    );
+    const editorAttrs = react.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__ */ jsxRuntime.jsx(
+        Component2,
+        {
+          ref,
+          className,
+          style: effectiveStyle,
+          onClick: handleClick,
+          dangerouslySetInnerHTML: { __html: display },
+          ...editorAttrs,
+          ...rest
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component2,
+      {
+        ref,
+        className,
+        style: effectiveStyle,
+        onClick: handleClick,
+        ...editorAttrs,
+        ...rest,
+        children: display
+      }
+    );
+  }
+);
+var EMPTY_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+var EditableImage = react.forwardRef(
+  function EditableImage2({
+    sectionId,
+    blockId,
+    settingId,
+    src,
+    alt,
+    emptyPlaceholderSrc,
+    className,
+    onClick,
+    style,
+    ...rest
+  }, ref) {
+    const isEditor = useIsEditor();
+    const isEmpty = !src;
+    const handleClick = react.useCallback(
+      (e) => {
+        onClick?.(e);
+        if (!isEditor) return;
+        e.stopPropagation();
+        postFieldSelected(sectionId, settingId, blockId);
+      },
+      [isEditor, onClick, sectionId, settingId, blockId]
+    );
+    const editorAttrs = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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";
@@ -2468,22 +3072,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;
@@ -2493,6 +3086,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()] = {
@@ -2508,6 +3105,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 = react.useContext(ProductContext);
+  const collection = react.useContext(CollectionContext);
+  const store = react.useContext(ShopContext);
+  const ctx = react.useMemo(
+    () => ({ product, collection, store }),
+    [product, collection, store]
+  );
+  return react.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");
@@ -2674,12 +3386,19 @@ exports.CollectionContext = CollectionContext;
 exports.CollectionProvider = CollectionProvider;
 exports.CurrencySwitcher = CurrencySwitcher;
 exports.CustomerContext = CustomerContext;
+exports.EditableImage = EditableImage;
+exports.EditableText = EditableText;
 exports.Form = Form;
+exports.ICON_NAMES = ICON_NAMES;
+exports.Icon = Icon;
+exports.IconMap = IconMap;
 exports.Image = Image;
 exports.Link = Link;
 exports.LocaleSwitcher = LocaleSwitcher;
 exports.LocalizationContext = LocalizationContext;
+exports.MAX_BLOCK_DEPTH = MAX_BLOCK_DEPTH;
 exports.Money = Money;
+exports.NavigationContext = NavigationContext;
 exports.NuMuProvider = NuMuProvider;
 exports.PageContext = PageContext;
 exports.ProductCard = ProductCard;
@@ -2690,24 +3409,33 @@ exports.Section = Section;
 exports.SectionContext = SectionContext;
 exports.ShopContext = ShopContext;
 exports.ThemeSettingsContext = ThemeSettingsContext;
+exports.applyGlobalStyleTokens = applyGlobalStyleTokens;
 exports.assetUrl = assetUrl;
 exports.availableValues = availableValues;
 exports.buildLocaleBundle = buildLocaleBundle;
+exports.clearSdkSingleton = clearSdkSingleton;
 exports.collectBlocks = collectBlocks;
 exports.collectSections = collectSections;
 exports.defaultVariant = defaultVariant;
 exports.defineBlock = defineBlock;
 exports.defineSection = defineSection;
+exports.dynamicSource = dynamicSource;
 exports.findVariantByOptions = findVariantByOptions;
 exports.flattenMessages = flattenMessages;
 exports.getReactSingleton = getReactSingleton;
 exports.getSdkSingleton = getSdkSingleton;
 exports.isDefinedBlock = isDefinedBlock;
 exports.isDefinedSection = isDefinedSection;
+exports.isDynamicSource = isDynamicSource;
 exports.isSdkAvailable = isSdkAvailable;
+exports.mountTheme = mountTheme;
 exports.pickTranslations = pickTranslations;
 exports.registerReactSingleton = registerReactSingleton;
 exports.registerSdkSingleton = registerSdkSingleton;
+exports.resolveDynamicValue = resolveDynamicValue;
+exports.resolveFontStack = resolveFontStack;
+exports.resolveSettingsMap = resolveSettingsMap;
+exports.resolveSourcePath = resolveSourcePath;
 exports.resolveThemeSettings = resolveThemeSettings;
 exports.sanitizeHtml = sanitizeHtml;
 exports.useAnalytics = useAnalytics;
@@ -2718,6 +3446,7 @@ exports.useCollection = useCollection;
 exports.useCollectionOptional = useCollectionOptional;
 exports.useCollections = useCollections;
 exports.useCurrency = useCurrency;
+exports.useCurrentTemplate = useCurrentTemplate;
 exports.useCustomer = useCustomer;
 exports.useCustomerActions = useCustomerActions;
 exports.useCustomerAddresses = useCustomerAddresses;
@@ -2738,6 +3467,7 @@ exports.useProductOptional = useProductOptional;
 exports.useProducts = useProducts;
 exports.useRelatedProducts = useRelatedProducts;
 exports.useReorder = useReorder;
+exports.useResolvedSettings = useResolvedSettings;
 exports.useSearch = useSearch;
 exports.useSection = useSection;
 exports.useSectionOptional = useSectionOptional;