User Preferences Dialog Block for React

So you can see it without a click. On load the sheet is a copy drawn in place at the end of the frame: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Preferences button opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same PrefFields component and share the block's state, so what you chose in the copy is there in the real one. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

No. The preview card is drawn from this page's own colours with its two main ones traded: its background takes the foreground colour and its ink takes the background, and on a dark page they trade back. System draws the light and dark halves split along a diagonal. No dark class is written anywhere and the site's theme is untouched; in your app apply the choice to your own theme provider when it is saved.

Text size changes the sample sentence at once, Small, Medium or Large. Reduce motion replays a small Saved chip's entrance: it slides in with motion on and appears at once with motion reduced, and the line under the switch says which. The default view, Show completed tasks and Open links in a new tab take effect on the drawn page when you save. Every change also says what it did in a polite message.

Reset to defaults puts the defaults in the draft, six settings, and the same button then reads Undo reset until you change something else: pressing it puts your edits back. Neither saves anything; Save preferences does, and closing the sheet any other way drops the unsaved edits. Reset says when you are already at the defaults.

All of it. The tasks, the defaults and what is saved are typed constants, and Save changes only the drawn page. In your app load the saved preferences with the user's profile, save them from save, and apply the text size and motion setting to the whole app, ideally also honouring the system's reduced-motion setting when the user has made no choice.

Yes. The real sheet is named Preferences, focus starts inside and stays there until it closes, and Escape and the close button return focus to the header button. The theme group, the text size and the Select use the arrow keys, each switch is named for its setting and flips with Space, and the body scrolls inside the sheet while the foot stays. The trigger is passed to SheetTrigger through render, and the sheet is controlled with open and onOpenChange. The sheet opens from the end of the page's reading direction, the right in a left-to-right page. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the button.