The editing mode

Click the launcher and the page becomes editable. The button shrinks into the pointer, and the dock appears at the bottom centre of the viewport.

Selecting an element

• Hover outlines an element. A click selects it, and the page’s own click handlers do not run.
• Shift-click adds an element to the selection, or removes it.
• The arrow keys move the selection: ↑ to the parent, ↓ to the first child, ← and → to the siblings. In editable words they need Alt.

The element actions

Selecting an element opens a card at that element. The card holds Edit text, Move, Comment, Variations and Delete.

• Text is not editable until you choose Edit text.
• Move previews a new position among the siblings.
• A comment travels with the edit. It reaches the saved file and the Markdown your agent reads.
• Delete is temporary. It goes away when you leave the mode, and ⌘Z undoes it.

The dock

The dock stays in one place at the bottom centre. It does not follow the element, and an open control comes out over it. While a control, or one of the lists inside a button, is open, the element actions stand down. They come back when it closes.

The controls follow the element you selected.

• Text starts with font family, weight, size, line height, letter spacing, alignment, decoration and colour.
• A container or a media element starts with padding and margin.
• The + adds shadow, fill, border, padding and margin to that one element.

Layout

A container’s layout mode decides its controls.

• Flex shows direction, wrap, alignment and gap.
• Grid shows its columns and rows as columns × rows, and a count of auto where the grid names no tracks of that axis. It shows no alignment control, because a grid places its own cells.
• Absolute shows its top, right, bottom and left offsets, and no width or height.

Shadow

A shadow follows what it is on. The words of a text element are shadowed with text-shadow. A box is shadowed with box-shadow. The offsets and the blur are fields in the panel, two to a line, with the colour under them.

Numbers

Every number is a field you type into. No slider stands beside a field. A spacing that would need a word wears a glyph instead, and the word stays on the field for a screen reader.

Font size and font weight are one value each: a field, and an arrow that opens the common values. A value from the list writes the field. It is never shown twice.

Colour

Every colour is picked in the same picker.

• The text colour, a fill, a border and a shadow all use it.
• It has a saturation and brightness field with a dot to drag, and the hue slider.
• One line holds the hex code and the transparency as a percentage.
• The field takes #rgb, #rrggbb, #rrggbbaa, rgb() or rgba().
• A colour with any transparency is written as rgba(r, g, b, a). A solid one stays #rrggbb.

Editing text

Words are typed into where they stand. An element whose words are split by a child element, such as a paragraph around a link, is editable too. The words change in place, and the markup goes back as it was when you leave the mode.

The caret starts at the end of the words, not where the click landed. The card then holds Done alone: a click in the words moves the caret, and Done gives the words back.

Fonts

The font family control lists the fonts the page has, then the Google Fonts catalog, with a search field over both. The button in the dock shows the family name in that family.

The keyboard

• Shift+A wraps the selected siblings in a column flex container.
• Escape closes the open control, then leaves the mode.
• ⌘Z and Ctrl+Z undo. ⇧⌘Z and Ctrl+Y redo.
• ← and → move along the icons in the dock.
• Shift+Arrow does not extend the selection.

What an edit is

Every edit is one inline style on the live page. Edits are kept in sessionStorage while the mode is on, so a reload or a hot update brings them back. Leaving the mode reverts all of them.