@wix/agent-skills 1.13.0 → 1.15.0

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

@@ -1,220 +0,0 @@
-/* Gift Cards pack — scoped CSS.
- *
- * Imported by Layout.astro alongside other components-*.css files. Covers:
- *   1. Buy form (`.gift-card-form` + fields)
- *   2. /gift-cards landing page sections
- *   3. Home teaser block
- *
- * Reuses tokens declared by the designer foundation: --color-cream,
- * --color-cream-deep, --color-ink, --color-ink-soft, --color-muted,
- * --color-rule, --color-paper, --color-bark/espresso/gold-deep,
- * --radius-sm, --font-body, --font-display. (Spacing uses Tailwind's numeric
- * scale — gap-4, py-24 — not a design token.) If a token isn't in your design
- * system, fall back to a
- * sibling token; do NOT invent new ones.
- */
-
-/* -------------------------------------------------------------------------- */
-/* Buy form                                                                    */
-/* -------------------------------------------------------------------------- */
-
-.gift-card-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin-top: 1.5rem;
-}
-
-.gift-card-fieldset {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.gift-card-amounts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-top: 0.75rem;
-}
-
-.gift-card-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.gift-card-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  position: relative;
-}
-
-.gift-card-field-wide {
-  grid-column: 1 / -1;
-}
-
-.gift-card-field input,
-.gift-card-field textarea {
-  font-family: var(--font-body);
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: var(--color-ink);
-  background: var(--color-cream);
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-sm);
-  padding: 0.65rem 0.8rem;
-  transition: border-color 0.2s ease;
-}
-
-.gift-card-field input:focus,
-.gift-card-field textarea:focus {
-  outline: none;
-  border-color: var(--color-ink);
-}
-
-.gift-card-field textarea {
-  resize: vertical;
-  min-height: 5rem;
-}
-
-.gift-card-counter {
-  position: absolute;
-  right: 0;
-  bottom: -1.2rem;
-  font-family: var(--font-body);
-  font-size: 0.6875rem;
-  color: var(--color-muted);
-}
-
-.gift-card-error {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-gold-deep, #a04a3c);
-  margin: 0;
-}
-
-/* -------------------------------------------------------------------------- */
-/* /gift-cards landing page                                                    */
-/* -------------------------------------------------------------------------- */
-
-.gift-card-page {
-  max-width: 80rem;
-  margin: 0 auto;
-  padding: 4rem 1.5rem 6rem;
-}
-
-.gift-card-grid-wrap {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 3rem;
-  align-items: start;
-}
-
-@media (min-width: 768px) {
-  .gift-card-grid-wrap {
-    grid-template-columns: 1fr 1fr;
-    gap: 6rem;
-  }
-}
-
-.gift-card-hero-image {
-  background: var(--color-cream-deep, var(--color-paper, var(--color-cream)));
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-  aspect-ratio: 1 / 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.gift-card-hero-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.gift-card-body {
-  max-width: 36rem;
-}
-
-.gift-card-body h1 {
-  margin: 1rem 0 1rem;
-}
-
-.gift-card-lede {
-  font-family: var(--font-body);
-  font-size: 1.0625rem;
-  line-height: 1.7;
-  color: var(--color-ink-soft);
-  max-width: 48ch;
-  margin: 0 0 2rem;
-}
-
-.gift-card-fineprint {
-  margin-top: 1.5rem;
-  font-family: var(--font-body);
-  font-size: 0.8125rem;
-  line-height: 1.6;
-  color: var(--color-muted);
-  max-width: 44ch;
-}
-
-/* -------------------------------------------------------------------------- */
-/* Home teaser                                                                 */
-/* -------------------------------------------------------------------------- */
-
-.gift-card-teaser {
-  padding: 6rem 1.5rem;
-  background: var(--color-cream-deep, var(--color-paper, var(--color-cream)));
-}
-
-.gift-card-teaser-link {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 3rem;
-  max-width: 80rem;
-  margin: 0 auto;
-  align-items: center;
-  text-decoration: none;
-  color: var(--color-ink);
-}
-
-@media (min-width: 768px) {
-  .gift-card-teaser-link {
-    grid-template-columns: 1fr 1fr;
-    gap: 6rem;
-  }
-}
-
-.gift-card-teaser-image {
-  aspect-ratio: 4 / 3;
-  overflow: hidden;
-  border-radius: var(--radius-sm);
-  background: var(--color-cream);
-}
-
-.gift-card-teaser-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.6s ease;
-}
-
-.gift-card-teaser-link:hover .gift-card-teaser-image img {
-  transform: scale(1.02);
-}
-
-.gift-card-teaser-body h2 {
-  margin: 1rem 0 1rem;
-}
-
-.gift-card-teaser-lede {
-  font-family: var(--font-body);
-  font-size: 1.0625rem;
-  line-height: 1.7;
-  color: var(--color-ink-soft);
-  max-width: 44ch;
-  margin: 0 0 1.5rem;
-}

package/skills/wix-headless/references/astro/templates/gift-cards/gift-cards.astro

