# Mercury Practice

> Practice ten interface patterns with Mercury UI, Reflect and Hypergraph: edit drafts, organize lists, review decisions and compare isolated state.

**When to use.** Use this when learning or verifying Mercury control bindings, validation, keyed lists, derived state, asynchronous recovery or scope isolation. Open an exercise by its fragment, follow its steps and inspect its checks. Use the official documentation for API contracts; this app demonstrates them with sample data.

**How to use.** Select an exercise, change its real controls, inspect the updated preview and copy the current implementation brief if needed. Exercise choices persist while switching screens and languages in this tab. Each reset affects only the state described in that exercise.

These are local examples, not connected agents or production actions. Drafts remain in this tab; refreshing restores samples. The packaged app blocks network requests. Copy is an explicit handoff of the visible brief.

Exercise checks describe observable behavior. They do not certify accessibility, design quality or learner mastery. Record what you observed, including failures, separately from expected results.

**Search desk** (`search`, v1)

Combine two filters and recover from an empty result without losing the search field.

**Try it**

1. Search for “native”; inspect the remaining component.
2. Choose the Composition family to produce no matches.
3. Clear the filters and search again using the keyboard.

**Check the result**

- Text and family filters work together; the empty result explains how to recover.
- Clear filters restores all eight entries and empties the query.

Reset boundary: Clear filters resets only this screen’s query and family.

**Profile editor** (`profile`, v1)

Keep editable text separate from the applied profile and make invalid submission recoverable.

**Try it**

1. Change the name and biography; compare the draft with the applied preview.
2. Clear the name and apply the profile.
3. Enter a name with surrounding spaces and apply again.

**Check the result**

- An invalid name keeps the old preview, displays an associated error, and receives focus.
- A valid Apply trims the name and brings the draft and applied version into agreement.

Reset boundary: Reset this screen restores the sample draft, applied profile, and validation state.

**Notifications** (`preferences`, v1)

Model dependent preferences without erasing choices when a control is disabled.

**Try it**

1. Enable push notifications, then turn on Quiet mode.
2. Choose a digest frequency and turn the summary digest off.
3. Turn the digest and immediate updates back on.

**Check the result**

- Quiet mode pauses immediate updates while preserving selected channels.
- The disabled frequency keeps its value and is restored when the digest returns. No messages are sent.

Reset boundary: Reset restores the sample channel choices, quiet mode, digest and frequency.

**Reading settings** (`reading`, v1)

Connect native controls to a readable preview that responds to each setting.

**Try it**

1. Focus the size slider and use the arrow keys to change it.
2. Choose Spacious line spacing and Focused measure.
3. Reset, then compare the restored size, spacing and width.

**Check the result**

- The actual text size follows the slider within 14–24 px; spacing and width change independently.
- The preview stays within the available width on a narrow screen.

Reset boundary: Reset restores 18 px, Comfortable spacing and Balanced measure only.

**Task collection** (`tasks`, v1)

Change a keyed collection while keeping entered text, completion state and useful keyboard focus.

**Try it**

1. Try adding an empty task, then enter a useful action and add it.
2. Complete the new task and move it earlier in the list.
3. Focus its Remove button and remove it; then restore the sample tasks.

**Check the result**

- Blank input is rejected and focused; reordering preserves each task’s identity and checked state.
- Removing a focused action hands focus to a neighboring task, or the add field if the list becomes empty.

Reset boundary: Restore sample tasks replaces the list, clears the draft and error, and resets the next sample ID.

**Review queue** (`review`, v1)

Make explicit review decisions, filter the queue, and undo a meaningful change.

**Try it**

1. Turn on Pending only and approve the first suggestion.
2. Defer another suggestion and inspect the remaining queue.
3. Undo the last decision, then turn the filter off and inspect the generated brief.

**Check the result**

- A decided item leaves the filtered queue and focus moves to the next useful control.
- Undo restores the previous decision; the brief asks for approved work only. Repeating an unchanged decision does not use an Undo step.

