Takeover page

TakeoverPage from @prepared911/ui-takeover-page owns the whole viewport for one task. It suppresses the usual shell chrome (navigation rails, secondary headers), renders a branded TakeoverPageHeader with an explicit close, and hosts a single focused workflow underneath. Use it when the operator must commit to a task until it's done or dismissed.

It's the right surface for locked workflows—review an incident with drawers open, work through a migration wizard, or park the user in a read-only state while a background job runs—where ambient navigation would distract rather than help.

Use TakeoverPage for flows where leaving mid-task is destructive or confusing: an incident review with evidence playback, an export wizard, or an agreement step that gates further work. The full viewport signals "this is the task" and the close button is the single exit.

Maintenance pages, forced acknowledgments, and re-auth flows fit here. The header's branded slot and the vertical layout leave room for a short message and a single primary action without competing navigation.

When a review task needs multiple synchronized panels (list + detail + drawer + tool strip), TakeoverPage gives each panel room to breathe. The shell component ceases to compete for width, and the layout stays legible at narrower desktop sizes.

TakeoverPage composes two building blocks:

Close always routes back to the origin (the page that opened it) unless your app explicitly overrides. When unsaved state exists, prompt before closing; never close silently through a route change. Map Escape to the close control when the takeover has no conflicting modal surfaces open.

Modals, drawers, and popovers launched inside a takeover should stack above it; the takeover itself is not a modal, so don't trap focus across the whole surface—trap inside child overlays only.

Render errors with a clear recovery path (Callout variant error, or an inline retry state). The user can't use surrounding nav to escape, so make the exit obvious.

Takeover does not retarget to mobile; validate narrow-desktop widths and tablet landscape where operators actually work. Don't use it for flows that primarily run on phone sizes.

Do

Don't

Takeover needs clear focus management on open and close, a labeled header that screen readers can announce, and a close control reachable by keyboard. See the Accessibility page for focus patterns, Escape handling, and how to announce error states inside the takeover.