@wix/agent-skills 1.16.3 → 1.18.0

package/skills/wix-app/references/editor-react-component/COMPONENT-CONFIGURATION.md

@@ -1,225 +0,0 @@
-# Component Configuration
-
-After scaffolding the component and running `npx wix build && npx wix generate manifest`,
-configure the component's behavior in the editor by writing **partial
-manifest overrides** in the component's hand-edited extension file
-(`<ComponentName>.extension.ts`). That file imports the auto-generated
-manifest and spreads it; specific fields are overridden inline. Re-running
-this command regenerates each `<ComponentName>.generated.ts`
-companion but never touches the overrides authored in the extension file.
-
----
-
-## 1. Verifying that height sizing type meets user needs
-
-Set `installation.initialSize.height.sizingType` based on whether the
-component's own content decides how tall it is.
-
-### Heuristic — one question
-
-**Does the component's own content decide how tall it is?**
-
-- **Yes — height should grow with text the user types or children they drop inside** → `LAYOUT.SIZING_TYPE.content`. Omit `pixels`.
-- **No — the component is a framed visual** (a graphic, an embedded media surface, a form control with a standard height, an empty placeholder) → `LAYOUT.SIZING_TYPE.pixels`. Provide a `pixels` default that matches its natural visual size.
-
-**Tiebreaker:** if a designer would drag a handle to set the height, it's `pixels`. If the height should just fit whatever is inside, it's `content`.
-
-### Where to write the override
-
-```ts
-import { extensions } from '@wix/astro/builders';
-import { LAYOUT } from '@wix/react-component-schema';
-import { manifest } from './ComponentName.generated';
-
-const componentExtension = extensions.editorReactComponent({
-  // …other fields…
-  installation: {
-    initialSize: {
-      width: {
-        sizingType: LAYOUT.SIZING_TYPE.pixels,
-        pixels: 250,
-      },
-      height: {
-        sizingType: LAYOUT.SIZING_TYPE.updateMe,
-      },
-    },
-  },
-});
-```
-
-### Examples
-
-**Content-driven** (`LAYOUT.SIZING_TYPE.content`) — testimonial card,
-FAQ accordion, pricing tier, blog-post body, list/grid of arbitrary
-children:
-
-```ts
-height: {
-  sizingType: LAYOUT.SIZING_TYPE.content,
-}
-```
-
-**Framed visual** (`LAYOUT.SIZING_TYPE.pixels`) — hero banner with a
-fixed image, video embed, color-picker swatch grid, OTP input, empty
-placeholder slot:
-
-```ts
-height: {
-  sizingType: LAYOUT.SIZING_TYPE.pixels,
-  pixels: 320,
-}
-```
-
----
-
-## 2. Verifying that resize direction meets user needs
-
-Set `editorElement.layout.resizeDirection` based on which axes the
-designer should be able to control with a drag handle. Allow an axis
-if dragging it produces a meaningful, intended change. Disallow it if
-dragging would do nothing visible or would break the component's
-identity.
-
-### Heuristic — which axes are meaningful?
-
-| Choice | When to use |
-|--------|-------------|
-| `horizontalAndVertical` | Content fills or stretches in both axes. Hero, carousel, gallery, card grid, embed, form control, any framed visual. **Default for most components.** |
-| `horizontal` | Height is rigid/intrinsic — cannot meaningfully stretch. Breadcrumb, tag row, nav bar, single-line input, slider rail. |
-| `vertical` | Width is rigid/intrinsic. Vertical stack, ribbon, sidebar rail. |
-| `aspectRatio` | Distortion breaks identity — logo, illustration, animation. |
-| `none` | Size fully owned by a parent layout. Never for top-level components. |
-
-**Tiebreaker:** if a drag handle on an axis would feel inert or wrong
-to a designer, take it away.
-
-### Where to write the override
-
-```ts
-import { extensions } from '@wix/astro/builders';
-import { LAYOUT } from '@wix/react-component-schema';
-import { manifest } from './ComponentName.generated';
-
-const componentExtension = extensions.editorReactComponent({
-  // …other fields…
-  editorElement: {
-    ...manifest.editorElement,
-    layout: {
-      resizeDirection: LAYOUT.RESIZE_DIRECTION._selectedResizeDirection_,
-    },
-  },
-});
-```
-
-### Examples
-
-```ts
-// hero, carousel, gallery, card grid, embed, form
-resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
-
-// breadcrumb, tag row, nav bar, slider rail
-resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
-
-// logo, illustration, animation
-resizeDirection: LAYOUT.RESIZE_DIRECTION.aspectRatio,
-```
-
----
-
-## 3. Wiring defaults into the manifest
-
-1. **Define and export `defaultProps` from `<componentName>.props.ts`** — this is the single source of truth used by both `component.tsx` and the extension file.
-2. **Import `componentUrl` from `'./component.tsx?url'`** (the wrapped component), not from `'./ComponentName.tsx?url'` (the raw component).
-3. **Wrap `editorElement` with `withEditorElementDefaults`** using the same `defaultProps`.
-
-```ts
-import { withEditorElementDefaults } from '@wix/react-component-utils';
-import componentUrl from './component.tsx?url';
-import { defaultProps } from './<componentName>.props';
-
-// in the extension:
-editorElement: withEditorElementDefaults({
-  ...manifest.editorElement,
-}, defaultProps),
-resources: {
-  ...manifest.resources,
-  client: { componentUrl },
-},
-```
-
----
-
-## 4. Enabling automatic installation on Harmony editor
-
-**Always include `"staticContainer": "HOMEPAGE"`** in `installation` so the
-component is automatically installed on the Harmony editor.
-
-```ts
-const componentExtension = extensions.editorReactComponent({
-  // …other fields…
-  installation: {
-    // …other fields…
-    staticContainer: 'HOMEPAGE',
-  },
-});
-```
-
----
-
-## 5. Adding range constraints for numeric props
-
-The zero-config pipeline reads `@min` and `@max` JSDoc tags on numeric props and
-emits them as `number: { min, max }` in the generated manifest. Add these tags
-directly on the prop in the component's props interface — no extension file
-override is needed.
-
-### Heuristic — does this number have a fixed domain?
-
-| Scenario | Action |
-|----------|--------|
-| Rating 0–5, column count 1–6, items per row 1–4 | Add `@min` / `@max` |
-| Volume 0–100, playback speed 0.5–5, autoplay delay 0.5–30 | Add `@min` / `@max` |
-| Geo coordinates, zoom level | Add `@min` / `@max` |
-| Arbitrary count, free-form price, unconstrained input | Omit — leave as `number` |
-| Semantic index (active tab, active slide, active item) | Omit — upper bound is driven by the component's own item count, not a fixed domain |
-
-### How to write the tags
-
-Add `@min` and `@max` inline in the JSDoc comment for the prop in `<componentName>.props.ts`:
-
-```ts
-export interface RatingWidgetProps {
-  /** @min 0 @max 5 */
-  rating: number;
-}
-```
-
-Zero-config picks these up during `npx wix build && npx wix generate manifest`
-and emits:
-
-```ts
-rating: {
-  dataType: 'number',
-  number: { min: '0', max: '5' },
-}
-```
-
-### Examples
-
-```ts
-// Star rating 0–5
-/** @min 0 @max 5 */
-rating: number;
-
-// Volume 0–100
-/** @min 0 @max 100 */
-volume: number;
-
-// Playback speed 0.5–5
-/** @min 0.5 @max 5 */
-speed: number;
-
-// Column count 1–6
-/** @min 1 @max 6 */
-columns: number;
-```

