@atomm-developer/generator-material-purchase 0.1.0

package/dist/index.es.js

@@ -0,0 +1,1925 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const DEFAULT_API_BASE_URL = "https://xcs-api.xtool.com";
+const ICON_BASE = "https://storage.atomm.com/xtool/aimake-static/static/xtool-shopify";
+const ShopifyStoreName = {
+  MAKEBLOCK_XTOOL: "makeblock-xtool",
+  CA_XTOOL: "ca-xtool",
+  XTOOL_AUSTRALIA_STORE: "xtool-australia-store",
+  JP_XTOOL: "jp-xtool",
+  EU_XTOOL: "eu-xtool",
+  DE_XTOOL: "de-xtool",
+  FR_XTOOL: "fr-xtool",
+  UK_XTOOL: "uk-xtool"
+};
+const PROD_STORE_OPTIONS = [
+  {
+    label: "US",
+    value: ShopifyStoreName.MAKEBLOCK_XTOOL,
+    icon: `${ICON_BASE}/at_country_us.svg`,
+    shopDomain: "makeblock-xtool.myshopify.com",
+    storeFrontAccessToken: "7bb184c4d18313c58d0ccd6bfa0f73a3"
+  },
+  {
+    label: "CA",
+    value: ShopifyStoreName.CA_XTOOL,
+    icon: `${ICON_BASE}/at_country_ca.svg`,
+    shopDomain: "ca-xtool.myshopify.com",
+    storeFrontAccessToken: "7912e607574a3a6eaffaf501c75408e6"
+  },
+  {
+    label: "EU",
+    value: ShopifyStoreName.EU_XTOOL,
+    icon: `${ICON_BASE}/at_country_eu.svg`,
+    shopDomain: "eu-xtool.myshopify.com",
+    storeFrontAccessToken: "0886b237162c21d11ba1ca30f6220c6f"
+  },
+  {
+    label: "UK",
+    value: ShopifyStoreName.UK_XTOOL,
+    icon: `${ICON_BASE}/at_country_uk.svg`,
+    shopDomain: "uk-xtool.myshopify.com",
+    storeFrontAccessToken: "adf825795f70225d0351ad387d538757"
+  },
+  {
+    label: "FR",
+    value: ShopifyStoreName.FR_XTOOL,
+    icon: `${ICON_BASE}/at_country_fr.svg`,
+    shopDomain: "fr-xtool.myshopify.com",
+    storeFrontAccessToken: "e397fc547281c76d1086776fa347d804"
+  },
+  {
+    label: "DE",
+    value: ShopifyStoreName.DE_XTOOL,
+    icon: `${ICON_BASE}/at_country_de.svg`,
+    shopDomain: "de-xtool.myshopify.com",
+    storeFrontAccessToken: "87e1adaeba390a0b21e5ef6937792d2f"
+  },
+  {
+    label: "JP",
+    value: ShopifyStoreName.JP_XTOOL,
+    icon: `${ICON_BASE}/at_country_jp.svg`,
+    shopDomain: "jp-xtool.myshopify.com",
+    storeFrontAccessToken: "c9738498306280b6ae87bb999811d952"
+  },
+  {
+    label: "AU",
+    value: ShopifyStoreName.XTOOL_AUSTRALIA_STORE,
+    icon: `${ICON_BASE}/at_country_au.svg`,
+    shopDomain: "xtool-australia-store.myshopify.com",
+    storeFrontAccessToken: "fabb70f52384af557b4ac0392f86c2ed"
+  }
+];
+const STORE_LABEL_KEY_MAP = {
+  [ShopifyStoreName.MAKEBLOCK_XTOOL]: "store_us",
+  [ShopifyStoreName.CA_XTOOL]: "store_ca",
+  [ShopifyStoreName.XTOOL_AUSTRALIA_STORE]: "store_au",
+  [ShopifyStoreName.EU_XTOOL]: "store_eu",
+  [ShopifyStoreName.DE_XTOOL]: "store_de",
+  [ShopifyStoreName.FR_XTOOL]: "store_fr",
+  [ShopifyStoreName.UK_XTOOL]: "store_uk",
+  [ShopifyStoreName.JP_XTOOL]: "store_jp"
+};
+const COUNTRY_NAME_KEY_MAP = {
+  [ShopifyStoreName.MAKEBLOCK_XTOOL]: "country_usa",
+  [ShopifyStoreName.CA_XTOOL]: "country_canada",
+  [ShopifyStoreName.XTOOL_AUSTRALIA_STORE]: "country_australia",
+  [ShopifyStoreName.EU_XTOOL]: "country_eu",
+  [ShopifyStoreName.DE_XTOOL]: "country_germany",
+  [ShopifyStoreName.FR_XTOOL]: "country_france",
+  [ShopifyStoreName.UK_XTOOL]: "country_uk",
+  [ShopifyStoreName.JP_XTOOL]: "country_japan"
+};
+function countryToSite(countryInfo) {
+  if (!countryInfo) return ShopifyStoreName.MAKEBLOCK_XTOOL;
+  switch (countryInfo.continent) {
+    case "EU":
+      switch (countryInfo.country) {
+        case "GB":
+        case "GG":
+        case "IM":
+        case "JE":
+          return ShopifyStoreName.UK_XTOOL;
+        case "DE":
+        case "AT":
+          return ShopifyStoreName.DE_XTOOL;
+        case "FR":
+        case "LU":
+        case "MC":
+          return ShopifyStoreName.FR_XTOOL;
+        default:
+          return ShopifyStoreName.EU_XTOOL;
+      }
+    case "AS":
+      return countryInfo.country === "JP" ? ShopifyStoreName.JP_XTOOL : ShopifyStoreName.MAKEBLOCK_XTOOL;
+    case "NA":
+      return countryInfo.country === "CA" ? ShopifyStoreName.CA_XTOOL : ShopifyStoreName.MAKEBLOCK_XTOOL;
+    case "OC":
+      return countryInfo.country === "AU" ? ShopifyStoreName.XTOOL_AUSTRALIA_STORE : ShopifyStoreName.MAKEBLOCK_XTOOL;
+    default:
+      return ShopifyStoreName.MAKEBLOCK_XTOOL;
+  }
+}
+const STORAGE_KEYS = {
+  CURRENT_SHOP: "xtool_current_shop_name",
+  SHOP_INFO: "xtool_shop_info",
+  U_TOKEN: "utoken",
+  LANG: "LANG_KEY"
+};
+function getCookie(name) {
+  if (typeof document === "undefined") return "";
+  const reg = new RegExp(`(?:^|;\\s*)${name}=([^;]*)`);
+  const match = document.cookie.match(reg);
+  return match ? decodeURIComponent(match[1]) : "";
+}
+function getUToken() {
+  return getCookie(STORAGE_KEYS.U_TOKEN) || localStorage.getItem(STORAGE_KEYS.U_TOKEN) || "";
+}
+function getLang() {
+  return localStorage.getItem(STORAGE_KEYS.LANG) || "en";
+}
+async function atommRequest({ baseURL, url, method, params, data }) {
+  let finalUrl = baseURL.replace(/\/$/, "") + url;
+  if (params && method === "GET") {
+    const search = new URLSearchParams();
+    Object.entries(params).forEach(([k, v]) => {
+      if (v === void 0 || v === null) return;
+      search.append(k, String(v));
+    });
+    const qs = search.toString();
+    if (qs) finalUrl += (finalUrl.includes("?") ? "&" : "?") + qs;
+  }
+  const res = await fetch(finalUrl, {
+    method,
+    headers: {
+      "content-type": "application/json;charset=UTF-8",
+      uToken: getUToken(),
+      lang: getLang()
+    },
+    body: method === "POST" ? JSON.stringify(data ?? {}) : void 0
+  });
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status} ${res.statusText}`);
+  }
+  const body = await res.json();
+  if (body.code === 0) return body.data;
+  throw new Error(body.msg || body.message || `Request failed with code ${body.code}`);
+}
+function fetchAccessoryPack(baseURL, params) {
+  return atommRequest({
+    baseURL,
+    url: "/community/v1/web/generator-accessory-pack",
+    method: "GET",
+    params
+  });
+}
+function fetchIpLocation(baseURL) {
+  return atommRequest({
+    baseURL,
+    url: "/community/v2/web/ip/location",
+    method: "GET"
+  });
+}
+function fetchDistributionTrackId(baseURL, productContent) {
+  return atommRequest({
+    baseURL,
+    url: "/community/v1/web/distribution/order",
+    method: "POST",
+    data: { productContent }
+  });
+}
+class f {
+  constructor(t) {
+    if (t.shopDomain && !t.shopDomain.match(/^[a-zA-Z0-9_-]+\.myshopify\.com$/))
+      throw new Error("shopDomain 必须为 xxxx.myshopify.com 格式");
+    if (!t.storeFrontAccessToken)
+      throw new Error("storeFrontAccessToken 必填");
+    this.config = {
+      shopDomain: t.shopDomain,
+      storeFrontAccessToken: t.storeFrontAccessToken,
+      apiVersion: t.apiVersion || "2025-07",
+      timeout: t.timeout || 3e4,
+      cartStorageMode: t.cartStorageMode || "memory",
+      cartStorageKey: t.cartStorageKey || "xtool_shop_sdk_shopify_cart_id"
+    }, this.baseUrl = `https://${this.config.shopDomain}/api/${this.config.apiVersion}`;
+  }
+  /**
+   * 发送 HTTP 请求
+   */
+  async request(t, e = {}) {
+    const {
+      method: o = "GET",
+      headers: a = {},
+      body: i,
+      params: s
+    } = e;
+    let n = `${this.baseUrl}${t}`;
+    if (s) {
+      const r = new URLSearchParams(s).toString();
+      n += `?${r}`;
+    }
+    const h = {
+      "Content-Type": "application/json",
+      "X-Shopify-StoreFront-Access-Token": this.config.storeFrontAccessToken,
+      ...a
+    }, c = {
+      method: o,
+      headers: h
+    };
+    i && (c.body = JSON.stringify(i));
+    const d = new AbortController(), u = setTimeout(() => d.abort(), this.config.timeout);
+    try {
+      const r = await fetch(n, {
+        ...c,
+        signal: d.signal
+      });
+      clearTimeout(u);
+      const p = {
+        data: await r.json(),
+        status: r.status,
+        statusText: r.statusText,
+        headers: this.parseHeaders(r.headers)
+      };
+      if (!r.ok)
+        throw new Error(`API 请求失败: ${r.status} ${r.statusText}`);
+      return p;
+    } catch (r) {
+      throw r instanceof Error ? r.name === "AbortError" ? new Error("请求超时") : r : new Error("未知错误");
+    }
+  }
+  /**
+   * 解析响应头
+   */
+  parseHeaders(t) {
+    const e = {};
+    return t.forEach((o, a) => {
+      e[a] = o;
+    }), e;
+  }
+  graphQlRequest(t, e = {}) {
+    return this.request("/graphql.json", {
+      method: "POST",
+      body: { query: t, variables: e }
+    });
+  }
+  /**
+   * 创建购物车
+   * @param params 购物车参数
+   * @returns 购物车信息，包含购物车 ID
+   */
+  async createCart(t) {
+    const e = t.lines.map((s) => s.merchandiseId.startsWith("gid://shopify/ProductVariant/") ? s : {
+      ...s,
+      merchandiseId: `gid://shopify/ProductVariant/${s.merchandiseId}`
+    });
+    return t.lines = e, (await this.graphQlRequest(`
+            mutation cartCreate($input: CartInput) {
+                cartCreate(input: $input) {
+                    cart {
+                        id
+                        checkoutUrl
+                    }
+                    userErrors {
+                        field
+                        message
+                    }
+                    warnings {
+                        code
+                        message
+                        target
+                    }
+                }
+            }
+        `, { input: t })).data.data.cartCreate;
+  }
+  /**
+   * 获取商品信息与Metafields
+   * @param params 商品信息与Metafields参数
+   * @returns 商品信息与Metafields
+   */
+  async getProductInfoWithMetafields(t) {
+    const { productId: e, metafieldsIdentifiers: o } = t, a = `
+            query Products($id: ID, $metafields_identifiers: [HasMetafieldsIdentifier!]!) {
+                product(id: $id ) {
+                    title
+                    id
+                    handle
+                    tags
+                    productType
+                    totalInventory
+                    onlineStoreUrl
+                    handle
+                    isGiftCard
+                    description
+                    descriptionHtml
+                    selectedOrFirstAvailableVariant {
+                        id
+                    }
+                    featuredImage {
+                        url
+                    }
+                    metafields(identifiers: $metafields_identifiers){
+                        id
+                        namespace
+                        key
+                        value
+                    }
+                    variants(first: 20){
+                        nodes {
+                            id
+                            title
+                        }
+                    }
+                }
+            }
+        `, i = {
+      id: String(e).startsWith("gid://shopify/Product/") ? e : `gid://shopify/Product/${e}`,
+      metafields_identifiers: o
+    };
+    return (await this.graphQlRequest(a, i)).data.data.product;
+  }
+  /**
+   * 获取店铺信息
+   * @returns 店铺信息
+   */
+  async getShopInfo() {
+    return (await this.graphQlRequest(`
+            query Shop {
+                shop {
+                    id
+                    name
+                    moneyFormat
+                }
+            }
+        `)).data.data.shop;
+  }
+  /**
+   * 自定义请求方法
+   * 提供灵活的 HTTP 请求能力，可用于调用其他 Shopify API
+   */
+  async customRequest(t, e) {
+    return this.request(t, e);
+  }
+}
+class ShopifyClient {
+  constructor() {
+    __publicField(this, "currentShopName", "");
+    __publicField(this, "client", null);
+    __publicField(this, "initialized", false);
+    __publicField(this, "initializing", false);
+  }
+  get currentStore() {
+    return PROD_STORE_OPTIONS.find((s) => s.value === this.currentShopName);
+  }
+  initClientFor(shopName) {
+    const store = PROD_STORE_OPTIONS.find((s) => s.value === shopName);
+    if (!store) {
+      console.warn(`[ShopifyClient] missing config for store: ${shopName}`);
+      return;
+    }
+    this.client = new f({
+      shopDomain: store.shopDomain,
+      storeFrontAccessToken: store.storeFrontAccessToken
+    });
+  }
+  async init(initialShopName) {
+    if (this.initialized || this.initializing) return;
+    this.initializing = true;
+    try {
+      this.currentShopName = initialShopName;
+      localStorage.setItem(STORAGE_KEYS.CURRENT_SHOP, this.currentShopName);
+      this.initClientFor(this.currentShopName);
+      await this.fetchAndSaveShopInfo();
+      this.initialized = true;
+    } catch (e) {
+      console.error("[ShopifyClient] init failed:", e);
+      this.initialized = true;
+    } finally {
+      this.initializing = false;
+    }
+  }
+  async fetchAndSaveShopInfo() {
+    if (!this.client) return;
+    try {
+      const info = await this.client.getShopInfo();
+      localStorage.setItem(
+        STORAGE_KEYS.SHOP_INFO,
+        JSON.stringify({
+          money_with_currency_format: info.moneyFormat,
+          moneyFormat: info.moneyFormat
+        })
+      );
+    } catch (e) {
+      console.warn("[ShopifyClient] getShopInfo failed:", e);
+    }
+  }
+  async changeShop(shopName) {
+    this.currentShopName = shopName;
+    localStorage.setItem(STORAGE_KEYS.CURRENT_SHOP, shopName);
+    this.initClientFor(shopName);
+    await this.fetchAndSaveShopInfo();
+  }
+  async createCheckout(lines, options) {
+    var _a, _b;
+    if (!this.client) throw new Error("Shopify client not initialized");
+    const attributes = [
+      { key: "xtool_return_url", value: window.location.href }
+    ];
+    if (options == null ? void 0 : options.trackId) {
+      attributes.push({ key: "atomm_track_id", value: options.trackId });
+    }
+    const result = await this.client.createCart({ lines, attributes });
+    if (result.cart) return result.cart;
+    const errMsg = ((_b = (_a = result.userErrors) == null ? void 0 : _a[0]) == null ? void 0 : _b.message) || "Failed to create cart";
+    throw new Error(errMsg);
+  }
+}
+function formatMoney(money) {
+  const moneyNumber = typeof money === "string" ? parseFloat(money) : money;
+  if (isNaN(moneyNumber) || typeof moneyNumber !== "number") return "$0.00";
+  let shopInfo = {};
+  try {
+    const stored = localStorage.getItem(STORAGE_KEYS.SHOP_INFO);
+    if (stored) shopInfo = JSON.parse(stored);
+  } catch {
+  }
+  const formatString = shopInfo.money_with_currency_format || shopInfo.moneyFormat || "${{amount}}";
+  const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
+  function formatWithDelimiters(n, precision, thousands = ",", decimal = ".") {
+    var _a;
+    const parts = n.toFixed(precision).split(".");
+    const dollars = ((_a = parts[0]) == null ? void 0 : _a.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1" + thousands)) || "";
+    const cents = parts[1] ? decimal + parts[1] : "";
+    return dollars + cents;
+  }
+  const match = formatString.match(placeholderRegex);
+  let value = "";
+  if (match == null ? void 0 : match[1]) {
+    switch (match[1]) {
+      case "amount":
+        value = formatWithDelimiters(moneyNumber, 2);
+        break;
+      case "amount_no_decimals":
+        value = formatWithDelimiters(moneyNumber, 0);
+        break;
+      case "amount_with_comma_separator":
+        value = formatWithDelimiters(moneyNumber, 2, ".", ",");
+        break;
+      case "amount_no_decimals_with_comma_separator":
+        value = formatWithDelimiters(moneyNumber, 0, ".", ",");
+        break;
+      case "amount_with_space_separator":
+        value = formatWithDelimiters(moneyNumber, 2, " ", ",");
+        break;
+      case "amount_with_apostrophe_separator":
+        value = formatWithDelimiters(moneyNumber, 2, "'");
+        break;
+      default:
+        value = formatWithDelimiters(moneyNumber, 2);
+        break;
+    }
+  } else {
+    value = formatWithDelimiters(moneyNumber, 2);
+  }
+  return formatString.replace(placeholderRegex, value);
+}
+function assignUid(item, index) {
+  var _a, _b;
+  const dvId = item.defaultVariant;
+  if (dvId != null) return `${item.id}_${String(dvId)}_${index}`;
+  const vid = (_b = (_a = item.variants) == null ? void 0 : _a[0]) == null ? void 0 : _b.id;
+  if (vid != null) return `${item.id}_${vid}_${index}`;
+  return `${item.id}_${index}`;
+}
+function isVariantPurchasable(v) {
+  if (!v) return false;
+  return v.availableForSale === true && v.outOfStock !== true;
+}
+function refreshProductPrices(list) {
+  list.forEach((item) => {
+    var _a;
+    (_a = item.variants) == null ? void 0 : _a.forEach((v) => {
+      v.displayPrice = formatMoney(v.price || "0.00");
+      v.displayCompareAtPrice = v.compareAtPrice ? formatMoney(v.compareAtPrice) : "";
+    });
+  });
+}
+function findVariantByOptions(product, options) {
+  var _a;
+  if (!((_a = product.variants) == null ? void 0 : _a.length)) return null;
+  if (!options || Object.keys(options).length === 0) {
+    if (product.defaultVariant) {
+      const dv = product.variants.find((v) => v.id === product.defaultVariant);
+      if (dv) return dv;
+    }
+    return product.variants.find((v) => v.isBind) || product.variants[0] || null;
+  }
+  const matched = product.variants.find((v) => {
+    if (!v.option) return false;
+    for (const [k, val] of Object.entries(options)) {
+      if (k === "uid") continue;
+      if (val && val !== "" && v.option[k] !== val) return false;
+    }
+    return true;
+  });
+  if (matched) return matched;
+  if (product.defaultVariant) {
+    const dv = product.variants.find((v) => v.id === product.defaultVariant);
+    if (dv) return dv;
+  }
+  return product.variants.find((v) => v.isBind) || product.variants[0] || null;
+}
+function getOptionKeys(product) {
+  var _a, _b;
+  const variants = product.variants;
+  if (!(variants == null ? void 0 : variants.length)) return [];
+  const isNonEmpty = (v) => !!v && v.trim() !== "";
+  let keys = [];
+  if ((_a = product.options) == null ? void 0 : _a.length) {
+    keys = product.options.map((o) => o.key).filter(Boolean);
+  } else if ((_b = variants[0]) == null ? void 0 : _b.option) {
+    keys = Object.keys(variants[0].option);
+  }
+  return keys.filter((k) => variants.some((v) => {
+    var _a2;
+    return isNonEmpty((_a2 = v.option) == null ? void 0 : _a2[k]);
+  }));
+}
+function getOptionValues(product, keys, index, selected) {
+  const isNonEmpty = (v) => !!v && v.trim() !== "";
+  const variants = product.variants || [];
+  const values = /* @__PURE__ */ new Set();
+  variants.forEach((v) => {
+    if (!v.option) return;
+    if (index > 0) {
+      for (let i = 0; i < index; i++) {
+        const prevKey = keys[i];
+        const prevVal = selected[prevKey];
+        if (isNonEmpty(prevVal) && v.option[prevKey] !== prevVal) return;
+      }
+    }
+    const val = v.option[keys[index]];
+    if (isNonEmpty(val)) values.add(val);
+  });
+  return Array.from(values).sort();
+}
+function getDefaultVariant(product) {
+  const variants = product.variants;
+  if (!(variants == null ? void 0 : variants.length)) return null;
+  if (product.defaultVariant) {
+    const found = variants.find((v) => v.id === product.defaultVariant);
+    if (found) return found;
+  }
+  return variants.find((v) => v.isBind) || variants[0] || null;
+}
+function initSelectedOptionsForProduct(product) {
+  const keys = getOptionKeys(product);
+  const selected = {};
+  if (!keys.length) return selected;
+  keys.forEach((k) => selected[k] = "");
+  const target = getDefaultVariant(product);
+  if (target == null ? void 0 : target.option) {
+    keys.forEach((k) => {
+      const v = target.option[k];
+      if (v && v.trim() !== "") selected[k] = v;
+    });
+  } else {
+    keys.forEach((k, i) => {
+      const values = getOptionValues(product, keys, i, selected);
+      if (values[0]) selected[k] = values[0];
+    });
+  }
+  return selected;
+}
+const en = {
+  shopify_supplies_kit: "Supplies Kit",
+  close: "Close",
+  current_country_notice: "Items will be shipped to {country}.",
+  loading: "Loading",
+  no_items_in_cart: "No items available.",
+  sold_out: "Sold out",
+  total: "Total",
+  discount_notice: "Discount codes can only be used in checkout.",
+  buy_now: "Buy now",
+  failed_load_product_list: "Failed to load product list.",
+  checkout_failed: "Failed to create checkout.",
+  selected_items_out_of_stock: "Selected items are sold out.",
+  no_valid_products_selected: "No valid products selected.",
+  store_us: "US",
+  store_ca: "CA",
+  store_au: "AU",
+  store_eu: "EU",
+  store_de: "DE",
+  store_fr: "FR",
+  store_uk: "UK",
+  store_jp: "JP",
+  store_test: "XT",
+  country_usa: "USA",
+  country_canada: "Canada",
+  country_australia: "Australia",
+  country_eu: "EU",
+  country_germany: "Germany",
+  country_france: "France",
+  country_uk: "UK",
+  country_japan: "Japan"
+};
+const zh = {
+  shopify_supplies_kit: "耗材包",
+  close: "关闭",
+  current_country_notice: "商品将发往{country}。",
+  loading: "加载中",
+  no_items_in_cart: "暂无可购买的商品。",
+  sold_out: "售罄",
+  total: "合计",
+  discount_notice: "优惠码仅可在结算页使用。",
+  buy_now: "立即购买",
+  failed_load_product_list: "加载商品列表失败。",
+  checkout_failed: "创建结算订单失败。",
+  selected_items_out_of_stock: "所选商品已售罄。",
+  no_valid_products_selected: "未选择有效商品。",
+  store_us: "美国",
+  store_ca: "加拿大",
+  store_au: "澳大利亚",
+  store_eu: "欧盟",
+  store_de: "德国",
+  store_fr: "法国",
+  store_uk: "英国",
+  store_jp: "日本",
+  store_test: "测试",
+  country_usa: "美国",
+  country_canada: "加拿大",
+  country_australia: "澳大利亚",
+  country_eu: "欧洲",
+  country_germany: "德国",
+  country_france: "法国",
+  country_uk: "英国",
+  country_japan: "日本"
+};
+class I18n {
+  constructor() {
+    __publicField(this, "locale", "en");
+    __publicField(this, "dict", { en, zh });
+  }
+  setLocale(locale) {
+    this.locale = this.dict[locale] ? locale : "en";
+  }
+  extend(messages) {
+    if (!messages) return;
+    Object.entries(messages).forEach(([loc, entries]) => {
+      if (!entries) return;
+      this.dict[loc] = { ...this.dict[loc] || {}, ...entries };
+    });
+  }
+  t(key, params) {
+    var _a;
+    const table = this.dict[this.locale] || this.dict["en"] || {};
+    let text = table[key] ?? ((_a = this.dict["en"]) == null ? void 0 : _a[key]) ?? key;
+    if (params) {
+      Object.entries(params).forEach(([k, v]) => {
+        text = text.replace(new RegExp(`\\{\\s*${k}\\s*\\}`, "g"), String(v));
+      });
+    }
+    return text;
+  }
+}
+const wrap = (path, size = 16) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
+const iconX = (size = 16) => wrap('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>', size);
+const iconChevronDown = (size = 16) => wrap('<path d="m6 9 6 6 6-6"/>', size);
+const iconChevronUp = (size = 16) => wrap('<path d="m18 15-6-6-6 6"/>', size);
+const iconCheck = (size = 12) => wrap('<path d="M20 6 9 17l-5-5"/>', size);
+const iconMinus = (size = 14) => wrap('<path d="M5 12h14"/>', size);
+const iconPlus = (size = 14) => wrap('<path d="M5 12h14"/><path d="M12 5v14"/>', size);
+const styles = `
+:host, .xpm-host {
+  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color: #2d3541;
+}
+*, *::before, *::after { box-sizing: border-box; }
+
+.xpm-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 0;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.xpm-overlay--visible { opacity: 1; }
+
+.xpm-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 320px;
+  height: 100vh;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow:
+    0 1.187px 2.373px rgba(0, 0, 0, 0.1),
+    0 23.733px 23.733px rgba(0, 0, 0, 0.1);
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+}
+.xpm-panel--visible { transform: translateX(0); }
+
+.xpm-header {
+  height: 56px;
+  padding: 12px;
+  border-bottom: 1px solid #e7e9ed;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  background: #fff;
+}
+.xpm-header__title {
+  color: #2d3541;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+.xpm-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #2d3541;
+  cursor: pointer;
+}
+.xpm-icon-btn:hover { background: #f0f0f5; }
+
+.xpm-banner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  padding: 8px 12px 0;
+  flex-shrink: 0;
+  background: #fff;
+}
+.xpm-banner__text {
+  min-width: 0;
+  color: #ff7c23;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 80px;
+}
+
+.xpm-dropdown {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 73px;
+  flex-shrink: 0;
+}
+.xpm-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 73px;
+  height: 32px;
+  padding: 6px 4px 6px 8px;
+  border: 1px solid transparent;
+  background: #f0f0f5;
+  border-radius: 4px;
+  color: #070b10;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.xpm-dropdown--open .xpm-dropdown__trigger {
+  border: 1px solid #070b10;
+  background: #fff;
+}
+.xpm-dropdown__selected {
+  flex: 1;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #070b10;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  overflow: hidden;
+}
+.xpm-dropdown__selected span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.xpm-dropdown__menu {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 73px;
+  padding: 4px;
+  overflow: hidden;
+  border: 1px solid #f0f0f5;
+  border-radius: 6px;
+  background: #fff;
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.1),
+    0 16px 32px rgba(0, 0, 0, 0.1);
+}
+.xpm-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 32px;
+  padding: 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #070b10;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  cursor: pointer;
+}
+.xpm-dropdown__item:hover { background: #f0f0f5; }
+.xpm-dropdown__item-icon {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+.xpm-flag {
+  width: 15px;
+  height: 11px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.xpm-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  background: #fff;
+}
+.xpm-list::-webkit-scrollbar { width: 4px; }
+.xpm-list::-webkit-scrollbar-thumb { background: #c5cad2; border-radius: 2px; }
+.xpm-list::-webkit-scrollbar-track { background: transparent; }
+
+.xpm-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 100%;
+  color: #848b96;
+  font-size: 12px;
+}
+.xpm-spinner {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #e7e9ed;
+  border-top-color: #6e757f;
+  animation: xpm-spin 0.8s linear infinite;
+}
+@keyframes xpm-spin { to { transform: rotate(1turn); } }
+
+.xpm-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  min-height: 110px;
+  padding: 8px 12px;
+  border-bottom: 1px solid rgba(83, 91, 136, 0.1);
+  background: #fff;
+}
+.xpm-row--has-options {
+  align-items: flex-start;
+  min-height: 167px;
+  padding: 12px;
+}
+.xpm-row--has-options .xpm-row__info {
+  min-height: 142px;
+  justify-content: flex-start;
+}
+.xpm-row--has-options .xpm-row__meta { margin-top: 0; }
+
+.xpm-row__media {
+  position: relative;
+  width: 88px;
+  height: 88px;
+  flex-shrink: 0;
+}
+.xpm-row__thumb {
+  width: 88px;
+  height: 88px;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  background: #f6f6fa;
+}
+.xpm-row__thumb img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+.xpm-row__sold-out {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 0 8px 8px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 14px;
+}
+
+.xpm-checkbox {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+.xpm-checkbox input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.xpm-checkbox__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: 1px solid #d8dadf;
+  border-radius: 2px;
+  background: #fff;
+  color: #fff;
+}
+.xpm-checkbox--checked .xpm-checkbox__box {
+  border-color: #070b10;
+  background: #070b10;
+}
+.xpm-checkbox--disabled,
+.xpm-checkbox--disabled input { cursor: not-allowed; }
+.xpm-checkbox--disabled .xpm-checkbox__box {
+  border-color: #d8dadf;
+  background: #d8dadf;
+}
+
+.xpm-row__info {
+  flex: 1;
+  min-width: 0;
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 8px;
+}
+.xpm-row__name {
+  min-width: 100%;
+  color: #070b10;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.xpm-variants {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.xpm-select {
+  position: relative;
+  width: 100%;
+}
+.xpm-select__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 28px;
+  padding: 0 6px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  background: #fff;
+  color: #2d3541;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  cursor: pointer;
+}
+.xpm-select__trigger--placeholder { color: #848b96; }
+.xpm-select--open .xpm-select__trigger { border-color: #070b10; }
+.xpm-select__menu {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 4px);
+  z-index: 40;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 4px;
+  border: 1px solid #f0f0f5;
+  border-radius: 6px;
+  background: #fff;
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.1),
+    0 16px 32px rgba(0, 0, 0, 0.1);
+}
+.xpm-select__option {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 28px;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #2d3541;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  cursor: pointer;
+  text-align: left;
+}
+.xpm-select__option:hover { background: #f0f0f5; }
+.xpm-select__option--selected { background: #f0f0f5; color: #070b10; font-weight: 500; }
+
+.xpm-row__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.xpm-row__meta--with-options {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.xpm-price-group {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+.xpm-price-group__discount {
+  flex-shrink: 0;
+  color: #fa2730;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+}
+.xpm-price-group__current {
+  min-width: 0;
+  overflow: hidden;
+  color: #070b10;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  text-overflow: ellipsis;
+}
+.xpm-price-group__compare {
+  min-width: 0;
+  overflow: hidden;
+  color: #b3b9c2;
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 14px;
+  text-decoration: line-through;
+  text-overflow: ellipsis;
+}
+
+.xpm-row__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 24px;
+}
+.xpm-qty {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.xpm-qty__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid #d8dadf;
+  border-radius: 2px;
+  background: #fff;
+  color: #070b10;
+  cursor: pointer;
+}
+.xpm-qty__btn:hover:not(:disabled) { background: #f6f6fa; }
+.xpm-qty__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.xpm-qty__value {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #070b10;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.xpm-footer {
+  flex-shrink: 0;
+  height: 105px;
+  padding: 8px 16px;
+  border-top: 1px solid rgba(81, 97, 117, 0.1);
+  background: #fff;
+}
+.xpm-footer__inner {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 100%;
+}
+.xpm-footer__total-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+}
+.xpm-footer__total-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #070b10;
+}
+.xpm-footer__total-label {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+}
+.xpm-footer__total-price {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+}
+.xpm-footer__warning {
+  margin: 0;
+  color: #ff7c23;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+.xpm-buy-now {
+  width: 100%;
+  height: 32px;
+  padding: 6px 12px;
+  border: 0;
+  border-radius: 6px;
+  background: #ff0035;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  cursor: pointer;
+}
+.xpm-buy-now:hover:not(:disabled) { background: #e60030; }
+.xpm-buy-now:disabled { opacity: 0.6; cursor: not-allowed; }
+
+.xpm-toast {
+  position: fixed;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  padding: 8px 16px;
+  border-radius: 6px;
+  background: rgba(20, 20, 24, 0.92);
+  color: #fff;
+  font-size: 13px;
+  line-height: 20px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  opacity: 0;
+  transition: opacity 0.18s ease;
+  pointer-events: none;
+}
+.xpm-toast--visible { opacity: 1; }
+`;
+class Renderer {
+  constructor(state, i18n, callbacks, zIndex) {
+    __publicField(this, "host", null);
+    __publicField(this, "shadow", null);
+    __publicField(this, "overlay", null);
+    __publicField(this, "panel", null);
+    __publicField(this, "toastEl", null);
+    __publicField(this, "toastTimer", null);
+    __publicField(this, "docClickHandler", (e) => this.handleDocClick(e));
+    this.state = state;
+    this.i18n = i18n;
+    this.callbacks = callbacks;
+    this.zIndex = zIndex;
+  }
+  mount() {
+    if (this.host) return;
+    this.host = document.createElement("div");
+    this.host.className = "xpm-host";
+    this.host.style.position = "relative";
+    this.host.style.zIndex = String(this.zIndex);
+    this.shadow = this.host.attachShadow({ mode: "open" });
+    const styleEl = document.createElement("style");
+    styleEl.textContent = styles;
+    this.shadow.appendChild(styleEl);
+    this.overlay = document.createElement("div");
+    this.overlay.className = "xpm-overlay";
+    this.overlay.addEventListener("click", () => this.callbacks.onClose());
+    this.shadow.appendChild(this.overlay);
+    this.panel = document.createElement("div");
+    this.panel.className = "xpm-panel";
+    this.shadow.appendChild(this.panel);
+    document.body.appendChild(this.host);
+    this.shadow.addEventListener("click", this.docClickHandler);
+    this.renderAll();
+    requestAnimationFrame(() => {
+      var _a, _b;
+      (_a = this.overlay) == null ? void 0 : _a.classList.add("xpm-overlay--visible");
+      (_b = this.panel) == null ? void 0 : _b.classList.add("xpm-panel--visible");
+    });
+  }
+  unmount() {
+    var _a;
+    if (!this.host) return;
+    (_a = this.shadow) == null ? void 0 : _a.removeEventListener("click", this.docClickHandler);
+    this.host.remove();
+    this.host = null;
+    this.shadow = null;
+    this.overlay = null;
+    this.panel = null;
+    this.toastEl = null;
+    if (this.toastTimer) {
+      clearTimeout(this.toastTimer);
+      this.toastTimer = null;
+    }
+  }
+  /** 主动触发关闭动画，调用方负责在动画完成后 unmount */
+  playClose() {
+    return new Promise((resolve) => {
+      var _a, _b;
+      (_a = this.overlay) == null ? void 0 : _a.classList.remove("xpm-overlay--visible");
+      (_b = this.panel) == null ? void 0 : _b.classList.remove("xpm-panel--visible");
+      setTimeout(() => resolve(), 250);
+    });
+  }
+  setState(patch) {
+    Object.assign(this.state, patch);
+    this.renderAll();
+  }
+  /** 不重渲，仅查 / 触发某些行为 */
+  getState() {
+    return this.state;
+  }
+  showToast(message) {
+    if (!this.shadow) return;
+    if (!this.toastEl) {
+      this.toastEl = document.createElement("div");
+      this.toastEl.className = "xpm-toast";
+      this.shadow.appendChild(this.toastEl);
+    }
+    this.toastEl.textContent = message;
+    this.toastEl.classList.add("xpm-toast--visible");
+    if (this.toastTimer) clearTimeout(this.toastTimer);
+    this.toastTimer = window.setTimeout(() => {
+      var _a;
+      (_a = this.toastEl) == null ? void 0 : _a.classList.remove("xpm-toast--visible");
+    }, 2200);
+  }
+  renderAll() {
+    if (!this.panel) return;
+    this.panel.innerHTML = "";
+    this.panel.appendChild(this.renderHeader());
+    this.panel.appendChild(this.renderBanner());
+    this.panel.appendChild(this.renderList());
+    this.panel.appendChild(this.renderFooter());
+  }
+  renderHeader() {
+    const header = document.createElement("header");
+    header.className = "xpm-header";
+    const title = document.createElement("span");
+    title.className = "xpm-header__title";
+    title.textContent = this.i18n.t("shopify_supplies_kit");
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "xpm-icon-btn";
+    closeBtn.setAttribute("aria-label", this.i18n.t("close"));
+    closeBtn.innerHTML = iconX(16);
+    closeBtn.addEventListener("click", () => this.callbacks.onClose());
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    return header;
+  }
+  renderBanner() {
+    const banner = document.createElement("div");
+    banner.className = "xpm-banner";
+    const currentStore = PROD_STORE_OPTIONS.find((s) => s.value === this.state.currentShopName) || PROD_STORE_OPTIONS[0];
+    const countryKey = currentStore ? COUNTRY_NAME_KEY_MAP[currentStore.value] || "country_usa" : "country_usa";
+    const countryName = this.i18n.t(countryKey);
+    const bannerText = document.createElement("span");
+    bannerText.className = "xpm-banner__text";
+    bannerText.textContent = this.i18n.t("current_country_notice", { country: countryName });
+    const dropdown = document.createElement("div");
+    dropdown.className = "xpm-dropdown" + (this.state.shopMenuOpen ? " xpm-dropdown--open" : "");
+    dropdown.dataset.xpmStop = "1";
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = "xpm-dropdown__trigger";
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.setState({ shopMenuOpen: !this.state.shopMenuOpen, openSelect: null });
+    });
+    const triggerSelected = document.createElement("span");
+    triggerSelected.className = "xpm-dropdown__selected";
+    if (currentStore == null ? void 0 : currentStore.icon) {
+      const flag = document.createElement("img");
+      flag.src = currentStore.icon;
+      flag.alt = "";
+      flag.className = "xpm-flag";
+      triggerSelected.appendChild(flag);
+    }
+    const triggerLabel = document.createElement("span");
+    const labelKey = currentStore ? STORE_LABEL_KEY_MAP[currentStore.value] : void 0;
+    triggerLabel.textContent = labelKey ? this.i18n.t(labelKey) : (currentStore == null ? void 0 : currentStore.label) || "";
+    triggerSelected.appendChild(triggerLabel);
+    trigger.appendChild(triggerSelected);
+    const chevWrap = document.createElement("span");
+    chevWrap.innerHTML = this.state.shopMenuOpen ? iconChevronUp(16) : iconChevronDown(16);
+    trigger.appendChild(chevWrap);
+    dropdown.appendChild(trigger);
+    if (this.state.shopMenuOpen) {
+      const menu = document.createElement("div");
+      menu.className = "xpm-dropdown__menu";
+      PROD_STORE_OPTIONS.forEach((opt) => {
+        const item = document.createElement("button");
+        item.type = "button";
+        item.className = "xpm-dropdown__item";
+        if (opt.icon) {
+          const ic = document.createElement("img");
+          ic.src = opt.icon;
+          ic.alt = "";
+          ic.className = "xpm-dropdown__item-icon";
+          item.appendChild(ic);
+        }
+        const labelText = document.createElement("span");
+        const k = STORE_LABEL_KEY_MAP[opt.value];
+        labelText.textContent = k ? this.i18n.t(k) : opt.label;
+        item.appendChild(labelText);
+        item.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.setState({ shopMenuOpen: false });
+          this.callbacks.onShopChange(opt.value);
+        });
+        menu.appendChild(item);
+      });
+      dropdown.appendChild(menu);
+    }
+    banner.appendChild(bannerText);
+    banner.appendChild(dropdown);
+    return banner;
+  }
+  renderList() {
+    const list = document.createElement("div");
+    list.className = "xpm-list";
+    if (this.state.loading) {
+      const ph = document.createElement("div");
+      ph.className = "xpm-placeholder";
+      const sp = document.createElement("div");
+      sp.className = "xpm-spinner";
+      const txt = document.createElement("span");
+      txt.textContent = this.i18n.t("loading");
+      ph.appendChild(sp);
+      ph.appendChild(txt);
+      list.appendChild(ph);
+      return list;
+    }
+    if (this.state.productList.length === 0) {
+      const ph = document.createElement("div");
+      ph.className = "xpm-placeholder";
+      ph.textContent = this.i18n.t("no_items_in_cart");
+      list.appendChild(ph);
+      return list;
+    }
+    this.state.productList.forEach((p) => list.appendChild(this.renderCard(p)));
+    return list;
+  }
+  renderCard(product) {
+    const keys = getOptionKeys(product);
+    const hasOptions = keys.length > 0;
+    const selectedOpts = this.state.productSelectedOptions[product.uid] || initSelectedOptionsForProduct(product);
+    if (!this.state.productSelectedOptions[product.uid]) {
+      this.state.productSelectedOptions[product.uid] = selectedOpts;
+    }
+    const variant = findVariantByOptions(product, selectedOpts);
+    const isSoldOut = (variant == null ? void 0 : variant.outOfStock) === true;
+    const isPurchasable = isVariantPurchasable(variant);
+    const isChecked = isSoldOut || this.state.checkedUids.includes(product.uid);
+    const row = document.createElement("div");
+    row.className = "xpm-row" + (hasOptions ? " xpm-row--has-options" : "");
+    const media = document.createElement("div");
+    media.className = "xpm-row__media";
+    const thumb = document.createElement("div");
+    thumb.className = "xpm-row__thumb";
+    const img = document.createElement("img");
+    const imgSrc = ((variant == null ? void 0 : variant.image) && variant.image.trim() !== "" ? variant.image : product.image) || "";
+    if (imgSrc) img.src = imgSrc;
+    img.alt = product.displayName || product.title || "";
+    thumb.appendChild(img);
+    if (isSoldOut) {
+      const sold = document.createElement("div");
+      sold.className = "xpm-row__sold-out";
+      sold.textContent = this.i18n.t("sold_out");
+      thumb.appendChild(sold);
+    }
+    media.appendChild(thumb);
+    const checkbox = document.createElement("label");
+    checkbox.className = "xpm-checkbox" + (isChecked ? " xpm-checkbox--checked" : "") + (isSoldOut ? " xpm-checkbox--disabled" : "");
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.checked = isChecked;
+    input.disabled = isSoldOut;
+    input.addEventListener("change", (e) => {
+      if (!isPurchasable) return;
+      const next = e.target.checked;
+      const set = new Set(this.state.checkedUids);
+      if (next) set.add(product.uid);
+      else set.delete(product.uid);
+      this.setState({ checkedUids: Array.from(set) });
+    });
+    const box = document.createElement("span");
+    box.className = "xpm-checkbox__box";
+    if (isChecked) box.innerHTML = iconCheck(12);
+    checkbox.appendChild(input);
+    checkbox.appendChild(box);
+    media.appendChild(checkbox);
+    row.appendChild(media);
+    const info = document.createElement("div");
+    info.className = "xpm-row__info";
+    const name = document.createElement("div");
+    name.className = "xpm-row__name";
+    name.textContent = product.displayName || product.title || "";
+    name.title = name.textContent;
+    info.appendChild(name);
+    if (hasOptions) {
+      const variants = document.createElement("div");
+      variants.className = "xpm-variants";
+      keys.forEach((key, idx) => {
+        variants.appendChild(this.renderSelect(product, key, idx, keys, selectedOpts));
+      });
+      info.appendChild(variants);
+    }
+    const meta = document.createElement("div");
+    meta.className = "xpm-row__meta" + (hasOptions ? " xpm-row__meta--with-options" : "");
+    const priceGroup = document.createElement("div");
+    priceGroup.className = "xpm-price-group";
+    const price = parseFloat(String((variant == null ? void 0 : variant.price) ?? "0")) || 0;
+    const compareAt = parseFloat(String((variant == null ? void 0 : variant.compareAtPrice) ?? "0")) || 0;
+    if (compareAt > price && compareAt > 0) {
+      const pct = Math.round((compareAt - price) / compareAt * 100);
+      const discount = document.createElement("span");
+      discount.className = "xpm-price-group__discount";
+      discount.textContent = `-${pct}%`;
+      priceGroup.appendChild(discount);
+    }
+    const current = document.createElement("span");
+    current.className = "xpm-price-group__current";
+    current.textContent = (variant == null ? void 0 : variant.displayPrice) || formatMoney((variant == null ? void 0 : variant.price) || "0.00");
+    priceGroup.appendChild(current);
+    if (variant == null ? void 0 : variant.compareAtPrice) {
+      const cmp = document.createElement("span");
+      cmp.className = "xpm-price-group__compare";
+      cmp.textContent = variant.displayCompareAtPrice || formatMoney(variant.compareAtPrice);
+      priceGroup.appendChild(cmp);
+    }
+    meta.appendChild(priceGroup);
+    const actions = document.createElement("div");
+    actions.className = "xpm-row__actions";
+    const qty = document.createElement("div");
+    qty.className = "xpm-qty";
+    const minusBtn = document.createElement("button");
+    minusBtn.className = "xpm-qty__btn";
+    minusBtn.innerHTML = iconMinus(14);
+    minusBtn.disabled = (product.quantity || 1) <= 1 || !isPurchasable;
+    minusBtn.addEventListener("click", () => this.changeQty(product, -1));
+    const qtyVal = document.createElement("span");
+    qtyVal.className = "xpm-qty__value";
+    qtyVal.textContent = String(product.quantity || 1);
+    const plusBtn = document.createElement("button");
+    plusBtn.className = "xpm-qty__btn";
+    plusBtn.innerHTML = iconPlus(14);
+    plusBtn.disabled = !isPurchasable;
+    plusBtn.addEventListener("click", () => this.changeQty(product, 1));
+    qty.appendChild(minusBtn);
+    qty.appendChild(qtyVal);
+    qty.appendChild(plusBtn);
+    actions.appendChild(qty);
+    meta.appendChild(actions);
+    info.appendChild(meta);
+    row.appendChild(info);
+    return row;
+  }
+  renderSelect(product, key, index, keys, selected) {
+    var _a, _b;
+    const open = ((_a = this.state.openSelect) == null ? void 0 : _a.uid) === product.uid && ((_b = this.state.openSelect) == null ? void 0 : _b.key) === key;
+    const wrap2 = document.createElement("div");
+    wrap2.className = "xpm-select" + (open ? " xpm-select--open" : "");
+    wrap2.dataset.xpmStop = "1";
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = "xpm-select__trigger";
+    const currentVal = selected[key] || "";
+    if (!currentVal) trigger.classList.add("xpm-select__trigger--placeholder");
+    const label = document.createElement("span");
+    label.textContent = currentVal || "";
+    trigger.appendChild(label);
+    const chev = document.createElement("span");
+    chev.innerHTML = open ? iconChevronUp(14) : iconChevronDown(14);
+    trigger.appendChild(chev);
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.setState({
+        openSelect: open ? null : { uid: product.uid, key },
+        shopMenuOpen: false
+      });
+    });
+    wrap2.appendChild(trigger);
+    if (open) {
+      const values = getOptionValues(product, keys, index, selected);
+      const menu = document.createElement("div");
+      menu.className = "xpm-select__menu";
+      values.forEach((val) => {
+        const opt = document.createElement("button");
+        opt.type = "button";
+        opt.className = "xpm-select__option" + (val === currentVal ? " xpm-select__option--selected" : "");
+        opt.textContent = val;
+        opt.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.handleVariantChange(product, keys, key, index, val);
+        });
+        menu.appendChild(opt);
+      });
+      wrap2.appendChild(menu);
+    }
+    return wrap2;
+  }
+  handleVariantChange(product, keys, key, index, value) {
+    const next = { ...this.state.productSelectedOptions[product.uid] || {} };
+    next[key] = value;
+    for (let i = index + 1; i < keys.length; i++) {
+      const nk = keys[i];
+      next[nk] = "";
+      const tempSelected = { ...next };
+      const values = getOptionValues(product, keys, i, tempSelected);
+      if (values[0]) next[nk] = values[0];
+    }
+    const nextOptions = {
+      ...this.state.productSelectedOptions,
+      [product.uid]: next
+    };
+    const variant = findVariantByOptions(product, next);
+    const nextChecked = new Set(this.state.checkedUids);
+    if (isVariantPurchasable(variant)) {
+      nextChecked.add(product.uid);
+    } else {
+      nextChecked.delete(product.uid);
+    }
+    this.setState({
+      productSelectedOptions: nextOptions,
+      checkedUids: Array.from(nextChecked),
+      openSelect: null
+    });
+  }
+  changeQty(product, delta) {
+    const next = (product.quantity || 1) + delta;
+    if (next < 1) return;
+    product.quantity = next;
+    this.setState({});
+  }
+  renderFooter() {
+    const footer = document.createElement("footer");
+    footer.className = "xpm-footer";
+    const inner = document.createElement("div");
+    inner.className = "xpm-footer__inner";
+    let total = 0;
+    let hasPurchasable = false;
+    this.state.checkedUids.forEach((uid) => {
+      const product = this.state.productList.find((p) => p.uid === uid);
+      if (!product) return;
+      const options = this.state.productSelectedOptions[uid] || {};
+      const variant = findVariantByOptions(product, options);
+      if (!variant) return;
+      if (isVariantPurchasable(variant)) hasPurchasable = true;
+      if (variant.price) {
+        total += (parseFloat(String(variant.price)) || 0) * (product.quantity || 1);
+      }
+    });
+    const totalBlock = document.createElement("div");
+    totalBlock.className = "xpm-footer__total-block";
+    const totalRow = document.createElement("div");
+    totalRow.className = "xpm-footer__total-row";
+    const tl = document.createElement("span");
+    tl.className = "xpm-footer__total-label";
+    tl.textContent = this.i18n.t("total");
+    const tp = document.createElement("span");
+    tp.className = "xpm-footer__total-price";
+    tp.textContent = formatMoney(total.toFixed(2));
+    totalRow.appendChild(tl);
+    totalRow.appendChild(tp);
+    const warn = document.createElement("p");
+    warn.className = "xpm-footer__warning";
+    warn.textContent = this.i18n.t("discount_notice");
+    totalBlock.appendChild(totalRow);
+    totalBlock.appendChild(warn);
+    const buyBtn = document.createElement("button");
+    buyBtn.className = "xpm-buy-now";
+    buyBtn.textContent = this.state.checkoutLoading ? this.i18n.t("loading") : this.i18n.t("buy_now");
+    buyBtn.disabled = !hasPurchasable || this.state.checkoutLoading;
+    buyBtn.addEventListener("click", () => this.callbacks.onCheckout());
+    inner.appendChild(totalBlock);
+    inner.appendChild(buyBtn);
+    footer.appendChild(inner);
+    return footer;
+  }
+  handleDocClick(e) {
+    const path = e.composedPath();
+    const insideDropdown = path.some(
+      (n) => {
+        var _a;
+        return ((_a = n == null ? void 0 : n.dataset) == null ? void 0 : _a.xpmStop) === "1";
+      }
+    );
+    if (insideDropdown) return;
+    if (this.state.openSelect || this.state.shopMenuOpen) {
+      this.setState({ openSelect: null, shopMenuOpen: false });
+    }
+  }
+}
+const DEFAULT_Z_INDEX = 9999;
+class PurchaseModal {
+  constructor() {
+    __publicField(this, "options", null);
+    __publicField(this, "apiBaseUrl", DEFAULT_API_BASE_URL);
+    __publicField(this, "i18n", new I18n());
+    __publicField(this, "shopify", new ShopifyClient());
+    __publicField(this, "renderer", null);
+    __publicField(this, "state", this.createInitialState());
+    __publicField(this, "accessoryCache", null);
+  }
+  createInitialState() {
+    return {
+      productList: [],
+      currentShopName: "",
+      loading: false,
+      checkoutLoading: false,
+      checkedUids: [],
+      productSelectedOptions: {},
+      shopMenuOpen: false,
+      openSelect: null
+    };
+  }
+  init(options) {
+    if (!options || !options.generatorId || !options.accessoryType) {
+      throw new Error("[GeneratorMaterialPurchase] init requires generatorId and accessoryType");
+    }
+    this.options = options;
+    this.apiBaseUrl = options.apiBaseUrl || DEFAULT_API_BASE_URL;
+    this.i18n.setLocale(options.locale || "en");
+    this.i18n.extend(options.messages);
+  }
+  async open() {
+    var _a, _b;
+    if (!this.options) {
+      throw new Error("[GeneratorMaterialPurchase] call init() before open()");
+    }
+    this.state = this.createInitialState();
+    this.renderer = new Renderer(
+      this.state,
+      this.i18n,
+      {
+        onClose: () => this.close(),
+        onShopChange: (v) => this.handleShopChange(v),
+        onCheckout: () => this.handleCheckout()
+      },
+      this.options.zIndex || DEFAULT_Z_INDEX
+    );
+    this.renderer.mount();
+    this.renderer.setState({ loading: true });
+    try {
+      const cached = localStorage.getItem(STORAGE_KEYS.CURRENT_SHOP) || "";
+      let initialShop = cached;
+      if (!initialShop || !PROD_STORE_OPTIONS.find((s) => s.value === initialShop)) {
+        try {
+          const loc = await fetchIpLocation(this.apiBaseUrl);
+          initialShop = countryToSite(loc);
+        } catch {
+          initialShop = ShopifyStoreName.MAKEBLOCK_XTOOL;
+        }
+      }
+      await this.shopify.init(initialShop);
+      this.renderer.setState({ currentShopName: this.shopify.currentShopName });
+      await this.loadProducts(false);
+    } catch (e) {
+      console.error("[GeneratorMaterialPurchase] open failed:", e);
+      (_b = (_a = this.options).onError) == null ? void 0 : _b.call(_a, e);
+      this.renderer.setState({ loading: false });
+      this.renderer.showToast(this.i18n.t("failed_load_product_list"));
+    }
+  }
+  close() {
+    var _a, _b;
+    if (!this.renderer) return;
+    const r = this.renderer;
+    this.renderer = null;
+    r.playClose().then(() => r.unmount());
+    (_b = (_a = this.options) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a);
+  }
+  destroy() {
+    if (this.renderer) {
+      this.renderer.unmount();
+      this.renderer = null;
+    }
+    this.options = null;
+    this.shopify = new ShopifyClient();
+    this.accessoryCache = null;
+  }
+  async handleShopChange(shopName) {
+    var _a, _b;
+    if (!this.renderer || !this.options) return;
+    this.renderer.setState({
+      loading: true,
+      productList: [],
+      checkedUids: [],
+      productSelectedOptions: {}
+    });
+    try {
+      await this.shopify.changeShop(shopName);
+      this.renderer.setState({ currentShopName: this.shopify.currentShopName });
+      await this.loadProducts(true);
+    } catch (e) {
+      console.error("[GeneratorMaterialPurchase] handleShopChange failed:", e);
+      (_b = (_a = this.options).onError) == null ? void 0 : _b.call(_a, e);
+      this.renderer.setState({ loading: false });
+      this.renderer.showToast(this.i18n.t("failed_load_product_list"));
+    }
+  }
+  async loadProducts(force) {
+    var _a, _b, _c;
+    if (!this.renderer || !this.options) return;
+    try {
+      let raw;
+      if (!force && ((_a = this.accessoryCache) == null ? void 0 : _a.length)) {
+        raw = this.accessoryCache;
+      } else {
+        raw = await fetchAccessoryPack(this.apiBaseUrl, {
+          store: this.shopify.currentShopName,
+          generatorId: this.options.generatorId,
+          accessoryType: this.options.accessoryType
+        });
+        this.accessoryCache = raw;
+      }
+      const list = (raw || []).map((item, idx) => ({
+        ...item,
+        uid: item.uid ?? assignUid(item, idx),
+        quantity: item.quantity || 1
+      }));
+      refreshProductPrices(list);
+      const initialChecked = [];
+      list.forEach((p) => {
+        const variant = findVariantByOptions(p, {});
+        if (isVariantPurchasable(variant)) initialChecked.push(p.uid);
+      });
+      this.renderer.setState({
+        productList: list,
+        checkedUids: initialChecked,
+        productSelectedOptions: {},
+        loading: false
+      });
+    } catch (e) {
+      console.error("[GeneratorMaterialPurchase] loadProducts failed:", e);
+      (_c = (_b = this.options).onError) == null ? void 0 : _c.call(_b, e);
+      this.renderer.setState({ loading: false });
+      this.renderer.showToast(this.i18n.t("failed_load_product_list"));
+    }
+  }
+  async handleCheckout() {
+    var _a, _b, _c;
+    if (!this.renderer || !this.options) return;
+    if (this.state.checkedUids.length === 0) return;
+    const options = this.options;
+    this.renderer.setState({ checkoutLoading: true });
+    try {
+      let skippedOutOfStock = 0;
+      const lines = this.state.checkedUids.map((uid) => {
+        const product = this.state.productList.find((p) => p.uid === uid);
+        if (!product) return null;
+        const options2 = this.state.productSelectedOptions[uid] || {};
+        const variant = findVariantByOptions(product, options2);
+        if (!(variant == null ? void 0 : variant.id)) return null;
+        if (!isVariantPurchasable(variant)) {
+          skippedOutOfStock += 1;
+          return null;
+        }
+        return {
+          merchandiseId: String(variant.id),
+          quantity: product.quantity || 1
+        };
+      }).filter(Boolean);
+      if (lines.length === 0) {
+        const key = skippedOutOfStock > 0 ? "selected_items_out_of_stock" : "no_valid_products_selected";
+        this.renderer.showToast(this.i18n.t(key));
+        return;
+      }
+      let trackId;
+      try {
+        const productContent = lines.map((l) => ({
+          variantId: l.merchandiseId,
+          productQuantity: l.quantity,
+          store: this.shopify.currentShopName,
+          relatedObjectId: 1,
+          relatedObjectType: options.generatorId,
+          pageSource: "generator"
+        }));
+        const res = await fetchDistributionTrackId(this.apiBaseUrl, productContent);
+        trackId = res == null ? void 0 : res.trackId;
+      } catch (e) {
+        console.warn("[GeneratorMaterialPurchase] fetchDistributionTrackId failed:", e);
+      }
+      const cart = await this.shopify.createCheckout(lines, { trackId });
+      if (cart == null ? void 0 : cart.checkoutUrl) {
+        if (options.onCheckoutSuccess) {
+          options.onCheckoutSuccess(cart.checkoutUrl);
+        } else {
+          window.open(cart.checkoutUrl, "_blank");
+        }
+      }
+    } catch (e) {
+      console.error("[GeneratorMaterialPurchase] checkout failed:", e);
+      (_a = options.onError) == null ? void 0 : _a.call(options, e);
+      (_b = this.renderer) == null ? void 0 : _b.showToast(this.i18n.t("checkout_failed"));
+    } finally {
+      (_c = this.renderer) == null ? void 0 : _c.setState({ checkoutLoading: false });
+    }
+  }
+}
+const generatorMaterialPurchaseInstance = new PurchaseModal();
+const api = {
+  init: (options) => generatorMaterialPurchaseInstance.init(options),
+  open: () => generatorMaterialPurchaseInstance.open(),
+  close: () => generatorMaterialPurchaseInstance.close(),
+  destroy: () => generatorMaterialPurchaseInstance.destroy()
+};
+if (typeof window !== "undefined") {
+  window.GeneratorMaterialPurchase = api;
+}
+export {
+  api as GeneratorMaterialPurchase,
+  api as default
+};
+//# sourceMappingURL=index.es.js.map