Location Cards Grid Integration Block for React

PLACES holds each location's name, stock on hand and number of stocked variants; START holds whether it syncs and the units held back per variant. The units held back at a location are that count across its variants, never more than its stock. The bar, the percentage, the tally and the status sentences are all worked out from those, so wiring real stock and variant counts in needs no other edit.

It dims the cell with a solid tint, changes the word to "Paused", and removes the location from the tally and the held-back total. The slider keeps its value so switching back on restores it. Nothing moves or disappears, so the grid never changes height.

No. Switches and sliders change state on this page only, and a polite status line says so from the start and after each change. The status is spoken when a slider is released, not at every step. Wire the handlers to your own sync settings to make it real.

Each switch is named "Sync stock at" and the location, and each slider "Units held back per variant at" the location, with its value read as "2 units". Arrow keys move a slider a unit at a time. The bar is decorative and the same figures are in the text under it. The cells are a real list, one item per location, each with its own heading.

The cells stack in one column on a phone, each keeping its full controls. Bars and sliders always run from low to high in the page's reading direction through the catalog parts, and numbers sit in their own isolate so "412 on hand, 38 variants" reads whole. The only motion is the header's fade-up on load and the cell's tint change, and reduced motion turns both off.