@occluze/tether 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occluze/tether",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Free, open-source alternative to Smootify and Storesynk (Shopyflow): Shopify products, cart and subscriptions in Webflow with HTML attributes. Optional Shopify to Webflow CMS sync.",
   "type": "module",
   "main": "dist/esm/index.js",
@@ -43,7 +43,7 @@
     "presmoke": "node scripts/build.mjs",
     "test:types": "tsc -p types/tsconfig.json",
     "release": "node scripts/release.mjs",
-    "e2e:build": "npm run build && cd examples/astro && (test -f .env || cp .env.example .env) && npm install --no-audit --no-fund --silent && npm install --no-save --silent ../.. && npx astro build",
+    "e2e:build": "npm run build && cd examples/astro && (test -f .env || cp .env.example .env) && npm install --no-audit --no-fund && npm install --no-save ../.. && npx astro build",
     "e2e": "npm run e2e:build && playwright test -c e2e/playwright.config.js"
   },
   "devDependencies": {

package/src/account.js

@@ -21,7 +21,7 @@
  */
 import { cfg, log, reportError } from './config.js';
 import { TetherError } from './client.js';
-import { sel, get, qsa, setText, repeat, show, formatMoney, emit } from './dom.js';
+import { sel, get, qsa, setText, setImage, repeat, show, formatMoney, emit } from './dom.js';
 import { Cart } from './cart.js';
 
 const KEY = () => `${cfg.prefix}:account:${cfg.domain}`;
@@ -41,7 +41,8 @@ let customerCache = null;
 
 // Server mode (account.server): the Worker holds the tokens, this browser only a session cookie it
 // can't read. Recommended for live sites.
-const server = () => (cfg.account?.server ? String(cfg.account.server).replace(/\/$/, '') : '');
+// A full URL or a path on this site ('/_tether/account').
+const server = () => (cfg.account?.server ? new URL(String(cfg.account.server), window.location.href).href.replace(/\/$/, '') : '');
 const HINT = () => `${cfg.prefix}:account-hint:${cfg.domain}`; // "may be logged in": loads this part, no secret
 let serverState = null; // { loggedIn, customer }
 async function serverFetch(path, { method = 'GET', body } = {}) {
@@ -81,8 +82,7 @@ export function isLoggedIn() { return server() ? Boolean(serverState?.loggedIn)
 export async function login({ returnTo = window.location.href, locale } = {}) {
   if (server()) {
     const u = new URL(`${server()}/login`);
-    u.searchParams.set('returnTo', returnTo);
-    if (Cart.id()) u.searchParams.set('cart', Cart.id());
+    u.searchParams.set('returnTo', returnTo); // the cart is linked later, through the Worker's protected POST /cart
     const lang = locale || cfg.account.locale || (cfg.locale || '').split('-')[0];
     if (lang) u.searchParams.set('locale', lang);
     if (cfg.country) u.searchParams.set('country', String(cfg.country).toUpperCase());
@@ -251,6 +251,7 @@ export async function logout({ returnTo = cfg.account?.logoutUrl || `${window.lo
 
 // ---------------------------------------------------------------- markup
 
+const https = (u) => { try { return new URL(u).protocol === 'https:'; } catch { return false; } }; // links from Shopify: https only
 const date = (s) => { try { return new Date(s).toLocaleDateString(cfg.locale || undefined); } catch { return s; } };
 
 export async function render(root = document) {
@@ -271,15 +272,35 @@ export async function render(root = document) {
   }
   const lists = qsa(root, sel('orders'));
   if (lists.length) {
-    const list = await orders({ first: parseInt(get(lists[0], 'limit') || '10', 10) }).catch((err) => { reportError(err, 'orders'); return []; });
+    // tether-show="orders-loading" / "orders-empty" (no orders yet).
+    const ordersShow = (loading, empty) => qsa(root, sel('show')).forEach((el) => {
+      const k = get(el, 'show');
+      if (k === 'orders-loading') show(el, loading);
+      if (k === 'orders-empty') show(el, empty);
+    });
+    ordersShow(true, false);
+    let failed = false;
+    const list = await orders({ first: parseInt(get(lists[0], 'limit') || '10', 10) }).catch((err) => { reportError(err, 'orders'); failed = true; return []; });
+    ordersShow(false, !failed && list.length === 0);
     lists.forEach((c) => repeat(c, list, (node, o) => {
+      const items = o.lineItems?.nodes || [];
       qsa(node, sel('order-bind')).forEach((el) => {
         const k = get(el, 'order-bind');
-        if (k === 'url') { el.setAttribute('href', o.statusPageUrl); return; }
-        const v = { name: o.name, date: date(o.processedAt), total: formatMoney(o.totalPrice), status: o.financialStatus?.toLowerCase(), fulfillment: o.fulfillmentStatus?.toLowerCase(), items: o.lineItems.nodes.map((l) => `${l.quantity}× ${l.title}`).join(', ') }[k];
+        if (k === 'url') { if (https(o.statusPageUrl)) el.setAttribute('href', o.statusPageUrl); return; }
+        if (k === 'image') { const im = items.find((l) => l.image)?.image; if (im) setImage(el, im.url, im.altText || items[0]?.title || ''); return; }
+        const v = { name: o.name, date: date(o.processedAt), total: formatMoney(o.totalPrice), status: o.financialStatus?.toLowerCase(), fulfillment: o.fulfillmentStatus?.toLowerCase(), items: items.map((l) => `${l.quantity}× ${l.title}`).join(', ') }[k];
         if (v != null) setText(el, v);
       });
-      if (get(node, 'order-bind') === 'url') node.setAttribute('href', o.statusPageUrl);
+      // Per product of the order: <div tether-order-lines><div><img tether-order-line="image"> <span tether-order-line="title"></span></div></div>
+      qsa(node, sel('order-lines')).forEach((box) => repeat(box, items, (row, l) => {
+        qsa(row, sel('order-line')).concat(row.matches(sel('order-line')) ? [row] : []).forEach((el) => {
+          const k = get(el, 'order-line');
+          if (k === 'image') { if (l.image) setImage(el, l.image.url, l.image.altText || l.title); return; }
+          const v = { title: l.title, 'variant-title': l.variantTitle || '', quantity: String(l.quantity) }[k];
+          if (v != null) setText(el, v);
+        });
+      }));
+      if (get(node, 'order-bind') === 'url' && https(o.statusPageUrl)) node.setAttribute('href', o.statusPageUrl);
     }));
   }
 }

package/src/astro.js

@@ -12,7 +12,8 @@
  *
  * Options are Tether's config (domain and token override .env). Functions (onError, formatMoney,
  * hooks) can't be passed here: set them in window.TETHER_CONFIG in your layout, it is merged in.
- * View Transitions (<ClientRouter />) work without extra code.
+ * View Transitions (<ClientRouter />) work without extra code. In dev, changes to
+ * src/shop.config.js restart the dev server (other files: tether({ ..., watch: ['my/config.js'] })).
  */
 
 const ENV_KEYS = {
@@ -20,9 +21,16 @@ const ENV_KEYS = {
   token: ['PUBLIC_SHOPIFY_STOREFRONT_TOKEN', 'PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN', 'SHOPIFY_STOREFRONT_TOKEN'],
 };
 
+/** The mode Astro runs in: --mode, else development for dev and production for build. */
+function modeOf(command, argv = process.argv) {
+  const i = argv.findIndex((a) => a === '--mode' || a.startsWith('--mode='));
+  if (i >= 0) return argv[i].includes('=') ? argv[i].split('=')[1] : argv[i + 1];
+  return command === 'dev' ? 'development' : 'production';
+}
+
 /** .env files the way Vite reads them (later files win), plus process.env on top. */
 async function readEnv(command, root) {
-  const mode = command === 'dev' ? 'development' : 'production';
+  const mode = modeOf(command);
   const out = {};
   try {
     const { readFile } = await import('node:fs/promises');
@@ -44,12 +52,29 @@ async function readEnv(command, root) {
 }
 
 export default function tether(options = {}) {
-  const { inject = true, ...config } = options;
+  const { inject = true, watch = ['src/shop.config.js', 'src/shop.config.mjs', 'src/shop.config.ts'], ...config } = options;
   return {
     name: '@occluze/tether',
     hooks: {
-      'astro:config:setup': async ({ injectScript, command, config: astroConfig, logger }) => {
+      'astro:config:setup': async ({ injectScript, command, config: astroConfig, logger, addWatchFile, updateConfig }) => {
         const root = astroConfig?.root ? decodeURIComponent(new URL(astroConfig.root).pathname) : process.cwd();
+        // The options usually come from a file the Astro config imports (src/shop.config.js):
+        // the dev server restarts when it changes, so the browser gets the new config too.
+        if (command === 'dev' && addWatchFile) {
+          const { existsSync } = await import('node:fs');
+          const { resolve } = await import('node:path');
+          [].concat(watch || []).map((f) => resolve(root, f)).filter((f) => existsSync(f)).forEach((f) => addWatchFile(f));
+        }
+        // Astro 5+: declare the store variables, so Astro checks them (astro:env).
+        if (updateConfig) {
+          try {
+            const { envField } = await import('astro/config');
+            if (envField) {
+              const field = () => envField.string({ context: 'client', access: 'public', optional: true });
+              updateConfig({ env: { schema: { PUBLIC_SHOPIFY_DOMAIN: field(), PUBLIC_SHOPIFY_STOREFRONT_TOKEN: field() } } });
+            }
+          } catch { /* Astro 4: no astro:env */ }
+        }
         const env = await readEnv(command, root);
         for (const [key, names] of Object.entries(ENV_KEYS)) {
           if (!config[key]) config[key] = names.map((n) => env[n]).find(Boolean);

package/src/cart.js

@@ -217,8 +217,21 @@ export const Cart = {
     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' }); }
+    const latest = () => this.pendingQty.get(lineId) === job;
+    return this._queue(async () => {
+      // Quick clicks: only the latest target goes to Shopify; the ones it replaced are skipped.
+      if (!latest()) return this.state;
+      const now = this.lines.find((l) => l.id === lineId);
+      if (now && now.quantity === target) return this.state; // e.g. + then -: nothing to change
+      const cart = target > 0
+        ? await this._mutate('cartLinesUpdate', '$lines: [CartLineUpdateInput!]!', 'lines: $lines', { lines: [{ id: lineId, quantity: target }] })
+        : await this._mutate('cartLinesRemove', '$lineIds: [ID!]!', 'lineIds: $lineIds', { lineIds: [lineId] });
+      // A newer click is on its way: keep this answer, but show totals and count only once that
+      // one is in (no stepping through every reply).
+      if (!latest()) { this.state = cart; if (cart?.id) this._setId(cart.id); return cart; }
+      return this._commit(cart, target > 0 ? 'update' : 'remove');
+    }).finally(() => {
+      if (latest()) { this.pendingQty.delete(lineId); this.render(); emit('cart-updated', { cart: this.state, reason: 'settled' }); }
     });
   },
 

package/src/client.js

@@ -39,6 +39,14 @@ export function withContext(query, ctx = cfg) {
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
+/** What a status means, for errors Shopify sends without a message (401/403 have none). */
+function statusText(status, conf) {
+  if (status === 401 || status === 403) {
+    return `Shopify rejected the Storefront token for ${conf.domain} (${status}): use the public Storefront API token (Headless channel)${/^shpat_/.test(conf.token) ? ', not an Admin API token (shpat_…)' : ''}`;
+  }
+  return status === 404 ? `Store or API version not found (404): check domain ${conf.domain} and apiVersion ${conf.apiVersion}` : `HTTP ${status} from ${conf.domain}`;
+}
+
 /**
  * One Storefront API request with retries, for any config object (the browser's shared config,
  * or the server module's own). gql() below is the browser version.
@@ -83,7 +91,7 @@ export async function request(conf, query, variables = {}, { context = true } =
 
     let json;
     try { json = await res.json(); } catch {
-      throw new TetherError(`Invalid response (${res.status})`, { status: res.status });
+      throw new TetherError(res.ok ? `Invalid response (${res.status})` : statusText(res.status, conf), { status: res.status });
     }
 
     if (json.errors?.length) {
@@ -99,11 +107,12 @@ export async function request(conf, query, variables = {}, { context = true } =
       }
       const throttled = json.errors.some((e) => e.extensions?.code === 'THROTTLED');
       if (throttled && attempt++ < conf.retries) { await sleep(500 * 2 ** attempt); continue; }
-      throw new TetherError(json.errors.map((e) => e.message).join(' | '), {
+      const message = json.errors.map((e) => e.message).filter(Boolean).join(' | ');
+      throw new TetherError(res.ok ? message || 'Storefront API error' : (res.status === 401 || res.status === 403 || !message ? statusText(res.status, conf) : message), {
         status: res.status, errors: json.errors,
       });
     }
-    if (!res.ok) throw new TetherError(`HTTP ${res.status}`, { status: res.status });
+    if (!res.ok) throw new TetherError(statusText(res.status, conf), { status: res.status });
 
     return json.data;
   }

package/src/collection.js

@@ -38,7 +38,11 @@ export class ListScope {
       reverse: get(r, 'reverse') === 'true',
     };
     if (has(r, 'collection')) opts.collection = get(r, 'collection');
-    else opts.query = get(r, 'products') || '';
+    else {
+      // url:q = the search in the page's ?q= (a results page on a static site).
+      const raw = get(r, 'products') || '';
+      opts.query = raw.startsWith('url:') ? new URL(window.location.href).searchParams.get(raw.slice(4)) || '' : raw;
+    }
     return opts;
   }
 

package/src/config.js

@@ -78,7 +78,7 @@ export function log(...a) { if (cfg.debug) console.log(`[${cfg.prefix}]`, ...a);
 export function warn(...a) { console.warn(`[${cfg.prefix}]`, ...a); }
 
 export function reportError(err, context) {
-  warn(context, err && err.message ? err.message : err);
+  warn(context, err && (err.message || err.code) ? err.message || err.code : err);
   if (typeof cfg.onError === 'function') {
     try { cfg.onError(err, context); } catch { /* never let a hook break us */ }
   }

package/src/diagnose.js

@@ -16,6 +16,51 @@ import { detectMarket } from './markets.js';
 
 export { apiVersionStatus };
 
+// Everything Tether reads, to tell valid markup from typos.
+const SHOW = new Set([
+  'in-stock', 'out-of-stock', 'backorder', 'low-stock', 'plenty-in-stock', 'on-sale', 'not-on-sale', 'has-variants', 'single-variant',
+  'subscription-available', 'subscription-unavailable', 'subscription-only', 'one-time-available',
+  'subscription-selected', 'one-time-selected', 'has-savings', 'loading', 'ready', 'error', 'not-found',
+  'cart-empty', 'cart-filled', 'cart-has-subscription', 'cart-no-subscription', 'cart-has-discount', 'cart-error', 'cart-warning',
+  'list-empty', 'list-filled', 'search-empty', 'search-results', 'logged-in', 'logged-out', 'orders-empty', 'orders-loading',
+]);
+const BIND = new Set([
+  'title', 'description', 'description-text', 'vendor', 'type', 'handle', 'published-at', 'price', 'total-price',
+  'compare-at-price', 'unit-price', 'min-price', 'max-price', 'discount-percentage', 'discount-amount', 'variant-title',
+  'variant-id', 'sku', 'barcode', 'stock', 'quantity', 'featured-image', 'variant-image', 'images', 'tags', 'link', 'url',
+  'one-time-price', 'subscription-price', 'subscription-savings', 'subscription-savings-amount', 'checkout-charge',
+  'plan-name', 'plan-description', 'plan-group', 'option-value', 'swatch', 'image',
+]);
+const ATTRS = new Set(`account account-bind account-link account-login account-logout add-label add-to-cart adding-text
+  always-enabled bind cart-checkout-charge cart-clear cart-close cart-count cart-discounts cart-drawer cart-label cart-lines
+  cart-note cart-open cart-subtotal cart-total cart-warning checkout code collection collection-bind countries country
+  country-bind country-label country-select default-plan default-purchase discount discount-code discount-form discount-input
+  discount-remove display error group group-add hide-single language limit line line-attribute line-attributes line-id
+  line-minus line-plan line-plus line-remove line-show list load-more market-pending one-time-label option option-list
+  option-selected option-value order-bind order-line order-lines orders page-country page-language page-locale page-title plan plan-bind plan-list
+  plan-value product products purchase purchase-mode qty qty-minus qty-plus quantity recommendations reverse search
+  search-bind search-collections search-input search-limit search-min search-products search-queries search-results
+  search-state show soldout-text sort state subscribe-text variant variant-select variant-url max-width max-height crop
+  sig label hydrated busy`.split(/\s+/).filter(Boolean));
+
+/** Levenshtein distance, for "did you mean". */
+function distance(a, b) {
+  const d = Array.from({ length: a.length + 1 }, (_, i) => [i, ...Array(b.length).fill(0)]);
+  for (let j = 1; j <= b.length; j++) d[0][j] = j;
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+  }
+  return d[a.length][b.length];
+}
+export function didYouMean(value, options, prefix = '') {
+  let best = null; let score = Infinity;
+  for (const o of options) {
+    const n = distance(String(value), o);
+    if (n < score) { score = n; best = o; }
+  }
+  return best && score <= Math.max(2, Math.floor(String(value).length / 4)) ? ` Did you mean "${prefix}${best}"?` : '';
+}
+
 const mask = (t) => (t ? `${String(t).slice(0, 4)}…${String(t).slice(-4)} (${String(t).length} chars)` : '(missing)');
 
 function describe(el) {
@@ -51,27 +96,38 @@ export function checkMarkup(root = document) {
     if (!el.closest(sel('group'))) add('warn', `${attr('group-add')} outside a ${attr('group')}.`, el);
   });
 
-  [...qsa(root, sel('option-list')), ...qsa(root, sel('plan-list')), ...qsa(root, sel('cart-lines')), ...qsa(root, sel('list'))]
-    .forEach((el) => {
-      if (!el.firstElementChild && !hasTemplate(el)) {
-        add('warn', 'Repeater without a template child: put one example element inside it.', el);
-      }
-    });
+  ['option-list', 'plan-list', 'cart-lines', 'list'].forEach((name) => qsa(root, sel(name)).forEach((el) => {
+    if (!el.firstElementChild && !hasTemplate(el)) {
+      add('warn', `${attr(name)} without a template child: put one example element inside it.`, el);
+    }
+  }));
 
   qsa(root, listSel).forEach((el) => {
     if (!qsa(el, sel('list')).length) add('error', `List without a ${attr('list')} child: products have nowhere to render.`, el);
   });
 
-  const known = new Set([
-    'in-stock', 'out-of-stock', 'backorder', 'low-stock', 'plenty-in-stock', 'on-sale', 'not-on-sale', 'has-variants', 'single-variant',
-    'subscription-available', 'subscription-unavailable', 'subscription-only', 'one-time-available',
-    'subscription-selected', 'one-time-selected', 'has-savings', 'loading', 'ready', 'error', 'not-found',
-    'cart-empty', 'cart-filled', 'cart-has-subscription', 'cart-no-subscription', 'cart-has-discount', 'cart-error', 'cart-warning',
-    'list-empty', 'list-filled',
-  ]);
   qsa(root, sel('show')).forEach((el) => {
     const k = get(el, 'show');
-    if (!known.has(k)) add('warn', `Unknown ${attr('show')}="${k}".`, el);
+    if (!SHOW.has(k)) add('warn', `Unknown ${attr('show')}="${k}".${didYouMean(k, SHOW)}`, el);
+  });
+
+  qsa(root, sel('bind')).forEach((el) => {
+    const k = get(el, 'bind') || '';
+    if (!k || BIND.has(k) || /^image:\d+$/.test(k) || k.startsWith('metafield:')) return;
+    add('warn', `Unknown ${attr('bind')}="${k}": it stays empty.${didYouMean(k, BIND)}`, el);
+  });
+
+  // Typos in attribute names (tether-bnd, tether-add-to-card) do nothing, silently.
+  const prefix = `${cfg.prefix}-`;
+  const seen = new Set();
+  qsa(root, '*').forEach((el) => {
+    for (const a of el.attributes) {
+      if (!a.name.startsWith(prefix)) continue;
+      const name = a.name.slice(prefix.length);
+      if (ATTRS.has(name) || seen.has(name)) continue;
+      seen.add(name);
+      add('warn', `Unknown attribute ${a.name}: Tether ignores it.${didYouMean(name, ATTRS, prefix)}`, el);
+    }
   });
 
   qsa(root, sel('bind')).forEach((el) => {
@@ -126,10 +182,7 @@ export async function diagnose({ root = document, silent = false, version, now =
       report.reachable = true;
       report.shop = { name: data.shop?.name, url: data.shop?.primaryDomain?.url, currency: data.shop?.paymentSettings?.currencyCode };
     } catch (err) {
-      const hint = err.status === 401 || err.status === 403
-        ? 'Token rejected: use the public Storefront token from the Headless channel, not an Admin token.'
-        : err.status === 404 ? 'Store or API version not found: check domain (x.myshopify.com) and apiVersion.' : '';
-      report.problems.push({ level: 'error', message: `Storefront API not reachable: ${err.message}${hint ? `. ${hint}` : ''}` });
+      report.problems.push({ level: 'error', message: `Storefront API not reachable: ${err.message || err.code || 'unknown error'}` });
     }
     report.latencyMs = Date.now() - t0;
 
@@ -146,13 +199,19 @@ export async function diagnose({ root = document, silent = false, version, now =
           qsa(root, sel('product')).filter((el) => resolveProductKey(el).key === keys[i] && el.querySelector(sel('add-to-cart'))).forEach((el) => {
             const shown = new Set(qsa(el, `${sel('option-list')},select${sel('option')}`).map((x) => get(x, 'option-list') || get(x, 'option')));
             if (!shown.size && qsa(el, `select${sel('variant-select')}`).length) return;
+            const names = (p.options || []).map((o) => o.name);
+            if (!cfg.language) {
+              [...shown].filter((n) => n && !names.includes(n)).forEach((n) => {
+                report.problems.push({ level: 'warn', message: `Product "${p.handle}" has no option "${n}" (its options: ${names.join(', ') || 'none'}).${didYouMean(n, names)}` });
+              });
+            }
             (p.options || []).filter((o) => o.optionValues.length > 1 && !shown.has(o.name)).forEach((o) => {
               report.problems.push({ level: 'warn', message: `Product "${p.handle}": option "${o.name}" (${o.optionValues.length} values) has no tether-option-list, so visitors can't choose it.` });
             });
           });
         } else {
           report.products.push({ key: keys[i], error: r.reason?.message });
-          report.problems.push({ level: 'error', message: `Product "${keys[i]}": ${r.reason?.message}. Is it published to the Headless channel?` });
+          report.problems.push({ level: 'error', message: `Product "${keys[i]}": ${r.reason?.message || r.reason?.code || 'not loaded'}. Is it published to the Headless channel?` });
         }
       });
     }
