Linear Grid Integration Block for React

Edit FIELDS at the top of the file: each field has an id, a title, a short text about it in Linear, the sample value Linear shows and own, the different value Cyclemoor keeps when the field is off. START lists each field's starting direction in the same order. The tally, the drawings and the status line all derive from the current choices.

Reading from Linear needs only the read scope, which Linear always includes. Sending a change back, which both ways does, needs write access, so the line switches between the two sentences as soon as any field is set to Both ways. The wording matches the Linear detail block, where write is the one scope only field sync asks for.

No. Each choice changes this page's state and the polite status line says so ("Priority now syncs both ways in this demo. Nothing is sent to Linear."). The line is in the page from the first paint. In a real product, store the six directions with the connection and let your sync job read them.

Each toggle group is named by its field ("Priority direction") and its three buttons are a single-choice group that can't be left empty, so there is always a direction. The drawing is hidden from assistive technology because the field's name, the group and the status line carry the same facts. Arrow keys move inside a group.

On a phone the cells stack in one column and the drawing's boxes shrink and truncate their values. In a right-to-left layout the two boxes swap sides and the arrows mirror, so "From Linear" still points from Linear to Cyclemoor; the counts keep their reading order. The header fades up once on load and nothing else moves; with reduced motion it simply appears.