Docking

The dock layout is the workspace of an IDE or a trading desk in one element. Put your own panels inside it - any markup - and arrange them in tab groups that split side by side or one above another, with splitters between them. Drag a tab and dock guides show where it will land: into a group, onto one of its sides, to an edge of the whole workspace, or out on its own as a floating window.

Fold a group to an edge where it waits as a tab and slides out when wanted, maximise one panel, close and reopen them. Everything works from the keyboard too - move a panel, send it to the next group, go from group to group. The arrangement is plain JSON: save it, restore it, keep one per user, and the panels keep what is typed in them wherever they go. On a narrow screen the workspace becomes one set of tabs.

A dispatch desk

Orders, the chosen order's details, notes, activity and problems, arranged as three columns. Drag a tab into another group or onto an edge, hold Shift while dropping to float it, or fold the Shortcuts group to an edge from its tab's options. Type in Notes and try to close it.

HP-1042 - Fenwick Joinery

Oak shelving, 12 units - due Thursday

Depot: Leeds North
Carrier: Northline, van 7
Window: 08:00 - 12:00
Value: £4,820.00

Notes on this order

⚠️ HP-1039: the delivery window overlaps the depot's closing time.

⚠️ HP-1047: no carrier booked.

Drag a tab into another group, onto a side of one, to an edge, or hold Shift to float it.

Alt+Shift+M moves the panel from the keyboard; Alt+Shift+arrows send it to the next group.

F6 goes to the next group; Shift+F10 opens a tab's options.

Keyboard: F6 goes to the next group; Alt+Shift+M moves the chosen panel, and Alt+Shift with the arrows sends it to the next group that way; Shift+F10 opens a tab's options.

Layouts saved and restored

An editor's workspace with three layouts to switch between, and your own arrangement kept: rearrange it, save it, try a preset, and bring yours back. Lock the layout so it cannot be changed by mistake.

Coding

Reviewing

Focus

Save my layout

Bring mine back

Lock

src/
  app.ts
  orders.ts
  invoice.ts
tests/
  orders.test.ts
package.json

export function total(lines: Line[]): number {
  return lines.reduce((sum, l) => sum + l.qty * l.price, 0);
}

export function vat(net: number, rate = 0.2): number {
  return Math.round(net * rate * 100) / 100;
}

ƒ total
ƒ vat

$ npm test
✓ orders.test.ts (6 tests)
Tests 6 passed

Build finished in 1.4 s

Line 2: round the total too?

Line 5: take the rate from settings.

Looks good otherwise.

// The arrangement is plain JSON - keep one per user on your server, or let the element keep it in this browser.
const layout = await workspace.getLayout();
await fetch('/api/me/layout', { method: 'PUT', body: JSON.stringify(layout) });

workspace.layout = await (await fetch('/api/me/layout')).json();

// Or simply: <bmx-dock-layout persist-key="editor-workspace"> - saved in localStorage as it changes.