Tagged Gallery Block for React

Each tag's count is the number of pictures that match every tag already chosen plus that one, so with nothing chosen it is the tag's total, and choosing "Kitchen" turns "Glass" into the number of glass things for the kitchen. A chosen tag shows what is left now. A tag that would leave nothing is dashed and still works: choosing it shows the empty state with a button that clears the tags.

They repeat the choice in order, each a button that removes its tag, and a Clear button removes them all. When a chip is removed, focus returns to its tag in the cloud; Clear returns it to the first tag. With nothing chosen the row says so, and it keeps its height.

An unseen copy of all twenty-four pictures (hidden from assistive technology and from the keyboard) sits in the same grid cell as the live set, so the block is always as tall as the full gallery and the shown pictures stay at the top. Nothing below the block moves.

The cloud is a single row that scrolls sideways (the group is a tab stop with a visible ring) and the chips scroll in their own row. The pictures are three across and their captions are kept for screen readers only, to fit the first screen.

Each picture is typed data with a description (its alt text), a scene and a ratio. Add your image's address to it, then replace the Scene in its tile with <img alt="" className="size-full object-cover" src={…} />: the caption already names the picture, and the role="img" wrapper's label can move to the alt. The comment above Scene says where. Tiles crop to a fixed shape, so keep object-cover.

Each one is a scene: a kind (a room, a lamp, a bridge, a pattern…) and three numbers, light, horizon and a seed that moves ridgelines, lights windows and turns tiles. Each kind is a function that returns the picture as SVG paths painted with a few inks mixed from your theme's colours, so two pictures of one kind with different numbers differ. Nothing is random at render time: the server and the browser draw the same picture.