@occluze/tether 0.4.0 → 0.6.0

package/dist/tether.js

@@ -46,6 +46,8 @@
     sellingPlansFirst: 25,
     collectionFirst: 24,
     retries: 2,
+    revalidate: true,
+    // products from the server (tether/server hydrate()): refresh once in the background
     // Cart
     storageKey: null,
     // defaults to `tether:cart:<domain>`
@@ -58,11 +60,19 @@
     // Subscriptions
     defaultPurchase: "one-time",
     // 'one-time' | 'subscription'
+    variantUrl: false,
+    // true: ?variant= follows the visitor's choice on the main product (shareable links)
+    maxAge: 60,
+    // seconds a Shopify answer may be cached (0 = Shopify's own caching, can be hours)
+    lowStock: 5,
+    // tether-show="low-stock" at this many or fewer (needs inventory access)
     // Mounting
     autoMount: true,
     // mount document on DOMContentLoaded
     observe: false,
     // auto-mount nodes added later (CMS load-more, filters)
+    astro: true,
+    // mount on Astro View Transitions (astro:page-load); false if you do it yourself
     partsUrl: null,
     // folder of tether.markets/diagnose(.min).js for the <script> build (default: next to it)
     // Formatting
@@ -117,6 +127,7 @@
     TetherError: () => TetherError,
     endpoint: () => endpoint,
     gql: () => gql,
+    request: () => request,
     unwrap: () => unwrap,
     withContext: () => withContext
   });
@@ -130,39 +141,41 @@
       this.userErrors = userErrors;
     }
   };
