@wix/auto-patterns 1.28.0 → 1.29.0

package/dist/docs/auto-patterns-guide.md

@@ -78,6 +78,34 @@ It is configured using a TypeScript file conforming to the `AppConfig` interface
 
 # AppConfig Structure
 
+## ⚠️ CRITICAL REQUIREMENT: Mandatory `biName` Property
+
+**Every action configuration in auto-patterns MUST include a `biName` property.** This is not optional - it's a mandatory requirement for all auto-patterns applications.
+
+### Why `biName` is Mandatory:
+- **Analytics Tracking**: Enables tracking of user interactions with actions
+- **Feature Usage**: Helps understand which features are most/least used
+- **User Behavior**: Provides insights into user workflows and preferences
+- **Business Intelligence**: Supports data-driven decision making
+- **A/B Testing**: Enables testing different action configurations
+- **Compliance**: Required for proper application monitoring and reporting
+
+### `biName` Requirements:
+- **MUST be included** in every action configuration
+- **Use descriptive, kebab-case naming** (e.g., "toggle-vaccination-action")
+- **Must be unique** across the application
+- **Follow the pattern**: `{action-purpose}-action`
+
+### Example:
+```json
+{
+  "id": "toggleVaccination",
+  "type": "custom",
+  "label": "Toggle Vaccination",
+  "biName": "toggle-vaccination-action"  // MANDATORY
+}
+```
+
 ## Configuration Rules
 
 - **Configuration must come only from a TypeScript file** - never inline or from other sources
@@ -102,6 +130,8 @@ It is configured using a TypeScript file conforming to the `AppConfig` interface
 - **Missing action type properties**: Not including `create`, `update`, `delete`, or `bulkDelete` properties when required by the action type
 - **Including wrong action properties**: Adding properties from different action types in the same action configuration
 - **Action type mismatches**: Using action cell types in collection actions, or bulk action types in regular actions
+- **Missing `biName` property**: Every action configuration MUST include a `biName` property for analytics tracking
+- **Generic `biName` values**: Using generic names like "action" or "button" instead of descriptive, kebab-case names
 
 ```ts
 export interface AppConfig {
@@ -128,6 +158,7 @@ export interface AppConfig {
               id: string; // Unique identifier for the action
               type: 'create' | 'custom'; // Action type
               label?: string; // Text displayed for the action
+              biName: string; // MANDATORY: Business intelligence name for analytics tracking
               collection: {
                 collectionId: string; // ID of the Wix Data collection
                 entityTypeSource: 'cms' | 'custom'; // Data source type.
@@ -222,6 +253,7 @@ export interface AppConfig {
                 type: 'update' | 'delete' | 'custom'; // Action type
                 label?: string; // Text displayed for the action
                 skin?: string; // Visual appearance of the action button (see Action Button Skin Values section)
+                biName: string; // MANDATORY: Business intelligence name for analytics tracking
                 disabled?: boolean; // Whether the action is disabled
                 tooltip?: string; // Tooltip text shown on hover
                 update?: { // Required when type is 'update'
@@ -274,6 +306,7 @@ export interface AppConfig {
                   id: string; // Unique identifier for the bulk action
                   type: 'bulkDelete' | 'custom'; // Bulk action type
                   label?: string; // Text displayed for the action
+                  biName: string; // MANDATORY: Business intelligence name for analytics tracking
                   bulkDelete?: { // Required when type is 'bulkDelete'
                     mode: 'modal'; // Currently only 'modal' is supported
                     modal: {
@@ -379,7 +412,7 @@ export interface AppConfig {
         } |
         {
           type: 'custom'; // Component type for custom slot components
-          id: string; // Unique identifier that maps to a custom React component provided through PatternsWizardOverridesProvider slots
+          id: string; // Unique identifier that maps to a custom React component provided through AutoPatternsOverridesProvider slots
         }
       ]; // End of components array
     };
@@ -411,6 +444,7 @@ export interface AppConfig {
               id: string;
               type: 'create' | 'custom';
               label?: string;
+              biName: string; // MANDATORY: Business intelligence name for analytics tracking
               create?: { // Required when type is 'create'
                 mode: 'page';
                 page: {
@@ -433,6 +467,7 @@ export interface AppConfig {
           id: string;
           type: 'custom';
           label?: string;
+          biName: string; // MANDATORY: Business intelligence name for analytics tracking
         }[];
       };
       parentPageId?: string; // ID of the parent collection page
@@ -709,7 +744,7 @@ The `layout` array contains the rendering components for the collection. Each la
 1. **Table Layout Item** (`type: 'Table'`):
    * `table` field contains table-specific configuration
    * Used for displaying collection in a **table view**
-   * Includes columns, actionCell, bulkActionToolbar, etc.
+   * Includes columns, bulkActionToolbar, etc.
 
 2. **Grid Layout Item** (`type: 'Grid'`):
    * `grid` field contains grid-specific configuration
@@ -774,7 +809,7 @@ In addition to these common properties, each action item must specify a `type` w
 ### 2. `type: "custom"`
 *   **Purpose**: Executes custom JavaScript logic defined in your application's overrides.
 *   **Details**:
-    *   The `custom` object in the configuration is typically empty. The functionality is determined by a custom action resolver function that you implement and register in the `actions` section of your `PatternsWizardOverridesProvider`. The `id` of this action item must exactly match the name (key) of the registered custom action resolver. The resolver will receive parameters including `collectionId`.
+    *   The `custom` object in the configuration is typically empty. The functionality is determined by a custom action resolver function that you implement and register in the `actions` section of your `AutoPatternsOverridesProvider`. The `id` of this action item must exactly match the name (key) of the registered custom action resolver. The resolver will receive parameters including `collectionId`.
 
 ### 3. `type: "divider"`
 *   **Purpose**: Creates a visual separator between action groups in menus and lists.
@@ -863,6 +898,7 @@ Custom collection page actions execute JavaScript code that you define for colle
      "id": "exportCollection",        // MUST match the function name exactly
      "type": "custom",                // REQUIRED: Must be exactly "custom"
      "label": "Export Collection",    // Optional: Displayed text
+     "biName": "export-collection-action",  // MANDATORY: Analytics tracking identifier
      "collection": {
        "collectionId": "WixPets",
        "entityTypeSource": "cms"
@@ -870,7 +906,7 @@ Custom collection page actions execute JavaScript code that you define for colle
    }
    ```
 
