feat(panels): render collapse, dock and pin buttons from the store

PanelChrome no longer writes the panels' collapse buttons, the command
dock tray toggles' names or the dock pins' pressed state. It presents each
panel's open and pinned state to the new gev-panel-chrome store, and the
buttons, now views, call it there: PanelCollapseButton for the panel
headers, bound toggles and pins in the command dock. Clicks take effect
once the chrome is initialized; a new owner starts from its own states.

bindPanelDisclosure binds only a panel's Escape and refuses the retired
buttons and onChange arguments. UiButton joins the component kit.
This commit is contained in:
Sameh Khamis committed 2026-10-31 23:30:08 -07:00
1 parent ec4c55e78c
commit dd3a2c87f9
25 files changed
+635 -212

No files matched your search

+15 -11
View File
@@ -4,7 +4,9 @@ import { createHoverDisclosure, collapsePanelOnEscape } from './ui/panelDisclosu
import test from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync } from 'node:fs';
import { createPinia } from 'pinia';
import { msg, t } from './i18n/index.js';
import { usePanelChromeStore } from './ui/stores/panelChrome.js';
// Exercise the installed event routes and central close method, without WebGL.
const markup = await renderApplicationHtml(readFileSync(new URL('../index.html', import.meta.url), 'utf8'));
@@ -113,8 +115,11 @@ function harness({ hidden = false, selected = true, noChips = false } = {}) {
const saves = [];
const claims = [];
let shareSyncs = 0;
const chromeStore = usePanelChromeStore(createPinia());
const manager = {
_lifetime: { frame() {} },
_chromeStore: chromeStore,
_chromeToken: chromeStore.connect({}),
_panelLayout: { _leftStackPreferredPanelId: null, _rightStackPreferredPanelId: null },
...methods,
_savePanelCollapsedState(...args) { saves.push(args); },
@@ -136,6 +141,8 @@ function harness({ hidden = false, selected = true, noChips = false } = {}) {
manager, panel, location, disclosure, locationDisclosure, locationSearch,
first, active, elsewhere, document, timers, emit, focus, tick, saves, claims,
calls: () => focusCalls,
/** A tray's state as PanelChrome presents it to the dock's buttons. */
tray: (id) => chromeStore.panels[id],
shareSyncs: () => shareSyncs,
show() { hidden = false; },
select(value) { selected = value; },
@@ -297,8 +304,7 @@ test('Location Enter stays immediate while Space waits for native key release',
h.locationKeyUp(key);
}
assert.equal(h.location.classList.contains('collapsed'), false);
assert.equal(h.locationDisclosure.getAttribute('aria-expanded'), 'true');
assert.equal(h.locationDisclosure.getAttribute('aria-label'), 'Collapse LOCATION');
assert.equal(h.tray('location-bar').collapsed, false);
assert.equal(h.document.activeElement, h.locationDisclosure);
assert.equal(h.timers.size, 0);
assert.equal(h.calls(), 0);
@@ -313,7 +319,7 @@ test('Location Enter stays immediate while Space waits for native key release',
h.locationKey(key);
if (key === ' ') h.locationKeyUp(key);
assert.equal(h.location.classList.contains('collapsed'), true);
assert.equal(h.locationDisclosure.getAttribute('aria-label'), 'Expand LOCATION');
assert.equal(h.tray('location-bar').collapsed, true);
}
});
@@ -327,9 +333,7 @@ test('Location synthesized click and Escape retain focus and its accessible name
const escape = h.locationEscape();
assert.equal(escape.defaultPrevented, true);
assert.equal(h.location.classList.contains('collapsed'), true);
assert.equal(h.locationDisclosure.getAttribute('aria-expanded'), 'false');
assert.equal(h.locationDisclosure.getAttribute('aria-label'), 'Expand LOCATION');
assert.equal(h.locationDisclosure.title, 'Expand LOCATION');
assert.equal(h.tray('location-bar').collapsed, true);
assert.equal(h.document.activeElement, h.locationDisclosure);
h.drain();
assert.equal(h.calls(), 0);
@@ -357,11 +361,11 @@ test('Location keyboard opening preserves a pinned sibling and a pinned Location
h.manager.setPanelCollapsed('control-panel', true);
h.focus(h.disclosure); h.key(); h.tick();
assert.equal(h.location.classList.contains('collapsed'), false);
assert.equal(h.locationDisclosure.getAttribute('aria-expanded'), 'true');
assert.equal(h.tray('location-bar').collapsed, false);
assert.equal(h.document.activeElement, h.active);
});
test('Location restoration syncs its real name without claiming focus, collapsing its sibling or persisting', () => {
test('Location restoration presents its state without claiming focus, collapsing its sibling or persisting', () => {
const h = harness(); h.key(); h.tick();
const saves = h.saves.length;
const claims = h.claims.length;
@@ -369,14 +373,14 @@ test('Location restoration syncs its real name without claiming focus, collapsin
h.manager.setPanelCollapsed('location-bar', false, { restore: true, persist: false, syncShare: false });
assert.equal(h.panel.classList.contains('collapsed'), false);
assert.equal(h.location.classList.contains('collapsed'), false);
assert.equal(h.locationDisclosure.getAttribute('aria-label'), 'Collapse LOCATION');
assert.equal(h.tray('location-bar').collapsed, false);
assert.equal(h.document.activeElement, h.active);
assert.equal(h.saves.length, saves);
assert.equal(h.claims.length, claims);
assert.equal(h.shareSyncs(), shareSyncs);
h.locationDisclosure.setAttribute('aria-label', 'stale');
const presented = h.tray('location-bar');
h.manager.setPanelCollapsed('location-bar', false, { restore: true, persist: false, syncShare: false });
assert.equal(h.locationDisclosure.getAttribute('aria-label'), 'Collapse LOCATION', 'same-state synchronization keeps the Location name');
assert.ok(h.tray('location-bar') === presented, 'same-state synchronization does not republish');
assert.equal(h.timers.size, 0);
});