@wix/himalaya-cli 0.1497.0 → 0.1499.0

package/templates/branded-lite/tier5-src/himi-branded-lite-shop/index.ts

@@ -0,0 +1,691 @@
+// Tier-5 bundle: Branded Lite — Shop (the store tab's product gallery).
+// A category chip row on top, a sort picker and a Filter button that opens the filter
+// sheet (price + the store's own product options, e.g. Color / Size), a grid or list
+// of product cards with a saved-products heart, and a live cart count for the top bar.
+//
+// The scope is one category (or All), fetched from Wix; sort and filters then narrow
+// it on the device (../_shared/himi-store-facets.ts). The search field narrows it on
+// the device too, by product name. The first page paints as soon as it lands; later
+// pages join it in the background.
+//
+// Opened with `category` = a category id or name; absent ⇒ All.
+import { getCurrentCart } from "@himalaya/wix-ecom";
+import { getAll, remove, upsert, type DbEntity } from "@himalaya/local-db";
+import { searchStoreProducts, type StoreProduct } from "../_shared/himi-store.js";
+import { withIapPresentation } from "../_shared/iap-presentation.js";
+import { stashCopy, copyParam, copyTemplate } from "../_shared/himi-copy.js";
+import { loadStoreCategories, type StoreCategoryCard } from "../_shared/himi-store-categories.js";
+import {
+  FACETS_BOOT, PAGE_SIZE, applyFacets, countText, currencyOf, facetActions, idOf, option, readViewPrefs, selected, toRows, toggleSaved,
+  type FacetState, type Option, type ProductCard, type Row,
+} from "../_shared/himi-store-facets.js";
+
+const ALL = "all";
+const PAGE = 100;
+const MAX_PRODUCTS = 500;
+const ENTITY = "products";
+
+interface S extends FacetState {
+  status: "loading" | "ready" | "error";
+  isLoading: boolean;
+  notLoading: boolean;
+  isErrored: boolean;
+  notErrored: boolean;
+  /** The rows are the last synced catalog, read from the device while offline. */
+  fromCache: boolean;
+  noOffline: boolean;
+  categorySelected: string;
+  /** The scope generation this state was derived for — see `committed`. */
+  scopeGen: number;
+  /** The search field's text; matches product names within the category. */
+  query: string;
+  /** The chip row: All plus one chip per store category, with its selected state. */
+  categoryOptions: Option[];
+  hideCategories: boolean;
+  countLabel: string;
+  noEmpty: boolean;
+  emptyText: string;
+  cartCount: number;
+}
+
+// The fetched catalog stays out of bound state; only derived cards are rendered.
+let rows: Row[] = [];
+let currency: string | undefined;
+let categories: StoreCategoryCard[] = [];
+let categoriesAuthoritative = false;
+let categoryReadVersion = 0;
+let pendingCategoriesRead: Promise<StoreCategoryCard[]> | undefined;
+/** Cart count can land while the first product scope is still pending. */
+let loadedCartCount: number | undefined;
+/** Each category's fetched rows, so switching back to a chip is instant. */
+const scopes = new Map<string, { rows: Row[]; complete: boolean; loading: boolean; fromCache?: boolean; currency?: string; total?: number }>();
+const pendingScopes = new Map<string, number>();
+// A pull-to-refresh that loses the foreground generation still represents fresh data the
+// shopper asked for. Keep that intent until a current request for the scope lands, so a
+// quick trip away and back cannot present the old cached scope as the refresh result.
+const pendingRefreshScopes = new Map<string, number>();
+let cacheWriteGeneration = 0;
+let cacheWriteQueue: Promise<void> = Promise.resolve();
+/** Bumped on every scope change; a stale first page must never write over a newer scope. */
+let generation = 0;
+/** The category the screen shows. Module state, not action state: the boot load and the
+ *  onAppear load run at once, and both must land on the same chip. */
+let selectedCategory = ALL;
+/** A route category waiting for the category list to load. */
+let pendingLink: string | undefined;
+let pendingLinkIntentVersion = 0;
+let categoryIntentVersion = 0;
+let pendingAuxiliary: { cartCount: number; version: number } | undefined;
+let auxiliaryVersion = 0;
+let lastRouteActivation: string | undefined;
+let routeCategoryConsumed = false;
+let legacyCacheFacetResetDone = false;
+const LEGACY_CACHE_FACETS_KEY = "himi-store:legacy-cache-facets-reset:v1";
+
+function shouldResetLegacyCacheFacets(): boolean {
+  if (legacyCacheFacetResetDone) return false;
+  legacyCacheFacetResetDone = true;
+  try {
+    const store = (globalThis as { himalaya?: { storage?: { getItem(key: string): string | null; setItem(key: string, value: string): void } } }).himalaya?.storage;
+    if (store?.getItem(LEGACY_CACHE_FACETS_KEY) === "1") return false;
+    store?.setItem(LEGACY_CACHE_FACETS_KEY, "1");
+  } catch { /* one reset this boot even when storage is unavailable */ }
+  return true;
+}
+
+function input(arg?: unknown): { category?: string; categoryId?: string; categoryActivation?: string } {
+  const fromArg = arg as { category?: unknown; categoryId?: unknown; categoryActivation?: unknown } | undefined;
+  const route = (fromArg && typeof fromArg === "object" && (
+    typeof fromArg.category === "string" || typeof fromArg.categoryId === "string"
+  ) ? fromArg : (globalThis as { himalaya?: { input?: { category?: unknown; categoryId?: unknown; categoryActivation?: unknown } } }).himalaya?.input);
+  return {
+    ...(typeof route?.category === "string" ? { category: route.category } : {}),
+    ...(typeof route?.categoryId === "string" ? { categoryId: route.categoryId } : {}),
+    ...(typeof route?.categoryActivation === "string" ? { categoryActivation: route.categoryActivation } : {}),
+  };
+}
+
+function matchCategory(want: string): string | undefined {
+  const w = want.trim().toLowerCase();
+  if (!w) return undefined;
+  if (w === ALL) return ALL;
+  return categories.find((c) => c.id === want.trim() || c.name.toLowerCase() === w)?.id;
+}
+
+async function cartItemCount(): Promise<number | undefined> {
+  try {
+    const cart = await getCurrentCart();
+    return (cart.lineItems ?? []).reduce((n, li) => n + (li.quantity ?? 1), 0);
+  } catch {
+    return undefined;
+  }
+}
+
+/** A cart/onAppear load may supersede the auxiliary count for a refresh, but it must not
+ *  supersede that refresh's category discovery. Cache reads share an in-flight catalog read;
+ *  only the newest network read can replace the worker's current categories. */
+function readCategories(fresh: boolean): Promise<StoreCategoryCard[]> {
+  // A network read already in flight is fresh enough for a refresh that starts before it
+  // lands. Sharing it avoids discarding a good older response when a redundant newer read
+  // fails, and lets a route load consume the same authoritative list.
+  if (pendingCategoriesRead) return pendingCategoriesRead;
+  if (!fresh && categories.length) return Promise.resolve(categories);
+  const version = ++categoryReadVersion;
+  const read = loadStoreCategories().then((loaded) => {
+    if (version === categoryReadVersion) {
+      categories = loaded;
+      categoriesAuthoritative = true;
+    }
+    return categories;
+  }, () => {
+    if (version === categoryReadVersion) categoriesAuthoritative = false;
+    return categories;
+  });
+  pendingCategoriesRead = read;
+  void read.then(() => {
+    if (pendingCategoriesRead === read) pendingCategoriesRead = undefined;
+  });
+  return read;
+}
+
+function reconcileCategories(): { invalidatedSelection: boolean; intentVersion: number } {
+  // A failed discovery says nothing about whether a Home route still exists.
+  // Keep its stable id and product scope; only a successful read can remove it.
+  if (!categoriesAuthoritative) {
+    if (pendingLink === selectedCategory) pendingLink = undefined;
+    return { invalidatedSelection: false, intentVersion: categoryIntentVersion };
+  }
+  if (pendingLink && pendingLinkIntentVersion === categoryIntentVersion) {
+    // A Home category can be newer than Shop's cached catalog. Once discovery has
+    // finished, an unmatched route is obsolete; return to All instead of retaining
+    // the previously selected category.
+    selectedCategory = matchCategory(pendingLink) ?? ALL;
+    pendingLink = undefined;
+  } else if (pendingLink && pendingLinkIntentVersion !== categoryIntentVersion) {
+    pendingLink = undefined;
+  }
+  const invalidatedSelection = selectedCategory !== ALL && !categories.some((category) => category.id === selectedCategory);
+  if (invalidatedSelection) selectedCategory = ALL;
+  return { invalidatedSelection, intentVersion: categoryIntentVersion };
+}
+
+type CachedCard = ProductCard & {
+  cachePrice?: number; cacheCreated?: string; cacheName?: string;
+  cacheOptions?: Record<string, string[]>; cacheCurrency?: string; legacyCache?: boolean;
+};
+
+/** Migrate the former himi-store-shop row shape in memory: the entity name stayed the same. */
+function cachedCard(value: unknown): CachedCard | undefined {
+  const raw = value as (ProductCard & { subtitle?: string; initial?: string }) | undefined;
+  if (!raw?.id || typeof raw.name !== "string") return undefined;
+  if (typeof raw.noTagRow === "boolean" && typeof raw.notOnSale === "boolean") return raw as CachedCard;
+  const image = typeof raw.image === "string" ? raw.image : "";
+  const price = typeof raw.commercePrice === "string" && raw.commercePrice ? raw.commercePrice : raw.subtitle ?? "";
+  return {
+    id: raw.id, name: raw.name, image, hasImage: typeof raw.hasImage === "boolean" ? raw.hasImage : !!image,
+    noImage: typeof raw.noImage === "boolean" ? raw.noImage : !image, initial: raw.initial ?? raw.name.slice(0, 1).toUpperCase(),
+    price, wasPrice: "", onSale: false, notOnSale: true, saved: false, notSaved: true,
+    swatch1: "", swatch2: "", swatch3: "", swatch4: "", swatch5: "",
+    swatch1Hidden: true, swatch2Hidden: true, swatch3Hidden: true, swatch4Hidden: true, swatch5Hidden: true,
+    noSwatches: true, noTagRow: true, commercePrice: raw.commercePrice ?? price,
+    detailScreenId: raw.detailScreenId || "himi_product", legacyCache: true,
+  };
+}
+
+async function readCachedCards(): Promise<CachedCard[]> {
+  try {
+    return ((await getAll(ENTITY)) as unknown[]).map(cachedCard).filter((c): c is CachedCard => !!c);
+  } catch { return []; }
+}
+function writeCachedCards(list: Row[], snapshotCurrency?: string): void {
+  const writeGeneration = ++cacheWriteGeneration;
+  const snapshot = list.map(r => ({
+    ...r.card, subtitle: r.card.price,
+    cachePrice: r.price, cacheCreated: r.created, cacheName: r.name, cacheOptions: r.options, cacheCurrency: snapshotCurrency,
+  } as unknown as DbEntity));
+  cacheWriteQueue = cacheWriteQueue.then(async () => {
+    if (writeGeneration !== cacheWriteGeneration) return;
+    const cached = await getAll(ENTITY);
+    if (writeGeneration !== cacheWriteGeneration) return;
+    // Once a snapshot starts writing, finish it. A later complete snapshot queues behind
+    // it; switching or refreshing categories cannot strand a half-replaced catalog.
+    const keep = new Set(snapshot.map(row => row.id));
+    for (const row of snapshot) await upsert(ENTITY, row);
+    for (const item of cached) if (!keep.has(item.id)) await remove(ENTITY, item.id);
+  }).catch(() => { /* capability not granted → online-only */ });
+}
+
+function derive(s: S): S {
+  // The field keeps exactly what the shopper typed (a trailing space included); the match trims.
+  const typed = s.query.trim();
+  const q = typed.toLowerCase();
+  const next = applyFacets(s, q ? rows.filter((r) => r.name.includes(q)) : rows, currency);
+  const n = next.matched;
+  const ready = s.status === "ready";
+  const choices = [{ id: ALL, label: copyParam("shop.allChip", "All") }, ...categories.map((c) => ({ id: c.id, label: c.name }))];
+  return {
+    ...next,
+    isLoading: s.status === "loading",
+    notLoading: s.status !== "loading",
+    isErrored: s.status === "error",
+    notErrored: s.status !== "error",
+    noOffline: !s.fromCache,
+    categoryOptions: choices.map((c) => option(c, c.id === s.categorySelected)),
+    hideCategories: categories.length === 0,
+    countLabel: ready ? countText(n) : "",
+    noEmpty: !ready || n > 0,
+    emptyText: typed
+      ? copyTemplate("shop.noQueryMatch", "No products match “{query}”.", { query: typed })
+      : next.activeFilters
+        ? copyParam("shop.noMatchText", "No products match these filters.")
+        : s.categorySelected !== ALL
+          ? copyParam("shop.emptyCategoryText", "No products in this category yet.")
+          : copyParam("shop.emptyText", "No products are published yet."),
+  };
+}
+
+async function fetchPage(category: string, cursor?: string) {
+  return searchStoreProducts({ limit: PAGE, ...(category !== ALL ? { categoryId: category } : {}), ...(cursor ? { cursor } : {}) });
+}
+
+/** Fetch the rest of a scope in the background, a page at a time. A page that lands while
+ *  this scope is on screen re-derives — also after a round trip to another chip and back. */
+async function fetchRest(category: string, cursor: string): Promise<void> {
+  let next: string | undefined = cursor;
+  let failed = false;
+  const scope = scopes.get(category);
+  if (!scope) return;
+  const seenCursors = new Set<string>();
+  const seenProducts = new Set(scope.rows.map(row => row.card.id));
+  try {
+    while (next && scope.rows.length < MAX_PRODUCTS) {
+      if (scopes.get(category) !== scope) return;
+      if (seenCursors.has(next) || seenCursors.size >= 100) throw new Error("Product pagination did not advance");
+      seenCursors.add(next);
+      const res = await fetchPage(category, next);
+      if (scopes.get(category) !== scope) return;
+      const added = toRows(res.products ?? []).filter(row => {
+        if (seenProducts.has(row.card.id)) return false;
+        seenProducts.add(row.card.id);
+        return true;
+      });
+      scope.total = Math.max(scope.total ?? 0, res.pagingMetadata?.total ?? 0);
+      next = res.pagingMetadata?.cursors?.next ?? undefined;
+      if (!added.length && next) throw new Error("Product pagination made no progress");
+      scope.rows.push(...added.slice(0, MAX_PRODUCTS - scope.rows.length));
+      if (category === selectedCategory) await svc.scopeGrew();
+      if (!next && seenProducts.size < Math.min(scope.total, MAX_PRODUCTS)) throw new Error("Product pagination is incomplete");
+    }
+  } catch { failed = true; /* keep what arrived; pull to refresh tries again */ }
+  if (scopes.get(category) !== scope) return;
+  scope.complete = !failed;
+  scope.loading = false;
+  if (!failed && category === ALL) writeCachedCards(scope.rows, scope.currency);
+}
+
+/** Wait, a bounded number of turns, until the action that started fetch `gen` has committed
+ *  its state. Actions are not serialized and each commits when it resolves, so an answer that
+ *  comes back at once (a cache, a local fixture) could otherwise land first and then be
+ *  overwritten by the older action's skeleton. */
+async function committed(gen: number): Promise<void> {
+  for (let i = 0; i < 50 && (svc as unknown as { getState(): S }).getState().scopeGen !== gen; i++) await Promise.resolve();
+}
+
+async function publishCategoryState(): Promise<void> {
+  // A cached category read can settle before the load that selected its scope commits.
+  // Dispatch the sidecar against that committed state, including on a warm Home route.
+  await committed(generation);
+  if ((svc as unknown as { getState(): S }).getState().scopeGen !== generation) return;
+  await svc.loaded({ auxiliaryOnly: true });
+}
+
+async function publishAuxiliaryIfReady(): Promise<void> {
+  const pending = pendingAuxiliary;
+  if (!pending || pending.version !== auxiliaryVersion) return;
+  const current = (svc as unknown as { getState(): S }).getState();
+  if (current.status === "loading" || current.scopeGen !== generation) return;
+  pendingAuxiliary = undefined;
+  await svc.loaded({ cartCount: pending.cartCount, fresh: false, auxiliaryOnly: true });
+}
+
+/** Fetch `category`'s first page and hand it to `scopeLanded`. The action that started the
+ *  fetch has already returned: a search, a sort or another chip the shopper picks meanwhile
+ *  is current state, and a state captured before this await must never overwrite it. */
+async function fetchScope(category: string, gen: number, refresh = false): Promise<void> {
+  // A pull to refresh keeps what is on screen until the new page is in hand.
+  const shown = refresh ? scopes.get(category) : undefined;
+  try {
+    const res = await fetchPage(category);
+    if (gen !== generation) return;
+    if (pendingRefreshScopes.get(category) === gen) pendingRefreshScopes.delete(category);
+    const products: StoreProduct[] = res.products ?? [];
+    const cursor = res.pagingMetadata?.cursors?.next;
+    const loaded = toRows(products);
+    const total = res.pagingMetadata?.total;
+    // Keep partial live rows visible, but neither cache them nor suppress a later retry.
+    const complete = !cursor && new Set(loaded.map(row => row.card.id)).size >= Math.min(total ?? 0, MAX_PRODUCTS);
+    const scope = { rows: loaded, complete, loading: !!cursor, fromCache: false, currency: products.map(currencyOf).find(Boolean), total };
+    // Fresh data for this scope: every other scope refetches when the shopper next opens it.
+    if (refresh) scopes.clear();
+    scopes.set(category, scope);
+    rows = scope.rows;
+    currency = scope.currency ?? currency;
+    if (cursor) void fetchRest(category, cursor);
+    else if (scope.complete && category === ALL) writeCachedCards(scope.rows, scope.currency);
+    await committed(gen);
+    if (gen === generation) {
+      await svc.scopeLanded({ gen, category, status: "ready", fromCache: false });
+      await publishAuxiliaryIfReady();
+    }
+  } catch (error) {
+    if (gen !== generation) return;
+    if (pendingRefreshScopes.get(category) === gen) pendingRefreshScopes.delete(category);
+    if (shown) {
+      // A failed refresh is not a failed screen: the cards the shopper was looking at stay.
+      await committed(gen);
+      if (gen === generation) {
+        await svc.scopeLanded({ gen, category, status: "ready", fromCache: !!shown?.fromCache });
+        await publishAuxiliaryIfReady();
+      }
+      return;
+    }
+    // Offline: paint the last synced catalog — only for All, and never over an auth refusal.
+    const status = /HTTP (\d{3})/.exec(String(error))?.[1];
+    if (category === ALL && status !== "401" && status !== "403") {
+      const cached = await readCachedCards();
+      if (gen !== generation) return;
+      if (cached.length) {
+        const legacyCache = cached.some((card) => card.legacyCache || typeof card.cachePrice !== "number" || !card.cacheOptions);
+        rows = cached.map((card) => {
+          const stored = card;
+          currency ??= stored.cacheCurrency;
+          return {
+            card, price: Number.isFinite(stored.cachePrice) ? stored.cachePrice! : 0,
+            created: stored.cacheCreated ?? "", name: stored.cacheName ?? card.name.toLowerCase(), options: stored.cacheOptions ?? {},
+          };
+        });
+        scopes.set(category, { rows, complete: true, loading: false, fromCache: true, currency });
+        await committed(gen);
+        if (gen === generation) {
+          await svc.scopeLanded({ gen, category, status: "ready", fromCache: true, resetFacets: legacyCache && shouldResetLegacyCacheFacets() });
+          await publishAuxiliaryIfReady();
+        }
+        return;
+      }
+    }
+    rows = [];
+    await committed(gen);
+    if (gen === generation) {
+      await svc.scopeLanded({ gen, category, status: "error", fromCache: false });
+      await publishAuxiliaryIfReady();
+    }
+  } finally {
+    if (pendingScopes.get(category) === gen) pendingScopes.delete(category);
+    if (gen === generation && pendingRefreshScopes.get(category) === gen) pendingRefreshScopes.delete(category);
+  }
+}
+
+/** Make `category` the scope, committing the chip at once: from memory when it was fetched
+ *  before, else its skeleton now and its rows when `fetchScope` lands. `refresh` (pull to
+ *  refresh) fetches again but leaves the current cards up until the new page is in hand. */
+function showScope(s: S, category: string, refresh = false): S {
+  const pending = pendingScopes.get(category);
+  if (!refresh && category === selectedCategory && pending === generation) {
+    return derive({ ...s, status: "loading", fromCache: false, categorySelected: category, scopeGen: generation });
+  }
+  const known = scopes.get(category);
+  const needsRefresh = refresh || pendingRefreshScopes.has(category) || (!!known && !known.complete && !known.loading);
+  selectedCategory = category;
+  const gen = ++generation;
+  if (known) {
+    rows = known.rows;
+    currency = known.currency ?? currency;
+  }
+  if (known && !needsRefresh) {
+    return derive({ ...s, status: "ready", fromCache: !!known.fromCache, categorySelected: category, scopeGen: gen,
+      visible: PAGE_SIZE, cursorEpoch: s.cursorEpoch + 1 });
+  }
+  pendingScopes.set(category, gen);
+  if (needsRefresh) pendingRefreshScopes.set(category, gen);
+  void fetchScope(category, gen, needsRefresh);
+  const keep = needsRefresh && !!known && s.status === "ready";
+  return derive({ ...s, status: keep ? "ready" : "loading", categorySelected: category, scopeGen: gen,
+    ...(keep ? {} : { visible: PAGE_SIZE, cursorEpoch: s.cursorEpoch + 1 }) });
+}
+
+/** The categories and the cart count, then `loaded` — which reads the state as it is when
+ *  they land, not as it was when the load began. */
+function loadedState(s: S, arg?: unknown): S | undefined {
+  const { cartCount, fresh, auxiliaryOnly } = (arg ?? {}) as { cartCount?: number; fresh?: boolean; auxiliaryOnly?: boolean };
+  if (typeof cartCount === "number" && cartCount >= 0) loadedCartCount = cartCount;
+  const base = { ...s, cartCount: typeof cartCount === "number" && cartCount >= 0 ? cartCount : s.cartCount };
+  if (auxiliaryOnly) return derive(base);
+  const category = selectedCategory;
+  if (!fresh && category === s.categorySelected && pendingScopes.get(category) === generation) {
+    // A first-page failure has already committed its error state. A late cart/category
+    // sidecar must not turn that completed failure back into an unowned loading skeleton.
+    if (s.status === "error") return derive(base);
+    const landed = scopes.get(category);
+    if (landed) {
+      // The rows can land just before scopeLanded commits. A later overlapping load may
+      // invalidate that action result, so it must be able to publish the landed scope too.
+      return derive({
+        ...base,
+        status: "ready",
+        fromCache: !!landed.fromCache,
+        categorySelected: category,
+        scopeGen: generation,
+        ...(s.scopeGen === generation ? {} : { visible: PAGE_SIZE, cursorEpoch: s.cursorEpoch + 1 }),
+      });
+    }
+    // Boot load and onAppear load can overlap. This action may commit after scopeLanded,
+    // so only publish the pending generation if this state has not seen it yet. scopeLanded
+    // invalidates older load results in withIapPresentation before it publishes ready data.
+    return s.scopeGen === generation
+      ? (base.cartCount === s.cartCount ? undefined : derive({ ...base, status: "loading", fromCache: false }))
+      : derive({
+      ...base,
+      status: "loading",
+      fromCache: false,
+      categorySelected: category,
+      scopeGen: generation,
+      visible: PAGE_SIZE,
+      cursorEpoch: s.cursorEpoch + 1,
+      });
+  }
+  const scope = scopes.get(category);
+  const needsRefresh = fresh || !!scope?.fromCache || (!!scope && !scope.complete && !scope.loading);
+  return !needsRefresh && category === s.categorySelected && !!scope && s.status === "ready"
+    ? derive(base)
+    : showScope(base, category, needsRefresh);
+}
+
+async function load(s: S, arg?: unknown, fresh = false): Promise<S | undefined> {
+  stashCopy(arg);
+  const route = input(arg);
+  const routeCategory = route.categoryId ?? route.category;
+  if (!fresh && routeCategory && (
+    route.categoryActivation
+      ? route.categoryActivation !== lastRouteActivation
+      : !routeCategoryConsumed
+  )) {
+    lastRouteActivation = route.categoryActivation;
+    routeCategoryConsumed = true;
+    pendingLink = routeCategory.trim();
+    pendingLinkIntentVersion = categoryIntentVersion;
+  }
+  const loadIntentVersion = categoryIntentVersion;
+  // The initial catalog is useful before the optional category and cart reads land.
+  // Start it now. Its completion action merges auxiliary data only after the active
+  // scope has settled, so it cannot invalidate the pending product transition.
+  if (!pendingLink && selectedCategory === ALL) {
+    const initial = loadedState(s, { fresh });
+    const version = ++auxiliaryVersion;
+    void readCategories(fresh).then(async () => {
+      const { invalidatedSelection, intentVersion: invalidatedIntentVersion } = reconcileCategories();
+      // Category discovery has its own lifetime from the cart read. Publish it even when
+      // that read's count already landed or a newer onAppear superseded the count request.
+      await publishCategoryState();
+      await publishAuxiliaryIfReady();
+      // A category can disappear while the fast All-scope load is refreshing in the
+      // background. Resetting the worker's selection alone leaves the chip and rows on
+      // the removed scope; dispatch the real scope transition after this sidecar lands.
+      if (invalidatedSelection && loadIntentVersion !== invalidatedIntentVersion) {
+        // The All request started with the refresh was canceled by the chip tap, so
+        // switch back with a fresh All request instead of reviving its stale scope cache.
+        // Recheck the intent after the auxiliary action yields: a newer chip tap wins.
+        if (selectedCategory === ALL && categoryIntentVersion === invalidatedIntentVersion) {
+          await svc.selectCategory({ selectedIds: [ALL], refresh: true });
+        }
+      }
+    });
+    void cartItemCount().then(async (cartCount) => {
+      if (version !== auxiliaryVersion) return;
+      if (typeof cartCount === "number" && cartCount >= 0) loadedCartCount = cartCount;
+      pendingAuxiliary = { cartCount: cartCount ?? -1, version };
+      await publishAuxiliaryIfReady();
+    });
+    return initial;
+  }
+  // Home sends categoryId because it already knows the stable Wix id. Start that
+  // primary product request immediately while category discovery runs alongside it;
+  // the category list still validates the route and supplies the chip labels.
+  if (!fresh && route.categoryId && pendingLink === route.categoryId.trim()) {
+    const category = route.categoryId.trim();
+    const initial = showScope(s, category);
+    const version = ++auxiliaryVersion;
+    void readCategories(!matchCategory(category)).then(async () => {
+      const { invalidatedSelection, intentVersion } = reconcileCategories();
+      await publishCategoryState();
+      await publishAuxiliaryIfReady();
+      const routeStillCurrent = categoryIntentVersion === loadIntentVersion && intentVersion === loadIntentVersion;
+      if ((invalidatedSelection || !matchCategory(category)) && selectedCategory === ALL && routeStillCurrent) {
+        await svc.selectCategory({ selectedIds: [ALL], refresh: true });
+      }
+    });
+    void cartItemCount().then(async (cartCount) => {
+      if (version !== auxiliaryVersion) return;
+      if (typeof cartCount === "number" && cartCount >= 0) loadedCartCount = cartCount;
+      pendingAuxiliary = { cartCount: cartCount ?? -1, version };
+      await publishAuxiliaryIfReady();
+    });
+    return initial;
+  }
+  // A refresh of an already-selected category also starts its product request before
+  // waiting for category discovery. If that discovery removes the category, the same
+  // sidecar transitions back to All after the current selection is invalidated.
+  if (!pendingLink && selectedCategory !== ALL) {
+    const cartRead = cartItemCount();
+    const categoryRead = readCategories(fresh);
+    const version = ++auxiliaryVersion;
+    const current = (svc as unknown as { getState(): S }).getState();
+    const next = loadedState(current, { fresh });
+    void categoryRead.then(async () => {
+      const { invalidatedSelection, intentVersion } = reconcileCategories();
+      await publishCategoryState();
+      await publishAuxiliaryIfReady();
+      if (invalidatedSelection && selectedCategory === ALL && categoryIntentVersion === intentVersion) {
+        await svc.selectCategory({ selectedIds: [ALL], refresh: true });
+      }
+    });
+    void cartRead.then(async (cartCount) => {
+      if (version !== auxiliaryVersion) return;
+      if (typeof cartCount === "number" && cartCount >= 0) loadedCartCount = cartCount;
+      pendingAuxiliary = { cartCount: cartCount ?? -1, version };
+      await publishAuxiliaryIfReady();
+    });
+    return next;
+  }
+  // A route category needs category discovery, but neither it nor an already-selected
+  // category needs the cart count to start the primary product request.
+  const cartRead = cartItemCount();
+  const missingRouteCategory = !!pendingLink && !matchCategory(pendingLink);
+  await readCategories(fresh || missingRouteCategory);
+  const version = ++auxiliaryVersion;
+  reconcileCategories();
+  // Not awaited: an action waiting on another action of its own service never sees it run.
+  // Return the reducer result directly. Dispatching `svc.loaded()` from this active
+  // action leaves the follow-up scope transition pending in headless worker runs, so
+  // Shop never leaves its loading skeleton there even though the Wix response arrived.
+  // Loads resolve asynchronously and can overlap taps or one another. Use the committed
+  // state at completion so a late boot/onAppear result keeps transient UI such as an open
+  // filter sheet instead of restoring the action's stale snapshot.
+  const current = (svc as unknown as { getState(): S }).getState();
+  const next = loadedState(current, { fresh });
+  void cartRead.then(async (cartCount) => {
+    if (version !== auxiliaryVersion) return;
+    if (typeof cartCount === "number" && cartCount >= 0) loadedCartCount = cartCount;
+    pendingAuxiliary = { cartCount: cartCount ?? -1, version };
+    await publishAuxiliaryIfReady();
+  });
+  return next;
+}
+
+const view = readViewPrefs();
+const BOOT: S = derive({
+  ...FACETS_BOOT, ...view,
+  status: "loading", isLoading: true, notLoading: false, isErrored: false, notErrored: true, fromCache: false, noOffline: true,
+  categorySelected: ALL, scopeGen: 0, query: "", categoryOptions: [], hideCategories: true,
+  countLabel: "", noEmpty: true, emptyText: "", cartCount: 0,
+});
+
+const facets = facetActions<S>(derive);
+const CONTENT = ["load", "refresh", "retry", "loaded", "scopeLanded", "scopeGrew", "selectCategory", "search", "toggleSave", "loadMore", ...Object.keys(facets)];
+const register = withIapPresentation<S>({
+  // Restored from the last run, these painted a state this boot has not reached: a count over
+  // no cards, an open sheet, a stale scope generation that defeats `committed`, a search
+  // narrowing the list under an empty field. The shopper's view, sort and filters do persist.
+  prefix: "shop",
+  transientKeys: ["results", "query", "scopeGen", "status", "isLoading", "notLoading", "isErrored", "notErrored", "fromCache", "noOffline",
+    "countLabel", "noEmpty", "emptyText", "cartCount", "panel", "filtersOpen", "sortOpen", "categorySelected", "categoryOptions", "hideCategories",
+    "sortOptions", "sortLabel", "filterLabel", "activeFilters", "noActiveFilters", "priceChips", "priceSelected", "hidePrice",
+    "opt1Name", "opt1Chips", "opt1Selected", "hideOpt1", "opt2Name", "opt2Chips", "opt2Selected", "hideOpt2", "opt3Name", "opt3Chips", "opt3Selected", "hideOpt3",
+    "visible", "cursorEpoch", "matched", "nextCursor", "noMore", "showLabel", "hideGrid", "hideList", "hideComfortable", "hideCompact"],
+  contentActions: CONTENT,
+  forcePriceRefreshActions: ["load", "refresh", "retry"],
+  items: (state) => state.results.map((row) => ({ reference: { kind: "storesProduct", id: row.id }, commerceDisplayPrice: row.commercePrice })),
+  present: (state, price, _allowed, appleIapOrResolving) => ({ ...state, results: state.results.map((row) => {
+    const stored = row as typeof row & { commerceWasPrice?: string; commerceOnSale?: boolean };
+    const wasPrice = stored.commerceWasPrice ?? row.wasPrice;
+    const onSale = stored.commerceOnSale ?? row.onSale;
+    if (appleIapOrResolving(row.id)) return {
+      ...row,
+      commerceWasPrice: wasPrice,
+      commerceOnSale: onSale,
+      price: price(row.id, row.commercePrice) || row.price,
+      wasPrice: "",
+      onSale: false,
+      notOnSale: true,
+      noTagRow: row.noSwatches,
+    };
+    return {
+      ...row,
+      price: price(row.id, row.commercePrice) || row.price,
+      wasPrice,
+      onSale,
+      notOnSale: !onSale,
+      noTagRow: !onSale && row.noSwatches,
+    };
+  }) }),
+});
+
+type A = (s: S, arg?: unknown) => S | undefined | Promise<S | undefined>;
+const svc = register<S, Record<string, A>>("himiBrandedShop", {
+  state: BOOT,
+  actions: {
+    load: (s, arg) => load(s, arg),
+    // Pull to refresh: the categories and the scope again, from Wix.
+    refresh: (s, arg) => load(s, arg, true),
+    retry: (s) => showScope(s, s.categorySelected),
+    // The categories and the cart count landed (load / refresh).
+    loaded: (s, arg) => loadedState(s, arg),
+    // The first page of the scope on screen landed, or failed.
+    scopeLanded: (s, arg) => {
+      const { gen, category, status, fromCache, resetFacets } = (arg ?? {}) as { gen?: number; category?: string; status?: S["status"]; fromCache?: boolean; resetFacets?: boolean };
+      if (gen !== generation) return undefined;
+      return derive({ ...s, ...(loadedCartCount === undefined ? {} : { cartCount: loadedCartCount }), ...(resetFacets ? { sort: "recommended", priceSelected: [], opt1Selected: [], opt2Selected: [], opt3Selected: [] } : {}), status: status ?? "ready", fromCache: !!fromCache, categorySelected: category ?? selectedCategory, scopeGen: gen });
+    },
+    // A background page landed for the current scope.
+    scopeGrew: (s) => derive(s),
+    // Single-select: one chip is always chosen.
+    selectCategory: (s, arg) => {
+      // The chip row sends { selectedIds }; a deselected chip falls back to All.
+      const selection = arg as { selectedIds?: unknown; refresh?: boolean } | undefined;
+      const id = selection?.selectedIds !== undefined ? selected(arg)[0] ?? ALL : idOf(arg);
+      const refresh = selection?.refresh === true;
+      const cancelsPendingRoute = !!pendingLink || selectedCategory !== id;
+      categoryIntentVersion++;
+      pendingLink = undefined;
+      if (id !== ALL && !categories.some((c) => c.id === id)) return s;
+      selectedCategory = id;
+      // categorySelected is committed with the tap (showScope), so a tap back to the chip
+      // on screen while another category loads is a no-op on the right scope.
+      if (id === s.categorySelected) return cancelsPendingRoute || refresh ? showScope(s, id, refresh) : s;
+      const next = showScope(s, id, refresh);
+      const pending = pendingAuxiliary;
+      if (pending && pending.version === auxiliaryVersion && pending.cartCount >= 0) {
+        pendingAuxiliary = undefined;
+        loadedCartCount = pending.cartCount;
+        return derive({ ...next, cartCount: pending.cartCount });
+      }
+      return next;
+    },
+    search: (s, arg) => {
+      // Stored as typed: it is bound back into the field, and a trimmed copy would eat the
+      // space the shopper just typed before the next word.
+      const query = String((arg as { value?: unknown } | undefined)?.value ?? "").slice(0, 256);
+      if (query === s.query) return s;
+      return derive({ ...s, query, ...(query.trim() === s.query.trim() ? {} : { visible: PAGE_SIZE, cursorEpoch: s.cursorEpoch + 1 }) });
+    },
+    toggleSave: (s, arg) => {
+      try { toggleSaved(s.results, idOf(arg)); } catch { return s; }
+      return derive(s);
+    },
+    ...facets,
+    // The list view's load-more.
+    loadMore: (s) => facets.showMore(s),
+  },
+});
+
+svc.load();
+export { svc };