@wix/agent-skills 1.20.0 → 1.20.1

package/skills/wix-headless-fast/references/restaurants/app/hooks/restaurants/useReservation.ts

@@ -1,177 +1,34 @@
-// The whole table-reservation state machine: location, date + party size, AVAILABLE slots,
-// the 10-minute hold, the details form, and confirm. All correctness (AVAILABLE-only slots,
-// hold → reserve with the revision, firstName + E.164 phone, RESERVED vs REQUESTED) lives in
-// the data layer — this hook orchestrates; you own how it looks. Client-only: availability
-// is timezone-specific, so render the surface with client:only="react" in Astro.
-import { useEffect, useState } from "react";
-import {
-  completeReservation,
-  fetchReservationLocations,
-  fetchReservationSlots,
-  holdReservation,
-} from "../../wix/restaurants/reservations";
-import type {
-  ReservationConfirmation,
-  ReservationHold,
-  ReservationLocationInfo,
-  ReservationReservee,
-  ReservationSlot,
-} from "../../wix/restaurants/types";
-
-const todayKey = (): string => {
-  const d = new Date();
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-};
-
-export interface UseReservation {
-  /** null while loading; [] when Table Reservations isn't set up (honest empty state). */
-  locations: ReservationLocationInfo[] | null;
-  /** The active location (default first). Render a picker only when locations.length > 1. */
-  location: ReservationLocationInfo | null;
-  setLocationId: (id: string) => void;
-  /** "YYYY-MM-DD" for a date input. */
-  date: string;
-  setDate: (date: string) => void;
-  /** "HH:mm" anchor for the slot fan-out. */
-  time: string;
-  setTime: (time: string) => void;
-  /** Clamped to the location's partySizeMin/Max. */
-  partySize: number;
-  setPartySize: (size: number) => void;
-  /** AVAILABLE slots for the current query; null until findSlots ran. */
-  slots: ReservationSlot[] | null;
-  findSlots: () => Promise<void>;
-  /** Set after holdSlot — the visitor has 10 minutes to confirm. */
-  held: ReservationHold | null;
-  holdSlot: (slot: ReservationSlot) => Promise<void>;
-  reservee: ReservationReservee;
-  setReserveeField: (field: keyof ReservationReservee, value: string) => void;
-  /** True when a slot is held and firstName + phone are filled — gate the confirm CTA. */
-  canConfirm: boolean;
-  confirm: () => Promise<void>;
-  /** Set on success. REQUESTED → tell the visitor approval is pending, not confirmed. */
-  confirmed: ReservationConfirmation | null;
-  /** Back to slot picking (keeps date/party). */
-  reset: () => void;
-  loading: boolean;
-  error: string | null;
-}
+// React binding of the reservation store (wix/restaurants/reservation-store.ts) — the whole
+// table-reservation state machine lives there, framework-free: location, date + party size,
+// AVAILABLE slots, the 10-minute hold, the details form, and confirm. All correctness (AVAILABLE-only
+// slots, hold → reserve with the revision, firstName + E.164 phone, RESERVED vs REQUESTED) lives in
+// the data layer; you own how it looks. Client-only: availability is timezone-specific, so render
+// the surface with client:only="react" in Astro.
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { createReservationStore, type ReservationState, type ReservationStore } from "../../wix/restaurants/reservation-store";
+
+export type UseReservation = ReservationState &
+  Pick<ReservationStore, "setLocationId" | "setDate" | "setTime" | "setPartySize" | "findSlots" | "holdSlot" | "setReserveeField" | "confirm" | "reset">;
 
 export function useReservation(): UseReservation {
-  const [locations, setLocations] = useState<ReservationLocationInfo[] | null>(null);
-  const [locationId, setLocationId] = useState<string | null>(null);
-  const [date, setDate] = useState<string>(todayKey());
-  const [time, setTime] = useState<string>("19:00");
-  const [partySize, setPartySizeRaw] = useState<number>(2);
-  const [slots, setSlots] = useState<ReservationSlot[] | null>(null);
-  const [held, setHeld] = useState<ReservationHold | null>(null);
-  const [reservee, setReservee] = useState<ReservationReservee>({ firstName: "", phone: "" });
-  const [confirmed, setConfirmed] = useState<ReservationConfirmation | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
+  const ref = useRef<ReservationStore | null>(null);
+  if (!ref.current) ref.current = createReservationStore();
+  const store = ref.current;
   useEffect(() => {
-    let alive = true;
-    fetchReservationLocations()
-      .then((locs) => {
-        if (!alive) return;
-        setLocations(locs);
-        setLocationId((id) => id ?? locs[0]?.id ?? null);
-      })
-      .catch((e) => {
-        if (!alive) return;
-        setLocations([]);
-        setError(e instanceof Error ? e.message : String(e));
-      });
-    return () => {
-      alive = false;
-    };
-  }, []);
-
-  const location = locations?.find((l) => l.id === locationId) ?? locations?.[0] ?? null;
-
-  const setPartySize = (size: number) => {
-    const min = location?.partySizeMin ?? 1;
-    const max = location?.partySizeMax ?? 20;
-    setPartySizeRaw(Math.min(Math.max(size, min), max));
-  };
-
-  async function findSlots(): Promise<void> {
-    if (!location) return;
-    setError(null);
-    setSlots(null);
-    setHeld(null);
-    setConfirmed(null);
-    setLoading(true);
-    try {
-      const aroundIso = new Date(`${date}T${time}:00`).toISOString();
-      setSlots(await fetchReservationSlots(location.id, aroundIso, partySize));
-    } catch (e) {
-      setSlots([]);
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function holdSlot(slot: ReservationSlot): Promise<void> {
-    if (!location) return;
-    setError(null);
-    setLoading(true);
-    try {
-      setHeld(await holdReservation(location.id, slot.startIso, partySize));
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  const canConfirm =
-    !!held && reservee.firstName.trim().length > 0 && reservee.phone.trim().length > 0 && !loading;
-
-  async function confirm(): Promise<void> {
-    if (!held) return;
-    setError(null);
-    setLoading(true);
-    try {
-      setConfirmed(await completeReservation(held, reservee));
-    } catch (e) {
-      // An expired hold can't be reserved — send the visitor back to slot picking.
-      setError(e instanceof Error ? e.message : String(e));
-      setHeld(null);
-    } finally {
-      setLoading(false);
-    }
-  }
-
+    store.start();
+    return () => store.stop();
+  }, [store]);
+  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
   return {
-    locations,
-    location,
-    setLocationId,
-    date,
-    setDate,
-    time,
-    setTime,
-    partySize,
-    setPartySize,
-    slots,
-    findSlots,
-    held,
-    holdSlot,
-    reservee,
-    setReserveeField: (field, value) => setReservee((r) => ({ ...r, [field]: value })),
-    canConfirm,
-    confirm,
-    confirmed,
-    reset: () => {
-      setHeld(null);
-      setConfirmed(null);
-      setSlots(null);
-      setError(null);
-    },
-    loading,
-    error,
+    ...state,
+    setLocationId: store.setLocationId,
+    setDate: store.setDate,
+    setTime: store.setTime,
+    setPartySize: store.setPartySize,
+    findSlots: store.findSlots,
+    holdSlot: store.holdSlot,
+    setReserveeField: store.setReserveeField,
+    confirm: store.confirm,
+    reset: store.reset,
   };
 }

package/skills/wix-headless-fast/references/restaurants/app/wix/restaurants/menu-core.ts

@@ -0,0 +1,155 @@
+// Menu rules and DTO mapping — transport-agnostic, imported by BOTH transports: ./menu.ts (the
+// SDK, managed Astro and React) and the REST twin in references/restaurants/rest/menu.ts (fetch,
+// a static site or a port to another language). The hierarchy is Menu → Sections → Items wired by
+// ID ARRAYS: display structure and order live in menu.sectionIds / section.itemIds, never in a
+// list response's order — the tree is stitched here in id-array order and dangling ids dropped.
+// A raw entity carries `_id` (SDK) or `id` (REST); every mapper accepts both. Imports are
+// type-only so a strip to JS emits no imports.
+import type {
+  MenuData,
+  MenuItem,
+  MenuItemLabel,
+  MenuItemVariant,
+  MenuModifier,
+  MenuModifierGroup,
+  MenuSection,
+} from "./types";
+
+/** A raw Menus V1 entity as either transport returns it. */
+export type Raw = Record<string, any>;
+/** Media value + size → https URL. Injected: the SDK transport scales through @wix/sdk, REST through the URL form. */
+export type ImgSrc = (value: any, width: number, height: number) => string;
+
+export const rawId = (raw: Raw | undefined | null): string => raw?._id ?? raw?.id ?? "";
+
+/** Index raw entities by id (either spelling). */
+export const byId = (arr: Raw[]): Map<string, Raw> => new Map(arr.map((e) => [rawId(e), e]));
+
+const unique = (ids: string[]): string[] => [...new Set(ids.filter(Boolean))];
+
+// Menu prices are decimal strings in the site currency with NO symbol; the response may carry a
+// platform-formatted twin (formattedPrice) — prefer it, never invent a symbol.
+export function displayPrice(priceInfo: Raw | undefined): string | null {
+  if (!priceInfo) return null;
+  return priceInfo.formattedPrice ?? priceInfo.price ?? null;
+}
+
+/** The variant ids the items reference — the second read's `variantIds`. */
+export function collectVariantIds(items: Raw[]): string[] {
+  return unique(items.flatMap((i) => ((i.priceVariants?.variants ?? []) as Raw[]).map((v) => v.variantId)));
+}
+
+/** The modifier-group ids the items reference — the second read's `modifierGroupIds`. */
+export function collectGroupIds(items: Raw[]): string[] {
+  return unique(items.flatMap((i) => ((i.modifierGroups ?? []) as Raw[]).map(rawId)));
+}
+
+/** The modifier ids the groups reference — the third read's `modifierIds`. */
+export function collectModifierIds(groups: Raw[]): string[] {
+  return unique(groups.flatMap((g) => ((g.modifiers ?? []) as Raw[]).map(rawId)));
+}
+
+/** Whether any item carries a label — the labels list is read only then. */
+export function anyLabels(items: Raw[]): boolean {
+  return items.some((i) => ((i.labels ?? []) as Raw[]).length > 0);
+}
+
+export interface MenuLookups {
+  variantById: Map<string, Raw>;
+  groupById: Map<string, Raw>;
+  modifierById: Map<string, Raw>;
+  labelById: Map<string, Raw>;
+}
+
+export function toItem(raw: Raw, lookups: MenuLookups, imgSrc: ImgSrc): MenuItem {
+  const variants: MenuItemVariant[] = ((raw.priceVariants?.variants ?? []) as Raw[])
+    .map((v): MenuItemVariant => ({
+      variantId: v.variantId ?? "",
+      name: lookups.variantById.get(v.variantId)?.name ?? "",
+      price: displayPrice(v.priceInfo) ?? v.price ?? "",
+    }))
+    .filter((v) => v.variantId);
+  const modifierGroups: MenuModifierGroup[] = ((raw.modifierGroups ?? []) as Raw[])
+    .map((ref) => lookups.groupById.get(rawId(ref)))
+    .filter((g): g is Raw => !!g)
+    .map((g): MenuModifierGroup => ({
+      id: rawId(g),
+      name: g.name ?? "",
+      required: g.rule?.required === true,
+      minSelections: g.rule?.minSelections ?? 0,
+      maxSelections: g.rule?.maxSelections ?? null,
+      modifiers: ((g.modifiers ?? []) as Raw[]).map((m): MenuModifier => ({
+        id: rawId(m),
+        name: lookups.modifierById.get(rawId(m))?.name ?? "",
+        preSelected: m.preSelected === true,
+        additionalCharge: m.additionalChargeInfo?.additionalCharge ?? "0",
+        inStock: lookups.modifierById.get(rawId(m))?.inStock !== false,
+      })),
+    }));
+  const labels: MenuItemLabel[] = ((raw.labels ?? []) as Raw[])
+    .map((ref) => lookups.labelById.get(rawId(ref)))
+    .filter((l): l is Raw => !!l)
+    .map((l): MenuItemLabel => ({ id: rawId(l), name: l.name ?? "", iconUrl: imgSrc(l.icon, 48, 48) }));
+  const price = displayPrice(raw.priceInfo);
+  return {
+    id: rawId(raw),
+    name: raw.name ?? "",
+    description: raw.description ?? "",
+    price,
+    marketPrice: price === null && variants.length === 0,
+    variants,
+    imageUrl: imgSrc(raw.image, 800, 800),
+    labels,
+    modifierGroups,
+    inStock: raw.orderSettings?.inStock !== false,
+    featured: raw.featured === true,
+  };
+}
+
+export function toSection(raw: Raw, itemById: Map<string, MenuItem>, imgSrc: ImgSrc): MenuSection {
+  return {
+    id: rawId(raw),
+    name: raw.name ?? "",
+    description: raw.description ?? "",
+    imageUrl: imgSrc(raw.image, 800, 800),
+    items: ((raw.itemIds ?? []) as string[]).map((iid) => itemById.get(iid)).filter((i): i is MenuItem => !!i),
+  };
+}
+
+export function toMenu(raw: Raw, sectionById: Map<string, Raw>, itemById: Map<string, MenuItem>, imgSrc: ImgSrc): MenuData {
+  return {
+    id: rawId(raw),
+    name: raw.name ?? "",
+    description: raw.description ?? "",
+    slug: raw.urlQueryParam ?? "",
+    sections: ((raw.sectionIds ?? []) as string[])
+      .map((sid) => sectionById.get(sid))
+      .filter((s): s is Raw => !!s)
+      .map((s) => toSection(s, itemById, imgSrc)),
+  };
+}
+
+/** The seven list responses' entity arrays, as either transport returns them. */
+export interface MenuTreeParts {
+  menus: Raw[];
+  sections: Raw[];
+  items: Raw[];
+  variants: Raw[];
+  groups: Raw[];
+  modifiers: Raw[];
+  labels: Raw[];
+}
+
+/** The display-ordered tree: visible menus → their sections → their items, each item enriched. [] when no menus. */
+export function assembleMenus(parts: MenuTreeParts, imgSrc: ImgSrc): MenuData[] {
+  if (!parts.menus.length) return [];
+  const lookups: MenuLookups = {
+    variantById: byId(parts.variants),
+    groupById: byId(parts.groups),
+    modifierById: byId(parts.modifiers),
+    labelById: byId(parts.labels),
+  };
+  const sectionById = byId(parts.sections);
+  const itemById = new Map<string, MenuItem>(parts.items.map((i) => [rawId(i), toItem(i, lookups, imgSrc)]));
+  return parts.menus.map((m) => toMenu(m, sectionById, itemById, imgSrc));
+}

package/skills/wix-headless-fast/references/restaurants/app/wix/restaurants/menu-store.ts

@@ -0,0 +1,89 @@
+// Menu browsing as a framework-free store — the logic behind useMenus, usable from React (useMenus
+// wraps it with useSyncExternalStore), from a static page or Vue/Svelte (subscribe and render), or
+// as the specification for a port. Same shape as order-store.ts: state, actions, subscribe/getState,
+// emit after every change. The whole tree is fetched once; menu switching is local.
+//
+// SSR-friendly: seed with `initialMenus` (Astro frontmatter) and no fetch happens; a SPA passes
+// nothing and `start()` fetches. One store per mounted menu surface: createMenuStore(), not a
+// singleton (the order cart is the singleton — one per visitor).
+import { fetchMenus } from "./menu";
+import type { MenuData } from "./types";
+
+export interface MenuStoreOptions {
+  initialMenus?: MenuData[];
+}
+
+/** Everything a menu surface renders from. Read it with getState() or through a subscription. */
+export interface MenuState {
+  /** null while the first load is in flight — render skeletons, not an empty state. */
+  menus: MenuData[] | null;
+  /** Defaults to the first menu once loaded. */
+  activeMenuId: string | null;
+  /** The menu to render (its sections/items are display-ordered). */
+  activeMenu: MenuData | null;
+  error: string | null;
+}
+
+export interface MenuStore {
+  getState(): MenuState;
+  subscribe(listener: () => void): () => void;
+  /** Fetch the tree when no `initialMenus` were given. Call once when mounted. */
+  start(): void;
+  /** Stop reacting; drop a late response. */
+  stop(): void;
+  setActiveMenuId(id: string): void;
+}
+
+export function createMenuStore({ initialMenus }: MenuStoreOptions = {}): MenuStore {
+  let menus: MenuData[] | null = initialMenus ?? null;
+  let selectedId: string | null = initialMenus?.[0]?.id ?? null;
+  let error: string | null = null;
+  let started = false;
+  const listeners = new Set<() => void>();
+  let snapshot: MenuState | null = null;
+  const emit = () => {
+    snapshot = null;
+    for (const fn of listeners) fn();
+  };
+
+  function getState(): MenuState {
+    if (snapshot) return snapshot;
+    const activeMenu = menus ? (menus.find((m) => m.id === selectedId) ?? menus[0] ?? null) : null;
+    snapshot = { menus, activeMenuId: activeMenu?.id ?? null, activeMenu, error };
+    return snapshot;
+  }
+
+  return {
+    getState,
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => listeners.delete(fn);
+    },
+    start() {
+      if (started) return;
+      started = true;
+      if (initialMenus) return;
+      fetchMenus()
+        .then((m) => {
+          if (!started) return;
+          menus = m;
+          selectedId ??= m[0]?.id ?? null;
+          emit();
+        })
+        .catch((e) => {
+          if (!started) return;
+          menus = [];
+          error = e instanceof Error ? e.message : String(e);
+          emit();
+        });
+    },
+    stop() {
+      started = false;
+    },
+    setActiveMenuId(id) {
+      if (id === selectedId) return;
+      selectedId = id;
+      emit();
+    },
+  };
+}

package/skills/wix-headless-fast/references/restaurants/app/wix/restaurants/menu.ts

@@ -1,10 +1,7 @@
-// Menu reads (Wix Restaurants Menus V1) — the only file that touches raw menu entities.
-// Everything it returns is a plain DTO from ./types. Copy as-is; extend by adding functions,
-// not by editing these.
-//
-// The hierarchy is Menu → Sections → Items wired by ID ARRAYS: display structure and order
-// live in menu.sectionIds / section.itemIds, NOT in the list* response order — fetchMenus
-// stitches in id-array order and drops dangling ids. Entity ids are `_id` (never `id`).
+// Menu reads (Wix Restaurants Menus V1) over the SDK — the only file that touches raw menu
+// entities on this transport. Everything it returns is a plain DTO from ./types. The rules and
+// the tree assembly live in ./menu-core (shared with the REST twin in references/restaurants/rest/);
+// this file is the transport only. Copy as-is; extend by adding functions, not by editing these.
 // docs: https://dev.wix.com/docs/api-reference/business-solutions/restaurants/menus/menus/list-menus.md
 // docs: https://dev.wix.com/docs/api-reference/business-solutions/restaurants/menus/sections/list-sections.md
 // docs: https://dev.wix.com/docs/api-reference/business-solutions/restaurants/menus/items/items/list-items.md
@@ -23,15 +20,8 @@ import {
 } from "@wix/restaurants";
 import { wixModule } from "../sdk";
 import { imgSrc } from "../media";
-import type {
-  MenuData,
-  MenuItem,
-  MenuItemLabel,
-  MenuItemVariant,
-  MenuModifier,
-  MenuModifierGroup,
-  MenuSection,
-} from "./types";
+import { anyLabels, assembleMenus, collectGroupIds, collectModifierIds, collectVariantIds, type Raw } from "./menu-core";
+import type { MenuData } from "./types";
 
 const menusApi = wixModule(menusModule);
 const sectionsApi = wixModule(sectionsModule);
@@ -41,63 +31,6 @@ const groupsApi = wixModule(itemModifierGroups);
 const modifiersApi = wixModule(itemModifiers);
 const labelsApi = wixModule(itemLabels);
 
-type Raw = Record<string, any>;
-
-// Menu prices are decimal strings in the site currency with NO symbol; the response may
-// carry a platform-formatted twin (formattedPrice) — prefer it, never invent a symbol.
-function displayPrice(priceInfo: Raw | undefined): string | null {
-  if (!priceInfo) return null;
-  return priceInfo.formattedPrice ?? priceInfo.price ?? null;
-}
-
-function toItem(
-  raw: Raw,
-  lookups: { variantById: Map<string, Raw>; groupById: Map<string, Raw>; modifierById: Map<string, Raw>; labelById: Map<string, Raw> },
-): MenuItem {
-  const variants: MenuItemVariant[] = (raw.priceVariants?.variants ?? [])
-    .map((v: Raw): MenuItemVariant => ({
-      variantId: v.variantId ?? "",
-      name: lookups.variantById.get(v.variantId)?.name ?? "",
-      price: displayPrice(v.priceInfo) ?? v.price ?? "",
-    }))
-    .filter((v: MenuItemVariant) => v.variantId);
-  const modifierGroups: MenuModifierGroup[] = (raw.modifierGroups ?? [])
-    .map((ref: Raw) => lookups.groupById.get(ref._id))
-    .filter(Boolean)
-    .map((g: Raw): MenuModifierGroup => ({
-      id: g._id ?? "",
-      name: g.name ?? "",
-      required: g.rule?.required === true,
-      minSelections: g.rule?.minSelections ?? 0,
-      maxSelections: g.rule?.maxSelections ?? null,
-      modifiers: (g.modifiers ?? []).map((m: Raw): MenuModifier => ({
-        id: m._id ?? "",
-        name: lookups.modifierById.get(m._id)?.name ?? "",
-        preSelected: m.preSelected === true,
-        additionalCharge: m.additionalChargeInfo?.additionalCharge ?? "0",
-        inStock: lookups.modifierById.get(m._id)?.inStock !== false,
-      })),
-    }));
-  const labels: MenuItemLabel[] = (raw.labels ?? [])
-    .map((ref: Raw) => lookups.labelById.get(ref._id))
-    .filter(Boolean)
-    .map((l: Raw): MenuItemLabel => ({ id: l._id ?? "", name: l.name ?? "", iconUrl: imgSrc(l.icon, 48, 48) }));
-  const price = displayPrice(raw.priceInfo);
-  return {
-    id: raw._id ?? "",
-    name: raw.name ?? "",
-    description: raw.description ?? "",
-    price,
-    marketPrice: price === null && variants.length === 0,
-    variants,
-    imageUrl: imgSrc(raw.image, 800, 800),
-    labels,
-    modifierGroups,
-    inStock: raw.orderSettings?.inStock !== false,
-    featured: raw.featured === true,
-  };
-}
-
 /**
  * The site's full menu tree, assembled and display-ordered: visible menus → their sections →
  * their items, each item enriched with resolved price variants, modifier groups, and labels.
@@ -112,54 +45,27 @@ export async function fetchMenus(): Promise<MenuData[]> {
   ]);
   const menus: Raw[] = menusRes.menus ?? [];
   if (!menus.length) return [];
-  const sections: Raw[] = sectionsRes.sections ?? [];
   const items: Raw[] = itemsRes.items ?? [];
-
-  const variantIds: string[] = [
-    ...new Set(items.flatMap((i: Raw) => (i.priceVariants?.variants ?? []).map((v: Raw) => v.variantId)).filter(Boolean)),
-  ] as string[];
-  const groupIds: string[] = [
-    ...new Set(items.flatMap((i: Raw) => (i.modifierGroups ?? []).map((g: Raw) => g._id)).filter(Boolean)),
-  ] as string[];
-  const hasLabels = items.some((i: Raw) => (i.labels ?? []).length > 0);
-
+  const variantIds = collectVariantIds(items);
+  const groupIds = collectGroupIds(items);
   const [variantsRes, groupsRes, labelsRes]: Raw[] = await Promise.all([
     variantIds.length ? variantsApi.listVariants({ variantIds }) : Promise.resolve({ variants: [] }),
     groupIds.length ? groupsApi.listModifierGroups({ modifierGroupIds: groupIds }) : Promise.resolve({ modifierGroups: [] }),
-    hasLabels ? labelsApi.listLabels() : Promise.resolve({ labels: [] }),
+    anyLabels(items) ? labelsApi.listLabels() : Promise.resolve({ labels: [] }),
   ]);
   const groups: Raw[] = groupsRes.modifierGroups ?? [];
-  const modifierIds: string[] = [
-    ...new Set(groups.flatMap((g: Raw) => (g.modifiers ?? []).map((m: Raw) => m._id)).filter(Boolean)),
-  ] as string[];
-  const modifiersRes: Raw = modifierIds.length
-    ? await modifiersApi.listModifiers({ modifierIds })
-    : { modifiers: [] };
-
-  const byId = (arr: Raw[]) => new Map<string, Raw>(arr.map((e: Raw) => [e._id, e]));
-  const lookups = {
-    variantById: byId(variantsRes.variants ?? []),
-    groupById: byId(groups),
-    modifierById: byId(modifiersRes.modifiers ?? []),
-    labelById: byId(labelsRes.labels ?? []),
-  };
-  const sectionById = byId(sections);
-  const itemById = new Map<string, MenuItem>(items.map((i: Raw) => [i._id, toItem(i, lookups)]));
-
-  return menus.map((m: Raw): MenuData => ({
-    id: m._id ?? "",
-    name: m.name ?? "",
-    description: m.description ?? "",
-    slug: m.urlQueryParam ?? "",
-    sections: (m.sectionIds ?? [])
-      .map((sid: string) => sectionById.get(sid))
-      .filter(Boolean)
-      .map((s: Raw): MenuSection => ({
-        id: s._id ?? "",
-        name: s.name ?? "",
-        description: s.description ?? "",
-        imageUrl: imgSrc(s.image, 800, 800),
-        items: (s.itemIds ?? []).map((iid: string) => itemById.get(iid)).filter(Boolean) as MenuItem[],
-      })),
-  }));
+  const modifierIds = collectModifierIds(groups);
+  const modifiersRes: Raw = modifierIds.length ? await modifiersApi.listModifiers({ modifierIds }) : { modifiers: [] };
+  return assembleMenus(
+    {
+      menus,
+      sections: sectionsRes.sections ?? [],
+      items,
+      variants: variantsRes.variants ?? [],
+      groups,
+      modifiers: modifiersRes.modifiers ?? [],
+      labels: labelsRes.labels ?? [],
+    },
+    imgSrc,
+  );
 }