@@ -173,7 +232,7 @@ function print(r) {
   c.group?.(`[${cfg.prefix}] diagnose: ${errors ? `${errors} error(s)` : 'no errors'}, ${r.problems.length - errors} warning(s)`);
   c.log('version', r.version, '| API', r.apiVersion.version, `(${r.apiVersion.note})`);
   c.log('config', r.config);
-  if (r.market) c.log('market detected', r.market, '(in use:', r.config.country, r.config.language, ')');
+  if (r.market) c.log('market', `in use: ${[r.market.country, r.market.language].filter(Boolean).join(' / ') || 'the store default'}`, r.market.detected ? `(detection picks ${JSON.stringify(r.market.detected)})` : '');
   c.log(r.reachable ? `Storefront API reachable: ${r.shop?.name} (${r.latencyMs} ms)` : 'Storefront API NOT reachable');
   if (r.products.length) (c.table || c.log)(r.products);
   if (r.sellingPlans.length) (c.table || c.log)(r.sellingPlans);

package/src/dom.js

@@ -76,7 +76,8 @@ export function imageUrl(url, { width, height, crop } = {}) {
 
 export function cdnUrl(url, el) {
   if (!url || !el) return url;
-  const g = (k) => el.getAttribute(k);
+  // max-width (Webflow's custom attribute), or valid HTML: tether-max-width / data-max-width.
+  const g = (k) => el.getAttribute(k) ?? el.getAttribute(`${cfg.prefix}-${k}`) ?? el.getAttribute(`data-${k}`);
   return imageUrl(url, { width: g('max-width'), height: g('max-height'), crop: g('max-width') || g('max-height') ? g('crop') : null });
 }
 

package/src/index.js

@@ -21,7 +21,7 @@ import { attr, sel, get, qsa, emit, formatMoney, busy, parseJSONAttr, toAttribut
 import { loadPart, coreModules } from './lazy.js';
 import { mountedLists, liveLists, pruneLive, within, mountProduct, retryFailed, hydrateFromPage, settleMarket, trackMarket } from './mounting.js';
 
-export const VERSION = '0.6.0';
+export const VERSION = '0.6.2';
 
 let initPromise = null;
 let observer = null;

package/src/server.js

@@ -156,12 +156,13 @@ ${fragment()}`, byId ? { id: key, intent } : { handle: key, intent });
    */
   /**
    * { card: true } for lists (home, collections, recommendations): about 40% smaller, without
-   * descriptions, extra images and variant images (cards show the main image). Price, stock and
-   * plans per variant stay. The full product comes with the background refresh.
+   * descriptions, variant images and images after the first two (a hover image, tether-bind="image:2";
+   * more with { card: true, images: 3 }). Price, stock and plans per variant stay. The full
+   * product comes with the background refresh.
    */
-  function hydrate(products, { card = false } = {}) {
+  function hydrate(products, { card = false, images = 2 } = {}) {
     let list = (Array.isArray(products) ? products : [products]).filter(Boolean);
-    if (card) list = list.map(slim);
+    if (card) list = list.map((p) => slim(p, images));
     const payload = { v: 1, at: new Date().toISOString(), country: conf.country || null, language: conf.language || null, products: list };
     return `<script type="application/json" data-tether-hydrate>${safeJson(payload)}</script>`;
   }
@@ -220,11 +221,11 @@ ${fragment()}`, byId ? { id: key, intent } : { handle: key, intent });
   }
   const jsonLd = (p, opts) => (p ? `<script type="application/ld+json">${safeJson(jsonLdData(p, opts))}</script>` : '');
 
-  function slim(p) {
+  function slim(p, keep = 2) {
     return {
       ...p,
       description: '', descriptionHtml: '',
-      images: { nodes: (p.images?.nodes || []).slice(0, 1) },
+      images: { nodes: (p.images?.nodes || []).slice(0, Math.max(1, keep)) },
       variants: { nodes: (p.variants?.nodes || []).map((v) => ({ ...v, image: null })) },
     };
   }

package/types/astro.d.ts

@@ -5,6 +5,8 @@ type Serializable<T> = { [K in keyof T as T[K] extends ((...args: any[]) => any)
 export interface TetherAstroOptions extends Partial<Serializable<TetherConfig>> {
   /** Add the Tether script to every page (default true). False: import and init it yourself. */
   inject?: boolean;
+  /** Files that restart the dev server when they change (default: src/shop.config.js/.mjs/.ts). */
+  watch?: string[];
 }
 
 /**

package/types/server.d.ts

@@ -15,7 +15,8 @@ export interface StorefrontOptions extends Partial<Pick<TetherConfig,
   fetch?: typeof fetch;
   PUBLIC_SHOPIFY_DOMAIN?: string;
   PUBLIC_SHOPIFY_STOREFRONT_TOKEN?: string;
-  [env: string]: unknown;
+  /** Astro's import.meta.env carries these too; ignored. */
+  MODE?: string; BASE_URL?: string; PROD?: boolean; DEV?: boolean; SSR?: boolean; SITE?: string; ASSETS_PREFIX?: string;
 }
 
 export interface ShopifyCollection {
@@ -26,7 +27,8 @@ export interface ShopifyCollection {
 
 export interface ProductQuery {
   collection?: string;
-  query?: string;
+  /** A Shopify search query; null or '' = every product (e.g. searchParams.get('q')). */
+  query?: string | null;
   first?: number;
   after?: string | null;
   sortKey?: string;
@@ -38,7 +40,7 @@ export interface Storefront {
   readonly config: Required<Pick<StorefrontOptions, 'domain' | 'token'>> & StorefrontOptions;
   query<T = any>(query: string, variables?: Record<string, unknown>, opts?: { context?: boolean }): Promise<T>;
   /** By handle, numeric id, gid or product URL. null when it doesn't exist. */
-  getProduct(handleOrId: string | number): Promise<ShopifyProduct | null>;
+  getProduct(handleOrId: string | number | null | undefined): Promise<ShopifyProduct | null>;
   getProducts(opts?: ProductQuery): Promise<{ collection: ShopifyCollection | null; products: ShopifyProduct[]; pageInfo: { hasNextPage: boolean; endCursor: string | null } }>;
   /** Every product (of a collection or a search query), page by page. For getStaticPaths(). */
   allProducts(opts?: Omit<ProductQuery, 'first' | 'after'>): Promise<ShopifyProduct[]>;
@@ -51,8 +53,12 @@ export interface Storefront {
    * products without its own request, then refreshes prices and stock once in the background.
    * Astro: <Fragment set:html={shop.hydrate(product)} />
    */
-  /** { card: true } for lists: much smaller (no descriptions, one image), the rest comes with the refresh. */
-  hydrate(products: ShopifyProduct | ShopifyProduct[], opts?: { card?: boolean }): string;
+  hydrate(products: ShopifyProduct | ShopifyProduct[], opts?: {
+    /** For lists: without descriptions and variant images, about 40% smaller. */
+    card?: boolean;
+    /** Images a card keeps (default 2: the main one and a hover image). */
+    images?: number;
+  }): string;
   formatMoney(money: Money | null | undefined, locale?: string): string;
   /** 30 -> '30%' (nl, en) / '30 %' (de, fr), the way Tether shows savings. '' for 0. */
   formatPercent(n: number, locale?: string): string;
@@ -63,7 +69,8 @@ export interface Storefront {
    * What Tether shows first for this product (variant, price, purchase mode, tether-show conditions),
    * so the server renders the same and nothing flashes. Pass Astro.url.searchParams.get('variant') in SSR.
    */
-  initialState(product: ShopifyProduct, opts?: InitialOptions): InitialState | null;
+  initialState(product: ShopifyProduct, opts?: InitialOptions): InitialState;
+  initialState(product: ShopifyProduct | null | undefined, opts?: InitialOptions): InitialState | null;
   /** schema.org Product / ProductGroup data for search engines, as a <script type="application/ld+json"> tag. */
   jsonLd(product: ShopifyProduct | null, opts?: { url?: string; brand?: string }): string;
   jsonLdData(product: ShopifyProduct | null, opts?: { url?: string; brand?: string }): Record<string, unknown> | null;
@@ -84,12 +91,13 @@ export interface InitialState {
   compareAtPrice: Money | null;
   available: boolean;
   /** tether-show conditions: hidden={!state.show['out-of-stock']}. */
-  show: Record<'in-stock' | 'out-of-stock' | 'backorder' | 'on-sale' | 'not-on-sale' | 'has-variants' | 'single-variant' | 'low-stock' | 'subscription-available' | 'subscription-unavailable' | 'subscription-only' | 'one-time-available' | 'subscription-selected' | 'one-time-selected', boolean>;
+  show: Record<'in-stock' | 'out-of-stock' | 'backorder' | 'on-sale' | 'not-on-sale' | 'has-variants' | 'single-variant' | 'low-stock' | 'subscription-available' | 'subscription-unavailable' | 'subscription-only' | 'one-time-available' | 'subscription-selected' | 'one-time-selected' | 'plenty-in-stock' | 'has-savings', boolean>;
   /** true for option values without an available variant: class is-unavailable. */
   isUnavailable(optionName: string, value: string): boolean;
 }
 export interface InitialOptions { variant?: string | null; sellingPlan?: string | null; defaultPurchase?: 'one-time' | 'subscription' }
-export declare function initialState(product: ShopifyProduct, opts?: InitialOptions): InitialState | null;
+export declare function initialState(product: ShopifyProduct, opts?: InitialOptions): InitialState;
+export declare function initialState(product: ShopifyProduct | null | undefined, opts?: InitialOptions): InitialState | null;
 
 export interface ImageSize { width?: number; height?: number; crop?: 'center' | 'top' | 'bottom' | 'left' | 'right' }
 export declare function imageUrl(url: string | null | undefined, size?: ImageSize): string;

package/dist/esm/chunks/account-WAWNASZU.js

@@ -1 +0,0 @@
-import{b as u}from"./chunk-BGIKQY6H.js";import"./chunk-ZVUPVSLF.js";import"./chunk-YXCXIPQV.js";import{B as x,D as O,G as F,b as a,e as G,g,h as w,o as p,p as y,s as _,u as S,w as z}from"./chunk-KARKXC6G.js";import"./chunk-VC46IEJQ.js";var b=()=>`${a.prefix}:account:${a.domain}`,L=()=>`${a.prefix}:account-login:${a.domain}`,C=()=>a.account?.remember?window.localStorage:window.sessionStorage,M=t=>btoa(String.fromCharCode(...new Uint8Array(t))).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""),v=()=>M(crypto.getRandomValues(new Uint8Array(32))),Q=async t=>M(await crypto.subtle.digest("SHA-256",new TextEncoder().encode(t))),A=t=>(a.account?.navigate||(e=>window.location.assign(e)))(t),B=(t,e)=>{try{return JSON.parse(t.getItem(e)||"null")}catch{return null}},P=(t,e,n)=>{try{n?t.setItem(e,JSON.stringify(n)):t.removeItem(e)}catch{}},E=null,s=null,D=null,I=null,d=()=>a.account?.server?String(a.account.server).replace(/\/$/,""):"",q=()=>`${a.prefix}:account-hint:${a.domain}`,T=null;async function U(t,{method:e="GET",body:n}={}){let r=await fetch(`${d()}${t}`,{method:e,credentials:"include",headers:e==="POST"?{"Content-Type":"application/json","X-Tether-Account":"1"}:{},body:n?JSON.stringify(n):void 0}),c=await r.json().catch(()=>({}));if(!r.ok&&r.status!==401)throw new w(`Customer accounts: ${c.error||r.status}`,{status:r.status});return c}async function J(){T||(T=await U("/me"));try{T.loggedIn?window.localStorage.setItem(q(),"1"):window.localStorage.removeItem(q())}catch{}return T}async function $(){if(E)return E;let t=a.account?.shopDomain||a.domain,e=c=>fetch(`https://${t}/.well-known/${c}`).then(o=>{if(!o.ok)throw new w(`Customer accounts: ${c} answered ${o.status}`,{status:o.status});return o.json()}),[n,r]=await Promise.all([e("openid-configuration"),e("customer-account-api")]);return E={...n,graphql:r.graphql_api},E}var Z=()=>a.account?.callbackUrl||`${window.location.origin}${window.location.pathname}`;function H(){return d()?!!T?.loggedIn:!!(s?.refresh||s?.access&&s.expiresAt>Date.now())}async function tt({returnTo:t=window.location.href,locale:e}={}){if(d()){let f=new URL(`${d()}/login`);f.searchParams.set("returnTo",t),u.id()&&f.searchParams.set("cart",u.id());let m=e||a.account.locale||(a.locale||"").split("-")[0];m&&f.searchParams.set("locale",m),a.country&&f.searchParams.set("country",String(a.country).toUpperCase()),A(f.toString());return}if(!a.account?.clientId)throw new w("Customer accounts: set account.clientId",{code:"NOT_CONFIGURED"});let n=await $(),r=v(),c=v(),o=v(),l=Z();P(window.sessionStorage,L(),{state:r,nonce:c,verifier:o,redirect:l,returnTo:t,at:Date.now()});let i=new URL(n.authorization_endpoint),h={client_id:a.account.clientId,scope:"openid email customer-account-api:full",response_type:"code",redirect_uri:l,state:r,nonce:c,code_challenge:await Q(o),code_challenge_method:"S256"},k=e||a.account.locale||(a.locale||"").split("-")[0];k&&(h.locale=k),a.country&&(h.region_country=String(a.country).toUpperCase()),Object.entries(h).forEach(([f,m])=>i.searchParams.set(f,m)),A(i.toString())}async function V(t){let e=await $(),n=await fetch(a.account.tokenUrl||e.token_endpoint,{method:"POST",body:new URLSearchParams(t)}),r=await n.json().catch(()=>({}));if(!n.ok||!r.access_token)throw new w(`Customer accounts: token ${n.status} ${r.error||""}`.trim(),{status:n.status,code:n.status===400||n.status===401?"SESSION_ENDED":"TOKEN_FAILED"});return r}function et(t){try{return JSON.parse(atob(t.split(".")[1].replace(/-/g,"+").replace(/_/g,"/")))}catch{return null}}function W(t,e=s){s={access:t.access_token,expiresAt:Date.now()+Math.max(0,(Number(t.expires_in)||3600)-120)*1e3,refresh:t.refresh_token||e?.refresh,idToken:t.id_token||e?.idToken},P(C(),b(),s)}async function nt(){let t=new URLSearchParams(window.location.search),e=B(window.sessionStorage,L());if(!e||!t.has("code")&&!t.has("error")||t.get("state")!==e.state)return!1;P(window.sessionStorage,L(),null);let n=new URL(window.location.href);if(["code","state","iss","error","error_description"].forEach(h=>n.searchParams.delete(h)),window.history.replaceState(window.history.state,"",n),t.has("error"))return S("account-error",{error:t.get("error")}),!1;if(Date.now()-e.at>10*6e4)throw new w("Customer accounts: the login took too long, please try again");let r=await V({grant_type:"authorization_code",client_id:a.account.clientId,redirect_uri:e.redirect,code:t.get("code"),code_verifier:e.verifier}),c=await $(),o=et(r.id_token||""),l=[].concat(o?.aud||[]);if(!o||o.nonce!==e.nonce||o.iss!==c.issuer||!l.includes(a.account.clientId)||o.exp*1e3<Date.now())throw new w("Customer accounts: the login answer did not check out (nonce/issuer/audience)");W(r,null),await X(),S("account-login",{});let i=e.returnTo&&new URL(e.returnTo,window.location.href);return i&&i.origin===window.location.origin&&i.href!==n.href&&A(i.href),!0}async function N(){return d()||(s||(s=B(C(),b())),!s)?null:s.access&&s.expiresAt>Date.now()?s.access:s.refresh?(D||(D=(async()=>{try{W(await V({grant_type:"refresh_token",client_id:a.account.clientId,refresh_token:s.refresh})),await X()}catch(t){if(t.code==="SESSION_ENDED")R();else throw t}finally{D=null}})()),await D,s?.access||null):(R(),null)}function R(){s=null,I=null,P(C(),b(),null),u.customerAccessToken=null}async function X(){u.customerAccessToken=s?.access||null,u.id()&&s?.access&&await u.setBuyerIdentity({customerAccessToken:s.access},{create:!1}).catch(t=>g(t,"account cart"))}async function Y(t,e={}){if(d())throw new w("Customer accounts in server mode only answer customer() and orders()",{code:"NOT_ALLOWED"});let n=await N();if(!n)throw new w("Not logged in",{code:"NOT_LOGGED_IN"});let r=await $(),c=i=>fetch(r.graphql,{method:"POST",headers:{"Content-Type":"application/json",Authorization:i},body:JSON.stringify({query:t,variables:e})}),o=await c(n);o.status===401&&s?.refresh&&(s.expiresAt=0,o=await c(await N()));let l=await o.json().catch(()=>({}));if(!o.ok||l.errors?.length)throw new w(l.errors?.map(i=>i.message).join(" | ")||`Customer accounts: ${o.status}`,{status:o.status});return l.data}async function ot(){if(d()){let e=await J();return e.loggedIn?{...e.customer,emailAddress:{emailAddress:e.customer.email},defaultAddress:{formatted:e.customer.address}}:null}return I||(I=(await Y("query TetherCustomer{customer{id firstName lastName displayName emailAddress{emailAddress}defaultAddress{formatted}}}")).customer,I)}async function rt({first:t=10}={}){return d()?(await U(`/orders?first=${t}`)).orders||[]:(await Y("query TetherOrders($first:Int!){customer{orders(first:$first,sortKey:PROCESSED_AT,reverse:true){nodes{id name processedAt financialStatus fulfillmentStatus statusPageUrl totalPrice{amount currencyCode}lineItems(first:20){nodes{title variantTitle quantity image{url altText}}}}}}}",{first:t})).customer?.orders?.nodes||[]}async function at({returnTo:t=a.account?.logoutUrl||`${window.location.origin}/`}={}){if(d()){let c=await U("/logout",{method:"POST",body:{returnTo:t,cartId:u.id()}});T={loggedIn:!1};try{window.localStorage.removeItem(q())}catch{}S("account-logout",{}),c.logoutUrl?A(c.logoutUrl):j(document);return}let e=s?.idToken||B(C(),b())?.idToken;if(u.id()&&await u.setBuyerIdentity({customerAccessToken:null},{create:!1}).catch(()=>{}),R(),S("account-logout",{}),!e){j(document);return}let n=await $(),r=new URL(n.end_session_endpoint);r.searchParams.set("id_token_hint",e),r.searchParams.set("post_logout_redirect_uri",t),A(r.toString())}var ct=t=>{try{return new Date(t).toLocaleDateString(a.locale||void 0)}catch{return t}};async function j(t=document){let e=d()?!!(await J().catch(()=>({loggedIn:!1}))).loggedIn:H()||!!await N().catch(()=>null);if(_(t,p("show")).forEach(c=>{let o=y(c,"show");o==="logged-in"&&O(c,e),o==="logged-out"&&O(c,!e)}),!e)return;let n=_(t,p("account-bind"));if(n.length){let c=await ot().catch(o=>(g(o,"account"),null));n.forEach(o=>{let l={"first-name":c?.firstName,"last-name":c?.lastName,name:c?.displayName,email:c?.emailAddress?.emailAddress,address:c?.defaultAddress?.formatted?.join(", ")}[y(o,"account-bind")];l!=null&&x(o,l)})}let r=_(t,p("orders"));if(r.length){let c=await rt({first:parseInt(y(r[0],"limit")||"10",10)}).catch(o=>(g(o,"orders"),[]));r.forEach(o=>F(o,c,(l,i)=>{_(l,p("order-bind")).forEach(h=>{let k=y(h,"order-bind");if(k==="url"){h.setAttribute("href",i.statusPageUrl);return}let f={name:i.name,date:ct(i.processedAt),total:z(i.totalPrice),status:i.financialStatus?.toLowerCase(),fulfillment:i.fulfillmentStatus?.toLowerCase(),items:i.lineItems.nodes.map(m=>`${m.quantity}\xD7 ${m.title}`).join(", ")}[k];f!=null&&x(h,f)}),y(l,"order-bind")==="url"&&l.setAttribute("href",i.statusPageUrl)}))}}var K=!1;async function dt(t=document){if(!K){if(K=!0,document.addEventListener("click",e=>{let n=e.target;n.closest?.(p("account-login"))?(e.preventDefault(),tt().catch(r=>g(r,"login"))):n.closest?.(p("account-logout"))&&(e.preventDefault(),at().catch(r=>g(r,"logout")))}),d()){let e=new URL(window.location.href);e.searchParams.get("account")&&(e.searchParams.delete("account"),window.history.replaceState(window.history.state,"",e),S("account-login",{})),u.beforeCheckout=async()=>{if(!(await J()).loggedIn||!u.id())return null;let n=await U("/cart",{method:"POST",body:{cartId:u.id()}}).catch(()=>null);return n?.checkoutUrl?`${n.checkoutUrl}${n.checkoutUrl.includes("?")?"&":"?"}logged_in=true`:null}}else{try{await nt()}catch(e){g(e,"login")}!u.customerAccessToken&&await N().catch(()=>null)&&(u.customerAccessToken=s.access)}G("account",H()?"logged in":"logged out")}await j(t)}export{ot as customer,N as getToken,nt as handleCallback,H as isLoggedIn,tt as login,at as logout,dt as mountAccount,rt as orders,Y as query,j as render};

package/dist/esm/chunks/chunk-BGIKQY6H.js

@@ -1 +0,0 @@
-import{c as U}from"./chunk-ZVUPVSLF.js";import{b as S,d as $,e as B}from"./chunk-YXCXIPQV.js";import{A as M,B as j,C as m,D as L,G as K,H as N,I as R,M as q,b as o,e as O,g as I,h as _,l as A,m as Q,n as E,o as u,p as g,r as F,s as l,u as h,w as b}from"./chunk-KARKXC6G.js";function G(t,e=1,n={}){let a=typeof t=="object"&&t!==null?t:{variantId:t,quantity:e,...n},r=$.variant(a.merchandiseId||a.variantId||a.id);if(!r)throw new _("add(): variantId is required");let s={merchandiseId:r,quantity:Math.max(1,parseInt(a.quantity??1,10)||1)},c=a.sellingPlanId||a.sellingPlan;c&&(s.sellingPlanId=$.sellingPlan(c));let i=q(a.attributes);return i.length&&(s.attributes=i),s}function V(t,e,n){return`mutation Tether_${t}(${e}){${t}(${n}){cart{...TetherCart}userErrors{field message}warnings{code message target}}}${S()}`}var H='a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])',k=null,W=t=>l(t,H).filter(e=>e.offsetParent!==null||e===document.activeElement);function x(t){l(document,u("cart-open")).forEach(e=>e.setAttribute("aria-expanded",String(t))),l(document,u("cart-drawer")).forEach(e=>{e.hasAttribute("role")||e.setAttribute("role","dialog"),!e.hasAttribute("aria-label")&&!e.hasAttribute("aria-labelledby")&&e.setAttribute("aria-label",g(e,"cart-label")||"Cart"),e.setAttribute("aria-modal",String(t)),e.classList.contains(o.cartDrawerOpenClass)||(e.setAttribute("aria-hidden","true"),o.cartFocus!==!1&&(e.inert=!0))})}var T=t=>/does not exist|not found|invalid id/i.test(t?.message||""),D={state:null,_chain:Promise.resolve(),id(){try{return localStorage.getItem(o.storageKey)}catch{return null}},_setId(t){try{t?localStorage.setItem(o.storageKey,t):localStorage.removeItem(o.storageKey)}catch{}},get lines(){return this.state?.lines?.nodes||[]},get count(){return this.state?.totalQuantity||0},lastError:null,customerAccessToken:null,pendingQty:new Map,warnings:[],loaded:!1,_take(t,e){let n=Q(t,e);return this.warnings=(n.warnings||[]).filter((a,r,s)=>s.findIndex(c=>c.message===a.message)===r).map(a=>({...a,message:typeof o.warningText=="function"&&o.warningText(a)||a.message})),this.warnings.length&&h("cart-warning",{warnings:this.warnings}),n.cart},_queue(t){let e=this._chain.then(t,t).then(n=>(this.lastError&&(this.lastError=null,this.render()),n),n=>{throw this.lastError=n,this.render(),h("cart-error",{error:n}),n});return this._chain=e.catch(()=>{}),e},_commit(t,e){this.state=t,t?.id&&this._setId(t.id);try{localStorage.setItem(`${o.storageKey}:seen`,`${Date.now()}|${t?.totalQuantity||0}`)}catch{}return this.render(),h("cart-updated",{cart:t,reason:e}),t},async init(){let t=this.id();if(!t)return this.state=null,this.loaded=!0,this.render(),h("cart-updated",{cart:null,reason:"load"}),null;if(!this.loaded)try{let e=(localStorage.getItem(`${o.storageKey}:seen`)||"").split("|")[1];e&&l(document,u("cart-count")).forEach(n=>{/^\s*0?\s*$/.test(n.textContent)&&(n.textContent=e)})}catch{}try{let e=await A(`query TetherCart($id:ID!){cart(id:$id){...TetherCart}}${S()}`,{id:t});e.cart?this.state=e.cart:(this._setId(null),this.state=null)}catch(e){I(e,"cart load failed"),this.lastError=e,T(e)&&this._setId(null),this.state=null}return this.loaded=!0,this.render(),h("cart-updated",{cart:this.state,reason:"load"}),this.state},async _create(t={}){let e=o.country||this.customerAccessToken?{...o.country?{countryCode:String(o.country).toUpperCase()}:{},...this.customerAccessToken?{customerAccessToken:this.customerAccessToken}:{}}:void 0,n=await A(V("cartCreate","$input: CartInput!","input: $input"),{input:{buyerIdentity:e,...t}});return this._take(n.cartCreate,"cartCreate")},async _mutate(t,e,n,a,r){let s=this.id();if(!s)return r?this._create(r):null;try{let c=await A(V(t,`$cartId: ID!, ${e}`,`cartId: $cartId, ${n}`),{...a,cartId:s});return this._take(c[t],t)}catch(c){if(r&&T(c))return O("cart expired, creating a new one"),this._setId(null),this._create(r);throw c}},add(t,e=1,n={}){let a=(Array.isArray(t)?t:[t]).map(r=>G(r,e,n));return this._queue(async()=>{let r=await this._mutate("cartLinesAdd","$lines: [CartLineInput!]!","lines: $lines",{lines:a},{lines:a});return this._commit(r,"add"),h("added",{cart:r,lines:a}),o.openCartOnAdd&&this.open(),r})},updateLine(t,e){let n=typeof e=="number"?{quantity:e}:{...e};if(n.quantity!==void 0&&n.quantity<=0)return this.removeLine(t);let a={id:t};return n.quantity!==void 0&&(a.quantity=n.quantity),"sellingPlanId"in n&&(a.sellingPlanId=n.sellingPlanId?$.sellingPlan(n.sellingPlanId):null),n.attributes&&(a.attributes=q(n.attributes)),(n.merchandiseId||n.variantId)&&(a.merchandiseId=$.variant(n.merchandiseId||n.variantId)),this._queue(async()=>this._commit(await this._mutate("cartLinesUpdate","$lines: [CartLineUpdateInput!]!","lines: $lines",{lines:[a]}),"update"))},changeQuantity(t,e){let n=this.lines.find(s=>s.id===t);if(!n)return Promise.resolve(this.state);let a=Math.max(0,(this.pendingQty.get(t)?.qty??n.quantity)+e),r={qty:a,done:!1};return this.pendingQty.set(t,r),this.render(),h("cart-updated",{cart:this.state,reason:"pending"}),this.updateLine(t,a).finally(()=>{this.pendingQty.get(t)===r&&(this.pendingQty.delete(t),this.render(),h("cart-updated",{cart:this.state,reason:"settled"}))})},quantityOf(t){return this.pendingQty.get(t.id)?.qty??t.quantity},removeLine(t){let e=Array.isArray(t)?t:[t];return this._queue(async()=>this._commit(await this._mutate("cartLinesRemove","$lineIds: [ID!]!","lineIds: $lineIds",{lineIds:e}),"remove"))},clear(){let t=this.lines.map(e=>e.id);return t.length?this.removeLine(t):Promise.resolve(this.state)},setNote(t){return this._queue(async()=>this._commit(await this._mutate("cartNoteUpdate","$note: String!","note: $note",{note:t??""},{note:t??""}),"note"))},setAttributes(t){let e=new Map((this.state?.attributes||[]).map(a=>[a.key,a.value]));q(t).forEach(a=>e.set(a.key,a.value));let n=[...e].filter(([,a])=>a!=="").map(([a,r])=>({key:a,value:r}));return this._queue(async()=>this._commit(await this._mutate("cartAttributesUpdate","$attributes: [AttributeInput!]!","attributes: $attributes",{attributes:n},{attributes:n}),"attributes"))},setDiscountCodes(t){let e=(Array.isArray(t)?t:[t]).map(n=>String(n).trim()).filter(Boolean);return this._queue(async()=>this._commit(await this._mutate("cartDiscountCodesUpdate","$discountCodes: [String!]!","discountCodes: $discountCodes",{discountCodes:e},{discountCodes:e}),"discount"))},async applyDiscount(t){let e=(this.state?.discountCodes||[]).map(r=>r.code),n=await this.setDiscountCodes([...new Set([...e,t])]);if((n?.discountCodes||[]).find(r=>r.code.toLowerCase()===String(t).toLowerCase())?.applicable)return n;throw await this.removeDiscount(t).catch(()=>{}),new _(`Discount code not valid: ${t}`,{code:"INVALID_DISCOUNT"})},removeDiscount(t){let e=String(t).toLowerCase();return this.setDiscountCodes((this.state?.discountCodes||[]).map(n=>n.code).filter(n=>n.toLowerCase()!==e))},setBuyerIdentity(t,{create:e=!0}={}){return this._queue(async()=>{let n=await this._mutate("cartBuyerIdentityUpdate","$buyerIdentity: CartBuyerIdentityInput!","buyerIdentity: $buyerIdentity",{buyerIdentity:t},e?{buyerIdentity:t}:null).catch(a=>{if(e||!T(a))throw a;return this._setId(null),null});return this._commit(n,"buyer-identity")})},async checkout(t=o.checkoutTarget){let e=this.id();if(!e||this.state&&!this.count)return null;let n=t==="_blank"?window.open("","_blank"):null;if(n)try{n.opener=null}catch{}try{let a=await A("query TetherCheckout($id: ID!) { cart(id: $id) { checkoutUrl } }",{id:e}),r=this.beforeCheckout&&await this.beforeCheckout().catch(()=>null)||a.cart?.checkoutUrl;if(r&&this.customerAccessToken&&(r+=`${r.includes("?")?"&":"?"}logged_in=true`),!r)throw new _("No checkoutUrl (cart empty or expired)");return h("checkout",{url:r,cart:this.state}),n&&!n.closed?n.location.href=r:window.location.href=r,r}catch(a){return n&&n.close(),I(a,"checkout failed"),null}},drawers(){return l(document,u("cart-drawer"))},_open:!1,isOpen(){let t=this.drawers();return t.length?t.some(e=>e.classList.contains(o.cartDrawerOpenClass)):this._open},open(){if(this.isOpen())return;this._open=!0;let t=this.drawers().filter(e=>g(e,"cart-drawer")!=="manual");t.forEach(e=>{e.inert=!1,e.classList.add(o.cartDrawerOpenClass),e.setAttribute("aria-hidden","false")}),x(!0),o.cartFocus!==!1&&t[0]&&(k=document.activeElement,setTimeout(()=>{let e=W(t[0])[0]||t[0];e===t[0]&&!t[0].hasAttribute("tabindex")&&(t[0].tabIndex=-1),e.focus?.({preventScroll:!0})},60)),typeof o.onCartOpen=="function"&&o.onCartOpen(t),h("cart-toggled",{open:!0})},close(){if(!this.isOpen())return;this._open=!1;let t=this.drawers(),e=t.some(n=>n.contains(document.activeElement));t.forEach(n=>{n.classList.remove(o.cartDrawerOpenClass),n.setAttribute("aria-hidden","true"),o.cartFocus!==!1&&(n.inert=!0)}),x(!1),e&&k?.isConnected&&k.focus({preventScroll:!0}),k=null,typeof o.onCartClose=="function"&&o.onCartClose(t),h("cart-toggled",{open:!1})},toggle(){this.isOpen()?this.close():this.open()},subscribe(t){let e=()=>t(this.state,{open:this.isOpen(),count:this.count,loaded:this.loaded,warnings:this.warnings}),n=()=>e();return["cart-updated","cart-toggled"].forEach(a=>document.addEventListener(`${o.prefix}:${a}`,n)),e(),()=>["cart-updated","cart-toggled"].forEach(a=>document.removeEventListener(`${o.prefix}:${a}`,n))},render(){let t=this.state,e=t?t.totalQuantity:0,n=s=>t?b(t.cost?.[s]):"";x(this.isOpen()),l(document,u("cart-count")).forEach(s=>m(s,e)),l(document,u("cart-subtotal")).forEach(s=>m(s,n("subtotalAmount"))),l(document,u("cart-total")).forEach(s=>m(s,n("totalAmount"))),l(document,u("cart-checkout-charge")).forEach(s=>m(s,n("checkoutChargeAmount")));let a=this.lines.some(s=>s.sellingPlanAllocation),r={"cart-empty":e===0,"cart-filled":e>0,"cart-has-subscription":a,"cart-no-subscription":!a,"cart-has-discount":(t?.discountCodes||[]).some(s=>s.applicable),"cart-error":!!this.lastError,"cart-warning":this.warnings.length>0};l(document,u("cart-warning")).forEach(s=>m(s,[...new Set(this.warnings.map(c=>c.message))].join(" "))),l(document,u("show")).forEach(s=>{let c=g(s,"show");c in r&&!s.closest(u("product"))&&L(s,r[c])}),l(document,u("checkout")).forEach(s=>{s.classList.toggle("is-disabled",!e),s.setAttribute("aria-disabled",String(!e))}),l(document,`textarea${u("cart-note")},input${u("cart-note")}`).forEach(s=>{document.activeElement!==s&&(s.value=t?.note||"")}),l(document,u("cart-discounts")).forEach(s=>{K(s,t?.discountCodes||[],(c,i)=>{c.setAttribute(E("discount-code"),i.code);let d=c.querySelector(u("discount","code"))||(c.firstElementChild?null:c);d&&j(d,i.code),c.classList.toggle("is-inapplicable",!i.applicable)})}),l(document,u("cart-lines")).forEach(s=>{N(s,this.lines,c=>c.id,(c,i)=>J(c,i),{onEnter:o.onLineEnter,onLeave:o.onLineLeave})}),t&&R("cart")}};function z(t,e){let n=t.merchandise||{},a=t.sellingPlanAllocation?.sellingPlan;switch(e){case"title":return n.product?.title;case"product-title":return n.product?.title;case"variant-title":return n.title==="Default Title"?"":n.title;case"options":return(n.selectedOptions||[]).filter(r=>r.value!=="Default Title").map(r=>`${r.name}: ${r.value}`).join(", ");case"vendor":return n.product?.vendor;case"sku":return n.sku;case"price":return b(t.cost?.amountPerQuantity||n.price);case"compare-at-price":return b(t.cost?.compareAtAmountPerQuantity||n.compareAtPrice);case"line-total":return b(t.cost?.totalAmount);case"line-subtotal":return b(t.cost?.subtotalAmount);case"quantity":return D.quantityOf(t);case"plan":return a?.name||"";case"plan-description":return a?.description||"";case"components":return(t.lineComponents||[]).map(r=>`${r.quantity} \xD7 ${r.merchandise?.product?.title||""}`).join(", ");default:if(e.startsWith("attribute:")){let r=e.slice(10);return(t.attributes||[]).find(s=>s.key===r)?.value||""}return}}function J(t,e){let n=e.merchandise||{},a=!!e.sellingPlanAllocation;t.setAttribute(E("line-id"),e.id),t.classList.toggle("is-subscription",a),l(t,u("line")).forEach(i=>{let d=g(i,"line");if(d==="image")return M(i,n.image?.url||n.product?.featuredImage?.url,n.product?.title);if(d==="url"){let y=F(n.product?.handle,n.product?.id),v=new URLSearchParams;n.id&&v.set("variant",String(n.id).split("/").pop());let w=e.sellingPlanAllocation?.sellingPlan?.id;w&&v.set("selling_plan",w.split("/").pop());let C=v.toString();return i.setAttribute("href",C?`${y}${y.includes("?")?"&":"?"}${C}`:y)}let p=z(e,d);p!==void 0&&m(i,p)});let r=D.warnings.find(i=>i.target===e.id);t.classList.toggle("is-warning",!!r);let s=D.pendingQty.has(e.id);t.classList.toggle("is-busy",s),s?t.setAttribute("aria-busy","true"):t.removeAttribute("aria-busy"),l(t,u("line","warning")).forEach(i=>m(i,r?.message||""));let c={subscription:a,"one-time":!a,"on-sale":parseFloat(e.cost?.compareAtAmountPerQuantity?.amount)>parseFloat(e.cost?.amountPerQuantity?.amount),"has-components":(e.lineComponents||[]).length>0,warning:!!r};l(t,u("line-show")).forEach(i=>{let d=g(i,"line-show");d in c&&L(i,c[d])}),l(t,`select${u("line-plan")}`).forEach(i=>{let d=n.product?.handle;d&&U(d).then(p=>{let y=B(p),w=[...!p.requiresSellingPlan&&g(i,"line-plan")!=="subscription-only"?[{value:"",label:i.getAttribute(E("one-time-label"))||"One-time purchase"}]:[],...y.map(f=>({value:f.id,label:f.name}))],C=w.map(f=>f.value).join("|");i.dataset.tetherSig!==C&&(i.innerHTML="",w.forEach(f=>{let P=document.createElement("option");P.value=f.value,P.textContent=f.label,i.appendChild(P)}),i.dataset.tetherSig=C),i.value=e.sellingPlanAllocation?.sellingPlan?.id||"",L(i,y.length>0)}).catch(p=>I(p,"line plan options"))})}export{W as a,D as b};

package/dist/esm/chunks/chunk-CISGFYOF.js

@@ -1 +0,0 @@
-import{a as E,b as K,c as z}from"./chunk-6R752OYZ.js";import{a as g,c as k,f as p}from"./chunk-4UR45XTC.js";import{c as L,e as A,f as F,g as O,h as q,i as D}from"./chunk-ZVUPVSLF.js";import{A as R,B as C,D as x,G as U,I as W,K as J,b as h,e as T,f as b,g as m,h as I,n as l,o as a,p as c,q as S,s as N,t as M,u as f}from"./chunk-KARKXC6G.js";var v=()=>`${a("collection")},${a("products")},${a("recommendations")}`,B=class{constructor(e){this.root=e,this.products=[],this.pageInfo=null,this.collection=null,p(e,"loading"),e.addEventListener("click",n=>{let o=n.target.closest?.(a("load-more"));o&&o.closest(v())===e&&(n.preventDefault(),J(o,()=>this.load(!0)))})}$(e){return M(this.root,e,v())}options(){let e=this.root,n={first:parseInt(c(e,"limit")||"",10)||void 0,sortKey:c(e,"sort")||void 0,reverse:c(e,"reverse")==="true"};return S(e,"collection")?n.collection=c(e,"collection"):n.query=c(e,"products")||"",n}async load(e=!1){let n=this.loadToken=(this.loadToken||0)+1,o=()=>n!==this.loadToken;try{if(S(this.root,"recommendations")){let{key:r}=g(this.root,window.location,"recommendations"),s=this.root.closest(a("product"));if(!r&&s&&({key:r}=g(s)),!r)throw new I("No product for recommendations",{code:"NOT_FOUND"});let u=await D(r,c(this.root,"intent")||"RELATED");if(o())return;let i=parseInt(c(this.root,"limit")||"",10);this.products=i?u.slice(0,i):u}else{let r=await q({...this.options(),after:e?this.pageInfo?.endCursor:null});if(o())return;this.collection=r.collection,this.pageInfo=r.pageInfo,this.products=e?[...this.products,...r.products]:r.products}this.render(),p(this.root,"ready"),f("list-ready",{products:this.products,collection:this.collection},this.root)}catch(r){if(o())return;e||p(this.root,k(r)?"not-found":"error",r),k(r)&&S(this.root,"recommendations")||m(r,"list load failed"),f("error",{error:r,context:"list"},this.root)}}render(){let e=this.collection;this.$(a("collection-bind")).forEach(o=>{switch(c(o,"collection-bind")){case"title":return C(o,e?.title||"");case"description":o.innerHTML=e?.descriptionHtml||"";return;case"image":return R(o,e?.image?.url,e?.image?.altText||e?.title);case"count":return C(o,this.products.length);default:return}}),this.$(a("list")).forEach(o=>{U(o,this.products,(r,s)=>{r.setAttribute(l("product"),s.handle),r.removeAttribute(l("state"))}),f("list-rendered",{container:o},this.root)});let n=this.products.length===0;this.$(a("show")).forEach(o=>{let r=c(o,"show");r==="list-empty"&&x(o,n),r==="list-filled"&&x(o,!n)}),this.$(a("load-more")).forEach(o=>x(o,!!this.pageInfo?.hasNextPage)),W("list")}};var P=new WeakSet,ft=new WeakSet,w=new Set,H=new Set,j=new WeakMap;function _(){w.forEach(t=>{t.isConnected||w.delete(t)}),H.forEach(t=>{t.root.isConnected||H.delete(t)})}function pt(t,e){return[...t.matches?.(e)?[t]:[],...N(t,e)]}function G(t){if(P.has(t))return!1;let{key:e,fromUrl:n,raw:o}=g(t);if(!e)return n?(P.add(t),p(t,"not-found"),f("product-not-found",{key:null,source:o},t)):t.closest(v())||b(`[${l("product")}] without a value. Bind it to the Shopify handle field, or use "url:handle".`,t),!1;P.add(t),w.add(t);let r={};j.set(t,r);let s=()=>j.get(t)===r;E.get(t)?t.setAttribute(l("state"),"updating"):p(t,"loading");let u=L(e);return d?.add(u),u.then(i=>{if(!s())return;let y=E.get(t);y?y.update(i):new z(t,i),V(t,i),h.revalidate!==!1&&F(e)&&X(e)}).catch(i=>{if(!s())return;let y=k(i);p(t,y?"not-found":"error",i),y?(f("product-not-found",{key:e,source:o},t),n?T(`product not found: ${e}`):m(i,`product ${e}`)):(m(i,`product ${e}`),f("error",{error:i,context:"product",key:e},t))}),!0}function V(t,e){let n=c(t,"page-title");!n||typeof document>"u"||(document.title=n.replace(/\{title\}/g,e.title).replace(/\{vendor\}/g,e.vendor||"").replace(/\{type\}/g,e.productType||""))}function ht(){_(),w.forEach(t=>{t.getAttribute(l("state"))!=="error"||t.getAttribute(l("error"))==="not-found"||(P.delete(t),G(t))})}var $=new Set;function X(t){$.size||setTimeout(Y,0),$.add(t)}function Y(){let t=[...$];$=new Set,O(t).forEach((e,n)=>e.then(o=>{w.forEach(r=>{let s=E.get(r);if(!s||!r.isConnected)return;let u=g(r).key;u!==t[n]&&u!==o.handle&&u!==o.id||JSON.stringify(s.product)!==JSON.stringify(o)&&s.update(o)})}).catch(o=>m(o,`refresh ${t[n]}`)))}var Q=new WeakSet,d=null,mt=t=>(d?.add(t),t);function Z(){if(!d)return;let t=[...d];Promise.allSettled(t).then(()=>{!d||t.some(e=>!d.has(e))||(t.length===d.size?(d=null,document.documentElement.classList.remove(`${h.prefix}-market-pending`)):Z())})}function gt(t=document){N(t.ownerDocument||t,'script[type="application/json"][data-tether-hydrate]').forEach(e=>{if(!Q.has(e)){Q.add(e);try{let n=JSON.parse(e.textContent);K(n.products);let o=(r,s)=>String(r||"").toUpperCase()===String(s||"").toUpperCase();o(n.country,h.country)&&o(n.language,h.language)?A(n.products):(T("hydration skipped: other market"),d||(d=new Set,document.documentElement.classList.add(`${h.prefix}-market-pending`)))}catch(n){b("bad data-tether-hydrate",n)}}})}export{v as a,B as b,P as c,ft as d,w as e,H as f,_ as g,pt as h,G as i,ht as j,mt as k,Z as l,gt as m};