Reset boundary: Reset review decisions clears all decisions, Undo history and the pending filter.

**Resource planner** (`resources`, v1)

Reject an invalid allocation while keeping the last applied plan available.

**Try it**

1. Enter 20 build hours and inspect the total and error.
2. Try a blank or fractional hour value.
3. Choose whole, nonnegative hours totaling at most 12 and apply the allocation.

**Check the result**

- Invalid values disable Apply and share an explanation associated with the hour fields.
- The applied allocation remains unchanged until a valid plan is applied; an invalid brief uses the last valid plan.

Reset boundary: Reset restores both draft and applied allocation to 2 research, 4 build and 2 review hours.

**Workspace composer** (`workspace`, v1)

Switch component presentation without losing the model’s title or per-area note counts.

**Try it**

1. Give the workspace a title and add two notes to Research.
2. Switch from Detailed to Compact and add a note to Draft.
3. Switch back, leave this screen, and return.

**Check the result**

- The title and independent counts survive presentation changes and screen navigation.
- The two layouts use stable component constructors; counts are local sample interactions, not saved documents.

Reset boundary: Reset restores the sample title, Detailed layout and both note counts to zero.

**Request simulator** (`request`, v1)

Explain pending, failure and retry states while protecting the request draft.

**Try it**

1. Clear the request and try running it.
2. Enter a request, choose Failure, and run the simulation.
3. Keep the draft, choose Success, run again and inspect the result.

**Check the result**

- A blank request focuses an associated error; waiting prevents concurrent starts and keeps the initiating control focused.
- Failure retains the draft. A later edit clears old outcomes; no external agent, model or service is contacted.

Reset boundary: There is no reset button on this screen. Edit the request or outcome to clear old results; refresh the page to restore all samples.

**Scope comparison** (`scopes`, v1)

Prove that identical controls can belong to two isolated, retained Hypergraph forks.

**Try it**

1. Give the left workspace a name and add two notes there.
2. Give the right workspace a different name and add one note.
3. Visit another screen, return, and reset only the left workspace.

**Check the result**

- Editing one side never changes the other; both drafts survive navigation.
- Each generated brief contains its own side’s values. Resetting the left leaves the right unchanged.

Reset boundary: Each Reset affects only the named workspace’s name and note count. Refreshing the page restores both.

## Exercises

- [Search desk](https://mercury.jonnify.com/practice#search): Combine two filters and recover from an empty result without losing the search field.
- [Profile editor](https://mercury.jonnify.com/practice#profile): Keep editable text separate from the applied profile and make invalid submission recoverable.
- [Notifications](https://mercury.jonnify.com/practice#preferences): Model dependent preferences without erasing choices when a control is disabled.
- [Reading settings](https://mercury.jonnify.com/practice#reading): Connect native controls to a readable preview that responds to each setting.
- [Task collection](https://mercury.jonnify.com/practice#tasks): Change a keyed collection while keeping entered text, completion state and useful keyboard focus.
- [Review queue](https://mercury.jonnify.com/practice#review): Make explicit review decisions, filter the queue, and undo a meaningful change.
- [Resource planner](https://mercury.jonnify.com/practice#resources): Reject an invalid allocation while keeping the last applied plan available.
- [Workspace composer](https://mercury.jonnify.com/practice#workspace): Switch component presentation without losing the model’s title or per-area note counts.
- [Request simulator](https://mercury.jonnify.com/practice#request): Explain pending, failure and retry states while protecting the request draft.
- [Scope comparison](https://mercury.jonnify.com/practice#scopes): Prove that identical controls can belong to two isolated, retained Hypergraph forks.

## Resources

- [Exercise index](https://mercury.jonnify.com/practice/exercises.json): EN/RU, v1.
- [Documentation](https://mercury.jonnify.com/llms.txt)
- [Русская версия](https://mercury.jonnify.com/ru/practice/llms.txt)