Quad grid selectPro

Four results of one prompt in a 2 by 2 grid: press 1 to 4 to pick, U to upscale and V to vary it, or use the U1 to U4 and V1 to V4 buttons, each with its own running, done and failed state.

Markdown

On this page

ProFour results: 1 to 4 picks, U upscales, V varies, and every U and V button keeps its state.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/quad-grid-select

Usage

tsx

import { QuadGridSelect } from "@/components/ui/chatcn/pro/quad-grid-select"

<QuadGridSelect
  images={job.images}
  onAction={(action, index) => api.run(action, job.images[index].id)}
  onReroll={job.rerun}
/>

Pending and failed results keep their place in the grid. Hovering or focusing an upscale or vary button outlines its tile, so you always see which image a button acts on. Used buttons stay marked, like a grid you have already worked through.

Examples

States

Generating with progress, a failed result with running and finished actions, disabled and right to left.

ProGenerating with progress, a failed result, running actions and disabled.

Props

Prop	Type	Notes
`images`	`StudioImage[]`	Up to four, in grid order
`value`, `defaultValue`, `onValueChange`	`number \| null`	The selected tile, 0 to 3
`onAction`	`(action: "upscale" \| "vary", index) => unknown`	Return a promise for running, done and failed states
`status`	`Partial<Record<"upscale-0" … "vary-3", status>>`	Controlled states per button
`onReroll`	`() => void`	Shows the reroll button
`onOpen`	`(index) => void`	Enter or double click on a tile
`aspectRatio`	`number`	Tile shape. Default from the first image
`disabled`	`boolean`	Locks picking and actions, for example out of credits
`hotkeys`	`"scoped" \| "global" \| "off"`	Default `scoped`
`label`	`string`	Accessible name of the grid. Default "Results"

Keyboard

Key	Action
`1` to `4`	Pick that result and focus it
`U`, `V`	Upscale or vary the picked result
`←` `→` `↑` `↓`	Move the pick in the grid. Mirrored in right to left
`Space`	Pick the focused tile
`Enter`	Open the focused tile

Accessibility

The grid is a role="radiogroup" of image tiles, one tab stop, each named "1. <alt>" with aria-keyshortcuts.
The U and V rows are labelled groups; every button is named "Upscale image 2" and is aria-pressed once done.
Starts, finishes and failures are announced politely. Failure uses the red token with an icon.
Under forced colors the picked tile keeps a system outline.

Motion

Picking is instant: it is driven by number keys and arrows.
Hovering a U or V button outlines its tile in 150 ms. Button states swap with the 150 ms crossfade in a fixed footprint, and buttons press to 0.97.
Images fade in over 200 ms once decoded. Under reduced motion only the fades remain.