Floating Builder Toolbar

The larger a page gets, the more often you need to scroll away from where you're working to access builder controls. Add a component at the top of the page while working on the bottom. Undo a change while your focus is mid-page. Save. Preview. The controls exist, but reaching them requires navigation that interrupts the editing flow.

The floating builder toolbar follows your scroll position, keeping common actions accessible wherever you are on the page.

What's in the Toolbar

The floating toolbar contains the operations used most frequently during editing:

• Add component: Opens the component picker to insert a new component at the current scroll position
• Undo / Redo: Revert the last change or replay a reverted change
• Save: Commit the current state of the page
• Preview: Toggle live preview mode to see the page without builder chrome
• Component navigator: Open the component hierarchy panel to select any component by name

These seven operations cover the vast majority of builder interactions. Having them follow the viewport means they're available with a single click regardless of where editing is happening on the page.

Positioning and Persistence

The toolbar floats at the bottom edge of the viewport, centered horizontally. It doesn't overlay page content — it occupies space that scrolls with the page but stays anchored to the bottom of the visible area.

The toolbar can be collapsed to a minimal pill that shows only essential icons, freeing up vertical space for long pages. The collapsed state is remembered across builder sessions.

Context-Aware State

The toolbar reflects the current state of the editor. Undo is grayed out when there's nothing to undo. The save button shows a "saved" indicator when there are no unsaved changes, and a count of unsaved changes when there are. Preview mode is indicated by a visual state change on the preview icon.

These state indicators mean you always know where you stand — whether there are unsaved changes, whether undo is available — without looking at any other panel.

Keyboard Shortcuts

Every toolbar action has a keyboard shortcut. The shortcuts are shown in tooltips when hovering over toolbar buttons. Experienced builders can work largely from the keyboard, using the floating toolbar as a reference for shortcuts until they're memorized.

The combination of keyboard shortcuts and a persistent floating toolbar means editing stays fast whether you prefer mouse, keyboard, or a mix of both.