@wix/auto-patterns 1.36.0 → 1.38.0

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

@@ -311,7 +311,8 @@ export interface AppConfig {
                     mode: 'modal'; // Currently only 'modal' is supported
                     modal: {
                       title?: {
-                        text: string; // Modal title
+                        text?: string; // Static modal title
+                        id?: string;   // Dynamic title resolver ID
                       };
                       description?: {
                         text: string; // Modal description
@@ -367,6 +368,15 @@ export interface AppConfig {
               id?: string; // Custom CTA ID
             };
           };
+          /**
+           * Drag and drop configuration.
+           */
+          dragAndDrop?: {
+            /**
+             * Whether drag and drop is enabled. When enabled, the [schema](./schema_config.md) must support a "move" action.
+             */
+            enabled: boolean;
+          };
           layout: [ // Array of layout items that define what components to render
             {
               type: 'Table'; // Layout item type for table rendering
@@ -382,10 +392,14 @@ export interface AppConfig {
                   hideable?: boolean; // Whether column can be hidden
                   defaultHidden?: boolean; // Whether column is hidden by default
                   hiddenFromCustomColumnsSelection?: boolean; // Whether column is hidden from custom columns selection
+                  tooltipContent?: string; // Tooltip content to display when hovering over the info icon in the column header
                 }[];
                 customColumns?: {
                   enabled: boolean; // Enable user customization (hide/reorder columns)
                 };
+                dataExtension?: {
+                  enabled: boolean; // Enable data extension
+                };
                 stickyColumns?: number; // Number of columns to make sticky from the start. Sticky columns remain visible when horizontally scrolling.
                 showTitleBar?: boolean; // Whether to show the table column headers. Default: true
               };
@@ -771,6 +785,40 @@ The `layout` array contains the rendering components for the collection. Each la
 * If the user does not specify, **select the most relevant fields automatically**.
 * For grid components, it is strongly recommended to implement a primary action cell with an `update` action that navigates to the entity page. This provides users with an intuitive way to access detailed information and edit individual entities directly from the grid view.
 
+## Column Tooltips
+
+Add tooltips to column headers using the `tooltipContent` property. When provided, an info icon appears next to the column header that users can hover over to see the tooltip content.
+
+Use tooltips to provide:
+- **Explanations** - Help users understand what the column represents
+- **Tools** - Provide guidance on how to use or interpret the column data
+- **Additional information** - Offer context about the column's purpose, data format, or usage
+
+```json
+{
+  "columns": [
+    {
+      "id": "name",
+      "name": "Name",
+      "width": "200px",
+      "tooltipContent": "The name of the pet"
+    },
+    {
+      "id": "age",
+      "name": "Age",
+      "width": "100px",
+      "tooltipContent": "Age in years. Use this to filter pets by age range."
+    },
+    {
+      "id": "lastVisit",
+      "name": "Last Visit",
+      "width": "150px",
+      "tooltipContent": "Date of the pet's last veterinary visit. Click to sort by most recent visits."
+    }
+  ]
+}
+```
+
 ---
 
 # Collection Page Actions
@@ -1350,19 +1398,47 @@ export interface SchemaConfig {
       | { items: any[]; cursor?: string | null; total?: number | null }
       | { items: any[]; hasNext?: boolean; total?: number | null }
     >;
+    /**
+     * Reorder an entity within the collection.
+     * @param id The ID of the entity to move.
+     * @param params.moveAfterId The ID of the entity that should precede the moved entity, or null/undefined to move to start.
+     */
+    move?: (
+      id: string,
+      params: {
+        moveAfterId: string | null | undefined;
+      },
+    ) => Promise<void>;
   };
+  /**
+   * Whether the entity supports data extensions
+   * Maps to `info.extensible` in the collection schema - map only properties that are relevant or `null` if not extensible
+   */
+  extensible: {
+    /**
+     * Whether the entity supports filtering on data extensions
+     * Maps to `info.extensible.filterable` in the collection schema
+     */
+    filterable?: boolean;
+  } | null;
+  /**
+   * Whether the schema contains personally identifiable information (PII).
+   * Maps to `info.containsPii` in the collection schema
+   */
+  containsPii: boolean;
 }
 
 export interface Query {
-  limit: number;                    // Maximum number of items to return per request (controls page size)
-  offset?: number;                   // Number of items to skip from the beginning (for pagination)
-  page: number;                     // Current page number (1-based, works with limit for pagination)
-  search?: string;                  // Text search query applied to searchable fields
-  cursor?: string | null;           // Cursor-based pagination token (alternative to offset-based pagination)
-  filters: Record<string, any>;     // Field-specific filter conditions (keys = field IDs, values = filter criteria)
-  sort?: {                          // Sorting configuration for result ordering
-    fieldName: string;              // Field ID to sort by (must be sortable per field capabilities)
-    order: 'asc' | 'desc';         // Sort direction
+  limit: number; // Maximum number of items to return per request (controls page size)
+  offset?: number; // Number of items to skip from the beginning (for pagination)
+  page: number; // Current page number (1-based, works with limit for pagination)
+  search?: string; // Text search query applied to searchable fields
+  cursor?: string | null; // Cursor-based pagination token (alternative to offset-based pagination)
+  filters: Record<string, any>; // Field-specific filter conditions (keys = field IDs, values = filter criteria)
+  sort?: {
+    // Sorting configuration for result ordering
+    fieldName: string; // Field ID to sort by (must be sortable per field capabilities)
+    order: 'asc' | 'desc'; // Sort direction
   }[];
 }
 ```
@@ -1413,43 +1489,63 @@ export type Field = ReferenceField | NonReferenceField;
 ### Key Properties
 
 • **id** - `string`
-  - Collection identifier (e.g., "WixPets")
-  - Example: `schema.id === "WixPets"`
+
+- Collection identifier (e.g., "WixPets")
+- Example: `schema.id === "WixPets"`
 
 • **idField** - `string`
-  - Primary key field name (usually "_id")
-  - Required for all update/delete operations
-  - Example: `const id = item[schema.idField]`
+
+- Primary key field name (usually "\_id")
+- Required for all update/delete operations
+- Example: `const id = item[schema.idField]`
 
 • **displayField** - `string`
-  - Main field for displaying items (name, title, etc.)
-  - Used in UI components for item identification
-  - Example: `const label = item[schema.displayField]`
+
+- Main field for displaying items (name, title, etc.)
+- Used in UI components for item identification
+- Example: `const label = item[schema.displayField]`
 
 • **fields** - `Record<string, Field | undefined>`
-  - Complete field definitions with types and metadata
-  - Useful for dynamic form generation or validation
-  - Each field contains type information, validation rules, and capabilities
-  - Example: `schema.fields.name.type === 'SHORT_TEXT'`
+
+- Complete field definitions with types and metadata
+- Useful for dynamic form generation or validation
+- Each field contains type information, validation rules, and capabilities
+- Example: `schema.fields.name.type === 'SHORT_TEXT'`
 
 • **actions** - Server operation functions
-  - Pre-configured API calls for CRUD operations
-  - Use with optimistic actions for best UX
-  - All actions return Promises and handle server communication
-  - Example: `await schema.actions.update(item)`
+
+- Pre-configured API calls for CRUD operations
+- Use with optimistic actions for best UX
+- All actions return Promises and handle server communication
+- Example: `await schema.actions.update(item)`
+
+• **extensible** - `object | null`
+
+- Indicates if the entity supports data extensions
+
+• **extensible.filterable** - `boolean | undefined`
+
+- Indicates if filtering on data extensions is supported
+
+• **containsPii** - `boolean`
+
+- Indicates if the schema contains personally identifiable information (PII)
 
 ### Available Schema Actions
 
 #### Individual Entity Operations
+
 - **schema.actions.get(entityId)** - Retrieve a single entity by ID
 - **schema.actions.create(newEntity)** - Create a new entity
 - **schema.actions.update(updatedEntity)** - Update an existing entity
 - **schema.actions.delete(entityId)** - Delete a single entity by ID
 
 #### Bulk Operations
+
 - **schema.actions.bulkDelete(entityIds)** - Delete multiple entities by their IDs
 
 #### Query Operations
+
 - **schema.actions.find(query, options)** - Search and filter entities
   - `query`: Query object with pagination, filtering, sorting, and search criteria (see Query Interface section)
   - `options.searchableFieldIds`: Array of field IDs that support text search
@@ -1476,6 +1572,7 @@ Each field in the `fields` record contains:
 ### Reference Fields
 
 Reference fields have additional metadata:
+
 - **referenceMetadata.referencedCollectionId**: ID of the collection being referenced
 - Used for establishing relationships between different collections
 
@@ -1877,6 +1974,66 @@ Bulk delete actions remove multiple entities with a confirmation modal.
 2. `bulkDelete.modal` object must exist
 3. The modal properties (title, description, actions, feedback) are all optional
 
+#### Dynamic Modal Titles
+
+Bulk delete modal titles can be made dynamic to reflect the number and type of selected items.
+
+**Configuration**
+
+Use the `title.id` property to reference a dynamic title resolver:
+
+```typescript
+bulkActionToolbar: {
+  primaryActions: [{
+    type: 'action',
+    action: {
+      item: {
+        id: 'bulkDelete',
+        type: 'bulkDelete',
+        bulkDelete: {
+          mode: 'modal',
+          modal: {
+            title: {
+              id: 'dynamicDeleteTitle'  // References override function
+            },
+            // ... other modal config
+          }
+        }
+      }
+    }
+  }]
+}
+```
+
+**Implementation**
+
+Create a title resolver function in your overrides:
+
+```typescript
+const useBulkDeleteModalTitle = () => ({
+  dynamicDeleteTitle: ({ selectedCount, selectedValues }) => ({
+    text: `Delete ${selectedCount} ${selectedCount === 1 ? 'item' : 'items'}?`
+  }),
+});
+
+const bulkDeleteModalTitle = useBulkDeleteModalTitle();
+// In your page component
+<AutoPatternsOverridesProvider
+  value={{
+    bulkDeleteModalTitle,
+    // ... other overrides
+  }}
+>
+  <AutoPatternsApp configuration={config} />
+</AutoPatternsOverridesProvider>
+```
+
+**Parameters**
+
+The title resolver function receives:
+- `selectedCount: number` - Total number of selected items
+- `selectedValues: any[]` - Array of selected item objects
+
 ### Custom Bulk Action Configuration
 
 Custom bulk actions execute JavaScript code that you define for bulk operations. These actions receive parameters that give them access to selected entities data and utilities. Here's how to implement a custom bulk action:
@@ -3342,7 +3499,19 @@ export default function YourPage() {
   const entityPageHeaderBadges = useEntityPageHeaderBadges();
 
   return (
-    <AutoPatternsOverridesProvider value={{ actions, columns, slots, sections, components, modals, customDataSources, entityPageHeaderSubtitle, entityPageHeaderBadges }}>
+    <AutoPatternsOverridesProvider
+      value={{
+        actions,
+        columns,
+        slots,
+        sections,
+        components,
+        modals,
+        customDataSources,
+        entityPageHeaderSubtitle,
+        entityPageHeaderBadges,
+      }}
+    >
       <AutoPatternsApp configuration={config} />
     </AutoPatternsOverridesProvider>
   );
@@ -3354,6 +3523,7 @@ export default function YourPage() {
 **When adding any new implementation (action, modal, column, slot, section or component), you MUST update the corresponding hook in the `index.tsx` file to include your new implementation.** The main page component uses these hooks, so they serve as the central export point for each type of override.
 
 For example:
+
 - Adding a new action → Update `../components/actions/index.tsx` to include the new action in the `useActions` hook
 - Adding a new modal → Update `../components/modals/index.tsx` to include the new modal in the `useModals` hook
 - Adding a new column override → Update `../components/columns/index.tsx` to include the new column in the `useColumns` hook
@@ -3374,6 +3544,38 @@ Without updating the hook index files, your implementations won't be available t
 - Incorrect import paths or naming mismatches
 - Forgetting to import and use the hook in the main page component
 
+## Bulk Delete Modal Titles
+
+Dynamic title generation for bulk delete confirmation modals.
+
+```typescript
+bulkDeleteModalTitle?: Record<
+  string,
+  (params: { selectedCount: number; selectedValues: any[] }) => { text: string }
+>;
+```
+
+**Usage Example:**
+```typescript
+const useBulkDeleteModalTitle = () => ({
+  dynamicProductDelete: ({ selectedCount }) => ({
+    text: `Delete ${selectedCount} ${selectedCount === 1 ? 'product' : 'products'}?`
+  }),
+});
+```
+
+**Integration:**
+```typescript
+
+const bulkDeleteModalTitle = useBulkDeleteModalTitle();
+
+<AutoPatternsOverridesProvider
+  value={{
+    bulkDeleteModalTitle,
+  }}
+>
+```
+
 ## Columns
 
 Each column in the table has a default rendering based on its field type. You can override this rendering by providing a custom function for the `column.id`. This allows you to customize how specific columns are displayed.
@@ -3405,8 +3607,8 @@ import { Badge } from '@wix/design-system';
 
 /* The `IColumnValue<T>` interface provides type safety for column override functions: */
 interface IColumnValue<T> {
-  value: T;                    // The individual column value (strongly typed)
-  row: Record<string, any>;    // The entire row object with all field values
+  value: T; // The individual column value (strongly typed)
+  row: Record<string, any>; // The entire row object with all field values
 }
 
 // For TEXT fields
@@ -3417,9 +3619,7 @@ export function petName({ value, row }: IColumnValue<string>) {
 // For NUMBER fields
 export function age({ value, row }: IColumnValue<number>) {
   return (
-    <Badge skin={value > 5 ? 'warning' : 'success'}>
-      {value} years old
-    </Badge>
+    <Badge skin={value > 5 ? 'warning' : 'success'}>{value} years old</Badge>
   );
 }
 
@@ -3454,23 +3654,29 @@ export function hobbies({ value, row }: IColumnValue<string[]>) {
 **Important**: The `row` object contains all field values from the entity, where each property corresponds to a **field ID** from the collection schema. To access specific field values, use the exact field ID as defined in your collection schema.
 
 For example, if your collection schema has these fields:
+
 ```json
 {
   "fields": [
     { "key": "name", "displayName": "Pet Name", "type": "TEXT" },
     { "key": "age", "displayName": "Age", "type": "NUMBER" },
     { "key": "isVaccinated", "displayName": "Vaccinated", "type": "BOOLEAN" },
-    { "key": "lastActivity", "displayName": "Last Activity", "type": "DATETIME" }
+    {
+      "key": "lastActivity",
+      "displayName": "Last Activity",
+      "type": "DATETIME"
+    }
   ]
 }
 ```
 
 Then in your column override, you access these values using the field IDs:
+
 ```typescript
 export function myColumn({ value, row }) {
   // Access field values using their schema field IDs
-  const petName = row.name;           // "name" field ID
-  const petAge = row.age;             // "age" field ID
+  const petName = row.name; // "name" field ID
+  const petAge = row.age; // "age" field ID
   const isVaccinated = row.isVaccinated; // "isVaccinated" field ID
   const lastActivity = row.lastActivity; // "lastActivity" field ID
 
@@ -3520,7 +3726,9 @@ export function petInfo({ value, row }: IColumnValue<string>) {
         {row.age} years old • {row.type}
       </Text>
       {row.isVaccinated && (
-        <Text size="tiny" skin="success">✓ Vaccinated</Text>
+        <Text size="tiny" skin="success">
+          ✓ Vaccinated
+        </Text>
       )}
     </Box>
   );
@@ -3566,7 +3774,9 @@ import { IColumnValue } from '@wix/auto-patterns/types';
 
 export function date({ value, row }: IColumnValue<string>) {
   // Access to other row data for enhanced date formatting
-  const isRecent = row.lastActivity && new Date(row.lastActivity) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
+  const isRecent =
+    row.lastActivity &&
+    new Date(row.lastActivity) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
 
   return (
     <span style={{ color: isRecent ? 'green' : 'inherit' }}>
@@ -3593,7 +3803,7 @@ export const useColumns = () => {
     petInfo,
     status,
     fullName,
-    date
+    date,
   };
 };
 ```
@@ -3671,6 +3881,7 @@ These components can display custom UI elements like notifications, information
 ### 2. Field Rendering Overrides
 
 You can use custom components to override the default rendering of one or more fields. This allows you to:
+
 - Apply custom validation logic
 - Create custom input components
 - Combine multiple fields into a single UI component
@@ -3685,6 +3896,7 @@ import { useController } from '@wix/auto-patterns/form'; // Always import from t
 ```
 
 The hook requires:
+
 - **name**: The field name you want to edit (should match the schema field ID)
 - **control**: Retrieved from `form.control`
 - **defaultValue**: Set from `entity?.[fieldId]` when it exists
@@ -3728,7 +3940,6 @@ export const customNameField: FC<CustomComponentProps> = ({ form, entity }) => {
 };
 ```
 
-
 ### Example: Standalone Component (Not Field-Specific)
 
 Custom components can also be used to add UI elements not tied to specific fields:
@@ -3745,8 +3956,8 @@ export const infoCard: FC<CustomComponentProps> = ({ entity }) => {
         <Box direction="vertical" gap={2}>
           <Text weight="bold">Important Information</Text>
           <Text>
-            This custom component can display additional information or functionality
-            that isn't directly tied to a specific field.
+            This custom component can display additional information or
+            functionality that isn't directly tied to a specific field.
           </Text>
           {entity?.isVaccinated ? (
             <Text skin="success">This pet is vaccinated</Text>
@@ -3772,7 +3983,7 @@ export const useComponents = () => {
   // You can access React context and other hooks here
   return {
     customNameField,
-    infoCard
+    infoCard,
   };
 };
 ```
@@ -3837,9 +4048,7 @@ const CustomComponent: FC<CustomComponentProps> = ({ form, entity }) => {
         onChange={(e) => form.setValue('name', e.target.value)}
       />
 
-      {showSpecialMessage && (
-        <Text>Special message for special name!</Text>
-      )}
+      {showSpecialMessage && <Text>Special message for special name!</Text>}
     </Box>
   );
 };
@@ -3859,18 +4068,16 @@ const CustomComponent: FC<CustomComponentProps> = ({ form, entity }) => {
         onChange={(e) => form.setValue('name', e.target.value)}
       />
 
-      {showSpecialMessage && (
-        <Text>Special message for special name!</Text>
-      )}
+      {showSpecialMessage && <Text>Special message for special name!</Text>}
     </Box>
   );
 };
 ```
 
-
 ##### When to Use the Entity Object
 
 The `entity` object is useful for:
+
 - Setting initial values
 - Accessing read-only data that doesn't change
 - Comparing form state with original values (e.g., detecting if changes were made)
@@ -3883,7 +4090,7 @@ const CustomComponent: FC<CustomComponentProps> = ({ form, entity }) => {
   const controller = useController({
     name: 'name', // Field ID from the schema
     control: form.control,
-    defaultValue: entity?.name // Initialize from entity
+    defaultValue: entity?.name, // Initialize from entity
   });
 
   // Use watch for reactive updates
@@ -3898,9 +4105,7 @@ const CustomComponent: FC<CustomComponentProps> = ({ form, entity }) => {
           onChange={(e) => controller.field.onChange(e.target.value)}
         />
       </FormField>
-      {hasChanges && (
-        <Text size="small">Original value: {entity?.name}</Text>
-      )}
+      {hasChanges && <Text size="small">Original value: {entity?.name}</Text>}
     </Box>
   );
 };
@@ -3945,6 +4150,7 @@ When implementing a custom data source, you need to modify the `collection` conf
   }
 }
 ```
+
 ## Sections
 
 Sections allow you to group table rows under section headers, making it easier to organize and navigate through large datasets. This feature is especially useful when you want to categorize entities by specific criteria.
@@ -3982,6 +4188,7 @@ To enable sections, add the `sections` configuration to your table configuration
 ```
 
 **Key Properties:**
+
 - `entityTypeSource`: Must be set to `"custom"` instead of `"cms"`
 - `custom.id`: A unique identifier for your custom data source implementation
 
@@ -4008,6 +4215,7 @@ export default function YourPage() {
 #### Custom Data Source Function
 
 You must implement a custom data source function that:
+
 - Takes `collectionId` and `context` parameters
 - Returns a Promise that resolves to a `SchemaConfig` object
 - The `SchemaConfig` object must include:
@@ -4023,8 +4231,12 @@ You must implement a custom data source function that:
 ### Example Implementation Structure
 
 ```tsx
+import { SchemaConfig } from '@wix/auto-patterns/types';
 // customDataSources/myCustomDataSource.ts
-export const myCustomDataSource = async (collectionId: string, context: any) => {
+export const myCustomDataSource = async (
+  collectionId: string,
+  context: any,
+): Promise<SchemaConfig> => {
   return {
     id: 'myCustomCollection',
     fields: {
@@ -4033,17 +4245,31 @@ export const myCustomDataSource = async (collectionId: string, context: any) =>
     displayField: 'name',
     idField: '_id',
     actions: {
-      get: async (entityId: string) => { /* Implementation */ },
-      create: async (newEntity: any) => { /* Implementation */ },
-      update: async (updatedEntity: any) => { /* Implementation */ },
-      delete: async (entityId: string) => { /* Implementation */ },
-      bulkDelete: async (entityIds: string[]) => { /* Implementation */ },
-      find: async (query: Query, options?: any) => { /* Implementation */ }
-    }
+      get: async (entityId: string) => {
+        /* Implementation */
+      },
+      create: async (newEntity: any) => {
+        /* Implementation */
+      },
+      update: async (updatedEntity: any) => {
+        /* Implementation */
+      },
+      delete: async (entityId: string) => {
+        /* Implementation */
+      },
+      bulkDelete: async (entityIds: string[]) => {
+        /* Implementation */
+      },
+      find: async (query: Query, options?: any) => {
+        /* Implementation */
+      },
+    },
   };
 };
 ```
 
+> This is a simplified example of a custom data source implementation, do not use it as-is. You must implement the actual logic to connect to the FQDN schema.
+
 ### Hook Implementation
 
 In `components/customDataSources/index.tsx`:
@@ -4054,7 +4280,7 @@ import { myCustomDataSource } from './myCustomDataSource';
 export const useCustomDataSources = () => {
   // You can access React context and other hooks here
   return {
-    myCustomDataSource
+    myCustomDataSource,
   };
 };
 ```
@@ -4072,8 +4298,6 @@ When implementing custom data sources, you need to map your data source field ty
 - **Reference fields** → `'REFERENCE'`
 - **URL fields** → `'URL'`
 
-
-
 ### Validation Requirements
 
 - **Function Signature**: Custom data source must be a function with signature `(collectionId: string, context: any) => Promise<SchemaConfig>`
@@ -4130,7 +4354,7 @@ Section renderers are functions that determine how to group items and what infor
 #### Function Signature
 
 ```tsx
-function sectionRenderer(item: any): Section
+function sectionRenderer(item: any): Section;
 ```
 
 Where `Section` is the interface from @wix/patterns (re-exported from auto-patterns):
@@ -4153,6 +4377,7 @@ interface Section {
 ```
 
 The section renderer receives an item and returns:
+
 - **id**: A unique identifier for the section (items with the same id are grouped together)
 - **title**: The text displayed in the section header
 - **primaryAction** (optional): An action button displayed in the section header
@@ -4216,7 +4441,9 @@ export function groupByAgeAndVaccination(item: any): Section {
     badgeSkin = 'neutralLight';
   } else if (age >= 1 && age <= 5) {
     sectionId = isVaccinated ? 'young-vaccinated' : 'young-unvaccinated';
-    sectionTitle = `Young Adults (1-5 years) - ${isVaccinated ? 'Vaccinated' : 'Not Vaccinated'}`;
+    sectionTitle = `Young Adults (1-5 years) - ${
+      isVaccinated ? 'Vaccinated' : 'Not Vaccinated'
+    }`;
     badgeSkin = isVaccinated ? 'light' : 'danger';
   } else {
     sectionId = 'seniors';
@@ -4227,13 +4454,16 @@ export function groupByAgeAndVaccination(item: any): Section {
   return {
     id: sectionId,
     title: sectionTitle,
-    primaryAction: age < 1 ? {
-      id: 'special-care',
-      label: 'Special Care Info',
-      onClick: () => {
-        // Show special care information for puppies
-      },
-    } : undefined,
+    primaryAction:
+      age < 1
+        ? {
+            id: 'special-care',
+            label: 'Special Care Info',
+            onClick: () => {
+              // Show special care information for puppies
+            },
+          }
+        : undefined,
     badge: {
       visible: true,
       skin: badgeSkin,
@@ -4253,7 +4483,7 @@ import * as actions from './components/actions';
 
 <AutoPatternsOverridesProvider value={{ sections, columns, actions }}>
   <AutoPatternsApp configuration={config} />
-</AutoPatternsOverridesProvider>
+</AutoPatternsOverridesProvider>;
 ```
 
 ### Important Notes
@@ -4263,7 +4493,6 @@ import * as actions from './components/actions';
 - **Performance**: Section renderers are called for every item, so keep the logic lightweight.
 - **TableGridSwitch**: Sections work in both table and grid views when using TableGridSwitch.
 
-
 By implementing sections, you can significantly improve the user experience when dealing with large datasets by providing logical groupings that make information easier to find and understand.
 
 ## Slots
@@ -4271,6 +4500,7 @@ By implementing sections, you can significantly improve the user experience when
 Slots allow you to inject custom React components into collection pages at specific points in the component hierarchy. Unlike other overrides that modify existing functionality, slots enable you to add entirely custom UI elements anywhere within the collection page components array.
 
 Slots are useful for:
+
 - Adding custom banners or announcements above or below the table/grid
 - Inserting analytics widgets or dashboards
 - Adding custom promotional content
@@ -4288,6 +4518,7 @@ Slots are configured in the collection page configuration using the `CustomCompo
 ```
 
 **Key Properties:**
+
 - `type`: Must be set to `"custom"` to identify this as a slot component
 - `id`: A unique identifier that maps to your slot component implementation
 
@@ -4321,6 +4552,7 @@ Slot components can be positioned anywhere within the `components` array of a co
 ```
 
 This configuration will render:
+
 1. The custom `topBanner` component at the top
 2. The main collection component (table/grid) in the middle
 3. The custom `bottomStats` component at the bottom
@@ -4340,7 +4572,9 @@ export const TopBannerComponent: React.FC = () => {
     <Card>
       <Card.Content>
         <Box direction="vertical" gap={2}>
-          <Text size="large" weight="bold">Welcome to Pet Management</Text>
+          <Text size="large" weight="bold">
+            Welcome to Pet Management
+          </Text>
           <Text>Manage all your pets from this central dashboard.</Text>
           <Button size="small">Get Started</Button>
         </Box>
@@ -4355,11 +4589,15 @@ export const BottomStatsComponent: React.FC = () => {
       <Card.Content>
         <Box direction="horizontal" gap={4}>
           <Box direction="vertical" gap={1}>
-            <Text size="large" weight="bold">47</Text>
+            <Text size="large" weight="bold">
+              47
+            </Text>
             <Text size="small">Total Pets</Text>
           </Box>
           <Box direction="vertical" gap={1}>
-            <Text size="large" weight="bold">12</Text>
+            <Text size="large" weight="bold">
+              12
+            </Text>
             <Text size="small">Available for Adoption</Text>
           </Box>
         </Box>
@@ -4381,7 +4619,7 @@ export const useSlots = () => {
   // You can access React context and other hooks here
   return {
     topBanner: TopBannerComponent,
-    bottomStats: BottomStatsComponent
+    bottomStats: BottomStatsComponent,
   };
 };
 ```
@@ -4413,7 +4651,6 @@ export default function YourPage() {
 3. **Performance**: Slot components re-render with the page, so optimize for performance if needed
 4. **Styling**: Follow the design system patterns and responsive design principles
 
-
 **Important:** Every time you create a new slot component, you must import it and add it to the `useSlots` hook return object in the `./components/slots/index.tsx` file. The key must match the `id` specified in your JSON configuration.
 
 Slots provide a powerful way to enhance collection pages with custom functionality while maintaining the structure and features of the AutoPatterns system.