@wix/agent-skills 1.20.1 → 1.22.0

package/skills/wix-headless-fast/references/storefront/app/components/storefront/CartDrawer.tsx

@@ -1,155 +0,0 @@
-// Slide-over cart with quantity stepper, remove, live subtotal, and Wix-hosted checkout.
-// Mount ONCE per page, as-is; opens via useCart().openCart() / CartButton. Styled from the
-// @theme tokens.
-import { useEffect, useRef } from "react";
-import { useCart } from "../../hooks/storefront/useCart";
-
-export default function CartDrawer() {
-  const { cart, open, closeCart, busy, error, updateQuantity, removeLine, checkout } = useCart();
-
-  // The overlay contract, done here rather than assumed from CSS: Escape closes (the backdrop
-  // click is pointer-only), the page behind stops scrolling, focus moves into the panel on open
-  // and returns to whatever opened it on close. Hooks run before the early return below.
-  const panelRef = useRef<HTMLElement>(null);
-  useEffect(() => {
-    if (!open) return;
-    const opener = document.activeElement;
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    panelRef.current?.focus();
-    const onKey = (e: KeyboardEvent) => e.key === "Escape" && closeCart();
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = previousOverflow;
-      if (opener instanceof HTMLElement) opener.focus();
-    };
-  }, [open, closeCart]);
-
-  if (!open) return null;
-  const lines = cart?.lines ?? [];
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex justify-end bg-foreground/40 backdrop-blur-[2px]"
-      onClick={closeCart}
-    >
-      <aside
-        ref={panelRef}
-        tabIndex={-1}
-        role="dialog"
-        aria-modal="true"
-        aria-label="Cart"
-        onClick={(e) => e.stopPropagation()}
-        className="flex h-full w-full max-w-md flex-col bg-background text-foreground shadow-2xl outline-none"
-      >
-        <div className="flex items-center justify-between border-b border-border px-6 py-5">
-          <span className="text-base font-semibold">
-            Cart{cart && cart.itemCount > 0 ? ` (${cart.itemCount})` : ""}
-          </span>
-          <button
-            type="button"
-            aria-label="Close cart"
-            onClick={closeCart}
-            className="text-xl leading-none text-muted-foreground transition-colors hover:text-foreground"
-          >
-            ×
-          </button>
-        </div>
-
-        <div className="flex-1 overflow-y-auto px-6 py-5">
-          {lines.length === 0 && (
-            <p className="py-16 text-center text-sm text-muted-foreground">Your cart is empty.</p>
-          )}
-          {lines.map((line) => (
-            <div className="mb-6 flex gap-4" key={line.lineItemId}>
-              {line.imageUrl ? (
-                <img
-                  src={line.imageUrl}
-                  alt=""
-                  loading="lazy"
-                  className="h-16 w-16 flex-shrink-0 rounded-md bg-secondary object-cover"
-                />
-              ) : (
-                <div aria-hidden="true" className="h-16 w-16 flex-shrink-0 rounded-md bg-secondary" />
-              )}
-              <div className="min-w-0 flex-1">
-                <p className="text-sm font-medium">{line.productName}</p>
-                {line.descriptionLines.map((d) => (
-                  <p className="mt-0.5 text-xs text-muted-foreground" key={d}>
-                    {d}
-                  </p>
-                ))}
-                {line.subscription && (
-                  <p className="mt-0.5 text-xs text-muted-foreground">Subscription: {line.subscription}</p>
-                )}
-                {line.status !== "IN_STOCK" && (
-                  <p className="mt-1 text-xs text-red-600">No longer available at this quantity</p>
-                )}
-                <div className="mt-2 flex items-center">
-                  <div className="inline-flex items-center gap-3 rounded-full border border-border px-2 py-0.5">
-                    <button
-                      type="button"
-                      aria-label="Decrease quantity"
-                      disabled={busy || line.quantity <= 1}
-                      onClick={() => updateQuantity(line.lineItemId, line.quantity - 1).catch(() => {})}
-                      className="px-1 text-base disabled:opacity-40"
-                    >
-                      −
-                    </button>
-                    <span className="text-sm tabular-nums">{line.quantity}</span>
-                    <button
-                      type="button"
-                      aria-label="Increase quantity"
-                      disabled={busy}
-                      onClick={() => updateQuantity(line.lineItemId, line.quantity + 1).catch(() => {})}
-                      className="px-1 text-base disabled:opacity-40"
-                    >
-                      +
-                    </button>
-                  </div>
-                  <button
-                    type="button"
-                    disabled={busy}
-                    onClick={() => removeLine(line.lineItemId).catch(() => {})}
-                    className="ml-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground disabled:opacity-40"
-                  >
-                    Remove
-                  </button>
-                </div>
-              </div>
-              <p className="text-sm font-medium">{line.linePrice}</p>
-            </div>
-          ))}
-        </div>
-
-        {lines.length > 0 && (
-          <div className="border-t border-border px-6 py-5">
-            {cart?.discount && (
-              <div className="mb-2 flex justify-between text-sm">
-                <span className="text-muted-foreground">Discount</span>
-                <span>−{cart.discount}</span>
-              </div>
-            )}
-            {cart?.subtotal && (
-              <div className="mb-1 flex justify-between text-sm">
-                <span className="text-muted-foreground">Subtotal</span>
-                <strong className="font-semibold">{cart.subtotal}</strong>
-              </div>
-            )}
-            <p className="mb-4 text-xs text-muted-foreground">Shipping and taxes are calculated at checkout.</p>
-            {error && <p className="mb-3 text-xs text-red-600">{error}</p>}
-            <button
-              type="button"
-              disabled={busy}
-              onClick={() => checkout().catch(() => {})}
-              className="w-full rounded-full bg-primary py-3.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-50"
-            >
-              {busy ? "One moment…" : "Continue to secure checkout"}
-            </button>
-          </div>
-        )}
-      </aside>
-    </div>
-  );
-}

