stylegallery 0.1.6 → 0.1.7

package/design-engineering/state-management/patterns/unsaved-navigation.md

@@ -0,0 +1,100 @@
+---
+type: Domain Guide
+title: Unsaved Changes And Navigation
+description: Make leaving an edited screen an explicit decision without losing the current draft.
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Unsaved Changes And Navigation
+
+## Repository Boundary
+
+Make leaving an edited screen an explicit decision without losing the current draft. This pattern belongs to Design Engineering and adds no Layout CSS or shared store implementation.
+
+## Reusable Method
+
+Use when route changes can discard meaningful user work. Do not interrupt navigation for harmless transient selection or derived values.
+
+### State Model And Ownership
+
+The form owns dirty; the router integration owns a pending destination and guard status. The confirmation owns a decision, not a second copy of form data. Save-and-leave must recheck dirty after acknowledgement.
+
+### Transitions
+
+| Event and precondition | Next state | Effect or invariant |
+| --- | --- | --- |
+| Navigate while clean | Destination committed | Leave normally |
+| Navigate while dirty | Decision pending | Retain current screen and destination |
+| Cancel decision | Pending cleared | Stay and return focus |
+| Discard decision | Destination committed | Explicitly abandon draft |
+| Save fails or later edits remain | Stay | Preserve draft and offer recovery |
+
+### Minimal Executable Example
+
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+
+```js
+import assert from "node:assert/strict";
+let dirty = true, pending = null, location = "editor";
+function navigate(to) {
+  if (dirty) pending = to;
+  else location = to;
+}
+function decide(choice) {
+  if (choice === "cancel") pending = null;
+  if (choice === "discard" && pending !== null) {
+    dirty = false;
+    location = pending;
+    pending = null;
+  }
+}
+navigate("list");
+decide("cancel");
+assert.equal(location, "editor");
+assert.equal(dirty, true);
+navigate("list");
+decide("discard");
+assert.equal(location, "list");
+assert.equal(pending, null);
+```
+
+### What Breaks If Removed
+
+If route mutation happens before the guard, the form may already be destroyed when Cancel runs. If any save success releases navigation, later unsaved edits can still be lost.
+
+### Composition And Substitution
+
+Use [submitted snapshot](submitted-snapshot.md) for Save-and-leave and [URL state](url-state.md) for committed destinations. A pending destination is not a committed URL.
+
+## Opinionated Guidance
+
+Declare what a second navigation attempt does while confirmation is open: this model replaces the destination with the latest attempt. Verify the displayed decision matches it.
+
+## Platform-Specific Guidance
+
+In-app routing and document unload have different capabilities. Browser unload prompts are constrained and unreliable as a sole recovery strategy; use optional draft persistence when needed. Verify keyboard focus entry/return for the confirmation.
+
+Platform reference: [MDN API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event), checked 2026-09-16. This supports the named browser boundary; the model and product policy remain local synthesis.
+
+## Unsupported Absolutes
+
+An in-memory guard cannot guarantee preservation after process termination or device failure.
+
+## Verification Contract
+
+- Cancel a guarded route change; values and focus return to the editor.
+- Attempt another destination while the decision is open; apply the declared policy.
+- Save A, edit B, then acknowledge A; do not leave with dirty B.
+
+Record actual outcomes separately using the [verification matrix](../verification.md).
+
+## 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](../index.md).
+Next: [Continue the state management route](../recipes/index.md).

package/design-engineering/state-management/patterns/url-state.md

