@wix/agent-skills 1.14.0 → 1.15.0

package/skills/wix-headless/references/astro/templates/stores/category/[slug].astro

@@ -1,130 +0,0 @@
----
-// /category/[slug] — server-side filtered, cursor-paginated category
-// landing. Renders the same product grid as /products, but constrained to
-// one category, with breadcrumbs and a category-specific page header.
-//
-// The CategoryRail is shared with /products via transition:persist, so
-// switching categories swaps only the grid and header.
-import Layout from "../../layouts/Layout.astro";
-import ProductCard from "../../components/ProductCard.astro";
-import CategoryRail from "../../components/CategoryRail.astro";
-import {
-  getCategoryBySlug,
-  listProductsInCategory,
-  listStoreCategories,
-} from "../../utils/categories";
-
-const PAGE_SIZE = 24;
-const { slug } = Astro.params;
-
-if (!slug) {
-  return Astro.redirect("/products");
-}
-
-const category = await getCategoryBySlug(slug);
-if (!category) {
-  return new Response("Category not found", { status: 404 });
-}
-
-const cursor = Astro.url.searchParams.get("cursor") ?? undefined;
-const page = await listProductsInCategory(category.id, {
-  limit: PAGE_SIZE,
-  cursor,
-});
-
-// Drop the Wix Gift Card app's auto-mirror products (DIGITAL stand-ins
-// tagged "Gift Card") — real purchases happen via /gift-cards.
-const productList = page.items.filter((p: any) => p.ribbon?.name !== "Gift Card");
-
-const allCategories = await listStoreCategories();
-
-const impressionContents = productList.map((p, index) => ({
-  id: p._id,
-  name: p.name,
-  price: Number(p.actualPriceRange?.minValue?.amount ?? 0),
-  currency: p.actualPriceRange?.minValue?.currency ?? undefined,
-  position: index + 1,
-}));
-
-function pageHref(c: string | null): string | null {
-  if (!c) return null;
-  const params = new URLSearchParams();
-  params.set("cursor", c);
-  return `/category/${category!.slug}?${params.toString()}`;
-}
----
-
-<Layout
-  title={`${category.name}`}
-  description={category.description ?? `Browse our ${category.name.toLowerCase()} collection.`}
->
-  <section class="page-header">
-    <div class="container-page">
-      <nav class="breadcrumbs" aria-label="Breadcrumb">
-        <a href="/" data-astro-prefetch="hover">Home</a>
-        <span aria-hidden="true">&middot;</span>
-        <a href="/products" data-astro-prefetch="hover">Shop</a>
-        <span aria-hidden="true">&middot;</span>
-        <span aria-current="page">{category.name}</span>
-      </nav>
-      <h1 class="page-header-title">{category.name}</h1>
-      {category.description && (
-        <p class="page-header-lede">{category.description}</p>
-      )}
-    </div>
-    {category.imageUrl && (
-      <div class="page-header-image" aria-hidden="true">
-        <img
-          src={category.imageUrl}
-          alt=""
-          loading="lazy"
-          decoding="async"
-        />
-      </div>
-    )}
-  </section>
-
-  <CategoryRail
-    categories={allCategories}
-    activeSlug={category.slug}
-    prevHref={pageHref(page.prevCursor)}
-    nextHref={pageHref(page.nextCursor)}
-  />
-
-  <section class="section-pad">
-    <div class="container-page">
-      {productList.length === 0 ? (
-        <p class="products-empty">
-          Nothing in {category.name} just now &mdash; please check back shortly.
-        </p>
-      ) : (
-        <div class="product-grid">
-          {productList.map((product, idx) => (
-            <ProductCard product={product} index={idx} />
-          ))}
-        </div>
-      )}
-    </div>
-  </section>
-</Layout>
-
-<script
-  type="application/json"
-  id="analytics-impressions"
-  is:inline
-  set:html={JSON.stringify(impressionContents)}
-/>
-<script>
-  import { trackEvent } from "../../utils/analytics";
-  function fireImpressions() {
-    const el = document.getElementById("analytics-impressions");
-    if (!el?.textContent) return;
-    trackEvent("AddProductImpression", {
-      contents: JSON.parse(el.textContent),
-      origin: "Category Page",
-    });
-  }
-  // astro:page-load fires on initial load AND after every <ClientRouter />
-  // navigation, so a single listener covers both fresh hits and swaps.
-  document.addEventListener("astro:page-load", fireImpressions);
-</script>