-5. Register your action in the `PatternsWizardOverridesProvider`:
+5. Register your action in the `AutoPatternsOverridesProvider`:
    ```typescript
    import { useActions } from '../components/actions';
 
@@ -878,9 +914,9 @@ Custom collection page actions execute JavaScript code that you define for colle
      const actions = useActions();
 
      return (
-       <PatternsWizardOverridesProvider value={{ actions }}>
+       <AutoPatternsOverridesProvider value={{ actions }}>
          <AutoPatternsApp configuration={config} />
-       </PatternsWizardOverridesProvider>
+       </AutoPatternsOverridesProvider>
      );
    }
    ```
@@ -952,6 +988,7 @@ export const handleRowClick: CustomActionCollectionPageActionOnRowClickResolver
 
       // Your custom logic...
     },
+    biName: 'view-details-action'    // MANDATORY: For analytics tracking
   };
 };
 ```
@@ -987,6 +1024,7 @@ export const openSidePanel: CustomActionCollectionPageActionOnRowClickResolver =
       // Or use a modal service/context that you've set up
       // modalService.openSidePanel(item);
     },
+    biName: 'open-side-panel-action'  // MANDATORY: For analytics tracking
   };
 };
 ```
@@ -1016,7 +1054,7 @@ export const useActions = () => {
 }
 ```
 
-**Step 4: Register in `PatternsWizardOverridesProvider`**:
+**Step 4: Register in `AutoPatternsOverridesProvider`**:
 ```typescript
 import { useActions } from '../components/actions';
 
@@ -1024,9 +1062,9 @@ export default function YourPage() {
   const actions = useActions();
 
   return (
-    <PatternsWizardOverridesProvider value={{ actions }}>
+    <AutoPatternsOverridesProvider value={{ actions }}>
       <AutoPatternsApp configuration={config} />
-    </PatternsWizardOverridesProvider>
+    </AutoPatternsOverridesProvider>
   );
 }
 ```
@@ -1063,6 +1101,7 @@ export const quickToggle: CustomActionCollectionPageActionOnRowClickResolver = (
         })
       });
     },
+    biName: 'quick-toggle-action'     // MANDATORY: For analytics tracking
   };
 };
 ```
