@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/EntityPage.md

@@ -38,220 +38,7 @@ This comprehensive demo demonstrates all the key functionalities supported by `E
 Explore the [Examples](./?path=/story/components-page-entitypage--entitypage&tab=Examples) section for a clearer understanding of the various states of the entity state, and examine each sub-component to see their available states and examples.
 
 
-```tsx
-import React from 'react';
-import {
-  CustomFieldsWidget,
-  EntityPage,
-  EntityPageState,
-  MoreActions,
-  TagsWidget,
-  useEntity,
-  useEntityPage,
-  useEntityPageContext,
-} from '@wix/patterns';
-import { useController, useForm } from '@wix/patterns/form';
-import { ExtendedFields, Tags } from '@wix/patterns/core';
-import {
-  Box,
-  Card,
-  FormField,
-  Input,
-  Text,
-  Checkbox,
-} from '@wix/design-system';
-import { InvoiceSmall } from '@wix/wix-ui-icons-common';
-
-interface MyEntity {
-  id?: string;
-  name?: string;
-  booleanField?: boolean;
-  createdDate?: Date;
-  updatedDate?: Date;
-  extendedFields?: ExtendedFields;
-  tags?: Tags;
-}
-
-interface FormFields {
-  name?: string;
-  booleanField?: boolean;
-}
-
-function FullExample() {
-  const form = useForm<FormFields>();
-  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity, FormFields>({
-    parentPageId: 'YOUR_PARENT_PAGE_ID',
-    form,
-    onSave: ({ widgetsFormData: { extendedFields, tags } }) =>
-      new Promise((res) => {
-        window.setTimeout(() => {
-          const formValues = form.getValues();
-
-          const updatedEntity: MyEntity = {
-            ...state.entity,
-            ...formValues,
-            extendedFields,
-            tags,
-          };
-
-          console.log('updated entity:', updatedEntity);
-
-          if (state.entity?.id) {
-            console.log('update request');
-          } else {
-            console.log('create request');
-          }
-
-          res({ updatedEntity });
-        }, 1000);
-      }),
-    saveErrorToast: (e) => 'Failed to save',
-    fetch: () =>
-      new Promise((res) => {
-        window.setTimeout(
-          () =>
-            res({
-              entity: {
-                id: 'id',
-                name: 'Entity Name',
-                booleanField: true,
-                createdDate: new window.Date(),
-                updatedDate: new window.Date(),
-                extendedFields: {
-                  namespaces: {
-                    _user_fields: {
-                      datetime: '2023-05-31T21:00:00.000Z',
-                      date: '1990-06-13',
-                      shortText: 'Hello world!',
-                      longText: 'Hello world! '.repeat(15),
-                      checkbox: true,
-                      decimal: 3.14,
-                      integer: 43,
-                      url: 'https://www.wix.com/',
-                    },
-                  },
-                },
-                tags: { privateTags: { tagIds: [] } },
-              },
-            }),
-          500,
-        );
-      }),
-  });
-
-  // Usually we will extract this component to a separate file
-  const MainContent = () => {
-    const pageState = useEntityPageContext<MyEntity, FormFields>();
-
-    const name = useController({
-      name: 'name',
-      control: pageState.form.control,
-      defaultValue: pageState.entity?.name,
-      rules: { required: { value: true, message: 'This field is required!' } },
-    });
-
-    const booleanField = useController({
-      name: 'booleanField',
-      control: pageState.form.control,
-      defaultValue: pageState.entity?.booleanField,
-    });
-
-    return (
-      <Card.Content>
-        <Box gap="SP2" direction="vertical">
-          <FormField label="Name">
-            <Input
-              dataHook="name-input"
-              status={name.fieldState.invalid ? 'error' : undefined}
-              statusMessage={name.fieldState.error?.message}
-              inputRef={name.field.ref}
-              value={name.field.value}
-              onChange={name.field.onChange}
-              onBlur={name.field.onBlur}
-            />
-          </FormField>
-          <FormField label="Boolean Field">
-            <Checkbox
-              dataHook="boolean-field-checkbox"
-              checked={booleanField.field.value}
-              onChange={booleanField.field.onChange}
-            >
-              Use boolean field
-            </Checkbox>
-          </FormField>
-        </Box>
-      </Card.Content>
-    );
-  };
-
-  const entity = useEntity<MyEntity, FormFields>(state);
-
-  return (
-    <EntityPage state={state}>
-      <EntityPage.Header
-        title={{ text: entity?.name ?? '' }}
-        subtitle={{
-          text: `id: ${entity?.id}`,
-          learnMore: {
-            url: 'https://www.wix.com/',
-            label: 'My custom learn more', // Defaults to "Learn more"
-          },
-        }}
-        moreActions={
-          <MoreActions
-            containerId="cd910877-1bb2-445e-822a-aa04a342c2f5"
-            items={[
-              [
-                {
-                  biName: 'open-subscriptions',
-                  text: 'Open Subscriptions',
-                  prefixIcon: <InvoiceSmall />,
-                  onClick: () => {
-                    console.log('Open Subscriptions');
-                  },
-                },
-              ],
-            ]}
-          />
-        }
-      />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Main Content Card" />
-            <Card.Divider />
-            <MainContent />
-          </EntityPage.Card>
-          <CustomFieldsWidget
-            fqdn="wix.patterns.dummyservice.v1.dummy_entity"
-            dataHook="demo-custom-fields-widget"
-            extendedFields={entity?.extendedFields}
-          />
-        </EntityPage.MainContent>
-        <EntityPage.AdditionalContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Side Content Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box gap="SP2" direction="vertical">
-                <Text>Stretched to 4/12 of available space.</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-          <EntityPage.Slots containerId="cd910877-1bb2-445e-822a-aa04a342c2f5" />
-          <TagsWidget
-            fqdn="wix.patterns.dummyservice.v1.dummy_entity"
-            dataHook="demo-tags-widget"
-            entityTypeName="My Entity"
-            entityId={entity?.id}
-            initialTags={entity?.tags}
-          />
-        </EntityPage.AdditionalContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/demo.tsx`
 
 ## Examples
 
@@ -261,80 +48,7 @@ function FullExample() {
 
 This example demonstrates a basic usage of the `EntityPage`.
 
-```tsx
-import React from 'react';
-import {
-  EntityPage,
-  EntityPageState,
-  useEntity,
-  useEntityPage,
-} from '@wix/patterns';
-import { useForm } from '@wix/patterns/form';
-import { Box, Card, Text } from '@wix/design-system';
-
-interface MyEntity {
-  id: string;
-  name?: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-interface FormValues {
-  name?: string;
-}
-
-function Basic() {
-  const form = useForm<FormValues>();
-  const state: EntityPageState<MyEntity, FormValues> = useEntityPage<
-    MyEntity,
-    FormValues
-  >({
-    parentPageId: '',
-    form,
-    onSave: async () => {
-      const formValues = form.getValues();
-
-      return Promise.resolve({
-        updatedEntity: {
-          ...state.entity,
-          ...formValues,
-        } as MyEntity,
-      });
-    },
-    saveErrorToast: (e) => 'Failed to save',
-    fetch: () =>
-      Promise.resolve({
-        entity: {
-          id: 'id',
-          name: 'Entity Name',
-          createdAt: new window.Date(),
-          updatedAt: new window.Date(),
-        },
-      }),
-  });
-
-  const entity = useEntity<MyEntity, FormValues>(state);
-
-  return (
-    <EntityPage state={state}>
-      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Name Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box gap="SP2" direction="vertical">
-                <Text>{entity?.name}</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.MainContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/basic.tsx`
 
 ---
 
@@ -342,80 +56,7 @@ function Basic() {
 
 This example illustrates the use of both main and additional content.
 
-```tsx
-import React from 'react';
-import {
-  EntityPage,
-  EntityPageState,
-  useEntity,
-  useEntityPage,
-} from '@wix/patterns';
-import { useForm } from '@wix/patterns/form';
-import { Box, Card, Text } from '@wix/design-system';
-
-interface MyEntity {
-  id: string;
-  name?: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-function TwoColumns() {
-  const form = useForm();
-  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
-    parentPageId: '',
-    form,
-    onSave: () =>
-      Promise.resolve({
-        updatedEntity: {
-          ...state.entity,
-        } as MyEntity,
-      }),
-    saveErrorToast: (e) => 'Failed to save',
-    fetch: () =>
-      Promise.resolve({
-        entity: {
-          id: 'id',
-          name: 'Entity Name',
-          createdAt: new window.Date(),
-          updatedAt: new window.Date(),
-        },
-      }),
-  });
-
-  const entity = useEntity<MyEntity>(state);
-
-  return (
-    <EntityPage state={state}>
-      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Main Content Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box gap="SP2" direction="vertical">
-                <Text>Stretched to 8/12 of available space.</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.MainContent>
-        <EntityPage.AdditionalContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Side Content Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box gap="SP2" direction="vertical">
-                <Text>Stretched to 4/12 of available space.</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.AdditionalContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/2-columns.tsx`
 
 ---
 
@@ -423,115 +64,7 @@ function TwoColumns() {
 
 This sample illustrates the skeleton state of an entity page based on the provided structure.
 
-```tsx
-import React from 'react';
-import { EntityPage, EntityPageState, useEntityPage } from '@wix/patterns';
-import { useForm } from '@wix/patterns/form';
-import { Box, Card, Text } from '@wix/design-system';
-
-interface MyEntity {
-  id: string;
-  name?: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-interface FormFields {
-  id: string;
-  name?: string;
-}
-
-function Loading() {
-  const form = useForm<FormFields>();
-  const state: EntityPageState<MyEntity, FormFields> = useEntityPage<
-    MyEntity,
-    FormFields
-  >({
-    parentPageId: 'YOUR_PARENT_ID_HERE',
-    form,
-    onSave: () =>
-      new Promise((resolve) => {
-        const formValues = form.getValues();
-        console.log('form values:', formValues);
-
-        window.setTimeout(
-          () =>
-            resolve({
-              updatedEntity: {
-                ...state.entity,
-                ...formValues,
-              } as MyEntity,
-            }),
-          1000,
-        );
-      }),
-    saveErrorToast: (e) => 'Failed to save',
-    fetch: () =>
-      new Promise((resolve) => {
-        const dateToResolve = new window.Date(window.Date.now());
-        // keep waiting :)
-        if (dateToResolve.getFullYear() === 2500) {
-          resolve({
-            entity: {
-              id: 'id',
-              name: 'My Entity',
-              createdAt: new window.Date(),
-              updatedAt: new window.Date(),
-            },
-          });
-        }
-      }),
-  });
-
-  return (
-    <EntityPage state={state}>
-      <EntityPage.Header title={{ text: 'Entity Page' }} />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box>
-                <Text>Main Card #1</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box>
-                <Text>Main Card #2</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.MainContent>
-        <EntityPage.AdditionalContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box>
-                <Text>Side Card #1</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box>
-                <Text>Side Card #2</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.AdditionalContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/loading.tsx`
 
 ---
 
@@ -539,76 +72,7 @@ function Loading() {
 
 This example demonstrates the error state when fetching an entity fails.
 
-```tsx
-import React from 'react';
-import {
-  EntityPage,
-  EntityPageState,
-  useEntity,
-  useEntityPage,
-} from '@wix/patterns';
-import { useForm } from '@wix/patterns/form';
-import { Box, Card, Text } from '@wix/design-system';
-
-interface MyEntity {
-  id: string;
-  name?: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-function FetchError() {
-  const form = useForm();
-  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
-    parentPageId: '',
-    form,
-    onSave: async () => {
-      return Promise.resolve({
-        updatedEntity: {
-          ...state.entity,
-        } as MyEntity,
-      });
-    },
-    saveErrorToast: (e) => 'Failed to save',
-    fetch: () =>
-      new Promise((_, reject) =>
-        window.setTimeout(() => reject(new Error('Something went wrong')), 1000),
-      ),
-  });
-
-  const entity = useEntity<MyEntity>(state);
-
-  return (
-    <EntityPage state={state}>
-      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Main Content Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box gap="SP2" direction="vertical">
-                <Text>Stretched to 8/12 of available space.</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.MainContent>
-        <EntityPage.AdditionalContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Side Content Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box gap="SP2" direction="vertical">
-                <Text>Stretched to 4/12 of available space.</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.AdditionalContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/error-on-fetch.tsx`
 
 ---
 
@@ -616,67 +80,7 @@ function FetchError() {
 
 This example demonstrates the error toast when saving an entity fails.
 
-```tsx
-import React from 'react';
-import {
-  EntityPage,
-  EntityPageState,
-  useEntity,
-  useEntityPage,
-} from '@wix/patterns';
-import { useForm } from '@wix/patterns/form';
-import { Box, Card, Text } from '@wix/design-system';
-
-interface MyEntity {
-  id: string;
-  name?: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-function SaveError() {
-  const form = useForm();
-  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
-    parentPageId: '',
-    form,
-    onSave: () => Promise.reject(new Error('Something went wrong')),
-    saveErrorToast: (e, { retry }) => ({
-      message: 'oops.. unknown error',
-      action: { text: 'Retry', onClick: retry },
-    }),
-    fetch: () =>
-      Promise.resolve({
-        entity: {
-          id: 'id',
-          name: 'Entity Name',
-          createdAt: new window.Date(),
-          updatedAt: new window.Date(),
-        },
-      }),
-  });
-
-  const entity = useEntity<MyEntity>(state);
-
-  return (
-    <EntityPage state={state}>
-      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box gap="SP2" direction="vertical">
-                <Text>I'm a card</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.MainContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/error-on-save.tsx`
 
 ---
 
@@ -684,83 +88,7 @@ function SaveError() {
 
 This examples demonstrates how to use the `saveCta` prop to override the default **Save** button text.
 
-```tsx
-import React from 'react';
-import {
-  EntityPage,
-  EntityPageState,
-  useEntity,
-  useEntityPage,
-} from '@wix/patterns';
-import { useForm } from '@wix/patterns/form';
-import { Box, Card, Text } from '@wix/design-system';
-
-interface MyEntity {
-  id: string;
-  name?: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-interface FormValues {
-  name?: string;
-}
-
-function SaveCta() {
-  const form = useForm<FormValues>();
-  const state: EntityPageState<MyEntity, FormValues> = useEntityPage<
-    MyEntity,
-    FormValues
-  >({
-    parentPageId: 'YOUR_PARENT_PAGE_ID',
-    form,
-    onSave: async () => {
-      const formValues = form.getValues();
-
-      return Promise.resolve({
-        updatedEntity: {
-          ...state.entity,
-          ...formValues,
-        } as MyEntity,
-      });
-    },
-    saveErrorToast: (e) => 'Failed to save',
-    fetch: () =>
-      Promise.resolve({
-        entity: {
-          id: 'id',
-          name: 'Entity Name',
-          createdAt: new window.Date(),
-          updatedAt: new window.Date(),
-        },
-      }),
-  });
-
-  const entity = useEntity<MyEntity, FormValues>(state);
-
-  return (
-    <EntityPage
-      state={state}
-      actionsBarConfig={{ saveCta: { text: 'ACTIVATE' } }}
-    >
-      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Name Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box gap="SP2" direction="vertical">
-                <Text>{entity?.name}</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.MainContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/overriding-save-button-text.tsx`
 
 ---
 
@@ -768,85 +96,7 @@ function SaveCta() {
 
 This example demonstrates how to enable item deletion from the entity page using the `deleteAction` option. A delete icon button appears in the actions bar. Clicking it opens a confirmation modal, and on success Cairo shows a toast and navigates back to the collection page.
 
-```tsx
-import React from 'react';
-import {
-  EntityPage,
-  EntityPageState,
-  useEntity,
-  useEntityPage,
-} from '@wix/patterns';
-import { useForm } from '@wix/patterns/form';
-import { Box, Card, Text } from '@wix/design-system';
-
-interface MyEntity {
-  id: string;
-  name?: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-interface FormValues {
-  name?: string;
-}
-
-function Delete() {
-  const form = useForm<FormValues>();
-  const state: EntityPageState<MyEntity, FormValues> = useEntityPage<
-    MyEntity,
-    FormValues
-  >({
-    parentPageId: '',
-    form,
-    onSave: async () => {
-      const formValues = form.getValues();
-
-      return Promise.resolve({
-        updatedEntity: {
-          ...state.entity,
-          ...formValues,
-        } as MyEntity,
-      });
-    },
-    fetch: () =>
-      Promise.resolve({
-        entity: {
-          id: 'entity-1',
-          name: 'Entity Name',
-          createdAt: new window.Date(),
-          updatedAt: new window.Date(),
-        },
-      }),
-    deleteAction: {
-      onDelete: async (entity) => {
-        console.log('Deleted entity:', entity.id);
-      },
-      itemName: (entity) => entity.name ?? 'item',
-    },
-  });
-
-  const entity = useEntity<MyEntity, FormValues>(state);
-
-  return (
-    <EntityPage state={state}>
-      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Name Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box gap="SP2" direction="vertical">
-                <Text>{entity?.name}</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.MainContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/delete-action.tsx`
 
 ---
 
@@ -854,73 +104,7 @@ function Delete() {
 
 This example demonstrates error handling when the delete operation fails. A custom `errorToast` provides a retry action.
 
-```tsx
-import React from 'react';
-import {
-  EntityPage,
-  EntityPageState,
-  useEntity,
-  useEntityPage,
-} from '@wix/patterns';
-import { useForm } from '@wix/patterns/form';
-import { Box, Card, Text } from '@wix/design-system';
-
-interface MyEntity {
-  id: string;
-  name?: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-function DeleteError() {
-  const form = useForm();
-  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
-    parentPageId: '',
-    form,
-    onSave: async () =>
-      Promise.resolve({
-        updatedEntity: { ...state.entity } as MyEntity,
-      }),
-    fetch: () =>
-      Promise.resolve({
-        entity: {
-          id: 'entity-1',
-          name: 'Entity Name',
-          createdAt: new window.Date(),
-          updatedAt: new window.Date(),
-        },
-      }),
-    deleteAction: {
-      onDelete: () => Promise.reject(new Error('Something went wrong')),
-      errorToast: (e, { retry }) => ({
-        message: 'Failed to delete entity',
-        action: { text: 'Retry', onClick: retry },
-      }),
-    },
-  });
-
-  const entity = useEntity<MyEntity>(state);
-
-  return (
-    <EntityPage state={state}>
-      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Box gap="SP2" direction="vertical">
-                <Text>Click the delete icon to see the error toast.</Text>
-              </Box>
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.MainContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/delete-error-handling.tsx`
 
 ---
 
@@ -930,107 +114,7 @@ function DeleteError() {
 
 This demonstrates how to use [useController](https://react-hook-form.com/docs/usecontroller) with the default value set at the `Card.Content` level. Note that the `state.entity` value is initialized following the Card skeleton loader. To obtain the initial value, it must be accessed within the Card.Content child, as illustrated in the following example. Accessing it before or at a higher level will result in an `undefined` value.
 
-```tsx
-import React from 'react';
-import {
-  EntityPage,
-  EntityPageState,
-  useEntity,
-  useEntityPage,
-  useEntityPageContext,
-} from '@wix/patterns';
-import { useController, useForm } from '@wix/patterns/form';
-import { Box, Card, FormField, Input } from '@wix/design-system';
-import { CardContainerProps } from '../../../dist/types/components/CardContainer';
-
-interface MyEntity {
-  id: string;
-  name?: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-interface FormValues {
-  name?: string;
-}
-
-function useControllerExample() {
-  const form = useForm<FormValues>();
-  const state: EntityPageState<MyEntity, FormValues> = useEntityPage<
-    MyEntity,
-    FormValues
-  >({
-    parentPageId: '',
-    form,
-    onSave: async () => {
-      const formValues = form.getValues();
-
-      return Promise.resolve({
-        updatedEntity: {
-          ...state.entity,
-          ...formValues,
-        } as MyEntity,
-      });
-    },
-    saveErrorToast: (e) => 'Failed to save',
-    fetch: () =>
-      Promise.resolve({
-        entity: {
-          id: 'id',
-          name: 'Entity Name',
-          createdAt: new window.Date(),
-          updatedAt: new window.Date(),
-        },
-      }),
-  });
-
-  // Usually we will extract this component to a separate file
-  const CardContent = () => {
-    const pageState = useEntityPageContext<MyEntity, FormValues>();
-    const name = useController({
-      name: 'name',
-      control: pageState.form.control,
-      defaultValue: pageState.entity?.name,
-      rules: {
-        required: { value: true, message: 'This field is required!' },
-      },
-    });
-
-    return (
-      <Box gap="SP2" direction="vertical">
-        <FormField label="Name">
-          <Input
-            dataHook="name-input"
-            inputRef={name.field.ref}
-            value={name.field.value}
-            onChange={name.field.onChange}
-            onBlur={name.field.onBlur}
-          />
-        </FormField>
-      </Box>
-    );
-  };
-
-  const entity = useEntity<MyEntity, FormValues>(state);
-
-  return (
-    <EntityPage state={state}>
-      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Name Card" />
-            <Card.Divider />
-            <Card.Content>
-              <CardContent />
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.MainContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/input-initialization-with-usecontroller.tsx`
 
 ---
 
@@ -1038,130 +122,18 @@ function useControllerExample() {
 
 This demonstrates how to use [Controller](https://react-hook-form.com/docs/usecontroller/controller) where you can easily access the entity by using `useEntity`. This method allows for accessing the entity much earlier in the process. As a result, the default value will be dynamically updated as soon as the entity itself is updated, as shown in the example below.
 
-```tsx
-import React from 'react';
-import {
-  EntityPage,
-  EntityPageState,
-  useEntity,
-  useEntityPage,
-} from '@wix/patterns';
-import { Controller, useController, useForm } from '@wix/patterns/form';
-import { Box, Card, FormField, Input } from '@wix/design-system';
-import { CardContainerProps } from '../../../dist/types/components/CardContainer';
-
-interface MyEntity {
-  id: string;
-  name?: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-interface FormValues {
-  name?: string;
-}
-
-function ControllerExample() {
-  const form = useForm<FormValues>();
-  const state: EntityPageState<MyEntity, FormValues> = useEntityPage<
-    MyEntity,
-    FormValues
-  >({
-    parentPageId: '',
-    form,
-    onSave: async () => {
-      const formValues = form.getValues();
-
-      return Promise.resolve({
-        updatedEntity: {
-          ...state.entity,
-          ...formValues,
-        } as MyEntity,
-      });
-    },
-    saveErrorToast: (e) => 'Failed to save',
-    fetch: () =>
-      Promise.resolve({
-        entity: {
-          id: 'id',
-          name: 'Entity Name',
-          createdAt: new window.Date(),
-          updatedAt: new window.Date(),
-        },
-      }),
-  });
-
-  const entity = useEntity<MyEntity, FormValues>(state);
-
-  return (
-    <EntityPage state={state}>
-      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
-      <EntityPage.Content>
-        <EntityPage.MainContent>
-          <EntityPage.Card minHeight="24px">
-            <Card.Header title="Name Card" />
-            <Card.Divider />
-            <Card.Content>
-              <Controller
-                control={form.control}
-                name="name"
-                defaultValue={entity?.name}
-                rules={{
-                  required: { value: true, message: 'This field is required!' },
-                }}
-                render={({
-                  field: { onChange, onBlur, value, ref },
-                  fieldState: { invalid, error },
-                }) => (
-                  <FormField
-                    label="Name"
-                    status={invalid ? 'error' : undefined}
-                    statusMessage={error?.message}
-                  >
-                    <Input
-                      dataHook="name-input"
-                      inputRef={ref}
-                      value={value}
-                      onChange={onChange}
-                      onBlur={onBlur}
-                    />
-                  </FormField>
-                )}
-              />
-            </Card.Content>
-          </EntityPage.Card>
-        </EntityPage.MainContent>
-      </EntityPage.Content>
-    </EntityPage>
-  );
-}
-```
+Example code: read `dist/docs/EntityPage/input-initialization-with-controller.tsx`
 
 ## API
 
-### Extends
-
-[Page](https://www.docs.wixdesignsystem.com/?path=/story/components-layout-page--page)
-
 ### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `state` | `EntityPageState<T, V>` | Yes | - | EntityPageState instance created with the `useEntityPage` hook |
-| `actionsBarConfig` | `ActionsBarConfig` | No | - | Configuration for the actions bar |
-| `children` | `ReactNode` | No | - | Accepts compound components as child items: - `<Page.Header/>` - `<Page.Content/>` - `<Page.Tail/>` - `<Page.Section/>` - `<Page.Footer/>` |
-| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute that can be used in the tests |
-| `backgroundImageUrl` | `string` | No | - | Provides a link to the background image source (URL). Image will be displayed at the top of a page, underneath the \<Page.Header/>. |
-| `maxWidth` | `number` | No | - | Sets the maximum width of the page (paddings excluded) |
-| `minWidth` | `number` | No | - | Sets the minimum width of the page (paddings excluded). When `mobile` is enabled on `<WixDesignSystemProvider/>`, the default minimum width is removed, but an explicitly provided value is still applied. |
-| `height` | `string` | No | - | Sets the height of the page in pixels (px), viewport height (vh), etc. |
-| `sidePadding` | `number` | No | - | Sets the side paddings of a page |
-| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component’s root element. |
-| `gradientClassName` | `string` | No | - | Specifies a CSS class name that defines a gradient background for \<Page.Header/> |
-| `scrollableContentRef` | `((ref: HTMLElement \| null) => void)` | No | - | Defines a reference called together with page scrollable content ref after page mount. <br/> **Note** - if you need this ref only for listening to scroll events on the scrollable content then use this prop instead: `scrollProps = {onScrollChanged/onScrollAreaChanged}` |
-| `zIndex` | `number` | No | - | Specifies the stack order (z-index) of a page |
-| `horizontalScroll` | `boolean` | No | - | Enables page content to scroll horizontally when its width exceed maximum allowed width |
-| `scrollProps` | `ScrollableContainerCommonProps` | No | - | Pass properties related to the scrollable content of the page. <br/> **onScrollAreaChanged** - defines a handler function for scroll area changes. Function is triggered when the user scrolls to a different area of the scrollable content. See signature for possible areas: `function({area: {y: AreaY, x: AreaX}, target: HTMLElement}) => void` `AreaY`: top \| middle \| bottom \| none `AreaX`: start \| middle \| end \| none (not implemented yet) <br/> **onScrollAreaChanged** - defines a general handler for scroll changes with throttling (100ms): `function({target: HTMLElement}) => void` |
+Read `dist/dts-bundle/components/EntityPage.d.ts` for `EntityPage`'s full prop list, with types and
+descriptions. They are not repeated here, so the bundle is the single source of truth.
+
+A one-line stub in that file is an answer, not a truncation: an empty body with a
+"Produced by" note means you get the value from that hook or factory rather than
+constructing it. `dist/dts-bundle/index.json` maps every name to its bundle path.
 
 ## BI