package/skills/wix-app/references/editor-react-component/EDIT-FLOW.md

@@ -1,6 +0,0 @@
-# React Site Component edition
-
-Always follow this exact workflow:
-
-1. Make changes in the component's code
-2. Run `npx wix build && npx wix generate manifest` (PascalCase)

package/skills/wix-app/references/editor-react-component/REACT-PATTERNS.md

@@ -1,95 +0,0 @@
-# React Component Patterns
-
-Code patterns and common mistakes for Editor React components.
-
-# Part 1: Implementation Patterns
-
-## 1.1 SSR-Safe Implementation
-
-Avoid browser-only APIs at module scope or during render; use them inside `useEffect` with `typeof window !== 'undefined'`.
-
-**❌ Wrong:**
-
-```typescript
-const userAgent = window.navigator.userAgent;
-```
-
-**✅ Correct:**
-
-```typescript
-useEffect(() => {
-  if (typeof window !== "undefined") {
-    const userAgent = window.navigator.userAgent;
-  }
-}, []);
-```
-
-## 1.2 Element Visibility (Platform-Managed)
-
-See [`PROPS-VS-CSS.md`](PROPS-VS-CSS.md) — element visibility is platform-managed; always render all elements, no conditional rendering.
-
----
-
-# Part 2: CSS/SCSS Rules
-
-Authoritative SCSS rules: `REACT-GUIDELINES.md` Part 2. For RTL/logical CSS patterns, see [`DIRECTIONALITY.md`](DIRECTIONALITY.md).
-
-## 2.1 What NOT to Include
-
-```scss
-// ❌ NEVER include:
-
-// Transitions/Animations
-transition: all 0.3s;        // ❌
-animation: fadeIn 0.5s;      // ❌
-```
-
-> Design states (`hover`, `focus`, `selected`, …) are authored per
-> [`DESIGN-STATES.md`](DESIGN-STATES.md).
-
----
-
-# Part 3: Common Mistakes
-
-## 3.1 Custom-state classes
-
-For a custom design state, toggle the element's **global** state class from
-its data in JSX (e.g. `isSelected && 'pricing-card-row--selected'`, using the
-component-name-prefixed class) — don't express it as a module-scoped class. State styling lives in [`DESIGN-STATES.md`](DESIGN-STATES.md).
-
-## 3.2 Browser APIs at module scope
-
-**❌ Wrong:**
-
-```typescript
-const isMobile = window.innerWidth < 768; // ❌ SSR breaks
-```
-
-**✅ Correct:**
-
-```typescript
-useEffect(() => {
-  if (typeof window !== "undefined") {
-    setIsMobile(window.innerWidth < 768);
-  }
-}, []);
-```
-
-## 3.3 Use semantic HTML for collection-style UI
-
-For lists, breadcrumbs, tabs, menus, and similar collection-style UI, render the underlying semantic HTML directly (`<ol>`/`<ul>` + `<li>`, `<nav>`, `<button role="tab">`, etc.) and own the keyboard / ARIA wiring in your own React code.
-
-```tsx
-<ol className="breadcrumbs">
-  <li>
-    <a href="/">Home</a>
-  </li>
-  <li>
-    <span aria-hidden="true">/</span>
-    <a href="/products">Products</a>
-  </li>
-</ol>
-```
-
-Handle separators with CSS pseudo-elements or inside each item.
-

