Telemetry off
Documentation

Documentation

30. v0.14.0 — Resizable grid layouts

Created
Sep 9, 2026
Updated
Sep 9, 2026

Release candidate prepared 2026-09-09. This release lets every multi-chart layout be resized by dragging the seam between two panes, not only the two-chart split. Grid layouts get no divider bar: the seam is found with the pointer, and the resulting pane proportions are remembered per layout. Follows v0.13.0.

Added

  • Drag-to-resize seams in every grid layout. Layouts with three to six charts — "Three columns", "Large left, two right", "Four chart grid", "Six rows", and the rest — now expose a resize handle on each boundary between two panes. Moving the pointer onto a seam switches the cursor to col-resize or row-resize and highlights the seam in amber; dragging moves the whole column or row boundary, because the panes share one grid. The two tracks on either side of the seam trade space while the rest of the grid keeps its proportions.
  • Seams follow the pane shapes. A handle exists only where two different panes meet. Where one chart spans both sides — the tall left chart in "Large left, two right", the wide bottom chart in "Large left, five right" — there is no handle along that stretch, so the middle of a chart is never a drag zone.
  • Reset and keyboard control. Double-clicking a seam restores the default proportions of its two tracks while keeping their combined size, never below the track floor. Clicking a seam gives it focus; seams are separator elements that report their position through aria-valuenow, and the arrow keys nudge a focused seam by 4% per press.
  • Per-layout memory. Column and row proportions are stored per layout id in workspace preferences (gridTrackSizes) and restored when you return to that layout. Saved workspace layouts capture the proportions of their own layout; layouts saved before this release load with the defaults.

Changed

  • No divider bar for grid layouts. The two-chart layouts keep their visible divider. Grid seams are zero-width overlays instead, so the charts keep every pixel and only the cursor and the hover highlight reveal the handle.
  • Grid tracks come from CSS variables. The stylesheet still declares each layout's grid-template-areas, but the column and row track lists are now --chart-grid-columns / --chart-grid-rows, set by the workspace from the stored proportions. Default weights are unchanged (for example 1.25 : 1 for "Large left, three right"). Compact viewports narrower than 768px still stack every layout into one scrollable column and show no resize handles.
  • Track floor. In a direction with two tracks a track cannot be dragged below 20% of the grid; denser grids use 40 ÷ track-count percent with an 8% floor, so every chart stays usable while a six-column layout can still be shaped.

Fixed

  • Saved-layout change detection no longer depends on key order. Snapshots were compared by serializing them in stored key order, so a layout saved before a new snapshot field existed would compare as modified and be autosaved as soon as it loaded. Snapshots are now compared with sorted keys.
  • Saved layouts reject unknown layout ids. A corrupt or unknown layout id in a stored snapshot falls back to the single-chart layout instead of passing through unchecked.

Verification

  • A frozen dependency install, the complete automated suite (373 files / 3,053 tests), TypeScript, the zero-warning ESLint baseline, and the optimized production build (120/120 static pages) passed during release preparation.
  • Forty new regressions cover seam derivation for every layout — including a test that parses chart-layout.css so the TypeScript geometry table and the stylesheet's grid-template-areas cannot drift — plus resize, clamp, and reset arithmetic, idempotent normalization of stored track sizes, preference round-trips that drop malformed entries, saved-layout equality against pre-release snapshots, and the handle component's placement, ARIA attributes, pointer/keyboard/double-click wiring, and drag lifecycle (body cursor, active state, release).
  • Verified in a running workspace against live Binance data in "Left stack, top right" and "Large left, five right": handles sit on the pane boundaries with the correct cursors, a drag moves the tracks by the pointer delta and clamps at the floor, double-click restores the defaults, the hover highlight renders, and the proportions survive a reload.

Next steps

Resize a layout: Multi-Pane Layouts.

Next: Release Notes