@@ -1086,7 +1125,7 @@ export const quickToggle: CustomActionCollectionPageActionOnRowClickResolver = (
 - The implementation must use the `CustomActionCollectionPageActionOnRowClickResolver` type
 - **Required Return Object**: Must return a `ResolvedAction` object - see [ResolvedAction Reference](./resolved_action.md)
 - Access the clicked item's data through `actionParams.item`
-- The implementation must be exported as a named export and registered in your `PatternsWizardOverridesProvider`
+- The implementation must be exported as a named export and registered in your `AutoPatternsOverridesProvider`
 - When `onRowClick` is configured, the default navigation to entity page is completely disabled
 - **Complete Setup Required**: You need to create the action file, export it in the index, and register it in the provider - missing any step will cause errors
 
@@ -1104,10 +1143,13 @@ export const quickToggle: CustomActionCollectionPageActionOnRowClickResolver = (
 ✓ Divider actions use `{ "type": "divider" }` format and require no additional properties.
 ✓ If `onRowClick` is configured in table layout, it must have a valid `id` and `type: "custom"`.
 ✓ **CRITICAL**: Custom row click actions must have corresponding implementations registered in the `actions` override - configuration without implementation will cause errors.
-✓ Custom row click action implementations must return an object with `label`, `icon`, and `onClick` properties - all are required.
+✓ Custom row click action implementations must return a `ResolvedAction` object with `label`, `icon`, `onClick`, and `biName` properties - all are required. See [ResolvedAction Reference](./resolved_action.md) for complete field documentation.
 ✓ Custom row click action implementations must be exported as named exports and included in the actions index file.
 ✓ `onRowClick` is optional - when not configured, rows navigate to entity page by default.
 ✓ **IMPORTANT**: Configuring `onRowClick` completely disables default navigation - you must handle all row click logic in your custom implementation.
+✓ **MANDATORY**: Every action configuration MUST include a `biName` property for analytics tracking.
+✓ **MANDATORY**: `biName` must use descriptive, kebab-case naming (e.g., "export-collection-action").
+✓ **MANDATORY**: `biName` must be unique across the application and follow the pattern `{action-purpose}-action`.
 
 ---
 
@@ -1549,6 +1591,7 @@ Custom actions execute JavaScript code that you define. These actions receive pa
            })
          });
        },
+       biName: 'download-pet-details-action'  // MANDATORY: For analytics tracking
      };
    };
    ```
@@ -1573,10 +1616,11 @@ Custom actions execute JavaScript code that you define. These actions receive pa
      "id": "downloadPetDetails",        // MUST match the function name exactly
      "type": "custom",                  // REQUIRED: Must be exactly "custom"
      "label": "Download Details",       // Optional: Displayed text
+     "biName": "download-pet-details-action"  // MANDATORY: Analytics tracking identifier
    }
    ```
 
-5. Register your action in the `PatternsWizardOverridesProvider`:
+5. Register your action in the `AutoPatternsOverridesProvider`:
    ```typescript
    import { useActions } from '../components/actions';
 
@@ -1584,9 +1628,9 @@ Custom actions execute JavaScript code that you define. These actions receive pa
      const actions = useActions();
 
      return (
-       <PatternsWizardOverridesProvider value={{ actions }}>
+       <AutoPatternsOverridesProvider value={{ actions }}>
          <AutoPatternsApp configuration={config} />
-       </PatternsWizardOverridesProvider>
+       </AutoPatternsOverridesProvider>
      );
    }
    ```
@@ -1601,13 +1645,21 @@ Custom actions execute JavaScript code that you define. These actions receive pa
 
 1. `id` must:
    - Match exactly the function name of the custom action implementation
-   - Be registered in the `actions` property of your `PatternsWizardOverridesProvider`
+   - Be registered in the `actions` property of your `AutoPatternsOverridesProvider`
    - Follow JavaScript identifier naming rules (camelCase recommended)
 