@@ -0,0 +1,96 @@
+---
+type: Domain Guide
+title: URL State And History
+description: Keep shareable screen state consistent across links, refresh, and browser history.
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+---
+
+# URL State And History
+
+## Repository Boundary
+
+Keep shareable screen state consistent across links, refresh, and browser history. This pattern belongs to Design Engineering and adds no Layout CSS or shared store implementation.
+
+## Reusable Method
+
+Use for committed search, filters, pagination, and selected IDs that should be shareable. Keep secrets, sensitive drafts, and hover state out of URLs.
+
+### State Model And Ownership
+
+The route owns committed query state; a text field may own an uncommitted buffer. Parsing supplies validated defaults. User commits write URL parameters; history navigation reads them without writing a new entry.
+
+### Transitions
+
+| Event and precondition | Next state | Effect or invariant |
+| --- | --- | --- |
+| Open or history traversal | Parsed route state | Render without another push |
+| Commit filter | New route; page reset | Push a meaningful navigation entry |
+| Normalize invalid input | Validated defaults | Replace only under declared canonicalization policy |
+
+### Minimal Executable Example
+
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+
+```js
+import assert from "node:assert/strict";
+function readRoute(href) {
+  const u = new URL(href);
+  const raw = u.searchParams.get("page") ?? "1";
+  const n = /^\d+$/.test(raw) ? Number(raw) : NaN;
+  return { q: u.searchParams.get("q") ?? "", page: Number.isSafeInteger(n) && n > 0 ? n : 1 };
+}
+function commitQuery(href, q) {
+  const u = new URL(href);
+  if (q) u.searchParams.set("q", q); else u.searchParams.delete("q");
+  u.searchParams.delete("page");
+  return u.href;
+}
+const original = "https://example.test/items?q=A&page=3&view=grid#results";
+const changed = commitQuery(original, "B & C");
+assert.deepEqual(readRoute(changed), { q: "B & C", page: 1 });
+assert.equal(new URL(changed).searchParams.get("view"), "grid");
+assert.equal(new URL(changed).hash, "#results");
+assert.deepEqual(readRoute(original), { q: "A", page: 3 }); // Back reads old URL.
+assert.equal(readRoute("https://example.test/?page=Infinity").page, 1);
+```
+
+### What Breaks If Removed
+
+Writing a new history entry in response to a history event creates a loop. Keeping the old page after changing the filter can display an apparently empty collection. Rebuilding the URL from scratch can drop unrelated parameters or fragments.
+
+### Composition And Substitution
+
+Use [latest request wins](latest-request-wins.md) for data reads and [unsaved navigation](unsaved-navigation.md) before committing a destructive route change. Reset local input from history only under the declared editing policy.
+
+## Opinionated Guidance
+
+Decide push versus replace from meaningful navigation steps. Do not make every keystroke a Back-button stop by accident.
+
+## Platform-Specific Guidance
+
+Browser adapters must handle popstate and their router's navigation API; the pure URL functions do not install listeners. SSR and client must use the same parser and defaults.
+
+Platform reference: [MDN API documentation](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState), checked 2026-09-16. This supports the named browser boundary; the model and product policy remain local synthesis.
+
+## Unsupported Absolutes
+
+A URL is not a safe persistence medium for private data, nor does parsing prove authorization to access a selected entity.
+
+## Verification Contract
+
+- Commit query B from page 3; reset to page 1 and preserve unrelated parameters.
+- Back, Forward, reload, and paste a deep link; displayed controls agree with the URL.
+- Reject malformed page values; avoid URL-to-state-to-URL loops.
+
+Record actual outcomes separately using the [verification matrix](../verification.md).
+
+## 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](../index.md).
+Next: [Continue the state management route](../recipes/index.md).

package/design-engineering/state-management/patterns/versioned-restore.md

