@wix/agent-skills 1.36.0 → 1.36.1

package/skills/wix-vibe-headless/references/restaurants/INSTRUCTIONS.md

@@ -1,290 +0,0 @@
-# Wix Restaurants — ready-made client
-
-The restaurant client is **shipped as real files**, not snippets to regenerate. It's a complete
-menu + item ordering + server-cart + checkout, plus a table-reservation flow, styled with your app's
-design tokens (base44's `src/index.css` — the shadcn palette the design phase already set). Copy it
-into the app and wire the routes — you generate almost none of the restaurant code (the menu tree
-join, the order cart, the reservation hold→reserve flow all ship and are correct).
-
-Talks to Wix directly over the public `WIX_CLIENT_ID` (anonymous visitor tokens). Never mock the
-menu; never hand-build `/checkout` or reservation URLs — the shipped cart goes through the eCom
-redirect-session and reservations go through the hold/reserve flow.
-
-## Prerequisites
-- The site's **Wix Restaurants Menus** app is the read target for the menu; **Restaurant Orders**
-  backs online ordering; **Table Reservations** backs the booking page. They're installed and seeded
-  separately (see **Seeding** below), in parallel with this build — so the menu may be empty and
-  ordering / reservations may be unconfigured at build time. The client renders the shipped empty /
-  "unavailable" states until content and operations land.
-- The public headless **`WIX_CLIENT_ID`** from your prompt (buyer-facing, safe to hardcode/commit).
-- For Wix-hosted checkout to return, the deployed app domain must be allow-listed on the OAuth
-  client — a **separate Wix setup the user completes later**, out of scope here. If checkout return
-  fails before that, it's expected; flag it and continue.
-
-## STEP 1 — The client is already in `src/`
-The install step (base44.md STEP 1) deployed the whole restaurant UI client + REST scaffolds into
-`src/` (imports use the `@/` alias → `src/`). Here's every file and what it is — **this is your map,
-so you don't need to open them:**
-
-| file | what it is |
-|---|---|
-| `context/OrderCartContext.jsx` | `useOrderCart()` provider: resolves the ordering Operation, server cart, add/update/remove, checkout, `ordering` flag |
-| `hooks/useItemOrder.js` | item-dialog add-to-order logic (stock + ordering-available gating, quantity) |
-| `hooks/useReservation.js` | reservation flow (locations → date/party → AVAILABLE slots → hold → reserve) |
-| `components/MenuItemCard.jsx`, `MenuList.jsx` | menu render UI (dish card + the menus→sections→items tree, with empty state) |
-| `components/ItemDialog.jsx` | dish detail modal — description, price/variants, modifier groups (display), quantity, add-to-order |
-| `components/OrderCartButton.jsx` | header order **icon** button with a live-count badge |
-| `components/OrderCartDrawer.jsx` | slide-over order cart (mount once; opens from `useOrderCart`) |
-| `components/WixManageBanner.jsx` | preview-only manage banner — drop it into your Layout (STEP 3) |
-| `pages/Menu.jsx`, `pages/Reservations.jsx` | the two shipped routes (`/menu`, `/reservations`) |
-| `rest/wix-config.js` | the two ids, written by the install step |
-| `rest/wix-client.js` | REST transport + visitor-token mint/refresh (the refresh token IS the cart identity) |
-| `rest/wix-restaurants-menu.js` | menu read helpers — `getFullMenu` (the assembled tree; start here) + raw `list*` |
-| `rest/wix-restaurants-ordering.js` | ordering — operations, add/update/remove, `checkout` |
-| `rest/wix-restaurants-reservations.js` | reservations — locations, time slots, hold, reserve |
-
-They're already in place — go **straight to theming + wiring**, nothing to verify first. **Don't
-`read_file` the shipped page/component/hook source to inspect it** — the table above says what each is
-and every field shape you need is in the snippets below. Read a shipped file's source **only** on a
-real fallback — a runtime error, or a field the snippets don't cover (see "Fallback only" at the
-end). (Files missing? the install's `deploy` result lists what it wrote; re-run install, or copy
-`references/restaurants/app/` → `src/`.)
-
-
-## STEP 2 — Theme
-Use the existing Base44 theme in `src/index.css` so your pages and the shipped components
-share the same colors and typography.
-
-## STEP 3 — Wire routes + provider (surgical `find_replace` on `src/App.jsx`, never a rewrite)
-
-> **The template decides this step, and `src/routes/__root.jsx` is the question to ask first.**
-> Present → TanStack Start, which mounts these pages as route files at the end of this step; absent
-> → React Router, which the wiring below is written for. Ask in that order: an `src/App.jsx` can
-> exist on a TanStack app because an agent created one, and `__root.jsx` is never there by mistake.
-> The installed `src/lib/nav.js` defaults to the React Router adapter, so on TanStack swap it:
-> [both patterns](../_shared/routing.md).
->
-> **Import `Link`, `useParams` and friends from `@/lib/nav` in the pages you write too** — same
-> names as the router exports, and nothing you write is pinned to one template.
-
-**No file reads needed to wire this.** Every shipped page and `WixManageBanner` is a default export that takes **no props** — wire them exactly as the snippet shows; nothing in those files needs looking up.
-`App.jsx` carries required platform auth scaffolding (`AuthProvider`/`useAuth`) — edit it in, don't
-replace it.
-- Wrap the routed tree in `<OrderCartProvider>` (from `@/context/OrderCartContext`).
-- Put your **header + footer in a `Layout`** that renders `<Outlet/>` between them, and nest every
-  route under one pathless `<Route element={<Layout/>}>`. Your brand chrome then wraps **every** page
-  — including the shipped `Menu` / `Reservations` — so you **never edit the shipped pages to add a
-  header/footer** (they render inside `<Outlet/>` as-is). Mount `<OrderCartDrawer/>` once in the Layout.
-- **Pin the top chrome as one fixed block.** Put `<WixManageBanner/>` (shipped, preview-only) **above**
-  your `<Header/>` inside a single `position:fixed` top region — the header itself is plain in-flow
-  markup, the region owns the fixing — so banner + header ride together (no scroll drift/gap). Pad
-  the content by the region's measured height so it clears the chrome and self-corrects when the
-  banner is dismissed.
-- Routes under the Layout: `/menu` → `Menu`, `/reservations` → `Reservations` (both shipped, as-is).
-  **You add `/` → your own Home** page.
-
-```jsx
-import { useRef, useState, useEffect } from "react";
-import { Routes, Route, Outlet } from "react-router-dom";
-import { OrderCartProvider } from "@/context/OrderCartContext";
-import OrderCartDrawer from "@/components/OrderCartDrawer";
-import WixManageBanner from "@/components/WixManageBanner";   // shipped, preview-only · default export, no props
-import Menu from "@/pages/Menu";                       // shipped · default export, no props
-import Reservations from "@/pages/Reservations";       // shipped · default export, no props
-import Home from "@/pages/Home";       // YOU build
-import Header from "@/components/Header";   // YOU build — plain in-flow markup, NOT position:fixed
-import Footer from "@/components/Footer";   // YOU build
-
-function Layout() {
-  const topRef = useRef(null);
-  const [offset, setOffset] = useState(0);
-  useEffect(() => {                                  // measure the fixed region → pad content below it
-    const ro = new ResizeObserver(() => setOffset(topRef.current?.offsetHeight ?? 0));
-    if (topRef.current) ro.observe(topRef.current);
-    return () => ro.disconnect();
-  }, []);
-  return (<>
-    <div ref={topRef} style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 50 }}>
-      <WixManageBanner />                    {/* null on the published site / when dismissed */}
-      <Header />                             {/* your brand header, in-flow inside this fixed block */}
-    </div>
-    <div style={{ paddingTop: offset }}>     {/* clears the chrome; shrinks when the banner is dismissed */}
-      <Outlet />                             {/* shipped Menu/Reservations render here, untouched */}
-      <Footer />
-    </div>
-    <OrderCartDrawer />                       {/* overlays every page */}
-  </>);
-}
-
-<OrderCartProvider>
-  <Routes>
-    <Route element={<Layout />}>                                {/* chrome wraps all */}
-      <Route path="/" element={<Home />} />                     {/* yours */}
-      <Route path="/menu" element={<Menu />} />                 {/* shipped, as-is */}
-      <Route path="/reservations" element={<Reservations />} /> {/* shipped, as-is */}
-    </Route>
-  </Routes>
-</OrderCartProvider>
-```
-
-
-### TanStack Start template — the same pages, mounted as files
-
-Chrome (header, footer, the fixed banner region described above) goes in `src/routes/__root.jsx`
-around its `<Outlet/>`, and any provider this vertical asks for wraps that `<Outlet/>` once. Each
-route is a two-line file; shipped pages stay in `src/pages/` untouched.
-
-| route | file | component |
-|---|---|---|
-| `/` | `src/routes/index.jsx` | `Home` |
-| `/menu` | `src/routes/menu.jsx` | `Menu` |
-| `/reservations` | `src/routes/reservations.jsx` | `Reservations` |
-
-```jsx
-// src/routes/menu.jsx
-import { createFileRoute } from "@tanstack/react-router";
-import Menu from "@/pages/Menu";
-
-export const Route = createFileRoute("/menu")({ component: Menu });
-```
-
-Path params are `$name` in both the filename and the route path; `useParams()` from `@/lib/nav`
-reads them unchanged. Full pattern, including `ssr: false` for per-user routes:
-[`../_shared/routing.md`](../_shared/routing.md).
-
-## What you build (not shipped)
-The **home / landing page**, the **`Header`** (mount `<OrderCartButton/>` in it) and a **`Footer`** —
-the two you drop into the `Layout` (STEP 3) so they wrap every route — plus the overall brand story,
-styled with the same base44 tokens/classes. The nav is an `<OrderCartButton/>` (a clean order-**icon**
-button with a live-count badge — render it as-is, don't wrap it in your own text button) + links to
-`/menu` and `/reservations`:
-
-```jsx
-import { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
-import OrderCartButton from "@/components/OrderCartButton";
-
-// Responsive header: choose ONE branch with a state flag, so <OrderCartButton/> mounts once.
-// Do NOT render a desktop nav AND a mobile nav toggled by `hidden md:flex` / `md:hidden`:
-// these navs are inline-styled, and an inline `display` beats a Tailwind class, so `hidden`
-// never applies — BOTH branches render and you get two order buttons. One branch = one button.
-export function Header() {
-  const [mobile, setMobile] = useState(() => window.innerWidth < 768);
-  useEffect(() => {
-    const onResize = () => setMobile(window.innerWidth < 768);
-    window.addEventListener("resize", onResize);            // keep it reactive to viewport changes
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
-  return (
-    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-      {/* brand/logo */}
-      {mobile
-        ? <YourMenu />                                       // your hamburger + <OrderCartButton/> here
-        : <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
-            <Link to="/menu">Menu</Link><Link to="/reservations">Reserve</Link><OrderCartButton />
-          </div>}
-    </nav>
-  );
-}
-```
-
-Everything visual reads base44's design tokens (`index.css`), so your home/nav match the shipped pages automatically.
-`<OrderCartButton/>` is an icon button (live-count badge) — drop it in as-is, it inherits `currentColor`.
-
-**Editing a component and the change doesn't show? It's the preview, not your code.** The dev preview
-can serve a stale module after a write. Before diagnosing a visual bug you just "fixed", do a fresh
-full navigate/reload of the preview and re-check — don't keep rewriting correct code against a stale
-render.
-
-## Using the client from your own UI (menu, order cart)
-
-> Migrating from Cart V1 / Checkout V1? These helpers are V2-only — see the [migration guide](https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/purchase-flow/cart-v2/migration-guide) for the before/after.
-
-```jsx
-import { getFullMenu } from "@/rest/wix-restaurants-menu";
-import { useOrderCart } from "@/context/OrderCartContext";
-
-// getFullMenu() is the ONLY pre-joined shape and the entry point for any menu surface. It returns
-// { menus: [{ ...menu, sections: [{ ...section, items: [assembledItem] }] }] }, already ordered.
-// Each item is enriched with a resolved price / variants, modifierGroups, and labels.
-const { menus } = await getFullMenu();            // [] when no menus → show the shipped empty state
-
-// useOrderCart() gives:
-// { cart, operation, ordering, itemCount, isOpen, setIsOpen, loading,
-//   addItem(item, { menuId, sectionId }, qty=1),   // needs the menu/section the item was shown under
-//   removeItem(lineItemId), updateQuantity(lineItemId, qty),
-//   setFulfillment(code, address?),                // "PICKUP|ASAP" · "DELIVERY|ASAP" · "<TYPE>|<startMs>|<endMs>"; address for delivery
-//   checkout(),                                    // pickup ASAP when no fulfillment was set
-//   refreshCart() }
-// `ordering` is false when no ordering Operation is configured — show an "ordering unavailable" state.
-
-// Load-bearing field paths (the shipped components already do these):
-// - item.image / section.image / label.icon are OBJECTS → render `.url`, never the object; //-urls → https:
-// - MENU prices are plain decimal strings with NO currency symbol ("12.50") — format in the UI.
-//   The eCom cart line price (line.pricing.unitPrice / line.pricing.totalPrice) is a ConvertedMoney
-//   { amount, convertedAmount } with NO symbol either — format the number yourself.
-// - an item is priced by EITHER item.price (single) OR item.variants[] (one-of, each { name, price }).
-// - a cart mutation uses cart.lineItems[].id (the lineItemId), NOT the menu item id.
-```
-
-Buying happens in the shipped `ItemDialog` (opened from `MenuList`) — it owns quantity + add-to-order
-and surfaces out-of-stock / ordering-unavailable errors. Compose a featured strip on your Home from
-`getFullMenu()` + the shipped `MenuItemCard` if you want.
-
-## Extending the client
-Building something beyond the shipped pages, or need a path these snippets don't cover?
-
-```jsx
-// The raw list* helpers return UNRESOLVED refs and INCONSISTENT shapes (listMenus → { menus,
-// nextCursor }; listSections/listItems/listVariants/listModifierGroups/listModifiers → bare arrays).
-// Don't re-join them by hand — build on getFullMenu(). If you truly need a partial fetch, note they
-// take an array of GUIDs: listSections(sectionIds), listItems(itemIds).
-
-// Reservation status after reserve: RESERVED = confirmed, REQUESTED = manual approval pending
-// (tell the user). firstName + phone (E.164, e.g. "+15551234567") are mandatory; a HELD reservation
-// expires in 10 minutes — the hook passes the hold's { id, revision } into reserve for you.
-```
-
-Modifier up-charges / price-variant selection / special requests on the **cart line** are **not**
-wired into `addItemToCart` — the restaurants `catalogReference.options` shape for these isn't
-documented for client add-to-cart, so `ItemDialog` displays modifier groups for the diner but sends
-only quantity. To wire them, confirm the shape via the documentation skill available in your environment / the reference first,
-never guess:
-- Restaurants API reference: https://dev.wix.com/docs/api-reference/business-solutions/restaurants.md
-- Sample flows (cart options): https://dev.wix.com/docs/api-reference/business-solutions/restaurants/online-orders/sample-flows.md
-- **Member login + a "my orders" account view** → the **members** vertical
-  (`references/members/INSTRUCTIONS.md`): ordering/reserving works anonymously, but signing a member
-  in lets them see their own order/reservation history.
-
-Fallback only — when you hit an error or need something not shown here: read the relevant shipped
-file under `src/`, or look it up via the documentation skill available in your environment.
-
-## Hard rules
-- Header/footer live in a `Layout` around `<Outlet/>` (STEP 3) — never edit the shipped `Menu`/`Reservations` to add chrome.
-- The Layout's fixed top region owns positioning: `<WixManageBanner/>` above `<Header/>`; your `Header` is plain in-flow markup (not `position:fixed`).
-- Order through the shipped cart: `addItem()` → `setFulfillment()` → `checkout()` (redirect-session) — never a hand-built `/checkout`, ordering, or reservation URL. The hosted checkout has no pickup/delivery or time picker for restaurant orders: a pickup/delivery choice and a time (ASAP, or a slot from the operation's `available-time-slots-per-date`) are set with `setFulfillment` before `checkout()`; without one, `checkout()` uses pickup ASAP.
-- Reservations: offer only `AVAILABLE` slots; pass the hold's `revision` into reserve; `firstName` + `phone` (E.164) are mandatory.
-- Render live Wix data or the shipped empty / "unavailable" state — never mock menus, items, prices, operations, locations, slots, or reviews.
-
-## Point the user to their dashboard
-Provide deep links so the owner can edit content across the apps they actually use (substitute the
-site's `metaSiteId` from the handoff / `ListWixSites`):
-- **Menu** (always) — `https://manage.wix.com/dashboard/{metaSiteId}/wix-restaurants-menus-new` (`Dashboard → Restaurant Menus`; click **Manage Items** to add dishes; only visible menus appear in the app)
-- **Online ordering** (if wired) — `https://manage.wix.com/dashboard/{metaSiteId}/wix-restaurants-orders-new/settings` (`Dashboard → Restaurant Orders → Settings`). Enable at least one fulfillment method before the site accepts orders: pickup `.../wix-restaurants-orders-new/settings/pickup`, delivery `.../settings/delivery`, dine-in `.../settings/dine-in`.
-- **Table reservations** (if wired) — `https://manage.wix.com/dashboard/{metaSiteId}/wix-table-reservations/table-reservations` (`Dashboard → Table Reservations` → **Settings**; configure tables, availability, and enable online reservations)
-
-Tell the user at least once that they can keep setting up their restaurant (menu / ordering /
-reservations) in the dashboard, and include the in-dashboard navigation as a fallback.
-
-## Seeding
-Seed the menu (and ordering/reservation setup) per `seed/SEED.md` — separate from this client build;
-run in parallel.
-
-## Verify (before declaring done)
-- [ ] Client files copied into `src/`; `WIX_CLIENT_ID` set (not the placeholder).
-- [ ] Opened `/menu` and `/reservations` (not just the home page) and confirmed the shipped components render themed (surface, text, brand) with images.
-- [ ] `Layout` (fixed `<WixManageBanner/>` + `<Header/>` region, then `<Outlet/>` + Footer) wraps all routes; shipped `Menu`/`Reservations` untouched; content clears the fixed chrome; `<OrderCartProvider>` wraps the tree; `<OrderCartDrawer/>` mounted; `<OrderCartButton/>` in the header.
-- [ ] `getFullMenu()` renders real sections/items with prices, variants, modifiers, and labels; empty catalog shows the shipped empty state (no mock items).
-- [ ] Add to order works with a real operation (or shows "ordering unavailable"); order survives reload (same visitor); update-qty / remove work; checkout redirects and re-fetches on return.
-- [ ] Reservations: only `AVAILABLE` slots offered; hold → reserve produces `RESERVED`/`REQUESTED`; no locations shows the shipped empty state.
-- [ ] Told the user they can continue setting up in the dashboard, with deep links.

package/skills/wix-vibe-headless/references/restaurants/app/components/ItemDialog.jsx

@@ -1,81 +0,0 @@
-// Item detail modal — thin view over useItemOrder (all add-to-cart logic lives in the hook). Shows
-// the dish's image, description, price/variants, and modifier groups (name + rule + each modifier's
-// up-charge / stock), a quantity stepper, and an add-to-cart button. Modifier groups are shown for
-// the diner's information only — the shipped addItemToCart does not send selections (see the hook).
-// Styled with base44 design tokens (shadcn Tailwind classes). Pass the item plus the { menuId, sectionId } it was shown under.
-import { useItemOrder } from "@/hooks/useItemOrder";
-
-function imageUrl(img) {
-  const url = img?.url;
-  return url ? (url.startsWith("//") ? `https:${url}` : url) : null;
-}
-function formatPrice(price) {
-  return price == null ? "" : `$${price}`; // swap "$" for the site's currency
-}
-
-export default function ItemDialog({ item, menuId, sectionId, onClose }) {
-  const d = useItemOrder(item, { menuId, sectionId });
-  if (!item) return null;
-  const image = imageUrl(item.image);
-
-  return (
-    <div onClick={onClose} className="fixed inset-0 z-[60] bg-black/45 flex items-end justify-center">
-      <div onClick={(e) => e.stopPropagation()}
-        className="w-[min(560px,100%)] max-h-[92vh] overflow-y-auto bg-background text-foreground rounded-t-lg font-body">
-        {image && (
-          <div className="aspect-[16/9] bg-card">
-            <img src={image} alt={item.name} className="w-full h-full object-cover" />
-          </div>
-        )}
-        <div className="p-4 flex flex-col gap-4">
-          <div className="flex justify-between items-start gap-3">
-            <h2 className="m-0 font-display">{item.name}</h2>
-            <button onClick={onClose} aria-label="Close"
-              className="border-none bg-transparent cursor-pointer text-[22px] leading-none text-muted-foreground">×</button>
-          </div>
-          {item.description && <p className="m-0 text-muted-foreground leading-[1.55]">{item.description}</p>}
-
-          {/* price: single string OR one-of variants — neither carries a currency symbol */}
-          {item.price != null
-            ? <p className="m-0 text-xl font-semibold">{formatPrice(item.price)}</p>
-            : item.variants?.length > 0 && (
-                <div className="flex flex-wrap gap-3">
-                  {item.variants.map((v) => (
-                    <span key={v.variantId}>{v.name}: <strong>{formatPrice(v.price)}</strong></span>
-                  ))}
-                </div>
-              )}
-
-          {/* modifier groups — displayed for the diner; selections are not sent by the shipped add-to-cart */}
-          {item.modifierGroups?.map((group) => (
-            <div key={group.id} className="border-t border-border pt-4">
-              <h4 className="m-0 mb-2 font-display">
-                {group.name}
-                {group.rule?.required && <span className="text-primary text-[13px]"> · required</span>}
-              </h4>
-              <div className="flex flex-col gap-1">
-                {group.modifiers.map((m) => (
-                  <div key={m.id} className={`flex justify-between ${m.inStock ? "text-foreground" : "text-muted-foreground"}`}>
-                    <span>{m.name}{!m.inStock && " (sold out)"}</span>
-                    {m.additionalCharge && m.additionalCharge !== "0" && <span>+{formatPrice(m.additionalCharge)}</span>}
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-
-          <div className="flex items-center gap-3 mt-1">
-            <input type="number" min={1} value={d.quantity}
-              onChange={(e) => d.setQuantity(Math.max(1, Number(e.target.value) || 1))}
-              className="w-[72px] p-2.5 text-center border border-input rounded-sm bg-background text-foreground" />
-            <button disabled={!d.canAdd} onClick={d.submit}
-              className="flex-1 py-3 px-6 cursor-pointer bg-primary text-primary-foreground border-none rounded-sm text-[15px] font-semibold disabled:opacity-50 disabled:cursor-not-allowed">
-              {!d.ordering ? "Ordering unavailable" : d.inStock ? (d.adding ? "Adding…" : "Add to order") : "Sold out"}
-            </button>
-          </div>
-          {d.error && <p className="m-0 text-destructive text-sm">{d.error}</p>}
-        </div>
-      </div>
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/restaurants/app/components/MenuItemCard.jsx

@@ -1,71 +0,0 @@
-// One dish/drink tile. Styled with base44 design tokens (shadcn Tailwind classes) — re-skin via the
-// app's design tokens (src/index.css :root/.dark), not this JSX. The load-bearing bits: item.image is
-// an OBJECT (render .url, never the object) with a `//`-protocol fix; price is EITHER item.price
-// (single) OR item.variants[] (one-of, each { name, price }); MENU prices carry NO currency symbol
-// (formatPrice adds one — swap it for the site's currency). Clicking the card opens the item dialog
-// (add-to-cart lives there).
-function imageUrl(img) {
-  const url = img?.url;
-  return url ? (url.startsWith("//") ? `https:${url}` : url) : null;
-}
-
-// Restaurants MENU prices are plain decimal strings with NO currency symbol ("12.50").
-function formatPrice(price) {
-  return price == null ? "" : `$${price}`; // swap "$" for the site's currency
-}
-
-export default function MenuItemCard({ item, onOpen }) {
-  const image = imageUrl(item.image);
-  const soldOut = item.orderSettings?.inStock === false;
-
-  return (
-    <article
-      onClick={() => onOpen?.(item)}
-      className={`flex flex-col text-foreground bg-card border border-border rounded-lg overflow-hidden shadow-sm ${onOpen ? "cursor-pointer" : "cursor-default"}`}>
-      {image && (
-        <div className="relative aspect-[4/3] bg-background">
-          <img src={image} alt={item.name} loading="lazy"
-            className="w-full h-full object-cover" />
-          {soldOut && (
-            <span className="absolute top-2 left-2 py-0.5 px-2 text-xs bg-destructive text-destructive-foreground rounded-sm">Sold out</span>
-          )}
-        </div>
-      )}
-      <div className="p-3 flex flex-col gap-1.5">
-        <div className="flex justify-between items-baseline gap-2">
-          {/* Clamped like the storefront tile: the same title-beside-price row turns a long name
-              into three ragged lines. */}
-          <h3 className="m-0 font-display text-base font-semibold line-clamp-2">
-            {item.name}{item.featured && <span className="text-primary"> ★</span>}
-          </h3>
-          {/* price: single string, OR one-of variants — render one label per variant */}
-          {item.price != null
-            ? <span className="font-semibold whitespace-nowrap">{formatPrice(item.price)}</span>
-            : null}
-        </div>
-        {item.description && (
-          <p className="m-0 text-muted-foreground text-sm leading-[1.45]">{item.description}</p>
-        )}
-        {item.price == null && item.variants?.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            {item.variants.map((v) => (
-              <span key={v.variantId} className="text-[13px] text-foreground">
-                {v.name}: <strong>{formatPrice(v.price)}</strong>
-              </span>
-            ))}
-          </div>
-        )}
-        {item.labels?.length > 0 && (
-          <div className="flex flex-wrap gap-2 mt-0.5">
-            {item.labels.map((label) => (
-              <span key={label.id} className="inline-flex items-center gap-1 text-xs text-muted-foreground border border-border rounded-full py-0.5 px-2">
-                {imageUrl(label.icon) && <img src={imageUrl(label.icon)} alt="" className="w-3 h-3" />}
-                {label.name}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-    </article>
-  );
-}

package/skills/wix-vibe-headless/references/restaurants/app/components/MenuList.jsx

@@ -1,43 +0,0 @@
-// Renders the assembled getFullMenu() tree: menus → sections → item cards, with the empty state.
-// This is the menu render surface's body (the Menu page is a thin wrapper). Ordered already by
-// the helper (sectionIds / itemIds). Styled with base44 design tokens (shadcn Tailwind classes). Each
-// card's onOpen gets the item plus the menuId/sectionId it was shown under — ordering needs both.
-import MenuItemCard from "./MenuItemCard";
-
-function imageUrl(img) {
-  const url = img?.url;
-  return url ? (url.startsWith("//") ? `https:${url}` : url) : null;
-}
-
-export default function MenuList({ menus, onOpenItem, empty = "No menu yet — add one from your Wix dashboard." }) {
-  if (!menus?.length) {
-    return <p className="text-muted-foreground p-4 text-center">{empty}</p>;
-  }
-  return (
-    <div className="flex flex-col gap-8">
-      {menus.map((menu) => (
-        <section key={menu.id}>
-          <h2 className="font-display mb-1">{menu.name}</h2>
-          {menu.description && (
-            <p className="text-muted-foreground mb-4">{menu.description}</p>
-          )}
-          {menu.sections.map((section) => (
-            <div key={section.id} className="mb-6">
-              <h3 className="font-display mb-4">{section.name}</h3>
-              {imageUrl(section.image) && (
-                <img src={imageUrl(section.image)} alt={section.name} loading="lazy"
-                  className="w-full max-h-[220px] object-cover rounded-lg mb-4" />
-              )}
-              <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(260px,1fr))]">
-                {section.items.map((item) => (
-                  <MenuItemCard key={item.id} item={item}
-                    onOpen={() => onOpenItem?.(item, { menuId: menu.id, sectionId: section.id })} />
-                ))}
-              </div>
-            </div>
-          ))}
-        </section>
-      ))}
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/restaurants/app/components/OrderCartButton.jsx

@@ -1,21 +0,0 @@
-// Header order trigger — an icon button with a live item-count badge. Drop into the app header;
-// opens the OrderCartDrawer. Icon-only by design (no text): reads the header's currentColor, so it
-// inherits the brand automatically.
-import { useOrderCart } from "@/context/OrderCartContext";
-
-export default function OrderCartButton() {
-  const { itemCount, setIsOpen } = useOrderCart();
-  return (
-    <button onClick={() => setIsOpen(true)} aria-label={`Open order${itemCount ? `, ${itemCount} item${itemCount > 1 ? "s" : ""}` : ""}`}
-      className="relative inline-flex items-center justify-center w-10 h-10 p-0 cursor-pointer bg-transparent text-current border-none rounded-sm">
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-        <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
-        <path d="M3 6h18" />
-        <path d="M16 10a4 4 0 0 1-8 0" />
-      </svg>
-      {itemCount > 0 && (
-        <span className="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-[5px] inline-flex items-center justify-center text-[11px] font-semibold bg-primary text-primary-foreground rounded-full">{itemCount}</span>
-      )}
-    </button>
-  );
-}

package/skills/wix-vibe-headless/references/restaurants/app/components/OrderCartDrawer.jsx

@@ -1,72 +0,0 @@
-// Slide-over order cart. Reads everything from useOrderCart(); mutate by lineItem.id (NOT the menu
-// item id), check out via the context (redirect-session URL). The eCom Cart V2 line price is
-// `pricing.totalPrice`, a ConvertedMoney { amount, convertedAmount } with NO formatted string —
-// format it with the cart's currency (formatCartMoney below). Styled with base44 design tokens
-// (shadcn Tailwind classes). Mount it once in the Layout.
-import { useOrderCart } from "@/context/OrderCartContext";
-
-// Cart V2 money is a ConvertedMoney { amount, convertedAmount } with NO formatted string — format it
-// with the cart's currency (buyer's display currency when present, else the site currency).
-function formatCartMoney(money, cart) {
-  const value = money?.convertedAmount ?? money?.amount;
-  const currency = cart?.customerInfo?.currencyCode ?? cart?.businessInfo?.currencyCode ?? "USD";
-  return value == null ? "" : new Intl.NumberFormat(undefined, { style: "currency", currency }).format(Number(value));
-}
-
-export default function OrderCartDrawer() {
-  const { cart, isOpen, setIsOpen, removeItem, updateQuantity, checkout, loading } = useOrderCart();
-  const lineItems = cart?.lineItems ?? [];
-  if (!isOpen) return null;
-
-  return (
-    <div onClick={() => setIsOpen(false)} className="fixed inset-0 z-50 bg-black/40 flex justify-end">
-      <aside onClick={(e) => e.stopPropagation()}
-        className="w-[min(420px,100%)] h-full flex flex-col bg-background text-foreground border-l border-border font-body">
-        <header className="flex justify-between items-center p-4 border-b border-border">
-          <strong className="font-display">Your order</strong>
-          <button onClick={() => setIsOpen(false)} aria-label="Close order"
-            className="border-none bg-transparent cursor-pointer text-xl text-muted-foreground">×</button>
-        </header>
-
-        <div className="flex-1 overflow-y-auto p-4">
-          {lineItems.length === 0 ? (
-            <p className="text-muted-foreground">Your order is empty.</p>
-          ) : lineItems.map((line) => {
-            const qty = line.quantityInfo?.confirmedQuantity;
-            return (
-            <div key={line.id} className="flex gap-3 py-3 border-b border-border">
-              {/* line.id is the lineItemId for mutations — NOT the menu item id */}
-              <div className="flex-1 flex flex-col gap-1">
-                <span className="font-semibold">{line.name?.original}</span>
-                <div className="flex items-center gap-2 mt-1">
-                  <QtyButton onClick={() => updateQuantity(line.id, Math.max(1, qty - 1))}>−</QtyButton>
-                  <span className="min-w-[20px] text-center">{qty}</span>
-                  <QtyButton onClick={() => updateQuantity(line.id, qty + 1)}>+</QtyButton>
-                  <button onClick={() => removeItem(line.id)}
-                    className="ml-auto border-none bg-transparent cursor-pointer text-muted-foreground text-[13px] underline">Remove</button>
-                </div>
-              </div>
-              {/* Cart V2 has no formatted string — format the ConvertedMoney client-side */}
-              <span className="font-semibold">{formatCartMoney(line.pricing?.totalPrice, cart)}</span>
-            </div>
-            );
-          })}
-        </div>
-
-        {lineItems.length > 0 && (
-          <footer className="p-4 border-t border-border">
-            <button disabled={loading} onClick={checkout}
-              className="w-full p-3 cursor-pointer bg-primary text-primary-foreground border-none rounded-sm text-[15px] font-semibold disabled:opacity-60 disabled:cursor-wait">Checkout</button>
-          </footer>
-        )}
-      </aside>
-    </div>
-  );
-}
-
-function QtyButton({ children, onClick }) {
-  return (
-    <button onClick={onClick}
-      className="w-7 h-7 cursor-pointer leading-none bg-card text-foreground border border-border rounded-sm">{children}</button>
-  );
-}