@wix/agent-skills 1.5.0 → 1.7.0

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

@@ -0,0 +1,302 @@
+/* src/styles/components-ecom.css
+ *
+ * Ecom-pack component CSS. Owned by the ecom Phase 3 components agent.
+ *
+ * This file is the SINGLE source of truth for ecom-component classes.
+ * The designer's global.css does NOT publish .cart-summary, .cart-total,
+ * .cart-empty, or .checkout-btn — 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:
+ * - .cart-summary / .cart-total / .cart-empty / .checkout-btn → /cart page summary panel and empty state
+ * - .cart-item / .cart-item-* / .qty-* → CartView.tsx line items
+ * - .cart-discount / .cart-applied-discounts → CartView.tsx discount rows
+ * - .cart-badge / .cart-badge-* → CartBadge.tsx (mounted in Navigation)
+ *
+ * Rules use direct CSS (`var(--token)`) only — no `@apply`. Tailwind v4
+ * `@apply` in a non-entrypoint file only resolves utilities whose theme keys
+ * the designer's `@theme` block declares. Earlier revisions of this template
+ * used `@apply text-bark/70 bg-tobacco …` (stale token vocabulary) and
+ * `@apply size-6` (built-in utility that needs `@reference` to be visible
+ * here), and both classes built-failed against current designer output.
+ * Direct `var(--color-ink)` / `var(--spacing-sm)` 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-paper, var(--color-cream)))`)
+ * for sometimes-published tokens.
+ */
+
+/* =========================================================================
+   Cart summary panel + total + checkout button + empty state.
+   Owned here, NOT in global.css.
+   ========================================================================= */
+.cart-summary {
+  background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
+  border: 1px solid var(--color-rule);
+  padding: var(--spacing-xl);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+@media (min-width: 768px) {
+  .cart-summary {
+    position: sticky;
+    top: var(--spacing-xl);
+  }
+}
+
+.cart-empty {
+  text-align: center;
+  padding-block: var(--spacing-3xl);
+  color: var(--color-mute);
+}
+.cart-empty .checkout-btn {
+  display: inline-flex;
+  width: auto;
+  max-width: 18rem;
+}
+
+/* .checkout-btn — primary CTA, full-width inside .cart-summary. Self-contained;
+   does NOT @apply the designer's `btn` utility (Tailwind v4 only @applies
+   utilities declared with `@utility`, and the designer may or may not have
+   declared it under that exact name). Composing the same visual shape inline
+   keeps this file portable across designer vocabularies. */
+.checkout-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-family: var(--font-display);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border: 1px solid var(--color-ink);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  width: 100%;
+  margin-top: var(--spacing-md);
+  transition: background-color 150ms ease, box-shadow 150ms ease;
+}
+.checkout-btn:hover:not(:disabled) {
+  background: var(--color-ink-soft, var(--color-ink));
+}
+.checkout-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* --- Cart badge icon (CartBadge.tsx) --- */
+/* CartBadge.tsx renders an inline SVG bag icon + optional count span. */
+.cart-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.cart-badge-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+.cart-badge-count {
+  position: absolute;
+  top: -0.25rem;
+  right: -0.5rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--color-ink);
+  color: var(--color-paper);
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+/* --- Cart line items (CartView.tsx) --- */
+.cart-item {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-md);
+}
+.cart-item-image {
+  flex-shrink: 0;
+}
+.cart-item-image-link {
+  display: block;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.cart-item-image-link:hover .cart-item-image,
+.cart-item-image-link:focus-visible .cart-item-image {
+  border-color: var(--color-ink);
+}
+.cart-item-name-link {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-mute);
+  padding-bottom: 1px;
+  transition: color 150ms ease, border-color 150ms ease;
+}
+.cart-item-name-link:hover,
+.cart-item-name-link:focus-visible {
+  color: var(--color-accent);
+  outline: none;
+  border-bottom-color: var(--color-accent);
+}
+.cart-item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+/* --- Description lines & modifiers --- */
+.cart-item-option {
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-ink-soft, var(--color-mute));
+  margin: 0.125rem 0;
+}
+.cart-item-modifiers {
+  margin-top: 0.25rem;
+}
+
+/* --- Quantity stepper --- */
+.cart-item-qty {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-sm);
+  width: fit-content;
+}
+.qty-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-ink);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-ink);
+  cursor: pointer;
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1;
+}
+.qty-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.qty-value {
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  min-width: 1.5rem;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+/* --- Unavailable state --- */
+.cart-item-unavailable {
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-error, #c0392b);
+}
+
+/* --- Price + remove --- */
+.cart-item-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+.cart-item-prices {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.cart-item-full-price {
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-ink-soft, var(--color-mute));
+  text-decoration: line-through;
+}
+.cart-item-unit-price {
+  font-family: var(--font-body);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.cart-item-line-total {
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  color: var(--color-ink-soft, var(--color-mute));
+  margin: 0;
+}
+.cart-item-remove {
+  background: transparent;
+  border: none;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-mute);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* --- Cart summary: discount + total rows ---
+   Subtotal uses the designer's .cart-subtotal contract class in global.css.
+   These rows appear only when priceSummary exposes a discount or a total
+   that differs from subtotal (see CartView.tsx extractSummary). */
+.cart-discount {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  margin-top: var(--spacing-sm);
+}
+.cart-discount-name {
+  font-size: 0.75rem;
+  color: var(--color-ink-soft, var(--color-mute));
+}
+.cart-discount-amount {
+  white-space: nowrap;
+}
+.cart-total {
+  border-top: 1px solid var(--color-rule);
+  padding-top: var(--spacing-md);
+  margin-top: var(--spacing-sm);
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+/* Applied-discounts row — name-only (no amount) for cases where the API
+   reports a promo NAME via appliedDiscounts[].discountName but no cart-level
+   amount in priceSummary.discount (common for line-item automatic discounts
+   — the savings already show inline via fullPrice/price strikethrough). */
+.cart-applied-discounts {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  margin-top: var(--spacing-sm);
+}
+.cart-applied-discounts-name {
+  text-align: right;
+  color: var(--color-ink-soft, var(--color-mute));
+  font-style: italic;
+}

package/skills/wix-headless/references/astro/templates/global.css

@@ -0,0 +1,286 @@
+/* ── Composer skeleton: src/styles/global.css ──────────────────────────────
+   The fixed bulk below is LITERAL — do not re-author it. Composer's only edit
+   is to replace the {{theme}} block with the @theme palette derived from the
+   inlined designTokens (see COMPOSE.md § "1. global.css"). Everything outside
+   {{theme}} references the stable token vocabulary via var(--token) / built-in
+   utilities and is brand-agnostic; ship it byte-for-byte.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+@import "tailwindcss";
+
+@theme {
+  /* {{theme}} — Composer substitutes the full palette here from designTokens:
+     every --color-*, --font-*, --spacing-* (2xs..4xl), --container-*, and
+     --radius-* line. The required-token set (COMPOSE.md § "Token contract")
+     MUST all be present, or components render unstyled. Container scale is
+     separate from spacing — never alias --container-3xl to --spacing-3xl. */
+}
+
+/* Reading-width helper so prose pages center without guessing Tailwind sizes. */
+@utility container-reading {
+  max-width: var(--container-prose);
+  margin-inline: auto;
+}
+
+/* Shared button primitive — declared with @utility so the variants below can
+   @apply it (a plain contract class is NOT @apply-able in Tailwind v4). */
+@utility btn {
+  @apply inline-flex items-center justify-center px-lg py-md rounded-md font-medium;
+  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
+}
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+  body {
+    margin: 0;
+    background: var(--color-paper);
+    color: var(--color-ink);
+    font-family: var(--font-body);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-display);
+    line-height: 1.15;
+    margin: 0;
+  }
+  p {
+    margin: 0;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  button {
+    font: inherit;
+    cursor: pointer;
+  }
+  input, textarea, select {
+    font: inherit;
+  }
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+  ul, ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}
+
+/* ── Button family — used on every page in every vertical ─────────────────── */
+.btn-primary {
+  @apply btn;
+  background: var(--color-ink);
+  color: var(--color-paper);
+}
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-accent);
+}
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn-secondary {
+  @apply btn;
+  background: transparent;
+  color: var(--color-ink);
+  border: 1px solid var(--color-rule);
+}
+.btn-secondary:hover:not(:disabled) {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn-ghost {
+  @apply btn;
+  background: transparent;
+  color: var(--color-ink);
+}
+.btn-ghost:hover:not(:disabled) {
+  background: var(--color-paper-warm);
+}
+.btn-ghost:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ── Cross-cutting decorative patterns ────────────────────────────────────── */
+[data-decorative-slot] {
+  position: relative;
+  overflow: hidden;
+}
+[data-decorative-slot] > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.editorial-rule {
+  border: 0;
+  height: 1px;
+  background: var(--color-accent);
+  opacity: 0.6;
+  margin-block: var(--spacing-lg);
+}
+
+/* ── Universal site chrome ────────────────────────────────────────────────── */
+.site-nav {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--color-paper) 88%, transparent);
+  backdrop-filter: saturate(1.1) blur(8px);
+  border-bottom: 1px solid var(--color-rule);
+}
+.site-footer {
+  border-top: 1px solid var(--color-rule);
+  background: var(--color-paper-warm);
+  color: var(--color-mute);
+}
+
+/* ── View Transitions wiring (paired with Layout.astro <script>) ──────────────
+   Disable the default ClientRouter root cross-fade; the progress bar + grid-dim
+   carry navigation feedback instead. Do not split into a separate file. */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+.nav-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--color-accent, currentColor);
+  transform: scaleX(0);
+  transform-origin: left;
+  z-index: 1000;
+  pointer-events: none;
+  opacity: 0;
+}
+.nav-progress[data-state="loading"] {
+  opacity: 1;
+  transform: scaleX(0.85);
+  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 120ms ease;
+}
+.nav-progress[data-state="done"] {
+  opacity: 0;
+  transform: scaleX(1);
+  transition: transform 200ms ease, opacity 240ms ease 60ms;
+}
+
+/* Dim the product grid while ClientRouter fetches/swaps for immediate feedback. */
+body[data-navigating="true"] .product-grid {
+  opacity: 0.55;
+  transition: opacity 140ms ease;
+  pointer-events: none;
+}
+.product-grid {
+  transition: opacity 200ms ease;
+}
+
+/* ── Navigation submenu + CategoryRail/pagination (stores pack) ───────────────
+   These reference declared tokens and stay inert when stores is not loaded (no
+   markup uses them), so they ship unconditionally as fixed bulk. */
+.site-nav-item.has-submenu {
+  position: relative;
+}
+.site-nav-submenu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 12rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  padding: var(--spacing-sm);
+  background: var(--color-paper);
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-md);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(4px);
+  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
+}
+.site-nav-item.has-submenu:hover .site-nav-submenu,
+.site-nav-item.has-submenu:focus-within .site-nav-submenu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.site-nav-sublink {
+  font-size: 0.875rem;
+  color: var(--color-ink-soft, var(--color-mute));
+  padding-block: var(--spacing-2xs);
+}
+.site-nav-sublink:hover,
+.site-nav-sublink[aria-current="page"] {
+  color: var(--color-accent);
+}
+
+.category-rail {
+  background: var(--color-paper-warm);
+  border-bottom: 1px solid var(--color-rule);
+}
+.category-rail-inner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  padding-block: var(--spacing-md);
+}
+.category-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-2xs) var(--spacing-md);
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-ink-soft, var(--color-ink));
+  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
+}
+.category-pill:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.category-pill[aria-current="page"] {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+}
+.pagination {
+  margin-block: var(--spacing-xl);
+}
+.pagination-inner {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+}
+.pagination-link {
+  color: var(--color-ink);
+}
+.pagination-link:hover {
+  color: var(--color-accent);
+}
+.pagination-link.is-disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.breadcrumbs {
+  font-size: 0.8125rem;
+  color: var(--color-mute);
+  margin-bottom: var(--spacing-sm);
+}

