@occluze/tether 0.5.0 → 0.6.0

package/src/fragments.js

@@ -117,7 +117,7 @@ fragment TetherCart on Cart {
       }
       merchandise {
         ... on ProductVariant {
-          id title sku availableForSale requiresShipping
+          id title sku availableForSale requiresShipping quantityAvailable
           image { ${IMAGE} }
           price { ${MONEY} }
           compareAtPrice { ${MONEY} }

package/src/index.js

@@ -19,9 +19,9 @@ import * as plans from './selling-plans.js';
 import { resolveProductKey } from './status.js';
 import { attr, sel, get, qsa, emit, formatMoney, busy, parseJSONAttr, toAttributes, imageUrl } from './dom.js';
 import { loadPart, coreModules } from './lazy.js';
-import { mountedLists, liveLists, pruneLive, within, mountProduct, retryFailed, hydrateFromPage } from './mounting.js';
+import { mountedLists, liveLists, pruneLive, within, mountProduct, retryFailed, hydrateFromPage, settleMarket, trackMarket } from './mounting.js';
 
-export const VERSION = '0.5.0';
+export const VERSION = '0.6.0';
 
 let initPromise = null;
 let observer = null;
@@ -40,7 +40,7 @@ export function mount(root = document) {
     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++; });
@@ -50,10 +50,22 @@ export function mount(root = document) {
     loadPart('markets').then((m) => m.renderCountrySelects(root)).catch((err) => reportError(err, 'markets'));
   }
 
+  // Customer accounts: their own optional part, when configured and the page (or a login) needs it.
+  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'));
+  }
+
+  // Search as you type: its own optional part, only for pages that have it.
+  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;
@@ -101,9 +113,9 @@ function bindControls() {
       const id = line.getAttribute(`data-${cfg.prefix}-key`);
       const current = Cart.lines.find((l) => l.id === id);
       const run = (fn) => { 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'));
@@ -123,10 +135,12 @@ function bindControls() {
     if (!t?.closest) return;
     const lineEl = t.closest(dataKeySel());
     const id = lineEl?.getAttribute(`data-${cfg.prefix}-key`);
+    // The line shows is-busy / aria-busy until Shopify has answered (removed by the next render).
+    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'))) {
@@ -142,22 +156,53 @@ function bindControls() {
     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;
-        // An invalid code doesn't stay in the cart (Shopify would warn about it on every change).
-        if (!ok) await Cart.removeDiscount(code).catch(() => {});
-        form.classList.toggle('is-invalid', !ok);
-        emit(ok ? 'discount-applied' : 'discount-invalid', { code }, form);
-        if (ok && input) input.value = '';
-      } catch (err) { form.classList.add('is-invalid'); reportError(err, 'discount'); }
+        await Cart.applyDiscount(code);
+        mark(false);
+        emit('discount-applied', { code }, form);
+        if (input) input.value = '';
+      } catch (err) {
+        mark(true);
+        if (err?.code === 'INVALID_DISCOUNT') emit('discount-invalid', { code }, form); else reportError(err, 'discount');
+      }
     });
   }, true); // capture: before a router (Astro's ClientRouter) turns the submit into a navigation