-2. The implementation must return an object with:
-   - `label`: Text displayed for the action
+2. `biName` must:
+   - Be included in every action configuration (MANDATORY)
+   - Use descriptive, kebab-case naming (e.g., "download-pet-details-action")
+   - Be unique across the application
+   - Follow the pattern: `{action-purpose}-action`
+   - Enable analytics tracking for user interactions
+
+2. The implementation must return a `ResolvedAction` object with:
+   - `label`: Text displayed for the action 
    - `icon`: An Icon component from "@wix/wix-ui-icons-common"
    - `onClick`: Handler function for the action
+   - `biName`: Business intelligence name for analytics tracking. Must match the `biName` in your action configuration (required)
    - `hidden` (optional): Boolean to hide the action when true
 
 3. The implementation must:
@@ -1643,13 +1695,13 @@ Follow this decision process when implementing ActionCell:
    - Complex, full-entity edits → Use `mode: "page"` to navigate to entity page
 
 6. **Custom Implementation**:
-   - For `custom` actions, you must provide implementations in your code and register them with `PatternsWizardOverridesProvider`
+   - For `custom` actions, you must provide implementations in your code and register them with `AutoPatternsOverridesProvider`
 
 ### ActionCell Validation Checklist
 
 AI agents should verify these requirements before generating ActionCell configurations:
 
-✓ ActionCell is placed directly inside `table` or `grid` configuration
+✓ ActionCell is placed at the collection component level (`collectionPage.components[*].actionCell`) as a sibling to `collection`, `layout`, etc. — NOT inside `table` or `grid`
 ✓ Each action has a unique `id` and correct `type` value
 ✓ Each action type only includes its required field(s)
 ✓ Update page action refers to a valid entity page ID
@@ -1788,6 +1840,7 @@ Custom bulk actions execute JavaScript code that you define for bulk operations.
            })
          });
        },
+       biName: 'bulk-export-pets-action'  // MANDATORY: For analytics tracking
      };
    };
    ```
@@ -1810,10 +1863,11 @@ Custom bulk actions execute JavaScript code that you define for bulk operations.
      "id": "bulkExportPets",        // MUST match the function name exactly
      "type": "custom",              // REQUIRED: Must be exactly "custom"
      "label": "Export Selected",    // Optional: Displayed text
+     "biName": "bulk-export-pets-action"  // MANDATORY: Analytics tracking identifier
    }
    ```
 
-5. Register your action in the `PatternsWizardOverridesProvider`:
+5. Register your action in the `AutoPatternsOverridesProvider`:
    ```typescript
    import { useActions } from '../components/actions';
 
@@ -1821,9 +1875,9 @@ Custom bulk actions execute JavaScript code that you define for bulk operations.
      const actions = useActions();
 
      return (
-       <PatternsWizardOverridesProvider value={{ actions }}>
+       <AutoPatternsOverridesProvider value={{ actions }}>
          <AutoPatternsApp configuration={config} />
-       </PatternsWizardOverridesProvider>
+       </AutoPatternsOverridesProvider>
      );
    }
    ```
@@ -1840,7 +1894,7 @@ Custom bulk actions execute JavaScript code that you define for bulk operations.
 
 1. `id` must:
    - Match exactly the function name of the custom bulk action implementation
-   - Be registered in the `actions` property of your `PatternsWizardOverridesProvider`
+   - Be registered in the `actions` property of your `AutoPatternsOverridesProvider`
    - Follow JavaScript identifier naming rules (camelCase recommended)
 
 2. The implementation must return a `ResolvedAction`:
@@ -1930,7 +1984,7 @@ Follow this decision process when implementing Bulk Action Toolbar:
    - Less common bulk operations → Place in `secondaryActions` array
 
 3. **Custom Implementation**:
-   - For `custom` bulk actions, you must provide implementations in your code and register them with `PatternsWizardOverridesProvider`
+   - For `custom` bulk actions, you must provide implementations in your code and register them with `AutoPatternsOverridesProvider`
 
 ### Bulk Action Toolbar Validation Checklist
 
@@ -1945,6 +1999,9 @@ AI agents should verify these requirements before generating Bulk Action Toolbar
 ✓ Primary actions use `action`/`menu` structure with proper `action` or `menu` properties
 ✓ Secondary actions are an array that can include dividers
 ✓ Menu items within primary actions is array that can include dividers