@@ -0,0 +1,95 @@
+---
+type: Domain Guide
+title: Versioned And Scoped State Restore
+description: Restore persisted preferences only when their schema and ownership scope are valid.
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Versioned And Scoped State Restore
+
+## Repository Boundary
+
+Restore persisted preferences only when their schema and ownership scope are valid. This pattern belongs to Design Engineering and adds no Layout CSS or shared store implementation.
+
+## Reusable Method
+
+Use for intentional persistence of non-sensitive preferences or drafts with a declared retention policy. Keep state in memory if cross-session recovery has no user value.
+
+### State Model And Ownership
+
+The persistence adapter owns a versioned envelope and scope key. Decoding validates shape and allowed values before applying. This example rejects old versions; migration is a separate explicit function. Current user edits outrank a late restore.
+
+### Transitions
+
+| Event and precondition | Next state | Effect or invariant |
+| --- | --- | --- |
+| Read valid current-scope record | Restored values | Apply only before later local edits |
+| Malformed, old, or wrong-scope record | Defaults | Preserve current usable state |
+| Write fails | In-memory state retained | Expose persistence failure where recovery matters |
+| Logout or scope change | New scoped state | Do not reuse another account's envelope |
+
+### Minimal Executable Example
+
+Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with `npm run test:state-management`. The assertions exercise the local model, not a browser or backend.
+
+```js
+import assert from "node:assert/strict";
+function restore(raw, scope) {
+  try {
+    const record = JSON.parse(raw);
+    if (!record || record.version !== 1 || record.scope !== scope) return "compact";
+    return ["compact", "comfortable"].includes(record.density) ? record.density : "compact";
+  } catch { return "compact"; }
+}
+const raw = JSON.stringify({ version: 1, scope: "account:A", density: "comfortable" });
+assert.equal(restore(raw, "account:A"), "comfortable");
+assert.equal(restore(raw, "account:B"), "compact");
+assert.equal(restore("{broken", "account:A"), "compact");
+assert.equal(restore(JSON.stringify({ version: 0 }), "account:A"), "compact");
+let editRevision = 0, density = "compact";
+const restoreStartedAt = editRevision;
+density = "comfortable"; editRevision++;
+if (editRevision === restoreStartedAt) density = restore(null, "account:A");
+assert.equal(density, "comfortable");
+```
+
+### What Breaks If Removed
+
+Blind JSON parsing can crash startup. An unscoped storage key leaks settings across accounts. Applying a delayed restore unconditionally overwrites edits made while storage was loading.
+
+### Composition And Substitution
+
+Use [identity reset](identity-reset.md) for account changes. Persist only source values from [derived state](derived-state.md); do not restore loading flags, request IDs, or obsolete cached errors.
+
+## Opinionated Guidance
+
+Choose migration, expiry, and multi-tab conflict policies before persisting. A version field without a decoder or migration rule is not a compatibility strategy.
+
+## Platform-Specific Guidance
+
+Browser storage access and writes can throw or be unavailable; guard the adapter as well as parsing. Server rendering cannot read browser storage. Define hydration fallback and cross-tab event handling separately.
+
+Platform reference: [MDN API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), checked 2026-09-16. This supports the named browser boundary; the model and product policy remain local synthesis.
+
+## Unsupported Absolutes
+
+Persistence does not guarantee availability, confidentiality, or synchronization across devices.
+
+## Verification Contract
+
+- Decode corrupt, missing, old-version, and wrong-account records; use valid defaults.
+- Edit before an asynchronous restore finishes; preserve the edit.
+- Simulate unavailable storage and quota failure; keep the screen usable.
+
+Record actual outcomes separately using the [verification matrix](../verification.md).
+
+## 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](../index.md).
+Next: [Continue the state management route](../recipes/index.md).

package/design-engineering/state-management/recipes/delete-undo.md