package/skills/wix-vibe-headless/references/storefront/app/components/ProductCard.jsx

@@ -1,110 +0,0 @@
-// Reference implementation of a product grid tile built on useProductCard.
-// Styled with base44 design tokens (shadcn Tailwind classes: bg-card / text-foreground / border-border).
-// Build your own card on useProductCard instead — read this for inspiration, don't use it directly.
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import { useCart } from "@/context/CartContext";
-import { useProductCard } from "@/hooks/useProductCard";
-
-const badge = "px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide rounded-full";
-const badgePromo    = `${badge} bg-primary text-primary-foreground`;
-const badgeInfo     = `${badge} bg-card text-foreground border border-border`;
-const badgeBlocked  = `${badge} bg-destructive text-destructive-foreground`;
-
-const badgeClass = { "pre-order": badgeInfo, "sold-out": badgeBlocked, "limited-stock": badgeInfo };
-
-export default function ProductCard({ product }) {
-  const { addToCart } = useCart();
-  const [adding, setAdding] = useState(false);
-
-  const {
-    isSoldOut, isPreorder, leftBadges, promoBadge,
-    priceDisplay, compareAtDisplay,
-    colors, optionLabel,
-    isQuickAddable, image, hoverImage,
-  } = useProductCard(product);
-
-  const quickAdd = async () => {
-    setAdding(true);
-    await addToCart(product.id);
-    setAdding(false);
-  };
-
-  return (
-    <div className="group relative flex flex-col bg-card border border-border rounded-lg overflow-hidden shadow-sm">
-      <div className="relative aspect-square bg-background">
-        <Link to={`/product/${product.slug}`} aria-label={product.name} className="block w-full h-full">
-          {image ? (
-            <>
-              <img src={image} alt={product.name} loading="lazy"
-                className={`w-full h-full object-cover ${hoverImage ? "transition-opacity duration-300 md:group-hover:opacity-0" : ""}`} />
-              {hoverImage && (
-                <img src={hoverImage} alt="" aria-hidden="true" loading="lazy"
-                  className="hidden md:block absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
-              )}
-            </>
-          ) : (
-            <div className="w-full h-full bg-muted flex items-center justify-center" aria-hidden="true">
-              <svg viewBox="0 0 24 24" className="w-8 h-8 text-muted-foreground/40" fill="none" stroke="currentColor" strokeWidth="1.5">
-                <rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" />
-              </svg>
-            </div>
-          )}
-        </Link>
-
-        <div className="absolute top-2 left-2 flex flex-col items-start gap-1 pointer-events-none">
-          {leftBadges.map((b) => (
-            <span key={b.type} className={badgeClass[b.type]}>{b.label}</span>
-          ))}
-        </div>
-        <div className="absolute top-2 right-2 pointer-events-none">
-          {promoBadge && <span className={badgePromo}>{promoBadge.label}</span>}
-        </div>
-
-        {(!isSoldOut || isPreorder) && (
-          <div className="absolute inset-x-2 bottom-2 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100">
-            {isQuickAddable ? (
-              <button onClick={quickAdd} disabled={adding}
-                className="w-full py-2.5 px-4 rounded-full bg-primary text-primary-foreground border-none text-sm font-semibold cursor-pointer transition-opacity hover:opacity-90 disabled:opacity-60 disabled:cursor-wait">
-                {adding ? "Adding…" : "Quick add"}
-              </button>
-            ) : (
-              <Link to={`/product/${product.slug}`}
-                className="block w-full text-center py-2.5 px-4 rounded-full bg-primary text-primary-foreground no-underline text-sm font-semibold">
-                {isSoldOut ? "Pre-order" : "Choose options"}
-              </Link>
-            )}
-          </div>
-        )}
-      </div>
-
-      <div className="p-3 flex flex-col gap-1">
-        <div className="flex flex-col gap-1 md:flex-row md:items-baseline md:justify-between md:gap-3">
-          <h3 className="m-0 font-display text-[15px] font-semibold line-clamp-2">
-            <Link to={`/product/${product.slug}`} className="no-underline text-foreground">{product.name}</Link>
-          </h3>
-          <div className="flex gap-2 items-baseline flex-wrap md:justify-end">
-            <span className="font-semibold whitespace-nowrap">{priceDisplay}</span>
-            {compareAtDisplay && (
-              <span className="text-muted-foreground line-through text-[13px] whitespace-nowrap">{compareAtDisplay}</span>
-            )}
-          </div>
-        </div>
-
-        {(colors.length > 0 || optionLabel) && (
-          <div className="flex items-center gap-2 text-[13px] text-muted-foreground min-h-[18px]">
-            {colors.length > 0 && (
-              <span className="flex items-center gap-1" aria-label={`${colors.length} colors available`}>
-                {colors.slice(0, 5).map((c, i) => (
-                  <span key={`${c}-${i}`} className="w-3 h-3 rounded-full ring-1 ring-inset ring-black/20" style={{ backgroundColor: c }} />
-                ))}
-                {colors.length > 5 && <span>+{colors.length - 5}</span>}
-              </span>
-            )}
-            {optionLabel && <span>{optionLabel}</span>}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/storefront/app/components/ProductGallery.jsx

@@ -1,51 +0,0 @@
-// PDP image gallery — main image plus thumbnails from productGallery(product), which puts
-// media.main first and drops the duplicate of it that media.itemsInfo.items carries. A product with a
-// single image renders just the main frame, so this is safe for a one-photo catalog.
-// Styled with base44 design tokens (shadcn Tailwind classes).
-import { useEffect, useState } from "react";
-
-export default function ProductGallery({ images, name, focusUrl }) {
-  const [index, setIndex] = useState(0);
-  // Reset when navigating between products — the component stays mounted across a slug change.
-  // `images` must keep a stable identity per product (the PDP memoises it), or every parent render —
-  // a quantity bump, an option click — would land here and throw away the image the buyer picked.
-  useEffect(() => { setIndex(0); }, [images]);
-
-  // Picking a colour swatch shows that colour: focusUrl is the choice's linked photo. Runs after the
-  // reset effect, so a first paint with a colour pre-selected opens on the right image.
-  useEffect(() => {
-    const i = images?.findIndex((img) => img.url === focusUrl) ?? -1;
-    if (i >= 0) setIndex(i);
-  }, [focusUrl, images]);
-
-  const current = images?.[index];
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="aspect-square bg-card rounded-lg overflow-hidden">
-        {current ? (
-          <img src={current.url} alt={current.altText || name} className="w-full h-full object-cover" />
-        ) : (
-          <div className="w-full h-full bg-muted flex items-center justify-center" aria-hidden="true">
-            <svg viewBox="0 0 24 24" className="w-10 h-10 text-muted-foreground/40" fill="none" stroke="currentColor" strokeWidth="1.5">
-              <rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" />
-            </svg>
-          </div>
-        )}
-      </div>
-
-      {images?.length > 1 && (
-        <div className="flex gap-2 flex-wrap" role="group" aria-label={`${name} images`}>
-          {images.map((img, i) => (
-            <button key={img.url} onClick={() => setIndex(i)} aria-label={`Show image ${i + 1}`} aria-current={i === index}
-              className={`w-16 h-16 rounded-sm overflow-hidden cursor-pointer bg-card border ${
-                i === index ? "border-primary" : "border-border"
-              }`}>
-              <img src={img.url} alt="" loading="lazy" className="w-full h-full object-cover" />
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/storefront/app/components/ProductGrid.jsx

@@ -1,49 +0,0 @@
-// Reference implementation of a product grid — 2-col mobile, auto-fill desktop, with a skeleton
-// loading state and a descriptive empty state. Build your own layout instead (see INSTRUCTIONS.md
-// STEP 3) — read this for the skeleton/empty-state patterns, don't use it directly.
-import ProductCard from "./ProductCard";
-
-// Skeleton tiles match ProductCard's aspect-square + two text lines, so nothing shifts when the real
-// products land.
-export function ProductGridSkeleton({ count = 8 }) {
-  return (
-    <div className="grid gap-4 grid-cols-2 md:[grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]" aria-hidden="true">
-      {Array.from({ length: count }).map((_, i) => (
-        <div key={i} className="bg-card border border-border rounded-lg overflow-hidden">
-          <div className="aspect-square bg-muted animate-pulse" />
-          <div className="p-3 flex flex-col gap-2">
-            <div className="flex justify-between gap-3">
-              <div className="h-3.5 w-1/2 bg-muted rounded-sm animate-pulse" />
-              <div className="h-3.5 w-1/5 bg-muted rounded-sm animate-pulse" />
-            </div>
-            <div className="h-3 w-1/3 bg-muted rounded-sm animate-pulse" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default function ProductGrid({ products, loading, empty = "No products yet.", emptyHint }) {
-  if (loading) return <ProductGridSkeleton />;
-
-  if (!products?.length) {
-    return (
-      <div className="flex flex-col items-center justify-center text-center gap-3 py-16 px-4">
-        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
-          className="text-muted-foreground/40" aria-hidden="true">
-          <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><path d="M3 6h18" />
-          <path d="M16 10a4 4 0 0 1-8 0" />
-        </svg>
-        <h2 className="font-display m-0 text-lg font-semibold">{empty}</h2>
-        {emptyHint && <p className="m-0 text-muted-foreground max-w-[46ch]">{emptyHint}</p>}
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid gap-4 grid-cols-2 md:[grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
-      {products.map((p) => <ProductCard key={p.id} product={p} />)}
-    </div>
-  );
-}

package/skills/wix-vibe-headless/references/storefront/app/components/VariantPicker.jsx

@@ -1,92 +0,0 @@
-// PDP choice controls built on useVariantOptions — swap this component for your own if you want
-// a different look; the data contract (optionGroups / modifierGroups) stays the same.
-// Styled with base44 design tokens (shadcn Tailwind classes).
-import { useVariantOptions } from "@/hooks/useVariantOptions";
-
-const chipBase = "py-1.5 px-3 cursor-pointer text-sm font-body border rounded-sm";
-const chipIdle = "border-border bg-card text-foreground";
-const chipActive = "border-primary bg-primary text-primary-foreground";
-const label = "block mb-1.5 text-[13px] font-semibold text-muted-foreground";
-
-export default function VariantPicker({ options, modifiers, selectedOptions, selectOption, modifierValues, setModifier }) {
-  const { optionGroups, modifierGroups } = useVariantOptions(options, modifiers, selectedOptions, modifierValues);
-
-  return (
-    <>
-      {optionGroups.map((group) => (
-        <div key={group.id} className="mb-4">
-          <label className={label}>
-            {group.name}
-            {group.isColor && (
-              <span className="ml-1.5 font-normal text-foreground">
-                {group.choices.find((c) => c.selected)?.name}
-              </span>
-            )}
-          </label>
-          <div className="flex flex-wrap gap-2">
-            {group.choices.map((c) =>
-              c.isColorSwatch ? (
-                <button
-                  key={c.choiceId}
-                  type="button"
-                  disabled={!c.inStock}
-                  onClick={() => selectOption(group.id, c.choiceId)}
-                  aria-pressed={c.selected}
-                  aria-label={`${c.name}${!c.inStock ? " (out of stock)" : ""}`}
-                  title={c.name}
-                  className={`relative w-9 h-9 rounded-full cursor-pointer transition-shadow ring-1 ring-inset ring-black/15 ${
-                    c.selected ? "ring-2 ring-offset-2 ring-offset-background ring-primary" : ""
-                  } ${!c.inStock ? "opacity-40 cursor-not-allowed" : "hover:ring-2 hover:ring-offset-1 hover:ring-offset-background hover:ring-border"}`}
-                  style={{ backgroundColor: c.colorCode }}
-                >
-                  {!c.inStock && (
-                    <span aria-hidden="true" className="absolute inset-0 grid place-items-center">
-                      <span className="w-full h-px bg-destructive rotate-45" />
-                    </span>
-                  )}
-                </button>
-              ) : (
-                <button
-                  key={c.choiceId}
-                  type="button"
-                  disabled={!c.inStock}
-                  aria-pressed={c.selected}
-                  onClick={() => selectOption(group.id, c.choiceId)}
-                  className={`${chipBase} ${c.selected ? chipActive : chipIdle} ${!c.inStock ? "opacity-40 line-through" : ""}`}
-                >
-                  {c.name}
-                </button>
-              )
-            )}
-          </div>
-        </div>
-      ))}
-
-      {modifierGroups.map((m) => (
-        <div key={m.key} className="mb-4">
-          <label className={label}>{m.name}{m.mandatory && " *"}</label>
-          {m.type === "text" ? (
-            <input
-              value={m.value}
-              onChange={(e) => setModifier(m.key, e.target.value)}
-              className="w-full py-2 px-3 font-body border border-input rounded-sm bg-background text-foreground"
-            />
-          ) : (
-            <div className="flex flex-wrap gap-2">
-              {m.choices.map((c) => (
-                <button
-                  key={c.key}
-                  aria-pressed={c.selected}
-                  onClick={() => setModifier(m.key, c.key)}
-                  className={`${chipBase} ${c.selected ? chipActive : chipIdle}`}
-                >
-                  {c.name}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      ))}
-    </>
-  );
-}