Domino move

A React component in Beamline's Data & tables category.

A room board where one move shows its chain: drag a booking (or pick it and aim it with the keys) onto a taken room and the bookings it would push appear as dashed ghosts in their new rooms, the whole chain, for the best plan, while a line says how many guests it moves. Dropped, up to three plans open side by side: the cheapest, the one that moves the fewest guests whatever it costs, then the next cheapest (same-type rooms first, upgrades priced at the rate difference, a further push at most two deep, guests in house never moved); pointing at a plan previews its ghosts; Move them carries everyone at once and says who went where. A move with no plan says which guest has nowhere to go and on which night.

Use it for

Moving one booking where others are in the way: hotels and guesthouses, holiday rentals, equipment and vehicle rental, rooms and desks.
The host owns the rooms (type rank, rate), the bookings and what a move does; the part finds the plans, previews the chain and reports the changes.

Not for

Picking a free time for a new booking → availability-layers.
Load against capacity for jobs that share a station → capacity-terrain.

Anatomy

line: while a move is aimed or proposed, what it does (moves N guests, the room is free, who is in house, who has nowhere to go and when)
board: nights across, rooms down with their type; bookings as tokens lit along their top edge (a guest in house marked); while a move is aimed, the moved guest's place solid in ink, every pushed guest's ghost in its new room in the info tone (an upgrade in the warning tone) saying the room it leaves, each numbered in the chain's order, and the place each leaves as a dashed outline
chain: an arrow from each moving guest's place to where the move puts them, bowed out to the start side, in the ghost's tone
plans (after a drop on a taken room, or a proposal): Plan n with its cost (no cost, or money given away), how many guests move and each change; pointing at one redraws the chain; Move them, Cancel
hint: while a booking is picked, how to aim it

States

at rest
aiming at a free place
aiming at a taken place (the chain)
blocked by a guest in house
no plan
choosing a plan
previewing a plan
moved

Keyboard

Each booking is a button named by guest, room, nights and first night (a guest in house says so and can't be picked): Enter picks it; Left and Right move the stay, Up and Down the room; Enter moves it (a taken place opens the plans); Escape puts it back
The plans are a radio group (arrows choose, focus previews); Enter or Move them applies the chosen plan; Escape cancels; the move is said once (a polite status)

Motion

Ghosts arrive at their places and the chain's arrows draw from each guest's place to its new one; pointing at another plan redraws them. On Move them every moved booking glides to its new room (the shared FLIP). Nothing runs at rest; reduced motion places everything and draws the arrows at once.

Props

Prop	Type	Default	Description
`label` (required)	`string`	—	What the board shows: "Seaview guesthouse, 7 to 14 Nov".
`nights` (required)	`DominoNight[]`	—
`rooms` (required)	`DominoRoom[]`	—
`bookings` (required)	`DominoBooking[]`	—
`value`	`DominoPlacements`	—	Controlled selected value; omit to use defaultValue.
`defaultValue`	`DominoPlacements`	—	Initial selection when uncontrolled; omitted by default.
`onValueChange`	`((placements: DominoPlacements) => void)`	—	Reports the selected value after a change; no callback by default.
`onMove`	`((changes: DominoChange[]) => void)`	—	A move made: the booking that was moved first, then every booking its plan moved.
`currency`	`string`	—	ISO currency code for what an upgrade gives away. Default EUR.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "board" \| "lane" \| "booking" \| "plans", string>>`	—	Classes for the named visual parts; no overrides by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`defaultProposal`	`{ booking: string; room: string; start?: number \| undefined; }`	—	Open on a move already proposed (a draft the host restores, a request to answer): its chain and plans show at once, without taking the page's focus. Omitted by default.

Built from

Dependencies

lucide-react

Import

import { DominoMove } from "@beamline/domino-move";

Get it

Domino move is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Domino moveComplete system · $49

A room board where one move shows its chain.

Ms Okafor wants the sea view

Okafor asked for a sea view: moving her from 102 to 104 pushes Patel and Kim, and Kim pushes Ruiz. The arrows draw the chain, numbered; point at a plan to see its chain instead (two guests moved with Kim upgraded to the suite). Move them, and everyone glides. Cancel, then drag any stay yourself; Dubois is in house and never moves.

0 × 0full

A full weekend

Both sea views are taken and Ben Ito is in house: moving Cara Lee to 104 has no plan, and the board says why.