Split View Gallery Block for React

Tab goes to the list (a listbox named "Assets"); Up and Down move through the files and choose each one as they go, Home and End jump to the ends. Tab again reaches the divider, a separator named "Resize the list and the preview": the arrow keys move it, Home and End send it to its limits. A polite line announces "Till roll, March, 8 of 8" when the file changes.

The list keeps between 26% and 60% of the width and the preview at least 40%, so neither side disappears. The panels start at 38% and 62% and the library keeps the sizes. Below lg the divider is hidden and the panels stack.

The preview stage has a fixed height from lg and measures itself with a container query: the picture is as large as fits, at its own ratio, whichever side you drag. Nothing is cropped, and the details under it stay the same height, so choosing another file moves nothing.

The drawn assets are one small Scene component. Where the code comment says so, replace it with an <img> (object-cover in the list's small square, object-contain in the preview), and add a src to each entry of ASSETS. The row's name, type and size come from the same entry.

Below lg the list is replaced by a select (a native one, so the platform's own picker opens), and the preview sits under it in a 288 px stage with the details beneath, two to a row. Nothing scrolls sideways at 320 pixels.

No. Each asset has a fixed modified date written into the data and shown in a time element, so the page reads the same on the server and in the browser, and never goes stale.