package/skills/wix-headless/references/astro/templates/index.astro

@@ -0,0 +1,56 @@
+---
+// ── Composer skeleton: src/pages/index.astro ──────────────────────────────────
+// Home shell. Substitutions (see COMPOSE.md § "6. index.astro"):
+//   {{shell.heroHeadline}}, {{shell.heroSub}} — brand-voice hero copy.
+//   {{shell.footerTagline}} is NOT used here.
+//   {{brand.name}} — used in the brand-story copy.
+//   {{home-markers}} — one `<!-- home:<pack> -->` marker per LOADED pack that
+//        contributes a home section (e.g. stores, gift-cards). Emit a marker
+//        ONLY for such packs; never emit a marker no pack will fill (e.g. no
+//        <!-- home:cms --> — CMS owns brand-story directly). Disabled packs
+//        (gift-cards) still get their marker; do NOT add hero CTAs / teasers
+//        pointing at disabled-pack routes.
+// Fixed bulk (keep literal): the Layout wrapper, hero/brand-story structure,
+// the data-decorative-slot="hero" and "about" placeholders (the orchestrator
+// injects <img> into these after Image Phase 1 — keep them empty).
+import Layout from '../layouts/Layout.astro';
+---
+<Layout>
+  <section class="relative">
+    <div class="max-w-6xl mx-auto px-lg py-4xl grid grid-cols-1 md:grid-cols-2 gap-3xl items-center">
+      <div class="flex flex-col gap-lg">
+        <h1 class="font-display text-4xl md:text-5xl leading-tight">{{shell.heroHeadline}}</h1>
+        <p class="text-lg text-mute max-w-prose">{{shell.heroSub}}</p>
+      </div>
+      <div
+        class="hero-image rounded-md"
+        data-decorative-slot="hero"
+        style="aspect-ratio: 4/5; background-color: var(--color-paper-warm);"
+      >
+        <!-- orchestrator injects <img src={decorativeImages.hero} …> here -->
+      </div>
+    </div>
+  </section>
+
+  {{home-markers}}
+
+  <section class="max-w-6xl mx-auto px-lg py-4xl grid grid-cols-1 md:grid-cols-2 gap-3xl items-center">
+    <div
+      class="about-image rounded-md order-last md:order-first"
+      data-decorative-slot="about"
+      style="aspect-ratio: 4/3; background-color: var(--color-paper-warm);"
+    >
+      <!-- orchestrator injects <img src={decorativeImages.about} …> here -->
+    </div>
+    <div class="flex flex-col gap-md max-w-prose">
+      <hr class="editorial-rule w-16 ml-0" />
+      <h2 class="font-display text-3xl leading-tight">The story behind {{brand.name}}</h2>
+      <p class="text-ink leading-relaxed">
+        A short, brand-contextual paragraph about what makes {{brand.name}} distinct.
+      </p>
+      <p class="text-mute leading-relaxed">
+        A second paragraph adding warmth and detail to the brand story.
+      </p>
+    </div>
+  </section>
+</Layout>

package/skills/wix-headless/{templates → references/astro/templates}/stores/back-in-stock.ts

@@ -6,7 +6,7 @@
 // Wix's back-in-stock service identifies the Stores integration by the
 // Stores SUB-PAGE registration id (1380b703-…), NOT by the install/catalog
 // appId (215238eb-…) that the public docs and other catalog endpoints use.
-// Reproduced 2026-04-28 against a Catalog-V3 site:
+// Against a Catalog-V3 site the request-collection endpoints behave as follows:
 //   - PUT /settings returned `collectionStates: [{appId: "1380b703-…",
 //     collectingRequests: true}]`.
 //   - POST /settings/start-collecting with `215238eb-…` returned