@wix/himalaya-cli 0.1536.0 → 0.1537.0

package/templates/yoga-studio/tier5-src/_shared/himi-bookings.ts

@@ -17,7 +17,8 @@ export function categoryName(value: unknown): string {
   return typeof name === "string" ? name.trim() : "";
 }
 
-import { zoneOffsetAt } from "./engine-intl.js";
+import { formatDateMedium, formatMonthDay, zoneOffsetAt } from "./engine-intl.js";
+import { formatServiceMoney, formatServicePrice, serviceCurrency } from "./wix-service-price.js";
 
 const HAS_OFFSET = /(?:Z|[+-]\d{2}:?\d{2})$/i;
 const LOCAL_TIME = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?/;
@@ -134,3 +135,122 @@ export function courseSessionsAvailability(entries: readonly CourseEntryShape[],
   const spots = counts.length ? Math.min(...counts) : undefined;
   return { found: true, spots, bookable: readComplete && upcoming.every((entry) => entry.bookable !== false) && spots !== 0 };
 }
+
+// ---- Price, duration and course dates ------------------------------------------------
+// One answer for the services list and the service screen, so a row and the screen it opens
+// say the same price and the same length. Each screen reads its own copy keys: the caller
+// passes a `BookingLabel` reader bound to its prefix ("service." on the service screen,
+// "services." on the list).
+
+/** Reads one copy line by its key suffix ("priceFree", "days"). `values` fills {placeholders}. */
+export type BookingLabel = (key: string, fallback: string, values?: Record<string, string | number>) => string;
+
+type PricedServiceShape = {
+  type?: string;
+  duration?: unknown;
+  payment?: {
+    rateType?: unknown;
+    fixed?: { price?: unknown };
+    varied?: { minPrice?: unknown; defaultPrice?: unknown };
+    custom?: { description?: unknown };
+  };
+  schedule?: {
+    firstSessionStart?: string;
+    lastSessionEnd?: string;
+    availabilityConstraints?: {
+      sessionDurations?: unknown[];
+      durations?: Array<{ minutes?: unknown } | undefined>;
+      durationRange?: {
+        hourOptions?: { minDurationInMinutes?: unknown; maxDurationInMinutes?: unknown };
+        dayOptions?: { minDurationInDays?: unknown; maxDurationInDays?: unknown };
+      };
+    };
+  };
+};
+
+function trimmed(value: unknown): string {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function finiteNumber(value: unknown): number | undefined {
+  if (typeof value === "number") return Number.isFinite(value) ? value : undefined;
+  if (typeof value === "string" && value.trim()) {
+    const n = Number(value);
+    return Number.isNaN(n) ? undefined : n;
+  }
+  return undefined;
+}
+
+export interface ServicePriceLine { text: string; unit: string; isText: boolean }
+
+/** The price line by rate type. FIXED → the price, no cents on a whole amount; VARIED →
+ *  "From {price}"; CUSTOM → the owner's description, no unit; NO_FEE → "Free", no unit. */
+export function servicePriceLine(service: PricedServiceShape, label: BookingLabel): ServicePriceLine {
+  const payment = service.payment ?? {};
+  const rate = trimmed(payment.rateType).toUpperCase();
+  const currency = serviceCurrency(service);
+  const unit = service.type === "COURSE"
+    ? label("unitParticipant", "per participant")
+    : label("unitSession", "per session");
+  if (rate === "NO_FEE") return { text: label("priceFree", "Free"), unit: "", isText: false };
+  if (rate === "CUSTOM") return { text: trimmed(payment.custom?.description), unit: "", isText: true };
+  if (rate === "VARIED") {
+    const from = formatServiceMoney(payment.varied?.minPrice, currency) || formatServiceMoney(payment.varied?.defaultPrice, currency);
+    return { text: from ? label("priceFrom", "From {price}", { price: from }) : "", unit: from ? unit : "", isText: false };
+  }
+  // FIXED, or a legacy payload with no rate type.
+  const text = formatServiceMoney(payment.fixed?.price, currency) || formatServicePrice(service);
+  return { text, unit: text ? unit : "", isText: false };
+}
+
+function minutesText(minutes: number): string {
+  if (minutes < 60) return `${minutes} min`;
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return rest ? `${hours} hr ${rest} min` : `${hours} hr`;
+}
+
+/** "45 min", "1 hr 30 min"; a service with several lengths, or a flexible range the
+ *  customer picks from: "30 min - 1 hr", "1 day - 3 days". "" when the record has none. */
+export function serviceDurationText(service: PricedServiceShape, label: BookingLabel): string {
+  const constraints = service.schedule?.availabilityConstraints;
+  const positive = (values: unknown[]) => values.map(finiteNumber).filter((n): n is number => n != null && n > 0);
+  const listed = positive([
+    ...(constraints?.sessionDurations ?? []),
+    ...(constraints?.durations ?? []).map((d) => d?.minutes),
+  ]);
+  const hours = constraints?.durationRange?.hourOptions;
+  const range = positive([hours?.minDurationInMinutes, hours?.maxDurationInMinutes]);
+  const days = constraints?.durationRange?.dayOptions;
+  const dayRange = positive([days?.minDurationInDays, days?.maxDurationInDays]);
+  if (!listed.length && !range.length && dayRange.length) {
+    const dayText = (n: number) => (n === 1 ? label("day", "1 day") : label("days", "{n} days", { n }));
+    const first = Math.min(...dayRange);
+    const last = Math.max(...dayRange);
+    return first === last ? dayText(first) : `${dayText(first)} - ${dayText(last)}`;
+  }
+  const minutes = listed.length ? listed : range.length ? range : positive([service.duration]);
+  if (!minutes.length) return "";
+  const min = Math.min(...minutes);
+  const max = Math.max(...minutes);
+  return min === max ? minutesText(min) : `${minutesText(min)} - ${minutesText(max)}`;
+}
+
+function validDate(value: string | undefined): Date | undefined {
+  if (!value) return undefined;
+  const date = new Date(value);
+  return Number.isFinite(date.getTime()) ? date : undefined;
+}
+
+function shortDate(date: Date, year: boolean): string {
+  return year ? formatDateMedium(date, "en") : formatMonthDay(date, "en");
+}
+
+/** A course's dates, "Nov 3 – Dec 15, 2026" (the year on the first date only when the two
+ *  differ). "" when the record has no first or last session. */
+export function courseDatesText(service: PricedServiceShape): string {
+  const first = validDate(service.schedule?.firstSessionStart);
+  const last = validDate(service.schedule?.lastSessionEnd);
+  if (!first || !last) return "";
+  return `${shortDate(first, first.getFullYear() !== last.getFullYear())} – ${shortDate(last, true)}`;
+}

package/templates/yoga-studio/tier5-src/himi-booking-service/index.ts

@@ -3,8 +3,8 @@ import { defineService, navigate } from "@himalaya/state";
 import { share as shareSheet } from "@himalaya/share";
 import { open, defaultMode } from "@himalaya/open-url";
 import { getService, queryServiceAvailability, type WixAvailabilityEntry, type WixService, type WixServiceAddress, type WixServiceBookingPolicy } from "@himalaya/wix-bookings";
-import { categoryName, courseReadWindows, courseSessionsAvailability, courseWindowOpen, slotStartInstant } from "../_shared/himi-bookings.js";
-import { formatServicePrice, formatServiceMoney, serviceCurrency } from "../_shared/wix-service-price.js";
+import { categoryName, courseDatesText, courseReadWindows, courseSessionsAvailability, courseWindowOpen, serviceDurationText, servicePriceLine, slotStartInstant, type BookingLabel, type ServicePriceLine } from "../_shared/himi-bookings.js";
+import { formatServiceMoney, serviceCurrency } from "../_shared/wix-service-price.js";
 import { stashCopy, copyParam, copyTemplate, copyPlural } from "../_shared/himi-copy.js";
 import { get, type DbEntity } from "@himalaya/local-db";
 import { wixMediaUrl, WIX_DETAIL_IMAGE, WIX_LIST_IMAGE } from "@himalaya/wix-media";
@@ -169,26 +169,12 @@ function numberOf(value: unknown): number | undefined {
 
 // ---- Price -----------------------------------------------------------------------
 
-interface PriceLine { text: string; unit: string; isText: boolean }
+/** The service screen's copy keys for the shared price, duration and course-date lines. */
+const serviceLabel: BookingLabel = (key, fallback, values) =>
+  values ? copyTemplate(`service.${key}`, fallback, values) : copyParam(`service.${key}`, fallback);
 
-/** The price line by rate type. FIXED → the price; VARIED → "From {price}"; CUSTOM → the
- *  owner's description, no unit; NO_FEE → "Free", no unit. */
-function priceLine(service: WixService): PriceLine {
-  const payment = service.payment ?? {};
-  const rate = stringOf(payment.rateType).toUpperCase();
-  const currency = serviceCurrency(service);
-  const unit = service.type === "COURSE"
-    ? copyParam("service.unitParticipant", "per participant")
-    : copyParam("service.unitSession", "per session");
-  if (rate === "NO_FEE") return { text: copyParam("service.priceFree", "Free"), unit: "", isText: false };
-  if (rate === "CUSTOM") return { text: stringOf(payment.custom?.description), unit: "", isText: true };
-  if (rate === "VARIED") {
-    const from = formatServiceMoney(payment.varied?.minPrice, currency) || formatServiceMoney(payment.varied?.defaultPrice, currency);
-    return { text: from ? copyTemplate("service.priceFrom", "From {price}", { price: from }) : "", unit: from ? unit : "", isText: false };
-  }
-  // FIXED, or a legacy payload with no rate type.
-  const text = formatServiceMoney(payment.fixed?.price, currency) || formatServicePrice(service);
-  return { text, unit: text ? unit : "", isText: false };
+function priceLine(service: WixService): ServicePriceLine {
+  return servicePriceLine(service, serviceLabel);
 }
 
 // ---- Media -----------------------------------------------------------------------
@@ -233,37 +219,8 @@ function legacyImageUrl(value: unknown): string {
 
 // ---- Duration --------------------------------------------------------------------
 
-function minutesText(minutes: number): string {
-  if (minutes < 60) return `${minutes} min`;
-  const hours = Math.floor(minutes / 60);
-  const rest = minutes % 60;
-  return rest ? `${hours} hr ${rest} min` : `${hours} hr`;
-}
-
-/** "45 min", "1 hr 30 min"; a service with several lengths, or a flexible range the
- *  customer picks from: "30 min - 1 hr", "1 day - 3 days". */
 function durationText(service: WixService): string {
-  const constraints = service.schedule?.availabilityConstraints;
-  const positive = (values: unknown[]) => values.map(numberOf).filter((n): n is number => n != null && n > 0);
-  const listed = positive([
-    ...(constraints?.sessionDurations ?? []),
-    ...(constraints?.durations ?? []).map((d) => d?.minutes),
-  ]);
-  const hours = constraints?.durationRange?.hourOptions;
-  const range = positive([hours?.minDurationInMinutes, hours?.maxDurationInMinutes]);
-  const days = constraints?.durationRange?.dayOptions;
-  const dayRange = positive([days?.minDurationInDays, days?.maxDurationInDays]);
-  if (!listed.length && !range.length && dayRange.length) {
-    const dayText = (n: number) => (n === 1 ? copyParam("service.day", "1 day") : copyTemplate("service.days", "{n} days", { n }));
-    const first = Math.min(...dayRange);
-    const last = Math.max(...dayRange);
-    return first === last ? dayText(first) : `${dayText(first)} - ${dayText(last)}`;
-  }
-  const minutes = listed.length ? listed : range.length ? range : positive([service.duration]);
-  if (!minutes.length) return "";
-  const min = Math.min(...minutes);
-  const max = Math.max(...minutes);
-  return min === max ? minutesText(min) : `${minutesText(min)} - ${minutesText(max)}`;
+  return serviceDurationText(service, serviceLabel);
 }
 
 // ---- Locations -------------------------------------------------------------------
@@ -497,10 +454,7 @@ function shortDate(date: Date, year: boolean): string {
 }
 
 function courseDates(service: WixService): string {
-  const first = validDate(service.schedule?.firstSessionStart);
-  const last = validDate(service.schedule?.lastSessionEnd);
-  if (!first || !last) return "";
-  return `${shortDate(first, first.getFullYear() !== last.getFullYear())} – ${shortDate(last, true)}`;
+  return courseDatesText(service);
 }
 
 function spotCount(entry: WixAvailabilityEntry | undefined): number | undefined {

package/templates/yoga-studio/tier5-src/himi-booking-services/index.ts

@@ -1,16 +1,20 @@
 // Tier-5 bundle: himi-booking — customer-facing services catalog.
 //
-// Visitors can browse the site's Wix Bookings services. The worker keeps a local
-// backing list for instant on-device search and exposes explicit flags so the
-// descriptor can render loading, empty, error, and loaded states without raw
+// Visitors browse the site's Wix Bookings services in the business's own order (the
+// order of the site's Book Online page), narrowed by category chips and a name search.
+// Each row carries what the service record has: photo, name, tagline, a Class or
+// Course tag, and duration and price in the same words as the service screen. "Book"
+// shows only where online booking by time is possible. The worker exposes explicit
+// flags so the descriptor renders loading, empty, error and loaded states without raw
 // JavaScript conditions in the screen tree.
 import { defineBackendCollection } from "../_shared/collection-service.js";
-import { queryServices, type WixService } from "@himalaya/wix-bookings";
-import { categoryName } from "../_shared/himi-bookings.js";
+import { COLLECTION_CHROME_MIN_ITEMS } from "../_shared/collection-contract.js";
+import { queryServiceCategories, queryServices, type WixService } from "@himalaya/wix-bookings";
+import { categoryName, courseDatesText, serviceDurationText, servicePriceLine, type BookingLabel } from "../_shared/himi-bookings.js";
 import { formatServicePrice } from "../_shared/wix-service-price.js";
 import { getAll, upsert, type DbEntity } from "@himalaya/local-db";
 import { initials } from "../_shared/himi-text.js";
-import { stashCopy, copyParam } from "../_shared/himi-copy.js";
+import { copyParam, copyTemplate } from "../_shared/himi-copy.js";
 import { offsetPage } from "../_shared/offset-page.js";
 import { wixMediaUrl } from "@himalaya/wix-media";
 
@@ -24,7 +28,15 @@ import { wixMediaUrl } from "@himalaya/wix-media";
 // safe across every consuming app.
 const ENTITY = "services";
 async function readCachedRows(): Promise<Row[]> {
-  try { return (await getAll(ENTITY)) as unknown as Row[]; } catch { return []; }
+  try {
+    const rows = (await getAll(ENTITY)) as unknown as Partial<Row>[];
+    // The store keeps its own insertion order; the business's order is each row's cached position
+    // (rows saved before positions existed keep their store order, after the positioned ones).
+    const at = (row: Partial<Row>) => (typeof row.position === "number" ? row.position : Number.MAX_SAFE_INTEGER);
+    return rows.map((row, index) => ({ row, index }))
+      .sort((a, b) => at(a.row) - at(b.row) || a.index - b.index)
+      .map(({ row }) => withRowDefaults(row));
+  } catch { return []; }
 }
 async function writeCachedRows(rows: Row[]): Promise<void> {
   try { for (const r of rows) await upsert(ENTITY, r as unknown as DbEntity); } catch { /* capability not granted → online-only */ }
@@ -40,8 +52,29 @@ interface Row {
   hasImage: boolean;
   noImage: boolean;
   category: string;
+  /** The category's place in the business's order; -1 when the record has none. */
+  categoryOrder: number;
+  /** The row's place in the business's order when it was read (the offline copy is sorted by it). */
+  position?: number;
+  tagline: string;
+  /** "Class" or "Course"; "" for an appointment. */
+  typeTag: string;
+  noTypeTag: boolean;
+  /** "1 hr · ₪70"; a course: "Nov 3 – Dec 15, 2026 · ₪1,200". "" when the record has neither. */
+  meta: string;
+  /** Online booking by time is possible: online booking is on and the service is not a course. */
+  canBook: boolean;
+  noBook: boolean;
+  /** The pill's word: "Book", or "Request" when the business approves each booking by hand
+   *  (the service screen's "Request to Book"). Both open the time screen. */
+  bookCta: string;
+  bookA11y: string;
+  /** The row's spoken name: name, type tag, tagline and meta. */
+  a11y: string;
 }
 
+interface CategoryChip { id: string; label: string }
+
 interface S {
   status: "loading" | "ready";
   query: string;
@@ -61,6 +94,17 @@ interface S {
   notLoading: boolean;
   hasResults: boolean;
   noEmpty: boolean;
+  categoryChips: CategoryChip[];
+  hideCategories: boolean;
+  /** Loading with no rows to show: the skeleton stands in for the list. */
+  hideRows: boolean;
+  /** The no-match line: a search miss, or a chosen category with nothing in it. */
+  noMatchText: string;
+  /** Which way out the no-match block offers: Clear Search (a query), else Show All. */
+  hasQuery: boolean;
+  noQuery: boolean;
+  /** The chips' spoken name, from the copy pack (a descriptor accessibilityLabel is not rewritten). */
+  categoriesLabel: string;
 }
 
 function strOf(arg: unknown): string {
@@ -69,13 +113,19 @@ function strOf(arg: unknown): string {
   return a?.value ?? a?.text ?? "";
 }
 
+/** The list's copy keys for the shared price, duration and course-date lines. */
+const listLabel: BookingLabel = (key, fallback, values) =>
+  values ? copyTemplate(`services.${key}`, fallback, values) : copyParam(`services.${key}`, fallback);
+
+/** The old subtitle's price: Branded Web's book screen still shows it. */
 function money(service: WixService): string {
   // Delegates to the shared formatter so the Bookings v2 `payment.fixed.price`
   // shape + the record's real currency (₪, not a hardcoded $) are honored (#816).
   return formatServicePrice(service);
 }
 
-function durationText(service: WixService): string {
+/** The old subtitle's duration (whole service length only): Branded Web still shows it. */
+function subtitleDuration(service: WixService): string {
   const minutes = Number((service as { duration?: number }).duration ?? 0);
   if (!minutes) return "";
   if (minutes < 60) return `${minutes} min`;
@@ -125,6 +175,31 @@ function imageUrl(service: WixService): string {
   return mediaUrl(service);
 }
 
+function categoryOrder(value: unknown): number {
+  const order = value && typeof value === "object" ? (value as { sortOrder?: unknown }).sortOrder : undefined;
+  return typeof order === "number" && Number.isFinite(order) ? order : -1;
+}
+
+function typeTagOf(type: unknown): string {
+  if (type === "CLASS") return copyParam("services.tagClass", "Class");
+  if (type === "COURSE") return copyParam("services.tagCourse", "Course");
+  return "";
+}
+
+function spokenName(row: Pick<Row, "name" | "typeTag" | "tagline" | "meta">): string {
+  return [row.name, row.typeTag, row.tagline, row.meta].filter(Boolean).join(", ");
+}
+
+function bookCtaFor(request: boolean): string {
+  return request ? copyParam("services.requestCta", "Request") : copyParam("services.bookCta", "Book");
+}
+
+function bookLabel(name: string, request = false): string {
+  return request
+    ? copyTemplate("services.requestLabel", "Request to book {name}", { name })
+    : copyTemplate("services.bookLabel", "Book {name}", { name });
+}
+
 function norm(service: WixService): Row {
   const id = service.id || "service";
   const name = service.name || "Service";
@@ -132,14 +207,22 @@ function norm(service: WixService): Row {
     // Live payloads carry `category` as a structured object — extract the name
     // (raw join rendered "[object Object] · 1 hr · $111", production sweep R3).
     categoryName(service.category),
-    durationText(service),
+    subtitleDuration(service),
     money(service),
   ].filter(Boolean);
   const image = imageUrl(service);
+  const isCourse = service.type === "COURSE";
+  const price = servicePriceLine(service, listLabel).text;
+  const meta = [isCourse ? courseDatesText(service) : serviceDurationText(service, listLabel), price].filter(Boolean).join(" · ");
+  const typeTag = typeTagOf(service.type);
+  const tagline = typeof service.tagLine === "string" ? service.tagLine.trim() : "";
+  const canBook = service.onlineBooking?.enabled !== false && !isCourse;
+  const request = service.onlineBooking?.requireManualApproval === true;
   return {
     id,
     name,
     category: categoryName(service.category),
+    categoryOrder: categoryOrder(service.category),
     subtitle: bits.length ? bits.join(" · ") : "Choose a time",
     // WS-C — canonical param-less detail screenId; the descriptor row binds the
     // separate `id` field as a first-class nav param (no more baked suffixes).
@@ -148,13 +231,123 @@ function norm(service: WixService): Row {
     image,
     hasImage: !!image,
     noImage: !image,
+    tagline,
+    typeTag,
+    noTypeTag: !typeTag,
+    meta,
+    canBook,
+    noBook: !canBook,
+    bookCta: bookCtaFor(request),
+    bookA11y: bookLabel(name, request),
+    a11y: spokenName({ name, typeTag, tagline, meta }),
+  };
+}
+
+/** A row saved by an older worker (offline cache, restored state) has none of the new
+ *  fields: it renders with no tagline, meta or tag, and no Book pill until the live read. */
+function withRowDefaults(row: Partial<Row>): Row {
+  const name = typeof row.name === "string" && row.name ? row.name : "Service";
+  const str = (v: unknown) => (typeof v === "string" ? v : "");
+  const image = str(row.image);
+  const typeTag = str(row.typeTag);
+  const tagline = str(row.tagline);
+  const meta = str(row.meta);
+  const canBook = row.canBook === true;
+  return {
+    ...row,
+    id: str(row.id),
+    name,
+    subtitle: str(row.subtitle),
+    detailScreenId: str(row.detailScreenId) || "himi_service",
+    initial: str(row.initial),
+    image,
+    hasImage: !!image,
+    noImage: !image,
+    category: str(row.category),
+    categoryOrder: typeof row.categoryOrder === "number" ? row.categoryOrder : -1,
+    tagline,
+    typeTag,
+    noTypeTag: !typeTag,
+    meta,
+    canBook,
+    noBook: !canBook,
+    bookCta: str(row.bookCta) || bookCtaFor(false),
+    bookA11y: str(row.bookA11y) || bookLabel(name),
+    a11y: str(row.a11y) || spokenName({ name, typeTag, tagline, meta }),
   };
 }
 
+// ---- Category chips ---------------------------------------------------------------
+// The site's categories, read once per worker in the background — never holding back the
+// services page — in the owner's order. When the read lands, the chips repaint. A failed read
+// is tried again at most once a minute. Until it succeeds, the categories of the latest rows
+// loaded with no filter and no query stand in, ordered by `category.sortOrder`.
+let siteCategories: string[] | undefined;
+let categoriesInFlight = false;
+let categoriesFailedAt = 0;
+const CATEGORY_RETRY_MS = 60_000;
+const rowCategories = new Map<string, number>();
+
+/** Repaint the chips only, on the state already shown. Re-deriving from the query controller
+ *  would publish its working state, which a revalidation deliberately holds back (a restored list
+ *  would flash to the skeleton, or shrink to page 1, until every page is back). */
+function republish(): void {
+  (svc as unknown as { categoriesLanded?: () => unknown }).categoriesLanded?.();
+}
+
+function withChips(s: S): S {
+  const collection = (s as unknown as { collection?: { filter?: unknown; query?: unknown; hideChrome?: unknown } }).collection;
+  const filter = typeof collection?.filter === "string" ? collection.filter : "all";
+  // Restored rows stand in for the categories when the read failed before any live page — only
+  // rows of the whole list (no category, no query), or the stand-in would be one category.
+  const whole = filter === "all" && !(typeof collection?.query === "string" && collection.query.trim());
+  // Not while a load is out: the rows on screen may still be a previous search's.
+  if (!siteCategories?.length && rowCategories.size === 0 && whole && s.isLoading !== true) rememberRowCategories((s.results ?? []).map(withRowDefaults));
+  const chips = categoryChips(filter);
+  return { ...s, categoryChips: chips, hideCategories: collection?.hideChrome === true || (chips.length < 3 && !filter.startsWith("value:")) };
+}
+
+function startCategoriesRead(): void {
+  if (siteCategories || categoriesInFlight) return;
+  if (categoriesFailedAt && Date.now() - categoriesFailedAt < CATEGORY_RETRY_MS) return;
+  categoriesInFlight = true;
+  queryServiceCategories().then((res) => {
+    const names = (res.categories ?? []).map((category) => categoryName(category)).filter(Boolean);
+    siteCategories = [...new Set(names)];
+  }, () => {
+    categoriesFailedAt = Date.now();
+  }).then(() => {
+    categoriesInFlight = false;
+    republish();
+  });
+}
+
+function rememberRowCategories(rows: Row[]): void {
+  for (const row of rows) {
+    if (row.category && !rowCategories.has(row.category)) rowCategories.set(row.category, row.categoryOrder);
+  }
+}
+
+function categoryNames(): string[] {
+  if (siteCategories?.length) return siteCategories;
+  const listed = [...rowCategories.entries()].map(([name, order], index) => ({ name, order, index }));
+  listed.sort((a, b) => (a.order < 0 ? Infinity : a.order) - (b.order < 0 ? Infinity : b.order) || a.index - b.index);
+  return listed.map((entry) => entry.name);
+}
+
+function categoryChips(filter: string): CategoryChip[] {
+  const names = categoryNames();
+  const chosen = filter.startsWith("value:") ? filter.slice(6) : "";
+  // The chosen category stays, so the customer can always go back to All.
+  const all = chosen && !names.includes(chosen) ? [...names, chosen] : names;
+  return [{ id: "all", label: copyParam("services.allCategories", "All") }, ...all.map((name) => ({ id: `value:${name}`, label: name }))];
+}
+
 const svc = defineBackendCollection<S, Row>("himiBookingServices", {
   restorePagesOnLoad: true,
   state: { status: "loading", query: "", all: [], results: [], emptyText: "", countLabel: "", errored: false,
-    notErrored: true, isLoading: true, notLoading: false, hasResults: false, noEmpty: true },
+    notErrored: true, isLoading: true, notLoading: false, hasResults: false, noEmpty: true,
+    categoryChips: [], hideCategories: true, hideRows: false, noMatchText: "", hasQuery: false, noQuery: true, categoriesLabel: "" },
   source: {
     id: row => row.id,
     errorMessage: () => copyParam("services.errorText", "Services could not be loaded."),
@@ -163,28 +356,81 @@ const svc = defineBackendCollection<S, Row>("himiBookingServices", {
       return { items: await readCachedRows(), nextCursor: "", metadata: { fromCache: true } };
     },
     async fetch(criteria, cursor) {
-      if (criteria.filter === "saved" && !criteria.savedIds.length) return { items: [], nextCursor: "" };
+      // There is no Saved chip any more: a "saved" filter persisted by the old chrome lists everything.
       const filter: Record<string, unknown> = { hidden: { $ne: true } };
       if (criteria.query) filter.name = { $startsWith: criteria.query };
-      if (criteria.filter === "saved") filter.id = { $in: criteria.savedIds };
       if (criteria.filter.startsWith("value:")) filter["category.name"] = { $eq: criteria.filter.slice(6) };
-      const res = await queryServices({ query: { filter, paging: { limit: 50, offset: Number(cursor || 0) },
-        sort: [{ fieldName: criteria.sort === "default" ? "createdDate" : "name", order: criteria.sort === "za" ? "DESC" : "ASC" }, { fieldName: "id", order: "ASC" }] } });
+      // The business's own order — the order of the site's Book Online page.
+      const sort = criteria.sort === "default"
+        ? [{ fieldName: "category.sortOrder", order: "ASC" as const }, { fieldName: "sortOrder", order: "ASC" as const }, { fieldName: "id", order: "ASC" as const }]
+        : [{ fieldName: "name", order: criteria.sort === "za" ? "DESC" as const : "ASC" as const }, { fieldName: "id", order: "ASC" as const }];
+      if (!cursor) startCategoriesRead();
+      const res = await queryServices({ query: { filter, paging: { limit: 50, offset: Number(cursor || 0) }, sort } });
       const raw = res.services ?? [];
-      const items = raw.filter(row => !!row.id).map(norm);
-      await writeCachedRows(items);
+      const offset = Number(cursor || 0);
+      const items = raw.filter(row => !!row.id).map((service, index) => ({ ...norm(service), position: offset + index }));
+      // Only a read of the whole list in the business's order is saved: the offline copy is read
+      // back as that list, and a narrowed or re-sorted read's positions are not positions in it.
+      if (!criteria.query && !criteria.filter.startsWith("value:") && criteria.sort === "default") await writeCachedRows(items);
       return { items, ...offsetPage(cursor, raw.length, 50, res.pagingMetadata), metadata: { fromCache: false } };
     },
   },
+  actions: {
+    categoriesLanded: (s) => withChips(s),
+    // A snapshot saved by an older worker comes back without the new row fields; a missing
+    // `noBook` would show Book on a course until the live read. Give restored rows the defaults.
+    normalizeRestored: (s) => {
+      const rows = Array.isArray(s.results) ? s.results : [];
+      if (rows.every((row) => typeof (row as Partial<Row>).noBook === "boolean")) return s;
+      const fixed = rows.map((row) => withRowDefaults(row as Partial<Row>));
+      return { ...s, results: fixed, all: fixed };
+    },
+  },
   apply(s, page) {
     const loading = page.status === "loading";
     const errored = page.status === "error";
-    return { ...s, status: loading ? "loading" : "ready", query: page.criteria.query, all: page.items, results: page.items,
+    const rows = page.items.map(withRowDefaults);
+    // The stand-in categories come from the accepted rows of the whole list (a superseded
+    // response never reaches apply): a live page replaces them, the device's copy only fills a gap.
+    if (!page.criteria.query && page.criteria.filter === "all" && rows.length > 0) {
+      // Only a settled page: while a page reloads, the list may still hold the previous
+      // (searched) rows under the new criteria.
+      if (page.metadata?.fromCache !== true) { if (!loading) { rowCategories.clear(); rememberRowCategories(rows); } }
+      else if (rowCategories.size === 0) rememberRowCategories(rows);
+    }
+    // The same rule as the shared `collection.hideChrome`: no search or chips over a short,
+    // un-narrowed list, an empty source, or before the first rows arrive.
+    const filtered = page.criteria.filter.startsWith("value:");
+    const hasQuery = !!page.criteria.query.trim();
+    const narrowed = hasQuery || filtered;
+    const sourceEmpty = !loading && !errored && rows.length === 0 && !narrowed;
+    const hideChrome = (!narrowed && !page.nextCursor && rows.length < COLLECTION_CHROME_MIN_ITEMS) || sourceEmpty
+      || ((loading || errored) && rows.length === 0 && !narrowed);
+    const chips = categoryChips(page.criteria.filter);
+    return { ...s, status: loading ? "loading" : "ready", query: page.criteria.query, all: rows, results: rows,
+      categoryChips: chips, hideCategories: hideChrome || (chips.length < 3 && !filtered), hideRows: loading && rows.length === 0,
+      noMatchText: hasQuery ? copyParam("services.noMatchText", "No services match your search.")
+        : copyParam("services.categoryEmptyText", "There are no services in this category."),
+      hasQuery, noQuery: !hasQuery, categoriesLabel: copyParam("services.categoriesLabel", "Service categories"),
       nextCursor: page.nextCursor, complete: page.complete, total: page.total, loadingMore: page.loadingMore, pageError: page.pageError,
       fromCache: page.metadata?.fromCache === true, errored, notErrored: !errored, isLoading: loading, notLoading: !loading,
       hasResults: page.items.length > 0, noEmpty: true, countLabel: "",
-      emptyText: errored ? copyParam("services.errorText", "Services could not be loaded.") : copyParam("services.emptyText", "No bookable services match this view.") };
+      // Only when there is nothing to show: Branded Web's book pane prints this line as it is.
+      emptyText: errored ? copyParam("services.errorText", "Services could not be loaded.")
+        : loading || rows.length > 0 ? ""
+        : hasQuery ? copyParam("services.noMatchText", "No services match your search.")
+        : filtered ? copyParam("services.categoryEmptyText", "There are no services in this category.")
+        : copyParam("services.emptyText", "There are no services to book yet.") };
   },
 });
+// The old chrome could persist a "saved" filter (there is no Saved chip now) or an A-Z sort
+// (there is no Refine now): both go back to the business's own view before the first read.
+type Retired = { getState?: () => { collection?: { filter?: unknown; sort?: unknown } };
+  collectionFilter?: (arg: unknown) => unknown; collectionSort?: (arg: unknown) => unknown };
+(svc as unknown as { normalizeRestored?: () => unknown }).normalizeRestored?.();
+const retired = svc as unknown as Retired;
+const persisted = retired.getState?.()?.collection;
+if (persisted?.filter === "saved") void retired.collectionFilter?.({ selectedIds: ["all"] });
+if (typeof persisted?.sort === "string" && persisted.sort !== "default") void retired.collectionSort?.({ selectedId: "default" });
 svc.load();
 export { svc };