@kgdiff/viewer 0.4.0 → 0.6.0

package/dist/ui/sidebar.js

@@ -1,547 +1,361 @@
-import { attr, h, icon, replace, setText } from '../dom.js';
-import { familyCounts } from '../list-model.js';
-import { FAMILIES } from '../styles.js';
-import { sceneHunkGlyph } from './context.js';
-import { Detail } from './detail.js';
-import { swatch } from './swatch.js';
-/** Row slot and group-header heights (px); rows are 52 px tall inside a 56 px slot. */
-export const ROW_SLOT = 56;
-export const HEADER_SLOT = 32;
-const OVERSCAN = 320;
-const SEARCH_LIMIT = 50;
-function itemHeight(item) {
-    return item.kind === 'header' ? HEADER_SLOT : ROW_SLOT;
-}
+/**
+ * The default layout's sidebar (RFC 0001 §4): the change list with the search and the family
+ * filters in its head, the search results in the list's place, and the detail panel below.
+ * Below 760 px it is a resizable bottom sheet. The regions in it are bound to the root on their
+ * own; the sidebar places them and follows their panel states: a collapsed region folds to the
+ * control that opens it again (the list to its title, the detail panel to its bar, the search
+ * and the filters to a button), and the sidebar folds away when all four are collapsed. It has
+ * a draggable width, and a draggable split between the list and the detail panel; both
+ * separators also move with the arrow keys.
+ */
+import { attr, h, icon, iconButton, moveFocusOut, relabel } from '../dom.js';
+import { SIDEBAR_REGIONS } from '../panel-levels.js';
+import { frameOrTimeout } from '../schedule.js';
+export { HEADER_SLOT, ROW_SLOT } from './change-list.js';
+/** The sidebar's default width and the range it can be dragged in, px. */
+export const SIDEBAR_WIDTH = 360;
+export const SIDEBAR_MIN = 280;
+const SIDEBAR_MAX = 720;
+/** The canvas keeps at least this much width next to the sidebar, px. */
+const STAGE_MIN = 320;
+/** Keyboard steps of the width (px) and of the split (share of the height). */
+const WIDTH_STEP = 16;
+const WIDTH_STEP_LARGE = 64;
+const SPLIT_STEP = 0.05;
+/** The change list keeps this much height, the detail panel this much, px. */
+const LIST_MIN = 96;
+const DETAIL_MIN = 64;
 export class Sidebar {
     el;
-    detail;
-    #title;
-    #count;
-    #progress;
-    #progressText;
-    #progressBar;
-    searchInput;
-    #searchKbd;
-    #searchClear;
-    #filters;
-    #chips = new Map();
-    #showAll;
-    list;
-    #listInner;
-    /** Visually hidden group names the options are described by. */
-    #phases = h('div', { class: 'sr-only' });
-    #sticky;
-    #results;
+    #inner;
     #handle;
-    #offsets = [];
-    #rendered = new Map();
-    #scrollQueued = false;
-    #query = '';
-    #hits = [];
-    #activeHit = 0;
+    #resize;
+    #split;
+    #head;
+    #listHead;
+    #listWrap;
+    #listToggle;
+    #searchWrap;
+    #searchButton;
+    #filtersWrap;
+    #filtersButton;
+    #detailWrap;
+    #detailBar;
+    #detail;
     #ctx;
-    constructor(ctx) {
+    #host;
+    #states = null;
+    #width = SIDEBAR_WIDTH;
+    #share = null;
+    /** The sizes last reported as done (or applied as remembered): a gesture that ends there is not reported. */
+    #reported = { width: SIDEBAR_WIDTH, share: null };
+    constructor(ctx, host, list, search, filters, detail) {
         this.#ctx = ctx;
-        const c = ctx.controller;
-        this.#title = h('h2', { id: 'kg-changes-title' });
-        this.#count = h('span', { class: 'count-badge' });
-        this.#progressText = h('span');
-        this.#progressBar = h('div');
-        this.#progress = h('div', { class: 'progress' }, this.#progressText, h('span', { class: 'bar', 'aria-hidden': 'true' }, this.#progressBar));
-        this.searchInput = h('input', {
-            type: 'search',
-            autocomplete: 'off',
-            spellcheck: 'false',
-            role: 'combobox',
-            'aria-autocomplete': 'list',
-            'aria-expanded': 'false',
-            'aria-controls': 'kg-results',
-            enterkeyhint: 'go',
+        this.#host = host;
+        this.#detail = detail;
+        this.#handle = h('div', {
+            class: 'sheet-handle',
+            role: 'separator',
+            'aria-orientation': 'horizontal',
+            tabindex: '0',
         });
-        this.#searchKbd = h('kbd', { 'aria-hidden': 'true', text: '/' });
-        this.#searchClear = h('button', { type: 'button', class: 'clear', hidden: true, onclick: () => this.#setQuery('', true) }, icon('close'));
-        this.searchInput.addEventListener('input', () => this.#setQuery(this.searchInput.value));
-        this.searchInput.addEventListener('keydown', (e) => this.#onSearchKey(e));
-        this.searchInput.addEventListener('focus', () => this.#updateSearchChrome());
-        this.searchInput.addEventListener('blur', () => this.#updateSearchChrome());
-        this.#filters = h('div', { class: 'filters', role: 'group' });
-        for (const f of FAMILIES) {
-            const chip = h('button', {
-                type: 'button',
-                class: 'fchip',
-                'data-family': f,
-                'aria-pressed': 'false',
-                onclick: () => c.toggleFamily(f),
-            }, swatch(f), h('span', { class: 'lbl' }), h('span', { class: 'n' }));
-            this.#chips.set(f, chip);
-            this.#filters.appendChild(chip);
-        }
-        this.#showAll = h('button', {
-            type: 'button',
-            class: 'link-btn',
-            hidden: true,
-            onclick: () => c.setFamilies([]),
+        this.#bindSheet();
+        const toggle = (region) => () => {
+            const open = this.#states?.[region] === 'open';
+            host.setPanel(region, open ? 'collapsed' : 'open');
+        };
+        this.#listToggle = iconButton('chevron-up', '', toggle('list'), {
+            class: 'icon-btn sm list-toggle',
+            'aria-expanded': 'true',
+            'aria-controls': 'kg-list-wrap',
         });
-        this.#filters.appendChild(this.#showAll);
-        this.#listInner = h('div', { class: 'list-inner', role: 'presentation' });
-        this.list = h('div', {
-            class: 'list scroll',
-            role: 'listbox',
-            tabindex: '0',
-            'aria-labelledby': 'kg-changes-title',
-            'aria-keyshortcuts': 'J K X Enter Home End',
-        }, this.#listInner);
-        this.list.addEventListener('scroll', () => this.#queueWindow(), { passive: true });
-        this.list.addEventListener('click', (e) => this.#onListClick(e));
-        this.list.addEventListener('dblclick', (e) => {
-            const row = e.target.closest('.row');
-            if (row)
-                c.flyToSelection();
+        this.#searchButton = iconButton('search', '', () => host.setPanel('search', 'open'), {
+            class: 'icon-btn sm',
+            hidden: true,
         });
-        this.#sticky = h('div', { class: 'sticky', 'aria-hidden': 'true', hidden: true });
-        this.#results = h('div', {
-            class: 'results list scroll',
-            id: 'kg-results',
-            role: 'listbox',
+        this.#filtersButton = iconButton('filter', '', () => host.setPanel('filters', 'open'), {
+            class: 'icon-btn sm filters-btn',
             hidden: true,
         });
-        this.#handle = h('div', {
-            class: 'sheet-handle',
+        this.#listHead = list.head;
+        this.#head = h('div', { class: 'sb-row' }, list.head, this.#searchButton, this.#filtersButton, this.#listToggle);
+        this.#searchWrap = h('div', { class: 'search-wrap' }, search.box);
+        this.#filtersWrap = h('div', { class: 'filters-wrap', id: 'kg-filters' }, filters.el);
+        this.#listWrap = h('div', { class: 'list-wrap', id: 'kg-list-wrap' }, list.sticky, list.list, search.results, list.phases);
+        this.#split = h('div', {
+            class: 'sb-split',
             role: 'separator',
             'aria-orientation': 'horizontal',
+            'aria-valuemin': '0',
+            'aria-valuemax': '100',
             tabindex: '0',
         });
-        this.#bindSheet();
-        this.detail = new Detail(ctx);
-        const head = h('div', { class: 'sb-head' }, h('div', { class: 'sb-title' }, this.#title, this.#count, this.#progress), h('div', { class: 'search' }, icon('search'), this.searchInput, this.#searchKbd, this.#searchClear), this.#filters);
-        this.el = h('aside', { class: 'sidebar', 'data-open': 'true' }, h('div', { class: 'sidebar-inner' }, this.#handle, head, h('div', { class: 'list-wrap' }, this.#sticky, this.list, this.#results, this.#phases), this.detail.el));
+        this.#detailBar = h('button', {
+            type: 'button',
+            class: 'detail-bar',
+            'aria-expanded': 'true',
+            'aria-controls': 'kg-detail',
+            onclick: toggle('detail'),
+        }, h('span', { class: 'lbl' }), icon('chevron-down'));
+        attr(detail.el, 'id', 'kg-detail');
+        this.#detailWrap = h('div', { class: 'detail-wrap' }, this.#detailBar, detail.el);
+        this.#inner = h('div', { class: 'sidebar-inner' }, this.#handle, h('div', { class: 'sb-head' }, this.#head, this.#searchWrap, this.#filtersWrap), this.#listWrap, this.#split, this.#detailWrap);
+        this.#resize = h('div', {
+            class: 'sb-resize',
+            role: 'separator',
+            'aria-orientation': 'vertical',
+            'aria-valuemin': String(SIDEBAR_MIN),
+            tabindex: '0',
+        });
+        this.el = h('aside', { class: 'sidebar', 'data-open': 'true' }, this.#resize, this.#inner);
+        this.#bindResize();
+        this.#bindSplit();
+    }
+    get width() {
+        return this.#width;
     }
-    setOpen(open) {
+    get detailShare() {
+        return this.#share;
+    }
+    /** Follow the panel states of the four regions (the sidebar folds when none is open). */
+    setPanels(states) {
+        this.#states = states;
+        const shown = SIDEBAR_REGIONS.filter((r) => states[r] !== 'hidden');
+        const open = shown.some((r) => states[r] === 'open');
+        const root = this.#ctx.root;
+        if (!open)
+            moveFocusOut(root, this.el, () => this.#host.focusOutside());
+        const fold = (el, state, to) => {
+            if (state !== 'open')
+                moveFocusOut(root, el, to);
+            el.hidden = state !== 'open';
+            el.inert = state !== 'open';
+        };
+        fold(this.#searchWrap, states.search, () => this.#searchButton);
+        fold(this.#filtersWrap, states.filters, () => this.#filtersButton);
+        this.#searchButton.hidden = states.search !== 'collapsed';
+        this.#filtersButton.hidden = states.filters !== 'collapsed';
+        this.#listHead.hidden = states.list === 'hidden';
+        this.#listToggle.hidden = states.list === 'hidden';
+        attr(this.#listToggle, 'aria-expanded', String(states.list === 'open'));
+        attr(this.#detailWrap, 'data-state', states.detail);
+        this.#detailWrap.hidden = states.detail === 'hidden';
+        if (states.detail !== 'open')
+            moveFocusOut(root, this.#detail.el, () => this.#detailBar);
+        this.#detail.el.inert = states.detail !== 'open';
+        attr(this.#detailBar, 'aria-expanded', String(states.detail === 'open'));
+        this.#placeList(this.#ctx.controller.query.trim() !== '');
+        this.el.hidden = shown.length === 0;
         attr(this.el, 'data-open', String(open));
         this.el.inert = !open;
+        this.#relabel();
     }
-    update(topics) {
-        const tr = this.#ctx.tr();
-        const all = topics.has('status') || topics.has('data') || topics.has('locale');
-        if (all) {
-            attr(this.el, 'aria-label', tr.t('sidebar.label'));
-            setText(this.#title, tr.t('sidebar.changes'));
-            this.searchInput.placeholder = tr.t('sidebar.searchPlaceholder');
-            attr(this.searchInput, 'aria-label', tr.t('sidebar.search'));
-            attr(this.#searchClear, 'aria-label', tr.t('sidebar.searchClear'));
-            attr(this.#filters, 'aria-label', tr.t('sidebar.filters'));
-            attr(this.#handle, 'aria-label', tr.t('sidebar.sheet'));
-            setText(this.#showAll, tr.t('sidebar.clearFilters'));
-            this.searchInput.disabled = this.#ctx.controller.status !== 'ready';
-            this.#renderChips();
-            if (this.#query)
-                this.#runSearch();
-        }
-        if (all || topics.has('filters')) {
-            this.#renderChipState();
-            this.#layoutList();
-        }
-        if (all || topics.has('review')) {
-            this.#renderProgress();
-            this.#refreshRows();
+    /**
+     * Apply sizes (after a drag, or `instant`: remembered ones, which must not animate in on
+     * load); the width is clamped when the layout is known.
+     */
+    setSizes(width, detailShare, instant = false) {
+        if (instant) {
+            this.el.classList.add('dragging');
+            frameOrTimeout(() => this.el.classList.remove('dragging'));
         }
-        if (topics.has('selection')) {
-            this.#refreshRows();
-            this.#revealSelected();
+        this.#width = Math.max(SIDEBAR_MIN, Math.min(SIDEBAR_MAX, Math.round(width)));
+        this.#share = detailShare === null ? null : Math.max(0, Math.min(1, detailShare));
+        if (instant)
+            this.#reported = { width: this.#width, share: this.#share };
+        this.el.style.setProperty('--sidebar-w', `${this.#width}px`);
+        if (this.#share === null) {
+            this.el.removeAttribute('data-split');
+            this.el.style.removeProperty('--detail-share');
         }
-        this.detail.update(topics);
-    }
-    /** Move keyboard focus into the list (after choosing a search result). */
-    focusList() {
-        this.list.focus({ preventScroll: true });
-    }
-    focusSearch() {
-        this.searchInput.focus();
-        this.searchInput.select();
-    }
-    /** Esc inside the sidebar: clear the search first. Returns whether it handled the key. */
-    escape() {
-        if (this.#query) {
-            this.#setQuery('', true);
-            return true;
+        else {
+            attr(this.el, 'data-split', 'true');
+            this.el.style.setProperty('--detail-share', String(this.#share));
         }
-        return false;
+        this.#syncSeparators();
     }
-    // ─── Header bits ─────────────────────────────────────────────────────────
-    #renderChips() {
-        const tr = this.#ctx.tr();
-        const scene = this.#ctx.controller.scene;
-        const counts = scene ? familyCounts(scene) : null;
-        setText(this.#count, tr.num(scene?.hunks.length ?? 0));
-        this.#count.hidden = !scene;
-        this.#filters.hidden = !scene || scene.hunks.length === 0;
-        for (const [f, chip] of this.#chips) {
-            const n = counts ? counts[f] : 0;
-            setText(chip.querySelector('.lbl'), tr.t(`family.${f}`));
-            setText(chip.querySelector('.n'), tr.num(n));
-            chip.hidden = n === 0;
-            attr(chip, 'title', tr.t(`familyHint.${f}`));
+    update(topics) {
+        if (topics.has('status') || topics.has('data') || topics.has('locale'))
+            this.#relabel();
+        if (topics.has('search') || topics.has('status')) {
+            this.#placeList(this.#ctx.controller.query.trim() !== '');
         }
-    }
-    #renderChipState() {
-        const fams = this.#ctx.controller.families;
-        for (const [f, chip] of this.#chips) {
-            attr(chip, 'aria-pressed', String(fams.has(f)));
+        if (topics.has('filters') || topics.has('status')) {
+            attr(this.#filtersButton, 'data-active', String(this.#ctx.controller.families.size > 0));
         }
-        this.#showAll.hidden = fams.size === 0;
-    }
-    #renderProgress() {
-        const tr = this.#ctx.tr();
-        const state = this.#ctx.controller.reviewState();
-        const done = state.reviewed.length;
-        const total = state.total;
-        this.#progress.hidden = total === 0;
-        const complete = total > 0 && done === total;
-        attr(this.#progress, 'data-complete', String(complete));
-        setText(this.#progressText, complete ? tr.t('review.complete') : tr.t('review.progress', { done, total }));
-        this.#progressBar.style.transform = `scaleX(${total > 0 ? done / total : 0})`;
     }
-    // ─── Virtual list ────────────────────────────────────────────────────────
-    #layoutList() {
-        const c = this.#ctx.controller;
-        const tr = this.#ctx.tr();
-        replace(this.#phases, c.list.items.map((it) => it.kind === 'header'
-            ? h('span', {
-                id: `kg-phase-${it.phase}`,
-                text: `${tr.t(`phase.${it.phase}`)} (${tr.num(it.count)})`,
-            })
-            : null));
-        for (const el of this.#rendered.values())
-            el.remove();
-        this.#rendered.clear();
-        const items = c.list.items;
-        this.#offsets = new Array(items.length);
-        let y = 0;
-        for (let i = 0; i < items.length; i++) {
-            this.#offsets[i] = y;
-            y += itemHeight(items[i]);
-        }
-        this.#listInner.style.height = `${y + 8}px`;
-        this.#renderEmpty();
-        this.renderWindow();
+    /**
+     * The list's place shows the rows while the list is open and the search results while a
+     * search is active, whatever the list's state (the results take its place).
+     */
+    #placeList(searching) {
+        const state = this.#states?.list ?? 'open';
+        const shown = state === 'open' || searching;
+        if (!shown)
+            moveFocusOut(this.#ctx.root, this.#listWrap, () => this.#listToggle);
+        this.#listWrap.hidden = !shown;
+        this.#listWrap.inert = !shown;
+        const detailOpen = (this.#states?.detail ?? 'open') === 'open';
+        this.#split.hidden = !(shown && detailOpen);
+        attr(this.el, 'data-list', shown ? 'open' : 'folded');
     }
-    #renderEmpty() {
-        const c = this.#ctx.controller;
+    #relabel() {
         const tr = this.#ctx.tr();
-        const existing = this.#listInner.querySelector('.list-empty, .skeleton');
-        existing?.remove();
-        if (c.status === 'loading' || c.status === 'idle') {
-            const sk = h('div', { class: 'skeleton', 'aria-hidden': 'true' });
-            if (c.status === 'loading') {
-                for (let i = 0; i < 6; i++) {
-                    sk.appendChild(h('div', { class: 'skeleton-row shimmer' }, h('span', { class: 'g' }), h('span', { class: 'b' })));
-                }
-            }
-            this.#listInner.appendChild(sk);
-            return;
-        }
-        if (c.status !== 'ready' || c.list.items.length > 0)
-            return;
-        const filtered = c.families.size > 0 && c.hunkCount > 0;
-        this.#listInner.appendChild(h('div', { class: 'list-empty' }, icon(filtered ? 'search' : 'check-circle'), h('span', { text: tr.t(filtered ? 'sidebar.filteredEmpty' : 'sidebar.noChanges') }), filtered
-            ? h('button', {
-                type: 'button',
-                class: 'btn',
-                text: tr.t('sidebar.clearFilters'),
-                onclick: () => c.setFamilies([]),
-            })
-            : null));
+        attr(this.el, 'aria-label', tr.t('sidebar.label'));
+        attr(this.#handle, 'aria-label', tr.t('sidebar.sheet'));
+        attr(this.#resize, 'aria-label', tr.t('sidebar.resize'));
+        attr(this.#split, 'aria-label', tr.t('sidebar.split'));
+        const listOpen = this.#states?.list !== 'collapsed';
+        relabel(this.#listToggle, tr.t(listOpen ? 'sidebar.hideList' : 'sidebar.showList'));
+        relabel(this.#searchButton, `${tr.t('sidebar.search')} (/)`);
+        relabel(this.#filtersButton, tr.t('sidebar.filters'));
+        const bar = this.#detailBar.querySelector('.lbl');
+        if (bar)
+            bar.textContent = tr.t('detail.label');
+        attr(this.#detailBar, 'title', tr.t(this.#states?.detail === 'collapsed' ? 'detail.show' : 'detail.hide'));
     }
-    #queueWindow() {
-        if (this.#scrollQueued)
+    /** A drag or key press ended: report the sizes, unless they are where they were. */
+    #done() {
+        const { width, share } = this.#reported;
+        if (width === this.#width && share === this.#share)
             return;
-        this.#scrollQueued = true;
-        requestAnimationFrame(() => {
-            this.#scrollQueued = false;
-            this.renderWindow();
-        });
+        this.#reported = { width: this.#width, share: this.#share };
+        this.#host.resized(this.#width, this.#share);
     }
-    /** First item index whose bottom is below `y` (binary search over offsets). */
-    #indexAt(y) {
-        let lo = 0;
-        let hi = this.#offsets.length;
-        while (lo < hi) {
-            const mid = (lo + hi) >> 1;
-            if (this.#offsets[mid] + ROW_SLOT <= y)
-                lo = mid + 1;
-            else
-                hi = mid;
-        }
-        return lo;
-    }
-    renderWindow() {
-        const items = this.#ctx.controller.list.items;
-        const top = this.list.scrollTop;
-        const height = this.list.clientHeight || 640;
-        const from = this.#indexAt(Math.max(0, top - OVERSCAN));
-        const limit = top + height + OVERSCAN;
-        const needed = new Set();
-        for (let i = from; i < items.length && this.#offsets[i] < limit; i++)
-            needed.add(i);
-        for (const [i, el] of this.#rendered) {
-            if (!needed.has(i)) {
-                el.remove();
-                this.#rendered.delete(i);
-            }
-        }
-        for (const i of needed) {
-            if (this.#rendered.has(i))
-                continue;
-            const el = this.#renderItem(items[i], this.#offsets[i]);
-            this.#rendered.set(i, el);
-            this.#listInner.appendChild(el);
-        }
-        this.#renderSticky(top);
-    }
-    #renderItem(item, y) {
-        const tr = this.#ctx.tr();
-        const c = this.#ctx.controller;
-        if (item.kind === 'header') {
-            return h('div', { class: 'group', role: 'presentation', style: `top: ${y}px` }, h('span', { text: tr.t(`phase.${item.phase}`) }), h('span', { class: 'n', text: tr.num(item.count) }));
-        }
-        const hunk = c.scene?.hunks[item.hunk];
-        const reviewed = c.isReviewed(hunk.id);
-        // Pointer shortcut only: options hold no interactive children. Keyboard users press `x` or
-        // use the detail panel's "Reviewed" button.
-        const rv = h('span', {
-            class: 'rv',
-            'aria-hidden': 'true',
-            'data-pressed': String(reviewed),
-            title: tr.t(reviewed ? 'review.unmark' : 'review.mark'),
-            'data-hunk': hunk.id,
-        }, h('span', { class: 'ring' }, icon('check')));
-        const rank = c.list.rank.get(item.hunk) ?? 0;
-        const row = h('div', {
-            class: 'row',
-            role: 'option',
-            id: `kg-opt-${item.hunk}`,
-            'data-index': String(item.hunk),
-            'data-family': hunk.family,
-            'data-reviewed': String(reviewed),
-            'aria-selected': String(c.selectedHunk === item.hunk),
-            'aria-setsize': String(c.list.order.length),
-            'aria-posinset': String(rank + 1),
-            'aria-describedby': `kg-phase-${hunk.phase}`,
-            style: `top: ${y + 2}px`,
-        }, h('span', { class: 'glyph-box', 'aria-hidden': 'true', text: sceneHunkGlyph(hunk) }), h('span', { class: 'txt' }, h('span', { class: 'title', title: hunk.title, text: hunk.title }), h('span', { class: 'sub', text: hunk.subtitle })), rv);
-        this.#labelRow(row, hunk, reviewed);
-        return row;
-    }
-    #labelRow(row, hunk, reviewed) {
-        const tr = this.#ctx.tr();
-        const parts = [hunk.title];
-        if (hunk.subtitle)
-            parts.push(hunk.subtitle);
-        if (reviewed)
-            parts.push(tr.t('review.toggle'));
-        attr(row, 'aria-label', parts.join('. '));
-    }
-    /** Update selection / reviewed state of the rendered rows in place. */
-    #refreshRows() {
-        const c = this.#ctx.controller;
-        const tr = this.#ctx.tr();
-        for (const el of this.#rendered.values()) {
-            if (!el.classList.contains('row'))
-                continue;
-            const index = Number(el.dataset.index);
-            const hunk = c.scene?.hunks[index];
-            if (!hunk)
-                continue;
-            const reviewed = c.isReviewed(hunk.id);
-            attr(el, 'aria-selected', String(index === c.selectedHunk));
-            attr(el, 'data-reviewed', String(reviewed));
-            const rv = el.querySelector('.rv');
-            attr(rv, 'data-pressed', String(reviewed));
-            attr(rv, 'title', tr.t(reviewed ? 'review.unmark' : 'review.mark'));
-            this.#labelRow(el, hunk, reviewed);
-        }
-        const sel = c.selectedHunk;
-        attr(this.list, 'aria-activedescendant', sel >= 0 && c.list.rank.has(sel) ? `kg-opt-${sel}` : null);
-    }
-    #revealSelected() {
-        const c = this.#ctx.controller;
-        const item = c.list.itemOf.get(c.selectedHunk);
-        if (item === undefined)
-            return;
-        const y = this.#offsets[item];
-        const top = this.list.scrollTop;
-        // Not laid out yet (hidden sheet): position it for when it shows.
-        const height = this.list.clientHeight || 640;
-        // The first row of a group scrolls its group header into view too.
-        const above = c.list.items[item - 1]?.kind === 'header'
-            ? this.#offsets[item - 1]
-            : y - HEADER_SLOT;
-        if (y < top + HEADER_SLOT)
-            this.list.scrollTop = Math.max(0, above);
-        else if (y + ROW_SLOT > top + height)
-            this.list.scrollTop = y + ROW_SLOT - height + 8;
-        this.renderWindow();
-        this.#refreshRows();
+    // ─── Width ───────────────────────────────────────────────────────────────
+    /** The widest the sidebar may be next to the canvas, px. */
+    #maxWidth() {
+        const total = this.el.parentElement?.clientWidth ?? 0;
+        return total > 0
+            ? Math.max(SIDEBAR_MIN, Math.min(SIDEBAR_MAX, total - STAGE_MIN))
+            : SIDEBAR_MAX;
     }
-    #renderSticky(top) {
-        const items = this.#ctx.controller.list.items;
-        let current = -1;
-        let next = -1;
-        for (let i = 0; i < items.length; i++) {
-            if (items[i]?.kind !== 'header')
-                continue;
-            if (this.#offsets[i] <= top)
-                current = i;
-            else {
-                next = i;
-                break;
-            }
-        }
-        if (current < 0 || top <= 0) {
-            this.#sticky.hidden = true;
-            return;
-        }
-        const item = items[current];
-        const tr = this.#ctx.tr();
-        this.#sticky.hidden = false;
-        const label = `${tr.t(`phase.${item.phase}`)}|${item.count}`;
-        if (this.#sticky.dataset.key !== label) {
-            this.#sticky.dataset.key = label;
-            replace(this.#sticky, h('div', { class: 'group' }, h('span', { text: tr.t(`phase.${item.phase}`) }), h('span', { class: 'n', text: tr.num(item.count) })));
-        }
-        const push = next >= 0 ? Math.min(0, this.#offsets[next] - top - HEADER_SLOT) : 0;
-        this.#sticky.style.transform = `translateY(${push}px)`;
+    #syncSeparators() {
+        const max = this.#maxWidth();
+        attr(this.#resize, 'aria-valuemax', String(max));
+        const now = Math.min(this.#width, max);
+        attr(this.#resize, 'aria-valuenow', String(now));
+        attr(this.#resize, 'aria-valuetext', `${now} px`);
+        const list = Math.round(100 * (1 - (this.#share ?? this.#measuredShare())));
+        attr(this.#split, 'aria-valuenow', String(list));
+        attr(this.#split, 'aria-valuetext', this.#ctx.tr().t('sidebar.splitValue', { p: `${list}%` }));
     }
-    #onListClick(e) {
-        const c = this.#ctx.controller;
-        const target = e.target;
-        const rv = target.closest('.rv');
-        if (rv?.dataset.hunk) {
+    #bindResize() {
+        let start = null;
+        const set = (px, done) => {
+            const width = Math.max(SIDEBAR_MIN, Math.min(this.#maxWidth(), px));
+            this.setSizes(width, this.#share);
+            if (done)
+                this.#done();
+        };
+        this.#resize.addEventListener('pointerdown', (e) => {
+            e.preventDefault();
+            start = { x: e.clientX, w: this.el.getBoundingClientRect().width, id: e.pointerId };
+            this.#resize.setPointerCapture?.(e.pointerId);
+            this.el.classList.add('dragging');
+        });
+        this.#resize.addEventListener('pointermove', (e) => {
+            // The sidebar is on the right: dragging its edge left widens it.
+            if (start && e.pointerId === start.id)
+                set(start.w + (start.x - e.clientX), false);
+        });
+        const end = (e) => {
+            if (!start || e.pointerId !== start.id)
+                return;
+            start = null;
+            this.el.classList.remove('dragging');
+            this.#done();
+        };
+        this.#resize.addEventListener('pointerup', end);
+        this.#resize.addEventListener('pointercancel', end);
+        this.#resize.addEventListener('dblclick', () => set(SIDEBAR_WIDTH, true));
+        this.#resize.addEventListener('keydown', (e) => {
+            const step = e.shiftKey ? WIDTH_STEP_LARGE : WIDTH_STEP;
+            // From the width shown (a narrow layout holds the sidebar below the stored width).
+            const shown = Math.min(this.#width, this.#maxWidth());
+            const to = {
+                ArrowLeft: shown + step,
+                ArrowRight: shown - step,
+                PageUp: shown + WIDTH_STEP_LARGE,
+                PageDown: shown - WIDTH_STEP_LARGE,
+                Home: SIDEBAR_MIN,
+                End: this.#maxWidth(),
+            };
+            const next = to[e.key];
+            if (next === undefined)
+                return;
+            e.preventDefault();
             e.stopPropagation();
-            c.toggleReviewed(rv.dataset.hunk);
-            return;
-        }
-        const row = target.closest('.row');
-        if (!row)
-            return;
-        const index = Number(row.dataset.index);
-        if (Number.isInteger(index))
-            c.selectHunk(index);
-    }
-    // ─── Search ──────────────────────────────────────────────────────────────
-    #setQuery(query, focus = false) {
-        this.#query = query;
-        if (this.searchInput.value !== query)
-            this.searchInput.value = query;
-        this.#activeHit = 0;
-        this.#runSearch();
-        if (focus)
-            this.searchInput.focus();
-    }
-    #runSearch() {
-        const q = this.#query.trim();
-        this.#hits = q ? this.#ctx.controller.search(q, SEARCH_LIMIT) : [];
-        const searching = q !== '';
-        this.#results.hidden = !searching;
-        this.list.hidden = searching;
-        this.#sticky.hidden = searching || this.#sticky.hidden;
-        attr(this.searchInput, 'aria-expanded', String(searching));
-        this.#updateSearchChrome();
-        if (!searching) {
-            replace(this.#results);
-            this.renderWindow();
-            return;
-        }
-        this.#renderResults();
-    }
-    #updateSearchChrome() {
-        const focused = this.#ctx.root.activeElement === this.searchInput;
-        this.#searchKbd.hidden = this.#query !== '' || focused;
-        this.#searchClear.hidden = this.#query === '';
-    }
-    #renderResults() {
-        const tr = this.#ctx.tr();
-        const c = this.#ctx.controller;
-        const q = this.#query.trim();
-        if (this.#hits.length === 0) {
-            replace(this.#results, h('div', { class: 'list-empty' }, icon('search'), h('span', { text: tr.t('sidebar.noResults', { q }) })));
-            attr(this.searchInput, 'aria-activedescendant', null);
-            return;
-        }
-        const scene = c.scene;
-        const rows = this.#hits.map((hit, i) => {
-            const sceneIndex = scene?.nodeIndex.get(hit.node.id);
-            const sn = sceneIndex !== undefined ? scene?.nodes[sceneIndex] : undefined;
-            const family = sn?.family ??
-                (hit.node.status === 'added'
-                    ? 'added'
-                    : hit.node.status === 'removed'
-                        ? 'removed'
-                        : hit.node.status === 'modified'
-                            ? 'content'
-                            : 'neutral');
-            const sub = hit.field === 'label' ? hit.node.id : hit.field === 'alias' ? hit.matched : hit.matched;
-            return h('button', {
-                type: 'button',
-                class: 'result',
-                role: 'option',
-                id: `kg-hit-${i}`,
-                tabindex: '-1',
-                'data-family': family,
-                'aria-selected': String(i === this.#activeHit),
-                onclick: () => this.#choose(i),
-                onpointermove: () => this.#setActiveHit(i),
-            }, h('span', { class: 'sdot', 'aria-hidden': 'true' }), h('span', { class: 'txt' }, h('span', { class: 'title' }, highlight(hit.node.label, hit.field === 'label' ? q : '')), h('span', { class: 'sub' }, highlight(sub, hit.field === 'label' ? '' : q))), h('span', { class: 'status', text: tr.t(`status.${hit.node.status}`) }));
+            set(next, true);
         });
-        replace(this.#results, h('div', {
-            class: 'results-head',
-            text: tr.plural('sidebar.results', this.#hits.length),
-        }), rows);
-        attr(this.searchInput, 'aria-activedescendant', `kg-hit-${this.#activeHit}`);
     }
-    #setActiveHit(i) {
-        if (i === this.#activeHit || i < 0 || i >= this.#hits.length)
-            return;
-        this.#activeHit = i;
-        for (const el of this.#results.querySelectorAll('.result')) {
-            attr(el, 'aria-selected', String(el.id === `kg-hit-${i}`));
-        }
-        attr(this.searchInput, 'aria-activedescendant', `kg-hit-${i}`);
-        this.#results.querySelector(`#kg-hit-${i}`)?.scrollIntoView?.({ block: 'nearest' });
+    // ─── Split between the list and the detail panel ────────────────────────
+    /** The detail panel's share of the sidebar's height as laid out now (0 before layout). */
+    #measuredShare() {
+        const total = this.#inner.clientHeight;
+        return total > 0 ? this.#detailWrap.getBoundingClientRect().height / total : 0;
     }
-    #choose(i) {
-        const hit = this.#hits[i];
-        if (!hit)
-            return;
-        this.#setQuery('');
-        this.#ctx.controller.revealNode(hit.node.id);
-        this.focusList();
+    /** Clamp a share so that the list and the detail panel keep their minimum heights. */
+    #clampShare(share) {
+        const total = this.#inner.clientHeight;
+        if (total <= 0)
+            return Math.max(0.1, Math.min(0.9, share));
+        const above = this.#head.parentElement?.getBoundingClientRect().height ?? 0;
+        const max = Math.max(DETAIL_MIN, total - above - LIST_MIN) / total;
+        return Math.max(DETAIL_MIN / total, Math.min(max, share));
     }
-    #onSearchKey(e) {
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                this.#setActiveHit(Math.min(this.#hits.length - 1, this.#activeHit + 1));
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                this.#setActiveHit(Math.max(0, this.#activeHit - 1));
-                break;
-            case 'Enter':
-                e.preventDefault();
-                this.#choose(this.#activeHit);
-                break;
-            case 'Escape':
-                e.preventDefault();
-                e.stopPropagation();
-                if (this.#query)
-                    this.#setQuery('');
-                else
-                    this.focusList();
-                break;
-            default:
+    #bindSplit() {
+        let start = null;
+        const set = (share, done) => {
+            this.setSizes(this.#width, this.#clampShare(share));
+            if (done)
+                this.#done();
+        };
+        this.#split.addEventListener('pointerdown', (e) => {
+            e.preventDefault();
+            start = { y: e.clientY, share: this.#share ?? this.#measuredShare(), id: e.pointerId };
+            this.#split.setPointerCapture?.(e.pointerId);
+            this.el.classList.add('dragging');
+        });
+        this.#split.addEventListener('pointermove', (e) => {
+            if (!start || e.pointerId !== start.id)
                 return;
-        }
+            const total = this.#inner.clientHeight;
+            if (total > 0)
+                set(start.share + (start.y - e.clientY) / total, false);
+        });
+        const end = (e) => {
+            if (!start || e.pointerId !== start.id)
+                return;
+            start = null;
+            this.el.classList.remove('dragging');
+            this.#done();
+        };
+        this.#split.addEventListener('pointerup', end);
+        this.#split.addEventListener('pointercancel', end);
+        // Back to the content's height.
+        this.#split.addEventListener('dblclick', () => {
+            this.setSizes(this.#width, null);
+            this.#done();
+        });
+        this.#split.addEventListener('keydown', (e) => {
+            const current = this.#share ?? this.#measuredShare();
+            // Up moves the split up: the detail panel grows.
+            const to = {
+                ArrowUp: current + SPLIT_STEP,
+                ArrowDown: current - SPLIT_STEP,
+                PageUp: current + 2 * SPLIT_STEP,
+                PageDown: current - 2 * SPLIT_STEP,
+                Home: 1,
+                End: 0,
+            };
+            const next = to[e.key];
+            if (next === undefined)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            set(next, true);
+        });
     }
     // ─── Bottom sheet ────────────────────────────────────────────────────────
     /** Separator semantics: the sheet's height as a percentage of the available height. */
@@ -558,6 +372,13 @@ export class Sidebar {
         if (total > 0)
             this.#sheetValue(this.el.getBoundingClientRect().height, total);
     }
+    /** The layout changed size: keep the width within what fits, refresh the separators. */
+    layout(compact) {
+        if (compact)
+            this.syncSheet();
+        else
+            this.#syncSeparators();
+    }
     #bindSheet() {
         let start = null;
         const host = () => this.el.parentElement;
@@ -594,17 +415,4 @@ export class Sidebar {
         });
     }
 }
-/** The label with the first occurrence of `q` (case-insensitive) marked. */
-function highlight(text, q) {
-    if (!q)
-        return [text];
-    const at = text.toLowerCase().indexOf(q.toLowerCase());
-    if (at < 0)
-        return [text];
-    return [
-        text.slice(0, at),
-        h('mark', { text: text.slice(at, at + q.length) }),
-        text.slice(at + q.length),
-    ];
-}
 //# sourceMappingURL=sidebar.js.map