@@ -0,0 +1,65 @@
+---
+type: Domain Guide
+title: Deletion And Supported Undo
+description: Remove the intended entity and provide recovery that matches actual backend capabilities.
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Deletion And Supported Undo
+
+## Repository Boundary
+
+Remove the intended entity and provide recovery that matches actual backend capabilities. This is a consumer interaction composition in Design Engineering. Spatial structure comes from [List Detail](../../../recipes/list-detail.md); this recipe adds no reusable Layout behavior.
+
+## Reusable Method
+
+### Selected Pattern Stack
+
+[ID selection](../patterns/id-selection.md), [single flight](../patterns/single-flight.md), optionally [optimistic overlay](../patterns/optimistic-overlay.md).
+
+### Ownership And Event Flow
+
+The collection owner tracks entities by ID. A per-entity deletion operation owns request identity and outcome. Confirmation owns a decision; an undo operation owns a real restore token or an explicitly cancellable pre-commit deletion.
+
+Activate → confirm if required → submit deletion → reconcile acknowledgement → recover focus. Offer Undo only when a backend restore or a declared delayed-commit cancellation exists. A UI-only inverse patch cannot undo a committed deletion.
+
+### Composition And Substitution
+
+Use pending-until-confirmed deletion by default in this recipe. An optimistic overlay is substitutable only with a recovery contract. Confirmation and Undo solve different product decisions and are not interchangeable by appearance.
+
+### Acceptance Sequences
+
+| Sequence | Expected outcome |
+| --- | --- |
+| Cancel confirmation | No deletion effect; return focus to invoker |
+| Fail definitively while filters change | Keep or restore the intended ID without reverting unrelated data |
+| Lose response after submission | Mark outcome uncertain and reconcile before repeating |
+| Delete the last row | Show empty state and move focus to a logical heading |
+| Undo expires or restoration fails | Explain failure and reconcile actual collection state |
+
+## Opinionated Guidance
+
+Keep the ownership boundaries visible when composing the patterns. One screen can combine these mechanisms without making every value global. Record the rejected alternative and its user-visible cost in the [state brief](../state-brief.md).
+
+## Platform-Specific Guidance
+
+Restore focus after confirmation and after removal of the invoker. Announce the affected entity and the real undo availability; animation completion must not authorize deletion.
+
+## Unsupported Absolutes
+
+These acceptance sequences are proposed integration checks, not captured product evidence. Pattern model tests do not prove this entire screen, its backend, or its focus behavior.
+
+## Verification Contract
+
+Adapt every acceptance row to the consumer and record actual results with the [verification matrix](../verification.md). Include the ordinary successful task and at least one interrupted task. The initial handoff is `consumer_reference: not_applicable` because this fictional recipe selects no consumer profile or conformance record.
+
+## 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](index.md).
+Next: [Continue the state management route](../verification.md).

package/design-engineering/state-management/recipes/index.md

@@ -0,0 +1,64 @@
+# 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](settings-save.md): draft, submission, acknowledgement, and guarded departure.
+- [Search filters and detail](search-detail.md): route state, out-of-order reads, and stable selection.
+- [Multi-step form](multi-step-form.md): retained fields, validation, branching, and final submit.
+- [Deletion and supported undo](delete-undo.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](../patterns/single-owner.md) | E | E | E | E |
+| [Derived state](../patterns/derived-state.md) | E | E | E | O |
+| [ID selection](../patterns/id-selection.md) | — | E | — | E |
+| [Draft/baseline](../patterns/draft-and-baseline.md) | E | — | E | — |
+| [Submitted snapshot](../patterns/submitted-snapshot.md) | E | — | E | — |
+| [Unsaved navigation](../patterns/unsaved-navigation.md) | E | — | E | — |
+| [Latest request wins](../patterns/latest-request-wins.md) | O | E | O | — |
+| [Single flight](../patterns/single-flight.md) | E | — | E | E |
+| [Optimistic overlay](../patterns/optimistic-overlay.md) | O | — | — | S |
+| [URL state](../patterns/url-state.md) | O | S | O | O |
+| [Identity reset](../patterns/identity-reset.md) | E | E | E | E |
+| [Versioned restore](../patterns/versioned-restore.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](../index.md).
+Next: [Continue the state management route](../verification.md).

package/design-engineering/state-management/recipes/multi-step-form.md

