You are tasked with building a dynamic dashboard widget configuration interface. Users should be able to select a widget type, configure its properties via a dynamically generated form, see a live preview of the configured widget, and have their changes automatically saved with a debounce mechanism.

Core Requirements:

1. Widget Selection: Provide a mechanism (e.g., a dropdown or radio buttons) to select one of the predefined widget types. The available types are ChartWidget, TableWidget, and TextWidget.

2. Dynamic Configuration Form:

   • When a widget type is selected, a form should dynamically render based on that widget's specific schema.
   • Each field in the schema should correspond to an appropriate HTML input type (e.g., text for strings, number for numbers, select for enums).
   • The form should be a "controlled component", meaning its state is managed by React.

3. Live Preview:

   • As the user fills out the configuration form, a "live preview" area should update in real-time to reflect the current configuration.
   • The preview doesn't need to render a fully functional widget (e.g., a real chart or table). Instead, it should visually represent the configured properties (e.g., display the title, data source, or text content).

4. Debounced Autosave:

   • Implement an autosave mechanism that simulates saving the current widget configuration to a backend API.
   • This save operation should be debounced (e.g., 500ms delay). The API call should only fire if there are no new changes within the debounce period.
   • Simulate the API call using setTimeout.
   • Provide visual feedback (e.g., "Saving...", "Saved!") during and after the save operation.

5. Form Validation:

   • Implement basic client-side validation. For example, mark required fields and prevent saving if they are empty.
   • Display appropriate error messages next to invalid fields.

Architectural Expectations for an ARCHITECT-level candidate:

This problem targets an ARCHITECT level candidate. We are looking for:

• Robust Component Design: Well-structured, reusable, and maintainable React components. Clear separation of concerns (e.g., selector, form, preview). Effective use of props and state.
• Effective State Management: Appropriate use of useState, useEffect, useCallback, useMemo to manage component and application state. Avoid unnecessary re-renders and prop-drilling.
• Form Handling & Validation: Efficient and user-friendly form handling with controlled components, clear validation feedback, and robust error management.
• Asynchronous Operations & Debouncing: Correct implementation of simulated API calls, handling loading/success/error states, and a well-implemented debouncing logic.
• TypeScript Proficiency: Strong typing for all data structures, component props, and state, ensuring type safety throughout the application.
• Error Handling & Edge Cases: Consideration for how the application behaves under various conditions, including invalid inputs or simulated API failures (though full error boundaries are not required in 60 mins).

Time Remaining: ~60 minutes.