@wix/agent-skills 1.18.0 → 1.18.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/package.json +1 -1
  2. package/skills/wix-app/SKILL.md +4 -4
  3. package/skills/wix-app/references/APP_VALIDATION.md +7 -33
  4. package/skills/wix-app/references/DASHBOARD_PAGE.md +18 -14
  5. package/skills/wix-app/references/EDITOR_REACT_COMPONENT.md +75 -92
  6. package/skills/wix-app/references/WIX_PATTERNS_DOCS.md +23 -26
  7. package/skills/wix-app/references/dashboard-page/COLLECTION_TOOLKIT.md +7 -6
  8. package/skills/wix-app/references/dashboard-page/ENTITY_PAGE_TOOLKIT.md +71 -4
  9. package/skills/wix-app/references/dashboard-page/PATTERNS_BUNDLE_READING.md +67 -7
  10. package/skills/wix-app/references/editor-react-component/ACCESSIBILITY.md +1 -1
  11. package/skills/wix-app/references/editor-react-component/ANIMATED-COMPONENTS.md +9 -6
  12. package/skills/wix-app/references/editor-react-component/COMPONENT-CONTRACT.md +59 -89
  13. package/skills/wix-app/references/editor-react-component/COMPONENT-PREVIEW.md +23 -4
  14. package/skills/wix-app/references/editor-react-component/CSS-GUIDELINES.md +29 -14
  15. package/skills/wix-base44-connector/SKILL.md +168 -48
  16. package/skills/wix-base44-connector/scripts/{utils.js → utils.cjs} +69 -48
  17. package/skills/wix-docs/SKILL.md +109 -111
  18. package/skills/wix-docs/references/API_SPEC_SEARCH.md +35 -23
  19. package/skills/wix-docs/references/CALLING.md +91 -0
  20. package/skills/wix-docs/references/EXTRACTING.md +5 -3
  21. package/skills/wix-headless/references/DOC_DISCOVERY.md +9 -3
  22. package/skills/wix-headless/references/inline-recipes/setup-forms.md +57 -10
  23. package/skills/wix-manage/SKILL.md +106 -92
  24. package/skills/wix-manage/references/dashboard-navigation/routes.json +12 -52
  25. package/skills/wix-manage/references/ecommerce/shipping/ecom-shipping-api.md +0 -2
  26. package/skills/wix-manage/references/forms/create-form.md +272 -184
  27. package/skills/wix-manage/references/forms/forms-dashboard-navigation.md +13 -10
  28. package/skills/wix-manage/references/forms/update-form.md +122 -0
  29. package/skills/wix-manage/references/media/generate-image-with-ai.md +86 -0
  30. package/skills/wix-manage/references/seo/manage-content-plan.md +247 -0
  31. package/skills/wix-manage/references/seo/manage-seo-tags.md +59 -6
  32. package/skills/wix-manage/references/stores/change-store-currency.md +10 -0
  33. package/skills/wix-manage/references/stores/create-product-catalog-v3.md +16 -1
  34. package/skills/wix-manage/references/stores/update-product-with-options.md +9 -0
  35. package/skills/wix-vibe-headless/SKILL.md +17 -18
  36. package/skills/wix-vibe-headless/install/pin-agents-md.cjs +1 -1
  37. package/skills/wix-vibe-headless/platforms/base44-ecom-light-seed-with-install.md +118 -0
  38. package/skills/wix-vibe-headless/platforms/base44-ecom-light-seed.md +55 -62
  39. package/skills/wix-vibe-headless/platforms/base44-ecom-light.md +31 -29
  40. package/skills/wix-vibe-headless/platforms/base44.md +12 -5
  41. package/skills/wix-vibe-headless/platforms/generic.md +13 -12
  42. package/skills/wix-vibe-headless/references/blog/INSTRUCTIONS.md +4 -13
  43. package/skills/wix-vibe-headless/references/blog/seed/SEED.md +4 -8
  44. package/skills/wix-vibe-headless/references/blog/seed/{seed-blog.js → seed-blog.cjs} +2 -3
  45. package/skills/wix-vibe-headless/references/bookings/INSTRUCTIONS.md +5 -14
  46. package/skills/wix-vibe-headless/references/bookings/seed/SEED.md +5 -9
  47. package/skills/wix-vibe-headless/references/bookings/seed/{seed-bookings.js → seed-bookings.cjs} +2 -2
  48. package/skills/wix-vibe-headless/references/bookings/seed/{seed-rentals.js → seed-rentals.cjs} +3 -3
  49. package/skills/wix-vibe-headless/references/cms/INSTRUCTIONS.md +1 -1
  50. package/skills/wix-vibe-headless/references/cms/seed/SEED.md +2 -2
  51. package/skills/wix-vibe-headless/references/events/INSTRUCTIONS.md +4 -13
  52. package/skills/wix-vibe-headless/references/events/seed/SEED.md +3 -7
  53. package/skills/wix-vibe-headless/references/events/seed/{seed-events.js → seed-events.cjs} +2 -2
  54. package/skills/wix-vibe-headless/references/forms/INSTRUCTIONS.md +24 -7
  55. package/skills/wix-vibe-headless/references/forms/seed/SEED.md +91 -17
  56. package/skills/wix-vibe-headless/references/members/INSTRUCTIONS.md +4 -13
  57. package/skills/wix-vibe-headless/references/members/seed/SEED.md +2 -3
  58. package/skills/wix-vibe-headless/references/portfolio/INSTRUCTIONS.md +4 -13
  59. package/skills/wix-vibe-headless/references/portfolio/app/components/ProjectMedia.jsx +1 -1
  60. package/skills/wix-vibe-headless/references/portfolio/seed/SEED.md +3 -7
  61. package/skills/wix-vibe-headless/references/portfolio/seed/{seed-portfolio.js → seed-portfolio.cjs} +2 -2
  62. package/skills/wix-vibe-headless/references/pricing-plans/INSTRUCTIONS.md +5 -14
  63. package/skills/wix-vibe-headless/references/pricing-plans/app/components/OrderCard.jsx +1 -1
  64. package/skills/wix-vibe-headless/references/pricing-plans/seed/SEED.md +3 -7
  65. package/skills/wix-vibe-headless/references/pricing-plans/seed/{seed-pricing-plans.js → seed-pricing-plans.cjs} +2 -2
  66. package/skills/wix-vibe-headless/references/restaurants/INSTRUCTIONS.md +5 -15
  67. package/skills/wix-vibe-headless/references/restaurants/seed/SEED.md +3 -7
  68. package/skills/wix-vibe-headless/references/restaurants/seed/{seed-restaurants.js → seed-restaurants.cjs} +2 -2
  69. package/skills/wix-vibe-headless/references/storefront/INSTRUCTIONS.md +359 -327
  70. package/skills/wix-vibe-headless/references/storefront/app/context/CartContext.jsx +1 -0
  71. package/skills/wix-vibe-headless/references/storefront/app/hooks/useProductDetail.js +2 -2
  72. package/skills/wix-vibe-headless/references/storefront/app/hooks/useShop.js +63 -78
  73. package/skills/wix-vibe-headless/references/storefront/app/rest/wix-store-catalog.js +59 -43
  74. package/skills/wix-vibe-headless/references/storefront/seed/SEED.md +46 -10
  75. package/skills/wix-vibe-headless/references/storefront/seed/{seed-store.js → seed-store.cjs} +163 -25
  76. package/skills/wix-vibe-headless/references/storefront/app/pages/Shop.jsx +0 -75
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/agent-skills",
3
- "version": "1.18.0",
3
+ "version": "1.18.2",
4
4
  "description": "Wix Skills for AI coding agents — versioned npm distribution of the wix/skills content.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -117,7 +117,7 @@ Patterns owns the page shell and everything collection-shaped. These concepts ar
