@wix/agent-skills 1.6.0 → 1.8.0

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.mjs). 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 (enforced by compose.mjs)
+     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.mjs):
+//   {{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

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

@@ -182,114 +182,219 @@ body[data-navigating="true"] .product-grid {
 }
 
 
+/* =========================================================================
+   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)` / `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-cream))`)
+   when a token is sometimes-published.
+   ========================================================================= */
+
 /* --- Variant / option pills (ProductPurchase.tsx) --- */
 .option-group {
-  @apply flex flex-col gap-sm mb-lg;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-lg);
 }
 .option-label {
-  @apply font-heading text-sm uppercase tracking-wider text-bark/70;
+  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 {
-  @apply flex flex-wrap gap-sm;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
 }
 .option-pill {
-  @apply px-md py-sm border border-bark bg-transparent text-bark font-body rounded-full cursor-pointer transition-colors;
+  padding: var(--spacing-sm) var(--spacing-md);
+  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 {
-  @apply bg-bark text-cream;
+  background: var(--color-ink);
+  color: var(--color-paper);
 }
 .option-pill:disabled {
-  @apply opacity-40 cursor-not-allowed;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 /* --- Quantity stepper (ProductPurchase.tsx, CartView.tsx qty editing) --- */
 .quantity-selector {
-  @apply inline-flex items-center border border-bark rounded-md overflow-hidden;
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--color-ink);
+  border-radius: var(--radius-md);
+  overflow: hidden;
 }
 .quantity-btn {
-  @apply px-3 py-2 bg-transparent border-none cursor-pointer text-bark font-body;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--color-ink);
+  font-family: var(--font-body);
 }
 .quantity-btn:disabled {
-  @apply opacity-40 cursor-not-allowed;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 .quantity-value {
-  @apply px-md py-sm tabular-nums;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-variant-numeric: tabular-nums;
 }
 
 /* --- Modifier free-text input (ProductPurchase.tsx, FREE_TEXT render type) --- */
 .modifier-text {
-  @apply w-full px-sm py-sm font-body text-sm border border-rule rounded bg-parchment text-ink;
+  width: 100%;
+  padding: var(--spacing-sm);
+  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 {
-  @apply outline-none border-ink bg-cream;
+  outline: none;
+  border-color: var(--color-ink);
+  background: var(--color-paper, var(--color-cream));
 }
 
 /* --- Stock status (ProductPurchase.tsx) --- */
 .stock-status {
-  @apply text-sm text-bark/70 italic;
+  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 {
-  @apply flex flex-col gap-md mt-md p-lg border border-rule rounded;
-  background-color: var(--color-cream);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-md);
+  background: var(--color-paper, var(--color-cream));
 }
 .back-in-stock-headline {
-  @apply flex flex-col gap-sm;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
 }
 .back-in-stock-eyebrow {
-  @apply font-heading text-xs uppercase tracking-wider text-bark/70;
+  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 {
-  @apply font-body text-sm text-ink;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-ink);
   line-height: 1.5;
 }
 .back-in-stock-label {
-  @apply font-heading text-xs uppercase tracking-wider text-bark/70;
+  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 {
-  @apply flex flex-row flex-wrap gap-sm;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
 }
 .back-in-stock-input {
-  @apply flex-1 px-md py-sm font-body text-sm border border-rule rounded bg-parchment text-ink;
+  flex: 1;
+  padding: var(--spacing-sm) var(--spacing-md);
+  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 {
-  @apply outline-none border-ink;
+  outline: none;
+  border-color: var(--color-ink);
 }
 .back-in-stock-submit {
-  @apply px-lg py-sm font-heading text-xs uppercase tracking-wider bg-bark text-cream rounded cursor-pointer transition-colors;
-  border: 1px solid var(--color-bark);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  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) {
-  @apply bg-ink;
+  background: var(--color-ink-soft, var(--color-ink));
 }
 .back-in-stock-submit:disabled {
-  @apply opacity-50 cursor-not-allowed;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 .back-in-stock-error {
-  @apply font-body text-sm;
-  color: var(--color-rust, var(--color-ink));
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-error, var(--color-accent));
 }
 .back-in-stock-success {
-  @apply mt-md p-lg border border-rule rounded;
-  background-color: var(--color-cream);
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-md);
+  background: var(--color-paper, var(--color-cream));
 }
 .back-in-stock-success-headline {
-  @apply font-heading text-base text-ink;
+  font-family: var(--font-display);
+  font-size: 1rem;
+  color: var(--color-ink);
   margin: 0 0 0.5rem 0;
 }
 .back-in-stock-success-detail {
-  @apply font-body text-sm text-ink;
+  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 {
-  @apply mt-sm font-body text-sm italic text-bark/70;
+  margin-top: var(--spacing-sm);
+  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. */