@wix/agent-skills 1.17.0 → 1.18.0

package/skills/wix-vibe-headless/references/storefront/seed/seed-store.js

@@ -149,15 +149,16 @@ function buildOptions(options = []) {
 }
 
 // full Cartesian product of variants, each priced/stocked from the product; visible:true baked in
-function expandVariants(options = [], { price, compareAtPrice, quantity }) {
+function expandVariants(options = [], { price, compareAtPrice, quantity }, digitalFileId) {
   const base = {
     price: {
       actualPrice: { amount: String(price) },
       ...(compareAtPrice ? { compareAtPrice: { amount: String(compareAtPrice) } } : {}),
     },
     visible: true,
-    physicalProperties: {},
-    inventoryItem: { quantity: quantity ?? 0, preorderInfo: { enabled: false } },
+    ...(digitalFileId
+      ? { digitalProperties: { digitalFile: { id: digitalFileId } }, inventoryItem: { inStock: true } }
+      : { physicalProperties: {}, inventoryItem: { quantity: quantity ?? 0, preorderInfo: { enabled: false } } }),
   };
   if (!options.length) return [base];
   let combos = [[]];
@@ -170,6 +171,33 @@ function expandVariants(options = [], { price, compareAtPrice, quantity }) {
   return combos.map((choices) => ({ ...base, choices }));
 }
 
+// A digital variant is SELLABLE only with BOTH a file and stock: without the file the cart rejects
+// it as ITEM_NOT_FOUND_IN_CATALOG, without stock as "exceeds available inventory" — and either way
+// the product reads back visible and in the catalog, so nothing surfaces until a buyer tries to buy.
+// `digitalFileUrl` is the only way into DIGITAL here, which makes the file-less product unbuildable.
+// The bytes are PUT, not imported by url: an uploaded file is READY at once, while an imported one
+// stays PENDING and the cart rejects the product until it settles.
+const FILE_MIME = { pdf: "application/pdf", zip: "application/zip", epub: "application/epub+zip",
+  mp3: "audio/mpeg", wav: "audio/wav", mp4: "video/mp4", png: "image/png", jpg: "image/jpeg" };
+
+async function uploadDigitalFile(ctx, url, fileName) {
+  const mimeType = FILE_MIME[(fileName.split(".").pop() || "").toLowerCase()];
+  if (!mimeType) throw new Error(`digitalFileName needs one of these extensions (${Object.keys(FILE_MIME).join(", ")}): ${fileName}`);
+  const { uploadUrl } = await req(ctx, "/site-media/v1/files/generate-upload-url", { body: { mimeType, fileName } });
+  const src = await fetch(url);
+  if (!src.ok) throw new Error(`digitalFileUrl ${url} -> ${src.status}`);
+  const res = await fetch(uploadUrl, {
+    method: "PUT", headers: { "Content-Type": mimeType }, body: Buffer.from(await src.arrayBuffer()),
+  });
+  const json = await res.json().catch(() => ({}));
+  const id = (json.file || json)?.id;
+  if (!res.ok || !id) throw new Error(`digital file upload failed (${res.status}): ${JSON.stringify(json).slice(0, 200)}`);
+  return id;
+}
+
+const digitalFileName = (p) =>
+  p.digitalFileName || decodeURIComponent(new URL(p.digitalFileUrl).pathname.split("/").pop() || "");
+
 // ---- exported operations ----
 
 async function installStoresApp(ctx) {
@@ -193,7 +221,10 @@ async function listProducts(ctx) {
 /**
  * Bulk-create products.
  * @param products [{ name, description, price, compareAtPrice?, quantity,
- *   options?: [{ name, type?:"text"|"color", choices:["8","9"] | [{name,colorCode}] }] }]
+ *   options?: [{ name, type?:"text"|"color", choices:["8","9"] | [{name,colorCode}] }],
+ *   digitalFileUrl?, digitalFileName? }]
+ *   digitalFileUrl: makes the product a DIGITAL download — the file is uploaded and the variant
+ *   created with both the file and stock (see uploadDigitalFile). `quantity` is ignored.
  *   description: plain text, or simple HTML (`<p>`, `<br/>`, `<strong>`, `<em>`) — converted to
  *   Wix rich text here, so the storefront renders paragraphs and bold rather than tag text.
  *   options = ONLY things the buyer selects-and-buys (Size, Color) -> become variants.
@@ -202,17 +233,20 @@ async function listProducts(ctx) {
  * @returns [{ id, slug, revision }]
  */
 async function bulkCreateProducts(ctx, products) {
+  const fileIds = await Promise.all(products.map((p) =>
+    p.digitalFileUrl ? uploadDigitalFile(ctx, p.digitalFileUrl, digitalFileName(p)) : null));
   const body = {
     returnEntity: true,
     products: products.map((p, i) => ({
       name: p.name,
-      productType: "PHYSICAL",
-      physicalProperties: {},
+      // DIGITAL drops physicalProperties and can't be POS-visible (DIGITAL_PRODUCT_CANNOT_BE_VISIBLE_IN_POS).
+      ...(fileIds[i]
+        ? { productType: "DIGITAL" }
+        : { productType: "PHYSICAL", physicalProperties: {}, visibleInPos: true }),
       visible: true,
-      visibleInPos: true,
       description: mkDesc(p.description, i),
       options: buildOptions(p.options),
-      variantsInfo: { variants: expandVariants(p.options, p) },
+      variantsInfo: { variants: expandVariants(p.options, p, fileIds[i]) },
     })),
   };
   const r = await req(ctx, "/stores/v3/bulk/products-with-inventory/create", { body });
@@ -221,6 +255,7 @@ async function bulkCreateProducts(ctx, products) {
     id: x.item?.id, slug: x.item?.slug, revision: x.item?.revision,
     variantId: x.item?.variantsInfo?.variants?.[0]?.id,
     hasOptions: (products[i]?.options?.length ?? 0) > 0,
+    isDigital: !!fileIds[i],
     quantity: products[i]?.quantity ?? 0,
   }));
   await stockOptionlessProducts(ctx, created);
@@ -233,7 +268,7 @@ async function bulkCreateProducts(ctx, products) {
 // are already stocked by the create above, so they're skipped. Backfills the default variantId from a
 // query if the create response didn't return it.
 async function stockOptionlessProducts(ctx, created) {
-  const need = created.filter((p) => !p.hasOptions && p.id);
+  const need = created.filter((p) => !p.hasOptions && !p.isDigital && p.id); // digital variants ship inStock from the create
   if (!need.length) return;
   const missing = need.filter((p) => !p.variantId).map((p) => p.id);
   if (missing.length) {
@@ -300,7 +335,8 @@ async function attachProductImages(ctx, items) {
  * the DEFAULT path — call it once instead of the individual functions.
  *
  * @param plan {{
- *   products: [{ name, description, price, compareAtPrice?, quantity, options?, imageUrl?, altText? }],
+ *   products: [{ name, description, price, compareAtPrice?, quantity, options?, imageUrl?, altText?,
+ *                digitalFileUrl?, digitalFileName? }],
  *   categories?: { [categoryName]: string[] },   // map of category name -> product NAMES in it
  * }}
  * @returns { products: [{id,slug,revision,name}], categories: [{id,name}], imagesAttached: number }

package/skills/wix-vibe-headless/references/storefront/app/components/ProductCard.jsx

@@ -1,110 +0,0 @@
-// Reference implementation of a product grid tile built on useProductCard.
-// Styled with base44 design tokens (shadcn Tailwind classes: bg-card / text-foreground / border-border).
-// Build your own card on useProductCard instead — read this for inspiration, don't use it directly.
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import { useCart } from "@/context/CartContext";
-import { useProductCard } from "@/hooks/useProductCard";
-
-const badge = "px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide rounded-full";
-const badgePromo    = `${badge} bg-primary text-primary-foreground`;
-const badgeInfo     = `${badge} bg-card text-foreground border border-border`;
-const badgeBlocked  = `${badge} bg-destructive text-destructive-foreground`;
-
-const badgeClass = { "pre-order": badgeInfo, "sold-out": badgeBlocked, "limited-stock": badgeInfo };
-
-export default function ProductCard({ product }) {
-  const { addToCart } = useCart();
-  const [adding, setAdding] = useState(false);
-
-  const {
-    isSoldOut, isPreorder, leftBadges, promoBadge,
-    priceDisplay, compareAtDisplay,
-    colors, optionLabel,
-    isQuickAddable, image, hoverImage,
-  } = useProductCard(product);
-
-  const quickAdd = async () => {
-    setAdding(true);
-    await addToCart(product.id);
-    setAdding(false);
-  };
-
-  return (
-    <div className="group relative flex flex-col bg-card border border-border rounded-lg overflow-hidden shadow-sm">
-      <div className="relative aspect-square bg-background">
-        <Link to={`/product/${product.slug}`} aria-label={product.name} className="block w-full h-full">
-          {image ? (
-            <>
-              <img src={image} alt={product.name} loading="lazy"
-                className={`w-full h-full object-cover ${hoverImage ? "transition-opacity duration-300 md:group-hover:opacity-0" : ""}`} />
-              {hoverImage && (
-                <img src={hoverImage} alt="" aria-hidden="true" loading="lazy"
-                  className="hidden md:block absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
-              )}
-            </>
-          ) : (
-            <div className="w-full h-full bg-muted flex items-center justify-center" aria-hidden="true">
-              <svg viewBox="0 0 24 24" className="w-8 h-8 text-muted-foreground/40" fill="none" stroke="currentColor" strokeWidth="1.5">
-                <rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" />
-              </svg>
-            </div>
-          )}
-        </Link>
-
-        <div className="absolute top-2 left-2 flex flex-col items-start gap-1 pointer-events-none">
-          {leftBadges.map((b) => (
-            <span key={b.type} className={badgeClass[b.type]}>{b.label}</span>
-          ))}
-        </div>
-        <div className="absolute top-2 right-2 pointer-events-none">
-          {promoBadge && <span className={badgePromo}>{promoBadge.label}</span>}
-        </div>
-
-        {(!isSoldOut || isPreorder) && (
-          <div className="absolute inset-x-2 bottom-2 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100">
-            {isQuickAddable ? (
-              <button onClick={quickAdd} disabled={adding}
-                className="w-full py-2.5 px-4 rounded-full bg-primary text-primary-foreground border-none text-sm font-semibold cursor-pointer transition-opacity hover:opacity-90 disabled:opacity-60 disabled:cursor-wait">
-                {adding ? "Adding…" : "Quick add"}
-              </button>
-            ) : (
-              <Link to={`/product/${product.slug}`}
-                className="block w-full text-center py-2.5 px-4 rounded-full bg-primary text-primary-foreground no-underline text-sm font-semibold">
-                {isSoldOut ? "Pre-order" : "Choose options"}
-              </Link>
-            )}
-          </div>
-        )}
-      </div>
-
-      <div className="p-3 flex flex-col gap-1">
-        <div className="flex flex-col gap-1 md:flex-row md:items-baseline md:justify-between md:gap-3">
-          <h3 className="m-0 font-display text-[15px] font-semibold line-clamp-2">
-            <Link to={`/product/${product.slug}`} className="no-underline text-foreground">{product.name}</Link>
-          </h3>
-          <div className="flex gap-2 items-baseline flex-wrap md:justify-end">
-            <span className="font-semibold whitespace-nowrap">{priceDisplay}</span>
-            {compareAtDisplay && (
-              <span className="text-muted-foreground line-through text-[13px] whitespace-nowrap">{compareAtDisplay}</span>
-            )}
-          </div>
-        </div>
-
-        {(colors.length > 0 || optionLabel) && (
-          <div className="flex items-center gap-2 text-[13px] text-muted-foreground min-h-[18px]">
-            {colors.length > 0 && (
-              <span className="flex items-center gap-1" aria-label={`${colors.length} colors available`}>
-                {colors.slice(0, 5).map((c, i) => (
-                  <span key={`${c}-${i}`} className="w-3 h-3 rounded-full ring-1 ring-inset ring-black/20" style={{ backgroundColor: c }} />
-                ))}
-                {colors.length > 5 && <span>+{colors.length - 5}</span>}
-              </span>
-            )}
-            {optionLabel && <span>{optionLabel}</span>}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/storefront/app/components/ProductGallery.jsx

@@ -1,51 +0,0 @@
-// PDP image gallery — main image plus thumbnails from productGallery(product), which puts
-// media.main first and drops the duplicate of it that media.itemsInfo.items carries. A product with a
-// single image renders just the main frame, so this is safe for a one-photo catalog.
-// Styled with base44 design tokens (shadcn Tailwind classes).
-import { useEffect, useState } from "react";
-
-export default function ProductGallery({ images, name, focusUrl }) {
-  const [index, setIndex] = useState(0);
-  // Reset when navigating between products — the component stays mounted across a slug change.
-  // `images` must keep a stable identity per product (the PDP memoises it), or every parent render —
-  // a quantity bump, an option click — would land here and throw away the image the buyer picked.
-  useEffect(() => { setIndex(0); }, [images]);
-
-  // Picking a colour swatch shows that colour: focusUrl is the choice's linked photo. Runs after the
-  // reset effect, so a first paint with a colour pre-selected opens on the right image.
-  useEffect(() => {
-    const i = images?.findIndex((img) => img.url === focusUrl) ?? -1;
-    if (i >= 0) setIndex(i);
-  }, [focusUrl, images]);
-
-  const current = images?.[index];
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="aspect-square bg-card rounded-lg overflow-hidden">
-        {current ? (
-          <img src={current.url} alt={current.altText || name} className="w-full h-full object-cover" />
-        ) : (
-          <div className="w-full h-full bg-muted flex items-center justify-center" aria-hidden="true">
-            <svg viewBox="0 0 24 24" className="w-10 h-10 text-muted-foreground/40" fill="none" stroke="currentColor" strokeWidth="1.5">
-              <rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" />
-            </svg>
-          </div>
-        )}
-      </div>
-
-      {images?.length > 1 && (
-        <div className="flex gap-2 flex-wrap" role="group" aria-label={`${name} images`}>
-          {images.map((img, i) => (
-            <button key={img.url} onClick={() => setIndex(i)} aria-label={`Show image ${i + 1}`} aria-current={i === index}
-              className={`w-16 h-16 rounded-sm overflow-hidden cursor-pointer bg-card border ${
-                i === index ? "border-primary" : "border-border"
-              }`}>
-              <img src={img.url} alt="" loading="lazy" className="w-full h-full object-cover" />
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/storefront/app/components/ProductGrid.jsx

@@ -1,49 +0,0 @@
-// Reference implementation of a product grid — 2-col mobile, auto-fill desktop, with a skeleton
-// loading state and a descriptive empty state. Build your own layout instead (see INSTRUCTIONS.md
-// STEP 3) — read this for the skeleton/empty-state patterns, don't use it directly.
-import ProductCard from "./ProductCard";
-
-// Skeleton tiles match ProductCard's aspect-square + two text lines, so nothing shifts when the real
-// products land.
-export function ProductGridSkeleton({ count = 8 }) {
-  return (
-    <div className="grid gap-4 grid-cols-2 md:[grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]" aria-hidden="true">
-      {Array.from({ length: count }).map((_, i) => (
-        <div key={i} className="bg-card border border-border rounded-lg overflow-hidden">
-          <div className="aspect-square bg-muted animate-pulse" />
-          <div className="p-3 flex flex-col gap-2">
-            <div className="flex justify-between gap-3">
-              <div className="h-3.5 w-1/2 bg-muted rounded-sm animate-pulse" />
-              <div className="h-3.5 w-1/5 bg-muted rounded-sm animate-pulse" />
-            </div>
-            <div className="h-3 w-1/3 bg-muted rounded-sm animate-pulse" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default function ProductGrid({ products, loading, empty = "No products yet.", emptyHint }) {
-  if (loading) return <ProductGridSkeleton />;
-
-  if (!products?.length) {
-    return (
-      <div className="flex flex-col items-center justify-center text-center gap-3 py-16 px-4">
-        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
-          className="text-muted-foreground/40" 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>
-        <h2 className="font-display m-0 text-lg font-semibold">{empty}</h2>
-        {emptyHint && <p className="m-0 text-muted-foreground max-w-[46ch]">{emptyHint}</p>}
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid gap-4 grid-cols-2 md:[grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
-      {products.map((p) => <ProductCard key={p.id} product={p} />)}
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/storefront/app/components/VariantPicker.jsx

@@ -1,92 +0,0 @@
-// PDP choice controls built on useVariantOptions — swap this component for your own if you want
-// a different look; the data contract (optionGroups / modifierGroups) stays the same.
-// Styled with base44 design tokens (shadcn Tailwind classes).
-import { useVariantOptions } from "@/hooks/useVariantOptions";
-
-const chipBase = "py-1.5 px-3 cursor-pointer text-sm font-body border rounded-sm";
-const chipIdle = "border-border bg-card text-foreground";
-const chipActive = "border-primary bg-primary text-primary-foreground";
-const label = "block mb-1.5 text-[13px] font-semibold text-muted-foreground";
-
-export default function VariantPicker({ options, modifiers, selectedOptions, selectOption, modifierValues, setModifier }) {
-  const { optionGroups, modifierGroups } = useVariantOptions(options, modifiers, selectedOptions, modifierValues);
-
-  return (
-    <>
-      {optionGroups.map((group) => (
-        <div key={group.id} className="mb-4">
-          <label className={label}>
-            {group.name}
-            {group.isColor && (
-              <span className="ml-1.5 font-normal text-foreground">
-                {group.choices.find((c) => c.selected)?.name}
-              </span>
-            )}
-          </label>
-          <div className="flex flex-wrap gap-2">
-            {group.choices.map((c) =>
-              c.isColorSwatch ? (
-                <button
-                  key={c.choiceId}
-                  type="button"
-                  disabled={!c.inStock}
-                  onClick={() => selectOption(group.id, c.choiceId)}
-                  aria-pressed={c.selected}
-                  aria-label={`${c.name}${!c.inStock ? " (out of stock)" : ""}`}
-                  title={c.name}
-                  className={`relative w-9 h-9 rounded-full cursor-pointer transition-shadow ring-1 ring-inset ring-black/15 ${
-                    c.selected ? "ring-2 ring-offset-2 ring-offset-background ring-primary" : ""
-                  } ${!c.inStock ? "opacity-40 cursor-not-allowed" : "hover:ring-2 hover:ring-offset-1 hover:ring-offset-background hover:ring-border"}`}
-                  style={{ backgroundColor: c.colorCode }}
-                >
-                  {!c.inStock && (
-                    <span aria-hidden="true" className="absolute inset-0 grid place-items-center">
-                      <span className="w-full h-px bg-destructive rotate-45" />
-                    </span>
-                  )}
-                </button>
-              ) : (
-                <button
-                  key={c.choiceId}
-                  type="button"
-                  disabled={!c.inStock}
-                  aria-pressed={c.selected}
-                  onClick={() => selectOption(group.id, c.choiceId)}
-                  className={`${chipBase} ${c.selected ? chipActive : chipIdle} ${!c.inStock ? "opacity-40 line-through" : ""}`}
-                >
-                  {c.name}
-                </button>
-              )
-            )}
-          </div>
-        </div>
-      ))}
-
-      {modifierGroups.map((m) => (
-        <div key={m.key} className="mb-4">
-          <label className={label}>{m.name}{m.mandatory && " *"}</label>
-          {m.type === "text" ? (
-            <input
-              value={m.value}
-              onChange={(e) => setModifier(m.key, e.target.value)}
-              className="w-full py-2 px-3 font-body border border-input rounded-sm bg-background text-foreground"
-            />
-          ) : (
-            <div className="flex flex-wrap gap-2">
-              {m.choices.map((c) => (
-                <button
-                  key={c.key}
-                  aria-pressed={c.selected}
-                  onClick={() => setModifier(m.key, c.key)}
-                  className={`${chipBase} ${c.selected ? chipActive : chipIdle}`}
-                >
-                  {c.name}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      ))}
-    </>
-  );
-}

package/skills/wix-vibe-headless/references/storefront/app/pages/ProductDetail.jsx

@@ -1,139 +0,0 @@
-// PDP — thin view over useProductDetail (all logic lives in the hook). plainDescription is HTML
-// despite the name; render via dangerouslySetInnerHTML. Styled with base44 design tokens (shadcn Tailwind classes).
-//
-// The price shown follows the selection: once options resolve to a variant the hook returns that
-// variant's price, so a picked size can cost more than the "from" figure the grid tile showed.
-import { useMemo } from "react";
-import { Link, useParams } from "react-router-dom";
-import { useProductDetail } from "@/hooks/useProductDetail";
-import { productGallery } from "@/lib/storeImage";
-import ProductGallery from "@/components/ProductGallery";
-import VariantPicker from "@/components/VariantPicker";
-
-export default function ProductDetail() {
-  const { slug } = useParams();
-  const d = useProductDetail(slug);
-  // Memoised so the gallery keeps its selected image across re-renders (see ProductGallery).
-  const images = useMemo(() => productGallery(d.product), [d.product]);
-
-  if (d.error) {
-    return (
-      <Centered>
-        <p className="m-0">{d.error}</p>
-        <button onClick={d.retry} className="border border-border bg-card text-foreground rounded-sm py-2 px-4 cursor-pointer text-sm">Try again</button>
-      </Centered>
-    );
-  }
-  if (d.notFound) {
-    return (
-      <Centered>
-        <p className="m-0">We couldn't find that product.</p>
-        <Link to="/shop" className="text-primary">Back to shop</Link>
-      </Centered>
-    );
-  }
-  if (!d.product) return <ProductDetailSkeleton />;
-
-  const compareAt = d.product?.compareAtPriceRange?.minValue?.formattedAmount;
-
-  return (
-    <main className="max-w-[1200px] mx-auto p-4">
-      <nav aria-label="Breadcrumb" className="mb-4 text-sm text-muted-foreground">
-        <Link to="/shop" className="text-muted-foreground hover:text-foreground">Shop</Link>
-        <span aria-hidden="true"> / </span>
-        <span className="text-foreground">{d.product.name}</span>
-      </nav>
-
-      <div className="grid gap-8 [grid-template-columns:repeat(auto-fit,minmax(320px,1fr))]">
-        <ProductGallery images={images} name={d.product.name} focusUrl={d.focusMediaUrl} />
-
-        <div>
-          <h1 className="font-display m-0 mb-2">{d.product.name}</h1>
-
-          <div className="flex items-baseline gap-2 mb-4">
-            <p className="text-[22px] font-semibold m-0">{d.price}</p>
-            {compareAt && compareAt !== d.price && (
-              <span className="text-muted-foreground line-through">{compareAt}</span>
-            )}
-          </div>
-
-          {d.product.plainDescription && (
-            <div className="text-muted-foreground leading-relaxed mb-6"
-              dangerouslySetInnerHTML={{ __html: d.product.plainDescription }} />
-          )}
-
-          <VariantPicker
-            options={d.options} modifiers={d.modifiers}
-            selectedOptions={d.selectedOptions} selectOption={d.selectOption}
-            modifierValues={d.modifierValues} setModifier={d.setModifier}
-          />
-
-          {/* Tell the buyer WHY the button is dead: an unresolvable combination reads as a broken page. */}
-          {d.options.length > 0 && !d.variant && (
-            <p className="text-[13px] text-muted-foreground m-0 mt-1">Pick an option from each list to continue.</p>
-          )}
-
-          <div className="flex items-stretch gap-3 mt-4">
-            <QuantityStepper value={d.quantity} onChange={d.setQuantity} disabled={!d.inStock} />
-            <button disabled={!d.canAdd || d.adding} onClick={d.submit}
-              className="flex-1 h-12 px-6 bg-primary text-primary-foreground border-none rounded-md text-[15px] font-semibold cursor-pointer transition-opacity hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed">
-              {d.adding ? "Adding…" : d.inStock ? "Add to cart" : "Out of stock"}
-            </button>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-}
-
-// Segmented −/+ stepper, height-matched to the Add-to-cart button so the row reads as one control.
-// A native number input is avoided on purpose: its spinners are ~10px, OS-rendered (so they ignore
-// the app's tokens), effectively untappable, and they accept "e"/"+"/"1e5" plus scroll-wheel edits.
-// The value stays typeable — inputMode="numeric" brings up a keypad — but only digits survive, and
-// blur restores 1 when the field is left empty. `tabular-nums` keeps the width steady across digits.
-function QuantityStepper({ value, onChange, disabled }) {
-  const set = (n) => onChange(Math.max(1, n));
-  return (
-    <div data-disabled={disabled || undefined}
-      className="inline-flex items-stretch h-12 rounded-md border border-input bg-background overflow-hidden data-[disabled]:opacity-50">
-      <StepButton label="Decrease quantity" disabled={disabled || value <= 1} onClick={() => set(value - 1)}>−</StepButton>
-      <label className="sr-only" htmlFor="pdp-qty">Quantity</label>
-      <input id="pdp-qty" type="text" inputMode="numeric" autoComplete="off" disabled={disabled}
-        value={value} aria-live="polite"
-        onChange={(e) => { const n = e.target.value.replace(/\D/g, ""); onChange(n === "" ? "" : Math.max(1, Number(n))); }}
-        onBlur={(e) => { if (!e.target.value) set(1); }}
-        className="w-12 text-center bg-transparent text-foreground font-semibold tabular-nums border-x border-input outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed" />
-      <StepButton label="Increase quantity" disabled={disabled} onClick={() => set(Number(value || 0) + 1)}>+</StepButton>
-    </div>
-  );
-}
-
-function StepButton({ children, label, onClick, disabled }) {
-  return (
-    <button type="button" onClick={onClick} disabled={disabled} aria-label={label}
-      className="w-11 grid place-items-center text-lg leading-none text-muted-foreground bg-transparent border-none cursor-pointer transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent">
-      {children}
-    </button>
-  );
-}
-
-function ProductDetailSkeleton() {
-  return (
-    <main className="max-w-[1200px] mx-auto p-4" aria-busy="true">
-      <div className="grid gap-8 [grid-template-columns:repeat(auto-fit,minmax(320px,1fr))]">
-        <div className="aspect-square bg-muted rounded-lg animate-pulse" />
-        <div className="flex flex-col gap-3">
-          <div className="h-7 w-2/3 bg-muted rounded-sm animate-pulse" />
-          <div className="h-6 w-24 bg-muted rounded-sm animate-pulse" />
-          <div className="h-4 w-full bg-muted rounded-sm animate-pulse mt-3" />
-          <div className="h-4 w-5/6 bg-muted rounded-sm animate-pulse" />
-          <div className="h-11 w-full bg-muted rounded-sm animate-pulse mt-6" />
-        </div>
-      </div>
-    </main>
-  );
-}
-
-function Centered({ children }) {
-  return <div className="p-12 flex flex-col items-center gap-3 text-center text-muted-foreground">{children}</div>;
-}