@lime-bundles/widget 0.1.0

package/dist/index.js

@@ -0,0 +1,654 @@
+// src/lime-bundle.ts
+import {
+  createStorefrontClient,
+  BUNDLE_METAOBJECT_QUERY,
+  parseMetaobjectBundle,
+  detectCartApi,
+  createAjaxCartApi,
+  createStorefrontCartApi,
+  observeImpression,
+  reportImpression,
+  reportAddToCart
+} from "@lime-bundles/core";
+
+// src/renderers/fixed.ts
+import { formatMoney } from "@lime-bundles/core";
+function renderFixedBundle(container, bundle, addToCart) {
+  const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+  const title = document.createElement("h3");
+  title.className = "lb-bundle__title";
+  title.textContent = bundle.title;
+  title.setAttribute("part", "title");
+  container.appendChild(title);
+  if (bundle.discountLabel) {
+    const badge = document.createElement("span");
+    badge.className = "lb-bundle__discount-badge";
+    badge.textContent = bundle.discountLabel;
+    container.appendChild(badge);
+  }
+  const productsDiv = document.createElement("div");
+  productsDiv.className = "lb-bundle__products";
+  for (const product of bundle.products) {
+    const productEl = document.createElement("div");
+    productEl.className = "lb-bundle__product";
+    productEl.setAttribute("part", "product");
+    if (product.featuredImage) {
+      const img = document.createElement("img");
+      img.src = product.featuredImage.url;
+      img.alt = product.featuredImage.altText ?? product.title;
+      img.className = "lb-bundle__product-image";
+      img.loading = "lazy";
+      productEl.appendChild(img);
+    }
+    const info = document.createElement("div");
+    info.className = "lb-bundle__product-info";
+    info.innerHTML = `
+      <p class="lb-bundle__product-title">${escapeHtml(product.title)}</p>
+      <p class="lb-bundle__product-price">${escapeHtml(formatMoney(product.priceRange.minVariantPrice.amount, currency))}</p>
+    `;
+    productEl.appendChild(info);
+    productsDiv.appendChild(productEl);
+  }
+  container.appendChild(productsDiv);
+  const button = document.createElement("button");
+  button.className = "lb-bundle__cta";
+  button.textContent = bundle.widgetConfig.ctaText ?? "Add Bundle to Cart";
+  button.setAttribute("part", "button");
+  button.addEventListener("click", async () => {
+    button.disabled = true;
+    button.textContent = "Adding...";
+    const items = bundle.products.filter((p) => p.variants.nodes.some((v) => v.availableForSale)).map((p) => {
+      const variant = p.variants.nodes.find((v) => v.availableForSale);
+      return { variantId: variant.id, quantity: 1 };
+    });
+    const result = await addToCart(items);
+    button.disabled = false;
+    button.textContent = bundle.widgetConfig.ctaText ?? "Add Bundle to Cart";
+    if (!result.success) {
+      const error = document.createElement("p");
+      error.className = "lb-bundle__error";
+      error.textContent = result.error ?? "Failed to add to cart";
+      container.appendChild(error);
+      setTimeout(() => error.remove(), 5e3);
+    }
+  });
+  container.appendChild(button);
+}
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// src/renderers/mix-match.ts
+import { formatMoney as formatMoney2, validateQuantity } from "@lime-bundles/core";
+function renderMixMatchBundle(container, bundle, addToCart) {
+  const currency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
+  const selections = /* @__PURE__ */ new Map();
+  const title = document.createElement("h3");
+  title.className = "lb-bundle__title";
+  title.textContent = bundle.title;
+  title.setAttribute("part", "title");
+  container.appendChild(title);
+  const instructions = document.createElement("p");
+  instructions.className = "lb-bundle__instructions";
+  instructions.textContent = bundle.minQuantity && bundle.maxQuantity ? `Select ${bundle.minQuantity}\u2013${bundle.maxQuantity} items` : bundle.minQuantity ? `Select at least ${bundle.minQuantity} items` : "Select your items";
+  container.appendChild(instructions);
+  const productsDiv = document.createElement("div");
+  productsDiv.className = "lb-bundle__products lb-bundle__products--selectable";
+  for (const product of bundle.products) {
+    const variant = product.variants.nodes.find((v) => v.availableForSale) ?? product.variants.nodes[0];
+    if (!variant) continue;
+    const productEl = document.createElement("div");
+    productEl.className = "lb-bundle__product lb-bundle__product--selectable";
+    if (product.featuredImage) {
+      const img = document.createElement("img");
+      img.src = product.featuredImage.url;
+      img.alt = product.featuredImage.altText ?? product.title;
+      img.className = "lb-bundle__product-image";
+      img.loading = "lazy";
+      productEl.appendChild(img);
+    }
+    const info = document.createElement("div");
+    info.className = "lb-bundle__product-info";
+    info.innerHTML = `
+      <p class="lb-bundle__product-title">${escapeHtml2(product.title)}</p>
+      <p class="lb-bundle__product-price">${escapeHtml2(formatMoney2(variant.price.amount, currency))}</p>
+    `;
+    productEl.appendChild(info);
+    const selectBtn = document.createElement("button");
+    selectBtn.className = "lb-bundle__select-btn";
+    selectBtn.textContent = variant.availableForSale ? "Select" : "Sold out";
+    selectBtn.disabled = !variant.availableForSale;
+    selectBtn.addEventListener("click", () => {
+      const key = product.id;
+      if (selections.has(key)) {
+        selections.delete(key);
+        productEl.classList.remove("lb-bundle__product--selected");
+        selectBtn.textContent = "Select";
+      } else {
+        selections.set(key, { variantId: variant.id, quantity: 1 });
+        productEl.classList.add("lb-bundle__product--selected");
+        selectBtn.textContent = "Selected";
+      }
+      updateCta();
+    });
+    productEl.appendChild(selectBtn);
+    productsDiv.appendChild(productEl);
+  }
+  container.appendChild(productsDiv);
+  const validationEl = document.createElement("p");
+  validationEl.className = "lb-bundle__validation";
+  container.appendChild(validationEl);
+  const button = document.createElement("button");
+  button.className = "lb-bundle__cta";
+  button.setAttribute("part", "button");
+  button.disabled = true;
+  container.appendChild(button);
+  function updateCta() {
+    const total = Array.from(selections.values()).reduce((s, v) => s + v.quantity, 0);
+    const validation = validateQuantity(total, bundle.minQuantity, bundle.maxQuantity);
+    button.disabled = !validation.valid;
+    button.textContent = bundle.widgetConfig.ctaText ?? `Add ${total} Items to Cart`;
+    validationEl.textContent = validation.message ?? "";
+  }
+  updateCta();
+  button.addEventListener("click", async () => {
+    button.disabled = true;
+    button.textContent = "Adding...";
+    const items = Array.from(selections.entries()).map(([, s]) => ({
+      variantId: s.variantId,
+      quantity: s.quantity
+    }));
+    const result = await addToCart(items);
+    updateCta();
+    if (!result.success) {
+      const error = document.createElement("p");
+      error.className = "lb-bundle__error";
+      error.textContent = result.error ?? "Failed to add to cart";
+      container.appendChild(error);
+      setTimeout(() => error.remove(), 5e3);
+    }
+  });
+}
+function escapeHtml2(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// src/renderers/volume.ts
+import { formatMoney as formatMoney3, calculateTierSavings } from "@lime-bundles/core";
+function renderVolumeBundle(container, bundle, addToCart) {
+  const product = bundle.products[0];
+  if (!product) return;
+  const basePrice = parseFloat(product.priceRange.minVariantPrice.amount);
+  const currency = product.priceRange.minVariantPrice.currencyCode;
+  let quantity = 1;
+  const title = document.createElement("h3");
+  title.className = "lb-bundle__title";
+  title.textContent = bundle.title;
+  title.setAttribute("part", "title");
+  container.appendChild(title);
+  const productEl = document.createElement("div");
+  productEl.className = "lb-bundle__product lb-bundle__product--volume";
+  if (product.featuredImage) {
+    const img = document.createElement("img");
+    img.src = product.featuredImage.url;
+    img.alt = product.featuredImage.altText ?? product.title;
+    img.className = "lb-bundle__product-image";
+    img.loading = "lazy";
+    productEl.appendChild(img);
+  }
+  const info = document.createElement("div");
+  info.className = "lb-bundle__product-info";
+  info.innerHTML = `
+    <p class="lb-bundle__product-title">${escapeHtml3(product.title)}</p>
+    <p class="lb-bundle__product-price">${escapeHtml3(formatMoney3(basePrice, currency))} each</p>
+  `;
+  productEl.appendChild(info);
+  container.appendChild(productEl);
+  const tiersDiv = document.createElement("div");
+  tiersDiv.className = "lb-bundle__tiers";
+  tiersDiv.setAttribute("role", "table");
+  tiersDiv.setAttribute("aria-label", "Volume discounts");
+  container.appendChild(tiersDiv);
+  const qtyWrapper = document.createElement("div");
+  qtyWrapper.className = "lb-bundle__quantity-selector";
+  const label = document.createElement("label");
+  label.textContent = "Quantity";
+  qtyWrapper.appendChild(label);
+  const qtyControl = document.createElement("div");
+  qtyControl.className = "lb-bundle__quantity-control";
+  const minusBtn = document.createElement("button");
+  minusBtn.textContent = "\u2212";
+  minusBtn.setAttribute("aria-label", "Decrease quantity");
+  const qtyInput = document.createElement("input");
+  qtyInput.type = "number";
+  qtyInput.min = "1";
+  qtyInput.value = "1";
+  qtyInput.className = "lb-bundle__quantity-input";
+  const plusBtn = document.createElement("button");
+  plusBtn.textContent = "+";
+  plusBtn.setAttribute("aria-label", "Increase quantity");
+  qtyControl.append(minusBtn, qtyInput, plusBtn);
+  qtyWrapper.appendChild(qtyControl);
+  container.appendChild(qtyWrapper);
+  const button = document.createElement("button");
+  button.className = "lb-bundle__cta";
+  button.setAttribute("part", "button");
+  container.appendChild(button);
+  function updateTiers() {
+    const savings = calculateTierSavings(bundle.volumeTiers, basePrice, quantity);
+    tiersDiv.innerHTML = "";
+    for (const ts of savings) {
+      const row = document.createElement("div");
+      row.className = `lb-bundle__tier${ts.isActive ? " lb-bundle__tier--active" : ""}`;
+      row.setAttribute("role", "row");
+      row.innerHTML = `
+        <span class="lb-bundle__tier-quantity" role="cell">${ts.tier.minQuantity}+ items</span>
+        <span class="lb-bundle__tier-price" role="cell">${escapeHtml3(formatMoney3(ts.unitPrice, currency))} each</span>
+        <span class="lb-bundle__tier-savings" role="cell">Save ${ts.savingsPercent.toFixed(0)}%</span>
+        ${ts.tier.label ? `<span class="lb-bundle__tier-label" role="cell">${escapeHtml3(ts.tier.label)}</span>` : ""}
+      `;
+      tiersDiv.appendChild(row);
+    }
+    button.textContent = bundle.widgetConfig.ctaText ?? `Add ${quantity} to Cart`;
+  }
+  updateTiers();
+  minusBtn.addEventListener("click", () => {
+    if (quantity > 1) {
+      quantity--;
+      qtyInput.value = String(quantity);
+      updateTiers();
+    }
+  });
+  plusBtn.addEventListener("click", () => {
+    quantity++;
+    qtyInput.value = String(quantity);
+    updateTiers();
+  });
+  qtyInput.addEventListener("change", () => {
+    const val = parseInt(qtyInput.value, 10);
+    if (!isNaN(val) && val > 0) {
+      quantity = val;
+      updateTiers();
+    }
+  });
+  button.addEventListener("click", async () => {
+    const variant = product.variants.nodes.find((v) => v.availableForSale);
+    if (!variant) return;
+    button.disabled = true;
+    button.textContent = "Adding...";
+    const items = [{ variantId: variant.id, quantity }];
+    const result = await addToCart(items);
+    button.disabled = false;
+    updateTiers();
+    if (!result.success) {
+      const error = document.createElement("p");
+      error.className = "lb-bundle__error";
+      error.textContent = result.error ?? "Failed to add to cart";
+      container.appendChild(error);
+      setTimeout(() => error.remove(), 5e3);
+    }
+  });
+}
+function escapeHtml3(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// src/styles/widget-styles.ts
+var WIDGET_STYLES = `
+:host {
+  display: block;
+  --lb-primary-color: #000;
+  --lb-secondary-color: #666;
+  --lb-accent-color: #2563eb;
+  --lb-background: #fff;
+  --lb-border-color: #e5e7eb;
+  --lb-border-radius: 8px;
+  --lb-font-family: inherit;
+  --lb-font-size: 14px;
+  --lb-spacing-sm: 8px;
+  --lb-spacing-md: 16px;
+  --lb-spacing-lg: 24px;
+  --lb-button-bg: var(--lb-accent-color);
+  --lb-button-text: #fff;
+  --lb-button-radius: var(--lb-border-radius);
+  --lb-savings-color: #16a34a;
+  --lb-error-color: #dc2626;
+}
+
+.lb-bundle {
+  font-family: var(--lb-font-family);
+  font-size: var(--lb-font-size);
+  color: var(--lb-primary-color);
+  background: var(--lb-background);
+  border: 1px solid var(--lb-border-color);
+  border-radius: var(--lb-border-radius);
+  padding: var(--lb-spacing-lg);
+}
+
+.lb-bundle__title { margin: 0 0 var(--lb-spacing-md); font-size: 1.25em; font-weight: 600; }
+.lb-bundle__discount-badge { display: inline-block; background: var(--lb-savings-color); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 0.85em; font-weight: 600; margin-bottom: var(--lb-spacing-md); }
+.lb-bundle__products { display: grid; gap: var(--lb-spacing-md); margin-bottom: var(--lb-spacing-lg); }
+.lb-bundle__product { display: flex; gap: var(--lb-spacing-md); align-items: center; padding: var(--lb-spacing-sm); border: 1px solid var(--lb-border-color); border-radius: var(--lb-border-radius); }
+.lb-bundle__product--selected { border-color: var(--lb-accent-color); }
+.lb-bundle__product-image { width: 64px; height: 64px; object-fit: cover; border-radius: calc(var(--lb-border-radius) - 2px); flex-shrink: 0; }
+.lb-bundle__product-info { flex: 1; min-width: 0; }
+.lb-bundle__product-title { margin: 0; font-weight: 500; }
+.lb-bundle__product-price { margin: 4px 0 0; color: var(--lb-secondary-color); }
+.lb-bundle__instructions { color: var(--lb-secondary-color); margin: 0 0 var(--lb-spacing-md); }
+.lb-bundle__tiers { margin-bottom: var(--lb-spacing-lg); }
+.lb-bundle__tier { display: flex; align-items: center; gap: var(--lb-spacing-md); padding: var(--lb-spacing-sm) var(--lb-spacing-md); border: 1px solid var(--lb-border-color); border-radius: var(--lb-border-radius); margin-bottom: var(--lb-spacing-sm); }
+.lb-bundle__tier--active { border-color: var(--lb-savings-color); }
+.lb-bundle__tier-savings { color: var(--lb-savings-color); font-weight: 600; }
+.lb-bundle__quantity-selector { margin-bottom: var(--lb-spacing-lg); }
+.lb-bundle__quantity-selector label { display: block; margin-bottom: var(--lb-spacing-sm); font-weight: 500; }
+.lb-bundle__quantity-control { display: inline-flex; align-items: center; border: 1px solid var(--lb-border-color); border-radius: var(--lb-border-radius); }
+.lb-bundle__quantity-control button { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; font-size: 1.1em; display: flex; align-items: center; justify-content: center; }
+.lb-bundle__quantity-input { width: 40px; text-align: center; border: none; border-left: 1px solid var(--lb-border-color); border-right: 1px solid var(--lb-border-color); height: 32px; font-size: var(--lb-font-size); -moz-appearance: textfield; }
+.lb-bundle__quantity-input::-webkit-outer-spin-button, .lb-bundle__quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; }
+.lb-bundle__select-btn { padding: 6px 12px; border: 1px solid var(--lb-border-color); border-radius: var(--lb-border-radius); background: transparent; cursor: pointer; }
+.lb-bundle__select-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.lb-bundle__cta { width: 100%; padding: 12px 24px; border: none; border-radius: var(--lb-button-radius); background: var(--lb-button-bg); color: var(--lb-button-text); font-size: 1em; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
+.lb-bundle__cta:hover:not(:disabled) { opacity: 0.9; }
+.lb-bundle__cta:disabled { opacity: 0.5; cursor: not-allowed; }
+.lb-bundle__error { color: var(--lb-error-color); margin: var(--lb-spacing-sm) 0; font-size: 0.9em; }
+.lb-bundle__validation { color: var(--lb-secondary-color); margin: var(--lb-spacing-sm) 0; font-size: 0.9em; }
+
+.lb-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: lb-shimmer 1.5s infinite; border-radius: var(--lb-border-radius); }
+.lb-skeleton--title { height: 24px; width: 60%; margin-bottom: var(--lb-spacing-md); }
+.lb-skeleton--products { height: 200px; }
+@keyframes lb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+`;
+
+// src/lime-bundle.ts
+var LimeBundleElement = class extends HTMLElement {
+  static observedAttributes = [
+    "shop-domain",
+    "storefront-token",
+    "bundle-gid",
+    "cart-id",
+    "app-url",
+    "analytics",
+    "locale"
+  ];
+  shadow;
+  bundle = null;
+  abortController = null;
+  impressionCleanup = null;
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+    this.fetchBundle();
+  }
+  disconnectedCallback() {
+    this.abortController?.abort();
+    this.teardownImpression();
+  }
+  /** Clean up stale bundle state and active impression observer. */
+  teardownImpression() {
+    this.impressionCleanup?.();
+    this.impressionCleanup = null;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.isConnected) return;
+    if (name === "bundle-gid" || name === "shop-domain" || name === "storefront-token") {
+      if (this.shopDomain && this.storefrontToken && this.bundleGid) {
+        this.fetchBundle();
+      }
+    }
+  }
+  get shopDomain() {
+    return this.getAttribute("shop-domain") ?? "";
+  }
+  get storefrontToken() {
+    return this.getAttribute("storefront-token") ?? "";
+  }
+  get bundleGid() {
+    return this.getAttribute("bundle-gid") ?? "";
+  }
+  get cartId() {
+    return this.getAttribute("cart-id") ?? void 0;
+  }
+  get appUrl() {
+    return this.getAttribute("app-url") ?? "";
+  }
+  get analyticsEnabled() {
+    return this.getAttribute("analytics") !== "false";
+  }
+  async fetchBundle() {
+    if (!this.shopDomain || !this.storefrontToken || !this.bundleGid) {
+      this.renderError("Missing required attributes: shop-domain, storefront-token, bundle-gid");
+      return;
+    }
+    this.abortController?.abort();
+    const controller = new AbortController();
+    this.abortController = controller;
+    this.renderLoading();
+    try {
+      const client = createStorefrontClient({
+        shopDomain: this.shopDomain,
+        accessToken: this.storefrontToken
+      });
+      const data = await client.query(
+        BUNDLE_METAOBJECT_QUERY,
+        { id: this.bundleGid }
+      );
+      if (controller.signal.aborted) return;
+      if (!data.metaobject) {
+        this.bundle = null;
+        this.teardownImpression();
+        this.renderError("Bundle not found");
+        return;
+      }
+      this.bundle = parseMetaobjectBundle(
+        data.metaobject.id,
+        data.metaobject.fields
+      );
+      if (!this.bundle) {
+        this.teardownImpression();
+        this.renderError("Bundle is not active or has expired");
+        return;
+      }
+      this.renderBundle();
+      this.setupImpression();
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      this.bundle = null;
+      this.teardownImpression();
+      this.renderError(
+        err instanceof Error ? err.message : "Failed to load bundle"
+      );
+    }
+  }
+  renderBundle() {
+    if (!this.bundle) return;
+    const container = document.createElement("div");
+    container.className = "lb-bundle";
+    container.setAttribute("role", "region");
+    container.setAttribute("aria-label", this.bundle.title);
+    const addToCart = async (items) => {
+      const apiType = detectCartApi();
+      const cart = apiType === "ajax" ? createAjaxCartApi(this.bundleGid, this.bundle.bundleType) : createStorefrontCartApi(
+        createStorefrontClient({
+          shopDomain: this.shopDomain,
+          accessToken: this.storefrontToken
+        }),
+        this.bundleGid,
+        this.bundle.bundleType,
+        this.cartId
+      );
+      let result;
+      try {
+        result = await cart.addLines(items);
+      } catch (err) {
+        result = {
+          success: false,
+          error: err instanceof Error ? err.message : "Cart add failed"
+        };
+      }
+      if (result.success) {
+        this.dispatchEvent(
+          new CustomEvent("lime-bundle:add-to-cart", {
+            detail: { items, cartId: result.cartId },
+            bubbles: true,
+            composed: true
+          })
+        );
+        if (this.analyticsEnabled && this.appUrl) {
+          const quantity = items.reduce((sum, i) => sum + i.quantity, 0);
+          const totalPrice = items.reduce((sum, item) => {
+            const product = this.bundle.products.find(
+              (p) => p.variants.nodes.some((v) => v.id === item.variantId)
+            );
+            const variant = product?.variants.nodes.find((v) => v.id === item.variantId);
+            const price = variant ? parseFloat(variant.price.amount) : 0;
+            return sum + price * item.quantity;
+          }, 0);
+          reportAddToCart(
+            { shopDomain: this.shopDomain, appUrl: this.appUrl },
+            {
+              bundleGid: this.bundleGid,
+              bundleType: this.bundle.bundleType,
+              productId: this.bundle.products[0]?.id ?? "",
+              quantity,
+              totalPrice: Math.round(totalPrice * 100) / 100
+            }
+          );
+        }
+      }
+      return result;
+    };
+    switch (this.bundle.bundleType) {
+      case "fixed":
+        renderFixedBundle(container, this.bundle, addToCart);
+        break;
+      case "mix_match":
+        renderMixMatchBundle(container, this.bundle, addToCart);
+        break;
+      case "volume":
+        renderVolumeBundle(container, this.bundle, addToCart);
+        break;
+    }
+    this.shadow.innerHTML = "";
+    const style = document.createElement("style");
+    style.textContent = WIDGET_STYLES;
+    this.shadow.appendChild(style);
+    this.shadow.appendChild(container);
+    this.dispatchEvent(
+      new CustomEvent("lime-bundle:loaded", {
+        detail: {
+          bundleType: this.bundle.bundleType,
+          title: this.bundle.title
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  setupImpression() {
+    if (!this.analyticsEnabled || !this.bundle || !this.appUrl) return;
+    this.impressionCleanup?.();
+    this.impressionCleanup = observeImpression(this, () => {
+      reportImpression(
+        { shopDomain: this.shopDomain, appUrl: this.appUrl },
+        {
+          bundleGid: this.bundleGid,
+          bundleType: this.bundle.bundleType
+        }
+      );
+    });
+  }
+  renderLoading() {
+    this.shadow.innerHTML = `
+      <style>${WIDGET_STYLES}</style>
+      <div class="lb-bundle lb-bundle--loading">
+        <div class="lb-skeleton lb-skeleton--title"></div>
+        <div class="lb-skeleton lb-skeleton--products"></div>
+      </div>
+    `;
+  }
+  renderError(message) {
+    this.shadow.innerHTML = "";
+    this.dispatchEvent(
+      new CustomEvent("lime-bundle:error", {
+        detail: { message, code: "LOAD_ERROR" },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    this.shadow.innerHTML = `<style>${WIDGET_STYLES}</style>`;
+  }
+};
+
+// src/thankyou/index.ts
+var reportedPurchases = /* @__PURE__ */ new Set();
+function trackPurchase(input) {
+  const appUrl = input.appUrl ?? `https://${input.shopDomain}`;
+  const bundleMap = /* @__PURE__ */ new Map();
+  for (const item of input.lineItems) {
+    if (!item.bundleGid) continue;
+    const existing = bundleMap.get(item.bundleGid);
+    if (existing) {
+      existing.revenue += item.price * item.quantity;
+      existing.lineItemCount += 1;
+    } else {
+      bundleMap.set(item.bundleGid, {
+        bundleType: item.bundleType,
+        revenue: item.price * item.quantity,
+        lineItemCount: 1
+      });
+    }
+  }
+  for (const [bundleGid, data] of bundleMap) {
+    const dedupKey = `${input.orderId}:${bundleGid}`;
+    if (reportedPurchases.has(dedupKey)) continue;
+    reportedPurchases.add(dedupKey);
+    const payload = {
+      shopDomain: input.shopDomain,
+      eventType: "bundle_purchased",
+      bundleGid,
+      bundleType: data.bundleType,
+      orderId: input.orderId,
+      revenue: Math.round(data.revenue * 100) / 100,
+      lineItemCount: data.lineItemCount,
+      occurredAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    const url = `${appUrl}/api/analytics`;
+    const body = JSON.stringify(payload);
+    try {
+      fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body
+      }).catch(() => {
+        if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+          navigator.sendBeacon(url, body);
+        }
+      });
+    } catch {
+      if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+        navigator.sendBeacon(url, body);
+      }
+    }
+  }
+}
+
+// src/index.ts
+if (typeof customElements !== "undefined" && !customElements.get("lime-bundle")) {
+  customElements.define("lime-bundle", LimeBundleElement);
+}
+export {
+  LimeBundleElement,
+  trackPurchase
+};
+//# sourceMappingURL=index.js.map