How it works › Resizable panels

Every side panel is resizable by dragging, on by default: the kit's own side peek and rail, and any panel of the host's that says data-resizable. The width is remembered, a double-click resets it, and ← / → move the focused edge 16 px. The sidebar on this page is one: drag its right edge.

- type: table
  name: Runs
  order: [run, round, model, env, lane, bench, attempts, successes, success_rate, compute_mean_s, sppm]
  groupBy: { property: model, direction: ASC }
  sort:
    - { property: success_rate, direction: DESC }
  display: { success_rate: bar }
  fold: closed

A host's own panel

Put data-resizable="left|right" (the edge the handle sits on) on any element. The kit writes the width as --data-panel-width on the panel, only once one is set, so your CSS keeps the layout:

<nav class="side" id="side" data-resizable="right"
     data-resizable-min="180" data-resizable-max="420">…</nav>

<style>
  .layout { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .side { width: var(--data-panel-width, 240px); }
</style>
<script type="module" src="/vendor/data-ui/resize.js"></script>

data-ui.js gives every such element its handle when it loads; a page that loads nothing else of the kit loads dist/resize.js (about 5 KB, its stylesheet inside). From script: makeResizable(el, {edge, min, max, keep, key, label}) returns {handle, width, set(px), reset(), destroy()}. See it alone on a plain page.

The kit's panels

• The side peek: a handle on its left edge, 320 to 1200 px, stored under data-ui/panel-width/peek:<views id>.
• The rail: a handle on its right edge, 180 to 560 px, under …/rail:<views id>.
• Opting out: data-resizable="off" on the element or any ancestor.
• On a phone the handle hides when the panel fills its parent, so it never widens the page sideways.

Comes from docs/CONTRACT.md §11 (resizable side panels) in docs/.