Feature Flags Command Menu Block for Svelte

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the Flags page, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a flag you switched in the copy is there in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

It changes which value every row shows, and which one a press changes. A flag is a Flag with a Cell for each environment, { on, pct }, and cellOf(flag, env) reads the one for the shown environment, so a flag can be on in Dev, half on in Staging and off in Production. Switching the environment announces how many flags are on there, and the switch always has one chosen so the list is never unexplained.

The minus and the plus on a row, or Alt with the left and right arrows from the highlighted row, move the rollout by ten points between 0 and 100. A flag that is off cannot be stepped: the buttons read as disabled and the status line says to switch it on first. Turning a flag on from 0% starts it at 10%, so "on" never means nobody. The buttons take no focus of their own, so the highlighted row stays where it is; the keys are the keyboard route, and the status line says the new value.

All of it. The flags and their values are state in the block, and every status line ends with "In this demo only". In your app load START from your flag service, send the change from flip and nudge, and read the environment names from your project. Keep the confirmation for Production: a flag that reaches real users deserves a second step before it flips.

Yes. Type to search the keys, the arrow keys move through the rows, Enter flips the flag and Space does too while the field is empty. Alt with the left or right arrow steps the rollout of the highlighted row, and the environment switch is a group of toggle buttons above the field. Escape closes the menu with focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.

The copy shown on load docks to the top of the stage so the keyboard does not cover the foot. In each row the rollout moves under the key instead of beside it, the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.