Component

GrayRoute

The component calculates a Gray-code order for its children and accepts stations only in that sequence. Correct visits build a real manifest; an incorrect station is rejected and stays available.

Possible use

It could force a reviewer to inspect handoff fields in a bitwise route, or let a presenter reveal agenda items in an order that changes only one abstract bit at a time. The rule is precise but unrelated to the content.

Reasonable alternative

A reasonable local alternative is the authored order or a normal checklist. A Gray route makes a stable sequence harder to discover and easier to get wrong.

01 / Preview

Try it yourself.

The route is waiting for its first bit.

Mechanism

1: Four stations wait in their ordinary visual order.
2: Visit them in Gray-code order: station 1, 2, 4, then 3.
3: A wrong station stays open; reset the route whenever the bits become too ceremonial.

02 / Usage

Put it somewhere.

example.tsxTSX

import { GrayRoute } from "gra-ui";
import "gra-ui/styles.css";

export function RoutedFields() {
  return (
    <GrayRoute>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Due date</span>
    </GrayRoute>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe stations visited in calculated Gray-code order.