@wix/agent-skills 1.18.1 → 1.18.2

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

@@ -1,14 +1,54 @@
 # Reading `@wix/patterns` Bundles and Docs
 
-> **Scope.** You are here because a lookup in `dist/dts-bundle/index.json` or
-> `dist/docs/index.json` gave you an entry and you are about to open the file it names. Getting to that index in the first
-> place — resolving the package root, the version floor, the docs lookup, and the rule
+> **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 docs cover components and props, not 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.
+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.
 
@@ -32,9 +72,24 @@ An empty body with a **"Produced by"** note means: call that hook or factory to
 
 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 and the stub names where to find it.
+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.
 
-A handful of names carry `"status": "unreachable"` 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
 
@@ -49,4 +104,9 @@ Links to `https://www.docs.wixdesignsystem.com/` are external (Wix Design System
 ## 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.
+- **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-app/references/editor-react-component/ACCESSIBILITY.md

@@ -25,7 +25,7 @@ import type { A11y, Direction } from '@wix/editor-react-types';
 import { convertA11yKeysToHtmlFormat } from '@wix/react-component-utils';
 
 export type TabsProps = {
-  id?: string;
+  id: string;
   className?: string;
   direction?: Direction;
   a11y?: A11y;

package/skills/wix-app/references/editor-react-component/ANIMATED-COMPONENTS.md

@@ -1,8 +1,7 @@
 # Animated Components
 
-Use this reference when the component's primary content is a **playable
-animation**—a Lottie/JSON animation, an animated GIF/SVG, a canvas/WebGL loop,
-or a video-like surface.
+Use this reference when the component's primary content **auto-advances or plays**
+— a slideshow/carousel/slider; a Lottie/JSON animation; an animated GIF/SVG, a canvas/WebGL loop, a video-like surface; or similar content a visitor should be able to start or stop.
 
 Every such component must ship an on-stage **play/pause button**.
 
@@ -22,7 +21,7 @@ Apply automatically — without being asked — whenever the component has an
 `autoPlay` prop **or** its primary content is a **startable / loopable**
 animation a visitor would reasonably want to start or stop:
 
-- Any component with an `autoPlay` prop (gallery, slider, carousel, etc.)
+- Slideshow, carousel, slider, or gallery that advances slides/cards
 - Lottie / JSON vector animations
 - Animated GIFs or animated SVGs
 - Canvas / WebGL animation loops
@@ -40,6 +39,8 @@ implementation detail.
    automatically, `loop` only when repeat behavior is supported, and
    `pauseButtonVisibility` for the on-stage control. When editing, preserve
    existing playback prop names and add only the missing safety contract.
+   Carousels, sliders, slideshows, and galleries **must** define `autoPlay`
+   (default `true`).
 2. **Playback state** — `isPlaying` + `handlePause` / `handleResume`
 3. **Play/pause button** — overlay `<button>` with inline SVG icon and CSS
    positioning; it must be a named part with `elementProps` wiring, a hover
@@ -57,7 +58,7 @@ able to force the safety control visible.
 import type { A11y, Direction } from '@wix/editor-react-types';
 
 export interface MyAnimationProps {
-  id?: string;
+  id: string;
   className?: string;
   direction?: Direction;
   a11y?: A11y;
@@ -215,7 +216,9 @@ Add `useIsEditMode` to the existing `@wix/react-component-utils` import. Then
 edit only the body of the existing `ComponentNamePreview` function — add the
 `isEditMode` check and gate the autoplay props. Do not touch the
 `withFallbackPlaceholder` call, the `withDefaults` export, or any other part
-of the file.
+of the file. The composition must keep `withDefaults` outside
+`withFallbackPlaceholder`, whether the calls are nested inline or assigned to
+component variables.
 
 ```tsx
 const ComponentNamePreview: FC<ComponentProps<typeof Component>> = (props) => {

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

@@ -25,7 +25,7 @@ Use this shape:
 import type { A11y, Direction } from '@wix/editor-react-types';
 
 export type PlanCardProps = {
-  id?: string;
+  id: string;
   className?: string;
   direction?: Direction;
   a11y?: A11y;
@@ -53,9 +53,8 @@ Rules:
 
 ## Numeric Range Constraints
 
-For a new or changed numeric prop, use inline `@min` and `@max` JSDoc tags when
-the value has a fixed domain. Manifest generation reads the tags; no extension
-override is needed.
+Use inline `@min` and `@max` JSDoc tags for fixed-domain numeric props. Manifest
+generation reads the tags automatically.
 
 ```ts
 export type RatingProps = {
@@ -64,21 +63,17 @@ export type RatingProps = {
 };
 ```
 
-Use fixed bounds for ratings, percentages, playback speed, columns, and similar
-domains. Omit them for arbitrary counts, free-form prices, or an active index
-whose upper bound depends on the current collection.
+Use fixed bounds for ratings, percentages, playback speed, columns, etc. Omit
+for open-ended values or indices tied to a dynamic collection.
 
 ## Named Parts and `elementProps`
 
-Treat an independently editable inner element as a named part, then apply one
-consistent wiring rule:
+Treat an independently editable inner element as a named part. Wiring rules:
 
-- The elected root receives top-level `id`, `className`, `direction`, and `a11y`;
-  it has no `elementProps` entry.
-- Every named inner part has an `elementProps` entry, even when `className` is
-  the only injected field it currently needs.
-- Structural or decorative non-parts have no `elementProps` entry and use only a
-  CSS Module class.
+- Root receives top-level `id`, `className`, `direction`, `a11y` — no
+  `elementProps` entry.
+- Every named inner part has an `elementProps` entry (even if only `className`
+  is needed); structural/decorative non-parts use only a CSS Module class.
 
 On a raw HTML element, spread the entry and explicitly merge its injected
 `className`. Keep the entry key short while prefixing the global class with the
@@ -108,79 +103,62 @@ Do not merge the same class at both the call site and the sub-component root.
 
 ## Content and Data
 
-### Derived Values
-
-Compute a value internally when a small pure expression can derive it from
-props or state. For example, expose `price` and `quantity`; compute `subtotal`.
-Use numeric types when arithmetic is required.
+Compute derived values internally when a small pure expression can derive them
+from props or state (e.g. expose `price` and `quantity`; compute `subtotal`; use
+numeric types when arithmetic is required).
 
 ### Data-Driven Components
 
-Export named content props rather than `children` for leaf components:
-
-- text: `label`, `title`, `placeholder`
-- media: `image`, `video`, `icon`
-- links: `link`, `href`
-- collections: `items`, `options`, `menuItems`
-
-Internal sub-components may still use `children` for composition.
+Export named content props rather than `children` for leaf components — text
+(`label`, `title`, `placeholder`), media (`image`, `video`, `icon`), links
+(`link`, `href`), collections (`items`, `options`, `menuItems`). Internal
+sub-components may still use `children` for composition.
 
 ### Container Components
 
-Use `React.ReactNode` only when the specification defines a container or slot
-that accepts arbitrary nested components. Put `dir="ltr"` on the element that
-renders each `ReactNode` value so nested content does not inherit the component's
-direction.
+Use `React.ReactNode` only for containers or slots accepting arbitrary nested
+components. Put `dir="ltr"` on elements rendering `ReactNode` so nested content
+does not inherit the component's direction.
 
 ### Array Props
 
-Array elements must be objects with named keys. This provides stable identity,
-semantic field names, and room for non-breaking extension.
+Array elements must be objects with named keys for semantics and extensibility.
 
 ```ts
 type GalleryProps = {
-  images: Array<{ id: string; image: Image; caption?: string }>;
-  tags: Array<{ id: string; label: string }>;
+  images: Array<{ image: Image; caption?: string }>;
+  tags: Array<{ label: string }>;
 };
 ```
 
-Do not export arrays of primitives, leaf Wix data types, or nested arrays:
-
-```ts
-// Avoid:
-// Array<string>
-// Array<Image>
-// Array<Array<Item>>
-// Array<{ items: Array<Image> }>
-```
+Do not export `Array<string>`, `Array<Image>`, `Array<Array<T>>`, or nested
+arrays inside items.
 
-The parent owns the array. Item sub-components receive one item rather than
-redeclaring the collection. Use a stable item identifier as the React key; do
-not synthesize identity from the array index when stable identity is available.
+The parent owns the array. Item sub-components receive one item, not the
+collection. Do not add an `id` field for React keys—use the item's semantic
+named fields instead. Prefer: (1) a stable unique field (`value`, `uri`, `label`, …), (2)
+else slug a user-facing string (`name`, `label`), (3) else the array index.
 
-### Active-Item Components
+## Active-Item Components
 
-Apply this contract when an array-driven UI shows one item body at a time, such
-as tabs, slides, or steps. Skip it for always-visible lists, multi-select UIs,
-and multi-expand accordions.
+Apply this contract when an array-driven UI shows one item body at a time (tabs,
+slides, steps). Skip for always-visible lists, multi-select, or multi-expand.
 
-- Give every item a `name: string`; Studio uses `name` for hat-selector labels.
-- Pair the array prop with `ActiveItemIndex<'arrayPropName'>` from
-  `@wix/react-component-utils`. The type argument must exactly match the array
-  prop name, and `defaultProps` must initialize the index to `0`.
-- Render every body with `.map()`. Mark the active body with a prefixed
-  `--active` state class, hide inactive bodies with functional CSS visibility,
-  and apply `aria-hidden` and `inert` to inactive content.
-- Provide keyboard navigation between triggers and the matching ARIA pattern.
+- Every item needs `name: string` (used for hat-selector labels).
+- **Import and use `ActiveItemIndex<'arrayPropName'>`** from
+  `@wix/react-component-utils`. The type argument must match the array prop name
+  exactly, and `defaultProps` must set the index to `0`.
+- Render all bodies with `.map()`. Active body gets --active; inactive bodies get functional CSS visibility, aria-hidden, and inert.
+- Provide keyboard navigation and the matching ARIA pattern.
 
 ```ts
 import type { A11y, Direction } from '@wix/editor-react-types';
 import type { ActiveItemIndex } from '@wix/react-component-utils';
 
-export type Step = { id: string; name: string; body: string };
+export type Step = { name: string; body: string };
 
 export type StepsProps = {
-  id?: string;
+  id: string;
   className?: string;
   direction?: Direction;
   a11y?: A11y;
@@ -189,30 +167,26 @@ export type StepsProps = {
 };
 
 export const defaultProps = {
-  steps: [{ id: 'first', name: 'Step 1', body: 'First step' }],
+  steps: [{ name: 'Step 1', body: 'First step' }],
   activeItem: 0,
 } satisfies Omit<StepsProps, 'id' | 'className'>;
 ```
 
 ### Wix Data Types
 
-Use types such as `Image`, `Link`, `Video`, `Audio`, `VectorArt`, and `RichText`
-from `@wix/editor-react-types`. Inspect
-`node_modules/@wix/react-component-schema/dist/editor-react-types.d.ts` when you
-need the supported schema types.
+Use `Image`, `Link`, `Video`, `Audio`, `VectorArt`, `RichText` from
+`@wix/editor-react-types`. See `node_modules/@wix/react-component-schema/dist/editor-react-types.d.ts` for the full list.
 
 ## Defaults and Resources
 
 Export `defaultProps` from `<component-name>.props.ts`. Both `component.tsx` and
-the extension consume this object; do not duplicate fallback values in JSX.
+the extension consume this object; never duplicate fallbacks in JSX.
 
-Rendered media and runtime data must come from Wix-hosted services, local
-bundled assets, or values supplied through props. Do not silently introduce an
-external host or third-party runtime dependency.
+All rendered media must come from Wix-hosted services, local assets, or props.
+No external hosts or third-party runtime dependencies.
 
-For an `Image` default, populate only `uri`, `url`, and `alt`. Let the editor
-populate dimensions and focal-point metadata after the site owner chooses an
-image.
+For `Image` defaults, populate only `uri`, `url`, and `alt`; the editor fills
+dimensions and focal-point metadata.
 
 ```ts
 export const defaultProps = {
@@ -224,9 +198,8 @@ export const defaultProps = {
 } as const satisfies Omit<ExampleComponentProps, 'id' | 'className'>;
 ```
 
-Use distinct Wix-hosted defaults for multiple image slots. Keep fallback data in
-`defaultProps` so rendering reads the resolved prop instead of hardcoding a
-second fallback in JSX.
+Use distinct Wix-hosted defaults per image slot; keep all fallback data in
+`defaultProps` so rendering never hardcodes a second fallback in JSX.
 
 Use this pool in order, cycling only when more than five defaults are needed:
 
@@ -238,14 +211,12 @@ Use this pool in order, cycling only when more than five defaults are needed:
 | 4 | `11062b_45e67783d39c4963ab9e4fc418173233~mv2.jpg` | Abstract pink waves |
 | 5 | `11062b_4c11f014b0d04948b2e6f554076bc40a~mv2.jpg` | Coastal village aerial |
 
-For one image, use entry 1. For multiple slots, use a different entry for each
-slot so the defaults are visually distinct.
+For one image use entry 1; for multiple slots use a different entry each.
 
 ## Internal File Splitting
 
-Split a logical, independently understandable unit when doing so makes the main
-component easier to read or test. Keep internal files within the scaffolded
-component folder and use `.module.css`, matching the package convention.
+Split independently understandable units when it makes the main component easier
+to read or test. Keep internal files in the component folder using `.module.css`.
 
 ```text
 component-name/
@@ -264,12 +235,11 @@ Do not extract tiny fragments merely to satisfy a line-count threshold.
 
 ## Checklist
 
-- [ ] Identity, direction, and accessibility contracts are present.
-- [ ] Props contain authored data or stable behavior; derived values stay internal.
-- [ ] New or changed fixed-domain numeric props use `@min` and `@max`.
-- [ ] Every named inner part has `elementProps` wiring and merged classes.
-- [ ] Leaf components avoid exported `children`.
-- [ ] Array elements are named objects with stable identity.
+- [ ] Identity, direction, a11y, and SDK callbacks follow the public props shape.
+- [ ] Props hold authored data/behavior; derived values stay internal.
+- [ ] Fixed-domain numeric props use `@min`/`@max` JSDoc tags.
+- [ ] Named inner parts have `elementProps` wiring; leaf components avoid exported `children`.
 - [ ] One-body-visible arrays use the active-item contract and render all bodies.
-- [ ] Defaults have one source of truth in the props file.
+- [ ] Array elements are objects with semantic named fields. No separate `id` field added to item types; React keys use item fields (stable unique → slug → index), not a typed `id`.
+- [ ] Defaults live only in the props file (no JSX fallbacks).
 - [ ] Resources are Wix-hosted, prop-supplied, or locally bundled.

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

@@ -9,14 +9,30 @@ The Wix CLI scaffold generates `component.preview.tsx` and wires its URL into
 the extension's editor resource. It includes `withDefaults`,
 `withFallbackPlaceholder`, required-data fields, and the root class name.
 
-Keep the wrapper structure and synchronize its values:
+Keep the wrapper structure and synchronize its values. The renderer detects
+preview defaults only when `withDefaults` wraps the result of
+`withFallbackPlaceholder`. The calls may be nested directly:
+
+```tsx
+export default withDefaults(
+  withFallbackPlaceholder(ComponentPreview, {
+    requiredDataFields: ['animationUrl'],
+    rootClassName: 'component-root',
+  }),
+  defaultProps,
+);
+```
 
 - Wrap the preview adapter when one exists; otherwise wrap `Component`.
 - In `requiredDataFields`, normally use only the one prop crucial to meaningful
   rendering, such as `animationUrl`. Use more only when each is essential.
 - Set `rootClassName` to the elected root's exact global class, not `styles.root`.
 
-Never remove `withFallbackPlaceholder`.
+Never remove either wrapper, export `withFallbackPlaceholder(...)` directly, or
+invert their order. Preserve the equivalent of
+`withDefaults(withFallbackPlaceholder(...), defaultProps)` even when editing
+the preview component or fallback options. Assigning either wrapped component
+to a variable is valid as long as that outer-to-inner order stays intact.
 
 ## Detect Editor Design Mode
 
@@ -40,12 +56,15 @@ timers, or network activity while a site owner is designing.
 For autoplaying components, force autoplay off in editor design mode and keep
 the live/preview prop values unchanged.
 
-Export the adapter through `withFallbackPlaceholder` and synchronize its data
-field and root class.
+Pass the adapter to `withFallbackPlaceholder`, then pass that wrapped component
+to `withDefaults`. This may be written inline as shown above or through component
+variables. Synchronize the data field and root class either way.
 
 ## Checklist
 
 - [ ] Generated wrappers target the preview adapter when one exists.
+- [ ] The default export resolves to `withDefaults` outside
+      `withFallbackPlaceholder`, whether inline or through component variables.
 - [ ] Normally one crucial data field and the exact root global class are set.
 - [ ] The extension still loads the preview URL as its editor resource.
 - [ ] `useIsEditMode()` is called inside a component.