package/skills/wix-headless/references/astro/templates/stores/components-stores.css

@@ -1,400 +0,0 @@
-/* src/styles/components-stores.css
- *
- * Stores-pack component CSS. Owned by the stores Phase 3 components agent.
- *
- * This file is the SINGLE source of truth for stores-component classes.
- * The designer's global.css does NOT publish .product-card, .product-grid,
- * .product-card-media, .product-card-ribbon, .product-card-index, or the
- * .offer-callout family — those all live here. See references/shared/STYLING.md
- * § "Component-specific CSS is owned by the component, not the designer".
- *
- * Class groups in this file:
- * - .product-card / .product-grid / .product-card-* → product cards (ProductCard.astro), product listings (products/index.astro, category/[slug].astro), home grid (index.astro)
- * - .offer-callout family → discount callout above ProductPurchase on /products/[slug]
- * - .option-* / .stock-status / .modifier-text → ProductPurchase.tsx (variant pills, stock label, free-text modifier)
- * - .quantity-* → ProductPurchase.tsx + CartView.tsx (quantity stepper)
- * - .back-in-stock-* → BackInStockForm.tsx (out-of-stock subscribe)
- *
- * Uses the palette + typography custom properties declared in global.css.
- */
-
-/* =========================================================================
-   Product card + grid — owned here, NOT in global.css.
-   The .product-card uses overflow: hidden + border-radius, so inner padding
-   is the responsibility of THIS file (whoever sets the radius owns the
-   inset). Don't ship a stub rule and rely on the template to add padding
-   utilities — that's the leak this file was created to prevent.
-   ========================================================================= */
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 2rem;
-  transition: opacity 200ms ease;
-}
-body[data-navigating="true"] .product-grid {
-  opacity: 0.55;
-  pointer-events: none;
-}
-
-.product-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding-bottom: 1rem;
-  background: var(--color-paper, var(--color-cream));
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  text-decoration: none;
-  color: inherit;
-  transition: transform 280ms ease, box-shadow 280ms ease;
-  box-shadow: var(--shadow-card, 0 4px 16px -8px rgba(0, 0, 0, 0.15));
-}
-.product-card:hover {
-  transform: translateY(-4px);
-}
-.product-card:hover .product-card-media > img {
-  transform: scale(1.04);
-}
-
-.product-card-media {
-  position: relative;
-  margin: 1rem;
-  aspect-ratio: 4 / 5;
-  background: var(--color-paper-warm, var(--color-cream));
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-.product-card-media > img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 600ms ease;
-}
-
-.product-card-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding-inline: 1rem;
-}
-.product-card-name {
-  margin: 0;
-  font-family: var(--font-display);
-  font-size: 1.125rem;
-  line-height: 1.25;
-  color: var(--color-ink);
-}
-.product-card-price {
-  margin: 0;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  letter-spacing: 0.02em;
-  color: var(--color-mute);
-}
-
-.product-card-ribbon {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  padding: 0.375rem 0.625rem;
-  background: var(--color-accent);
-  color: var(--color-ink);
-  font-family: var(--font-body);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  border-radius: var(--radius-sm);
-  z-index: 2;
-}
-.product-card-index {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  padding: 0.375rem 0.5rem;
-  background: rgba(255, 255, 255, 0.85);
-  color: var(--color-ink);
-  font-family: var(--font-display);
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  border-radius: var(--radius-pill, 9999px);
-  z-index: 2;
-}
-
-/* =========================================================================
-   Offer callout — bordered panel above ProductPurchase on /products/[slug].
-   Compound multi-element pattern. The dashboard-authored offer string can
-   contain `\n` line breaks; -detail must preserve them via white-space.
-   ========================================================================= */
-.offer-callout {
-  background: var(--color-paper-warm, var(--color-cream));
-  border: 1px solid var(--color-rule);
-  border-left: 2px solid var(--color-accent);
-  padding: 1.5rem;
-  border-radius: var(--radius-md);
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.offer-callout-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.offer-callout-item + .offer-callout-item {
-  padding-top: 1rem;
-  border-top: 1px solid var(--color-rule);
-}
-.offer-callout-badge {
-  align-self: flex-start;
-  padding: 0.25rem 0.5rem;
-  background: var(--color-ink);
-  color: var(--color-paper);
-  font-family: var(--font-body);
-  font-size: 0.625rem;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  border-radius: var(--radius-sm);
-}
-.offer-callout-name {
-  font-family: var(--font-display);
-  font-size: 1rem;
-  color: var(--color-ink);
-  margin: 0;
-}
-.offer-callout-detail {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-ink-soft, var(--color-mute));
-  white-space: pre-line;
-  margin: 0;
-}
-.offer-callout-foot {
-  font-family: var(--font-body);
-  font-size: 0.75rem;
-  color: var(--color-mute);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin: 0;
-}
-
-
-/* =========================================================================
-   Rules below use direct CSS (var(--token)) only — no `@apply`.
-
-   Tailwind v4 `@apply` in a non-entrypoint CSS file only works for utilities
-   whose theme keys the designer's `@theme` block declares. Earlier revisions
-   of this template used `@apply font-heading text-bark/70 bg-parchment …`,
-   which assumed a different token vocabulary than current designer output
-   (`paper`/`ink`/`font-display` …) and built-failed on every run that loaded
-   it. Direct `var(--color-paper)` / `0.75rem` calls work against
-   any designer-published token set as long as the core scales exist (they
-   always do). Use fallback chains (`var(--color-paper-warm, var(--color-cream))`)
-   when a token is sometimes-published.
-   ========================================================================= */
-
-/* --- Variant / option pills (ProductPurchase.tsx) --- */
-.option-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-.option-label {
-  font-family: var(--font-display);
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-ink-soft, var(--color-mute));
-}
-.option-choices {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-.option-pill {
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--color-ink);
-  background: transparent;
-  color: var(--color-ink);
-  font-family: var(--font-body);
-  border-radius: 9999px;
-  cursor: pointer;
-  transition: background-color 150ms ease, color 150ms ease;
-}
-.option-pill.selected {
-  background: var(--color-ink);
-  color: var(--color-paper);
-}
-.option-pill:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* --- Quantity stepper (ProductPurchase.tsx, CartView.tsx qty editing) --- */
-.quantity-selector {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--color-ink);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-.quantity-btn {
-  padding: 0.5rem 0.75rem;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--color-ink);
-  font-family: var(--font-body);
-}
-.quantity-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-.quantity-value {
-  padding: 0.75rem 1rem;
-  font-variant-numeric: tabular-nums;
-}
-
-/* --- Modifier free-text input (ProductPurchase.tsx, FREE_TEXT render type) --- */
-.modifier-text {
-  width: 100%;
-  padding: 0.75rem;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-sm);
-  background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
-  color: var(--color-ink);
-  resize: vertical;
-}
-.modifier-text:focus {
-  outline: none;
-  border-color: var(--color-ink);
-  background: var(--color-paper, var(--color-cream));
-}
-
-/* --- Stock status (ProductPurchase.tsx) --- */
-.stock-status {
-  font-size: 0.875rem;
-  color: var(--color-ink-soft, var(--color-mute));
-  font-style: italic;
-}
-
-/* --- Back-in-stock subscribe form (BackInStockForm.tsx) ---
- * Rendered inside .purchase-area in three OOS branches when
- * backInStockEnabled=true (probe in [slug].astro). */
-.back-in-stock-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: 1rem;
-  padding: 1.5rem;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-md);
-  background: var(--color-paper, var(--color-cream));
-}
-.back-in-stock-headline {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-.back-in-stock-eyebrow {
-  font-family: var(--font-display);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-ink-soft, var(--color-mute));
-}
-.back-in-stock-lede {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-ink);
-  line-height: 1.5;
-}
-.back-in-stock-label {
-  font-family: var(--font-display);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-ink-soft, var(--color-mute));
-}
-.back-in-stock-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-.back-in-stock-input {
-  flex: 1;
-  padding: 0.75rem 1rem;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-sm);
-  background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
-  color: var(--color-ink);
-  min-width: 0;
-  transition: border-color 0.15s ease;
-}
-.back-in-stock-input:focus {
-  outline: none;
-  border-color: var(--color-ink);
-}
-.back-in-stock-submit {
-  padding: 0.75rem 1.5rem;
-  font-family: var(--font-display);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  background: var(--color-ink);
-  color: var(--color-paper);
-  border: 1px solid var(--color-ink);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-.back-in-stock-submit:hover:not(:disabled) {
-  background: var(--color-ink-soft, var(--color-ink));
-}
-.back-in-stock-submit:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.back-in-stock-error {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-error, var(--color-accent));
-}
-.back-in-stock-success {
-  margin-top: 1rem;
-  padding: 1.5rem;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-md);
-  background: var(--color-paper, var(--color-cream));
-}
-.back-in-stock-success-headline {
-  font-family: var(--font-display);
-  font-size: 1rem;
-  color: var(--color-ink);
-  margin: 0 0 0.5rem 0;
-}
-.back-in-stock-success-detail {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-ink);
-  line-height: 1.55;
-  margin: 0;
-}
-.stock-status.back-in-stock-alt {
-  margin-top: 0.75rem;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  font-style: italic;
-  color: var(--color-ink-soft, var(--color-mute));
-}
-
-/* Cart CSS (.cart-item-*, .qty-*) lives in components-ecom.css — not in this file. */