-  document.addEventListener('input', (e) => { e.target.closest?.(sel('discount-form'))?.classList.remove('is-invalid'); });
+  document.addEventListener('input', (e) => {
+    const f = e.target.closest?.(sel('discount-form'));
+    if (f) { f.classList.remove('is-invalid'); e.target.removeAttribute?.('aria-invalid'); }
+  });
+
+  // Other tabs: the cart or the market changed there (handled by the extras part, loaded then).
+  window.addEventListener('storage', (e) => {
+    if (cfg.domain && e.key?.startsWith(`${cfg.prefix}:`)) loadPart('extras').then((m) => m.onStorage(e)).catch(() => {});
+  });
+  // Shareable variant links: only when turned on.
+  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(() => {});
+  });
 
   // Astro View Transitions (<ClientRouter />): mount every new page, close the cart while leaving.
   if (cfg.astro !== false) {
-    document.addEventListener('astro:page-load', () => mount(document));
+    // Astro fires this on the first load too: wait for init (the visitor's saved market) first.
+    document.addEventListener('astro:page-load', () => (initPromise || Promise.resolve()).then(() => {
+      // Navigated to a page of another market (e.g. /de/): switch first, then mount in that market.
+      // Back on a normal page after one: the visitor's own choice, else the default market.
+      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());
   }
 
@@ -191,34 +236,14 @@ function dataKeySel() { return `[data-${cfg.prefix}-key]`; }
  * group in one request. Bundles, build-a-box, "complete the set".
  * Lines get attribute _group (and the group's tether-line-attributes).
  */
-export 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; }
-}
+export const addGroup = (btn) => loadPart('extras').then((m) => m.addGroup(btn));
 
 // ---------------------------------------------------------------------------
 // Init
 // ---------------------------------------------------------------------------
 
+let analyticsQueue = null;
+
 export function init(overrides = {}) {
   if (initPromise && !Object.keys(overrides).length) return initPromise;
   configure({ ...(window.TETHER_CONFIG || {}), ...overrides });
@@ -231,6 +256,13 @@ export function init(overrides = {}) {
 
   bindControls();
   if (cfg.observe) startObserver();
+  // Analytics (optional part): buffer Tether's events until it has loaded, so none are missed.
+  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) => {
     // A saved cart from another market: move it to this one, so prices match the page.
@@ -249,8 +281,30 @@ export function init(overrides = {}) {
  * Without markets.detect only the visitor's saved choice applies, read here without loading
  * the markets part.
  */
+/**
+ * A page built for one market (e.g. /de/ pages): <meta name="tether-page-country" content="DE">,
+ * tether-page-language, tether-page-locale. Wins over the visitor's saved choice, isn't remembered.
+ */
+function pageMarket(doc = document) {
+  const get = (n) => doc.querySelector(`meta[name="${cfg.prefix}-page-${n}"]`)?.getAttribute('content') || undefined;
+  const country = get('country');
+  return country ? { country: country.toUpperCase(), language: get('language'), locale: get('locale') } : null;
+}
+
+let baseMarket = null; // the configured market, before a visitor's or page's market applied
+let 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() : undefined;
+    if (page.locale) cfg.locale = page.locale;
+    return;
+  }
   if (m.detect === false) return;
   let market = null;
   if (m.detect) {
@@ -266,6 +320,13 @@ async function applyMarket(overrides) {
   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; }
+}
+
+/** Customer accounts (optional part, loaded on first use). See src/account.js. */
+const accountApi = new Proxy({}, { get: (_, n) => (...a) => loadPart('account').then((m) => m[n](...a)) });
+
 /** Tether.setCountry('DE'): loads the markets part on first use. */
 export function setCountry(code, opts) {
   return loadPart('markets').then((m) => m.setCountry(code, opts));
@@ -298,6 +359,7 @@ export const api = {
   getRecommendations,
   getScope,
   addGroup,
+  account: accountApi,
   primeProduct,
   normalizeProductKey,
   clearProductCache,

package/src/initial.js

@@ -6,7 +6,7 @@
  */
 import { GID, allPlans, allocationFor, findPlan, planPrice, planSavings } from './selling-plans.js';
 
-export function initialState(product, { variant, sellingPlan, defaultPurchase = 'one-time' } = {}) {
+export function initialState(product, { variant, sellingPlan, defaultPurchase = 'one-time', lowStock = 5 } = {}) {
   const vs = product?.variants?.nodes || [];
   const gid = variant ? GID.variant(variant) : null;
   const v = (gid && vs.find((x) => x.id === gid)) || vs.find((x) => x.availableForSale) || vs[0] || null;
@@ -26,6 +26,8 @@ export function initialState(product, { variant, sellingPlan, defaultPurchase =
   const compareAt = sub ? (allocationFor(v, plan.id)?.priceAdjustments?.[0]?.compareAtPrice || v.compareAtPrice) : v.compareAtPrice;
   const onSale = Boolean(compareAt && parseFloat(compareAt.amount) > parseFloat(price.amount));
   const q = v.quantityAvailable;
+  const low = q != null && q > 0 && q <= lowStock;
+  const savingsNow = sub ? planSavings(v, plan.id).percentage : 0;
 
   return {
     variant: v,
@@ -51,16 +53,23 @@ export function initialState(product, { variant, sellingPlan, defaultPurchase =
       'not-on-sale': !onSale,
       'has-variants': vs.length > 1,
       'single-variant': vs.length === 1,
-      'low-stock': q != null && q > 0 && q <= 5,
+      'low-stock': low,
+      'plenty-in-stock': v.availableForSale && !low,
       'subscription-available': subscriptionAvailable,
       'subscription-unavailable': !subscriptionAvailable,
       'subscription-only': Boolean(product.requiresSellingPlan),
       'one-time-available': !product.requiresSellingPlan,
       'subscription-selected': sub,
       'one-time-selected': !sub,
+      'has-savings': sub ? savingsNow > 0 : onSale,
     },
+    /** Option values without an available variant, as plain data (for frameworks that serialise props). */
+    unavailable: Object.fromEntries((product.options || []).map((o) => [o.name, o.optionValues.map((x) => x.name).filter((n) => isUnavail(o.name, n))])),
     /** Option values with no available variant (given the other selected options): class is-unavailable. */
-    isUnavailable: (name, value) => !vs.some((x) => x.availableForSale && x.selectedOptions.every((o) =>
-      (o.name === name ? o.value === value : selected[o.name] === o.value))),
+    isUnavailable: (name, value) => isUnavail(name, value),
   };
+  function isUnavail(name, value) {
+    return !vs.some((x) => x.availableForSale && x.selectedOptions.every((o) =>
+      (o.name === name ? o.value === value : selected[o.name] === o.value)));
+  }
 }

package/src/lazy.js

@@ -3,7 +3,15 @@
  * ESM / Node: dynamic import (bundlers split these into their own chunks).
  * The <script> build swaps this file for lazy-iife.js (see scripts/build.mjs).
  */
-export const loadPart = (name) => (name === 'diagnose' ? import('./diagnose.js') : import('./markets-ui.js'));
+const PARTS = {
+  diagnose: () => import('./diagnose.js'),
+  markets: () => import('./markets-ui.js'),
+  search: () => import('./search.js'),
+  extras: () => import('./extras.js'),
+  account: () => import('./account.js'),
+  analytics: () => import('./analytics.js'),
+};
+export const loadPart = (name) => PARTS[name]();
 
 // Only the <script> build shares its modules with separately loaded parts.
 export const coreModules = undefined;

package/src/loader.js

@@ -95,7 +95,10 @@ async function flush() {
         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); // don't cache misses: a fix in Shopify works on next load
+        // A miss is remembered for a few seconds (one page load asking twice makes one request),
+        // not longer: a product published in Shopify shows up on the next visit.
+        const miss = productCache.get(k);
+        if (gen === generation) setTimeout(() => { if (productCache.get(k) === miss) productCache.delete(k); }, 10000);
         r.reject(new TetherError(`Product not found: ${k}`, { code: 'NOT_FOUND' }));
       }
     }));

package/src/markets-ui.js

@@ -59,7 +59,8 @@ export async function setCountry(code, { language, locale, remember = true } = {
   const entry = Object.values(cfg.markets?.locales || {}).find((m) => toCountry(m?.country) === country);
   const own = locale || entry?.locale;
   const loc = own || cfg.locale;
-  const lang = language === undefined ? cfg.language : toLanguage(language);
+  // Language: the option, else the markets.locales entry for this country (which may have none), else unchanged.
+  const lang = language !== undefined ? toLanguage(language) : entry ? (entry.language ? toLanguage(entry.language) : undefined) : cfg.language;
   const changed = country !== String(cfg.country || '').toUpperCase() || lang !== cfg.language || loc !== cfg.locale;
   cfg.country = country;
   cfg.language = lang || undefined;

package/src/mounting.js

@@ -45,7 +45,9 @@ function mountProduct(el) {
   // A rendered scope keeps showing its content while it refreshes (e.g. country switch).
   if (!scopes.get(el)) setScopeStatus(el, 'loading');
   else el.setAttribute(attr('state'), 'updating');
-  getProduct(key)
+  const loading = getProduct(key);
+  marketPending?.add(loading);
+  loading
     .then((p) => {
       if (!current()) return;
       const existing = scopes.get(el);
@@ -114,6 +116,24 @@ function flushRefresh() {
  * their products are used without a request. Ignored when they were made for another market.
  */
 const readScripts = new WeakSet();
+let marketPending = null; // product loads to wait for before html.tether-market-pending goes
+
+/** Lists (and anything else that loads prices) wait too. */
+export const trackMarket = (p) => { marketPending?.add(p); return p; };
+
+/** After a mount: drop html.tether-market-pending once this page's products are live. */
+export 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(); // more products came in meanwhile
+  });
+}
+
 export function hydrateFromPage(root = document) {
   qsa(root.ownerDocument || root, 'script[type="application/json"][data-tether-hydrate]').forEach((s) => {
     if (readScripts.has(s)) return;
@@ -123,7 +143,12 @@ export function hydrateFromPage(root = document) {
       rememberOptionNames(data.products); // the build's option names, also for other languages
       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');
+      else {
+        // The page was built for another market: its prices aren't this visitor's. Mark the page
+        // (html.tether-market-pending) until the live ones are in, so CSS can hide prices meanwhile.
+        log('hydration skipped: other market');
+        if (!marketPending) { marketPending = new Set(); document.documentElement.classList.add(`${cfg.prefix}-market-pending`); }
+      }
     } catch (err) { warn('bad data-tether-hydrate', err); }
   });
 }

package/src/parts/account.js

@@ -0,0 +1,3 @@
+import * as part from '../account.js';
+
+window.Tether.__parts.account = part;

package/src/parts/analytics.js

@@ -0,0 +1,3 @@
+import * as part from '../analytics.js';
+
+window.Tether.__parts.analytics = part;

package/src/parts/extras.js

@@ -0,0 +1,3 @@
+import * as part from '../extras.js';
+
+window.Tether.__parts.extras = part;

package/src/parts/search.js

@@ -0,0 +1,3 @@
+import * as part from '../search.js';
+
+window.Tether.__parts.search = part;

package/src/product.js

@@ -5,7 +5,7 @@
 import { cfg, reportError } from './config.js';
 import {
   attr, sel, get, has, qsa, scoped, emit, formatMoney, formatDate, setText, setImage, show,
-  setSelected, repeat, productUrl, notifyLayoutChanged, watchImages, busy, parseJSONAttr, toAttributes, sameImage, hasTemplate,
+  setSelected, repeat, productUrl, notifyLayoutChanged, watchImages, busy, parseJSONAttr, toAttributes, sameImage, hasTemplate, formatPercent,
 } from './dom.js';
 import { Cart } from './cart.js';
 import { STATUS_KEYS, ownedBy } from './status.js';
@@ -167,7 +167,16 @@ export class ProductScope {
 
   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; // a value no variant has: nothing to select, keep the visitor's choice
+    const next = { ...this.selected, [name]: value };
+    if (!vs.some((v) => v.selectedOptions.every((o) => next[o.name] === o.value))) {
+      // That combination doesn't exist: the closest variant with this value (most other choices kept, available first).
+      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();
   }
 
@@ -419,7 +428,7 @@ export class ProductScope {
     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);
     // Text binds: name -> value (functions, so only the binds on the page are computed).
     const text = {
       price: () => fm(price),
@@ -428,7 +437,8 @@ export class ProductScope {
       '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,
@@ -486,6 +496,7 @@ export class ProductScope {
         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),
@@ -498,6 +509,7 @@ export class ProductScope {
 
     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,
@@ -506,7 +518,8 @@ export class ProductScope {
       '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),
@@ -552,5 +565,6 @@ export class ProductScope {
       product: p, variant: v, selected: { ...this.selected },
       purchase: this.purchase, sellingPlanId: sub ? this.planId : null,
     }, this.root);
+
   }
 }

package/src/search.js

@@ -0,0 +1,153 @@
+/**
+ * Search as you type (Shopify predictive search). Optional part: loaded only on pages with
+ * [tether-search].
+ *
+ *   <form tether-search action="/search">            <!-- Enter: your full results page -->
+ *     <input tether-search-input name="q" type="search" placeholder="Search">
+ *     <div tether-search-results>
+ *       <div tether-search-products><a><img tether-search-bind="image" max-width="120"><span tether-search-bind="title"></span> <span tether-search-bind="price"></span></a></div>
+ *       <div tether-search-queries><a><span tether-search-bind="text"></span></a></div>
+ *       <div tether-search-collections><a><span tether-search-bind="title"></span></a></div>
+ *       <p tether-show="search-empty">No results</p>
+ *     </div>
+ *   </form>
+ *
+ * Each list's first child is the template. The root gets is-open while there are results (or none)
+ * to show, and tether-search-state="loading|ready|empty|error". Arrow keys move through the results,
+ * Escape closes. tether-search-limit (default 6), tether-search-min (characters, default 2).
+ */
+import { cfg, reportError } from './config.js';
+import { gql } from './client.js';
+import { attr, sel, get, qsa, setText, setImage, repeat, show, formatMoney, productUrl, emit } from './dom.js';
+
+const QUERY = `query TetherPredictive($q: String!, $limit: Int!) {
+  predictiveSearch(query: $q, limit: $limit, limitScope: EACH, types: [PRODUCT, COLLECTION, QUERY]) {
+    products { id handle title availableForSale featuredImage { url altText } priceRange { minVariantPrice { amount currencyCode } } }
+    collections { handle title image { url altText } }
+    queries { text }
+  }
+}`;
+
+const mounted = new WeakSet();
+let uid = 0;
+
+export function mountSearch(root = document) {
+  const roots = [...(root.matches?.(sel('search')) ? [root] : []), ...qsa(root, sel('search'))];
+  roots.forEach((el) => { if (!mounted.has(el)) { mounted.add(el); setup(el); } });
+}
+
+function setup(rootEl) {
+  const input = rootEl.querySelector(sel('search-input')) || rootEl.querySelector('input');
+  const results = rootEl.querySelector(sel('search-results'));
+  if (!input || !results) return;
+  const limit = parseInt(get(rootEl, 'search-limit') || '6', 10) || 6;
+  const min = parseInt(get(rootEl, 'search-min') || '2', 10) || 2;
+  const id = results.id || (results.id = `${cfg.prefix}-search-${++uid}`);
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-controls', id);
+  input.setAttribute('aria-expanded', 'false');
+  input.setAttribute('autocomplete', 'off');
+  if (!results.hasAttribute('role')) results.setAttribute('role', 'listbox');
+  results.hidden = true;
+
+  let token = 0;
+  let timer = null;
+  let last = '';
+  const cache = new Map(); // term -> results, for typing back and forth
+
+  const setState = (state) => rootEl.setAttribute(attr('search-state'), state);
+  const open = (yes) => {
+    rootEl.classList.toggle('is-open', yes);
+    results.hidden = !yes;
+    input.setAttribute('aria-expanded', String(yes));
+    if (!yes) input.removeAttribute('aria-activedescendant');
+  };
+  const items = () => qsa(results, '[role="option"]');
+
+  async function run(term) {
+    const t = ++token;
+    if (term.length < min) { open(false); setState('idle'); return; }
+    setState('loading');
+    try {
+      const data = cache.get(term) || (await gql(QUERY, { q: term, limit })).predictiveSearch;
+      cache.set(term, data);
+      if (t !== token) return; // a newer search is on its way
+      render(data, term);
+    } catch (err) {
+      if (t !== token) return;
+      setState('error');
+      reportError(err, 'search');
+    }
+  }
+
+  function render(data, term) {
+    const products = data?.products || [];
+    const collections = data?.collections || [];
+    const queries = (data?.queries || []).filter((q) => q.text.toLowerCase() !== term.toLowerCase());
+    const fill = (name, list, each) => qsa(results, sel(name)).forEach((c) => {
+      repeat(c, list, each);
+      show(c, list.length > 0);
+    });
+    fill('search-products', products, (node, p) => {
+      binds(node, { title: p.title, price: formatMoney(p.priceRange?.minVariantPrice), image: p.featuredImage });
+      link(node, productUrl(p.handle, p.id));
+      node.classList.toggle('is-sold-out', !p.availableForSale);
+    });
+    fill('search-collections', collections, (node, c) => {
+      binds(node, { title: c.title, image: c.image });
+      link(node, `${(cfg.collectionPath || '/collection').replace(/\/$/, '')}/${c.handle}`);
+    });
+    fill('search-queries', queries, (node, q) => {
+      binds(node, { text: q.text });
+      const a = node.tagName === 'A' ? node : node.querySelector('a');
+      const action = rootEl.getAttribute('action') || '/search';
+      if (a) a.setAttribute('href', `${action}${action.includes('?') ? '&' : '?'}${input.name || 'q'}=${encodeURIComponent(q.text)}`);
+    });
+    const count = products.length + collections.length + queries.length;
+    qsa(rootEl, sel('show')).forEach((el) => {
+      const k = get(el, 'show');
+      if (k === 'search-empty') show(el, count === 0);
+      if (k === 'search-results') show(el, count > 0);
+    });
+    items().forEach((el, i) => { el.id ||= `${id}-${i}`; el.setAttribute('aria-selected', 'false'); });
+    setState(count ? 'ready' : 'empty');
+    open(true);
+    emit('search', { term, products, collections, queries }, rootEl);
+  }
+
+  function binds(node, values) {
+    qsa(node, sel('search-bind')).forEach((el) => {
+      const k = get(el, 'search-bind');
+      if (k === 'image') setImage(el, values.image?.url, values.image?.altText || values.title);
+      else if (values[k] != null) setText(el, values[k]);
+    });
+  }
+
+  function link(node, href) {
+    const a = node.tagName === 'A' ? node : node.querySelector('a');
+    if (a) { a.setAttribute('href', href); a.setAttribute('role', 'option'); }
+  }
+
+  input.addEventListener('input', () => {
+    const term = input.value.trim();
+    if (term === last) return;
+    last = term;
+    clearTimeout(timer);
+    timer = setTimeout(() => run(term), cfg.searchDelay ?? 150);
+  });
+  input.addEventListener('focus', () => { if (input.value.trim().length >= min && items().length) open(true); });
+  input.addEventListener('keydown', (e) => {
+    const list = items();
+    const cur = list.findIndex((el) => el.getAttribute('aria-selected') === 'true');
+    const move = (i) => {
+      list.forEach((el, j) => el.setAttribute('aria-selected', String(j === i)));
+      if (list[i]) { input.setAttribute('aria-activedescendant', list[i].id); list[i].scrollIntoView?.({ block: 'nearest' }); }
+    };
+    if (e.key === 'ArrowDown' && list.length) { e.preventDefault(); open(true); move((cur + 1) % list.length); }
+    else if (e.key === 'ArrowUp' && list.length) { e.preventDefault(); move(cur <= 0 ? list.length - 1 : cur - 1); }
+    else if (e.key === 'Enter' && cur >= 0) { e.preventDefault(); list[cur].click(); }
+    else if (e.key === 'Escape') { open(false); }
+  });
+  document.addEventListener('click', (e) => { if (!rootEl.contains(e.target)) open(false); });
+}