@@ -0,0 +1,65 @@
+---
+type: Domain Guide
+title: Multi-Step Form With Retained Draft
+description: Retain entered values across steps and guard progression and final submission.
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Multi-Step Form With Retained Draft
+
+## Repository Boundary
+
+Retain entered values across steps and guard progression and final submission. This is a consumer interaction composition in Design Engineering. Spatial structure comes from [Form Flow](../../../recipes/form-flow.md); this recipe adds no reusable Layout behavior.
+
+## Reusable Method
+
+### Selected Pattern Stack
+
+[single owner](../patterns/single-owner.md), [draft/baseline](../patterns/draft-and-baseline.md), [submitted snapshot](../patterns/submitted-snapshot.md), [unsaved navigation](../patterns/unsaved-navigation.md).
+
+### Ownership And Event Flow
+
+The flow owns all field values and current step; each field emits intents. Validity is derived from relevant fields. The final operation owns the submitted snapshot. Unmounting a step does not destroy the flow draft.
+
+Edit → validate current step → advance if allowed. Back preserves values. Changing an earlier answer recomputes eligibility and invalidates dependent values under an explicit policy. Final Submit captures the whole valid draft once.
+
+### Composition And Substitution
+
+An in-memory step is enough when deep links are not a requirement; use URL state when they are. Versioned restore is optional for long flows and requires retention/privacy decisions. Do not persist request-pending flags.
+
+### Acceptance Sequences
+
+| Sequence | Expected outcome |
+| --- | --- |
+| Advance, go Back, revisit | Values persist; errors follow current validity |
+| Change an earlier branching answer | Hidden dependent answers are cleared or excluded under declared policy |
+| Deep-link to a later step | Guard prerequisites or redirect without silently submitting |
+| Fail final submission | Retain all fields and provide a route to the relevant error |
+| Edit while final save completes | Preserve later edits using snapshot semantics |
+
+## Opinionated Guidance
+
+Keep the ownership boundaries visible when composing the patterns. One screen can combine these mechanisms without making every value global. Record the rejected alternative and its user-visible cost in the [state brief](../state-brief.md).
+
+## Platform-Specific Guidance
+
+Announce step context and move focus to the step heading or first invalid field as appropriate. Step order, DOM order, and validation routes must agree.
+
+## Unsupported Absolutes
+
+These acceptance sequences are proposed integration checks, not captured product evidence. Pattern model tests do not prove this entire screen, its backend, or its focus behavior.
+
+## Verification Contract
+
+Adapt every acceptance row to the consumer and record actual results with the [verification matrix](../verification.md). Include the ordinary successful task and at least one interrupted task. The initial handoff is `consumer_reference: not_applicable` because this fictional recipe selects no consumer profile or conformance record.
+
+## 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](index.md).
+Next: [Continue the state management route](../verification.md).

package/design-engineering/state-management/recipes/search-detail.md

@@ -0,0 +1,65 @@
+---
+type: Domain Guide
+title: Search Filters And Detail Selection
+description: Preserve query context and entity identity across asynchronous search and history navigation.
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Search Filters And Detail Selection
+
+## Repository Boundary
+
+Preserve query context and entity identity across asynchronous search and history navigation. This is a consumer interaction composition in Design Engineering. Spatial structure comes from [List Detail](../../../recipes/list-detail.md); this recipe adds no reusable Layout behavior.
+
+## Reusable Method
+
+### Selected Pattern Stack
+
+[URL state](../patterns/url-state.md), [latest request wins](../patterns/latest-request-wins.md), [ID selection](../patterns/id-selection.md), [derived state](../patterns/derived-state.md).
+
+### Ownership And Event Flow
+
+The field owns its typing buffer; the route owns committed query/filter/page; the request owner holds results and query identity; the screen or route owns selected ID. A result collection is not necessarily the full entity inventory.
+
+Commit query → reset page → update history → start read → accept only matching outcome. Back reads the route and starts the corresponding read without pushing another entry. Selected detail may be fetched separately with its own keyed request owner.
+
+### Composition And Substitution
+
+URL state can be replaced by screen-local committed state when sharing/history is explicitly unnecessary. Stable identity and stale-read handling remain essential. Debounce may reduce traffic but cannot substitute for request correlation.
+
+### Acceptance Sequences
+
+| Sequence | Expected outcome |
+| --- | --- |
+| Request A/B, resolve B/A | B results and status remain displayed |
+| Change query on page 3 | Commit new query with page 1 |
+| Back then Forward | Controls, query identity, and results follow route history |
+| Selected item absent from filtered page | Retain or explicitly mark unavailable; do not infer deletion |
+| Delete selected entity authoritatively | Apply missing-detail policy and recover focus |
+
+## Opinionated Guidance
+
+Keep the ownership boundaries visible when composing the patterns. One screen can combine these mechanisms without making every value global. Record the rejected alternative and its user-visible cost in the [state brief](../state-brief.md).
+
+## Platform-Specific Guidance
+
+Preserve typed input during IME composition. Label previous results during refresh; an empty accepted result must differ from loading or failure.
+
+## Unsupported Absolutes
+
+These acceptance sequences are proposed integration checks, not captured product evidence. Pattern model tests do not prove this entire screen, its backend, or its focus behavior.
+
+## Verification Contract
+
+Adapt every acceptance row to the consumer and record actual results with the [verification matrix](../verification.md). Include the ordinary successful task and at least one interrupted task. The initial handoff is `consumer_reference: not_applicable` because this fictional recipe selects no consumer profile or conformance record.
+
+## 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](index.md).
+Next: [Continue the state management route](../verification.md).

