Refined · Substitutions

9:415G 🔋

‹ Substitutions

🔄

Replace

✋

Don't replace

🔒

Can't swap

🍜

Lipton Noodle Soup Mix

4.5 oz

🐟

Sam's Choice Mahi-Mahi

12 oz

🧴

Ajax Ultra Dish Soap

28 fl oz

🥣

Honey Nut Cheerios

18.8 oz

🍌

Organic Bananas

bunch

🍅

Roma Tomatoes

1 lb

🥛

Great Value Whole Milk

1 gal

🥚

Eggland's Best Large Eggs

12 ct

🍺

Coors Light · 6 pack

Alcohol can't be substituted

🔒 Can't swap

💊

Bayer Low Dose Aspirin

Medication can't be substituted

🔒 Can't swap

Substitutions — final

Refined from Variant 2 · decision-gate feedback applied

Synthesized from

Variant 2's two-tab decision model (Replace / Don't replace) + Variant 1's live summary bar — merged so the summary is the tab bar.

Gate feedback applied

Can't-swap left the Replace tab. It's now a third, read-only summary segment — semantically correct (you can't act on it) and out of the way.
Locating in a long order. A Find an item field searches by name across every tab — the fix for the "dozens of items, where did mine go?" problem both variants had.
Toggling no longer loses the item. Changing Replace ⇄ Keep shows a "Moved · Undo" toast, so the item isn't silently gone from the current tab.

Validated elements kept

Decision-based tabs, always-visible counts, inline per-item editing, plain-language can't-swap.

Engineer spec — for handoff

Components

Component	Spec
Summary / tab bar	3 segments. Replace & Don't-replace are interactive tabs; Can't-swap is read-only. Each shows live count (`num`, 18px/800) + label (11px). Active: 2px bottom border `#111`; number tints to the category color.
Find field	Full-width input, `border-radius 10px`, leading search icon, placeholder "Find an item". Filters rows by name (case-insensitive, substring) across all tabs; clears back to the active tab when empty.
Item row	Thumb 40×40 (`radius 10`) · name 14/600 · size 12/sub. Trailing control: `seg2` Replace/Keep toggle (min tap target 32px height, 44px row) OR `lock` chip for can't-swap.
Toast	Appears on toggle for 3s. "Moved to {tab} · Undo". Undo reverts state + count. Auto-dismiss.

Interaction states

Trigger	Result
Tap segment (Replace / Keep)	Filter list to that category; segment → active.
Tap segment (Can't swap)	Show the 2 read-only locked rows + an explanatory note. No toggles.
Toggle Replace ⇄ Keep	Update row state, recount both segments live, show Moved/Undo toast. Item leaves the current tab.
Type in Find	Show matching rows regardless of tab; segments dim while searching.
Empty tab	Empty state: "Nothing here yet."

Accessibility

All controls ≥ 44px tap target; toggle buttons ≥ 32px with 44px row hit area.
Counts announced via aria-live="polite" so screen readers hear the total change on toggle.
Segments are role="tab" / list is role="tabpanel"; Find is a labeled search input.
Status conveyed by label + color, never color alone (pill text "Replace" / "Keep" / "Can't swap").

Dynamic content

Counts are derived, never hardcoded. Can't-swap set comes from the catalog's non-substitutable flag (alcohol, medication, etc.) — copy pulled from a single source so legal/CS can edit it in one place.