Environment variables

Tab

Moves through the header actions, search, view switch, and each row's reveal, copy, environment toggles, and edit button.

EnterorSpace

Reveals or hides a value, turns an environment on or off for a row, opens the inline editor, or presses a button.

Escape

Closes the inline editor or the add panel and returns focus to the button that opened it.

Arrow keys

Move between options in the view switch, the add mode switch, and the compare environment selects.

Enter in a form

Saves the edited value, saves a new variable, or imports the parsed .env lines.

• Masked values render as bullets hidden from assistive technology plus a visually hidden "Hidden value" or "Sensitive value, write-only" label; the real value is only rendered after Reveal.
• Reveal and environment toggles are buttons with aria-pressed and names that include the key, such as "Production for DATABASE_URL".
• Each row's toggles sit in a labelled group; the wide matrix column heads are decorative and every toggle carries its own name.
• Inline errors (invalid key, key already set in an environment, empty value) are tied to their fields; scope conflicts appear as an alert under the row.
• A polite live region announces every change, import, removal, and redeploy result, and the .env parse summary updates live as you type.
• Pointer focus draws no ring; keyboard focus shows Arc's shared focus ring. Keyboard position shows as a fill on toggles and icon buttons, matching hover.

• The redeploy banner, add panel, inline editor, and conflict notes open with height and opacity on the smooth spring and close with a quicker exit ease.
• Environment toggles fill with a snappy scale and draw their check with pathLength, both without overshoot.
• Revealing a value crossfades the mask and the value with a short rise in a fixed height slot, so the row never jumps.
• Added and removed rows grow and collapse their height so the list closes its gap; saved or imported rows glow once in the accent and fade.
• The Variables and Compare views crossfade with a small rise. Reduced motion removes all travel and lands every change at once.

• From a 760px container, rows become a matrix: key, value, one toggle column per environment with a count of values set, and an edit action.
• Below that, each row stacks the key and edit action, then the value, then three labelled environment pills in an even grid.
• Below 560px header actions, search, form actions, and the redeploy button go full width; the .env preview drops the masked value column.
• Toggles, icon buttons, and the swap control grow to 44px targets on touch screens. The block is a container query, so it adapts to the space it is placed in.

• The .env text is parsed in a memo keyed on the text, rows, and chosen environments; there is no per-frame work.
• Only revealed rows render their value and copy button, and only the open row renders an editor.
• Timers for notes, the saved glow, and the redeploy confirmation are cleared on change and unmount.

• Choose it for a project settings page in a hosting, deployment, or backend platform. Wire onChange to your store and onRedeploy to your deploy API.
• Search matches key names only, never values. Compare shows a six character fingerprint of each value, so two environments can be checked without exposing either.
• Sensitive rows are write-only: the editor starts empty and saving replaces the value; the flag cannot be turned off without removing and re-adding the variable.
• The .env parser handles comments, blank lines, export prefixes, quotes, and inline comments. Later duplicates win the key and earlier ones are skipped; keys that start with a number or contain other characters are rejected.

The full library index for assistants is at /llms.txt.