Favorites Gallery Block for React

In the block's own state, so they reset when the page reloads. To keep them, store the list of ids (hearts) where you like (local storage, your account) and read it back as the initial state. The heart is a Toggle whose pressed state is the id being in that list.

It filters the prints to the hearted ones, in the shop's order. With it on, taking a heart back removes the print from the view, so focus moves to the count line. With it on and no hearts, an empty state says so and offers a button that turns the switch off.

An unseen copy of all eight 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.

Every heart is a toggle button named "Favourite: <print>" with its pressed state, and the switch is a labelled switch; Space or Enter flips either. "Clear favourites" is a button and keeps its place (hidden but not removed) when there are none.

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.