Modal Dialog

Requirements

• Build the reusable Modal component using the supplied App harness. It accepts a stable unique id, open state, title, description, projected content, and an onClose/close callback. Only one instance is open at a time.
• Render no overlay or dialog DOM when closed. When open, show the supplied overlay, visible heading/description, close button, and arbitrary projected content. The host owns open state; request closure through the callback rather than mutating props.
• Keep instance IDs and data-testid selectors unique. Both profile and help must work with the same component. The profile content’s Cancel and Save buttons are supplied to demonstrate externally requested closure.
• The full stylesheet and host harness are supplied. Do not use the native dialog element or a modal library: implement the behavior for this level in Modal and its optional modal-effects.js helper.

Examples

Input: Open Edit profile, then use the close button.
Output: The profile dialog appears and then closes; the host remains usable.

Input: Open Read help using the same Modal implementation.
Output: The second instance uses its own title and content.