@@ -1,51 +0,0 @@
----
-import Layout from "../layouts/Layout.astro";
-import GiftCardPurchase from "../components/GiftCardPurchase.tsx";
-import { getGiftCardProduct } from "../utils/gift-cards";
-import { resolveWixImageUrl } from "../utils/wix-image";
-
-// The probe returns null if the Wix Gift Card app is uninstalled, revoked,
-// or the dashboard's eGift Card template hasn't been configured. Redirect
-// rather than rendering an empty page — keeps stale links from showing a
-// broken UI.
-const product = await getGiftCardProduct();
-if (!product) return Astro.redirect("/", 302);
-
-const heroImage = resolveWixImageUrl(product.image, 800, 800);
----
-
-<Layout
-  title={product.name}
-  description={product.description}
->
-  <section class="py-16 md:py-24">
-    <div class="max-w-wide mx-auto px-8 grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-center">
-      <div class="aspect-square bg-cream rounded-sm overflow-hidden">
-        {heroImage && (
-          <img
-            src={heroImage}
-            alt={product.image?.altText || product.name}
-            loading="lazy"
-            decoding="async"
-            width={product.image?.width ?? 800}
-            height={product.image?.height ?? 800}
-            class="w-full h-full object-cover"
-          />
-        )}
-      </div>
-
-      <div class="flex flex-col gap-6">
-        <p class="eyebrow">A gift, considered</p>
-        <h1 class="font-display text-5xl leading-tight">{product.name}</h1>
-        <p class="text-ink-soft leading-relaxed">{product.description}</p>
-
-        <GiftCardPurchase product={product} client:load />
-
-        <p class="text-mute text-sm leading-relaxed">
-          Sent by email to your recipient with a redeemable code. Redeemed at
-          checkout against any product on the site.
-        </p>
-      </div>
-    </div>
-  </section>
-</Layout>

package/skills/wix-headless/references/astro/templates/gift-cards/gift-cards.ts

@@ -1,75 +0,0 @@
-// Wix Gift Card app — eGift Card template fetch.
-//
-// The dashboard's Catalog → Gift Cards screen configures a single eGift Card
-// "product" with preset denominations. That product is queryable via a public
-// REST endpoint (POST /gift-cards/v1/gift-card-products/query). The JS SDK
-// auto-package @wix/auto_sdk_ecom_gift-vouchers only exposes redemption
-// methods (getGiftCard / redeemGiftCard / voidTransaction), so we hit REST
-// directly using @wix/essentials httpClient.fetchWithAuth.
-//
-// The buy flow uses the standard cart: currentCart.addToCurrentCart with a
-// catalogReference whose appId is WIX_GIFT_CARDS_APP_ID below. After payment,
-// Wix's gift-card backend automatically issues a redeemable gift card with
-// source: "ORDER" and emails the recipient — no follow-up API call needed.
-//
-// The appId is observable on installed sites and stable across sites. If Wix
-// ever rotates it, update this constant; both the runtime probe and the buy
-// flow will fail together (and the page hides gracefully — same as "app
-// uninstalled").
-
-import { httpClient } from "@wix/essentials";
-
-export const WIX_GIFT_CARDS_APP_ID = "d80111c5-a0f4-47a8-b63a-65b54d774a27";
-
-export interface GiftCardImage {
-  id?: string;
-  url?: string;
-  height?: number;
-  width?: number;
-  altText?: string;
-}
-
-export interface GiftCardPresetVariant {
-  id: string;
-  price: { amount: string; formattedAmount: string; convertedAmount?: string; formattedConvertedAmount?: string };
-  value: { amount: string; formattedAmount: string; convertedAmount?: string; formattedConvertedAmount?: string };
-}
-
-export interface GiftCardProduct {
-  id: string;
-  revision?: string;
-  name: string;
-  description: string;
-  image?: GiftCardImage;
-  expirationType?: string;
-  presetVariants: GiftCardPresetVariant[];
-}
-
-const ENDPOINT = "https://www.wixapis.com/gift-cards/v1/gift-card-products/query";
-
-// Module-level memoization. Navigation, the home teaser, and /gift-cards all
-// call getGiftCardProduct() in the same request — coalesce them into one
-// fetch by holding the in-flight promise at module scope.
-let cached: Promise<GiftCardProduct | null> | null = null;
-
-export async function getGiftCardProduct(): Promise<GiftCardProduct | null> {
-  if (cached) return cached;
-  cached = (async () => {
-    try {
-      const res = await httpClient.fetchWithAuth(ENDPOINT, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ query: { paging: { limit: 1 } } }),
-      });
-      if (!res.ok) return null;
-      const data = await res.json();
-      const products = data?.giftCardProducts;
-      if (!Array.isArray(products) || products.length === 0) return null;
-      return products[0] as GiftCardProduct;
-    } catch (err) {
-      console.error("[gift-cards] queryGiftCardProducts failed:", err);
-      return null;
-    }
-  })();
-  return cached;
-}

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

@@ -1,288 +0,0 @@
-/* ── 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-*, --container-*, and --radius-* line. The
-     required-token set (enforced by compose.mjs) MUST all be present, or
-     components render unstyled. Spacing is NOT a token here — it uses
-     Tailwind's built-in numeric scale (gap-4, py-24, …); never add a named
-     --spacing-* scale, since that namespace also powers the width utilities
-     (max-w-*/w-*) and would shadow them. */
-}
-
-/* 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-6 py-4 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: 1.5rem;
-}
-
-/* ── 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: 0.25rem;
-  padding: 0.75rem;
-  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: 0.25rem;
-}
-.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: 0.75rem;
-  padding-block: 1rem;
-}
-.category-pill {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 1rem;
-  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: 2rem;
-}
-.pagination-inner {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-}
-.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: 0.75rem;
-}

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

@@ -1,56 +0,0 @@
----
-// ── 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-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
-      <div class="flex flex-col gap-6">
-        <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-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-16 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-4 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>