# State Management Recipes

Domain classification: design-engineering. Lifecycle: `experimental`.

## Repository Boundary

These are Design Engineering behavior recipes. The root `recipes/` directory remains the Layout corpus. A behavior recipe may reference a Layout recipe but cannot import state logic into its reusable CSS.

## Reusable Method

Choose a task, then review its owner map, event flow, substitution rules, and acceptance sequences.

- [Settings with explicit save](https://style.gallery/library/design-engineering/state-management/recipes/settings-save/index.md): draft, submission, acknowledgement, and guarded departure.
- [Search filters and detail](https://style.gallery/library/design-engineering/state-management/recipes/search-detail/index.md): route state, out-of-order reads, and stable selection.
- [Multi-step form](https://style.gallery/library/design-engineering/state-management/recipes/multi-step-form/index.md): retained fields, validation, branching, and final submit.
- [Deletion and supported undo](https://style.gallery/library/design-engineering/state-management/recipes/delete-undo/index.md): identity, duplicate policy, recovery, and actual reversibility.

### Composition Matrix

`E` means essential to this recipe's declared behavior; `S` means substitutable when the stated requirement changes; `O` is optional with its own contract; `—` means not required. Pattern names link to their standalone contracts.

| Pattern                                                                                                                        | Settings | Search/detail | Multi-step form | Delete/undo |
| ------------------------------------------------------------------------------------------------------------------------------ | -------- | ------------- | --------------- | ----------- |
| [Single owner](https://style.gallery/library/design-engineering/state-management/patterns/single-owner/index.md)               | E        | E             | E               | E           |
| [Derived state](https://style.gallery/library/design-engineering/state-management/patterns/derived-state/index.md)             | E        | E             | E               | O           |
| [ID selection](https://style.gallery/library/design-engineering/state-management/patterns/id-selection/index.md)               | —        | E             | —               | E           |
| [Draft/baseline](https://style.gallery/library/design-engineering/state-management/patterns/draft-and-baseline/index.md)       | E        | —             | E               | —           |
| [Submitted snapshot](https://style.gallery/library/design-engineering/state-management/patterns/submitted-snapshot/index.md)   | E        | —             | E               | —           |
| [Unsaved navigation](https://style.gallery/library/design-engineering/state-management/patterns/unsaved-navigation/index.md)   | E        | —             | E               | —           |
| [Latest request wins](https://style.gallery/library/design-engineering/state-management/patterns/latest-request-wins/index.md) | O        | E             | O               | —           |
| [Single flight](https://style.gallery/library/design-engineering/state-management/patterns/single-flight/index.md)             | E        | —             | E               | E           |
| [Optimistic overlay](https://style.gallery/library/design-engineering/state-management/patterns/optimistic-overlay/index.md)   | O        | —             | —               | S           |
| [URL state](https://style.gallery/library/design-engineering/state-management/patterns/url-state/index.md)                     | O        | S             | O               | O           |
| [Identity reset](https://style.gallery/library/design-engineering/state-management/patterns/identity-reset/index.md)           | E        | E             | E               | E           |
| [Versioned restore](https://style.gallery/library/design-engineering/state-management/patterns/versioned-restore/index.md)     | O        | —             | O               | —           |

Single owner and identity reset are lifecycle foundations in these recipes even where the short stack emphasizes task-specific mechanisms. For a fixed identity, reset may be implemented simply by disposal; reused screens must invalidate their old generation.

Substitution risks: replacing URL state loses history/deep-link recovery unless another navigation owner provides it. Replacing a pending deletion with an optimistic overlay requires definitive rejection versus uncertain-outcome handling. Replacing explicit save with autosave changes the recipe and needs a separate write ordering contract.

## Opinionated Guidance

Keep compositions smaller than the complete catalog. Optional restore and optimistic display should solve a named user need. Do not create a new primitive merely because a screen combines several existing ones.

## Platform-Specific Guidance

Keep native form behavior, router transitions, and focus restoration in the consuming UI. Model examples have no rendered geometry; use the linked Layout recipes to name scroll and source-order ownership.

## Unsupported Absolutes

The matrix describes proposed compositions, not universal requirements for every settings or search screen. It does not claim that all combinations have executed browser evidence.

## Verification Contract

Each recipe must expose a unique ownership map, a failure interleaving, and the consequence of replacing an essential choice. Execute consumer integration sequences separately from the 12 pattern model examples.

## Source, License, And Attribution

Locally authored synthesis and examples. No upstream implementation is copied. These experimental contracts describe consumer-owned behavior; review when a failure, ownership change, or platform change invalidates an assumption.

## IA Navigation

Parent: [State Management](https://style.gallery/library/design-engineering/state-management/index/index.md).
Next: [Continue the state management route](https://style.gallery/library/design-engineering/state-management/verification/index.md).