`fix(theme-header): auto-expand Header and Intro on external fullscreen exit

- listen for document fullscreenchange in shared header mount logic
- when fullscreen ends and Header and Intro is collapsed, reopen it automatically
- keeps accordion/fullscreen state consistent when exiting via browser UI or system-level fullscreen exit paths (not only in-app toggle)`

Author: DavidQ

tools/shared/platformShell.css

@@ -549,6 +549,39 @@ body.tools-platform-surface .right-sidebar {
   background: var(--tools-shell-glass);
 }
 
+body.tools-platform-surface .panel-accordion {
+  margin: 0 0 12px;
+  border: 1px solid var(--line, rgba(221, 214, 254, 0.26));
+  border-radius: 10px;
+  background: linear-gradient(180deg, var(--panel, rgba(76, 29, 149, 0.88)) 0%, var(--panel2, rgba(49, 17, 102, 0.94)) 100%);
+  overflow: hidden;
+}
+
+body.tools-platform-surface .panel-accordion__summary {
+  list-style: none;
+  cursor: pointer;
+  padding: 10px;
+  border-bottom: 1px solid transparent;
+}
+
+body.tools-platform-surface .panel-accordion__summary::-webkit-details-marker {
+  display: none;
+}
+
+body.tools-platform-surface .panel-accordion__summary h2,
+body.tools-platform-surface .panel-accordion__summary h3,
+body.tools-platform-surface .panel-accordion__summary h4 {
+  margin: 0;
+}
+
+body.tools-platform-surface .panel-accordion[open] .panel-accordion__summary {
+  border-bottom-color: var(--line, rgba(221, 214, 254, 0.26));
+}
+
+body.tools-platform-surface .panel-accordion__body {
+  padding: 10px;
+}
+
 body.tools-platform-surface .panel,
 body.tools-platform-surface .dock,
 body.tools-platform-surface .card {
@@ -639,6 +672,45 @@ body.tools-platform-surface .app > .toolbar:first-child {
   border-top: 1px solid var(--surface-border, rgba(221, 214, 254, 0.22));
 }
 
+html:fullscreen body.tools-platform-surface {
+  height: 100dvh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+html:fullscreen body.tools-platform-surface > .is-collapsible,
+html:fullscreen body.tools-platform-surface > [data-tools-platform-status] {
+  flex: 0 0 auto;
+}
+
+html:fullscreen body.tools-platform-surface > .wrap,
+html:fullscreen body.tools-platform-surface > .app-shell,
+html:fullscreen body.tools-platform-surface > .app {
+  flex: 1 1 auto;
+  min-height: 0 !important;
+  height: auto !important;
+  margin-bottom: 8px;
+}
+
+html:fullscreen body.tools-platform-surface .workspace,
+html:fullscreen body.tools-platform-surface .canvas-shell,
+html:fullscreen body.tools-platform-surface .canvas-wrap,
+html:fullscreen body.tools-platform-surface .preview-wrap,
+html:fullscreen body.tools-platform-surface .left-sidebar,
+html:fullscreen body.tools-platform-surface .right-sidebar,
+html:fullscreen body.tools-platform-surface .sidebar,
+html:fullscreen body.tools-platform-surface .rightbar {
+  min-height: 0;
+}
+
+html:fullscreen body.tools-platform-surface .left-sidebar,
+html:fullscreen body.tools-platform-surface .right-sidebar,
+html:fullscreen body.tools-platform-surface .sidebar.visible-overlay,
+html:fullscreen body.tools-platform-surface .rightbar.visible-overlay {
+  overflow-y: auto;
+}
+
 body.tools-howto-page {
   min-height: 100vh;
   min-height: 100dvh;

tools/shared/platformShell.js

@@ -485,6 +485,69 @@ function bindWorkspaceShellEvents(currentTool) {
   });
 }
 
+function asHeadingElement(element) {
+  if (!(element instanceof HTMLElement)) {
+    return null;
+  }
+  const tag = element.tagName.toUpperCase();
+  if (tag === "H2" || tag === "H3" || tag === "H4") {
+    return element;
+  }
+  return null;
+}
+
+function convertPanelToAccordion(panelElement) {
+  if (!(panelElement instanceof HTMLElement)) {
+    return null;
+  }
+  const heading = asHeadingElement(panelElement.querySelector(":scope > h2, :scope > h3, :scope > h4"));
+  const titleText = heading?.textContent?.trim() || "Panel";
+  const summaryHeadingTag = heading?.tagName?.toLowerCase() || "h3";
+
+  const accordion = document.createElement("details");
+  accordion.className = "panel-accordion";
+  const summary = document.createElement("summary");
+  summary.className = "panel-accordion__summary";
+  summary.innerHTML = `<${summaryHeadingTag}>${escapeHtml(titleText)}</${summaryHeadingTag}>`;
+
+  const body = document.createElement("div");
+  body.className = "panel-accordion__body";
+
+  if (heading && heading.parentElement === panelElement) {
+    heading.remove();
+  }
+  while (panelElement.firstChild) {
+    body.appendChild(panelElement.firstChild);
+  }
+  accordion.append(summary, body);
+  panelElement.replaceWith(accordion);
+  return accordion;
+}
+
+function applySidebarAccordionRules() {
+  if (getPageMode() !== "tool") {
+    return;
+  }
+  const sidebars = queryAll(".tools-platform-resize-panel");
+  sidebars.forEach((sidebar) => {
+    if (!(sidebar instanceof HTMLElement)) {
+      return;
+    }
+
+    const directPanelElements = Array.from(sidebar.children).filter((child) =>
+      child instanceof HTMLElement && (child.matches("section.panel") || child.matches("div.panel"))
+    );
+    directPanelElements.forEach((panelElement) => {
+      convertPanelToAccordion(panelElement);
+    });
+
+    const accordions = Array.from(sidebar.querySelectorAll(":scope > details.panel-accordion"));
+    accordions.forEach((accordion, index) => {
+      accordion.open = index === 0;
+    });
+  });
+}
+
 function renderShell(currentTool) {
   const headerHost = queryFirst("[data-tools-platform-header]");
   const statusHost = queryFirst("[data-tools-platform-status]");
@@ -513,6 +576,7 @@ function renderShell(currentTool) {
     statusHost.innerHTML = renderStatusMarkup(currentTool);
   }
 
+  applySidebarAccordionRules();
   bindWorkspaceShellEvents(currentTool);
 }