-  function endpoint() {
-    return `https://${cfg.domain}/api/${cfg.apiVersion}/graphql.json`;
+  function endpoint(conf = cfg) {
+    return `https://${conf.domain}/api/${conf.apiVersion}/graphql.json`;
   }
   function withContext(query, ctx = cfg) {
     const args = [];
     if (ctx.country) args.push(`country: ${String(ctx.country).toUpperCase()}`);
     if (ctx.language) args.push(`language: ${String(ctx.language).toUpperCase().replace("-", "_")}`);
     if (!args.length || /@inContext/.test(query)) return query;
-    return query.replace(
-      /^(\s*(?:query|mutation)\s+\w+\s*(?:\([^)]*\))?)/,
-      `$1 @inContext(${args.join(", ")})`
-    );
+    const tag = `@inContext(${args.join(", ")})`;
+    if (/^\s*\{/.test(query)) return `query ${tag} ${query.trimStart()}`;
+    return query.replace(/^(\s*(?:query|mutation)(?:\s+\w+)?\s*(?:\([^)]*\))?)/, `$1 ${tag}`);
   }
   var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-  async function gql(query, variables = {}, { context = true } = {}) {
-    if (!cfg.domain || !cfg.token) {
+  async function request(conf, query, variables = {}, { context = true } = {}) {
+    if (!conf.domain || !conf.token) {
       throw new TetherError("Tether is not configured: domain and token are required", { code: "NOT_CONFIGURED" });
     }
-    const body = JSON.stringify({ query: context ? withContext(query) : query, variables });
+    let text = context ? withContext(query, conf) : query;
+    const age = conf.maxAge ?? 60;
+    if (age > 0 && !/^\s*mutation\b/.test(text)) text += ` #${Math.floor(Date.now() / (age * 1e3))}`;
+    const body = JSON.stringify({ query: text, variables });
     let attempt = 0;
     for (; ; ) {
       let res;
       try {
-        res = await fetch(endpoint(), {
+        res = await (conf.fetch || fetch)(endpoint(conf), {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
-            "X-Shopify-Storefront-Access-Token": cfg.token
+            "X-Shopify-Storefront-Access-Token": conf.token
           },
           body
         });
       } catch (err) {
-        if (attempt++ < cfg.retries) {
+        if (attempt++ < conf.retries) {
           await sleep(300 * 2 ** attempt);
           continue;
         }
@@ -170,7 +183,7 @@
       }
       if (res.status === 430) throw new TetherError("Shopify security rejection (430)", { status: 430 });
       const retryable = res.status === 429 || res.status >= 500;
-      if (retryable && attempt++ < cfg.retries) {
+      if (retryable && attempt++ < conf.retries) {
         log("retry", res.status, attempt);
         await sleep(300 * 2 ** attempt);
         continue;
@@ -185,10 +198,13 @@
         const inventoryDenied = json.errors.some((e) => /quantityAvailable/.test(e.message || ""));
         if (inventoryDenied && /\bquantityAvailable\b/.test(body)) {
           log("no inventory permission, retrying without quantityAvailable");
-          return gql(query.replace(/\bquantityAvailable\b/g, ""), variables, { context });
+          return request(conf, query.replace(/\bquantityAvailable\b/g, ""), variables, { context });
+        }
+        if (json.errors.some((e) => /'warnings'/.test(e.message || "")) && /warnings \{ code message target \}/.test(query)) {
+          return request(conf, query.replace(/ warnings \{ code message target \}/g, ""), variables, { context });
         }
         const throttled = json.errors.some((e) => e.extensions?.code === "THROTTLED");
-        if (throttled && attempt++ < cfg.retries) {
+        if (throttled && attempt++ < conf.retries) {
           await sleep(500 * 2 ** attempt);
           continue;
         }
@@ -201,6 +217,7 @@
       return json.data;
     }
   }
+  var gql = (query, variables, opts) => request(cfg, query, variables, opts);
   function unwrap(payload, name) {
     if (!payload) throw new TetherError(`${name}: empty response`);
     const errs = payload.userErrors || [];
@@ -230,8 +247,8 @@
   });
   var MONEY = "amount currencyCode";
   var IMAGE = "url altText width height";
-  function metafieldIdentifiers() {
-    return (cfg.metafields || []).map((m) => {
+  function metafieldIdentifiers(o = cfg) {
+    return (o.metafields || []).map((m) => {
       if (typeof m === "string") {
         const i = m.indexOf(".");
         return { namespace: m.slice(0, i), key: m.slice(i + 1) };
@@ -239,19 +256,19 @@
       return m;
     }).filter((m) => m.namespace && m.key);
   }
-  function metafieldsField() {
-    const ids = metafieldIdentifiers();
+  function metafieldsField(o = cfg) {
+    const ids = metafieldIdentifiers(o);
     if (!ids.length) return "";
     const list = ids.map((m) => `{namespace: ${JSON.stringify(m.namespace)}, key: ${JSON.stringify(m.key)}}`).join(", ");
     return `metafields(identifiers:[${list}]){namespace key type value reference{... on MediaImage{image{${IMAGE}}}}}`;
   }
   var SELLING_PLAN_FIELDS = ` id name description recurringDeliveries options{name value}priceAdjustments{orderCount adjustmentValue{__typename ... on SellingPlanPercentagePriceAdjustment{adjustmentPercentage}... on SellingPlanFixedAmountPriceAdjustment{adjustmentAmount{${MONEY}}}... on SellingPlanFixedPriceAdjustment{price{${MONEY}}}}}`;
   var ALLOCATION_FIELDS = ` sellingPlan{id}checkoutChargeAmount{${MONEY}}remainingBalanceChargeAmount{${MONEY}}priceAdjustments{price{${MONEY}}compareAtPrice{${MONEY}}perDeliveryPrice{${MONEY}}unitPrice{${MONEY}}}`;
-  function productFragment() {
-    return ` fragment TetherProduct on Product{id handle title description descriptionHtml productType vendor tags availableForSale publishedAt onlineStoreUrl requiresSellingPlan seo{title description}featuredImage{${IMAGE}}images(first:${cfg.imagesFirst}){nodes{${IMAGE}}}options{name optionValues{name swatch{color image{previewImage{${IMAGE}}}}}}priceRange{minVariantPrice{${MONEY}}maxVariantPrice{${MONEY}}}compareAtPriceRange{minVariantPrice{${MONEY}}maxVariantPrice{${MONEY}}}${metafieldsField()} sellingPlanGroups(first:${cfg.sellingPlanGroupsFirst}){nodes{name appName options{name values}sellingPlans(first:${cfg.sellingPlansFirst}){nodes{${SELLING_PLAN_FIELDS}}}}}variants(first:${cfg.variantsFirst}){nodes{id title availableForSale currentlyNotInStock quantityAvailable sku barcode selectedOptions{name value}image{${IMAGE}}price{${MONEY}}compareAtPrice{${MONEY}}unitPrice{${MONEY}}sellingPlanAllocations(first:${cfg.sellingPlansFirst}){nodes{${ALLOCATION_FIELDS}}}}}}`;
+  function productFragment(o = cfg) {
+    return ` fragment TetherProduct on Product{id handle title description descriptionHtml productType vendor tags availableForSale publishedAt onlineStoreUrl requiresSellingPlan seo{title description}featuredImage{${IMAGE}}images(first:${o.imagesFirst}){nodes{${IMAGE}}}options{name optionValues{name swatch{color image{previewImage{${IMAGE}}}}}}priceRange{minVariantPrice{${MONEY}}maxVariantPrice{${MONEY}}}compareAtPriceRange{minVariantPrice{${MONEY}}maxVariantPrice{${MONEY}}}${metafieldsField(o)} sellingPlanGroups(first:${o.sellingPlanGroupsFirst}){nodes{name appName options{name values}sellingPlans(first:${o.sellingPlansFirst}){nodes{${SELLING_PLAN_FIELDS}}}}}variants(first:${o.variantsFirst}){nodes{id title availableForSale currentlyNotInStock quantityAvailable sku barcode selectedOptions{name value}image{${IMAGE}}price{${MONEY}}compareAtPrice{${MONEY}}unitPrice{${MONEY}}sellingPlanAllocations(first:${o.sellingPlansFirst}){nodes{${ALLOCATION_FIELDS}}}}}}`;
   }
   function cartFragment() {
-    return ` fragment TetherCart on Cart{id checkoutUrl totalQuantity note createdAt updatedAt attributes{key value}buyerIdentity{countryCode email}discountCodes{code applicable}cost{subtotalAmount{${MONEY}}totalAmount{${MONEY}}checkoutChargeAmount{${MONEY}}}lines(first:100){nodes{id quantity attributes{key value}cost{totalAmount{${MONEY}}subtotalAmount{${MONEY}}amountPerQuantity{${MONEY}}compareAtAmountPerQuantity{${MONEY}}}discountAllocations{discountedAmount{${MONEY}}}sellingPlanAllocation{sellingPlan{id name description recurringDeliveries options{name value}}checkoutChargeAmount{${MONEY}}priceAdjustments{price{${MONEY}}compareAtPrice{${MONEY}}perDeliveryPrice{${MONEY}}}}merchandise{... on ProductVariant{id title sku availableForSale requiresShipping image{${IMAGE}}price{${MONEY}}compareAtPrice{${MONEY}}selectedOptions{name value}product{id title handle vendor featuredImage{${IMAGE}}}}}... on ComponentizableCartLine{lineComponents{id quantity merchandise{... on ProductVariant{id title product{title handle}}}}}}}}`;
+    return ` fragment TetherCart on Cart{id checkoutUrl totalQuantity note createdAt updatedAt attributes{key value}buyerIdentity{countryCode email}discountCodes{code applicable}cost{subtotalAmount{${MONEY}}totalAmount{${MONEY}}checkoutChargeAmount{${MONEY}}}lines(first:100){nodes{id quantity attributes{key value}cost{totalAmount{${MONEY}}subtotalAmount{${MONEY}}amountPerQuantity{${MONEY}}compareAtAmountPerQuantity{${MONEY}}}discountAllocations{discountedAmount{${MONEY}}}sellingPlanAllocation{sellingPlan{id name description recurringDeliveries options{name value}}checkoutChargeAmount{${MONEY}}priceAdjustments{price{${MONEY}}compareAtPrice{${MONEY}}perDeliveryPrice{${MONEY}}}}merchandise{... on ProductVariant{id title sku availableForSale requiresShipping quantityAvailable image{${IMAGE}}price{${MONEY}}compareAtPrice{${MONEY}}selectedOptions{name value}product{id title handle vendor featuredImage{${IMAGE}}}}}... on ComponentizableCartLine{lineComponents{id quantity merchandise{... on ProductVariant{id title product{title handle}}}}}}}}`;
   }
   function collectionFields() {
     return `
@@ -267,8 +284,11 @@
     getProduct: () => getProduct,
     getProducts: () => getProducts,
     getRecommendations: () => getRecommendations,
+    hydrateProducts: () => hydrateProducts,
     normalizeProductKey: () => normalizeProductKey,
-    primeProduct: () => primeProduct
+    primeProduct: () => primeProduct,
+    refreshProducts: () => refreshProducts,
+    takeStale: () => takeStale
   });
   var productCache = /* @__PURE__ */ new Map();
   var pending = [];
@@ -343,10 +363,18 @@
       });
       keys.forEach((k) => settle(k, (r) => {
         if (got.has(k)) {
-          if (gen === generation) primeProduct(got.get(k));
-          r.resolve(got.get(k));
+          const p = got.get(k);
+          if (gen === generation) {
+            primeProduct(p);
+            freshAt.set(p.handle, Date.now());
+            freshAt.set(p.id, Date.now());
+          }
+          r.resolve(p);
         } else {
-          if (gen === generation) productCache.delete(k);
+          const miss = productCache.get(k);
+          if (gen === generation) setTimeout(() => {
+            if (productCache.get(k) === miss) productCache.delete(k);
+          }, 1e4);
           r.reject(new TetherError(`Product not found: ${k}`, { code: "NOT_FOUND" }));
         }
       }));
@@ -360,6 +388,35 @@
   function clearProductCache() {
     productCache.clear();
     generation++;
+    stale.clear();
+    freshAt.clear();
+  }
+  var stale = /* @__PURE__ */ new Set();
+  var freshAt = /* @__PURE__ */ new Map();
+  var FRESH_MS = 6e4;
+  function hydrateProducts(products) {
+    (products || []).forEach((p) => {
+      if (!p?.id || !p.handle) return;
+      if (Date.now() - (freshAt.get(p.handle) || 0) < FRESH_MS && productCache.has(p.handle)) return;
+      primeProduct(p);
+      stale.add(p.handle);
+      stale.add(p.id);
+    });
+  }
+  function takeStale(key) {
+    const k = normalizeProductKey(key);
+    if (!stale.has(k)) return false;
+    const p = productCache.get(k);
+    stale.delete(k);
+    p?.then?.((x) => {
+      stale.delete(x.handle);
+      stale.delete(x.id);
+    });
+    return true;
+  }
+  function refreshProducts(keys) {
+    keys.forEach((k) => productCache.delete(normalizeProductKey(k)));
+    return keys.map((k) => getProduct(k));
   }
   async function getProducts({
     collection,
@@ -389,8 +446,10 @@
     data.products.nodes.forEach(primeProduct);
     return { collection: null, products: data.products.nodes, pageInfo: data.products.pageInfo };
   }
-  async function getRecommendations(productId, intent = "RELATED") {
-    const data = await gql(`query TetherRecs($id:ID!,$intent:ProductRecommendationIntent){productRecommendations(productId:$id,intent:$intent){...TetherProduct}}${productFragment()}`, { id: productId, intent });
+  async function getRecommendations(product, intent = "RELATED") {
+    const key = normalizeProductKey(typeof product === "object" ? product?.id : product);
+    const byId = key?.startsWith("gid://");
+    const data = await gql(`query TetherRecs(${byId ? "$id: ID!" : "$handle: String!"},$intent:ProductRecommendationIntent){productRecommendations(${byId ? "productId: $id" : "productHandle: $handle"},intent:$intent){...TetherProduct}}${productFragment()}`, byId ? { id: key, intent } : { handle: key, intent });
     const list = data.productRecommendations || [];
     list.forEach(primeProduct);
     return list;
@@ -489,9 +548,11 @@
     emit: () => emit,
     formatDate: () => formatDate,
     formatMoney: () => formatMoney,
+    formatPercent: () => formatPercent,
     get: () => get,
     has: () => has,
     hasTemplate: () => hasTemplate,
+    imageUrl: () => imageUrl,
     notifyLayoutChanged: () => notifyLayoutChanged,
     parseJSONAttr: () => parseJSONAttr,
     productUrl: () => productUrl,
@@ -499,6 +560,7 @@
     readText: () => readText,
     repeat: () => repeat,
     repeatKeyed: () => repeatKeyed,
+    sameImage: () => sameImage,
     scoped: () => scoped,
     sel: () => sel,
     setImage: () => setImage,
@@ -525,6 +587,14 @@
   function emit(name, detail, target = document) {
     target.dispatchEvent(new CustomEvent(`${cfg.prefix}:${name}`, { detail, bubbles: true }));
   }
+  function formatPercent(n, locale = cfg.locale) {
+    if (!n) return "";
+    try {
+      return new Intl.NumberFormat(locale || void 0, { style: "percent", maximumFractionDigits: 0 }).format(n / 100);
+    } catch {
+      return `${n}%`;
+    }
+  }
   function formatMoney(money) {
     if (!money) return "";
     if (typeof cfg.formatMoney === "function") return cfg.formatMoney(money, cfg.locale);
@@ -547,25 +617,31 @@
       return "";
     }
   }
-  function cdnUrl(url, el) {
-    if (!url || !el) return url;
-    const w = el.getAttribute("max-width");
-    const h = el.getAttribute("max-height");
-    const crop = el.getAttribute("crop");
-    if (!w && !h) return url;
+  function imageUrl(url, { width, height, crop } = {}) {
+    if (!url) return url;
     try {
       const u = new URL(url);
-      if (w) u.searchParams.set("width", w);
-      if (h) u.searchParams.set("height", h);
+      if (width) u.searchParams.set("width", String(width));
+      if (height) u.searchParams.set("height", String(height));
       if (crop) u.searchParams.set("crop", crop);
       return u.toString();
     } catch {
       return url;
     }
   }
+  function cdnUrl(url, el) {
+    if (!url || !el) return url;
+    const g = (k) => el.getAttribute(k);
+    return imageUrl(url, { width: g("max-width"), height: g("max-height"), crop: g("max-width") || g("max-height") ? g("crop") : null });
+  }
+  var sameImage = (a, b) => Boolean(a && b) && a.split("?")[0] === b.split("?")[0];
   function setImage(el, url, alt) {
     if (!url) return;
     const src = cdnUrl(url, el);
+    if (el.tagName === "IMG" && sameImage(el.getAttribute("src"), src)) {
+      if (alt != null && !el.getAttribute("alt")) el.setAttribute("alt", alt);
+      return;
+    }
     if (el.tagName === "IMG") {
       el.removeAttribute("srcset");
       el.removeAttribute("sizes");
@@ -597,14 +673,21 @@
   function show(el, visible) {
     const k = "tetherPrevDisplay";
     if (visible) {
+      if (el.dataset.tetherShown !== void 0) return;
+      el.dataset.tetherShown = "";
+      el.removeAttribute("hidden");
       if (el.dataset[k] !== void 0) {
         el.style.display = el.dataset[k];
         delete el.dataset[k];
       } else if (el.style.display === "none") {
         el.style.display = "";
       }
+      if (typeof getComputedStyle === "function" && getComputedStyle(el).display === "none") {
+        el.style.display = el.getAttribute(`${cfg.prefix}-display`) || "block";
+      }
     } else {
-      if (el.dataset[k] === void 0) el.dataset[k] = el.style.display || "";
+      delete el.dataset.tetherShown;
+      if (el.dataset[k] === void 0 && el.style.display !== "none") el.dataset[k] = el.style.display || "";
       el.style.display = "none";
     }
   }
@@ -628,7 +711,7 @@
   function repeat(container, items, render) {
     const tpl = template(container);
     if (!tpl) {
-      warn("repeater without a template child", container);
+      if (items.length) warn("repeater without a template child", container);
       return;
     }
     container.innerHTML = "";
@@ -752,7 +835,7 @@
     return line;
   }
   function mutation(name, args, inner) {
-    return `mutation Tether_${name}(${args}){${name}(${inner}){cart{...TetherCart}userErrors{field message}}}${cartFragment()}`;
+    return `mutation Tether_${name}(${args}){${name}(${inner}){cart{...TetherCart}userErrors{field message}warnings{code message target}}}${cartFragment()}`;
   }
   var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
   var returnFocus = null;
@@ -763,7 +846,10 @@
       if (!d.hasAttribute("role")) d.setAttribute("role", "dialog");
       if (!d.hasAttribute("aria-label") && !d.hasAttribute("aria-labelledby")) d.setAttribute("aria-label", get(d, "cart-label") || "Cart");
       d.setAttribute("aria-modal", String(open));
-      if (!d.classList.contains(cfg.cartDrawerOpenClass)) d.setAttribute("aria-hidden", "true");
+      if (!d.classList.contains(cfg.cartDrawerOpenClass)) {
+        d.setAttribute("aria-hidden", "true");
+        if (cfg.cartFocus !== false) d.inert = true;
+      }
     });
   }
   var isMissingCart = (err) => /does not exist|not found|invalid id/i.test(err?.message || "");
@@ -791,6 +877,20 @@
       return this.state?.totalQuantity || 0;
     },
     lastError: null,
+    /** Set by the account part while a customer is logged in (Customer Account API token). */
+    customerAccessToken: null,
+    /** line id -> { qty, done }: what quick +/- clicks asked for, shown until Shopify has answered. */
+    pendingQty: /* @__PURE__ */ new Map(),
+    /** Shopify's notes on the last change, e.g. less stock than asked: [{ code, message }]. */
+    warnings: [],
+    /** true once the saved cart (or the absence of one) is known. */
+    loaded: false,
+    _take(payload, name) {
+      const p = unwrap(payload, name);
+      this.warnings = (p.warnings || []).filter((w, i, all) => all.findIndex((x) => x.message === w.message) === i).map((w) => ({ ...w, message: typeof cfg.warningText === "function" && cfg.warningText(w) || w.message }));
+      if (this.warnings.length) emit("cart-warning", { warnings: this.warnings });
+      return p.cart;
+    },
     _queue(fn) {
       const run = this._chain.then(fn, fn).then((value) => {
         if (this.lastError) {
@@ -811,6 +911,10 @@
     _commit(cart, reason) {
       this.state = cart;
       if (cart?.id) this._setId(cart.id);
+      try {
+        localStorage.setItem(`${cfg.storageKey}:seen`, `${Date.now()}|${cart?.totalQuantity || 0}`);
+      } catch {
+      }
       this.render();
       emit("cart-updated", { cart, reason });
       return cart;
@@ -819,9 +923,20 @@
       const id = this.id();
       if (!id) {
         this.state = null;
+        this.loaded = true;
         this.render();
+        emit("cart-updated", { cart: null, reason: "load" });
         return null;
       }
+      if (!this.loaded) {
+        try {
+          const n = (localStorage.getItem(`${cfg.storageKey}:seen`) || "").split("|")[1];
+          if (n) qsa(document, sel("cart-count")).forEach((el) => {
+            if (/^\s*0?\s*$/.test(el.textContent)) el.textContent = n;
+          });
+        } catch {
+        }
+      }
       try {
         const data = await gql(`query TetherCart($id:ID!){cart(id:$id){...TetherCart}}${cartFragment()}`, { id });
         if (!data.cart) {
@@ -834,16 +949,21 @@
         if (isMissingCart(err)) this._setId(null);
         this.state = null;
       }
+      this.loaded = true;
       this.render();
+      emit("cart-updated", { cart: this.state, reason: "load" });
       return this.state;
     },
     async _create(input = {}) {
-      const buyerIdentity = cfg.country ? { countryCode: String(cfg.country).toUpperCase() } : void 0;
+      const buyerIdentity = cfg.country || this.customerAccessToken ? {
+        ...cfg.country ? { countryCode: String(cfg.country).toUpperCase() } : {},
+        ...this.customerAccessToken ? { customerAccessToken: this.customerAccessToken } : {}
+      } : void 0;
       const data = await gql(
         mutation("cartCreate", "$input: CartInput!", "input: $input"),
         { input: { buyerIdentity, ...input } }
       );
-      return unwrap(data.cartCreate, "cartCreate").cart;
+      return this._take(data.cartCreate, "cartCreate");
     },
     /** Runs a cart mutation; creates a fresh cart if ours expired. */
     async _mutate(name, args, inner, variables, createInput) {
@@ -851,7 +971,7 @@
       if (!cartId) return createInput ? this._create(createInput) : null;
       try {
         const data = await gql(mutation(name, `$cartId: ID!, ${args}`, `cartId: $cartId, ${inner}`), { ...variables, cartId });
-        return unwrap(data[name], name).cart;
+        return this._take(data[name], name);
       } catch (err) {
         if (createInput && isMissingCart(err)) {
           log("cart expired, creating a new one");
@@ -894,6 +1014,30 @@
         "update"
       ));
     },
+    /**
+     * +1 / -1 for a line. Quick clicks add up: each builds on the quantity the last click asked for,
+     * which shows at once (tether-line="quantity", Cart.lines) until Shopify has answered.
+     */
+    changeQuantity(lineId, delta) {
+      const current = this.lines.find((l) => l.id === lineId);
+      if (!current) return Promise.resolve(this.state);
+      const target = Math.max(0, (this.pendingQty.get(lineId)?.qty ?? current.quantity) + delta);
+      const job = { qty: target, done: false };
+      this.pendingQty.set(lineId, job);
+      this.render();
+      emit("cart-updated", { cart: this.state, reason: "pending" });
+      return this.updateLine(lineId, target).finally(() => {
+        if (this.pendingQty.get(lineId) === job) {
+          this.pendingQty.delete(lineId);
+          this.render();
+          emit("cart-updated", { cart: this.state, reason: "settled" });
+        }
+      });
+    },
+    /** Quantity to show for a line: the one asked for while an update is on its way. */
+    quantityOf(line) {
+      return this.pendingQty.get(line.id)?.qty ?? line.quantity;
+    },
     removeLine(lineIds) {
       const ids = Array.isArray(lineIds) ? lineIds : [lineIds];
       return this._queue(async () => this._commit(
@@ -930,12 +1074,22 @@
         "discount"
       ));
     },
-    applyDiscount(code) {
+    /**
+     * Adds a code. A code Shopify doesn't accept isn't kept in the cart (it would warn on every change):
+     * it's removed again and the promise rejects with code INVALID_DISCOUNT.
+     */
+    async applyDiscount(code) {
       const current = (this.state?.discountCodes || []).map((d) => d.code);
-      return this.setDiscountCodes([.../* @__PURE__ */ new Set([...current, code])]);
+      const cart = await this.setDiscountCodes([.../* @__PURE__ */ new Set([...current, code])]);
+      const hit = (cart?.discountCodes || []).find((d) => d.code.toLowerCase() === String(code).toLowerCase());
+      if (hit?.applicable) return cart;
+      await this.removeDiscount(code).catch(() => {
+      });
+      throw new TetherError(`Discount code not valid: ${code}`, { code: "INVALID_DISCOUNT" });
     },
     removeDiscount(code) {
-      return this.setDiscountCodes((this.state?.discountCodes || []).map((d) => d.code).filter((c) => c !== code));
+      const k = String(code).toLowerCase();
+      return this.setDiscountCodes((this.state?.discountCodes || []).map((d) => d.code).filter((c) => c.toLowerCase() !== k));
     },
     /** { countryCode, email, phone } — changes currency/prices for that market. */
     setBuyerIdentity(buyerIdentity, { create = true } = {}) {
@@ -955,7 +1109,7 @@
      */
     async checkout(target = cfg.checkoutTarget) {
       const id = this.id();
-      if (!id) return null;
+      if (!id || this.state && !this.count) return null;
       const tab = target === "_blank" ? window.open("", "_blank") : null;
       if (tab) {
         try {
@@ -965,7 +1119,8 @@
       }
       try {
         const data = await gql("query TetherCheckout($id: ID!) { cart(id: $id) { checkoutUrl } }", { id });
-        const url = data.cart?.checkoutUrl;
+        let url = this.beforeCheckout && await this.beforeCheckout().catch(() => null) || data.cart?.checkoutUrl;
+        if (url && this.customerAccessToken) url += `${url.includes("?") ? "&" : "?"}logged_in=true`;
         if (!url) throw new TetherError("No checkoutUrl (cart empty or expired)");
         emit("checkout", { url, cart: this.state });
         if (tab && !tab.closed) tab.location.href = url;
@@ -981,13 +1136,18 @@
     drawers() {
       return qsa(document, sel("cart-drawer"));
     },
+    /** Without a tether-cart-drawer (a React/Svelte/Vue cart), open/close still work: as state for subscribe. */
+    _open: false,
     isOpen() {
-      return this.drawers().some((d) => d.classList.contains(cfg.cartDrawerOpenClass));
+      const ds = this.drawers();
+      return ds.length ? ds.some((d) => d.classList.contains(cfg.cartDrawerOpenClass)) : this._open;
     },
     open() {
       if (this.isOpen()) return;
+      this._open = true;
       const ds = this.drawers().filter((d) => get(d, "cart-drawer") !== "manual");
       ds.forEach((d) => {
+        d.inert = false;
         d.classList.add(cfg.cartDrawerOpenClass);
         d.setAttribute("aria-hidden", "false");
       });
@@ -1005,11 +1165,13 @@
     },
     close() {
       if (!this.isOpen()) return;
+      this._open = false;
       const ds = this.drawers();
       const hadFocus = ds.some((d) => d.contains(document.activeElement));
       ds.forEach((d) => {
         d.classList.remove(cfg.cartDrawerOpenClass);
         d.setAttribute("aria-hidden", "true");
+        if (cfg.cartFocus !== false) d.inert = true;
       });
       ariaState(false);
       if (hadFocus && returnFocus?.isConnected) returnFocus.focus({ preventScroll: true });
@@ -1021,6 +1183,17 @@
       if (this.isOpen()) this.close();
       else this.open();
     },
+    /**
+     * For framework islands (React, Svelte, Vue): fn(cart, { open }) now and on every change.
+     * Returns a function that stops listening.
+     */
+    subscribe(fn) {
+      const call = () => fn(this.state, { open: this.isOpen(), count: this.count, loaded: this.loaded, warnings: this.warnings });
+      const h = () => call();
+      ["cart-updated", "cart-toggled"].forEach((e) => document.addEventListener(`${cfg.prefix}:${e}`, h));
+      call();
+      return () => ["cart-updated", "cart-toggled"].forEach((e) => document.removeEventListener(`${cfg.prefix}:${e}`, h));
+    },
     // -------------------------------------------------------------- render
     render() {
       const cart = this.state;
@@ -1038,12 +1211,18 @@
         "cart-has-subscription": hasSub,
         "cart-no-subscription": !hasSub,
         "cart-has-discount": (cart?.discountCodes || []).some((d) => d.applicable),
-        "cart-error": Boolean(this.lastError)
+        "cart-error": Boolean(this.lastError),
+        "cart-warning": this.warnings.length > 0
       };
+      qsa(document, sel("cart-warning")).forEach((el) => setTextTracked(el, [...new Set(this.warnings.map((w) => w.message))].join(" ")));
       qsa(document, sel("show")).forEach((el) => {
         const k = get(el, "show");
         if (k in conds && !el.closest(sel("product"))) show(el, conds[k]);
       });
+      qsa(document, sel("checkout")).forEach((el) => {
+        el.classList.toggle("is-disabled", !count);
+        el.setAttribute("aria-disabled", String(!count));
+      });
       qsa(document, `textarea${sel("cart-note")},input${sel("cart-note")}`).forEach((el) => {
         if (document.activeElement !== el) el.value = cart?.note || "";
       });
@@ -1089,7 +1268,7 @@
       case "line-subtotal":
         return formatMoney(line.cost?.subtotalAmount);
       case "quantity":
-        return line.quantity;
+        return Cart.quantityOf(line);
       case "plan":
         return plan?.name || "";
       case "plan-description":
@@ -1112,16 +1291,32 @@
     qsa(node, sel("line")).forEach((el) => {
       const key = get(el, "line");
       if (key === "image") return setImage(el, m.image?.url || m.product?.featuredImage?.url, m.product?.title);
-      if (key === "url") return el.setAttribute("href", productUrl(m.product?.handle, m.product?.id));
+      if (key === "url") {
+        const u = productUrl(m.product?.handle, m.product?.id);
+        const q = new URLSearchParams();
+        if (m.id) q.set("variant", String(m.id).split("/").pop());
+        const plan = line.sellingPlanAllocation?.sellingPlan?.id;
+        if (plan) q.set("selling_plan", plan.split("/").pop());
+        const qs = q.toString();
+        return el.setAttribute("href", qs ? `${u}${u.includes("?") ? "&" : "?"}${qs}` : u);
+      }
       const v = lineValue(line, key);
       if (v !== void 0) setTextTracked(el, v);
       return void 0;
     });
+    const warning = Cart.warnings.find((w) => w.target === line.id);
+    node.classList.toggle("is-warning", Boolean(warning));
+    const pending2 = Cart.pendingQty.has(line.id);
+    node.classList.toggle("is-busy", pending2);
+    if (pending2) node.setAttribute("aria-busy", "true");
+    else node.removeAttribute("aria-busy");
+    qsa(node, sel("line", "warning")).forEach((el) => setTextTracked(el, warning?.message || ""));
     const lineConds = {
       subscription: isSub,
       "one-time": !isSub,
       "on-sale": parseFloat(line.cost?.compareAtAmountPerQuantity?.amount) > parseFloat(line.cost?.amountPerQuantity?.amount),
-      "has-components": (line.lineComponents || []).length > 0
+      "has-components": (line.lineComponents || []).length > 0,
+      warning: Boolean(warning)
     };
     qsa(node, sel("line-show")).forEach((el) => {
       const k = get(el, "line-show");
@@ -1158,6 +1353,7 @@
   var product_exports = {};
   __export(product_exports, {
     ProductScope: () => ProductScope,
+    rememberOptionNames: () => rememberOptionNames,
     scopes: () => scopes
   });
 
@@ -1171,8 +1367,8 @@
     resolveProductKey: () => resolveProductKey,
     setScopeStatus: () => setScopeStatus
   });
-  function resolveProductKey(el, location = window.location) {
-    const raw = (get(el, "product") || "").trim();
+  function resolveProductKey(el, location = window.location, name = "product") {
+    const raw = (get(el, name) || "").trim();
     if (!raw.toLowerCase().startsWith("url:")) return { key: raw || null, fromUrl: false, raw };
     const what = raw.slice(4).trim();
     let key = null;
@@ -1204,11 +1400,7 @@
     scoped(root, sel("show"), boundary()).forEach((el) => {
       const k = get(el, "show");
       if (!STATUS_KEYS.includes(k)) return;
-      const visible = k === status;
-      show(el, visible);
-      if (visible && typeof getComputedStyle === "function" && getComputedStyle(el).display === "none") {
-        el.style.display = el.getAttribute(attr("display")) || "block";
-      }
+      show(el, k === status);
     });
     if (status === "error" || notFound) {
       scoped(root, sel("add-to-cart"), boundary()).forEach((btn) => {
@@ -1229,6 +1421,12 @@
     const mf = (product.metafields || []).find((m) => m && m.namespace === ns && m.key === key);
     return mf || null;
   }
+  var knownOptionNames = /* @__PURE__ */ new Map();
+  function rememberOptionNames(products) {
+    (products || []).forEach((p) => {
+      if (p?.handle && !knownOptionNames.has(p.handle)) knownOptionNames.set(p.handle, (p.options || []).map((o) => o.name));
+    });
+  }
   var ProductScope = class {
     constructor(root, product) {
       this.root = root;
@@ -1278,6 +1476,13 @@
       return this.root.matches(s) ? [this.root, ...inner] : inner;
     }
     // ------------------------------------------------------------ state
+    /** The product's option name for a name used in the markup (same name, or same position). */
+    optName(authored) {
+      const opts = this.product?.options || [];
+      if (!authored || opts.some((o) => o.name === authored)) return authored;
+      const i = (knownOptionNames.get(this.product.handle) || []).indexOf(authored);
+      return i >= 0 && opts[i] ? opts[i].name : authored;
+    }
     initSelection() {
       const vs = this.product.variants.nodes;
       const first = vs.find((v) => v.availableForSale) || vs[0];
@@ -1345,7 +1550,17 @@
     // ------------------------------------------------------------ actions
     select(name, value) {
       if (this.selected[name] === value) return;
-      this.selected[name] = value;
+      const vs = this.product.variants.nodes.filter((v) => v.selectedOptions.some((o) => o.name === name && o.value === value));
+      if (!vs.length) return;
+      const next = { ...this.selected, [name]: value };
+      if (!vs.some((v) => v.selectedOptions.every((o) => next[o.name] === o.value))) {
+        const score = (v) => v.selectedOptions.filter((o) => o.name !== name && this.selected[o.name] === o.value).length * 2 + (v.availableForSale ? 1 : 0);
+        const best = vs.reduce((a, b) => score(b) > score(a) ? b : a);
+        best.selectedOptions.forEach((o) => {
+          next[o.name] = o.value;
+        });
+      }
+      this.selected = next;
       this.renderVariant();
     }
     selectVariant(id) {
@@ -1394,7 +1609,7 @@
         const opt = t.closest(sel("option-value"));
         if (own(opt) && opt.closest(sel("option-list"))) {
           e.preventDefault();
-          this.select(get(opt.closest(sel("option-list")), "option-list"), get(opt, "option-value"));
+          this.select(this.optName(get(opt.closest(sel("option-list")), "option-list")), get(opt, "option-value"));
           return;
         }
         const plan = t.closest(sel("plan-value"));
@@ -1430,7 +1645,7 @@
       this.root.addEventListener("change", (e) => {
         const t = e.target;
         if (!own(t)) return;
-        if (t.matches(`select${sel("option")}`)) this.select(get(t, "option"), t.value);
+        if (t.matches(`select${sel("option")}`)) this.select(this.optName(get(t, "option")), t.value);
         else if (t.matches(`select${sel("variant-select")}`)) this.selectVariant(t.value);
         else if (t.matches(`select${sel("plan")}`)) {
           if (t.value) this.selectPlan(t.value);
@@ -1460,6 +1675,11 @@
     }
     // ------------------------------------------------------------ render
     renderProduct() {
+      const p0 = this.product;
+      if (!knownOptionNames.has(p0.handle)) {
+        const authored = this.$(`${sel("option-list")},select${sel("option")}`).map((e) => get(e, "option-list") || get(e, "option"));
+        if (authored.some((n) => p0.options.some((o) => o.name === n))) rememberOptionNames([p0]);
+      }
       const p = this.product;
       this.$(sel("bind")).forEach((el) => {
         const key = get(el, "bind") || "";
@@ -1489,6 +1709,10 @@
             if (key === "url" && !el.firstElementChild && !el.textContent.trim()) setText(el, p.title);
             return void 0;
           case "images":
+            {
+              const imgs = [...el.children].map((n) => n.tagName === "IMG" ? n : n.querySelector("img"));
+              if (!hasTemplate(el) && imgs.length === p.images.nodes.length && imgs.every((im, i) => sameImage(im?.getAttribute("src"), p.images.nodes[i].url))) return void 0;
+            }
             return repeat(el, p.images.nodes, (node, img) => {
               const target = node.matches(`img,${sel("bind", "image")}`) ? node : node.querySelector("img") || node;
               setImage(target, img.url, img.altText || p.title);
@@ -1513,7 +1737,7 @@
         }
       });
       this.$(sel("option-list")).forEach((container) => {
-        const name = get(container, "option-list");
+        const name = this.optName(get(container, "option-list"));
         const opt = p.options.find((o) => o.name === name);
         if (!opt || opt.optionValues.length <= 1 && has(container, "hide-single")) return show(container, false);
         return repeat(container, opt.optionValues, (node, v) => {
@@ -1527,7 +1751,7 @@
         });
       });
       this.$(`select${sel("option")}`).forEach((s) => {
-        const opt = p.options.find((o) => o.name === get(s, "option"));
+        const opt = p.options.find((o) => o.name === this.optName(get(s, "option")));
         if (!opt) return show(s, false);
         s.innerHTML = "";
         opt.optionValues.forEach((v) => s.appendChild(new Option(v.name, v.name)));
@@ -1583,7 +1807,7 @@
       const plan = this.plan;
       const total = { amount: (parseFloat(price.amount) * Math.max(1, this.quantity)).toFixed(2), currencyCode: price.currencyCode };
       const fm = formatMoney;
-      const pct = (n) => n ? `${n}%` : "";
+      const pct = (n) => formatPercent(n);
       const text = {
         price: () => fm(price),
         "total-price": () => fm(total),
@@ -1591,7 +1815,11 @@
         "subscription-price": () => fm(subPrice),
         "subscription-savings": () => pct(savings.percentage),
         "subscription-savings-amount": () => fm(savings.amount),
-        "checkout-charge": () => fm(sub ? planCheckoutCharge(v, this.planId) : price),
+        // What the visitor pays today for the chosen quantity (prepaid plans charge more up front).
+        "checkout-charge": () => {
+          const c = sub ? planCheckoutCharge(v, this.planId) : price;
+          return c && fm({ amount: (parseFloat(c.amount) * Math.max(1, this.quantity)).toFixed(2), currencyCode: c.currencyCode });
+        },
         "plan-name": () => plan?.name,
         "plan-description": () => plan?.description,
         "plan-group": () => plan?.group?.name,
@@ -1611,9 +1839,9 @@
         if (k === "variant-image") setImage(el, v.image?.url || p.featuredImage?.url, v.image?.altText || p.title);
         else if (text[k]) setText(el, text[k]());
       });
-      this.$(sel("option-selected")).forEach((el) => setText(el, this.selected[get(el, "option-selected")] || ""));
+      this.$(sel("option-selected")).forEach((el) => setText(el, this.selected[this.optName(get(el, "option-selected"))] || ""));
       this.$(sel("option-list")).forEach((container) => {
-        const name = get(container, "option-list");
+        const name = this.optName(get(container, "option-list"));
         qsa(container, sel("option-value")).forEach((node) => {
           const value = get(node, "option-value");
           setSelected(node, this.selected[name] === value);
@@ -1623,7 +1851,7 @@
         });
       });
       this.$(`select${sel("option")}`).forEach((s) => {
-        s.value = this.selected[get(s, "option")] || "";
+        s.value = this.selected[this.optName(get(s, "option"))] || "";
       });
       this.$(`select${sel("variant-select")}`).forEach((s) => {
         s.value = v.id;
@@ -1650,6 +1878,8 @@
           const k = get(el, "plan-bind");
           const val = {
             name: () => planObj?.name,
+            option: () => (planObj?.options || []).map((o) => o.value).join(", "),
+            // e.g. "1 month", without the store's price text
             description: () => planObj?.description,
             price: () => fm(planPrice(v, id)),
             savings: () => pct(s.percentage),
@@ -1662,6 +1892,7 @@
       this.$(`select${sel("plan")}`).forEach((s) => {
         s.value = sub ? this.planId : "";
       });
+      const low = v.quantityAvailable != null && v.quantityAvailable > 0 && v.quantityAvailable <= (cfg.lowStock ?? 5);
       const conds = {
         "in-stock": v.availableForSale,
         "out-of-stock": !v.availableForSale,
@@ -1670,7 +1901,8 @@
         "not-on-sale": !onSale,
         "has-variants": p.variants.nodes.length > 1,
         "single-variant": p.variants.nodes.length === 1,
-        "low-stock": v.quantityAvailable != null && v.quantityAvailable > 0 && v.quantityAvailable <= 5,
+        "low-stock": low,
+        "plenty-in-stock": v.availableForSale && !low,
         "subscription-available": this.subscriptionAvailable,
         "subscription-unavailable": !this.subscriptionAvailable,
         "subscription-only": Boolean(p.requiresSellingPlan),
@@ -1756,18 +1988,20 @@
     }
     async load(more = false) {
       const token = this.loadToken = (this.loadToken || 0) + 1;
-      const stale = () => token !== this.loadToken;
+      const stale2 = () => token !== this.loadToken;
       try {
         if (has(this.root, "recommendations")) {
-          const key = get(this.root, "recommendations");
-          const base = await getProduct(key);
-          const recs = await getRecommendations(base.id, get(this.root, "intent") || "RELATED");
-          if (stale()) return;
+          let { key } = resolveProductKey(this.root, window.location, "recommendations");
+          const scope = this.root.closest(sel("product"));
+          if (!key && scope) ({ key } = resolveProductKey(scope));
+          if (!key) throw new TetherError("No product for recommendations", { code: "NOT_FOUND" });
+          const recs = await getRecommendations(key, get(this.root, "intent") || "RELATED");
+          if (stale2()) return;
           const limit = parseInt(get(this.root, "limit") || "", 10);
           this.products = limit ? recs.slice(0, limit) : recs;
         } else {
           const res = await getProducts({ ...this.options(), after: more ? this.pageInfo?.endCursor : null });
-          if (stale()) return;
+          if (stale2()) return;
           this.collection = res.collection;
           this.pageInfo = res.pageInfo;
           this.products = more ? [...this.products, ...res.products] : res.products;
@@ -1776,9 +2010,9 @@
         setScopeStatus(this.root, "ready");
         emit("list-ready", { products: this.products, collection: this.collection }, this.root);
       } catch (err) {
-        if (stale()) return;
+        if (stale2()) return;
         if (!more) setScopeStatus(this.root, isNotFound(err) ? "not-found" : "error", err);
-        reportError(err, "list load failed");
+        if (!(isNotFound(err) && has(this.root, "recommendations"))) reportError(err, "list load failed");
         emit("error", { error: err, context: "list" }, this.root);
       }
     }
@@ -1809,12 +2043,10 @@
       const empty = this.products.length === 0;
       this.$(sel("show")).forEach((el) => {
         const k = get(el, "show");
-        if (k === "list-empty") el.style.display = empty ? "" : "none";
-        if (k === "list-filled") el.style.display = empty ? "none" : "";
-      });
-      this.$(sel("load-more")).forEach((el) => {
-        el.style.display = this.pageInfo?.hasNextPage ? "" : "none";
+        if (k === "list-empty") show(el, empty);
+        if (k === "list-filled") show(el, !empty);
       });
+      this.$(sel("load-more")).forEach((el) => show(el, Boolean(this.pageInfo?.hasNextPage)));
       notifyLayoutChanged("list");
     }
   };
@@ -1822,6 +2054,7 @@
   // src/mounting.js
   var mounting_exports = {};
   __export(mounting_exports, {
+    hydrateFromPage: () => hydrateFromPage,
     liveLists: () => liveLists,
     liveProducts: () => liveProducts,
     mountProduct: () => mountProduct,
@@ -1829,6 +2062,8 @@
     mountedProducts: () => mountedProducts,
     pruneLive: () => pruneLive,
     retryFailed: () => retryFailed,
+    settleMarket: () => settleMarket,
+    trackMarket: () => trackMarket,
     within: () => within
   });
   var mountedProducts = /* @__PURE__ */ new WeakSet();
@@ -1867,12 +2102,15 @@
     const current = () => requestToken.get(el) === token;
     if (!scopes.get(el)) setScopeStatus(el, "loading");
     else el.setAttribute(attr("state"), "updating");
-    getProduct(key).then((p) => {
+    const loading = getProduct(key);
+    marketPending?.add(loading);
+    loading.then((p) => {
       if (!current()) return;
       const existing = scopes.get(el);
       if (existing) existing.update(p);
       else new ProductScope(el, p);
       applyPageTitle(el, p);
+      if (cfg.revalidate !== false && takeStale(key)) queueRefresh(key);
     }).catch((err) => {
       if (!current()) return;
       const notFound = isNotFound(err);
@@ -1901,6 +2139,62 @@
       mountProduct(el);
     });
   }
+  var refreshQueue = /* @__PURE__ */ new Set();
+  function queueRefresh(key) {
+    if (!refreshQueue.size) setTimeout(flushRefresh, 0);
+    refreshQueue.add(key);
+  }
+  function flushRefresh() {
+    const keys = [...refreshQueue];
+    refreshQueue = /* @__PURE__ */ new Set();
+    refreshProducts(keys).forEach((promise, i) => promise.then((fresh) => {
+      liveProducts.forEach((el) => {
+        const scope = scopes.get(el);
+        if (!scope || !el.isConnected) return;
+        const k = resolveProductKey(el).key;
+        if (k !== keys[i] && k !== fresh.handle && k !== fresh.id) return;
+        if (JSON.stringify(scope.product) !== JSON.stringify(fresh)) scope.update(fresh);
+      });
+    }).catch((err) => reportError(err, `refresh ${keys[i]}`)));
+  }
+  var readScripts = /* @__PURE__ */ new WeakSet();
+  var marketPending = null;
+  var trackMarket = (p) => {
+    marketPending?.add(p);
+    return p;
+  };
+  function settleMarket() {
+    if (!marketPending) return;
+    const waits = [...marketPending];
+    Promise.allSettled(waits).then(() => {
+      if (!marketPending || waits.some((w) => !marketPending.has(w))) return;
+      if (waits.length === marketPending.size) {
+        marketPending = null;
+        document.documentElement.classList.remove(`${cfg.prefix}-market-pending`);
+      } else settleMarket();
+    });
+  }
+  function hydrateFromPage(root = document) {
+    qsa(root.ownerDocument || root, 'script[type="application/json"][data-tether-hydrate]').forEach((s) => {
+      if (readScripts.has(s)) return;
+      readScripts.add(s);
+      try {
+        const data = JSON.parse(s.textContent);
+        rememberOptionNames(data.products);
+        const same = (a, b) => String(a || "").toUpperCase() === String(b || "").toUpperCase();
+        if (same(data.country, cfg.country) && same(data.language, cfg.language)) hydrateProducts(data.products);
+        else {
+          log("hydration skipped: other market");
+          if (!marketPending) {
+            marketPending = /* @__PURE__ */ new Set();
+            document.documentElement.classList.add(`${cfg.prefix}-market-pending`);
+          }
+        }
+      } catch (err) {
+        warn("bad data-tether-hydrate", err);
+      }
+    });
+  }
 
   // src/lazy-iife.js
   var { cfg: cfg2 } = config_exports;
@@ -1939,13 +2233,14 @@
   }
 
   // src/index.js
-  var VERSION = "0.4.0";
+  var VERSION = "0.6.0";
   var initPromise = null;
   var observer = null;
   function mount(root = document) {
     if (!isConfigured()) return 0;
     let count = 0;
     pruneLive();
+    hydrateFromPage(root);
     within(root, listSelector()).forEach((el) => {
       if (mountedLists.has(el)) return;
       mountedLists.add(el);
@@ -1953,7 +2248,7 @@
       const list = new ListScope(el);
       liveLists.add(list);
       el.addEventListener(`${cfg.prefix}:list-rendered`, (e) => mount(e.detail.container));
-      list.load();
+      trackMarket(list.load());
     });
     within(root, sel("product")).forEach((el) => {
       if (mountProduct(el)) count++;
@@ -1961,9 +2256,16 @@
     if (within(root, `${sel("country-select")},${sel("country-bind")}`).length) {
       loadPart("markets").then((m) => m.renderCountrySelects(root)).catch((err) => reportError(err, "markets"));
     }
+    if ((cfg.account?.clientId || cfg.account?.server) && (within(root, `[${attr("account-login")}],[${attr("account-bind")}],[${attr("orders")}],[${attr("show")}^="logged-"]`).length || /[?&]code=/.test(window.location.search) || hasAccountSession())) {
+      loadPart("account").then((m) => m.mountAccount(root)).catch((err) => reportError(err, "account"));
+    }
+    if (within(root, sel("search")).length) {
+      loadPart("search").then((m) => m.mountSearch(root)).catch((err) => reportError(err, "search"));
+    }
     qsa(root, sel("account-link")).forEach((a) => {
       a.setAttribute("href", `https://${cfg.domain}/account`);
     });
+    settleMarket();
     Cart.render();
     log(`mounted ${count} scope(s)`, root);
     return count;
@@ -2012,9 +2314,12 @@
           e.preventDefault();
           fn().catch((err) => reportError(err, "cart line"));
         };
-        if (t.closest(sel("line-remove"))) return run(() => Cart.removeLine(id));
-        if (current && t.closest(sel("line-plus"))) return run(() => Cart.updateLine(id, current.quantity + 1));
-        if (current && t.closest(sel("line-minus"))) return run(() => Cart.updateLine(id, current.quantity - 1));
+        if (t.closest(sel("line-remove"))) {
+          line.classList.add("is-busy");
+          return run(() => Cart.removeLine(id));
+        }
+        if (current && t.closest(sel("line-plus"))) return run(() => Cart.changeQuantity(id, 1));
+        if (current && t.closest(sel("line-minus"))) return run(() => Cart.changeQuantity(id, -1));
       }
       const removeCode = t.closest(sel("discount-remove"));
       if (removeCode) {
@@ -2034,10 +2339,15 @@
       if (!t?.closest) return;
       const lineEl = t.closest(dataKeySel());
       const id = lineEl?.getAttribute(`data-${cfg.prefix}-key`);
+      const busyLine = (p, what) => {
+        lineEl.classList.add("is-busy");
+        lineEl.setAttribute("aria-busy", "true");
+        p.catch((err) => reportError(err, what));
+      };
       if (id && t.matches(`input${sel("line", "quantity")}`)) {
-        Cart.updateLine(id, parseInt(t.value, 10) || 0).catch((err) => reportError(err, "cart line"));
+        busyLine(Cart.updateLine(id, parseInt(t.value, 10) || 0), "cart line");
       } else if (id && t.matches(`select${sel("line-plan")}`)) {
-        Cart.updateLine(id, { sellingPlanId: t.value || null }).catch((err) => reportError(err, "cart line plan"));
+        busyLine(Cart.updateLine(id, { sellingPlanId: t.value || null }), "cart line plan");
       } else if (t.matches(`select${sel("country-select")}`)) {
         if (t.value) setCountry(t.value).catch((err) => reportError(err, "country"));
       } else if (t.matches(sel("cart-note"))) {
@@ -2052,18 +2362,59 @@
       const code = input?.value.trim();
       if (!code) return;
       busy(form, async () => {
+        const mark = (bad) => {
+          form.classList.toggle("is-invalid", bad);
+          if (input) {
+            if (bad) input.setAttribute("aria-invalid", "true");
+            else input.removeAttribute("aria-invalid");
+          }
+        };
         try {
-          const cart = await Cart.applyDiscount(code);
-          const ok = (cart?.discountCodes || []).find((d) => d.code.toLowerCase() === code.toLowerCase())?.applicable;
-          form.classList.toggle("is-invalid", !ok);
-          emit(ok ? "discount-applied" : "discount-invalid", { code }, form);
-          if (ok && input) input.value = "";
+          await Cart.applyDiscount(code);
+          mark(false);
+          emit("discount-applied", { code }, form);
+          if (input) input.value = "";
         } catch (err) {
-          form.classList.add("is-invalid");
-          reportError(err, "discount");
+          mark(true);
+          if (err?.code === "INVALID_DISCOUNT") emit("discount-invalid", { code }, form);
+          else reportError(err, "discount");
         }
       });
+    }, true);
+    document.addEventListener("input", (e) => {
+      const f = e.target.closest?.(sel("discount-form"));
+      if (f) {
+        f.classList.remove("is-invalid");
+        e.target.removeAttribute?.("aria-invalid");
+      }
     });
+    window.addEventListener("storage", (e) => {
+      if (cfg.domain && e.key?.startsWith(`${cfg.prefix}:`)) loadPart("extras").then((m) => m.onStorage(e)).catch(() => {
+      });
+    });
+    document.addEventListener(`${cfg.prefix}:variant-changed`, (e) => {
+      const root = e.target;
+      if (cfg.variantUrl || root.hasAttribute?.(attr("variant-url"))) loadPart("extras").then((m) => m.writeVariantUrl(root, e.detail)).catch(() => {
+      });
+    });
+    if (cfg.astro !== false) {
+      document.addEventListener("astro:page-load", () => (initPromise || Promise.resolve()).then(() => {
+        let target = pageMarket();
+        if (!target && onPageMarket) {
+          try {
+            target = JSON.parse(localStorage.getItem(`${cfg.prefix}:market:${cfg.domain}`) || "null");
+          } catch {
+            target = null;
+          }
+          target = target?.country ? target : baseMarket;
+        }
+        onPageMarket = Boolean(pageMarket());
+        const differs = target?.country && (String(target.country).toUpperCase() !== String(cfg.country || "").toUpperCase() || String(target.language || "").toUpperCase() !== String(cfg.language || "").toUpperCase());
+        if (differs) setCountry(target.country, { language: target.language ?? null, locale: target.locale, remember: false }).then(() => mount(document), () => mount(document));
+        else mount(document);
+      }));
+      document.addEventListener("astro:before-swap", () => unmount());
+    }
     window.addEventListener("online", () => {
       retryFailed();
       liveLists.forEach((l) => {
@@ -2091,30 +2442,8 @@
   function dataKeySel() {
     return `[data-${cfg.prefix}-key]`;
   }
-  async function addGroup(btn) {
-    const group = btn.closest(sel("group"));
-    if (!group) return null;
-    const name = get(group, "group");
-    const extra = toAttributes(parseJSONAttr(group, "line-attributes"));
-    const groupAttrs = name ? [{ key: "_group", value: name }, ...extra] : extra;
-    const lines = qsa(group, sel("product")).map((el) => scopes.get(el)).filter((s) => s && s.variant?.availableForSale && s.quantity > 0).map((s) => {
-      const l = s.getLine();
-      l.attributes = [...l.attributes || [], ...groupAttrs];
-      return l;
-    });
-    if (!lines.length) {
-      warn("group-add: nothing selected");
-      return null;
-    }
-    try {
-      const cart = await Cart.add(lines);
-      emit("group-added", { group: name, lines }, group);
-      return cart;
-    } catch (err) {
-      reportError(err, "group add");
-      return null;
-    }
-  }
+  var addGroup = (btn) => loadPart("extras").then((m) => m.addGroup(btn));
+  var analyticsQueue = null;
   function init(overrides = {}) {
     if (initPromise && !Object.keys(overrides).length) return initPromise;
     configure({ ...window.TETHER_CONFIG || {}, ...overrides });
@@ -2125,6 +2454,12 @@
     }
     bindControls();
     if (cfg.observe) startObserver();
+    if (cfg.analytics && !analyticsQueue) {
+      analyticsQueue = [];
+      ["product-ready", "list-ready", "cart-updated", "cart-toggled", "checkout", "search"].forEach((n) => document.addEventListener(`${cfg.prefix}:${n}`, (e) => analyticsQueue.push(e)));
+      document.addEventListener("astro:page-load", () => analyticsQueue.push(new CustomEvent(`${cfg.prefix}:page`)));
+      loadPart("analytics").then((m) => m.startAnalytics(analyticsQueue)).catch((err) => reportError(err, "analytics"));
+    }
     initPromise = applyMarket(overrides).then(() => Cart.init()).then(async (cart) => {
       const want = cfg.country ? String(cfg.country).toUpperCase() : null;
       if (cart && want && cart.buyerIdentity?.countryCode && cart.buyerIdentity.countryCode !== want) {
@@ -2139,8 +2474,24 @@
     });
     return initPromise;
   }
+  function pageMarket(doc = document) {
+    const get2 = (n) => doc.querySelector(`meta[name="${cfg.prefix}-page-${n}"]`)?.getAttribute("content") || void 0;
+    const country = get2("country");
+    return country ? { country: country.toUpperCase(), language: get2("language"), locale: get2("locale") } : null;
+  }
+  var baseMarket = null;
+  var onPageMarket = false;
   async function applyMarket(overrides) {
     const m = cfg.markets || {};
+    baseMarket = { country: cfg.country, language: cfg.language, locale: cfg.locale };
+    const page = pageMarket();
+    onPageMarket = Boolean(page);
+    if (page) {
+      cfg.country = page.country;
+      cfg.language = page.language ? page.language.toUpperCase() : void 0;
+      if (page.locale) cfg.locale = page.locale;
+      return;
+    }
     if (m.detect === false) return;
     let market = null;
     if (m.detect) {
@@ -2160,9 +2511,17 @@
     if (!market) return;
     if (market.country) cfg.country = market.country;
     if (market.language) cfg.language = market.language;
-    if (market.locale && !overrides.locale && !window.TETHER_CONFIG?.locale) cfg.locale = market.locale;
+    if (market.locale && !overrides.locale) cfg.locale = market.locale;
     log("market", market);
   }
+  function hasAccountSession() {
+    try {
+      return Boolean(sessionStorage[`${cfg.prefix}:account:${cfg.domain}`] || localStorage[`${cfg.prefix}:account:${cfg.domain}`] || localStorage[`${cfg.prefix}:account-hint:${cfg.domain}`]);
+    } catch {
+      return false;
+    }
+  }
+  var accountApi = new Proxy({}, { get: (_, n) => (...a) => loadPart("account").then((m) => m[n](...a)) });
   function setCountry(code, opts) {
     return loadPart("markets").then((m) => m.setCountry(code, opts));
   }
@@ -2203,10 +2562,12 @@
     getRecommendations,
     getScope,
     addGroup,
+    account: accountApi,
     primeProduct,
     normalizeProductKey,
     clearProductCache,
     formatMoney,
+    imageUrl,
     plans: selling_plans_exports,
     TetherError,
     resolveProductKey,
@@ -2225,7 +2586,7 @@
   var index_default = api;
   if (typeof window !== "undefined" && typeof document !== "undefined") {
     window.Tether = api;
-    const auto = window.TETHER_CONFIG && window.TETHER_CONFIG.autoMount !== false;
+    const auto = window.TETHER_CONFIG && window.TETHER_CONFIG.autoMount !== false && !window.TETHER_INTEGRATION;
     if (auto) {
       const start = () => init().then(() => mount(document));
       if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start, { once: true });