feat(panels): render each panel's state classes from the store

A panel's collapsed, dock-pinned, dock-pinned-top, layout-auto-collapsed
and accordion-collapsed classes are drawn by its root's v-panel-state from
the gev-panel-chrome store. PanelChrome, its restore, the layout
controller, both rails and the side accordion present each panel's state
there instead of writing its classes; the rails call onCollapse(panel,
{collapsed, auto}). The directive applies a change in a synchronous
watcher, since the rails measure a panel in the task that opens or closes
it.

Destroying the chrome inside Cockpit now puts back the panels Cockpit's
entry closed while it can still present them. Without a shell, the voice
tools' set_panel_open reports that there is no panel to open. QA scripts
present the states they set instead of writing the classes.

scripts/package-boundaries.json

@@ -122,7 +122,8 @@
       "src/firstRunCopy.js",
       "src/ui/kit/UiButton.vue",
       "src/ui/stores/panelChrome.js",
-      "src/ui/rail/PanelCollapseButton.vue"
+      "src/ui/rail/PanelCollapseButton.vue",
+      "src/ui/rail/panelState.js"
     ],
     "external": ["vue", "pinia"]
   },
@@ -1048,7 +1049,8 @@
       "src/ui/stores/worldOverlayActions.js",
       "src/ui/stores/awarenessDirection.js",
       "src/ui/stores/hud.js",
-      "src/ui/stores/panelChrome.js"
+      "src/ui/stores/panelChrome.js",
+      "src/ui/rail/panelState.js"
     ],
     "external": ["cesium", "vue", "pinia"]
   },
@@ -3054,7 +3056,8 @@
       "src/ui/stores/hud.js",
       "src/ui/stores/firstRun.js",
       "src/firstRunCopy.js",
-      "src/ui/stores/panelChrome.js"
+      "src/ui/stores/panelChrome.js",
+      "src/ui/rail/panelState.js"
     ],
     "external": [
       "hls.js",
@@ -3863,7 +3866,8 @@
       "src/ui/panelRailCatalog.js",
       "src/ui/panelAccordion.js",
       "src/ui/vueRuntime.js",
-      "src/ui/stores/panelChrome.js"
+      "src/ui/stores/panelChrome.js",
+      "src/ui/rail/panelState.js"
     ],
     "external": ["vue", "pinia"]
   },

scripts/qa-cockpit-utility.mjs

@@ -1799,7 +1799,7 @@ try {
     manager._setCockpitDisplayPortalActive(false);
     document.body.classList.remove('cockpit-mode');
     await waitFrames();
-    standard.classList.remove('collapsed');
+    manager._presentPanel(standard, { collapsed: false });
     standard.style.height = '120px';
     standard.style.maxHeight = '120px';
     standard.style.overflowY = 'auto';
@@ -1834,7 +1834,7 @@ try {
     cockpit.style.height = priorCockpitHeight;
     cockpit.style.maxHeight = priorCockpitMaxHeight;
     cockpit.style.overflowY = priorCockpitOverflow;
-    standard.classList.toggle('collapsed', standardWasCollapsed);
+    manager._presentPanel(standard, { collapsed: standardWasCollapsed });
     return {
       standardBefore,
       standardAfter,

scripts/qa-radio.mjs

@@ -1716,7 +1716,14 @@ async function main() {
           else panel.setAttribute('style', state.style);
           if (state.ariaHidden === null) panel.removeAttribute('aria-hidden');
           else panel.setAttribute('aria-hidden', state.ariaHidden);
-          manager._syncPanelCollapseButton(panel);
+          // The restored classes are the panel's state again.
+          const has = (name) => panel.classList.contains(name);
+          manager._presentPanel(panel, {
+            collapsed: has('collapsed'),
+            pinned: has('dock-pinned'),
+            pinnedTop: has('dock-pinned-top'),
+            auto: has('layout-auto-collapsed') ? 'layout' : has('accordion-collapsed') ? 'accordion' : null,
+          });
         }
         for (const [id, state] of Object.entries(prior.stacks)) {
           const stack = document.getElementById(id);
@@ -1974,7 +1981,7 @@ async function main() {
       manager._setCockpitDisplayPortalActive(true);
       hud.hidden = false;
       signal.hidden = false;
-      dataPanel.classList.remove('collapsed');
+      manager._presentPanel(dataPanel, { collapsed: false });
       window.__godsEyeView.styleManager._syncLeftPanelAdaptiveLayout();
       window.__godsEyeView.styleManager.cockpitView.syncSignalLayout();
       if (display.getAttribute('aria-expanded') === 'true') display.click();
@@ -2059,8 +2066,7 @@ async function main() {
       contextCard.hidden = false;
       // Expand the panel the same way this block already does at entry, so the
       // portaled Display groups measured further down keep their DOM home.
-      dataPanel.classList.remove('collapsed', 'layout-auto-collapsed');
-      manager._syncPanelCollapseButton(dataPanel);
+      manager._presentPanel(dataPanel, { collapsed: false, auto: null });
       manager._syncLeftPanelAdaptiveLayout();
       await waitForLayout();
       const panelRect = dataPanel.getBoundingClientRect();
@@ -2287,7 +2293,14 @@ async function main() {
           else panel.setAttribute('style', state.style);
           if (state.ariaHidden === null) panel.removeAttribute('aria-hidden');
           else panel.setAttribute('aria-hidden', state.ariaHidden);
-          manager._syncPanelCollapseButton(panel);
+          // The restored classes are the panel's state again.
+          const has = (name) => panel.classList.contains(name);
+          manager._presentPanel(panel, {
+            collapsed: has('collapsed'),
+            pinned: has('dock-pinned'),
+            pinnedTop: has('dock-pinned-top'),
+            auto: has('layout-auto-collapsed') ? 'layout' : has('accordion-collapsed') ? 'accordion' : null,
+          });
         }
         manager._panelLayout._leftStackPreferredPanelId = prior.preferredLeftPanelId;
         localStorage.clear();

scripts/qa-visual-input.mjs

@@ -57,7 +57,7 @@ try {
       persist: false,
       syncShare: false,
     });
-    manager._sliderPanel.classList.remove('collapsed');
+    manager._presentPanel(manager._sliderPanel, { collapsed: false });
     const slider = manager._sliderContainer.querySelector('input');
     window.__qaOldSlider = slider;
     const name = 'pixelation';

scripts/qa-weather-journey.mjs

@@ -261,7 +261,7 @@ try {
     for (const [id, entry] of gev.dataManager.layers)
       if (entry.enabled)
         await gev.dataManager.setEnabled(id, false, { origin: 'user' });
-    document.querySelector('#data-panel')?.classList.remove('collapsed');
+    gev.styleManager._presentPanel('data-panel', { collapsed: false });
   });
 
   // 1. Earth view, clean.