@wix/agent-skills 1.19.0 → 1.19.1

package/skills/wix-app/references/dashboard-page/PATTERNS_BUNDLE_READING.md

@@ -1,112 +0,0 @@
-# Reading `@wix/patterns` Bundles and Docs
-
-> **Precondition: an index entry.** Every path below is the `file` (or `bundle`) field of an entry
-> in `<pkgRoot>/dist/dts-bundle/index.json` or `<pkgRoot>/dist/docs/index.json`. If you haven't
-> read that index this session, you have no path to open — read it before anything else here.
-> Getting to it — resolving the package root, the version floor, the docs lookup, and the rule
-> against browsing `node_modules` by hand — is in
-> [WIX_PATTERNS_DOCS.md](../WIX_PATTERNS_DOCS.md). Nothing here replaces those steps.
-
-## Read the index once, then open its files in one call
-
-One index read covers the whole page. So name every symbol you plan to write — components, hooks,
-state types, prop types — look them all up in the index you now hold, and open what it named in a
-single call with one `Read` per file:
-
-```
-call 1   Read <pkgRoot>/dist/docs/index.json
-         Read <pkgRoot>/dist/dts-bundle/index.json
-
-call 2   Read <pkgRoot>/dist/docs/Table.md                            <- docs entry's `file`
-         Read <pkgRoot>/dist/docs/useTableCollection.md
-         Read <pkgRoot>/dist/dts-bundle/components/Table.d.ts         <- its `bundle`
-         Read <pkgRoot>/dist/dts-bundle/hooks/useTableCollection.d.ts
-         Read <pkgRoot>/dist/dts-bundle/types/TableState.d.ts         <- bundle entry's `file`
-```
-
-Two calls, not twenty-two — and nothing is lost by batching, because there is nothing to learn
-between the files: every path came out of the same index and `bytes` already told you each size.
-The same files opened one per call re-send the whole conversation once per file, which is where a
-lookup session's token cost actually goes. Batch the follow-ups the same way: when a doc names an
-example file, or a stub names another bundle (below), collect them and read them together.
-
-## Where props live
-
-From `@wix/patterns` **1.460.0** onward a doc does not repeat props that the bundle already
-describes. Which one holds them is stated in the doc's own index entry:
-
-| `dist/docs/index.json` entry | where the props are |
-| --- | --- |
-| has a `bundle` field | that bundle — the doc's `### Props` is a pointer to it, on purpose |
-| no `bundle` field | the doc's own `### Props` table, as before |
-
-Roughly 74 of 167 docs point at a bundle and 62 still carry a table, so expect both. When a doc
-says `Read \`dist/dts-bundle/...\``, that **is** the props answer — read the named file rather
-than treating the doc as incomplete. The bundle is the better source anyway: it keeps the
-`extends` clause with its exclusions, so `Omit<PopoverMenuItemProps, 'text' | 'prefixIcon' | 'onClick'>` tells
-you what you do *not* inherit, which the old doc link did not.
-
-## Types the docs don't cover
-
-The same bundles also hold the types those props use — `Filter<T>`, `RangeItem<T>`, `CursorQuery`, a `...Props` interface. `Read <pkgRoot>/dist/dts-bundle/index.json`, look up the type name, then `Read <pkgRoot>/dist/dts-bundle/<entry.file>` using exactly the `file` path the index gives — **never reconstruct the path from the name**; bundles are nested one directory per kind (`components/Table.d.ts`, `hooks/useForm.d.ts`, `types/RangeItem.d.ts`, …), so guessing `<Name>.d.ts` at the top level is wrong by construction.
-
-Several of these types (`RangeItem`, `Filter`, `CursorQuery`, the filter factory functions) actually live in `@wix/bex-core` — the bundle already resolves and inlines the real declaration, so you get the full shape with no deep, undeclared `@wix/bex-core/dist/types/...` path to chase. Still always import it from `@wix/patterns`, per the index's `importPath` field, never from wherever the bundle says it's really declared.
-
-That inlining applies to the data shapes you write. State objects you *receive* are a separate case — see the next section.
-
-## A bundle stops where you stop writing code
-
-A bundle carries its own name's declaration plus every shape **you** would write by hand. It deliberately does *not* expand what the library hands you, so two kinds of one-line stub are normal and are answers, not truncation:
-
-```ts
-/**
- * `TableState` — you receive this, you don't construct it.
- * Produced by `useTableCollection()` (also `useAmbassadorTable()`, `useTableContext()`).
- * Look `TableState` up in the bundle index for its own API.
- */
-declare class TableState<T, F> {
-}
-```
-
-An empty body with a **"Produced by"** note means: call that hook or factory to get one. That is usually the whole answer — `<Table state={...}>` needs `useTableCollection()`, not `TableState`'s internals. If you do need its members (`state.toolbar`, `state.visibleColumns`), it has its own index entry — look the name up and read that bundle, where its body is complete.
-
-A stub saying **"cut here because it has its own bundle"** means the same thing for a shape you *do* write: it wasn't copied in twice, so look the name up and read its own file.
-
-Every bundle fits in a single read; the index's `bytes` field says how big before you open it. So a bundle is never partially shown — if something looks missing, it was cut on purpose. Both stubs above name where to find it.
-
-### The one that doesn't: a bare `import`
-
-A plain `import { X } from '<module>'` at the top of a bundle, with no note attached, is the third shape you will meet — and unlike the two above it does **not** tell you where to look. What to do depends on the path, not the name:
-
-**A normal entry point** — `react`, `react-hook-form`, `history`, `@wix/design-system`. Resolve it the ordinary way. For `@wix/design-system` names use the `wix-design-system` skill; don't read WDS files directly.
-
-**A deep internal path** — `@wix/design-system/dist/types/DropdownLayout`, `@wix/bex-utils/@wix/bi-logger-os-data/v2/types`. This is an upstream defect: the bundle recorded where the type is *declared* instead of where it is exported. Two things follow, and the second is the one that saves you time:
-
-- Never import that path in your own code, and don't go read the file it points at. It is not a public entry point, and the name is often not re-exported from the package root either — `DropdownLayoutOption` is not exported from `@wix/design-system`, so there is no shorter import to substitute.
-- You usually don't need the declaration at all. Where the type is a **prop you fill in** — WDS option shapes like `SingleSelectFilter`'s and `AutoCompleteFilter`'s `items` — look the *component* up in the `wix-design-system` skill and use the shape its docs show. Where it is a **pass-through you never construct** — the BI logger params behind optional fields like `biAdditionalInfo` — pass what the patterns doc shows, or omit it; it is optional.
-
-If a name you genuinely need stays unresolved after that, stop and say so, and name the bundle and the exact import path that dead-ended. Do not guess a shape and do not go spelunking in `node_modules` — a wrong guess compiles here and breaks at runtime, which is worse than the missing type.
-
-A handful of names carry `"status": "unreachable"` — plus `"unexported": true` from **1.465.0** — with a message saying not to import them (the `...BaseProps` interfaces a component's props `extends`). Read those for the props they contribute; don't write an import for them.
-
-`status` also carries `"deprecated"`, and there the `statusMessage` names the replacement — `PrimaryPageButton` says *"Use `PrimaryActions` component instead."* Check it before you commit to a name — nothing else in the lookup path will stop you, since a deprecated component still compiles and still renders. If the index calls a name deprecated, use what its message names instead.
-
-## Subpath entry points
-
-`@wix/patterns` is 31 entry points, not one namespace, and `/form` re-exports `@wix/bex-core/form`. To see what's importable from a specific one: `Read <pkgRoot>/dist/dts-bundle/exports/<subpath>.d.ts` directly (`.` is `exports/index.d.ts`; a nested one like `./testkit/backend` is `exports/testkit/backend.d.ts`). This only lists the curated names covered above — a file with nothing in it (a one-line comment) means no curated name lives on that subpath yet, not that the subpath doesn't exist.
-
-## Following cross-references
-
-Docs link to related names as Storybook URLs (`[TableState](./?path=/story/...--tablestate)`) — resolve the link text back to a filename via `dist/docs/index.json`, the same way you found the first doc, and `Read` it if you actually need it. There's no automatic multi-level expansion here; follow only the links you need.
-
-Links to `https://www.docs.wixdesignsystem.com/` are external (Wix Design System) — not part of `@wix/patterns` docs. Likewise, a bundled `.d.ts` that references a deep `@wix/design-system/dist/...` path is pointing at that library's own internals — look the name up via the `wix-design-system` skill's own tool, not by opening the path.
-
-## Tips
-
-- **Compound components** have separate docs per sub-part: `CollectionPage.md`, `CollectionPage.Header.md`, `CollectionPage.Content.md`.
-- **Hook docs** list configuration options as props — in the API table when the doc has no
-  `bundle` field, otherwise in the bundle it points at.
-- **Heavy examples live beside the doc.** A variation whose code was long is written out
-  separately, and the doc keeps the heading, the description and an exact path:
-  `Example code: read \`dist/docs/ToolbarFilters/apply-changes.tsx\``. Read that path only if you
-  need that particular variation — the heading and description are usually enough to choose.

package/skills/wix-headless-fast/references/storefront/app/components/storefront/ProductCard.tsx

@@ -1,100 +0,0 @@
-// Grid tile — a REFERENCE implementation over the ProductSummary DTO. Complete and correct
-// (badges, sale price, hover image, quick-add); styled entirely from the @theme tokens via
-// Tailwind utilities. Designing your own card on the same DTO is encouraged.
-import type { ComponentType, ReactNode } from "react";
-import type { ProductSummary } from "../../wix/storefront/types";
-import { useCart } from "../../hooks/storefront/useCart";
-
-export interface LinkLikeProps {
-  href: string;
-  className?: string;
-  children?: ReactNode;
-}
-
-export interface ProductCardProps {
-  product: ProductSummary;
-  /** Route pattern for detail pages; default matches the shipped /products/[slug] page. */
-  productHref?: (slug: string) => string;
-  /** Router-specific link (react-router Link, next/link); defaults to a plain <a>. */
-  LinkComponent?: ComponentType<LinkLikeProps>;
-}
-
-const PlainLink = ({ href, className, children }: LinkLikeProps) => (
-  <a href={href} className={className}>
-    {children}
-  </a>
-);
-
-export default function ProductCard({
-  product,
-  productHref = (slug) => `/products/${slug}`,
-  LinkComponent = PlainLink,
-}: ProductCardProps) {
-  const { addToCart, busy } = useCart();
-  const soldOut = product.availability === "OUT_OF_STOCK" && !product.preorder;
-  const priceLabel =
-    product.maxPrice && product.maxPrice !== product.price
-      ? `${product.price} – ${product.maxPrice}`
-      : product.price;
-
-  return (
-    <div className="group">
-      <LinkComponent href={productHref(product.slug)} className="block no-underline">
-        <div className="relative aspect-square overflow-hidden rounded-lg bg-secondary">
-          {product.imageUrl && (
-            <img
-              src={product.imageUrl}
-              alt={product.name}
-              loading="lazy"
-              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
-            />
-          )}
-          {product.hoverImageUrl && (
-            <img
-              src={product.hoverImageUrl}
-              alt=""
-              aria-hidden="true"
-              loading="lazy"
-              className="absolute inset-0 h-full w-full object-cover opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-            />
-          )}
-          {product.ribbon && (
-            <span className="absolute left-3 top-3 rounded-full bg-background/90 px-3 py-1 text-xs font-semibold text-foreground backdrop-blur">
-              {product.ribbon}
-            </span>
-          )}
-          {soldOut && (
-            <span className="absolute right-3 top-3 rounded-full bg-background/90 px-3 py-1 text-xs font-semibold text-muted-foreground backdrop-blur">
-              Sold out
-            </span>
-          )}
-          {product.preorder && (
-            <span className="absolute right-3 top-3 rounded-full bg-background/90 px-3 py-1 text-xs font-semibold text-foreground backdrop-blur">
-              Pre-order
-            </span>
-          )}
-        </div>
-        <p className="mt-3 text-sm font-medium text-foreground">{product.name}</p>
-        <p className="mt-0.5 flex items-baseline gap-2 text-sm">
-          <span className="text-foreground">{priceLabel}</span>
-          {product.compareAtPrice && (
-            <span className="text-muted-foreground line-through">{product.compareAtPrice}</span>
-          )}
-        </p>
-        {product.optionsSummary && (
-          <p className="mt-0.5 text-xs text-muted-foreground">{product.optionsSummary}</p>
-        )}
-      </LinkComponent>
-      {product.quickAddable && (
-        <button
-          type="button"
-          disabled={busy}
-          onClick={() => addToCart(product.id).catch(() => {})}
-          className="mt-2 rounded-full border border-border px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:opacity-50"
-        >
-          Add to cart
-        </button>
-      )}
-    </div>
-  );
-}

package/skills/wix-headless-fast/references/storefront/app/components/storefront/ProductDetailView.tsx

@@ -1,130 +0,0 @@
-// The full product detail surface: gallery, price, option/modifier picker, quantity,
-// add-to-cart — styled from the @theme tokens. Mount as-is (Astro: an island with the
-// server-fetched `initial` product; SPA: pass the `slug`). All selection→variant logic lives
-// in useProductDetail — never bypass it to add a product with options.
-import { useState } from "react";
-import { useProductDetail } from "../../hooks/storefront/useProductDetail";
-import VariantPicker from "./VariantPicker";
-
-export interface ProductDetailViewProps {
-  /** Server-fetched product (Astro/Next SSR). */
-  initial?: import("../../wix/storefront/types").ProductDetail | null;
-  /** SPA alternative: fetch by slug on mount. */
-  slug?: string;
-}
-
-export default function ProductDetailView({ initial, slug }: ProductDetailViewProps) {
-  const {
-    product,
-    notFound,
-    optionGroups,
-    selectOption,
-    modifierValues,
-    setModifier,
-    price,
-    compareAtPrice,
-    canAdd,
-    quantity,
-    setQuantity,
-    add,
-    adding,
-    error,
-  } = useProductDetail({ initial, slug });
-  const [imageIndex, setImageIndex] = useState(0);
-
-  if (notFound)
-    return <p className="py-16 text-center text-muted-foreground">This product doesn't exist (anymore).</p>;
-  if (!product) return <div className="aspect-square max-w-md animate-pulse rounded-xl bg-secondary" />;
-
-  const soldOut = product.availability === "OUT_OF_STOCK" && !product.preorder;
-  const mainImage = product.gallery[imageIndex] ?? product.imageUrl;
-
-  return (
-    <div className="grid gap-10 md:grid-cols-2">
-      <div>
-        <div className="aspect-square overflow-hidden rounded-xl bg-secondary">
-          {mainImage && <img src={mainImage} alt={product.name} className="h-full w-full object-cover" />}
-        </div>
-        {product.gallery.length > 1 && (
-          <div className="mt-3 flex flex-wrap gap-2">
-            {product.gallery.map((url, i) => (
-              <button
-                key={url}
-                type="button"
-                aria-label={`Image ${i + 1}`}
-                onClick={() => setImageIndex(i)}
-                className={`h-16 w-16 overflow-hidden rounded-md border-2 transition-colors ${
-                  i === imageIndex ? "border-primary" : "border-transparent hover:border-border"
-                }`}
-              >
-                <img src={url} alt="" className="h-full w-full object-cover" />
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div>
-        <h1 className="text-2xl font-semibold tracking-tight">{product.name}</h1>
-        <p className="mt-2 flex items-baseline gap-3">
-          <span className="text-xl font-medium">{price}</span>
-          {compareAtPrice && <span className="text-base text-muted-foreground line-through">{compareAtPrice}</span>}
-        </p>
-        {soldOut && <p className="mt-2 text-sm font-medium text-red-600">Out of stock</p>}
-        {product.preorder && <p className="mt-2 text-sm text-muted-foreground">Available for pre-order</p>}
-
-        {product.descriptionHtml && (
-          // plainDescription is HTML (despite the name) — render it, don't print it.
-          <div
-            className="mt-4 space-y-2 text-sm leading-relaxed text-muted-foreground [&_strong]:font-semibold [&_strong]:text-foreground"
-            dangerouslySetInnerHTML={{ __html: product.descriptionHtml }}
-          />
-        )}
-
-        <div className="mt-6">
-          <VariantPicker
-            optionGroups={optionGroups}
-            selectOption={selectOption}
-            modifiers={product.modifiers}
-            modifierValues={modifierValues}
-            setModifier={setModifier}
-          />
-        </div>
-
-        {!soldOut && (
-          <div className="mt-2 flex items-center gap-3">
-            <div className="inline-flex items-center gap-3 rounded-full border border-border px-3 py-2">
-              <button
-                type="button"
-                aria-label="Decrease quantity"
-                disabled={quantity <= 1}
-                onClick={() => setQuantity(quantity - 1)}
-                className="px-1 text-base disabled:opacity-40"
-              >
-                −
-              </button>
-              <span className="text-sm tabular-nums">{quantity}</span>
-              <button
-                type="button"
-                aria-label="Increase quantity"
-                onClick={() => setQuantity(quantity + 1)}
-                className="px-1 text-base"
-              >
-                +
-              </button>
-            </div>
-            <button
-              type="button"
-              disabled={!canAdd || adding}
-              onClick={() => add().catch(() => {})}
-              className="rounded-full bg-primary px-8 py-3 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-50"
-            >
-              {adding ? "Adding…" : canAdd ? "Add to cart" : "Select options"}
-            </button>
-          </div>
-        )}
-        {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
-      </div>
-    </div>
-  );
-}

package/skills/wix-headless-fast/references/storefront/app/components/storefront/ProductGrid.tsx

@@ -1,48 +0,0 @@
-// Listing grid with loading skeletons and an honest empty state — a REFERENCE layout on the
-// @theme tokens. Keep the states (they're correct); choosing a grid arrangement that fits the
-// brand is encouraged. Never mock products: empty catalog → the empty state.
-import type { ComponentType } from "react";
-import type { ProductSummary } from "../../wix/storefront/types";
-import ProductCard, { type ProductCardProps } from "./ProductCard";
-
-export interface ProductGridProps {
-  /** null → loading skeletons; [] → the empty state. */
-  products: ProductSummary[] | null;
-  emptyMessage?: string;
-  productHref?: ProductCardProps["productHref"];
-  LinkComponent?: ProductCardProps["LinkComponent"];
-  /** Swap in your own tile (built on ProductSummary) without re-doing the states. */
-  CardComponent?: ComponentType<ProductCardProps>;
-}
-
-export default function ProductGrid({
-  products,
-  emptyMessage = "No products yet — check back soon.",
-  productHref,
-  LinkComponent,
-  CardComponent = ProductCard,
-}: ProductGridProps) {
-  if (products === null) {
-    return (
-      <div className="grid grid-cols-2 gap-x-5 gap-y-8 sm:grid-cols-3 lg:grid-cols-4" aria-busy="true">
-        {Array.from({ length: 8 }, (_, i) => (
-          <div key={i}>
-            <div className="aspect-square animate-pulse rounded-lg bg-secondary" />
-            <div className="mt-3 h-3.5 w-3/4 animate-pulse rounded bg-secondary" />
-            <div className="mt-2 h-3.5 w-1/3 animate-pulse rounded bg-secondary" />
-          </div>
-        ))}
-      </div>
-    );
-  }
-  if (products.length === 0) {
-    return <p className="py-16 text-center text-muted-foreground">{emptyMessage}</p>;
-  }
-  return (
-    <div className="grid grid-cols-2 gap-x-5 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
-      {products.map((p) => (
-        <CardComponent key={p.id} product={p} productHref={productHref} LinkComponent={LinkComponent} />
-      ))}
-    </div>
-  );
-}

package/skills/wix-headless-fast/references/storefront/app/components/storefront/ShopView.tsx

@@ -1,66 +0,0 @@
-// The full shop surface: live category filter bar + product grid, styled from the @theme
-// tokens. Mount as-is (Astro: one island with server-fetched initial data; SPA: no props).
-import { useShop } from "../../hooks/storefront/useShop";
-import type { Category, ProductSummary } from "../../wix/storefront/types";
-import ProductGrid, { type ProductGridProps } from "./ProductGrid";
-
-export interface ShopViewProps {
-  /** Server-fetched data (Astro/Next SSR) — omit in a SPA and it fetches client-side. */
-  initialProducts?: ProductSummary[];
-  initialCategories?: Category[];
-  emptyMessage?: string;
-  productHref?: ProductGridProps["productHref"];
-  LinkComponent?: ProductGridProps["LinkComponent"];
-  CardComponent?: ProductGridProps["CardComponent"];
-}
-
-const pill = (active: boolean) =>
-  `rounded-full border px-4 py-1.5 text-sm font-medium transition-colors ${
-    active
-      ? "border-primary bg-primary text-primary-foreground"
-      : "border-border text-foreground hover:bg-secondary"
-  }`;
-
-export default function ShopView({
-  initialProducts,
-  initialCategories,
-  emptyMessage,
-  productHref,
-  LinkComponent,
-  CardComponent,
-}: ShopViewProps) {
-  const { products, categories, activeCategoryId, setActiveCategoryId, loading, error } = useShop({
-    initialProducts,
-    initialCategories,
-  });
-
-  return (
-    <div>
-      {categories.length > 1 && (
-        <div className="mb-8 flex flex-wrap gap-2" role="group" aria-label="Categories">
-          <button type="button" className={pill(activeCategoryId === null)} onClick={() => setActiveCategoryId(null)}>
-            All
-          </button>
-          {categories.map((c) => (
-            <button
-              key={c.id}
-              type="button"
-              className={pill(activeCategoryId === c.id)}
-              onClick={() => setActiveCategoryId(c.id)}
-            >
-              {c.name}
-            </button>
-          ))}
-        </div>
-      )}
-      {error && <p className="mb-4 text-sm text-red-600">{error}</p>}
-      <ProductGrid
-        products={loading ? null : products}
-        emptyMessage={emptyMessage}
-        productHref={productHref}
-        LinkComponent={LinkComponent}
-        CardComponent={CardComponent}
-      />
-    </div>
-  );
-}

package/skills/wix-headless-fast/references/storefront/app/components/storefront/VariantPicker.tsx

@@ -1,103 +0,0 @@
-// Option/modifier selector — wire as-is on the PDP (color options render as swatches, text
-// options as pills, modifiers as pills or a text input). Styled from the @theme tokens.
-import type { ProductModifier } from "../../wix/storefront/types";
-import type { OptionGroupView } from "../../hooks/storefront/useProductDetail";
-
-export interface VariantPickerProps {
-  optionGroups: OptionGroupView[];
-  selectOption: (optionName: string, choiceName: string) => void;
-  modifiers?: ProductModifier[];
-  modifierValues?: Record<string, string>;
-  setModifier?: (key: string, value: string) => void;
-}
-
-const chip = (selected: boolean) =>
-  `rounded-full border px-4 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40 disabled:line-through ${
-    selected
-      ? "border-primary bg-primary text-primary-foreground"
-      : "border-border text-foreground hover:bg-secondary"
-  }`;
-
-export default function VariantPicker({
-  optionGroups,
-  selectOption,
-  modifiers = [],
-  modifierValues = {},
-  setModifier,
-}: VariantPickerProps) {
-  return (
-    <div>
-      {optionGroups.map((group) => (
-        <div className="mb-5" key={group.id || group.name}>
-          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            {group.name}
-          </p>
-          <div className="flex flex-wrap items-center gap-2">
-            {group.choices.map((choice) =>
-              group.isColor && choice.colorCode ? (
-                <button
-                  key={choice.choiceId || choice.name}
-                  type="button"
-                  style={{ background: choice.colorCode }}
-                  title={choice.name}
-                  aria-label={`${group.name}: ${choice.name}`}
-                  aria-pressed={choice.selected}
-                  disabled={!choice.inStock}
-                  onClick={() => selectOption(group.name, choice.name)}
-                  className={`h-8 w-8 rounded-full border transition-shadow disabled:cursor-not-allowed disabled:opacity-35 ${
-                    choice.selected
-                      ? "border-primary ring-2 ring-primary ring-offset-2 ring-offset-background"
-                      : "border-border"
-                  }`}
-                />
-              ) : (
-                <button
-                  key={choice.choiceId || choice.name}
-                  type="button"
-                  aria-pressed={choice.selected}
-                  disabled={!choice.inStock}
-                  onClick={() => selectOption(group.name, choice.name)}
-                  className={chip(choice.selected)}
-                >
-                  {choice.name}
-                </button>
-              ),
-            )}
-          </div>
-        </div>
-      ))}
-
-      {modifiers.map((m) => (
-        <div className="mb-5" key={m.key}>
-          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            {m.name}
-            {m.mandatory ? " *" : ""}
-          </p>
-          {m.type === "text" ? (
-            <input
-              type="text"
-              value={modifierValues[m.key] ?? ""}
-              onChange={(e) => setModifier?.(m.key, e.target.value)}
-              aria-label={m.name}
-              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition-shadow focus:ring-2 focus:ring-primary"
-            />
-          ) : (
-            <div className="flex flex-wrap gap-2">
-              {m.choices.map((c) => (
-                <button
-                  key={c.key}
-                  type="button"
-                  aria-pressed={modifierValues[m.key] === c.key}
-                  onClick={() => setModifier?.(m.key, c.key)}
-                  className={chip(modifierValues[m.key] === c.key)}
-                >
-                  {c.name}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}

package/skills/wix-headless-fast/references/storefront/app-astro/pages/products/[slug].astro

@@ -1,56 +0,0 @@
----
-// Product detail page — wire as-is; theme via SiteLayout's tokens.
-//
-// This is a Wix ITEM PAGE: the wixMetadata export + <SEO.Tags> below are what let the site
-// owner edit this page's title/description/OG in the dashboard, and register the route in
-// the sitemap. Keep all three SEO pieces when editing this file.
-import SiteLayout from "../../layouts/SiteLayout.astro";
-import ProductDetailView from "../../components/storefront/ProductDetailView";
-import { fetchProductBySlug } from "../../wix/storefront/catalog";
-import { WIX_APPS } from "@wix/essentials";
-import { SEO } from "@wix/seo/components";
-import { loadSEOTagsServiceConfig } from "@wix/seo/services";
-import { seoTags } from "@wix/seo";
-
-export const wixMetadata = {
-  appDefId: WIX_APPS.checkoutAndOrders.id,
-  pageIdentifier: WIX_APPS.checkoutAndOrders.productPageMetadata.pageIdentifier,
-  identifiers: {
-    slug: WIX_APPS.checkoutAndOrders.productPageMetadata.identifiers.handle,
-  },
-};
-
-const slug = Astro.params.slug!;
-
-// Behind Wix's proxy the request URL is the internal one — the real public page URL
-// arrives on x-wix-forwarded-url. The SEO service needs the public URL.
-const forwardedUrl = Astro.request.headers.get("x-wix-forwarded-url");
-const pageUrl =
-  forwardedUrl && URL.canParse(forwardedUrl) && /^https?:$/.test(new URL(forwardedUrl).protocol)
-    ? forwardedUrl
-    : Astro.url.href;
-
-let product = null;
-let seoTagsServiceConfig = null;
-try {
-  [product, seoTagsServiceConfig] = await Promise.all([
-    fetchProductBySlug(slug),
-    loadSEOTagsServiceConfig({
-      pageUrl,
-      itemType: seoTags.ItemType.STORES_PRODUCT,
-      itemData: { slug },
-    }),
-  ]);
-} catch {
-  // Guarded: an unhandled SSR throw truncates the response mid-stream.
-}
-
-if (!product) {
-  return new Response(null, { status: 404 });
-}
----
-
-<SiteLayout title={product.name}>
-  <SEO.Tags seoTagsServiceConfig={seoTagsServiceConfig} slot="seo-tags" />
-  <ProductDetailView client:load initial={product} />
-</SiteLayout>

package/skills/wix-headless-fast/references/storefront/app-astro/pages/shop.astro

@@ -1,23 +0,0 @@
----
-// Shop listing — products and categories are fetched SERVER-SIDE (SEO) and handed to the
-// island as serialized DTO props; category switches then filter live on the client.
-// Wire as-is; theme via SiteLayout's tokens.
-import SiteLayout from "../layouts/SiteLayout.astro";
-import ShopView from "../components/storefront/ShopView";
-import { fetchProducts, fetchCategories } from "../wix/storefront/catalog";
-import type { Category, ProductSummary } from "../wix/storefront/types";
-
-let products: ProductSummary[] = [];
-let categories: Category[] = [];
-try {
-  [products, categories] = await Promise.all([fetchProducts(), fetchCategories()]);
-} catch {
-  // An unguarded SSR throw truncates the response mid-stream; the island renders the
-  // shipped empty state instead.
-}
----
-
-<SiteLayout title="Shop">
-  <h1 class="mb-8 text-2xl font-semibold tracking-tight">Shop</h1>
-  <ShopView client:load initialProducts={products} initialCategories={categories} />
-</SiteLayout>