package/skills/wix-headless/references/astro/templates/stores/products/[slug].astro

@@ -1,128 +0,0 @@
----
-// SSR only — productsV3 SDK needs request-context auth (tenant resolution,
-// site headers). `export const prerender = true` / `getStaticPaths()` builds
-// at compile time with no request, and `.queryProducts().limit()` short-
-// circuits to "is not a function". Keep this page server-rendered; do NOT
-// add prerender=true or getStaticPaths.
-import Layout from "../../layouts/Layout.astro";
-import ProductPurchase from "../../components/ProductPurchase.tsx";
-import SeoTags from "../../components/SeoTags.astro";
-import { productsV3, inventoryItemsV3 } from "@wix/stores";
-import { resolveWixImageUrl } from "../../utils/wix-image";
-import { getBackInStockEnabled } from "../../utils/back-in-stock";
-
-// Tell Wix platform this route is the Stores "product" sub-page.
-// Drives sitemap, dashboard SEO editor, deep links.
-export const wixMetadata = {
-  appDefId: "1380b703-ce81-ff05-f115-39571d94dfcd",
-  pageIdentifier: "wix.stores.sub_pages.product",
-  identifiers: {
-    slug: "STORES.PRODUCT.SLUG",
-  },
-};
-
-const { slug } = Astro.params;
-
-// Wrap the SSR await; a throw here aborts the response stream.
-let product: any = null;
-try {
-  const result = await productsV3.getProductBySlug(slug!, {
-    fields: ["CURRENCY", "PLAIN_DESCRIPTION"],
-  });
-  product = result.product;
-} catch (err) {
-  console.error("[product-detail] getProductBySlug failed:", err);
-}
-
-if (!product) return Astro.redirect("/404");
-
-// Live per-variant stock from inventoryItemsV3 — the authoritative source of
-// truth for OOS gating. productsV3's variantsInfo[].inventoryStatus.inStock is
-// a stale cached flag that does NOT reflect real-time stock changes; don't
-// trust it for the add-to-cart gate. See SHARED_WIRING.md § "Variant OOS gate".
-interface VariantStock { quantity: number; trackQuantity: boolean; preorderEnabled: boolean }
-const inventoryByVariant: Record<string, VariantStock> = {};
-try {
-  const inv: any = await inventoryItemsV3.queryInventoryItems({
-    filter: { productId: product._id },
-  });
-  for (const item of (inv?.items ?? inv?.inventoryItems ?? []) as any[]) {
-    if (!item.variantId) continue;
-    inventoryByVariant[item.variantId] = {
-      quantity: Number(item.quantity ?? 0),
-      trackQuantity: item.trackQuantity === true,
-      preorderEnabled: item.preorderInfo?.enabled === true,
-    };
-  }
-} catch (err) {
-  console.error("[product-detail] inventory query failed:", err);
-}
-
-const imageUrl = resolveWixImageUrl(product.media?.main?.image, 800, 1066);
-const price = product.actualPriceRange?.minValue?.formattedAmount;
-const priceAmount = Number(product.actualPriceRange?.minValue?.amount ?? 0);
-const currency = product.actualPriceRange?.minValue?.currency;
-const description = product.plainDescription?.replace(/<[^>]*>/g, "").trim();
-
-// SSR probe — true only if the dashboard's "Start Collecting Requests" toggle
-// is on for Wix Stores. Returns false on any error so the OOS subscribe form
-// silently hides if the probe / auth fails. See references/BACK_IN_STOCK.md.
-const backInStockEnabled = await getBackInStockEnabled();
-
-// Merchant-edited SEO from dashboard (product settings → SEO).
-// product.seoData.tags returned by default — no fields flag needed.
-const seoTags = product.seoData?.tags ?? [];
-const hasSeoTags = seoTags.some((t: any) => !t.disabled);
-
-const viewContentPayload = {
-  id: product._id,
-  name: product.name,
-  price: priceAmount,
-  currency,
-  origin: "Product Page",
-};
----
-
-<Layout
-  title={product.name ?? "Product"}
-  description={description?.slice(0, 160)}
-  hasSeoTags={hasSeoTags}
->
-  {hasSeoTags && <SeoTags slot="head" tags={seoTags} />}
-  <main class="py-16">
-    <div class="max-w-wide mx-auto px-8">
-      <a href="/products" class="text-mute text-sm tracking-wide uppercase">&larr; Back to products</a>
-      <div class="grid grid-cols-1 md:grid-cols-[7fr_5fr] gap-12 md:gap-24 mt-8 items-start">
-        <div class="aspect-[4/5] bg-cream rounded-sm overflow-hidden">
-          {imageUrl && <img src={imageUrl} alt={product.name ?? "Product"} class="w-full h-full object-cover" />}
-        </div>
-        <div class="flex flex-col gap-6 md:sticky md:top-12">
-          <h1 class="font-display text-4xl leading-tight">{product.name}</h1>
-          {price && <p class="text-xl text-ink-soft">{price}</p>}
-          {description && <p class="text-ink-soft leading-relaxed">{description}</p>}
-          <ProductPurchase
-            client:load
-            product={product}
-            inventoryByVariant={inventoryByVariant}
-            backInStockEnabled={backInStockEnabled}
-            priceAmount={priceAmount}
-          />
-        </div>
-      </div>
-    </div>
-  </main>
-</Layout>
-
-<script
-  type="application/json"
-  id="analytics-view-content"
-  is:inline
-  set:html={JSON.stringify(viewContentPayload)}
-/>
-<script>
-  import { trackEvent } from "../../utils/analytics";
-  const el = document.getElementById("analytics-view-content");
-  if (el?.textContent) {
-    trackEvent("ViewContent", JSON.parse(el.textContent));
-  }
-</script>