117
117
  | Filters, search, sorting, view presets/tabs | the collection's filter and view APIs |
118
118
  | Row actions, bulk actions, drag-and-drop | the collection's feature APIs |
119
119
  | Multiple pages inside one extension | `PatternsReactRouter`, `PatternsReactRoute`, `usePatternsNavigate` |
120
- | **Add / edit / view one item from a collection** | `EntityPage` + `useEntityPage` (fetch + save + validation), reached with `usePatternsNavigate().navigateToEntityPage`. Form state via `useForm` / `useController` from `@wix/patterns/form`. **Not** a dashboard modal — see [Entity create and edit](#entity-create-and-edit) |
120
+ | **Add / edit / view one item from a collection** | `EntityPage` + `useEntityPage` (fetch + save + validation), reached with `usePatternsNavigate().navigateToEntityPage`. Form state via `useForm` / `useController` from `@wix/patterns/form` (`useController`, never `register`). **Not** a dashboard modal — see [Entity create and edit](#entity-create-and-edit) |
121
121
  | Overlays tied to a collection (item picker, bulk-action confirm) | `PickerModal` / `usePickerModal`, `bulkActionModal` |
122
122
 
123
123
  **Looking a component up is two direct file reads** — no script, never `node_modules` browsed by hand. Resolve the installed package root once per session ([Prerequisites](references/WIX_PATTERNS_DOCS.md#prerequisites)), then reuse it. Start with what exists:
@@ -163,7 +163,7 @@ This is the most common place the selection order gets dropped: the collection g
163
163
 
164
164
  The documented flow:
165
165
 
166
- 1. From the collection page's action cell or primary action, call `navigateToEntityPage({ path, entity })` from `usePatternsNavigate()`. (The patterns docs give this exact use case — "navigate to an entity page on an action cell click on a collection page" — and it renders the entity header immediately, before the fetch resolves.)
166
+ 1. From the collection page's action cell or primary action, call `navigateToEntityPage({ path, entity })` from `usePatternsNavigate()`. (The patterns docs give this exact use case — "navigate to an entity page on an action cell click on a collection page" — and it renders the entity header immediately, before the fetch resolves.) On the **create** route there is no record to pass: omit `entity` and see [ENTITY_PAGE_TOOLKIT.md § Create route](references/dashboard-page/ENTITY_PAGE_TOOLKIT.md#create-route), which is what the whole "add new" flow turns on.
167
167
  2. Register the route with `PatternsReactRoute` inside `PatternsReactRouter`.
168
168
  3. In the entity page, `useEntityPage({ fetch, onSave })` owns fetching, saving, validation, dirty state, loading skeletons, and error states. Form state comes from `useForm` / `useController` in `@wix/patterns/form`. The call itself — both generics, what `onSave` receives, which params exist — is in [ENTITY_PAGE_TOOLKIT.md](references/dashboard-page/ENTITY_PAGE_TOOLKIT.md).
169
169
  4. Compose the body from `EntityPage.Header`, `EntityPage.MainContent`, `EntityPage.AdditionalContent`, and `EntityPage.Card`. **WDS goes inside those cards** — `FormField`, `Input`, `Text` for the individual fields.
@@ -443,7 +443,7 @@ Open every path returned in `newFiles` and replace stubbed handler bodies / UI /
443
443
  After all implementation is complete, you MUST run validation. See [APP_VALIDATION.md](references/APP_VALIDATION.md) for the complete validation workflow:
444
444
 
445
445
  1. Package installation (detect package manager, run install)
446
- 2. TypeScript compilation check (`npx tsc --noEmit`)
446
+ 2. TypeScript compilation check (`npx tsc --noEmit -p .`)
447
447
  3. Build validation (`npx wix build`)
448
448
  4. Preview deployment (`npx wix preview`)
449
449
 
@@ -506,7 +506,7 @@ The following actions need to be done manually by you:
506
506
  Execute these steps sequentially after all implementation is complete. See [APP_VALIDATION.md](references/APP_VALIDATION.md) for the complete guide.
507
507
 
508
508
  1. **Package Installation** — Detect package manager, run install
509
- 2. **TypeScript Compilation** — `npx tsc --noEmit`
509
+ 2. **TypeScript Compilation** — `npx tsc --noEmit -p .`
510
510
  3. **Build** — `npx wix build`
511
511
  4. **Preview** — `npx wix preview`
512
512
 
@@ -46,41 +46,15 @@ pnpm install
46
46
 
47
47
  Run TypeScript compiler to check for type errors.
48
48
 
49
- **Full project check:**
50
49
  ```bash
51
- npx tsc --noEmit
50
+ npx tsc --noEmit -p .
52
51
  ```
53
52
 
54
- **Targeted check (specific files/directories):**
55
-
56
- When validating after implementing a specific extension, you can run TypeScript checks on just those files:
57
-
58
- ```bash
59
- # Check specific directory
60
- npx tsc --noEmit src/extensions/dashboard/pages/survey/**/*.ts src/extensions/dashboard/pages/survey/**/*.tsx
61
-
62
- # Check dashboard pages only
63
- npx tsc --noEmit src/extensions/dashboard/pages/**/*.ts src/extensions/dashboard/pages/**/*.tsx
64
-
65
- # Check custom element widgets only
66
- npx tsc --noEmit src/extensions/site/widgets/**/*.ts src/extensions/site/widgets/**/*.tsx
67
-
68
- # Check dashboard modals only
69
- npx tsc --noEmit src/extensions/dashboard/modals/**/*.ts src/extensions/dashboard/modals/**/*.tsx
70
-
71
- # Check backend only
72
- npx tsc --noEmit src/extensions/backend/**/*.ts
73
- ```
74
-
75
- **When to use targeted checks:**
76
- - After implementing a single extension (faster feedback)
77
- - When debugging type errors in a specific area
78
- - During iterative development
79
-
80
- **When to use full project check:**
81
- - Before final validation
82
- - When changes affect shared types
83
- - Before building/deploying
53
+ Run it from the app root, and check the whole project rather than just the files you
54
+ generated — a type error in generated code usually surfaces in the file that consumes
55
+ it. `-p .` is what holds that line: adding a file path to it is an error, whereas adding
56
+ one to a bare `npx tsc --noEmit` silently discards `tsconfig.json` (`strict`, `paths`,
57
+ `jsx`) and checks against compiler defaults instead.
84
58
 
85
59
  **Success criteria:**
86
60
  - Exit code 0
@@ -162,7 +136,7 @@ Read: .wix/debug.log (with offset to the end)
162
136
  | Issue | Cause | Solution |
163
137
  |-------|-------|----------|
164
138
  | Package installation fails | Missing lock file, network issues, or corrupted node_modules | Delete `node_modules` and lock file, then reinstall |
165
- | TypeScript compilation fails | Type mismatches, missing declarations, or incorrect types | Fix TypeScript errors shown in `npx tsc --noEmit` output |
139
+ | TypeScript compilation fails | Type mismatches, missing declarations, or incorrect types | Fix TypeScript errors shown in `npx tsc --noEmit -p .` output |
166
140
  | Build fails | TypeScript errors, missing dependencies, or internal CLI error | Fix TypeScript errors in source; for non-obvious failures, check `.wix/debug.log` |
167
141
  | Preview fails to start | Port conflict, config issue, or internal CLI error | Check `wix.config.json`; if unclear, check `.wix/debug.log` for details |
168
142
  | Console errors in preview | Runtime exceptions | Check browser console output |
@@ -1,10 +1,10 @@
1
1
  # Wix Dashboard Page Builder
2
2
 
3
- Dashboard pages appear in the site owner's Wix dashboard, where administrators manage data, configure settings, and perform admin tasks.
3
+ Dashboard pages appear in the site owner's Wix dashboard, where admins manage data and configure settings.
4
4
 
5
5
  ## Plan the Workflow Before the Components
6
6
 
7
- A dashboard page is a workflow, not a screen. The site owner has to understand the situation, focus on what needs attention, investigate one record, act, and see the result confirmed — so translate the prompt into those needs before choosing any component: which view fits, which drill-in surface, which data sources have to line up.
7
+ A dashboard page is a workflow, not a screen. The site owner has to understand the situation, focus on what needs attention, investigate one record, act, and see the result confirmed — so translate the prompt into those needs before choosing any component.
8
8
 
9
9
  Do this first because a bare filtered table answers "what are all the records" and none of "how many", "which one needs my attention", or "why did this happen" — and a table is what you get by default if the workflow was never named. Read [UX Success Model](dashboard-page/UX_SUCCESS_MODEL.md) now, and run its evaluation checklist before calling the page done. Which component serves each need: [Collection Toolkit](dashboard-page/COLLECTION_TOOLKIT.md).
10
10
 
@@ -33,7 +33,9 @@ wix generate --params '{"extensionType":"DASHBOARD_PAGE","title":"<title>","rout
33
33
 
34
34
  The CLI generates the folder, `page.tsx`, the builder file, the UUID, and the `src/extensions.ts` registration. After scaffolding, implement the page UI in the generated `page.tsx`.
35
35
 
36
- **Then, before writing UI:** resolve the package root and `Read <pkgRoot>/dist/dts-bundle/index.json` once, per [Prerequisites](WIX_PATTERNS_DOCS.md#prerequisites). Each Bash call is a fresh shell, so if you keep the path in a variable, set it again in every call.
36
+ **Never reuse `<route>` as a path prefix inside this page's `PatternsReactRouter`** — its location is already page-scoped, so a page scaffolded `route: "shifts"` still routes from `path="/"`, and `path="/shifts"` silently never matches. Page-relative paths: [Entity Page Toolkit](dashboard-page/ENTITY_PAGE_TOOLKIT.md).
37
+
38
+ **Then, before writing UI:** resolve the package root and `Read <pkgRoot>/dist/dts-bundle/index.json` once, per [Prerequisites](WIX_PATTERNS_DOCS.md#prerequisites). Each Bash call is a fresh shell — re-set the path variable in every call.
37
39
 
38
40
  ## Capabilities
39
41
 
@@ -41,7 +43,7 @@ A dashboard page runs as the **Wix user** — see [Identity and Elevation Requir
41
43
 
42
44
  ### Data Operations (Wix Data SDK)
43
45
 
44
- See [Wix Data Reference](data-collection/WIX_DATA.md) in the Data Collection reference for complete documentation.
46
+ See [Wix Data Reference](data-collection/WIX_DATA.md).
45
47
 
46
48
  - Read: `items.query('Collection').filter/sort.limit.find()` → `{ items, totalCount, hasNext }`
47
49
  - Write: `items.insert | update | remove`. Ensure collection permissions allow the action
@@ -50,7 +52,7 @@ See [Wix Data Reference](data-collection/WIX_DATA.md) in the Data Collection ref
50
52
 
51
53
  ### Dashboard APIs
52
54
 
53
- See [Dashboard API Reference](dashboard-page/DASHBOARD_API.md) for complete documentation including all methods, page IDs, and examples.
55
+ See [Dashboard API Reference](dashboard-page/DASHBOARD_API.md) for all methods, page IDs, and examples.
54
56
 
55
57
  **Key methods**, all on the `dashboard` object from `@wix/dashboard` (signatures, page IDs, and examples in the reference above):
56
58
 
@@ -62,13 +64,15 @@ See [Dashboard API Reference](dashboard-page/DASHBOARD_API.md) for complete docu
62
64
 
63
65
  **CRITICAL: Using Modals in Dashboard Pages**
64
66
 
65
- Dashboard Pages cannot use `<Modal />`. For a true dialog overlay you **MUST** use a dashboard modal extension — never a React modal, never the WDS `Modal` component. Reserve it for dialogs that neither write nor display a record this app lists (delete/discard confirmations, unsaved-changes prompts, informational notices), plus any dialog on a page that lists nothing (settings, config). They open via `dashboard.openModal()`, which integrates them with the dashboard lifecycle, state management, and navigation — implementation guide: [Dashboard Modal reference](DASHBOARD_MODAL.md).
67
+ Dashboard Pages cannot use `<Modal />`. For a true dialog overlay you **MUST** use a dashboard modal extension — never a React modal or the WDS `Modal` component. Reserve it for dialogs that neither write nor display a listed record (delete/discard confirmations, unsaved-changes prompts, notices), plus any dialog on a page that lists nothing (settings, config). They open via `dashboard.openModal()` — see [Dashboard Modal reference](DASHBOARD_MODAL.md).
66
68
 
67
- > **🛑 The test — does the dialog create, update, or display one record this page lists?** If yes, it is an `EntityPage`, not a modal — whether those records come from a CMS collection or an existing Wix app's SDK. **A create / "add new" form is included**: it writes the record, so it is an `EntityPage` even though nothing is being edited yet. "It's a simple data-entry dialog, not an entity edit" is the wrong reading, and it is the single most common way the patterns-first rule gets dropped after the table is already correct.
69
+ > **🛑 The test — does the dialog create, update, or display one record this page lists?** If yes, it is an `EntityPage`, not a modal — whether those records come from a CMS collection or an existing Wix app's SDK. **A create / "add new" form is included**: it writes the record, so it is an `EntityPage` even though nothing is being edited yet. "It's a simple data-entry dialog, not an entity edit" is the wrong reading — the most common way the patterns-first rule gets dropped after the table is already correct.
70
+ >
71
+ > The `EntityPage` comes from `@wix/patterns`, reached via `usePatternsNavigate().navigateToEntityPage`, with `useEntityPage` owning fetch/save/validation and `@wix/patterns/form` owning form state. Its route is registered with `PatternsReactRoute` inside `PatternsReactRouter` — so do not hand-roll page location state to fake a second view (`useState<PageLocation>` as a stand-in for a route); that is the router's job, and needing it is the signal you skipped one.
68
72
  >
69
- > The `EntityPage` comes from `@wix/patterns`, reached via `usePatternsNavigate().navigateToEntityPage`, with `useEntityPage` owning fetch/save/validation and `@wix/patterns/form` owning form state. Its route is registered with `PatternsReactRoute` inside `PatternsReactRouter` — so do not hand-roll page location state to fake a second view (`useState<PageLocation>`, a `location` cast on `withDashboard`); that is the router's job, and needing the cast is the signal you skipped it.
73
+ > That's not a rule against `withDashboard`: the router **requires** it above itself and a `location` prop, which the page gets from `dashboard.observeState` (a Wix CLI app passes no props to dashboard pages). Skip it and `PatternsReactRouter` throws at open, though typecheck, bundling, and `wix preview` all pass. Read `<pkgRoot>/dist/docs/withDashboard.md` (ships from 1.465.0; on older installs, `PatternsReactRouter.md`'s **Requirements**).
70
74
  >
71
- > **If this page lists nothing** — a settings page, an embedded-script config page — the rule does not apply and a dashboard modal is a normal choice. But "I built the list without `@wix/patterns`" is not an exception: a page that lists records should be a `CollectionPage`.
75
+ > **If this page lists nothing** (settings, config) the rule doesn't apply. But "I built the list without `@wix/patterns`" is not an exception: a page that lists records should be a `CollectionPage`.
72
76
  >
73
77
  > See [Entity create and edit](../SKILL.md#entity-create-and-edit) and [WIX_PATTERNS_DOCS.md](WIX_PATTERNS_DOCS.md); for the `useEntityPage` call itself, [Entity Page Toolkit](dashboard-page/ENTITY_PAGE_TOOLKIT.md).
74
78
 
@@ -76,7 +80,7 @@ Dashboard Pages cannot use `<Modal />`. For a true dialog overlay you **MUST** u
76
80
 
77
81
  ### Embedded Script Configuration API
78
82
 
79
- When building a dashboard page to configure an embedded script, see [Dynamic Parameters Reference](dashboard-page/DYNAMIC_PARAMETERS.md) for the implementation guide.
83
+ When building a dashboard page to configure an embedded script, see [Dynamic Parameters Reference](dashboard-page/DYNAMIC_PARAMETERS.md).
80
84
 
81
85
  **Key points:**
82
86
 
@@ -92,7 +96,7 @@ Each output below names the library that owns each part. Confirm every patterns
92
96
 
93
97
  **Request:** "Create a dashboard page to manage blog posts"
94
98
 
95
- **Output:** A `@wix/patterns` `CollectionPage` shell wrapping a `Table` driven by a collection state hook (`useTableCollection`), with the search, add/edit/delete row actions, and empty state supplied by the collection's own APIs. Add and edit navigate to an `EntityPage` (`navigateToEntityPage` + `useEntityPage`). WDS only for the leaf UI inside cells and the fields inside the entity page's cards. The provider lives in a parent component, in a separate file from the hook call.
99
+ **Output:** A `@wix/patterns` `CollectionPage` wrapping a `Table` driven by `useTableCollection`, with search, row actions, and empty state from the collection's own APIs. Add and edit navigate to an `EntityPage`. WDS only for leaf UI inside cells and entity-page cards; the provider sits in a parent component, in its own file.
96
100
 
97
101
  ### Settings Form
98
102
 
@@ -104,13 +108,13 @@ Each output below names the library that owns each part. Confirm every patterns
104
108
 
105
109
  **Request:** "Create an admin panel for customer orders"
106
110
 
107
- **Output:** A `@wix/patterns` `CollectionPage` + `Table`, with filters, sorting, and row actions from the collection APIs — **not** a hand-built WDS filter bar. Status badges are WDS leaf UI inside a cell. Viewing or editing an order opens an `EntityPage` via `usePatternsNavigate().navigateToEntityPage` — not a modal (see [Entity create and edit](../SKILL.md#entity-create-and-edit)). A Dashboard Modal appears only for the delete confirmation.
111
+ **Output:** A `@wix/patterns` `CollectionPage` + `Table`, with filters, sorting, and row actions from the collection APIs — **not** a hand-built WDS filter bar. Status badges are WDS leaf UI in a cell. Viewing or editing an order opens an `EntityPage` via `navigateToEntityPage`, not a modal; a Dashboard Modal appears only for the delete confirmation.
108
112
 
109
113
  ### Embedded Script Configuration
110
114
 
111
115
  **Request:** "Create a settings page for the coupon popup embedded script"
112
116
 
113
- **Output:** A `@wix/patterns` `SettingsPage` shell with WDS form fields for popup headline, coupon code, minimum cart value, and enable toggle. `embeddedScripts.getEmbeddedScript()` loads the parameters on mount and `embeddedScripts.embedScript()` saves them back — both sides string-converted, per [Dynamic Parameters](dashboard-page/DYNAMIC_PARAMETERS.md).
117
+ **Output:** A `@wix/patterns` `SettingsPage` with WDS form fields (popup headline, coupon code, minimum cart value, enable toggle). `embeddedScripts.getEmbeddedScript()` loads the parameters on mount, `embeddedScripts.embedScript()` saves them back — both sides string-converted, per [Dynamic Parameters](dashboard-page/DYNAMIC_PARAMETERS.md).
114
118
 
115
119
 
116
120
  ## API Spec Support
@@ -122,4 +126,4 @@ When an API specification is provided, you can call those endpoints — see [API
122
126
 
123
127
  Content layout inside the page shell — the 6px base unit, the 12-column grid, spacing tokens, form/display/marketing/wizard layouts: see [WDS Layout Reference](dashboard-page/WDS_LAYOUT.md).
124
128
 
125
- Remember the split: `@wix/patterns` owns the page shell and anything collection-shaped; that reference covers only the content you place inside it.
129
+ Remember the split: `@wix/patterns` owns the shell and anything collection-shaped; that reference covers only content placed inside.
@@ -1,32 +1,26 @@
1
1
  # Wix Editor React Component Builder
2
2
 
3
- Build Editor React Components for Harmony Editor and Studio2 in Wix CLI
4
- applications. These components are not supported in other Wix editors.
5
-
6
- ## Before You Start
7
-
8
- Determine whether the request creates a component or edits an existing one.
9
- Inspect the existing component before changing it.
3
+ Build Editor React Components for Harmony/Studio2 Wix CLI apps only. First
4
+ determine **create vs edit**; for edits, inspect the existing component and
5
+ never re-scaffold.
10
6
 
11
7
  ## File Contract
12
8
 
13
9
  Use the Wix CLI scaffold as the source of truth. Do not replace it with a custom
14
- layout or a hand-written manifest. After applying this workflow, preserve these
15
- file responsibilities:
10
+ layout or a hand-written manifest. Preserve these file responsibilities:
16
11
 
17
12
  | File | Ownership | Purpose |
18
13
  | --- | --- | --- |
19
- | `<component-name>.props.ts` | Edit | Export the props type and `defaultProps` from one shared source. |
20
- | `<component-name>.tsx` | Edit | Implement the component UI and behavior. |
21
- | `<component-name>.module.css` | Edit | Define scoped component styles. |
22
- | `component.tsx` | Keep generated | Wire the component and `defaultProps` with `withDefaults`. |
23
- | `component.preview.tsx` | Edit narrowly | Keep generated wrappers; sync the preview adapter, one crucial data field, and root class. |
24
- | `<component-name>.generated.ts` | NEVER edit | Generated manifest consumed by the editor. |
25
- | `<component-name>.extension.ts` | Edit narrowly | Apply supported partial manifest overrides. |
26
-
27
- Supplementary files such as `constants.ts`, hooks, or internal sub-components
28
- are allowed when the implementation needs them. Keep the scaffolded files and
29
- their responsibilities intact.
14
+ | `<component-name>.props.ts` | Edit | Props type + `defaultProps` |
15
+ | `<component-name>.tsx` | Edit | Component UI and behavior |
16
+ | `<component-name>.module.css` | Edit | Scoped component styles |
17
+ | `component.tsx` | Keep generated | Wire component and `defaultProps` with `withDefaults` |
18
+ | `component.preview.tsx` | Edit narrowly | Sync preview adapter, one crucial data field, root class |
19
+ | `<component-name>.generated.ts` | NEVER edit | Generated manifest — do not edit |
20
+ | `<component-name>.extension.ts` | Edit narrowly | Supported partial manifest overrides |
21
+
22
+ Supplementary files (constants, hooks, sub-components) are allowed; keep scaffold
23
+ roles intact.
30
24
 
31
25
  ## Workflow
32
26
 
@@ -36,9 +30,8 @@ their responsibilities intact.
36
30
  npx wix generate --params '{"extensionType":"EDITOR_REACT_COMPONENT","name":"ComponentName","folder":"component-name","description":"A brief description"}'
37
31
  ```
38
32
 
39
- The command creates `src/extensions/site/components/<component-name>/` and
40
- registers the extension in `src/extensions.ts`. Do not rerun it for an
41
- existing component.
33
+ Creates `src/extensions/site/components/<component-name>/` and registers the
34
+ extension in `src/extensions.ts`. Do not rerun for an existing component.
42
35
 
43
36
  2. **Run the dependency preflight.** Verify that all component creation and
44
37
  accessibility-review dependencies are installed:
@@ -47,25 +40,23 @@ their responsibilities intact.
47
40
  node -e "const fs=require('fs'),path=require('path'),ps=['@wix/react-component-schema','@wix/react-component-utils','@wix/editor-react-types','@babel/parser','@babel/traverse','@babel/types','eslint','eslint-plugin-jsx-a11y','@typescript-eslint/parser','typescript','@types/eslint-plugin-jsx-a11y'];const missing=ps.filter(p=>!(require.resolve.paths(p)||[]).some(d=>fs.existsSync(path.join(d,p,'package.json'))));if(missing.length){console.error('Missing dependencies: '+missing.join(', '));process.exit(1)}" || { d="$PWD"; while [ "$d" != "/" ] && [ ! -f "$d/yarn.lock" ]; do d="${d%/*}"; done; if [ -f "$d/yarn.lock" ]; then yarn add @wix/react-component-schema @wix/react-component-utils @wix/editor-react-types && yarn add -D @babel/parser @babel/traverse @babel/types eslint eslint-plugin-jsx-a11y @typescript-eslint/parser 'typescript@<7' @types/eslint-plugin-jsx-a11y; else npm install @wix/react-component-schema @wix/react-component-utils @wix/editor-react-types && npm install --save-dev @babel/parser @babel/traverse @babel/types eslint eslint-plugin-jsx-a11y @typescript-eslint/parser 'typescript@<7' @types/eslint-plugin-jsx-a11y; fi; }
48
41
  ```
49
42
 
50
- 3. **Plan the contract and structure.** Identify content and behavior props,
51
- elect the semantic root, identify named inner parts, and decide which design
52
- states each part supports. Read the relevant references from the routing
53
- table below before writing code.
43
+ 3. **Plan the contract and structure.** Identify props, semantic root, named
44
+ parts, and design states; read routed references below before writing code.
54
45
 
55
- 4. **Implement the editable sources.** Preserve the scaffold contract. Keep
56
- props/defaults in the props file, component logic in the main TSX file, and
57
- static styling in the CSS Module. Do not edit `*.generated.ts`.
46
+ 4. **Implement the editable sources.** Preserve the scaffold contract: props in
47
+ the props file, logic in TSX, styles in the CSS Module. Do not edit
48
+ `*.generated.ts`.
58
49
 
59
50
  5. **Run the accessibility review.** Follow
60
- [`editor-react-component/ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md): run both bundled
61
- scanners, triage their output, complete the manual semantic checklist, fix
62
- confirmed issues, and rerun the scanners on changed JSX files.
51
+ [`editor-react-component/ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md): run scanners,
52
+ triage output, complete the manual checklist, fix issues, rerun on changed
53
+ JSX.
63
54
 
64
55
  6. **Configure the editor extension when required.** For a new component or a
65
56
  requested sizing, installation, or manifest change, apply
66
57
  [`editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md`](editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md)
67
58
  to `<component-name>.extension.ts`. Otherwise leave the file unchanged.
68
- Finally, synchronize `requiredDataFields` and `rootClassName` in
59
+ Synchronize `requiredDataFields` and `rootClassName` in
69
60
  `component.preview.tsx`.
70
61
 
71
62
  7. **Generate and validate.** Run:
@@ -75,82 +66,74 @@ their responsibilities intact.
75
66
  npx tsc --noEmit
76
67
  ```
77
68
 
78
- Run relevant project tests and lint commands when available. Inspect the
79
- regenerated manifest; never repair it by hand. Design-state generation needs
80
- `@wix/cli` 1.1.210 or newer, and prop-triggered `ElementState` generation
81
- needs 1.1.215 or newer. If expected states are absent on an older CLI, report
82
- the version constraint and let the user decide whether to upgrade. If the
83
- build or manifest command exits with an error, diagnose it with
84
- [`editor-react-component/MANIFEST-ERRORS.md`](editor-react-component/MANIFEST-ERRORS.md), apply the
85
- matching fix, and rerun both commands.
69
+ Run relevant tests and lint when available. Inspect the regenerated manifest;
70
+ never repair it by hand. On failure, diagnose with
71
+ [`editor-react-component/MANIFEST-ERRORS.md`](editor-react-component/MANIFEST-ERRORS.md).
86
72
 
87
73
  8. **Report the result.** Summarize edited files and checks. Call out any
88
- unresolved instruction conflict, missing dependency, unsupported CLI
89
- version, or check that could not run.
74
+ unresolved conflict, missing dependency, unsupported CLI version, or check
75
+ that could not run.
90
76
 
91
77
  ## Reference Policy
92
78
 
93
- Read every reference required for the current scope. Read an optional reference
94
- only when its trigger applies; when it does, that reference becomes required.
95
- Apply every matching row; do not load the entire reference set by default.
79
+ - Read **only** matching required + triggered optional rows; optional triggers
80
+ become required when they match.
81
+ - References refine the active step; they do not restart workflow or expand scope.
82
+ - Never re-scaffold an existing component or edit `*.generated.ts`.
96
83
 
97
- References refine the active workflow step; they do not restart the workflow or
98
- expand the user's requested scope. `SKILL.md` is the only reference router;
99
- reference files are self-contained leaves and do not route to other references.
100
- For an existing component, preserve out-of-scope public props, styling,
101
- extension configuration, and supporting files. Never re-scaffold an existing
102
- component or edit `*.generated.ts` as a reference-driven fix.
84
+ `SKILL.md` is the only reference router; reference files are self-contained
85
+ leaves. For existing components, preserve out-of-scope public props, styling,
86
+ extension configuration, and supporting files.
103
87
 
104
88
  ### Required References
105
89
 
106
90
  | Scope | Required references |
107
91
  | --- | --- |
108
- | Creating a component | [`REACT-GUIDELINES.md`](editor-react-component/REACT-GUIDELINES.md), [`COMPONENT-CONTRACT.md`](editor-react-component/COMPONENT-CONTRACT.md), [`PARTS.md`](editor-react-component/PARTS.md), [`PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md), [`CSS-GUIDELINES.md`](editor-react-component/CSS-GUIDELINES.md), [`DIRECTIONALITY.md`](editor-react-component/DIRECTIONALITY.md), [`ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md), [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md), and [`EDITOR-EXTENSION-CONFIGURATION.md`](editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md) |
109
- | Editing React or JSX | [`REACT-GUIDELINES.md`](editor-react-component/REACT-GUIDELINES.md) and [`ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md) |
110
- | Changing the public contract, semantic root, or named parts | [`COMPONENT-CONTRACT.md`](editor-react-component/COMPONENT-CONTRACT.md), [`PARTS.md`](editor-react-component/PARTS.md), and [`PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md) |
111
- | Changing public data props or the elected root global class | [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md) |
112
- | Creating or changing an item array where only one body is visible | [`COMPONENT-CONTRACT.md`](editor-react-component/COMPONENT-CONTRACT.md), [`PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md), [`ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md), and [`DESIGN-STATES.md`](editor-react-component/DESIGN-STATES.md) |
92
+ | Creating a component | [`REACT-GUIDELINES.md`](editor-react-component/REACT-GUIDELINES.md), [`COMPONENT-CONTRACT.md`](editor-react-component/COMPONENT-CONTRACT.md), [`PARTS.md`](editor-react-component/PARTS.md), [`PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md), [`CSS-GUIDELINES.md`](editor-react-component/CSS-GUIDELINES.md), [`DIRECTIONALITY.md`](editor-react-component/DIRECTIONALITY.md), [`ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md), [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md), [`EDITOR-EXTENSION-CONFIGURATION.md`](editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md) |
93
+ | Editing React or JSX | [`REACT-GUIDELINES.md`](editor-react-component/REACT-GUIDELINES.md), [`ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md) |
94
+ | Changing public contract, semantic root, or named parts | [`COMPONENT-CONTRACT.md`](editor-react-component/COMPONENT-CONTRACT.md), [`PARTS.md`](editor-react-component/PARTS.md), [`PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md) |
95
+ | Changing public data props or elected root global class | [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md) |
96
+ | Item array where only one body is visible | [`COMPONENT-CONTRACT.md`](editor-react-component/COMPONENT-CONTRACT.md), [`PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md), [`ACCESSIBILITY.md`](editor-react-component/ACCESSIBILITY.md), [`DESIGN-STATES.md`](editor-react-component/DESIGN-STATES.md) |
113
97
  | Creating or changing CSS | [`CSS-GUIDELINES.md`](editor-react-component/CSS-GUIDELINES.md) |
114
- | Changing the root direction contract, direction-sensitive behavior, or a `ReactNode` slot | [`DIRECTIONALITY.md`](editor-react-component/DIRECTIONALITY.md) |
115
- | Changing sizing, installation, or manifest overrides | [`EDITOR-EXTENSION-CONFIGURATION.md`](editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md) |
98
+ | Root direction contract, direction-sensitive behavior, or `ReactNode` slot | [`DIRECTIONALITY.md`](editor-react-component/DIRECTIONALITY.md) |
99
+ | Sizing, installation, or manifest overrides | [`EDITOR-EXTENSION-CONFIGURATION.md`](editor-react-component/EDITOR-EXTENSION-CONFIGURATION.md) |
116
100
 
117
101
  ### Optional References
118
102
 
119
103
  | Trigger | Read |
120
104
  | --- | --- |
121
- | An interactive or selectable part is created or changed—for example a button, link, input, tab, accordion trigger, or carousel control—or a custom state is added | [`DESIGN-STATES.md`](editor-react-component/DESIGN-STATES.md) |
122
- | Public event callbacks are added or changed | [`FUNCTION-HANDLERS.md`](editor-react-component/FUNCTION-HANDLERS.md) |
123
- | Browser APIs, effects, or time-dependent output are introduced | [`SSR.md`](editor-react-component/SSR.md) |
124
- | A CSS feature or DOM API that is not clearly long-established is introduced, or the user asks for one by name | [`BROWSER-SUPPORT.md`](editor-react-component/BROWSER-SUPPORT.md) |
105
+ | Interactive/selectable part or custom state | [`DESIGN-STATES.md`](editor-react-component/DESIGN-STATES.md) |
106
+ | Public event callbacks added or changed | [`FUNCTION-HANDLERS.md`](editor-react-component/FUNCTION-HANDLERS.md) |
107
+ | Browser APIs, effects, or time-dependent output | [`SSR.md`](editor-react-component/SSR.md) |
108
+ | Non-established CSS feature or DOM API, or user asks for one by name | [`BROWSER-SUPPORT.md`](editor-react-component/BROWSER-SUPPORT.md) |
125
109
  | `npx wix build` or manifest generation exits with an error | [`MANIFEST-ERRORS.md`](editor-react-component/MANIFEST-ERRORS.md) |
126
- | Primary content is playable, looped, or autoplaying | [`ANIMATED-COMPONENTS.md`](editor-react-component/ANIMATED-COMPONENTS.md) and [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md) |
127
- | Runtime site pages, URLs, JavaScript direction, or reduced-motion context is needed | [`SITE-CONTEXT-HOOKS.md`](editor-react-component/SITE-CONTEXT-HOOKS.md) |
128
- | Non-animation behavior must differ in editor design mode | [`SITE-CONTEXT-HOOKS.md`](editor-react-component/SITE-CONTEXT-HOOKS.md) and [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md) |
129
- | The prompt explicitly requests a branded, themed, or brand-aware component | [`BRANDED-COMPONENTS.md`](editor-react-component/BRANDED-COMPONENTS.md) |
110
+ | Animation, video, carousel, or other playable/looped/autoplaying content | [`ANIMATED-COMPONENTS.md`](editor-react-component/ANIMATED-COMPONENTS.md), [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md) |
111
+ | Site/runtime/editor context hooks needed | [`SITE-CONTEXT-HOOKS.md`](editor-react-component/SITE-CONTEXT-HOOKS.md) (+ [`COMPONENT-PREVIEW.md`](editor-react-component/COMPONENT-PREVIEW.md) when design-mode behavior differs) |
112
+ | Branded, themed, or brand-aware component requested | [`BRANDED-COMPONENTS.md`](editor-react-component/BRANDED-COMPONENTS.md) |
130
113
 
131
- ## Core Invariants
114
+ ## Non-Negotiables
132
115
 
133
- - Use React 18-compatible APIs; do not assume React 19 runtime features.
116
+ - React 18 only; do not assume React 19 runtime features.
134
117
  - Include typed `id`, `className`, `direction`, and `a11y` support.
135
- - Apply `dir={direction}` and the unconditional fallback-direction class to the
136
- elected root. Use logical CSS properties for direction-sensitive layout.
137
- - Keep render output deterministic and avoid browser globals during render.
138
- - Use only Baseline Widely Available CSS features and DOM APIs, or ones that
139
- fall back to them. When a design needs a feature that is not, build the
140
- supported alternative.
141
- - Route ARIA through the typed `a11y` contract; do not add one-off ARIA props.
142
- - Give every named inner part a global class, a CSS Module class, and a matching
143
- `elementProps` entry. The elected root uses top-level props instead.
144
- - Pair each eligible native editor design-state selector with its
145
- editor-injected global modifier. Keep a non-input control's keyboard-only
146
- `:focus-visible` indicator standalone unless editable focus styling is
147
- explicitly requested. Toggle custom global state classes from data.
148
- - For an item array where only one body is visible, give every item a `name`,
149
- use `ActiveItemIndex<'arrayPropName'>`, render every body, and hide inactive
150
- bodies accessibly.
151
- - If primary content autoplays or loops, provide an accessible play/pause
152
- control, honor reduced motion, and suppress autoplay in editor design mode.
153
- - In `component.preview.tsx`, keep `withDefaults` and `withFallbackPlaceholder`,
154
- wrap the preview adapter when present, normally put
155
- only the one data prop crucial to meaningful rendering in
156
- `requiredDataFields`, and match `rootClassName` to the root global class.
118
+ - Elected root: `dir={direction}`, fallback-direction class, logical CSS for
119
+ direction-sensitive layout.
120
+ - Deterministic render; no browser globals during render.
121
+ - Explicit foreground colors need a known contrasting background; transparent
122
+ roots inherit from the host.
123
+ - Baseline Widely Available CSS/DOM only, or supported fallbacks.
124
+ - Route ARIA through `a11y`; no one-off ARIA props.
125
+ - Named parts: global class, module class, and `elementProps` (root uses
126
+ top-level props).
127
+ - Native design states: pair selectors with injected modifiers; keep non-input
128
+ `:focus-visible` standalone unless editable focus is requested; toggle custom
129
+ state classes from data.
130
+ - Single-visible-body arrays: `name` per item, `ActiveItemIndex<'prop'>`, render
131
+ all bodies, hide inactive accessibly.
132
+ - Autoplay/loop: play/pause control, honor reduced motion, suppress autoplay in
133
+ editor design mode.
134
+ - `component.preview.tsx`: preserve this outer-to-inner composition, inline or
135
+ through component variables:
136
+ `withDefaults(withFallbackPlaceholder(PreviewOrComponent, options), defaultProps)`.
137
+ Keep `withDefaults` outermost, wrap the preview adapter when present, use one
138
+ crucial `requiredDataFields` entry, and match `rootClassName` to the root
139
+ global class.
@@ -33,7 +33,7 @@ try {
33
33
  "
34
34
  ```
35
35
 
36
- A bare `require.resolve` without the PnP-activation step throws in a Yarn Berry project even when the package is installed — run the whole snippet, not a shortened version.
36
+ A bare `require.resolve` without the PnP-activation step throws in a Yarn Berry project even when installed — run the whole snippet, not a shortened version.
37
37
 
38
38
  Then confirm the installed version actually ships the bundle index:
39
39
 
@@ -41,9 +41,9 @@ Then confirm the installed version actually ships the bundle index:
41
41
  ls <pkgRoot>/dist/dts-bundle/index.json
42
42
  ```
43
43
 
44
- **If it's missing, stop — do not look elsewhere for types or docs.** The installed `@wix/patterns` predates the index; it ships from **1.458.0** onward, so upgrade to at least that and re-run the check. A missing *file* is not the same as a name not being covered (see below): the mechanism itself isn't available yet.
44
+ **If it's missing, stop — do not look elsewhere for types or docs.** The installed `@wix/patterns` predates the index (ships from **1.458.0**); upgrade and re-run the check. Prefer **1.465.0**+ — the lookups below assume it (`OffsetQuery`, `useEntityPage`'s create route, `withDashboard.md`, a deprecation `status` in `dist/docs/index.json`, page-relative router paths). A missing *file* isn't the same as a name not being covered (see below).
45
45
 
46
- **Never inspect `node_modules` by hand** — no `ls`, no `find`, no `cat` of an arbitrary path, and that includes the sanctioned directories: never browse `dist/dts-bundle/` or `dist/docs/` looking around. Every lookup below names the exact file to `Read` — go straight to it.
46
+ **Never inspect `node_modules` by hand** — no `ls`, `find`, or `cat` of an arbitrary path, not even `dist/dts-bundle/` or `dist/docs/`. Every lookup below names the exact file to `Read` — go straight to it.
47
47
 
48
48
  ## Library Architecture
49
49
 
@@ -75,18 +75,17 @@ Common types only; `dist/dts-bundle/index.json` has the authoritative set. Creat
75
75
  | Provider | When to Use |
76
76
  | --- | --- |
77
77
  | `WixPatternsProvider` | **Default — start here.** Auto-detects the environment (BM, Essentials, Giza). |
78
- | `WixPatternsBMProvider` | Optional alternative for Yoshi BM Flow over Business Manager. |
79
- | `WixPatternsGizaProvider` | Optional alternative for Yoshi BM Flow over Giza. |
78
+ | `WixPatternsBMProvider` / `WixPatternsGizaProvider` | Optional alternatives for Yoshi BM Flow (Business Manager / Giza). |
80
79
  | `WixPatternsEssentialsProvider` | Yoshi Fullstack. |
81
80
  | `WixPatternsBaseProvider` | App does **not** run under Giza/WixEssentials and you inject services (i18n, sentry) yourself. |
82
81
 
83
- **Confirm the import path in the provider's own bundle** — they don't all share a subpath (`WixPatternsEssentialsProvider` and `WixPatternsBaseProvider` are under `@wix/patterns/essentials`). The project's `package.json` identifies the flow.
82
+ **Confirm the import path in the provider's own bundle** — not all share a subpath (`WixPatternsEssentialsProvider`, `WixPatternsBaseProvider` live under `@wix/patterns/essentials`).
84
83
 
85
84
  ### Keep Provider and Page Separate
86
85
 
87
- The provider **must** live in a parent component of the page content: hooks like `useTableCollection` need its context to already exist above them in the React tree.
86
+ The provider **must** be a parent of the page content: hooks like `useTableCollection` need its context above them in the tree.
88
87
 
89
- **Wrong:** calling `useTableCollection` in the same component that renders `WixPatternsProvider`. The hook runs before the provider exists above it, so it throws at runtime — and the JSX nesting looks right, which is what makes this hard to spot.
88
+ **Wrong:** calling `useTableCollection` in the component that renders `WixPatternsProvider` — the hook runs before the provider exists, so it throws at runtime even though the JSX looks right.
90
89
 
91
90
  **Correct — provider in root, page in a separate file:**
92
91
  ```tsx
@@ -102,7 +101,7 @@ function App() {
102
101
  }
103
102
 
104
103
  // MyCollectionPage.tsx
105
- import { Table, useTableCollection } from '@wix/patterns';
104
+ import { Table, useTableCollection, OffsetQuery } from '@wix/patterns';
106
105
  import { CollectionPage } from '@wix/patterns/page';
107
106
 
108
107
  function MyCollectionPage() {
@@ -111,7 +110,7 @@ function MyCollectionPage() {
111
110
  queryName: 'my-items',
112
111
  itemKey: (item) => item.id,
113
112
  itemName: (item) => item.name,
114
- fetchData: async () => ({ items: [], total: 0 }),
113
+ fetchData: async (query: OffsetQuery) => ({ items: [], total: 0 }),
115
114
  filters: {},
116
115
  });
117
116
  return (
@@ -124,7 +123,7 @@ function MyCollectionPage() {
124
123
 
125
124
  Keep the provider (and router, if any) in the app's root component and each page in its own file.
126
125
 
127
- For **multiple pages**, use the `@wix/patterns` routing solution (`PatternsReactRouter`, `PatternsReactRoute`, `usePatternsNavigate`) rather than a separate router; look the doc files up for setup.
126
+ For **multiple pages**, use the `@wix/patterns` routing solution (`PatternsReactRouter`, `PatternsReactRoute`, `usePatternsNavigate`) rather than a separate router. Read `PatternsReactRouter.md` and `withDashboard.md` for setup — the router reads page location from the dashboard context `withDashboard` renders, so it needs that wrapper above it with a `location` prop, and throws at render time without them. (it ships from **1.465.0**; no entry in `dist/docs/index.json` means an older install — use `PatternsReactRouter.md`'s **Requirements**.)
128
127
 
129
128
  ## How to Look Things Up
130
129
 
@@ -132,47 +131,45 @@ For **multiple pages**, use the `@wix/patterns` routing solution (`PatternsReact
132
131
 
133
132
  ### Finding the right name
134
133
 
135
- `Read <pkgRoot>/dist/dts-bundle/index.json` — one entry per name, grouped implicitly by its `category` field. Lookup is **exact-match only**: no fuzzy matching, no typo suggestions. If the exact key isn't there, scan the index you already hold for something close before concluding the name isn't covered.
134
+ `Read <pkgRoot>/dist/dts-bundle/index.json` — one entry per name, grouped implicitly by its `category` field. Lookup is **exact-match only** — no fuzzy matching. If the exact key isn't there, scan the index you already hold for something close before concluding the name isn't covered.
136
135
 
137
- Not every real `@wix/patterns` export is in this index — only the names these guides actually reference. If a name you need genuinely isn't there, **stop and say so rather than falling back to `node_modules`.**
136
+ Not every real export is in this index — only names these guides reference. If a needed name genuinely isn't there, **stop and say so rather than falling back to `node_modules`.**
138
137
 
139
138
  ### Reading doc files
140
139
 
141
- `Read <pkgRoot>/dist/docs/index.json` to resolve a name to its doc file — or a `symbols` alias, for the cases where the Storybook title doesn't match the export (`ExportTo.md` documents `ExportButton`) — then `Read <pkgRoot>/dist/docs/<file>.md` directly, the whole file, not piped through `head`. It covers more names than the bundle index above: it's produced for every documented component, not just the curated ones.
140
+ `Read <pkgRoot>/dist/docs/index.json` to resolve a name to its doc file — or a `symbols` alias, for cases where the Storybook title doesn't match the export (`ExportTo.md` documents `ExportButton`) — then `Read <pkgRoot>/dist/docs/<file>.md` directly, the whole file, not piped through `head`. It covers more names than the bundle index above — every documented component, not just the curated ones.
142
141
 
143
- **Always check the import statement inside the doc** — not everything comes from `@wix/patterns` (some use subpaths like `@wix/patterns/provider`).
142
+ **Always check the import statement inside the doc** — not everything comes from `@wix/patterns` (some use subpaths, e.g. `@wix/patterns/provider`).
143
+
144
+ A doc whose index entry has a `bundle` field does **not** list its props — its `### Props` points at that bundle. One without it carries its own table. Either way the doc owns prose, variations, BI events, and the import line.
144
145
 
145
146
  ### Reading the file the index names
146
147
 
147
- The mechanics of the file an index names — types the docs don't cover, which one-line stubs are answers rather than truncation, subpath entry points, cross-references, split compound-component docs — are in [Reading bundles and docs](dashboard-page/PATTERNS_BUNDLE_READING.md). Read it before your first `dist/dts-bundle/*.d.ts` of the session.
148
+ The mechanics of the file an index names — batching the reads, types docs don't cover, one-line stubs that are answers rather than truncation, subpath entry points, cross-references, split compound docs — are in [Reading bundles and docs](dashboard-page/PATTERNS_BUNDLE_READING.md). Read it before your first `dist/dts-bundle/*.d.ts` of the session.
148
149
 
149
150
  ## The Collection → Entity Flow
150
151
 
151
- A collection page and its item form are **two patterns pages**, not a page plus a modal. Getting the table right and then hand-building the "add item" form as a dashboard modal is the most common way this goes wrong.
152
+ A collection page and its item form are **two patterns pages**, not a page plus a modal. Reserve modals for dialogs that neither write nor display a listed record (a delete or discard confirmation, an unsaved-changes prompt); **a create / "add new" form is not one of them** — it writes the record, so it's an `EntityPage` regardless of size. A page that lists nothing is outside this rule — full test in [SKILL.md](../SKILL.md#entity-create-and-edit).
152
153
 
153
154
  | Step | What owns it |
154
155
  | --- | --- |
155
156
  | Navigate from a row / primary action to the item | `usePatternsNavigate()` → `navigateToEntityPage({ path, entity })` |
156
157
  | Register the route | `PatternsReactRoute` inside `PatternsReactRouter` |
157
158
  | Fetch, save, validation, dirty state, skeletons, errors | `useEntityPage({ fetch, onSave })` |
158
- | Form state and field binding | `useForm` / `useController` from `@wix/patterns/form` |
159
+ | Form state and field binding | `useForm` / `useController` from `@wix/patterns/form` — `useController`, never `register` |
159
160
  | Body layout | `EntityPage.Header`, `.MainContent`, `.AdditionalContent`, `.Card` |
160
161
  | The individual fields inside those cards | `@wix/design-system` (`FormField`, `Input`, `Text`) |
161
162
 
162
- Prefer `navigateToEntityPage` over a plain route change: the entity header (title, subtitle, breadcrumbs) renders immediately, without waiting for the fetch.
163
-
164
- Read `EntityPage.md`, `useEntityPage.md`, and `usePatternsNavigate.md` before implementing — and note `useCreateCollection` is **not** about creating items; it returns a function that initializes collection state.
165
-
166
- Three things about the `useEntityPage` call are worth getting right first time — both generics, what `onSave` receives, which params exist: [ENTITY_PAGE_TOOLKIT.md](dashboard-page/ENTITY_PAGE_TOOLKIT.md).
163
+ Prefer `navigateToEntityPage` over a plain route change — the entity header renders before the fetch resolves. **Every `path` above is page-relative**: the router roots at `path="/"` even on a page scaffolded `route: "shifts"`, so never repeat that name in a `path`, `parentPath`, or `navigateToEntityPage` call — it fails silently. See [ENTITY_PAGE_TOOLKIT.md](dashboard-page/ENTITY_PAGE_TOOLKIT.md).
167
164
 
168
- Reserve dashboard modals for dialogs that neither write nor display a listed record — a delete or discard confirmation, an unsaved-changes prompt. **A create / "add new" form is not one of them**: it writes the record, so it is an `EntityPage` even though nothing is being edited yet. Size and field count are not exceptions — a one-field create form is still an `EntityPage`. A page that lists no records is outside this rule.
165
+ Read `EntityPage.md`, `useEntityPage.md` and `usePatternsNavigate.md` before implementing, plus [ENTITY_PAGE_TOOLKIT.md](dashboard-page/ENTITY_PAGE_TOOLKIT.md) for the `useEntityPage` call itself (generics, `onSave`, params). Note `useCreateCollection` is **not** about creating items: it returns a function that initializes collection state.
169
166
 
170
167
  ## When Patterns Has No Equivalent
171
168
 
172
- A concept is only "missing" from patterns after you've checked `dist/dts-bundle/index.json` and `dist/docs/index.json` **and** searched by keyword within what you've read. Then, and only then:
169
+ A concept is only "missing" from patterns after you've checked `dist/dts-bundle/index.json` and `dist/docs/index.json` **and** searched by keyword within what you've read. Then:
173
170
 
174
171
  1. Look the component up in `@wix/design-system` via the `wix-design-system` skill.
175
172
  2. Render it *inside* the patterns page shell / collection, not as a replacement for it.
176
173
  3. If WDS lacks it too, compose from WDS primitives (`Box`, `Card`, `Text`) — never restyle patterns internals, never add another UI library.
177
174
 
178
- Anything page- or collection-shaped (page shell, header, table, grid, filters, sorting, paging, row and bulk actions) is patterns' territory. If you're about to build one from WDS parts, you skipped a lookup.
175
+ Anything page- or collection-shaped (shell, header, table, grid, filters, sorting, paging, row/bulk actions) is patterns' territory. Building one from WDS parts means a skipped lookup.