Tone Filter Gallery Block for React

From the drawing. A module function paints each picture's ground and then every shape over it on a 24 by 16 grid, each shape covering the box that holds its path, and a cell's value is how much ink is in it. The picture's tone is the mean of the cells and its contrast is how far they spread. It is an estimate (a box is bigger than the shape in it) but it is computed from the picture's own data, and the five tones are thresholds on it. With real photographs, replace readingOf with a luminance read from the image.

It is a pressed button: on, the shown pictures are ordered by contrast, highest first, and the status line says so; off, they return to reading order. It combines with the swatches. Sorting changes only the order, and the block's height never changes.

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

They are a multi-select group: none chosen shows every tone, and each swatch you add shows that tone as well. Each swatch is a solid mix of the pictures' own ink over their paper, never a hue (so Ink is the darkest in a dark theme too), and the chosen one is ringed in the text colour. Counts are derived from the pictures, so they always add up to the total.

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.

Yes. Every colour is mixed from your foreground, background and muted tokens, so the pictures print dark on pale grey in a light theme and turn low-key in a dark one. The chosen state of every control is the text colour on the page colour; the primary colour stays on the page's one action. The block ends on its last row with no closing line, so the next section's top rule closes it.