+✓ **MANDATORY**: Every action configuration MUST include a `biName` property for analytics tracking
+✓ **MANDATORY**: `biName` must use descriptive, kebab-case naming (e.g., "bulk-export-pets-action")
+✓ **MANDATORY**: `biName` must be unique across the application and follow the pattern `bulk-{action}-action`
 
 ---
 
@@ -1972,7 +2029,7 @@ When a user asks to "add badges to the entity page", understand that they want:
 1. **Custom component overrides** - NOT direct configuration in JSON
 2. **Function that returns badge objects** - NOT JSX components
 3. **Badge properties** like `text`, `skin`, `prefixIcon`, etc.
-4. **Registration in PatternsWizardOverridesProvider** under `entityPageHeaderBadges`
+4. **Registration in AutoPatternsOverridesProvider** under `entityPageHeaderBadges`
 
 **Example Request**: "Add 2 badges with random skins and text 'wow'"
 **Correct Implementation**: Create a function that returns `[{text: 'wow', skin: 'success'}, {text: 'wow', skin: 'premium'}]`
@@ -2066,7 +2123,7 @@ const Index: FC = () => {
   const entityPageHeaderSubtitle = useEntityPageHeaderSubtitle();
 
   return (
-    <PatternsWizardOverridesProvider
+    <AutoPatternsOverridesProvider
       value={{
         // ... other overrides
         entityPageHeaderSubtitle: {
@@ -2075,7 +2132,7 @@ const Index: FC = () => {
       }}
     >
       <WixPetsPage />
-    </PatternsWizardOverridesProvider>
+    </AutoPatternsOverridesProvider>
   );
 };
 ```
@@ -2126,16 +2183,16 @@ export const myFunction = (entity) => { ... }
 
 ### Integration
 
-Register your subtitle override in the `PatternsWizardOverridesProvider`:
+Register your subtitle override in the `AutoPatternsOverridesProvider`:
 
 ```typescript
-<PatternsWizardOverridesProvider value={{
+<AutoPatternsOverridesProvider value={{
   entityPageHeaderSubtitle: {
     mySubtitleOverride,
   },
 }}>
   <AutoPatternsApp configuration={config} />
-</PatternsWizardOverridesProvider>
+</AutoPatternsOverridesProvider>
 ```
 
 ## Entity Page Dynamic Badges
@@ -2168,7 +2225,7 @@ When implementing badges for entity pages, understand these key points:
 1. **Badges are CUSTOM COMPONENT OVERRIDES** - NOT direct configuration
 2. **Badge function returns an ARRAY of badge objects** - NOT JSX components
 3. **Each badge object has properties** like `text`, `skin`, `prefixIcon`, etc.
-4. **Must be registered in PatternsWizardOverridesProvider** under `entityPageHeaderBadges`
+4. **Must be registered in AutoPatternsOverridesProvider** under `entityPageHeaderBadges`
 
 ### Complete Implementation Guide
 
@@ -2223,7 +2280,7 @@ const Index: FC = () => {
   const entityPageHeaderBadges = useEntityPageHeaderBadges();
 
   return (
-    <PatternsWizardOverridesProvider
+    <AutoPatternsOverridesProvider
       value={{
         // ... other overrides
         entityPageHeaderSubtitle: {
@@ -2235,7 +2292,7 @@ const Index: FC = () => {
       }}
     >
       <WixPetsPage />
-    </PatternsWizardOverridesProvider>
+    </AutoPatternsOverridesProvider>
   );
 };
 ```
@@ -2277,7 +2334,7 @@ src/dashboard/
 
 1. **❌ DON'T return JSX components** - Return badge objects instead
 2. **❌ DON'T use direct configuration** - Use custom component overrides
-3. **❌ DON'T forget to register in PatternsWizardOverridesProvider**
+3. **❌ DON'T forget to register in AutoPatternsOverridesProvider**
 5. **❌ DON'T forget to export from index.ts** - Must export the function
 
 
@@ -2433,18 +2490,21 @@ Entity pages in **edit mode** support not only built-in actions (such as "Save"
       {
         "id": "sendEmail",
         "type": "custom",
-        "label": "Send Email"
+        "label": "Send Email",
+        "biName": "send-email-action"
       },
       {
         "id": "exportData",
         "type": "custom",
-        "label": "Export Data"
+        "label": "Export Data",
+        "biName": "export-data-action"
       },
       { "type": "divider" },
       {
         "id": "archiveEntity",
         "type": "custom",
-        "label": "Archive"
+        "label": "Archive",
+        "biName": "archive-entity-action"
       }
     ]
   }
@@ -2471,6 +2531,7 @@ export const myMoreAction: CustomEntityPageActionResolver = (params) => {
     onClick: () => {
       // Your custom logic here
     },
+    biName: 'my-more-action'  // MANDATORY: For analytics tracking
   };
 };
 ```
@@ -2496,9 +2557,12 @@ export const myMoreAction: CustomEntityPageActionResolver = (params) => {
 ✓ Each action in `moreActions` has a unique `id` and correct `type` value
 ✓ Each action type only includes its required field(s)
 ✓ Custom actions match implementations in overrides
-✓ The resolver is exported and registered in the `actions` property of your `PatternsWizardOverridesProvider`
+✓ The resolver is exported and registered in the `actions` property of your `AutoPatternsOverridesProvider`
 ✓ The function signature matches `CustomEntityPageActionResolver`
 ✓ The returned object is a `ResolvedAction` (see [ResolvedAction Reference](./resolved_action.md))
+✓ **MANDATORY**: Every action configuration MUST include a `biName` property for analytics tracking
+✓ **MANDATORY**: `biName` must use descriptive, kebab-case naming (e.g., "send-email-action")
+✓ **MANDATORY**: `biName` must be unique across the application and follow the pattern `{action-purpose}-action`
 
 ---
 
@@ -2668,6 +2732,7 @@ export interface ResolvedAction {
   hidden?: boolean;
   tooltip?: string;
   skin?: string;
+  biName?: string;
 }
 ```
 
@@ -2678,6 +2743,7 @@ export interface ResolvedAction {
 - **`label`** (string): Text displayed in the button or menu item.
 - **`icon`** (IconElement): An icon component, typically from `@wix/wix-ui-icons-common`. Example: `icon: <Delete />`.
 - **`onClick`** (function): Handler function invoked when the user triggers the action. Can be async.
+- **`biName`** (string): Business intelligence name for analytics tracking. Used to identify the action in analytics and reporting systems. The value should match the `biName` specified in your action configuration.
 
 ### Optional Fields
 
@@ -2701,7 +2767,8 @@ return {
   icon: <Add />,
   onClick: () => {
     // Your action logic here
-  }
+  },
+  biName: 'create-action'  // MANDATORY: For analytics tracking
 };
 ```
 
@@ -2724,7 +2791,8 @@ return {
   disabled: total === 0,
   tooltip: total === 0 ? 'Select at least one item to export' : undefined,
   hidden: !userHasExportPermission,
-  skin: 'premium'
+  skin: 'premium',
+  biName: 'export_selected_items' // MANDATORY: For analytics tracking
 };
 ```
 
@@ -2814,7 +2882,7 @@ import React, { type FC } from 'react';
 import { WixDesignSystemProvider } from '@wix/design-system';
 import '@wix/design-system/styles.global.css';
 import { WixPatternsProvider } from '@wix/patterns/provider';
-import { PatternsWizardOverridesProvider, AutoPatternsApp } from '@wix/auto-patterns';
+import { AutoPatternsOverridesProvider, AutoPatternsApp } from '@wix/auto-patterns';
 import { withDashboard } from '@wix/patterns';
 
 import { config } from './MyCollectionConfig.patterns';
@@ -2823,9 +2891,9 @@ const Index: FC = () => {
   return (
     <WixDesignSystemProvider features={{ newColorsBranding: true }}>
       <WixPatternsProvider>
-        <PatternsWizardOverridesProvider value={{ }}>
+        <AutoPatternsOverridesProvider value={{ }}>
           <AutoPatternsApp configuration={config} />
-        </PatternsWizardOverridesProvider>
+        </AutoPatternsOverridesProvider>
       </WixPatternsProvider>
     </WixDesignSystemProvider>
   );
@@ -2836,15 +2904,63 @@ export default withDashboard(Index);
 
 ---
 
+# AppContext
+
+The AppContext feature allows you to add components outside the main AutoPatternsApp flow while still accessing the collection data.
+
+## 1. Adding Components as Children
+
+Components that need to be rendered outside the main AutoPatternsApp interface (such as modals or side panels) should be passed as children:
+
+```tsx
+import { AutoPatternsApp } from '@wix/auto-patterns';
+import { MyModal } from './MyModal';
+import { MySidePanel } from './MySidePanel';
+
+<AutoPatternsApp configuration={config}>
+  <MyModal />
+  <MySidePanel />
+</AutoPatternsApp>
+```
+
+These children components are typically:
+- **Modals** - for custom actions, forms, or dialogs
+- **Side Panels** - for additional information or controls
+- **Overlay Components** - that need to appear on top of the main interface
+
+## 2. Accessing Collection Data
+
+Use the `useAppContext` hook to access the current collection items from within your child components:
+
+```tsx
+import React from 'react';
+import { useAppContext } from '@wix/auto-patterns';
+
+export const MyModal: React.FC = () => {
+  const { items } = useAppContext();
+
+  return (
+    <div>
+      <p>Current collection has {items.length} items</p>
+      {/* Your modal content */}
+    </div>
+  );
+};
+```
+
+The `items` array contains the current filtered and paginated collection data that matches what's displayed in the table/grid.
+
+---
+
 # Custom Overrides
 
 ## Override Rules
 
 - **Custom overrides are restricted to the defined areas only** - attempting to override or modify any other aspect of `AutoPatternsApp` is prohibited and can cause unexpected behavior
-- **Always verify override implementation** - when implementing custom overrides, you MUST ensure they are correctly imported and passed to the `PatternsWizardOverridesProvider`
+- **Always verify override implementation** - when implementing custom overrides, you MUST ensure they are correctly imported and passed to the `AutoPatternsOverridesProvider`
 - **CRITICAL: Error handling for custom actions** - Custom actions that make external API calls (using `fetch()`, `axios`, etc.) should NOT use `errorHandler.withErrorHandler`. Only Wix HTTP requests (httpClient from @wix/essentials, Wix APIs like wix/data and wix/stores, and httpClient.fetchWithAuth()) require errorHandler wrapping. See the "Error Handling for HTTP Requests" section for details.
 
-The `PatternsWizardOverridesProvider` allows you to inject custom code to override default behaviors or add additional functionality. Below are the areas where overrides can be applied:
+The `AutoPatternsOverridesProvider` allows you to inject custom code to override default behaviors or add additional functionality. Below are the areas where overrides can be applied:
 
 > **Note:** These are the only areas where overrides are supported. Avoid attempting to override or modify other parts of the system, as this is not supported and may lead to unexpected behavior.
 
@@ -2919,9 +3035,9 @@ export default function YourPage() {
   const entityPageHeaderBadges = useEntityPageHeaderBadges();
 
   return (
-    <PatternsWizardOverridesProvider value={{ actions, columns, slots, sections, components, modals, customDataSources, entityPageHeaderSubtitle, entityPageHeaderBadges }}>
+    <AutoPatternsOverridesProvider value={{ actions, columns, slots, sections, components, modals, customDataSources, entityPageHeaderSubtitle, entityPageHeaderBadges }}>
       <AutoPatternsApp configuration={config} />
-    </PatternsWizardOverridesProvider>
+    </AutoPatternsOverridesProvider>
   );
 }
 ```
@@ -2941,7 +3057,7 @@ For example:
 - Adding a new subtitle override → Update `../components/entityPageHeaderSubtitle/index.tsx` to include the new subtitle in the `useEntityPageHeaderSubtitle` hook
 - Adding a new badges override → Update `../components/entityPageHeaderBadges/index.tsx` to include the new badges in the `useEntityPageHeaderBadges` hook
 
-Without updating the hook index files, your implementations won't be available to the `PatternsWizardOverridesProvider`.
+Without updating the hook index files, your implementations won't be available to the `AutoPatternsOverridesProvider`.
 
 ## Common Override Mistakes to Avoid
 
@@ -3186,9 +3302,9 @@ export default function YourPage() {
   const columns = useColumns();
 
   return (
-    <PatternsWizardOverridesProvider value={{ columns }}>
+    <AutoPatternsOverridesProvider value={{ columns }}>
       <AutoPatternsApp configuration={config} />
-    </PatternsWizardOverridesProvider>
+    </AutoPatternsOverridesProvider>
   );
 }
 ```
@@ -3206,7 +3322,7 @@ your-page/
         ├── fullName.tsx  // Calculated column
         └── date.tsx      // Enhanced formatting with row context
 
-PatternsWizardOverridesProvider
+AutoPatternsOverridesProvider
  └── value.columns (from useColumns hook)
       ├── name
       ├── petInfo
@@ -3363,9 +3479,9 @@ export default function YourPage() {
   const components = useComponents();
 
   return (
-    <PatternsWizardOverridesProvider value={{ components }}>
+    <AutoPatternsOverridesProvider value={{ components }}>
       <AutoPatternsApp configuration={config} />
-    </PatternsWizardOverridesProvider>
+    </AutoPatternsOverridesProvider>
   );
 }
 ```
@@ -3494,7 +3610,7 @@ your-page/
     │   ├── combinedNameFields.tsx // Multiple fields override
     │   └── infoCard.tsx          // Standalone component
 
-PatternsWizardOverridesProvider
+AutoPatternsOverridesProvider
  └── value.components (from useComponents hook)
       ├── customNameField
       ├── combinedNameFields
@@ -3564,7 +3680,7 @@ To enable sections, add the `sections` configuration to your table configuration
 
 ### Custom Data Source Hook Structure
 
-Custom data sources are implemented through the `useCustomDataSources` hook in your `PatternsWizardOverridesProvider`:
+Custom data sources are implemented through the `useCustomDataSources` hook in your `AutoPatternsOverridesProvider`:
 
 ```tsx
 import { useCustomDataSources } from '../components/customDataSources';
@@ -3573,9 +3689,9 @@ export default function YourPage() {
   const customDataSources = useCustomDataSources();
 
   return (
-    <PatternsWizardOverridesProvider value={{ customDataSources }}>
+    <AutoPatternsOverridesProvider value={{ customDataSources }}>
       <AutoPatternsApp configuration={config} />
-    </PatternsWizardOverridesProvider>
+    </AutoPatternsOverridesProvider>
   );
 }
 ```
@@ -3691,9 +3807,9 @@ export default function YourPage() {
   const customDataSources = useCustomDataSources();
 
   return (
-    <PatternsWizardOverridesProvider value={{ customDataSources }}>
+    <AutoPatternsOverridesProvider value={{ customDataSources }}>
       <AutoPatternsApp configuration={config} />
-    </PatternsWizardOverridesProvider>
+    </AutoPatternsOverridesProvider>
   );
 }
 ```
@@ -3702,7 +3818,7 @@ export default function YourPage() {
 
 ### Creating Section Renderers
 
-Section renderers are functions that determine how to group items and what information to display in section headers. They must be provided through the `PatternsWizardOverridesProvider`.
+Section renderers are functions that determine how to group items and what information to display in section headers. They must be provided through the `AutoPatternsOverridesProvider`.
 
 #### Function Signature
 
@@ -3828,9 +3944,9 @@ import * as sections from './components/sections';
 import * as columns from './components/columns';
 import * as actions from './components/actions';
 
-<PatternsWizardOverridesProvider value={{ sections, columns, actions }}>
+<AutoPatternsOverridesProvider value={{ sections, columns, actions }}>
   <AutoPatternsApp configuration={config} />
-</PatternsWizardOverridesProvider>
+</AutoPatternsOverridesProvider>
 ```
 
 ### Important Notes
@@ -3976,9 +4092,9 @@ export default function YourPage() {
   const slots = useSlots();
 
   return (
-    <PatternsWizardOverridesProvider value={{ slots }}>
+    <AutoPatternsOverridesProvider value={{ slots }}>
       <AutoPatternsApp configuration={config} />
-    </PatternsWizardOverridesProvider>
+    </AutoPatternsOverridesProvider>
   );
 }
 ```