React Personalization Pattern

// Recursive personalization contract
export type Personalization<T> = {
  type: "merge" | "replace";          // merge = selective, replace = full
  value: Partial<T> | T;
  nested?: { [K in keyof T]?: Personalization<T[K]> };
};

const itemListPersonalization: Personalization<ItemListProps> = {
  type: "merge",  // merge at the list level
  nested: {
    items: {
      type: "merge",  // merge the items array
      nested: {
        2: { // 0-based index → Item 3
          type: "replace", // fully replace this item
          value: {
            title: "Completely New Item 3",
            button: { label: "Buy Now", color: "red" },
          },
        },
      },
    },
  },
};