package/skills/wix-headless-fast/references/storefront/app/components/storefront/FilterPanel.tsx

@@ -1,266 +0,0 @@
-// The gallery's filter layout — wire as-is, your grid goes inside:
-//
-//   <FilterPanel shop={shop}>
-//     …your loading / empty / error states and your grid of tiles…
-//   </FilterPanel>
-//
-// Renders: a toolbar (result count, sort, and under `md` a Filters button); active-filter chips;
-// then on `md`+ a two-column layout — a 16rem sidebar of collapsible groups (Price as a two-handle
-// slider with numeric fields, Availability, one group per option facet with swatches or pills) beside
-// your results, so expanded facets never push the products below the fold. Under `md` the same
-// groups live in a bottom sheet: changes are staged and commit on Apply; dismissing keeps the
-// current results. Sidebar changes commit immediately (a price pair on release/blur, valid only).
-// Styled from the @theme tokens.
-import { useEffect, useRef, useState, type ReactNode } from "react";
-import { SORTS, type ShopFilters, type UseShop } from "../../hooks/storefront/useShop";
-import type { CatalogSort } from "../../wix/storefront/catalog";
-
-interface Draft {
-  min: string;
-  max: string;
-  inStockOnly: boolean;
-  choiceIds: string[];
-}
-
-const draftFrom = (shop: UseShop): Draft => ({
-  min: String(shop.filters.minPrice ?? ""),
-  max: String(shop.filters.maxPrice ?? ""),
-  inStockOnly: !!shop.filters.inStockOnly,
-  choiceIds: shop.selectedChoiceIds,
-});
-
-function validPricePair(min: string, max: string): boolean {
-  if (min && !Number.isFinite(Number(min))) return false;
-  if (max && !Number.isFinite(Number(max))) return false;
-  if (min && max && Number(min) > Number(max)) return false;
-  return true;
-}
-
-export default function FilterPanel({ shop, children }: { shop: UseShop; children?: ReactNode }) {
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const [staged, setStaged] = useState<Draft>(() => draftFrom(shop));
-  const panelRef = useRef<HTMLElement>(null);
-
-  // The sheet is an overlay: root-level, scrim, scroll lock, Escape, focus in and back.
-  useEffect(() => {
-    if (!sheetOpen) return;
-    setStaged(draftFrom(shop));
-    const opener = document.activeElement;
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    panelRef.current?.focus();
-    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setSheetOpen(false);
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = previousOverflow;
-      if (opener instanceof HTMLElement) opener.focus();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sheetOpen]);
-
-  const commit = (d: Draft) => {
-    if (!validPricePair(d.min, d.max)) return;
-    const next: ShopFilters = {
-      ...shop.filters,
-      minPrice: d.min || undefined,
-      maxPrice: d.max || undefined,
-      inStockOnly: d.inStockOnly || undefined,
-    };
-    const same =
-      next.minPrice === shop.filters.minPrice &&
-      next.maxPrice === shop.filters.maxPrice &&
-      !!next.inStockOnly === !!shop.filters.inStockOnly;
-    if (!same) shop.setFilters(next);
-    for (const id of d.choiceIds) if (!shop.selectedChoiceIds.includes(id)) shop.toggleChoice(id);
-    for (const id of shop.selectedChoiceIds) if (!d.choiceIds.includes(id)) shop.toggleChoice(id);
-  };
-
-  const activeCount =
-    shop.selectedChoiceIds.length + (shop.filters.inStockOnly ? 1 : 0) + (shop.filters.minPrice || shop.filters.maxPrice ? 1 : 0);
-  const choiceName = (id: string) => shop.facets.flatMap((f) => f.choices).find((c) => c.id === id)?.name ?? id;
-
-  return (
-    <div className="flex flex-col gap-4">
-      {/* Toolbar */}
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <p className="text-sm text-muted-foreground" aria-live="polite">
-          {shop.total != null ? `${shop.total} ${shop.total === 1 ? "product" : "products"}` : ""}
-        </p>
-        <div className="flex items-center gap-2">
-          <button type="button" onClick={() => setSheetOpen(true)} className="rounded-md border border-border px-3 py-1.5 text-sm md:hidden">
-            Filters{activeCount ? ` (${activeCount})` : ""}
-          </button>
-          <label className="sr-only" htmlFor="shop-sort">Sort by</label>
-          <select id="shop-sort" value={shop.sort} onChange={(e) => shop.setSort(e.target.value as CatalogSort)}
-            className="rounded-md border border-border bg-background px-2 py-1.5 text-sm">
-            {Object.entries(SORTS).map(([key, { label }]) => <option key={key} value={key}>{label}</option>)}
-          </select>
-        </div>
-      </div>
-
-      {/* Active chips */}
-      {shop.hasActiveFilters && (
-        <div className="flex flex-wrap items-center gap-1.5" aria-label="Active filters">
-          {shop.selectedChoiceIds.map((id) => (
-            <button key={id} type="button" onClick={() => shop.toggleChoice(id)} className="rounded-full bg-secondary px-2.5 py-1 text-xs text-foreground">
-              {choiceName(id)} ×
-            </button>
-          ))}
-          {shop.filters.inStockOnly && (
-            <button type="button" onClick={() => shop.setFilters({ ...shop.filters, inStockOnly: undefined })} className="rounded-full bg-secondary px-2.5 py-1 text-xs">In stock ×</button>
-          )}
-          {(shop.filters.minPrice || shop.filters.maxPrice) && (
-            <button type="button" onClick={() => shop.setFilters({ ...shop.filters, minPrice: undefined, maxPrice: undefined })} className="rounded-full bg-secondary px-2.5 py-1 text-xs">
-              Price {shop.filters.minPrice ?? shop.priceRange?.min ?? "…"}–{shop.filters.maxPrice ?? shop.priceRange?.max ?? "…"} ×
-            </button>
-          )}
-          <button type="button" onClick={shop.clearFilters} className="text-xs text-muted-foreground underline">Clear all</button>
-        </div>
-      )}
-
-      {/* Sidebar + results */}
-      <div className="md:grid md:grid-cols-[16rem_minmax(0,1fr)] md:gap-8">
-        <aside className="hidden md:block" aria-label="Filters">
-          <Groups shop={shop} draft={draftFrom(shop)} onChange={commit} immediate />
-        </aside>
-        <div className="min-w-0">{children}</div>
-      </div>
-
-      {/* Sheet — small screens; staged until Apply */}
-      {sheetOpen && (
-        <div className="fixed inset-0 z-50 flex items-end bg-foreground/40 md:hidden" onClick={() => setSheetOpen(false)}>
-          <section ref={panelRef} tabIndex={-1} role="dialog" aria-modal="true" aria-label="Filters" onClick={(e) => e.stopPropagation()}
-            className="flex max-h-[85vh] w-full flex-col rounded-t-2xl bg-background text-foreground outline-none">
-            <div className="flex items-center justify-between px-5 pt-5">
-              <h2 className="text-base font-semibold">Filters</h2>
-              <button type="button" aria-label="Close filters" onClick={() => setSheetOpen(false)} className="text-xl leading-none">×</button>
-            </div>
-            <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
-              <Groups shop={shop} draft={staged} onChange={setStaged} />
-            </div>
-            <div className="flex gap-2 border-t border-border bg-background px-5 py-3">
-              <button type="button" onClick={() => setStaged({ min: "", max: "", inStockOnly: false, choiceIds: [] })}
-                className="flex-1 rounded-full border border-border py-2.5 text-sm">Clear</button>
-              <button type="button" onClick={() => { commit(staged); setSheetOpen(false); }}
-                className="flex-1 rounded-full bg-primary py-2.5 text-sm font-semibold text-primary-foreground">Apply</button>
-            </div>
-          </section>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// The filter groups — one markup for the sidebar (immediate commit) and the sheet (staged).
-function Groups({ shop, draft, onChange, immediate = false }: { shop: UseShop; draft: Draft; onChange: (d: Draft) => void; immediate?: boolean }) {
-  const toggle = (id: string) =>
-    onChange({ ...draft, choiceIds: draft.choiceIds.includes(id) ? draft.choiceIds.filter((x) => x !== id) : [...draft.choiceIds, id] });
-  return (
-    <div className="flex flex-col divide-y divide-border">
-      <Group title="Price">
-        <PriceControl
-          range={shop.priceRange}
-          min={draft.min}
-          max={draft.max}
-          onCommit={(min, max) => onChange({ ...draft, min, max })}
-          immediate={immediate}
-        />
-      </Group>
-      <Group title="Availability">
-        <label className="flex items-center gap-2 text-sm">
-          <input type="checkbox" checked={draft.inStockOnly} onChange={(e) => onChange({ ...draft, inStockOnly: e.target.checked })} />
-          In stock only
-        </label>
-      </Group>
-      {shop.facets.map((facet) => (
-        <Group key={facet.name} title={facet.name} count={facet.choices.filter((c) => draft.choiceIds.includes(c.id)).length}>
-          <div className="flex flex-wrap gap-1.5">
-            {facet.choices.map((c) => {
-              const on = draft.choiceIds.includes(c.id);
-              return facet.isColor && c.colorCode ? (
-                <button key={c.id} type="button" aria-pressed={on} aria-label={c.name} title={c.name} onClick={() => toggle(c.id)}
-                  className={`h-7 w-7 rounded-full border-2 ${on ? "border-foreground" : "border-border"}`} style={{ backgroundColor: c.colorCode }} />
-              ) : (
-                <button key={c.id} type="button" aria-pressed={on} onClick={() => toggle(c.id)}
-                  className={`rounded-full border px-3 py-1 text-sm ${on ? "border-foreground bg-foreground text-background" : "border-border bg-background text-foreground"}`}>
-                  {c.name}
-                </button>
-              );
-            })}
-          </div>
-        </Group>
-      ))}
-    </div>
-  );
-}
-
-// A collapsible group — native <details>, open by default, the selected count on the summary.
-function Group({ title, count = 0, children }: { title: string; count?: number; children: ReactNode }) {
-  return (
-    <details open className="group py-3">
-      <summary className="flex cursor-pointer list-none items-center justify-between text-sm font-medium">
-        <span>{title}{count ? <span className="ml-1.5 text-xs text-muted-foreground">({count})</span> : null}</span>
-        <span aria-hidden="true" className="text-muted-foreground transition-transform group-open:rotate-180">⌄</span>
-      </summary>
-      <div className="pt-3">{children}</div>
-    </details>
-  );
-}
-
-// Two-handle range slider bounded by the scope's real prices, with the numeric pair under it.
-// Local drafts while dragging/typing; a VALID pair commits on release / blur / Enter (immediate mode)
-// or on every change (staged mode, where Apply commits later).
-function PriceControl({ range, min, max, onCommit, immediate }: {
-  range: UseShop["priceRange"]; min: string; max: string; onCommit: (min: string, max: string) => void; immediate: boolean;
-}) {
-  const [lo, setLo] = useState(min);
-  const [hi, setHi] = useState(max);
-  useEffect(() => { setLo(min); setHi(max); }, [min, max]);
-  const bounds = range ?? null;
-  const loN = lo === "" ? (bounds?.min ?? 0) : Number(lo);
-  const hiN = hi === "" ? (bounds?.max ?? 0) : Number(hi);
-  const step = bounds ? Math.max(1, Math.round((bounds.max - bounds.min) / 100)) : 1;
-  const pct = (v: number) => (bounds ? ((v - bounds.min) / (bounds.max - bounds.min)) * 100 : 0);
-  const publish = (a: string, b: string) => {
-    // at the bounds the filter is "no bound" — omit it rather than sending the catalog's own extremes
-    const A = bounds && a !== "" && Number(a) <= bounds.min ? "" : a;
-    const B = bounds && b !== "" && Number(b) >= bounds.max ? "" : b;
-    if (validPricePair(A, B)) onCommit(A, B);
-  };
-  const setFromSlider = (which: "lo" | "hi", v: number) => {
-    const a = which === "lo" ? String(Math.min(v, hiN)) : lo;
-    const b = which === "hi" ? String(Math.max(v, loN)) : hi;
-    setLo(a); setHi(b);
-    if (!immediate) publish(a, b);
-  };
-  const release = () => immediate && publish(lo, hi);
-  const thumb = "pointer-events-none absolute inset-x-0 top-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-foreground [&::-webkit-slider-thumb]:bg-background [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-foreground [&::-moz-range-thumb]:bg-background";
-  return (
-    <div className="flex flex-col gap-3">
-      {bounds && (
-        <div className="relative h-6" aria-hidden={false}>
-          <div className="absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded bg-secondary" />
-          <div className="absolute top-1/2 h-1 -translate-y-1/2 rounded bg-foreground" style={{ left: `${pct(loN)}%`, right: `${100 - pct(hiN)}%` }} />
-          <input type="range" aria-label="Minimum price" min={bounds.min} max={bounds.max} step={step} value={loN}
-            onChange={(e) => setFromSlider("lo", Number(e.target.value))} onPointerUp={release} onKeyUp={release} className={thumb} />
-          <input type="range" aria-label="Maximum price" min={bounds.min} max={bounds.max} step={step} value={hiN}
-            onChange={(e) => setFromSlider("hi", Number(e.target.value))} onPointerUp={release} onKeyUp={release} className={thumb} />
-        </div>
-      )}
-      <div className="flex items-center gap-2">
-        <label className="sr-only" htmlFor="filter-min">Minimum price</label>
-        <input id="filter-min" inputMode="decimal" placeholder={bounds ? String(bounds.min) : "Min"} value={lo}
-          onChange={(e) => { setLo(e.target.value); if (!immediate) publish(e.target.value, hi); }}
-          onBlur={release} onKeyDown={(e) => e.key === "Enter" && release()}
-          className="w-full min-w-0 rounded-md border border-border bg-background px-2 py-1.5 text-sm" />
-        <span className="text-muted-foreground">–</span>
-        <label className="sr-only" htmlFor="filter-max">Maximum price</label>
-        <input id="filter-max" inputMode="decimal" placeholder={bounds ? String(bounds.max) : "Max"} value={hi}
-          onChange={(e) => { setHi(e.target.value); if (!immediate) publish(lo, e.target.value); }}
-          onBlur={release} onKeyDown={(e) => e.key === "Enter" && release()}
-          className="w-full min-w-0 rounded-md border border-border bg-background px-2 py-1.5 text-sm" />
-      </div>
-    </div>
-  );
-}

package/skills/wix-headless-fast/references/storefront/app/components/storefront/OptionPicker.tsx

@@ -1,95 +0,0 @@
-// The purchase controls for one product — option groups (swatches for a color option, pills
-// otherwise, out-of-stock choices disabled), choice modifiers, an optional quantity stepper, and
-// the buy button gated by the hook: disabled with a plain reason ("Choose Size") until every
-// choice is made, "Pre-order" when the resolved variant is pre-orderable, the hook's error inline.
-// QuickAdd's picker and your product page mount the same component, so buying behaves the same
-// in the gallery and on the PDP. Wire as-is; style via the tokens.
-//
-//   const d = useProductDetail({ initial });            // the PDP
-//   <OptionPicker detail={d} showQuantity />
-//
-// Price, name, gallery, description, and layout stay yours — render d.price / d.compareAtPrice
-// beside this (the range until every option is picked, then the variant's price).
-import type { UseProductDetail } from "../../hooks/storefront/useProductDetail";
-
-export default function OptionPicker({
-  detail: d,
-  showQuantity = false,
-  onAdded,
-}: {
-  detail: UseProductDetail;
-  /** The PDP shows a quantity stepper; a tile picker adds one. */
-  showQuantity?: boolean;
-  /** Called after a successful add (a tile picker closes itself here). */
-  onAdded?: () => void;
-}) {
-  if (!d.product) return null;
-  return (
-    <div className="flex flex-col gap-3">
-      {d.optionGroups.map((g) => (
-        <fieldset key={g.id}>
-          <legend className="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">{g.name}</legend>
-          <div className="flex flex-wrap gap-1.5">
-            {g.choices.map((c) =>
-              g.isColor && c.colorCode ? (
-                <button key={c.choiceId} type="button" aria-label={c.name} title={c.name} aria-pressed={c.selected}
-                  disabled={!c.inStock} onClick={() => d.selectOption(g.name, c.name)}
-                  className={`h-8 w-8 rounded-full border-2 disabled:opacity-30 ${c.selected ? "border-foreground" : "border-border"}`}
-                  style={{ backgroundColor: c.colorCode }} />
-              ) : (
-                <button key={c.choiceId} type="button" aria-pressed={c.selected} disabled={!c.inStock}
-                  onClick={() => d.selectOption(g.name, c.name)}
-                  className={`rounded-full border px-3 py-1 text-sm disabled:line-through disabled:opacity-40 ${c.selected ? "border-foreground bg-foreground text-background" : "border-border"}`}>
-                  {c.name}
-                </button>
-              ),
-            )}
-          </div>
-        </fieldset>
-      ))}
-      {d.product.modifiers.filter((m) => m.type === "choices").map((m) => (
-        <fieldset key={m.key}>
-          <legend className="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-            {m.name}{m.mandatory ? " *" : ""}
-          </legend>
-          <div className="flex flex-wrap gap-1.5">
-            {m.choices.map((c) => (
-              <button key={c.key} type="button" aria-pressed={d.modifierValues[m.key] === c.key}
-                onClick={() => d.setModifier(m.key, c.key)}
-                className={`rounded-full border px-3 py-1 text-sm ${d.modifierValues[m.key] === c.key ? "border-foreground bg-foreground text-background" : "border-border"}`}>
-                {c.name}
-              </button>
-            ))}
-          </div>
-        </fieldset>
-      ))}
-      {d.product.modifiers.filter((m) => m.type === "text").map((m) => (
-        <label key={m.key} className="flex flex-col gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-          {m.name}{m.mandatory ? " *" : ""}
-          <input type="text" value={d.modifierValues[m.key] ?? ""} onChange={(e) => d.setModifier(m.key, e.target.value)}
-            className="rounded-md border border-border bg-background px-3 py-2 text-sm normal-case tracking-normal text-foreground" />
-        </label>
-      ))}
-      <div className="flex items-stretch gap-2">
-        {showQuantity && (
-          <div className="flex items-center rounded-full border border-border">
-            <button type="button" aria-label="Decrease quantity" disabled={d.quantity <= 1} onClick={() => d.setQuantity(d.quantity - 1)}
-              className="px-3 py-2 text-sm disabled:opacity-40">−</button>
-            <span className="min-w-6 text-center text-sm tabular-nums">{d.quantity}</span>
-            <button type="button" aria-label="Increase quantity" onClick={() => d.setQuantity(d.quantity + 1)} className="px-3 py-2 text-sm">+</button>
-          </div>
-        )}
-        <button
-          type="button"
-          disabled={!d.canAdd || d.adding}
-          onClick={() => d.add().then(() => onAdded?.()).catch(() => {})}
-          className="flex-1 rounded-full bg-primary py-2.5 text-sm font-semibold text-primary-foreground disabled:opacity-50"
-        >
-          {d.adding ? "Adding…" : d.isPreorder ? "Pre-order" : "Add to cart"}
-        </button>
-      </div>
-      {d.blockedReason && !d.canAdd && <p className="text-xs text-muted-foreground">{d.blockedReason}</p>}
-      {d.error && <p className="text-xs text-red-600">{d.error}</p>}
-    </div>
-  );
-}

package/skills/wix-headless-fast/references/storefront/app/components/storefront/QuickAdd.tsx

@@ -1,136 +0,0 @@
-// The card's purchase control — the three gallery purchase paths, decided from the product:
-//   • no options            → Direct Add: one click, the cheapest variant, quantity 1
-//   • options / choice mods → Quick Add: a picker on the card (bottom sheet on small screens)
-//   • free-text modifier    → the product page (the gallery can't collect the text)
-// Mount as the LAST ROW of the tile's text block (under name and price), as a direct child of the
-// tile root that carries `relative flex flex-col` — the picker anchors to that root and takes its
-// width, and the control pins itself to the tile's bottom (mt-auto) so the action row lines up
-// across a grid row whether or not a neighbour carries swatches or a struck price. Never overlay
-// it on the image, never wrap it in a narrower positioned box.
-//   <QuickAdd product={p} />   Wire as-is; style via the tokens.
-import { useEffect, useRef, useState } from "react";
-import { useCart } from "../../hooks/storefront/useCart";
-import { useProductDetail } from "../../hooks/storefront/useProductDetail";
-import type { ProductSummary } from "../../wix/storefront/types";
-import OptionPicker from "./OptionPicker";
-
-export default function QuickAdd({ product }: { product: ProductSummary }) {
-  return (
-    // A tile is often one big <a>. A click inside the buy control must never become a navigation
-    // to the product page — this boundary cancels the link's default for everything below it
-    // (the button, the picker, the sheet). Still: keep the control OUTSIDE the tile's link.
-    <div
-      className="contents"
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-    >
-      <QuickAddControl product={product} />
-    </div>
-  );
-}
-
-function QuickAddControl({ product }: { product: ProductSummary }) {
-  const { addToCart, busy } = useCart();
-  const [open, setOpen] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  if (product.availability === "OUT_OF_STOCK" && !product.preorder) {
-    return <span className="mt-auto block pt-3 text-sm text-muted-foreground">Out of stock</span>;
-  }
-  if (product.quickAddable) {
-    return (
-      <div className="mt-auto pt-3">
-        <button
-          type="button"
-          disabled={busy}
-          onClick={() =>
-            addToCart(product.id, product.minPriceVariantId, 1).catch((e) => setError(e instanceof Error ? e.message : String(e)))
-          }
-          className="w-full rounded-full border border-foreground py-2 text-sm font-medium transition-colors hover:bg-foreground hover:text-background disabled:opacity-50"
-        >
-          {product.preorder ? "Pre-order" : "Add to cart"}
-        </button>
-        {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
-      </div>
-    );
-  }
-  // Options to pick, or a single variant that isn't plainly in stock (pre-order, partial stock):
-  // the picker resolves it through useProductDetail, exactly as the PDP would.
-  return (
-    <div className="mt-auto pt-3">
-      <button
-        type="button"
-        onClick={() => setOpen(true)}
-        className="w-full rounded-full border border-foreground py-2 text-sm font-medium transition-colors hover:bg-foreground hover:text-background"
-      >
-        {product.optionsSummary ? "Choose options" : product.preorder ? "Pre-order" : "Add to cart"}
-      </button>
-      {open && <QuickAddPicker product={product} onClose={() => setOpen(false)} />}
-    </div>
-  );
-}
-
-// The picker fetches the full product only when it opens — cards never carry PDP data. Its controls
-// are the shipped OptionPicker, the same component the PDP mounts.
-function QuickAddPicker({ product, onClose }: { product: ProductSummary; onClose: () => void }) {
-  const d = useProductDetail({ slug: product.slug });
-  const panelRef = useRef<HTMLElement>(null);
-
-  // Overlay contract: Escape closes, scroll locks under md, focus moves in and back.
-  useEffect(() => {
-    const opener = document.activeElement;
-    const isSmall = window.matchMedia("(max-width: 767px)").matches;
-    const previousOverflow = document.body.style.overflow;
-    if (isSmall) document.body.style.overflow = "hidden";
-    panelRef.current?.focus();
-    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = previousOverflow;
-      if (opener instanceof HTMLElement) opener.focus();
-    };
-  }, [onClose]);
-
-  const needsPdp = (d.product?.modifiers ?? []).some((m) => m.type === "text");
-
-  return (
-    <>
-      <div className="fixed inset-0 z-40 bg-foreground/40 md:hidden" onClick={onClose} />
-      <section
-        ref={panelRef}
-        tabIndex={-1}
-        role="dialog"
-        aria-modal="true"
-        aria-label={`Choose options for ${product.name}`}
-        // md+: anchored to the tile (its nearest `relative` ancestor), the tile's full width — and never
-        // narrower than 18rem even when mounted inside a small wrapper.
-        className="fixed inset-x-0 bottom-0 z-50 max-h-[85vh] overflow-y-auto rounded-t-2xl bg-background p-5 text-foreground shadow-2xl outline-none md:absolute md:inset-x-auto md:bottom-0 md:right-0 md:w-[max(100%,18rem)] md:max-h-none md:rounded-lg md:p-4"
-      >
-        <div className="mb-3 flex items-start justify-between gap-3">
-          <div className="min-w-0">
-            <p className="truncate text-sm font-semibold">{product.name}</p>
-            <p className="text-sm">
-              {d.price}
-              {d.compareAtPrice && <span className="ml-2 text-muted-foreground line-through">{d.compareAtPrice}</span>}
-            </p>
-          </div>
-          <button type="button" aria-label="Close" onClick={onClose} className="text-xl leading-none text-muted-foreground">×</button>
-        </div>
-
-        {!d.product && !d.notFound && <p className="text-sm text-muted-foreground">Loading options…</p>}
-        {d.notFound && <p className="text-sm text-muted-foreground">This product isn't available anymore.</p>}
-
-        {d.product && needsPdp && (
-          <a href={`/products/${product.slug}`} className="block rounded-full bg-primary py-2.5 text-center text-sm font-semibold text-primary-foreground">
-            Customize on the product page
-          </a>
-        )}
-
-        {d.product && !needsPdp && <OptionPicker detail={d} onAdded={onClose} />}
-      </section>
-    </>
-  );
-}