package/design-engineering/state-management/recipes/settings-save.md

@@ -0,0 +1,64 @@
+---
+type: Domain Guide
+title: Settings With Explicit Save
+description: Edit and save preferences without losing later input or leaving with unsaved work.
+domain: design-engineering
+lifecycle: experimental
+provenance_kind: local
+---
+
+# Settings With Explicit Save
+
+## Repository Boundary
+
+Edit and save preferences without losing later input or leaving with unsaved work. This is a consumer interaction composition in Design Engineering. Spatial structure comes from [SaaS Settings](../../../recipes/saas-settings.md); this recipe adds no reusable Layout behavior.
+
+## Reusable Method
+
+### Selected Pattern Stack
+
+[draft/baseline](../patterns/draft-and-baseline.md), [submitted snapshot](../patterns/submitted-snapshot.md), [single flight](../patterns/single-flight.md), [unsaved navigation](../patterns/unsaved-navigation.md).
+
+### Ownership And Event Flow
+
+The form owns draft; the server owns persisted data; the save attempt owns the snapshot; the router owns pending departure. Dirty is derived. Account changes invalidate the entire form generation.
+
+Edit → validate → capture snapshot → save → reconcile acknowledgement → re-evaluate dirty. For Save-and-leave, leave only after successful reconciliation and only if no newer edits remain.
+
+### Composition And Substitution
+
+Explicit-save semantics require the snapshot and draft separation. A single-flight guard can share or ignore repeats; queuing requires a separately defined sequence of snapshots. Immediate autosave is a different recipe with debounce, ordering, and conflict rules.
+
+### Acceptance Sequences
+
+| Sequence | Expected outcome |
+| --- | --- |
+| Submit A, edit B, acknowledge A | Baseline A; draft B remains dirty; stay if leaving was requested |
+| Save fails, then retry | Preserve draft and release the operation guard |
+| Remote revision conflict | Preserve draft; offer reload/merge under consumer policy |
+| Cancel departure | Keep draft and return focus to the invoker |
+
+## Opinionated Guidance
+
+Keep the ownership boundaries visible when composing the patterns. One screen can combine these mechanisms without making every value global. Record the rejected alternative and its user-visible cost in the [state brief](../state-brief.md).
+
+## Platform-Specific Guidance
+
+The form must connect errors to fields and announce completion without implying newer edits were saved. A disabled submit control is not the duplicate guard.
+
+## Unsupported Absolutes
+
+These acceptance sequences are proposed integration checks, not captured product evidence. Pattern model tests do not prove this entire screen, its backend, or its focus behavior.
+
+## Verification Contract
+
+Adapt every acceptance row to the consumer and record actual results with the [verification matrix](../verification.md). Include the ordinary successful task and at least one interrupted task. The initial handoff is `consumer_reference: not_applicable` because this fictional recipe selects no consumer profile or conformance record.
+
+## 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](index.md).
+Next: [Continue the state management route](../verification.md).