Every part moves

Docking

Each control lives in a block with a grip. Drag it to another bar, a side, the thumbnail rail or a card, or over the pages. The rail and the cards move and resize too. Where the viewer puts things is remembered.

Title bar: the window's own parts reorder here; any block can join them.
Top, bottom and side bars: any block; the top and side bars exist only while they hold one.
Thumbnail rail and cards: blocks dock inside them and move with them.
Over the pages: blocks float (horizontal or vertical); cards float as windows.

⋮⋮ / ⋯	drag a block, the rail or a card by its grip
⇄ / ⇅ · ↓	a floating block turns, and ↓ puts it back
double-click	a grip puts that part back where it started
edges	resize the rail and docked cards; the corner of a floating card

Try it here

This dossier is the real one. Drag the tools into the title bar, the zoom into a side bar, or the findings card over the pages.

Start somewhere else

layoutPreset sets the starting arrangement (and what "put back" returns to); layoutStorageKey names where the viewer's own arrangement is kept.

<DyniaDossier
  layoutPreset={{
    controls: {
      tools: { place: "left", order: 0, x: 0, y: 0, dir: "v" },
      zoom: { place: "title", order: 1, x: 0, y: 0, dir: "h" },
    },
    docks: { findings: { place: "float", order: 0,
      width: 340, x: 520, y: 40, height: 420 } },
  }}
  layoutStorageKey="my-app"
  …
/>

The docking playground (dynia.n-uf.com) shows five presets side by side with a map of every place a part can go.