@occluze/tether 0.6.7 → 0.7.0

package/src/client.js

@@ -1,131 +0,0 @@
-/**
- * Storefront API client: one fetch wrapper with @inContext, retries and
- * readable errors. Exposed as Tether.query() for anything Tether doesn't cover.
- */
-import { cfg, log } from './config.js';
-
-export class TetherError extends Error {
-  constructor(message, { status, errors, userErrors, code } = {}) {
-    super(message);
-    this.name = 'TetherError';
-    this.code = code || (status ? `HTTP_${status}` : 'ERROR');
-    this.status = status;
-    this.errors = errors;
-    this.userErrors = userErrors;
-  }
-}
-
-export function endpoint(conf = cfg) {
-  return `https://${conf.domain}/api/${conf.apiVersion}/graphql.json`;
-}
-
-/**
- * Adds @inContext(country, language) to the first operation in the document,
- * so prices, currency and translations follow the configured market.
- * Operations are always written first, fragments after, so the first match is
- * the operation.
- */
-export 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;
-
-  const tag = `@inContext(${args.join(', ')})`;
-  // Named (query Name($x: T)), anonymous (query { … }) and shorthand ({ … }) queries.
-  if (/^\s*\{/.test(query)) return `query ${tag} ${query.trimStart()}`;
-  return query.replace(/^(\s*(?:query|mutation)(?:\s+\w+)?\s*(?:\([^)]*\))?)/, `$1 ${tag}`);
-}
-
-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.
- */
-export 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' });
-  }
-
-  // Shopify caches the response of an identical query text (prices included, for hours after a
-  // change). A time bucket in a comment keeps answers at most maxAge seconds old (default 60).
-  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 * 1000))}`;
-  const body = JSON.stringify({ query: text, variables });
-  let attempt = 0;
-
-  for (;;) {
-    let res;
-    try {
-      res = await (conf.fetch || fetch)(endpoint(conf), {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Shopify-Storefront-Access-Token': conf.token,
-        },
-        body,
-      });
-    } catch (err) {
-      if (attempt++ < conf.retries) { await sleep(300 * 2 ** attempt); continue; }
-      throw new TetherError(`Network error: ${err.message}`, { code: 'NETWORK' });
-    }
-
-    if (res.status === 430) throw new TetherError('Shopify security rejection (430)', { status: 430 });
-
-    const retryable = res.status === 429 || res.status >= 500;
-    if (retryable && attempt++ < conf.retries) {
-      log('retry', res.status, attempt);
-      await sleep(300 * 2 ** attempt);
-      continue;
-    }
-
-    let json;
-    try { json = await res.json(); } catch {
-      throw new TetherError(res.ok ? `Invalid response (${res.status})` : statusText(res.status, conf), { status: res.status });
-    }
-
-    if (json.errors?.length) {
-      // Token without unauthenticated_read_product_inventory: drop the field and retry.
-      const inventoryDenied = json.errors.some((e) => /quantityAvailable/.test(e.message || ''));
-      if (inventoryDenied && /\bquantityAvailable\b/.test(body)) {
-        log('no inventory permission, retrying without quantityAvailable');
-        return request(conf, query.replace(/\bquantityAvailable\b/g, ''), variables, { context });
-      }
-      // An older apiVersion without cart warnings (before 2024-07): retry without them.
-      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++ < conf.retries) { await sleep(500 * 2 ** attempt); continue; }
-      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(statusText(res.status, conf), { status: res.status });
-
-    return json.data;
-  }
-}
-
-export const gql = (query, variables, opts) => request(cfg, query, variables, opts);
-
-/** Throws on mutation userErrors, returns the payload otherwise. */
-export function unwrap(payload, name) {
-  if (!payload) throw new TetherError(`${name}: empty response`);
-  const errs = payload.userErrors || [];
-  if (errs.length) {
-    throw new TetherError(errs.map((e) => e.message).join(' | '), { userErrors: errs });
-  }
-  return payload;
-}

package/src/collection.js

@@ -1,114 +0,0 @@
-/**
- * Product lists: [tether-collection="handle"] or [tether-products="search query"].
- * The first child of [tether-list] is the card template; every card becomes a
- * product scope, so all product attributes work inside cards (including
- * quick-add with a subscription toggle).
- */
-import { reportError } from './config.js';
-import { TetherError } from './client.js';
-import { attr, sel, get, has, scoped, emit, setText, setImage, repeat, notifyLayoutChanged, busy, show } from './dom.js';
-import { getProducts, getRecommendations } from './loader.js';
-import { setScopeStatus, isNotFound, resolveProductKey } from './status.js';
-
-export const listSelector = () => `${sel('collection')},${sel('products')},${sel('recommendations')}`;
-
-export class ListScope {
-  constructor(root) {
-    this.root = root;
-    this.products = [];
-    this.pageInfo = null;
-    this.collection = null;
-    setScopeStatus(root, 'loading');
-    root.addEventListener('click', (e) => {
-      const more = e.target.closest?.(sel('load-more'));
-      if (more && more.closest(listSelector()) === root) {
-        e.preventDefault();
-        busy(more, () => this.load(true));
-      }
-    });
-  }
-
-  $(s) { return scoped(this.root, s, listSelector()); }
-
-  options() {
-    const r = this.root;
-    const opts = {
-      first: parseInt(get(r, 'limit') || '', 10) || undefined,
-      sortKey: get(r, 'sort') || undefined,
-      reverse: get(r, 'reverse') === 'true',
-    };
-    if (has(r, 'collection')) opts.collection = get(r, 'collection');
-    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;
-  }
-
-  async load(more = false) {
-    const token = (this.loadToken = (this.loadToken || 0) + 1);
-    const stale = () => token !== this.loadToken;
-    try {
-      if (has(this.root, 'recommendations')) {
-        // A handle, url:handle (one dynamic product page), or empty inside a product: that product.
-        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 (stale()) 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;
-        this.collection = res.collection;
-        this.pageInfo = res.pageInfo;
-        this.products = more ? [...this.products, ...res.products] : res.products;
-      }
-      this.render();
-      setScopeStatus(this.root, 'ready');
-      emit('list-ready', { products: this.products, collection: this.collection }, this.root);
-    } catch (err) {
-      if (stale()) return;
-      // Keep what's already rendered on a failed "load more"; otherwise show the error state.
-      if (!more) setScopeStatus(this.root, isNotFound(err) ? 'not-found' : 'error', err);
-      // A missing product for recommendations is a page detail, not an error to report.
-      if (!(isNotFound(err) && has(this.root, 'recommendations'))) reportError(err, 'list load failed');
-      emit('error', { error: err, context: 'list' }, this.root);
-    }
-  }
-
-  render() {
-    const c = this.collection;
-    this.$(sel('collection-bind')).forEach((el) => {
-      switch (get(el, 'collection-bind')) {
-        case 'title': return setText(el, c?.title || '');
-        case 'description': el.innerHTML = c?.descriptionHtml || ''; return undefined;
-        case 'image': return setImage(el, c?.image?.url, c?.image?.altText || c?.title);
-        case 'count': return setText(el, this.products.length);
-        default: return undefined;
-      }
-    });
-
-    this.$(sel('list')).forEach((container) => {
-      repeat(container, this.products, (node, p) => {
-        node.setAttribute(attr('product'), p.handle);
-        node.removeAttribute(attr('state'));
-      });
-      // Cards are new elements: mount them (product data is already cached).
-      emit('list-rendered', { container }, this.root);
-    });
-
-    const empty = this.products.length === 0;
-    this.$(sel('show')).forEach((el) => {
-      const k = get(el, 'show');
-      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');
-  }
-}
-

package/src/config.js

@@ -1,85 +0,0 @@
-/**
- * Runtime config. One shared object, mutated by configure(), read everywhere.
- */
-
-export const DEFAULTS = {
-  // Shopify Storefront API
-  domain: '',                 // 'your-store.myshopify.com'
-  token: '',                  // public Storefront API access token
-  apiVersion: '2026-07',
-  country: undefined,         // ISO code, e.g. 'NL' -> @inContext(country: NL)
-  language: undefined,        // e.g. 'NL' -> @inContext(language: NL)
-  locale: undefined,          // Intl locale for money/dates, e.g. 'nl-NL'
-  markets: null,              // { detect: true, locales: { de: { country: 'DE', language: 'DE' } }, cookie, remember } (markets.js)
-
-  // Markup
-  prefix: 'tether',           // attribute prefix: tether-product, tether-bind, ...
-  productPath: '/product',    // Webflow CMS template path for products
-  collectionPath: '/collection',
-
-  // Fetching
-  metafields: [],             // ['custom.material', { namespace, key }]
-  imagesFirst: 25,
-  variantsFirst: 100,
-  sellingPlanGroupsFirst: 10,
-  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>`
-  cartDrawerOpenClass: 'is-open',
-  openCartOnAdd: true,
-  cartFocus: true,            // move focus into the open cart, keep Tab inside it, restore it on close
-  checkoutTarget: '_self',    // '_self' or '_blank'
-
-  // 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
-  formatMoney: null,          // (money, locale) => string
-
-  // Hooks (all optional)
-  onLayoutChange: null,       // (reason) => void. Default refreshes ScrollTrigger if present
-  onCartOpen: null,           // (drawers) => void, e.g. lock scroll
-  onCartClose: null,          // (drawers) => void
-  onLineEnter: null,          // (node) => void, animate a new cart line in
-  onLineLeave: null,          // (node, done) => void, animate out, then call done()
-  onValueChange: null,        // (el, previousText) => void, e.g. text scramble
-  onError: null,              // (error, context) => void
-
-  debug: false,
-};
-
-export const cfg = { ...DEFAULTS };
-
-export function configure(overrides = {}) {
-  Object.keys(cfg).forEach((k) => delete cfg[k]);
-  Object.assign(cfg, DEFAULTS, overrides);
-  if (cfg.domain) cfg.domain = String(cfg.domain).replace(/^https?:\/\//, '').replace(/\/.*$/, '');
-  if (!cfg.storageKey) cfg.storageKey = `${cfg.prefix}:cart:${cfg.domain}`;
-  if (cfg.apiVersion === 'unstable') warn('apiVersion "unstable" changes without notice. Pin a dated version (e.g. 2026-07).');
-  return cfg;
-}
-
-export const isConfigured = () => Boolean(cfg.domain && cfg.token);
-
-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.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

@@ -1,246 +0,0 @@
-/**
- * Tether.diagnose(): one call in the browser console that explains what's
- * wrong on a page. Logs a readable report and returns it as an object.
- *
- *   await Tether.diagnose()
- *   await Tether.diagnose({ silent: true })   // just the object
- */
-import { cfg, isConfigured } from './config.js';
-import { gql, endpoint } from './client.js';
-import { attr, sel, get, qsa, hasTemplate } from './dom.js';
-import { getProduct } from './loader.js';
-import { allPlans } from './selling-plans.js';
-import { resolveProductKey, boundary } from './status.js';
-import { apiVersionStatus } from './api-version.js';
-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',
-  'addresses-loading', 'addresses-empty', 'addresses-error', 'subscriptions-loading', 'subscriptions-empty', 'subscriptions-error',
-]);
-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 order-bind order-line order-lines order-line-show order-show order-state order-fulfillments
-  fulfillment-bind order-return return-quantity return-reason return-note orders profile-form address-form addresses address-bind
-  address-show address-edit address-new address-delete address-default subscriptions subscription-bind subscription-lines
-  subscription-line subscription-show subscription-action subscription-status subscription-state confirm form-state form-error 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) {
-  const id = el.id ? `#${el.id}` : '';
-  const cls = el.className && typeof el.className === 'string' ? `.${el.className.trim().split(/\s+/).slice(0, 2).join('.')}` : '';
-  return `<${el.tagName.toLowerCase()}${id}${cls}>`;
-}
-
-/** Markup problems that don't need the network. */
-export function checkMarkup(root = document) {
-  const problems = [];
-  const add = (level, message, el) => problems.push({ level, message, element: el ? describe(el) : undefined, el });
-  const inProduct = (el) => Boolean(el.closest(sel('product')));
-  const listSel = `${sel('collection')},${sel('products')},${sel('recommendations')}`;
-
-  qsa(root, sel('product')).forEach((el) => {
-    if (el.closest(listSel) && el.closest(sel('list'))) return; // list cards get their handle at render time
-    const { key, fromUrl, raw } = resolveProductKey(el);
-    if (!raw) add('error', `${attr('product')} has no value. Bind it to the Shopify handle (CMS field), or use "url:handle".`, el);
-    else if (fromUrl && !key) add('warn', `${attr('product')}="${raw}" but this URL has no value for it (e.g. ?handle=my-product).`, el);
-  });
-
-  const productOnly = ['bind', 'option-list', 'option', 'variant-select', 'add-to-cart', 'purchase', 'plan-list', 'plan', 'qty', 'line-attribute'];
-  productOnly.forEach((name) => {
-    qsa(root, sel(name)).forEach((el) => {
-      if (inProduct(el)) return;
-      if (name === 'line-attribute' && el.closest(sel('group'))) return;
-      add('warn', `${attr(name)} outside any ${attr('product')}: it does nothing here.`, el);
-    });
-  });
-
-  qsa(root, sel('group-add')).forEach((el) => {
-    if (!el.closest(sel('group'))) add('warn', `${attr('group-add')} outside a ${attr('group')}.`, 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);
-  });
-
-  qsa(root, sel('show')).forEach((el) => {
-    const k = get(el, 'show');
-    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) => {
-    const k = get(el, 'bind') || '';
-    if (!k.startsWith('metafield:')) return;
-    const ref = k.slice(10);
-    const listed = (cfg.metafields || []).some((m) => (typeof m === 'string' ? m : `${m.namespace}.${m.key}`) === ref);
-    if (!listed) add('error', `${attr('bind')}="${k}" but "${ref}" is not in config.metafields, so it stays empty.`, el);
-  });
-
-  if (qsa(root, sel('cart-open')).length && !qsa(root, sel('cart-drawer')).length) {
-    add('warn', `${attr('cart-open')} exists but there is no ${attr('cart-drawer')} on this page.`);
-  }
-  if (qsa(root, sel('cart-drawer')).length > 1) add('warn', `More than one ${attr('cart-drawer')}.`);
-
-  qsa(root, `[${attr('state')}="error"]`).forEach((el) => {
-    if (el.matches(boundary())) add('error', `Scope failed to load (${get(el, 'error') || 'error'}).`, el);
-  });
-
-  return problems;
-}
-
-export async function diagnose({ root = document, silent = false, version, now = new Date() } = {}) {
-  const report = {
-    version,
-    config: {
-      domain: cfg.domain || '(missing)',
-      token: mask(cfg.token),
-      apiVersion: cfg.apiVersion,
-      endpoint: cfg.domain ? endpoint() : null,
-      country: cfg.country, language: cfg.language, locale: cfg.locale, markets: cfg.markets || null,
-      prefix: cfg.prefix, productPath: cfg.productPath, metafields: cfg.metafields,
-      autoMount: cfg.autoMount, observe: cfg.observe, onError: typeof cfg.onError === 'function',
-    },
-    apiVersion: apiVersionStatus(cfg.apiVersion, now),
-    // The market in use (a visitor's choice included), plus what detection would pick.
-    market: { country: cfg.country || null, language: cfg.language || null, locale: cfg.locale || null, detected: cfg.markets?.detect ? detectMarket(cfg.markets) : null },
-    reachable: false,
-    shop: null,
-    latencyMs: null,
-    products: [],
-    sellingPlans: [],
-    problems: [],
-  };
-
-  if (!isConfigured()) {
-    report.problems.push({ level: 'error', message: 'TETHER_CONFIG needs domain and token.' });
-  } else {
-    const t0 = Date.now();
-    try {
-      const data = await gql('query TetherDiagnose { shop { name primaryDomain { url } paymentSettings { currencyCode } } }', {}, { context: false });
-      report.reachable = true;
-      report.shop = { name: data.shop?.name, url: data.shop?.primaryDomain?.url, currency: data.shop?.paymentSettings?.currencyCode };
-    } catch (err) {
-      report.problems.push({ level: 'error', message: `Storefront API not reachable: ${err.message || err.code || 'unknown error'}` });
-    }
-    report.latencyMs = Date.now() - t0;
-
-    if (report.reachable) {
-      const keys = [...new Set(qsa(root, sel('product')).map((el) => resolveProductKey(el).key).filter(Boolean))].slice(0, 20);
-      const results = await Promise.allSettled(keys.map((k) => getProduct(k)));
-      results.forEach((r, i) => {
-        if (r.status === 'fulfilled') {
-          const p = r.value;
-          const plans = allPlans(p);
-          report.products.push({ key: keys[i], handle: p.handle, title: p.title, plans: plans.length, requiresSellingPlan: p.requiresSellingPlan });
-          plans.forEach((pl) => report.sellingPlans.push({ product: p.handle, group: pl.group?.name, plan: pl.name, id: pl.id }));
-          // Options a visitor can't choose on this page (they get the first available variant's value).
-          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 || r.reason?.code || 'not loaded'}. Is it published to the Headless channel?` });
-        }
-      });
-    }
-  }
-
-  if (!report.apiVersion.ok || (report.apiVersion.monthsLeft ?? 99) < 3) {
-    report.problems.push({ level: report.apiVersion.ok ? 'warn' : 'error', message: `apiVersion ${cfg.apiVersion}: ${report.apiVersion.note}` });
-  }
-  if (typeof document !== 'undefined') report.problems.push(...checkMarkup(root));
-
-  if (!silent) print(report);
-  return report;
-}
-
-function print(r) {
-  const c = console;
-  const errors = r.problems.filter((p) => p.level === 'error').length;
-  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', `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);
-  else if (r.reachable) c.log('No selling plans on the products of this page.');
-  r.problems.forEach((p) => (p.level === 'error' ? c.error : c.warn)(p.message, p.el || ''));
-  c.groupEnd?.();
-}