From 6d75fee7b72c4dcf8c264ec238ce72e9806ed939 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Tue, 17 Mar 2026 11:48:57 -0500
Subject: [PATCH 1/6] feat: collapsible panels.

---
 src/app.js                   | 200 ++++++++++++++++++++++++++++++++++
 src/index.html               |  54 ++++++++-
 src/styles/layout-shell.css  |  47 ++++++++
 src/styles/panels-editor.css | 206 +++++++++++++++++++++++++++++++++++
 4 files changed, 504 insertions(+), 3 deletions(-)

diff --git a/src/app.js b/src/app.js
index 8f4b3fb..3b7b00d 100644
--- a/src/app.js
+++ b/src/app.js
@@ -15,6 +15,10 @@ const statusNode = document.getElementById('status')
 const appGrid = document.querySelector('.app-grid')
 const appGridLayoutButtons = document.querySelectorAll('[data-app-grid-layout]')
 const appThemeButtons = document.querySelectorAll('[data-app-theme]')
+const panelCollapseButtons = document.querySelectorAll('[data-panel-collapse]')
+const componentPanel = document.getElementById('component-panel')
+const stylesPanel = document.getElementById('styles-panel')
+const previewPanel = document.getElementById('preview-panel')
 const renderMode = document.getElementById('render-mode')
 const autoRenderToggle = document.getElementById('auto-render')
 const typecheckButton = document.getElementById('typecheck-button')
@@ -71,6 +75,185 @@ const layoutTheme = createLayoutThemeController({
 const { applyAppGridLayout, applyTheme, getInitialAppGridLayout, getInitialTheme } =
   layoutTheme
 
+const panelMap = {
+  component: componentPanel,
+  styles: stylesPanel,
+  preview: previewPanel,
+}
+
+const getCurrentLayout = () => {
+  if (appGrid.classList.contains('app-grid--preview-right')) {
+    return 'preview-right'
+  }
+
+  if (appGrid.classList.contains('app-grid--preview-left')) {
+    return 'preview-left'
+  }
+
+  return 'default'
+}
+
+const isCompactViewport = () => window.matchMedia('(max-width: 900px)').matches
+
+const getPanelCollapseAxis = panelName => {
+  if (isCompactViewport()) {
+    return 'vertical'
+  }
+
+  const layout = getCurrentLayout()
+
+  if (panelName === 'preview') {
+    return layout === 'default' ? 'vertical' : 'horizontal'
+  }
+
+  if (panelName === 'component' || panelName === 'styles') {
+    return layout === 'default' ? 'horizontal' : 'vertical'
+  }
+
+  return 'vertical'
+}
+
+const getPanelCollapseDirection = panelName => {
+  const axis = getPanelCollapseAxis(panelName)
+  if (axis !== 'horizontal') {
+    return 'none'
+  }
+
+  const layout = getCurrentLayout()
+
+  if (panelName === 'preview') {
+    return layout === 'preview-left' ? 'left' : 'right'
+  }
+
+  if (panelName === 'component') {
+    return 'left'
+  }
+
+  if (panelName === 'styles') {
+    return 'right'
+  }
+
+  return 'right'
+}
+
+const panelCollapseState = {
+  component: false,
+  styles: false,
+  preview: false,
+}
+
+const normalizePanelCollapseState = () => {
+  const collapsedPanels = Object.entries(panelCollapseState)
+    .filter(([, isCollapsed]) => isCollapsed)
+    .map(([panelName]) => panelName)
+
+  if (collapsedPanels.length === Object.keys(panelCollapseState).length) {
+    panelCollapseState.preview = false
+  }
+}
+
+const syncPanelCollapseButtons = () => {
+  const collapsedCount = Object.values(panelCollapseState).filter(Boolean).length
+
+  for (const button of panelCollapseButtons) {
+    const panelName = button.dataset.panelCollapse
+    if (!panelName || !(panelName in panelMap)) {
+      continue
+    }
+
+    const axis = getPanelCollapseAxis(panelName)
+    const direction = getPanelCollapseDirection(panelName)
+    const isCollapsed = panelCollapseState[panelName] === true
+    const panelTitle = `${panelName.charAt(0).toUpperCase()}${panelName.slice(1)}`
+    const canCollapse = isCollapsed || collapsedCount < 2
+
+    button.dataset.collapseAxis = axis
+    button.dataset.collapseDirection = direction
+    button.dataset.collapsed = isCollapsed ? 'true' : 'false'
+    button.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true')
+    button.disabled = !canCollapse
+    button.setAttribute('aria-disabled', canCollapse ? 'false' : 'true')
+    button.setAttribute(
+      'aria-label',
+      `${isCollapsed ? 'Expand' : 'Collapse'} ${panelTitle.toLowerCase()} panel`,
+    )
+    button.setAttribute(
+      'title',
+      canCollapse
+        ? `${isCollapsed ? 'Expand' : 'Collapse'} ${panelTitle.toLowerCase()} panel`
+        : 'At least one panel must remain expanded.',
+    )
+  }
+}
+
+const applyPanelCollapseState = () => {
+  normalizePanelCollapseState()
+
+  const previewAxis = getPanelCollapseAxis('preview')
+  const componentAxis = getPanelCollapseAxis('component')
+  const stylesAxis = getPanelCollapseAxis('styles')
+
+  if (componentPanel) {
+    const isCollapsed = panelCollapseState.component
+    componentPanel.classList.toggle(
+      'panel--collapsed-vertical',
+      isCollapsed && componentAxis === 'vertical',
+    )
+    componentPanel.classList.toggle(
+      'panel--collapsed-horizontal',
+      isCollapsed && componentAxis === 'horizontal',
+    )
+  }
+
+  if (stylesPanel) {
+    const isCollapsed = panelCollapseState.styles
+    stylesPanel.classList.toggle(
+      'panel--collapsed-vertical',
+      isCollapsed && stylesAxis === 'vertical',
+    )
+    stylesPanel.classList.toggle(
+      'panel--collapsed-horizontal',
+      isCollapsed && stylesAxis === 'horizontal',
+    )
+  }
+
+  if (previewPanel) {
+    const isCollapsed = panelCollapseState.preview
+    previewPanel.classList.toggle(
+      'panel--collapsed-vertical',
+      isCollapsed && previewAxis === 'vertical',
+    )
+    previewPanel.classList.toggle(
+      'panel--collapsed-horizontal',
+      isCollapsed && previewAxis === 'horizontal',
+    )
+  }
+
+  appGrid.classList.toggle(
+    'app-grid--preview-collapsed-horizontal',
+    panelCollapseState.preview && previewAxis === 'horizontal',
+  )
+  appGrid.classList.toggle(
+    'app-grid--component-collapsed-horizontal',
+    panelCollapseState.component && componentAxis === 'horizontal',
+  )
+  appGrid.classList.toggle(
+    'app-grid--styles-collapsed-horizontal',
+    panelCollapseState.styles && stylesAxis === 'horizontal',
+  )
+
+  syncPanelCollapseButtons()
+}
+
+const togglePanelCollapse = panelName => {
+  if (!(panelName in panelCollapseState)) {
+    return
+  }
+
+  panelCollapseState[panelName] = !panelCollapseState[panelName]
+  applyPanelCollapseState()
+}
+
 const diagnosticsUi = createDiagnosticsUiController({
   diagnosticsToggle,
   diagnosticsDrawer,
@@ -451,6 +634,7 @@ for (const button of appGridLayoutButtons) {
       return
     }
     applyAppGridLayout(nextLayout)
+    applyPanelCollapseState()
   })
 }
 
@@ -464,8 +648,24 @@ for (const button of appThemeButtons) {
   })
 }
 
+for (const button of panelCollapseButtons) {
+  button.addEventListener('click', () => {
+    const panelName = button.dataset.panelCollapse
+    if (!panelName) {
+      return
+    }
+
+    togglePanelCollapse(panelName)
+  })
+}
+
+window.addEventListener('resize', () => {
+  applyPanelCollapseState()
+})
+
 applyAppGridLayout(getInitialAppGridLayout(), { persist: false })
 applyTheme(getInitialTheme(), { persist: false })
+applyPanelCollapseState()
 
 updateRenderButtonVisibility()
 renderDiagnosticsScope('component')
diff --git a/src/index.html b/src/index.html
index 7172ab3..d3fd6d4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -129,10 +129,26 @@ <h1>
         </div>
       </div>
 
-      <section class="panel component-panel">
+      <section class="panel component-panel" id="component-panel">
         <div class="panel-header panel-header--grid">
           <h2>Component</h2>
           <div class="controls controls--quick-actions panel-header-quick-actions">
+            <button
+              class="panel-collapse-toggle"
+              id="collapse-component"
+              type="button"
+              data-panel-collapse="component"
+              data-collapse-axis="vertical"
+              data-collapsed="false"
+              aria-expanded="true"
+              aria-controls="component-panel"
+              title="Collapse component panel"
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="m6 9 6 6 6-6"></path>
+              </svg>
+              <span class="panel-collapse-toggle__label">Collapse</span>
+            </button>
             <button
               class="icon-button"
               id="copy-component"
@@ -186,10 +202,26 @@ <h2>Component</h2>
         <textarea id="jsx-editor" spellcheck="false"></textarea>
       </section>
 
-      <section class="panel styles-panel">
+      <section class="panel styles-panel" id="styles-panel">
         <div class="panel-header panel-header--grid">
           <h2>Styles</h2>
           <div class="controls controls--quick-actions panel-header-quick-actions">
+            <button
+              class="panel-collapse-toggle"
+              id="collapse-styles"
+              type="button"
+              data-panel-collapse="styles"
+              data-collapse-axis="vertical"
+              data-collapsed="false"
+              aria-expanded="true"
+              aria-controls="styles-panel"
+              title="Collapse styles panel"
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="m6 9 6 6 6-6"></path>
+              </svg>
+              <span class="panel-collapse-toggle__label">Collapse</span>
+            </button>
             <button
               class="icon-button"
               id="copy-styles"
@@ -236,7 +268,7 @@ <h2>Styles</h2>
         <div class="panel-footer" id="style-warning"></div>
       </section>
 
-      <section class="panel preview preview-panel">
+      <section class="panel preview preview-panel" id="preview-panel">
         <div class="panel-header">
           <h2>Preview</h2>
           <div class="controls">
@@ -256,6 +288,22 @@ <h2>Preview</h2>
             >
               i
             </button>
+            <button
+              class="panel-collapse-toggle"
+              id="collapse-preview"
+              type="button"
+              data-panel-collapse="preview"
+              data-collapse-axis="vertical"
+              data-collapsed="false"
+              aria-expanded="true"
+              aria-controls="preview-panel"
+              title="Collapse preview panel"
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="m6 9 6 6 6-6"></path>
+              </svg>
+              <span class="panel-collapse-toggle__label">Collapse</span>
+            </button>
           </div>
         </div>
         <div class="preview-host" id="preview-host"></div>
diff --git a/src/styles/layout-shell.css b/src/styles/layout-shell.css
index 1878230..6dc5fca 100644
--- a/src/styles/layout-shell.css
+++ b/src/styles/layout-shell.css
@@ -78,6 +78,30 @@
   padding: 24px;
 }
 
+.app-grid.app-grid--component-collapsed-horizontal:not(.app-grid--preview-right):not(
+    .app-grid--preview-left
+  ) {
+  grid-template-columns: 72px minmax(320px, 1fr);
+}
+
+.app-grid.app-grid--styles-collapsed-horizontal:not(.app-grid--preview-right):not(
+    .app-grid--preview-left
+  ) {
+  grid-template-columns: minmax(320px, 1fr) 72px;
+}
+
+.app-grid.app-grid--component-collapsed-horizontal.app-grid--styles-collapsed-horizontal:not(
+    .app-grid--preview-right
+  ):not(.app-grid--preview-left) {
+  grid-template-columns: 72px 72px minmax(0, 1fr);
+  grid-template-rows: auto auto minmax(320px, 1fr);
+  grid-template-areas:
+    'layout-controls layout-controls layout-controls'
+    'component styles .'
+    'preview preview preview';
+  min-height: max(520px, calc(100dvh - 210px));
+}
+
 .app-grid--preview-right {
   grid-template-areas:
     'layout-controls layout-controls'
@@ -85,6 +109,10 @@
     'styles preview';
 }
 
+.app-grid--preview-right.app-grid--preview-collapsed-horizontal {
+  grid-template-columns: minmax(320px, 1fr) 72px;
+}
+
 .app-grid--preview-left {
   grid-template-areas:
     'layout-controls layout-controls'
@@ -92,6 +120,10 @@
     'preview styles';
 }
 
+.app-grid--preview-left.app-grid--preview-collapsed-horizontal {
+  grid-template-columns: 72px minmax(320px, 1fr);
+}
+
 .app-grid-layout-controls {
   grid-area: layout-controls;
   display: inline-flex;
@@ -178,6 +210,21 @@
       'preview';
   }
 
+  .app-grid--preview-right.app-grid--preview-collapsed-horizontal,
+  .app-grid--preview-left.app-grid--preview-collapsed-horizontal {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .app-grid.app-grid--component-collapsed-horizontal,
+  .app-grid.app-grid--styles-collapsed-horizontal {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .app-grid.app-grid--component-collapsed-horizontal.app-grid--styles-collapsed-horizontal {
+    grid-template-rows: auto;
+    min-height: 0;
+  }
+
   .app-grid-layout-controls {
     justify-self: start;
   }
diff --git a/src/styles/panels-editor.css b/src/styles/panels-editor.css
index 21c7e49..7cd3a76 100644
--- a/src/styles/panels-editor.css
+++ b/src/styles/panels-editor.css
@@ -74,6 +74,77 @@
   gap: 10px;
 }
 
+.panel-collapse-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-control);
+  background: var(--surface-control);
+  color: var(--icon-color);
+  border-radius: 999px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  cursor: pointer;
+}
+
+.panel-collapse-toggle:hover {
+  background: var(--surface-control-hover);
+}
+
+.panel-collapse-toggle:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.panel-collapse-toggle:disabled:hover {
+  background: var(--surface-control);
+}
+
+.panel-collapse-toggle:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+.panel-collapse-toggle svg {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transform: rotate(180deg);
+}
+
+.panel-collapse-toggle[data-collapse-axis='vertical'][data-collapsed='true'] svg {
+  transform: rotate(0deg);
+}
+
+.panel-collapse-toggle[data-collapse-axis='horizontal'][data-collapse-direction='right'][data-collapsed='false']
+  svg {
+  transform: rotate(-90deg);
+}
+
+.panel-collapse-toggle[data-collapse-axis='horizontal'][data-collapse-direction='right'][data-collapsed='true']
+  svg {
+  transform: rotate(90deg);
+}
+
+.panel-collapse-toggle[data-collapse-axis='horizontal'][data-collapse-direction='left'][data-collapsed='false']
+  svg {
+  transform: rotate(90deg);
+}
+
+.panel-collapse-toggle[data-collapse-axis='horizontal'][data-collapse-direction='left'][data-collapsed='true']
+  svg {
+  transform: rotate(-90deg);
+}
+
+.panel-collapse-toggle__label {
+  display: none;
+}
+
 .controls label {
   display: flex;
   flex-direction: column;
@@ -143,7 +214,142 @@ textarea:focus {
   overflow: auto;
 }
 
+.panel.panel--collapsed-vertical {
+  min-height: auto;
+}
+
+.component-panel.panel--collapsed-vertical,
+.styles-panel.panel--collapsed-vertical {
+  align-self: start;
+}
+
+.panel.preview.panel--collapsed-vertical {
+  min-height: 0;
+}
+
+.component-panel.panel--collapsed-vertical .editor-host,
+.component-panel.panel--collapsed-vertical textarea,
+.styles-panel.panel--collapsed-vertical .editor-host,
+.styles-panel.panel--collapsed-vertical textarea,
+.styles-panel.panel--collapsed-vertical .panel-footer,
+.preview-panel.panel--collapsed-vertical .preview-host {
+  display: none;
+}
+
+.component-panel.panel--collapsed-vertical .panel-header-main-actions,
+.styles-panel.panel--collapsed-vertical .panel-header-main-actions,
+.component-panel.panel--collapsed-vertical .panel-header .icon-button,
+.styles-panel.panel--collapsed-vertical .panel-header .icon-button,
+.preview-panel.panel--collapsed-vertical .controls label,
+.preview-panel.panel--collapsed-vertical .controls .hint-icon {
+  display: none;
+}
+
+.component-panel.panel--collapsed-vertical .panel-header--grid,
+.styles-panel.panel--collapsed-vertical .panel-header--grid {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.preview-panel.panel--collapsed-vertical .panel-header .controls {
+  justify-content: center;
+}
+
+.preview-panel.panel--collapsed-horizontal {
+  min-height: auto;
+}
+
+.preview-panel.panel--collapsed-horizontal .preview-host,
+.preview-panel.panel--collapsed-horizontal .controls label,
+.preview-panel.panel--collapsed-horizontal .controls .hint-icon {
+  display: none;
+}
+
+.preview-panel.panel--collapsed-horizontal .panel-header {
+  height: 100%;
+  padding: 12px 8px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.preview-panel.panel--collapsed-horizontal .panel-header h2 {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-size: 0.8rem;
+}
+
+.preview-panel.panel--collapsed-horizontal .panel-header .controls {
+  width: 100%;
+  justify-content: center;
+}
+
+.preview-panel.panel--collapsed-horizontal .panel-collapse-toggle {
+  width: 100%;
+  min-width: 0;
+  justify-content: center;
+}
+
+.preview-panel.panel--collapsed-horizontal .panel-collapse-toggle__label {
+  display: none;
+}
+
+.component-panel.panel--collapsed-horizontal,
+.styles-panel.panel--collapsed-horizontal {
+  min-height: auto;
+}
+
+.component-panel.panel--collapsed-horizontal .editor-host,
+.component-panel.panel--collapsed-horizontal textarea,
+.component-panel.panel--collapsed-horizontal .panel-header-main-actions,
+.component-panel.panel--collapsed-horizontal .panel-header .icon-button,
+.styles-panel.panel--collapsed-horizontal .editor-host,
+.styles-panel.panel--collapsed-horizontal textarea,
+.styles-panel.panel--collapsed-horizontal .panel-header-main-actions,
+.styles-panel.panel--collapsed-horizontal .panel-header .icon-button,
+.styles-panel.panel--collapsed-horizontal .panel-footer {
+  display: none;
+}
+
+.component-panel.panel--collapsed-horizontal .panel-header,
+.styles-panel.panel--collapsed-horizontal .panel-header {
+  height: 100%;
+  padding: 12px 8px;
+  border-bottom: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.component-panel.panel--collapsed-horizontal .panel-header h2,
+.styles-panel.panel--collapsed-horizontal .panel-header h2 {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-size: 0.8rem;
+}
+
+.component-panel.panel--collapsed-horizontal .panel-header-quick-actions,
+.styles-panel.panel--collapsed-horizontal .panel-header-quick-actions {
+  width: 100%;
+  justify-content: center;
+}
+
+.component-panel.panel--collapsed-horizontal .panel-collapse-toggle,
+.styles-panel.panel--collapsed-horizontal .panel-collapse-toggle {
+  width: 100%;
+  min-width: 0;
+}
+
 @media (max-width: 900px) {
+  .panel-collapse-toggle {
+    width: 32px;
+    height: 32px;
+  }
+
   .component-panel,
   .styles-panel {
     max-height: none;

From 2b4605f705090130d10ae1cdbf5997a27462569c Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Tue, 17 Mar 2026 13:14:28 -0500
Subject: [PATCH 2/6] refactor: grid layout.

---
 docs/next-steps.md          |   4 +
 playwright/app.spec.ts      | 232 +++++++++++++++++++++++++++++++
 src/app.js                  |  28 ++++
 src/index.html              | 268 ++++++++++++++++++------------------
 src/styles/layout-shell.css | 160 ++++++++++++++++++---
 5 files changed, 540 insertions(+), 152 deletions(-)

diff --git a/docs/next-steps.md b/docs/next-steps.md
index 99677f4..172733e 100644
--- a/docs/next-steps.md
+++ b/docs/next-steps.md
@@ -22,3 +22,7 @@ Focused follow-up work for `@knighted/develop`.
 5. **In-browser component testing**
    - Explore authoring and running component-focused tests in-browser (for example, a Vitest-compatible flow) using CDN-delivered tooling.
    - Define a lightweight test UX that supports writing tests, running them on demand, and displaying results in-app.
+
+6. **Panel sizing without JS height sync**
+   - Revisit the current side-layout preview height calculation and investigate a pure CSS replacement.
+   - Keep existing behavior constraints: preview should not exceed the combined editor stack height in side layouts, and preview content should scroll internally when it overflows.
diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index d52b2ea..3064bb3 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -29,6 +29,62 @@ const setStylesEditorSource = async (page: Page, source: string) => {
   await editorContent.fill(source)
 }
 
+const getLongListComponentSource = (count = 1200) =>
+  [
+    'const App = () => {',
+    `  const items = Array.from({ length: ${count} }, (_, index) => ({`,
+    '    id: index + 1,',
+    '    title: `List item ${index + 1}`',
+    '  }))',
+    '',
+    '  return (',
+    "    <section style={{ padding: '12px', fontFamily: 'system-ui, sans-serif' }}>",
+    "      <h2 style={{ margin: '0 0 12px', fontSize: '1rem' }}>Long Preview List</h2>",
+    "      <ul style={{ margin: 0, paddingLeft: '1.25rem' }}>",
+    '        {items.map(item => (',
+    "          <li key={item.id} style={{ marginBottom: '8px' }}>",
+    '            <strong>{item.title}</strong>',
+    '          </li>',
+    '        ))}',
+    '      </ul>',
+    '    </section>',
+    '  )',
+    '}',
+  ].join('\n')
+
+const getCollapseButton = (page: Page, panelName: 'component' | 'styles' | 'preview') =>
+  page.locator(`#collapse-${panelName}`)
+
+const expectCollapseButtonState = async (
+  page: Page,
+  panelName: 'component' | 'styles' | 'preview',
+  {
+    axis,
+    direction,
+    collapsed,
+    disabled,
+  }: {
+    axis: 'vertical' | 'horizontal'
+    direction: 'left' | 'right' | 'none'
+    collapsed: boolean
+    disabled?: boolean
+  },
+) => {
+  const button = getCollapseButton(page, panelName)
+
+  await expect(button).toHaveAttribute('data-collapse-axis', axis)
+  await expect(button).toHaveAttribute('data-collapse-direction', direction)
+  await expect(button).toHaveAttribute('data-collapsed', collapsed ? 'true' : 'false')
+
+  if (disabled !== undefined) {
+    if (disabled) {
+      await expect(button).toBeDisabled()
+    } else {
+      await expect(button).toBeEnabled()
+    }
+  }
+}
+
 test('renders default playground preview', async ({ page }) => {
   await waitForInitialRender(page)
 
@@ -54,6 +110,182 @@ test('supports layout and theme toggles', async ({ page }) => {
   )
 })
 
+test('side layout keeps preview panel height within editor stack height', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await page.getByLabel('Use side preview layout').click()
+  await expect(page.locator('.app-grid')).toHaveClass(/app-grid--preview-right/)
+
+  const metrics = await page.evaluate(() => {
+    const stack = document.querySelector('.panels-stack--editors')
+    const previewPanel = document.getElementById('preview-panel')
+    const stackHeight = stack?.getBoundingClientRect().height ?? 0
+    const previewHeight = previewPanel?.getBoundingClientRect().height ?? 0
+    const previewOverflowY = previewPanel ? getComputedStyle(previewPanel).overflowY : ''
+    return { stackHeight, previewHeight, previewOverflowY }
+  })
+
+  expect(metrics.stackHeight).toBeGreaterThan(0)
+  expect(metrics.previewHeight).toBeGreaterThan(0)
+  expect(metrics.previewHeight).toBeLessThanOrEqual(metrics.stackHeight + 2)
+  expect(metrics.previewOverflowY).toBe('hidden')
+})
+
+test('side layout config keeps preview scrolling inside preview host', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await page.getByLabel('Use side preview layout').click()
+
+  const scrollConfig = await page.evaluate(() => {
+    const previewPanel = document.getElementById('preview-panel')
+    const previewHost = document.getElementById('preview-host')
+    if (!previewPanel || !previewHost) {
+      return null
+    }
+
+    const panelStyles = getComputedStyle(previewPanel)
+    const styles = getComputedStyle(previewHost)
+    return {
+      panelOverflowY: panelStyles.overflowY,
+      panelOverflowX: panelStyles.overflowX,
+      overflowY: styles.overflowY,
+      minHeight: styles.minHeight,
+    }
+  })
+
+  expect(scrollConfig).not.toBeNull()
+  expect(scrollConfig?.panelOverflowY).toBe('hidden')
+  expect(scrollConfig?.panelOverflowX).toBe('hidden')
+  expect(['auto', 'scroll']).toContain(scrollConfig?.overflowY)
+  expect(scrollConfig?.minHeight).toBe('0px')
+})
+
+test('expanded component and styles min-height stay consistent in side layouts', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  for (const layoutLabel of ['Use side preview layout', 'Use left preview layout']) {
+    await page.getByLabel(layoutLabel).click()
+
+    const minHeights = await page.evaluate(() => {
+      const component = document.getElementById('component-panel')
+      const styles = document.getElementById('styles-panel')
+      return {
+        component: component
+          ? Number.parseFloat(getComputedStyle(component).minHeight)
+          : 0,
+        styles: styles ? Number.parseFloat(getComputedStyle(styles).minHeight) : 0,
+      }
+    })
+
+    expect(minHeights.component).toBeGreaterThan(0)
+    expect(minHeights.styles).toBeGreaterThan(0)
+    expect(Math.abs(minHeights.component - minHeights.styles)).toBeLessThanOrEqual(1)
+  }
+})
+
+test('panel collapse axis and direction adapt to active layout', async ({ page }) => {
+  await waitForInitialRender(page)
+  await expect(page.locator('.app-grid')).toHaveClass(/app-grid/)
+
+  await expectCollapseButtonState(page, 'component', {
+    axis: 'horizontal',
+    direction: 'left',
+    collapsed: false,
+  })
+  await expectCollapseButtonState(page, 'styles', {
+    axis: 'horizontal',
+    direction: 'right',
+    collapsed: false,
+  })
+  await expectCollapseButtonState(page, 'preview', {
+    axis: 'vertical',
+    direction: 'none',
+    collapsed: false,
+  })
+
+  await page.getByLabel('Use side preview layout').click()
+  await expectCollapseButtonState(page, 'preview', {
+    axis: 'horizontal',
+    direction: 'right',
+    collapsed: false,
+  })
+  await expectCollapseButtonState(page, 'component', {
+    axis: 'vertical',
+    direction: 'none',
+    collapsed: false,
+  })
+
+  await page.getByLabel('Use left preview layout').click()
+  await expectCollapseButtonState(page, 'preview', {
+    axis: 'horizontal',
+    direction: 'left',
+    collapsed: false,
+  })
+})
+
+test('prevents collapsing all three panels at once', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await getCollapseButton(page, 'component').click()
+  await getCollapseButton(page, 'styles').click()
+
+  await expect(page.locator('#component-panel')).toHaveClass(
+    /panel--collapsed-horizontal/,
+  )
+  await expect(page.locator('#styles-panel')).toHaveClass(/panel--collapsed-horizontal/)
+
+  await expectCollapseButtonState(page, 'preview', {
+    axis: 'vertical',
+    direction: 'none',
+    collapsed: false,
+    disabled: true,
+  })
+  await expect(getCollapseButton(page, 'preview')).toHaveAttribute(
+    'title',
+    'At least one panel must remain expanded.',
+  )
+
+  await getCollapseButton(page, 'component').click()
+  await expectCollapseButtonState(page, 'preview', {
+    axis: 'vertical',
+    direction: 'none',
+    collapsed: false,
+    disabled: false,
+  })
+})
+
+test('does not persist panel collapse state across reload', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await getCollapseButton(page, 'component').click()
+  await expect(page.locator('#component-panel')).toHaveClass(
+    /panel--collapsed-horizontal/,
+  )
+  await expectCollapseButtonState(page, 'component', {
+    axis: 'horizontal',
+    direction: 'left',
+    collapsed: true,
+  })
+
+  await page.reload()
+  await waitForInitialRender(page)
+
+  await expect(page.locator('#component-panel')).not.toHaveClass(
+    /panel--collapsed-horizontal|panel--collapsed-vertical/,
+  )
+  await expectCollapseButtonState(page, 'component', {
+    axis: 'horizontal',
+    direction: 'left',
+    collapsed: false,
+  })
+})
+
 test('renders in react mode with css modules', async ({ page }) => {
   await waitForInitialRender(page)
 
diff --git a/src/app.js b/src/app.js
index 3b7b00d..c610a94 100644
--- a/src/app.js
+++ b/src/app.js
@@ -16,6 +16,7 @@ const appGrid = document.querySelector('.app-grid')
 const appGridLayoutButtons = document.querySelectorAll('[data-app-grid-layout]')
 const appThemeButtons = document.querySelectorAll('[data-app-theme]')
 const panelCollapseButtons = document.querySelectorAll('[data-panel-collapse]')
+const editorsStack = document.querySelector('.panels-stack--editors')
 const componentPanel = document.getElementById('component-panel')
 const stylesPanel = document.getElementById('styles-panel')
 const previewPanel = document.getElementById('preview-panel')
@@ -186,6 +187,23 @@ const syncPanelCollapseButtons = () => {
   }
 }
 
+const syncSidePreviewHeight = () => {
+  if (!appGrid || !editorsStack) {
+    return
+  }
+
+  const layout = getCurrentLayout()
+  if (layout !== 'preview-right' && layout !== 'preview-left') {
+    appGrid.style.removeProperty('--side-editors-height')
+    return
+  }
+
+  const height = Math.round(editorsStack.getBoundingClientRect().height)
+  if (height > 0) {
+    appGrid.style.setProperty('--side-editors-height', `${height}px`)
+  }
+}
+
 const applyPanelCollapseState = () => {
   normalizePanelCollapseState()
 
@@ -233,6 +251,8 @@ const applyPanelCollapseState = () => {
     'app-grid--preview-collapsed-horizontal',
     panelCollapseState.preview && previewAxis === 'horizontal',
   )
+  appGrid.classList.toggle('app-grid--component-collapsed', panelCollapseState.component)
+  appGrid.classList.toggle('app-grid--styles-collapsed', panelCollapseState.styles)
   appGrid.classList.toggle(
     'app-grid--component-collapsed-horizontal',
     panelCollapseState.component && componentAxis === 'horizontal',
@@ -243,6 +263,7 @@ const applyPanelCollapseState = () => {
   )
 
   syncPanelCollapseButtons()
+  syncSidePreviewHeight()
 }
 
 const togglePanelCollapse = panelName => {
@@ -663,6 +684,13 @@ window.addEventListener('resize', () => {
   applyPanelCollapseState()
 })
 
+if (typeof ResizeObserver !== 'undefined' && editorsStack) {
+  const sidePreviewHeightObserver = new ResizeObserver(() => {
+    syncSidePreviewHeight()
+  })
+  sidePreviewHeightObserver.observe(editorsStack)
+}
+
 applyAppGridLayout(getInitialAppGridLayout(), { persist: false })
 applyTheme(getInitialTheme(), { persist: false })
 applyPanelCollapseState()
diff --git a/src/index.html b/src/index.html
index d3fd6d4..afd0dd2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -129,144 +129,150 @@ <h1>
         </div>
       </div>
 
-      <section class="panel component-panel" id="component-panel">
-        <div class="panel-header panel-header--grid">
-          <h2>Component</h2>
-          <div class="controls controls--quick-actions panel-header-quick-actions">
-            <button
-              class="panel-collapse-toggle"
-              id="collapse-component"
-              type="button"
-              data-panel-collapse="component"
-              data-collapse-axis="vertical"
-              data-collapsed="false"
-              aria-expanded="true"
-              aria-controls="component-panel"
-              title="Collapse component panel"
-            >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="m6 9 6 6 6-6"></path>
-              </svg>
-              <span class="panel-collapse-toggle__label">Collapse</span>
-            </button>
-            <button
-              class="icon-button"
-              id="copy-component"
-              type="button"
-              title="Copy component source"
-              aria-label="Copy component source"
-            >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <rect x="9" y="9" width="10" height="10" rx="2"></rect>
-                <path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"></path>
-              </svg>
-            </button>
-            <button
-              class="icon-button"
-              id="clear-component"
-              type="button"
-              title="Clear component source"
-              aria-label="Clear component source"
-            >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M4 7h16"></path>
-                <path d="M10 11v6"></path>
-                <path d="M14 11v6"></path>
-                <path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>
-                <path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"></path>
-              </svg>
-            </button>
-          </div>
-          <div class="panel-header-main-actions">
-            <div class="controls controls--actions">
-              <label class="toggle">
-                <input id="auto-render" type="checkbox" checked />
-                Auto render
-              </label>
-              <button class="render-button" id="render-button" type="button">
-                Render
+      <div class="panels-stack panels-stack--editors">
+        <section class="panel component-panel" id="component-panel">
+          <div class="panel-header panel-header--grid">
+            <h2>Component</h2>
+            <div class="controls controls--quick-actions panel-header-quick-actions">
+              <button
+                class="panel-collapse-toggle"
+                id="collapse-component"
+                type="button"
+                data-panel-collapse="component"
+                data-collapse-axis="vertical"
+                data-collapsed="false"
+                aria-expanded="true"
+                aria-controls="component-panel"
+                title="Collapse component panel"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="m6 9 6 6 6-6"></path>
+                </svg>
+                <span class="panel-collapse-toggle__label">Collapse</span>
+              </button>
+              <button
+                class="icon-button"
+                id="copy-component"
+                type="button"
+                title="Copy component source"
+                aria-label="Copy component source"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <rect x="9" y="9" width="10" height="10" rx="2"></rect>
+                  <path
+                    d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"
+                  ></path>
+                </svg>
               </button>
-              <button class="render-button" id="typecheck-button" type="button">
-                Typecheck
+              <button
+                class="icon-button"
+                id="clear-component"
+                type="button"
+                title="Clear component source"
+                aria-label="Clear component source"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M4 7h16"></path>
+                  <path d="M10 11v6"></path>
+                  <path d="M14 11v6"></path>
+                  <path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>
+                  <path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"></path>
+                </svg>
               </button>
-              <label>
-                <span class="sr-only">Render mode</span>
-                <select id="render-mode">
-                  <option value="dom" selected>DOM</option>
-                  <option value="react">React</option>
-                </select>
-              </label>
+            </div>
+            <div class="panel-header-main-actions">
+              <div class="controls controls--actions">
+                <label class="toggle">
+                  <input id="auto-render" type="checkbox" checked />
+                  Auto render
+                </label>
+                <button class="render-button" id="render-button" type="button">
+                  Render
+                </button>
+                <button class="render-button" id="typecheck-button" type="button">
+                  Typecheck
+                </button>
+                <label>
+                  <span class="sr-only">Render mode</span>
+                  <select id="render-mode">
+                    <option value="dom" selected>DOM</option>
+                    <option value="react">React</option>
+                  </select>
+                </label>
+              </div>
             </div>
           </div>
-        </div>
-        <textarea id="jsx-editor" spellcheck="false"></textarea>
-      </section>
+          <textarea id="jsx-editor" spellcheck="false"></textarea>
+        </section>
 
-      <section class="panel styles-panel" id="styles-panel">
-        <div class="panel-header panel-header--grid">
-          <h2>Styles</h2>
-          <div class="controls controls--quick-actions panel-header-quick-actions">
-            <button
-              class="panel-collapse-toggle"
-              id="collapse-styles"
-              type="button"
-              data-panel-collapse="styles"
-              data-collapse-axis="vertical"
-              data-collapsed="false"
-              aria-expanded="true"
-              aria-controls="styles-panel"
-              title="Collapse styles panel"
-            >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="m6 9 6 6 6-6"></path>
-              </svg>
-              <span class="panel-collapse-toggle__label">Collapse</span>
-            </button>
-            <button
-              class="icon-button"
-              id="copy-styles"
-              type="button"
-              title="Copy styles source"
-              aria-label="Copy styles source"
-            >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <rect x="9" y="9" width="10" height="10" rx="2"></rect>
-                <path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"></path>
-              </svg>
-            </button>
-            <button
-              class="icon-button"
-              id="clear-styles"
-              type="button"
-              title="Clear styles source"
-              aria-label="Clear styles source"
-            >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M4 7h16"></path>
-                <path d="M10 11v6"></path>
-                <path d="M14 11v6"></path>
-                <path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>
-                <path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"></path>
-              </svg>
-            </button>
-          </div>
-          <div class="panel-header-main-actions">
-            <div class="controls controls--actions">
-              <label>
-                <span class="sr-only">Style mode</span>
-                <select id="style-mode">
-                  <option value="css" selected>Native CSS</option>
-                  <option value="module">CSS Modules</option>
-                  <option value="less">Less</option>
-                  <option value="sass">Sass</option>
-                </select>
-              </label>
+        <section class="panel styles-panel" id="styles-panel">
+          <div class="panel-header panel-header--grid">
+            <h2>Styles</h2>
+            <div class="controls controls--quick-actions panel-header-quick-actions">
+              <button
+                class="panel-collapse-toggle"
+                id="collapse-styles"
+                type="button"
+                data-panel-collapse="styles"
+                data-collapse-axis="vertical"
+                data-collapsed="false"
+                aria-expanded="true"
+                aria-controls="styles-panel"
+                title="Collapse styles panel"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="m6 9 6 6 6-6"></path>
+                </svg>
+                <span class="panel-collapse-toggle__label">Collapse</span>
+              </button>
+              <button
+                class="icon-button"
+                id="copy-styles"
+                type="button"
+                title="Copy styles source"
+                aria-label="Copy styles source"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <rect x="9" y="9" width="10" height="10" rx="2"></rect>
+                  <path
+                    d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"
+                  ></path>
+                </svg>
+              </button>
+              <button
+                class="icon-button"
+                id="clear-styles"
+                type="button"
+                title="Clear styles source"
+                aria-label="Clear styles source"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M4 7h16"></path>
+                  <path d="M10 11v6"></path>
+                  <path d="M14 11v6"></path>
+                  <path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"></path>
+                  <path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"></path>
+                </svg>
+              </button>
+            </div>
+            <div class="panel-header-main-actions">
+              <div class="controls controls--actions">
+                <label>
+                  <span class="sr-only">Style mode</span>
+                  <select id="style-mode">
+                    <option value="css" selected>Native CSS</option>
+                    <option value="module">CSS Modules</option>
+                    <option value="less">Less</option>
+                    <option value="sass">Sass</option>
+                  </select>
+                </label>
+              </div>
             </div>
           </div>
-        </div>
-        <textarea id="css-editor" spellcheck="false"></textarea>
-        <div class="panel-footer" id="style-warning"></div>
-      </section>
+          <textarea id="css-editor" spellcheck="false"></textarea>
+          <div class="panel-footer" id="style-warning"></div>
+        </section>
+      </div>
 
       <section class="panel preview preview-panel" id="preview-panel">
         <div class="panel-header">
diff --git a/src/styles/layout-shell.css b/src/styles/layout-shell.css
index 6dc5fca..463daf1 100644
--- a/src/styles/layout-shell.css
+++ b/src/styles/layout-shell.css
@@ -68,45 +68,93 @@
 }
 
 .app-grid {
+  --panel-max-height-default: clamp(360px, calc(100dvh - 290px), 680px);
+  --panel-max-height-side: clamp(420px, calc(100dvh - 230px), 860px);
   display: grid;
   grid-template-columns: repeat(2, minmax(320px, 1fr));
   grid-template-areas:
     'layout-controls layout-controls'
-    'component styles'
+    'editors editors'
     'preview preview';
   gap: 18px;
   padding: 24px;
 }
 
+.panels-stack {
+  min-width: 0;
+}
+
+.panels-stack--editors {
+  grid-area: editors;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(320px, 1fr));
+  gap: 18px;
+  min-width: 0;
+}
+
 .app-grid.app-grid--component-collapsed-horizontal:not(.app-grid--preview-right):not(
     .app-grid--preview-left
-  ) {
+  )
+  .panels-stack--editors {
   grid-template-columns: 72px minmax(320px, 1fr);
 }
 
 .app-grid.app-grid--styles-collapsed-horizontal:not(.app-grid--preview-right):not(
     .app-grid--preview-left
-  ) {
+  )
+  .panels-stack--editors {
   grid-template-columns: minmax(320px, 1fr) 72px;
 }
 
 .app-grid.app-grid--component-collapsed-horizontal.app-grid--styles-collapsed-horizontal:not(
     .app-grid--preview-right
   ):not(.app-grid--preview-left) {
-  grid-template-columns: 72px 72px minmax(0, 1fr);
   grid-template-rows: auto auto minmax(320px, 1fr);
   grid-template-areas:
-    'layout-controls layout-controls layout-controls'
-    'component styles .'
-    'preview preview preview';
+    'layout-controls layout-controls'
+    'editors editors'
+    'preview preview';
   min-height: max(520px, calc(100dvh - 210px));
 }
 
+.app-grid.app-grid--component-collapsed-horizontal.app-grid--styles-collapsed-horizontal:not(
+    .app-grid--preview-right
+  ):not(.app-grid--preview-left)
+  .panels-stack--editors {
+  grid-template-columns: 72px 72px;
+  justify-content: start;
+}
+
 .app-grid--preview-right {
+  grid-template-columns: repeat(2, minmax(320px, 1fr));
+  grid-template-rows: auto minmax(0, 1fr);
   grid-template-areas:
     'layout-controls layout-controls'
-    'component preview'
-    'styles preview';
+    'editors preview';
+  min-height: max(520px, calc(100dvh - 210px));
+}
+
+.app-grid--preview-right .panels-stack--editors {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+}
+
+.app-grid--preview-right.app-grid--component-collapsed:not(.app-grid--styles-collapsed)
+  .panels-stack--editors {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.app-grid--preview-right.app-grid--styles-collapsed:not(.app-grid--component-collapsed)
+  .panels-stack--editors {
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.app-grid--preview-right.app-grid--component-collapsed.app-grid--styles-collapsed
+  .panels-stack--editors {
+  grid-template-rows: auto auto;
+  align-content: start;
 }
 
 .app-grid--preview-right.app-grid--preview-collapsed-horizontal {
@@ -114,10 +162,35 @@
 }
 
 .app-grid--preview-left {
+  grid-template-columns: repeat(2, minmax(320px, 1fr));
+  grid-template-rows: auto minmax(0, 1fr);
   grid-template-areas:
     'layout-controls layout-controls'
-    'preview component'
-    'preview styles';
+    'preview editors';
+  min-height: max(520px, calc(100dvh - 210px));
+}
+
+.app-grid--preview-left .panels-stack--editors {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+}
+
+.app-grid--preview-left.app-grid--component-collapsed:not(.app-grid--styles-collapsed)
+  .panels-stack--editors {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.app-grid--preview-left.app-grid--styles-collapsed:not(.app-grid--component-collapsed)
+  .panels-stack--editors {
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.app-grid--preview-left.app-grid--component-collapsed.app-grid--styles-collapsed
+  .panels-stack--editors {
+  grid-template-rows: auto auto;
+  align-content: start;
 }
 
 .app-grid--preview-left.app-grid--preview-collapsed-horizontal {
@@ -184,40 +257,85 @@
 }
 
 .component-panel {
-  grid-area: component;
-  max-height: min(64vh, 620px);
+  max-height: var(--panel-max-height-default);
   min-height: 0;
 }
 
 .styles-panel {
-  grid-area: styles;
-  max-height: min(64vh, 620px);
+  max-height: var(--panel-max-height-default);
   min-height: 0;
 }
 
 .preview-panel {
+  max-height: var(--panel-max-height-default);
   grid-area: preview;
   position: relative;
 }
 
+.app-grid--preview-right .preview-panel,
+.app-grid--preview-left .preview-panel {
+  min-height: 0;
+  height: var(--side-editors-height, auto);
+  max-height: var(--side-editors-height, var(--panel-max-height-side));
+  overflow: hidden;
+}
+
+.app-grid--preview-right .preview-host,
+.app-grid--preview-left .preview-host {
+  min-height: 0;
+}
+
+.app-grid--preview-right .component-panel,
+.app-grid--preview-right .styles-panel,
+.app-grid--preview-left .component-panel,
+.app-grid--preview-left .styles-panel {
+  min-height: 0;
+  max-height: var(--panel-max-height-side);
+}
+
+.app-grid--preview-right
+  .component-panel:not(.panel--collapsed-vertical):not(.panel--collapsed-horizontal),
+.app-grid--preview-right
+  .styles-panel:not(.panel--collapsed-vertical):not(.panel--collapsed-horizontal),
+.app-grid--preview-left
+  .component-panel:not(.panel--collapsed-vertical):not(.panel--collapsed-horizontal),
+.app-grid--preview-left
+  .styles-panel:not(.panel--collapsed-vertical):not(.panel--collapsed-horizontal) {
+  min-height: 360px;
+}
+
 @media (max-width: 900px) {
   .app-grid {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       'layout-controls'
-      'component'
-      'styles'
+      'editors'
       'preview';
   }
 
-  .app-grid--preview-right.app-grid--preview-collapsed-horizontal,
-  .app-grid--preview-left.app-grid--preview-collapsed-horizontal {
+  .component-panel,
+  .styles-panel,
+  .preview-panel,
+  .app-grid--preview-right .component-panel,
+  .app-grid--preview-right .styles-panel,
+  .app-grid--preview-right .preview-panel,
+  .app-grid--preview-left .component-panel,
+  .app-grid--preview-left .styles-panel,
+  .app-grid--preview-left .preview-panel {
+    max-height: none;
+  }
+
+  .panels-stack--editors {
     grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto;
+    height: auto;
   }
 
-  .app-grid.app-grid--component-collapsed-horizontal,
-  .app-grid.app-grid--styles-collapsed-horizontal {
+  .app-grid--preview-right.app-grid--preview-collapsed-horizontal,
+  .app-grid--preview-left.app-grid--preview-collapsed-horizontal {
     grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto;
+    min-height: 0;
   }
 
   .app-grid.app-grid--component-collapsed-horizontal.app-grid--styles-collapsed-horizontal {

From 5d4aff9a5f72eae2ccdec03b442affae5c38cff7 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Tue, 17 Mar 2026 13:38:29 -0500
Subject: [PATCH 3/6] refactor: address comments.

---
 docs/next-steps.md           |  5 +++++
 eslint.config.js             |  3 +++
 playwright/app.spec.ts       | 23 -----------------------
 src/app.js                   | 14 +++++++++++---
 src/index.html               | 23 ++++++++++++++++-------
 src/styles/panels-editor.css | 15 ++++++++++++++-
 6 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/docs/next-steps.md b/docs/next-steps.md
index 172733e..8e286a4 100644
--- a/docs/next-steps.md
+++ b/docs/next-steps.md
@@ -26,3 +26,8 @@ Focused follow-up work for `@knighted/develop`.
 6. **Panel sizing without JS height sync**
    - Revisit the current side-layout preview height calculation and investigate a pure CSS replacement.
    - Keep existing behavior constraints: preview should not exceed the combined editor stack height in side layouts, and preview content should scroll internally when it overflows.
+
+7. **CDN failure recovery UX**
+   - Detect transient CDN/module loading failures and surface a clear recovery action in-app.
+   - Add a user-triggered retry path (for example, Reload page / Force reload) when runtime bootstrap imports fail.
+   - Consider an optional automatic one-time retry before showing recovery controls, while avoiding infinite reload loops.
diff --git a/eslint.config.js b/eslint.config.js
index 7adedfa..b368ba7 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -20,6 +20,9 @@ export default [
       sourceType: 'module',
       ecmaVersion: 'latest',
     },
+    rules: {
+      'no-unused-vars': 'error',
+    },
   },
   {
     ...playwrightConfig,
diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 3064bb3..34cdfd4 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -29,29 +29,6 @@ const setStylesEditorSource = async (page: Page, source: string) => {
   await editorContent.fill(source)
 }
 
-const getLongListComponentSource = (count = 1200) =>
-  [
-    'const App = () => {',
-    `  const items = Array.from({ length: ${count} }, (_, index) => ({`,
-    '    id: index + 1,',
-    '    title: `List item ${index + 1}`',
-    '  }))',
-    '',
-    '  return (',
-    "    <section style={{ padding: '12px', fontFamily: 'system-ui, sans-serif' }}>",
-    "      <h2 style={{ margin: '0 0 12px', fontSize: '1rem' }}>Long Preview List</h2>",
-    "      <ul style={{ margin: 0, paddingLeft: '1.25rem' }}>",
-    '        {items.map(item => (',
-    "          <li key={item.id} style={{ marginBottom: '8px' }}>",
-    '            <strong>{item.title}</strong>',
-    '          </li>',
-    '        ))}',
-    '      </ul>',
-    '    </section>',
-    '  )',
-    '}',
-  ].join('\n')
-
 const getCollapseButton = (page: Page, panelName: 'component' | 'styles' | 'preview') =>
   page.locator(`#collapse-${panelName}`)
 
diff --git a/src/app.js b/src/app.js
index c610a94..daa69e3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -82,6 +82,8 @@ const panelMap = {
   preview: previewPanel,
 }
 
+const compactViewportMediaQuery = window.matchMedia('(max-width: 900px)')
+
 const getCurrentLayout = () => {
   if (appGrid.classList.contains('app-grid--preview-right')) {
     return 'preview-right'
@@ -94,7 +96,7 @@ const getCurrentLayout = () => {
   return 'default'
 }
 
-const isCompactViewport = () => window.matchMedia('(max-width: 900px)').matches
+const isCompactViewport = () => compactViewportMediaQuery.matches
 
 const getPanelCollapseAxis = panelName => {
   if (isCompactViewport()) {
@@ -680,9 +682,15 @@ for (const button of panelCollapseButtons) {
   })
 }
 
-window.addEventListener('resize', () => {
+const handleCompactViewportChange = () => {
   applyPanelCollapseState()
-})
+}
+
+if (typeof compactViewportMediaQuery.addEventListener === 'function') {
+  compactViewportMediaQuery.addEventListener('change', handleCompactViewportChange)
+} else {
+  compactViewportMediaQuery.onchange = handleCompactViewportChange
+}
 
 if (typeof ResizeObserver !== 'undefined' && editorsStack) {
   const sidePreviewHeightObserver = new ResizeObserver(() => {
diff --git a/src/index.html b/src/index.html
index afd0dd2..d769ca8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -142,7 +142,8 @@ <h2>Component</h2>
                 data-collapse-axis="vertical"
                 data-collapsed="false"
                 aria-expanded="true"
-                aria-controls="component-panel"
+                aria-controls="component-panel-content"
+                aria-label="Collapse component panel"
                 title="Collapse component panel"
               >
                 <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -202,7 +203,9 @@ <h2>Component</h2>
               </div>
             </div>
           </div>
-          <textarea id="jsx-editor" spellcheck="false"></textarea>
+          <div class="panel-content" id="component-panel-content">
+            <textarea id="jsx-editor" spellcheck="false"></textarea>
+          </div>
         </section>
 
         <section class="panel styles-panel" id="styles-panel">
@@ -217,7 +220,8 @@ <h2>Styles</h2>
                 data-collapse-axis="vertical"
                 data-collapsed="false"
                 aria-expanded="true"
-                aria-controls="styles-panel"
+                aria-controls="styles-panel-content"
+                aria-label="Collapse styles panel"
                 title="Collapse styles panel"
               >
                 <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -269,8 +273,10 @@ <h2>Styles</h2>
               </div>
             </div>
           </div>
-          <textarea id="css-editor" spellcheck="false"></textarea>
-          <div class="panel-footer" id="style-warning"></div>
+          <div class="panel-content" id="styles-panel-content">
+            <textarea id="css-editor" spellcheck="false"></textarea>
+            <div class="panel-footer" id="style-warning"></div>
+          </div>
         </section>
       </div>
 
@@ -302,7 +308,8 @@ <h2>Preview</h2>
               data-collapse-axis="vertical"
               data-collapsed="false"
               aria-expanded="true"
-              aria-controls="preview-panel"
+              aria-controls="preview-panel-content"
+              aria-label="Collapse preview panel"
               title="Collapse preview panel"
             >
               <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -312,7 +319,9 @@ <h2>Preview</h2>
             </button>
           </div>
         </div>
-        <div class="preview-host" id="preview-host"></div>
+        <div class="panel-content" id="preview-panel-content">
+          <div class="preview-host" id="preview-host"></div>
+        </div>
       </section>
 
       <aside class="diagnostics-drawer" id="diagnostics-drawer" hidden>
diff --git a/src/styles/panels-editor.css b/src/styles/panels-editor.css
index 7cd3a76..738b48d 100644
--- a/src/styles/panels-editor.css
+++ b/src/styles/panels-editor.css
@@ -214,6 +214,13 @@ textarea:focus {
   overflow: auto;
 }
 
+.panel-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .panel.panel--collapsed-vertical {
   min-height: auto;
 }
@@ -232,7 +239,10 @@ textarea:focus {
 .styles-panel.panel--collapsed-vertical .editor-host,
 .styles-panel.panel--collapsed-vertical textarea,
 .styles-panel.panel--collapsed-vertical .panel-footer,
-.preview-panel.panel--collapsed-vertical .preview-host {
+.preview-panel.panel--collapsed-vertical .preview-host,
+.component-panel.panel--collapsed-vertical .panel-content,
+.styles-panel.panel--collapsed-vertical .panel-content,
+.preview-panel.panel--collapsed-vertical .panel-content {
   display: none;
 }
 
@@ -262,6 +272,7 @@ textarea:focus {
 }
 
 .preview-panel.panel--collapsed-horizontal .preview-host,
+.preview-panel.panel--collapsed-horizontal .panel-content,
 .preview-panel.panel--collapsed-horizontal .controls label,
 .preview-panel.panel--collapsed-horizontal .controls .hint-icon {
   display: none;
@@ -303,10 +314,12 @@ textarea:focus {
 
 .component-panel.panel--collapsed-horizontal .editor-host,
 .component-panel.panel--collapsed-horizontal textarea,
+.component-panel.panel--collapsed-horizontal .panel-content,
 .component-panel.panel--collapsed-horizontal .panel-header-main-actions,
 .component-panel.panel--collapsed-horizontal .panel-header .icon-button,
 .styles-panel.panel--collapsed-horizontal .editor-host,
 .styles-panel.panel--collapsed-horizontal textarea,
+.styles-panel.panel--collapsed-horizontal .panel-content,
 .styles-panel.panel--collapsed-horizontal .panel-header-main-actions,
 .styles-panel.panel--collapsed-horizontal .panel-header .icon-button,
 .styles-panel.panel--collapsed-horizontal .panel-footer {

From 5c5009bbd598e1f8985da8708814b424374c5903 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Tue, 17 Mar 2026 14:05:52 -0500
Subject: [PATCH 4/6] refactor: remove js calcs.

---
 docs/next-steps.md              |  6 +--
 playwright/app.spec.ts          |  6 +--
 src/app.js                      | 27 +---------
 src/styles/base.css             | 18 ++++++-
 src/styles/layout-shell.css     | 87 ++++++++++++++++++++++++---------
 src/styles/panels-editor.css    |  4 --
 src/styles/preview-controls.css |  5 +-
 7 files changed, 88 insertions(+), 65 deletions(-)

diff --git a/docs/next-steps.md b/docs/next-steps.md
index 8e286a4..eebda75 100644
--- a/docs/next-steps.md
+++ b/docs/next-steps.md
@@ -23,11 +23,7 @@ Focused follow-up work for `@knighted/develop`.
    - Explore authoring and running component-focused tests in-browser (for example, a Vitest-compatible flow) using CDN-delivered tooling.
    - Define a lightweight test UX that supports writing tests, running them on demand, and displaying results in-app.
 
-6. **Panel sizing without JS height sync**
-   - Revisit the current side-layout preview height calculation and investigate a pure CSS replacement.
-   - Keep existing behavior constraints: preview should not exceed the combined editor stack height in side layouts, and preview content should scroll internally when it overflows.
-
-7. **CDN failure recovery UX**
+6. **CDN failure recovery UX**
    - Detect transient CDN/module loading failures and surface a clear recovery action in-app.
    - Add a user-triggered retry path (for example, Reload page / Force reload) when runtime bootstrap imports fail.
    - Consider an optional automatic one-time retry before showing recovery controls, while avoiding infinite reload loops.
diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 34cdfd4..84d4e16 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -141,7 +141,7 @@ test('side layout config keeps preview scrolling inside preview host', async ({
   expect(scrollConfig?.minHeight).toBe('0px')
 })
 
-test('expanded component and styles min-height stay consistent in side layouts', async ({
+test('expanded component and styles can shrink consistently in side layouts', async ({
   page,
 }) => {
   await waitForInitialRender(page)
@@ -160,8 +160,8 @@ test('expanded component and styles min-height stay consistent in side layouts',
       }
     })
 
-    expect(minHeights.component).toBeGreaterThan(0)
-    expect(minHeights.styles).toBeGreaterThan(0)
+    expect(minHeights.component).toBeGreaterThanOrEqual(0)
+    expect(minHeights.styles).toBeGreaterThanOrEqual(0)
     expect(Math.abs(minHeights.component - minHeights.styles)).toBeLessThanOrEqual(1)
   }
 })
diff --git a/src/app.js b/src/app.js
index daa69e3..f881b17 100644
--- a/src/app.js
+++ b/src/app.js
@@ -16,7 +16,6 @@ const appGrid = document.querySelector('.app-grid')
 const appGridLayoutButtons = document.querySelectorAll('[data-app-grid-layout]')
 const appThemeButtons = document.querySelectorAll('[data-app-theme]')
 const panelCollapseButtons = document.querySelectorAll('[data-panel-collapse]')
-const editorsStack = document.querySelector('.panels-stack--editors')
 const componentPanel = document.getElementById('component-panel')
 const stylesPanel = document.getElementById('styles-panel')
 const previewPanel = document.getElementById('preview-panel')
@@ -189,23 +188,6 @@ const syncPanelCollapseButtons = () => {
   }
 }
 
-const syncSidePreviewHeight = () => {
-  if (!appGrid || !editorsStack) {
-    return
-  }
-
-  const layout = getCurrentLayout()
-  if (layout !== 'preview-right' && layout !== 'preview-left') {
-    appGrid.style.removeProperty('--side-editors-height')
-    return
-  }
-
-  const height = Math.round(editorsStack.getBoundingClientRect().height)
-  if (height > 0) {
-    appGrid.style.setProperty('--side-editors-height', `${height}px`)
-  }
-}
-
 const applyPanelCollapseState = () => {
   normalizePanelCollapseState()
 
@@ -253,6 +235,7 @@ const applyPanelCollapseState = () => {
     'app-grid--preview-collapsed-horizontal',
     panelCollapseState.preview && previewAxis === 'horizontal',
   )
+  appGrid.classList.toggle('app-grid--preview-collapsed', panelCollapseState.preview)
   appGrid.classList.toggle('app-grid--component-collapsed', panelCollapseState.component)
   appGrid.classList.toggle('app-grid--styles-collapsed', panelCollapseState.styles)
   appGrid.classList.toggle(
@@ -265,7 +248,6 @@ const applyPanelCollapseState = () => {
   )
 
   syncPanelCollapseButtons()
-  syncSidePreviewHeight()
 }
 
 const togglePanelCollapse = panelName => {
@@ -692,13 +674,6 @@ if (typeof compactViewportMediaQuery.addEventListener === 'function') {
   compactViewportMediaQuery.onchange = handleCompactViewportChange
 }
 
-if (typeof ResizeObserver !== 'undefined' && editorsStack) {
-  const sidePreviewHeightObserver = new ResizeObserver(() => {
-    syncSidePreviewHeight()
-  })
-  sidePreviewHeightObserver.observe(editorsStack)
-}
-
 applyAppGridLayout(getInitialAppGridLayout(), { persist: false })
 applyTheme(getInitialTheme(), { persist: false })
 applyPanelCollapseState()
diff --git a/src/styles/base.css b/src/styles/base.css
index 6dac28d..2371cea 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -176,6 +176,10 @@
   box-sizing: border-box;
 }
 
+html {
+  height: 100%;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -191,7 +195,19 @@
 body {
   margin: 0;
   padding: 0;
-  min-height: 100vh;
+  height: 100dvh;
+  min-height: 100dvh;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
   background: linear-gradient(180deg, var(--app-bg-start) 0%, var(--app-bg-end) 100%);
   color: var(--shell-text);
 }
+
+@media (max-width: 900px) {
+  body {
+    height: auto;
+    min-height: 100dvh;
+    overflow: auto;
+  }
+}
diff --git a/src/styles/layout-shell.css b/src/styles/layout-shell.css
index 463daf1..51d2880 100644
--- a/src/styles/layout-shell.css
+++ b/src/styles/layout-shell.css
@@ -68,16 +68,24 @@
 }
 
 .app-grid {
-  --panel-max-height-default: clamp(360px, calc(100dvh - 290px), 680px);
-  --panel-max-height-side: clamp(420px, calc(100dvh - 230px), 860px);
+  --expanded-panel-min-height: 360px;
+  --editors-row-flex: 1.25fr;
+  --preview-row-flex: 0.75fr;
   display: grid;
   grid-template-columns: repeat(2, minmax(320px, 1fr));
+  grid-template-rows: auto minmax(0, var(--editors-row-flex)) minmax(
+      0,
+      var(--preview-row-flex)
+    );
   grid-template-areas:
     'layout-controls layout-controls'
     'editors editors'
     'preview preview';
   gap: 18px;
   padding: 24px;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
 }
 
 .panels-stack {
@@ -88,8 +96,10 @@
   grid-area: editors;
   display: grid;
   grid-template-columns: repeat(2, minmax(320px, 1fr));
+  grid-template-rows: minmax(0, 1fr);
   gap: 18px;
   min-width: 0;
+  min-height: 0;
 }
 
 .app-grid.app-grid--component-collapsed-horizontal:not(.app-grid--preview-right):not(
@@ -109,12 +119,11 @@
 .app-grid.app-grid--component-collapsed-horizontal.app-grid--styles-collapsed-horizontal:not(
     .app-grid--preview-right
   ):not(.app-grid--preview-left) {
-  grid-template-rows: auto auto minmax(320px, 1fr);
+  grid-template-rows: auto auto minmax(0, 1fr);
   grid-template-areas:
     'layout-controls layout-controls'
     'editors editors'
     'preview preview';
-  min-height: max(520px, calc(100dvh - 210px));
 }
 
 .app-grid.app-grid--component-collapsed-horizontal.app-grid--styles-collapsed-horizontal:not(
@@ -125,13 +134,18 @@
   justify-content: start;
 }
 
+.app-grid.app-grid--preview-collapsed:not(.app-grid--preview-right):not(
+    .app-grid--preview-left
+  ) {
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
 .app-grid--preview-right {
   grid-template-columns: repeat(2, minmax(320px, 1fr));
   grid-template-rows: auto minmax(0, 1fr);
   grid-template-areas:
     'layout-controls layout-controls'
     'editors preview';
-  min-height: max(520px, calc(100dvh - 210px));
 }
 
 .app-grid--preview-right .panels-stack--editors {
@@ -167,7 +181,6 @@
   grid-template-areas:
     'layout-controls layout-controls'
     'preview editors';
-  min-height: max(520px, calc(100dvh - 210px));
 }
 
 .app-grid--preview-left .panels-stack--editors {
@@ -257,26 +270,50 @@
 }
 
 .component-panel {
-  max-height: var(--panel-max-height-default);
+  height: 100%;
+  min-height: var(--expanded-panel-min-height);
+}
+
+.component-panel.panel--collapsed-horizontal,
+.component-panel.panel--collapsed-vertical {
   min-height: 0;
 }
 
 .styles-panel {
-  max-height: var(--panel-max-height-default);
+  height: 100%;
+  min-height: var(--expanded-panel-min-height);
+}
+
+.styles-panel.panel--collapsed-horizontal,
+.styles-panel.panel--collapsed-vertical {
   min-height: 0;
 }
 
 .preview-panel {
-  max-height: var(--panel-max-height-default);
   grid-area: preview;
   position: relative;
+  height: 100%;
+  min-height: var(--expanded-panel-min-height);
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.preview-panel .panel-content {
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.preview-panel.panel--collapsed-horizontal,
+.preview-panel.panel--collapsed-vertical {
+  min-height: 0;
 }
 
 .app-grid--preview-right .preview-panel,
 .app-grid--preview-left .preview-panel {
   min-height: 0;
-  height: var(--side-editors-height, auto);
-  max-height: var(--side-editors-height, var(--panel-max-height-side));
+  height: 100%;
+  max-height: none;
   overflow: hidden;
 }
 
@@ -289,24 +326,16 @@
 .app-grid--preview-right .styles-panel,
 .app-grid--preview-left .component-panel,
 .app-grid--preview-left .styles-panel {
+  height: 100%;
   min-height: 0;
-  max-height: var(--panel-max-height-side);
-}
-
-.app-grid--preview-right
-  .component-panel:not(.panel--collapsed-vertical):not(.panel--collapsed-horizontal),
-.app-grid--preview-right
-  .styles-panel:not(.panel--collapsed-vertical):not(.panel--collapsed-horizontal),
-.app-grid--preview-left
-  .component-panel:not(.panel--collapsed-vertical):not(.panel--collapsed-horizontal),
-.app-grid--preview-left
-  .styles-panel:not(.panel--collapsed-vertical):not(.panel--collapsed-horizontal) {
-  min-height: 360px;
+  max-height: none;
 }
 
 @media (max-width: 900px) {
   .app-grid {
     grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto auto;
+    height: auto;
     grid-template-areas:
       'layout-controls'
       'editors'
@@ -322,7 +351,17 @@
   .app-grid--preview-left .component-panel,
   .app-grid--preview-left .styles-panel,
   .app-grid--preview-left .preview-panel {
-    max-height: none;
+    height: auto;
+    min-height: var(--expanded-panel-min-height);
+  }
+
+  .component-panel.panel--collapsed-horizontal,
+  .component-panel.panel--collapsed-vertical,
+  .styles-panel.panel--collapsed-horizontal,
+  .styles-panel.panel--collapsed-vertical,
+  .preview-panel.panel--collapsed-horizontal,
+  .preview-panel.panel--collapsed-vertical {
+    min-height: 0;
   }
 
   .panels-stack--editors {
diff --git a/src/styles/panels-editor.css b/src/styles/panels-editor.css
index 738b48d..652ce1d 100644
--- a/src/styles/panels-editor.css
+++ b/src/styles/panels-editor.css
@@ -8,10 +8,6 @@
   overflow: hidden;
 }
 
-.panel.preview {
-  min-height: 280px;
-}
-
 .panel-header {
   display: flex;
   align-items: center;
diff --git a/src/styles/preview-controls.css b/src/styles/preview-controls.css
index 15e9159..6eae4cc 100644
--- a/src/styles/preview-controls.css
+++ b/src/styles/preview-controls.css
@@ -1,7 +1,7 @@
 .preview-host {
   --preview-host-display: block;
-  --preview-host-flex: 1 1 auto;
-  --preview-host-min-height: 180px;
+  --preview-host-flex: 1 1 0%;
+  --preview-host-min-height: 0;
   --preview-host-padding: 18px;
   --preview-host-overflow: auto;
   --preview-host-position: relative;
@@ -9,6 +9,7 @@
   display: var(--preview-host-display);
   flex: var(--preview-host-flex);
   min-height: var(--preview-host-min-height);
+  max-height: 100%;
   padding: var(--preview-host-padding);
   overflow: var(--preview-host-overflow);
   position: var(--preview-host-position);

From 7e86c461f3e17f50d4ce0584320f283b35791422 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Tue, 17 Mar 2026 14:54:00 -0500
Subject: [PATCH 5/6] refactor: some cleanup.

---
 playwright/app.spec.ts        | 71 ++++++++++++++++++++++++++++++-----
 src/app.js                    | 38 ++++++++++++++++++-
 src/index.html                | 35 +++++++++++++++--
 src/modules/defaults.js       | 15 ++++----
 src/modules/render-runtime.js | 25 ------------
 src/styles/panels-editor.css  | 34 +++++++++++++++--
 6 files changed, 167 insertions(+), 51 deletions(-)

diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 84d4e16..6684213 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -32,6 +32,17 @@ const setStylesEditorSource = async (page: Page, source: string) => {
 const getCollapseButton = (page: Page, panelName: 'component' | 'styles' | 'preview') =>
   page.locator(`#collapse-${panelName}`)
 
+const getToolsButton = (page: Page, panelName: 'component' | 'styles') =>
+  page.locator(`#tools-${panelName}`)
+
+const ensurePanelToolsVisible = async (page: Page, panelName: 'component' | 'styles') => {
+  const button = getToolsButton(page, panelName)
+  const isPressed = await button.getAttribute('aria-pressed')
+  if (isPressed !== 'true') {
+    await button.click()
+  }
+}
+
 const expectCollapseButtonState = async (
   page: Page,
   panelName: 'component' | 'styles' | 'preview',
@@ -263,9 +274,43 @@ test('does not persist panel collapse state across reload', async ({ page }) =>
   })
 })
 
+test('gear tools toggles default inactive and switch active/inactive per panel', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  const componentPanel = page.locator('#component-panel')
+  const stylesPanel = page.locator('#styles-panel')
+  const componentTools = getToolsButton(page, 'component')
+  const stylesTools = getToolsButton(page, 'styles')
+
+  await expect(componentPanel).toHaveClass(/panel--tools-hidden/)
+  await expect(stylesPanel).toHaveClass(/panel--tools-hidden/)
+  await expect(componentTools).toHaveAttribute('aria-pressed', 'false')
+  await expect(stylesTools).toHaveAttribute('aria-pressed', 'false')
+
+  await componentTools.click()
+  await expect(componentPanel).not.toHaveClass(/panel--tools-hidden/)
+  await expect(componentTools).toHaveAttribute('aria-pressed', 'true')
+  await expect(componentTools).toHaveAttribute('title', 'Hide component tools')
+
+  await componentTools.click()
+  await expect(componentPanel).toHaveClass(/panel--tools-hidden/)
+  await expect(componentTools).toHaveAttribute('aria-pressed', 'false')
+  await expect(componentTools).toHaveAttribute('title', 'Show component tools')
+
+  await stylesTools.click()
+  await expect(stylesPanel).not.toHaveClass(/panel--tools-hidden/)
+  await expect(stylesTools).toHaveAttribute('aria-pressed', 'true')
+  await expect(stylesTools).toHaveAttribute('title', 'Hide styles tools')
+})
+
 test('renders in react mode with css modules', async ({ page }) => {
   await waitForInitialRender(page)
 
+  await ensurePanelToolsVisible(page, 'component')
+  await ensurePanelToolsVisible(page, 'styles')
+
   await page.getByLabel('ShadowRoot (open)').uncheck()
   await page.locator('#render-mode').selectOption('react')
   await page.locator('#style-mode').selectOption('module')
@@ -326,21 +371,21 @@ test('jsx syntax errors affect status but not diagnostics toggle severity', asyn
 test('requires render button when auto render is disabled', async ({ page }) => {
   await waitForInitialRender(page)
 
+  await ensurePanelToolsVisible(page, 'component')
+  await ensurePanelToolsVisible(page, 'styles')
+
   const autoRenderToggle = page.getByLabel('Auto render')
   const renderButton = page.getByRole('button', { name: 'Render' })
   const styleMode = page.locator('#style-mode')
-  const styleWarning = page.locator('#style-warning')
 
-  await expect(styleWarning).toHaveText('')
   await autoRenderToggle.uncheck()
   await expect(renderButton).toBeVisible()
 
   await styleMode.selectOption('module')
-  await expect(styleWarning).toHaveText('')
 
   await renderButton.click()
   await expect(page.locator('#status')).toHaveText('Rendered')
-  await expect(styleWarning).toContainText('CSS Modules are compiled in-browser')
+  await expect(page.locator('#preview-host pre')).toHaveCount(0)
 })
 
 test('persists layout and theme across reload', async ({ page }) => {
@@ -361,30 +406,30 @@ test('persists layout and theme across reload', async ({ page }) => {
 test('renders with less style mode', async ({ page }) => {
   await waitForInitialRender(page)
 
+  await ensurePanelToolsVisible(page, 'styles')
+
   await page.getByLabel('ShadowRoot (open)').uncheck()
   await page.locator('#style-mode').selectOption('less')
   await expect(page.locator('#status')).toHaveText('Rendered')
-  await expect(page.locator('#style-warning')).toContainText(
-    'Less is compiled in-browser via @knighted/css/browser.',
-  )
   await expectPreviewHasRenderedContent(page)
 })
 
 test('renders with sass style mode', async ({ page }) => {
   await waitForInitialRender(page)
 
+  await ensurePanelToolsVisible(page, 'styles')
+
   await page.getByLabel('ShadowRoot (open)').uncheck()
   await page.locator('#style-mode').selectOption('sass')
   await expect(page.locator('#status')).toHaveText('Rendered')
-  await expect(page.locator('#style-warning')).toContainText(
-    'Sass is compiled in-browser via @knighted/css/browser.',
-  )
   await expectPreviewHasRenderedContent(page)
 })
 
 test('style compilation errors populate styles diagnostics scope', async ({ page }) => {
   await waitForInitialRender(page)
 
+  await ensurePanelToolsVisible(page, 'styles')
+
   await page.locator('#style-mode').selectOption('sass')
   await setStylesEditorSource(page, '.card { color: $missing; }')
 
@@ -443,6 +488,8 @@ test('clearing styles keeps diagnostics error state but resets status styling',
 }) => {
   await waitForInitialRender(page)
 
+  await ensurePanelToolsVisible(page, 'component')
+
   await setComponentEditorSource(
     page,
     ["const count: number = 'oops'", 'const App = () => <button>ready</button>'].join(
@@ -477,6 +524,8 @@ test('clear component diagnostics removes type errors and restores rendered stat
 }) => {
   await waitForInitialRender(page)
 
+  await ensurePanelToolsVisible(page, 'component')
+
   await setComponentEditorSource(
     page,
     ["const count: number = 'oops'", 'const App = () => <button>ready</button>'].join(
@@ -507,6 +556,8 @@ test('clear component diagnostics removes type errors and restores rendered stat
 test('clear all diagnostics removes style compile diagnostics', async ({ page }) => {
   await waitForInitialRender(page)
 
+  await ensurePanelToolsVisible(page, 'styles')
+
   await page.locator('#style-mode').selectOption('sass')
   await setStylesEditorSource(page, '.card { color: $missing; }')
 
diff --git a/src/app.js b/src/app.js
index f881b17..60d00e6 100644
--- a/src/app.js
+++ b/src/app.js
@@ -15,6 +15,7 @@ const statusNode = document.getElementById('status')
 const appGrid = document.querySelector('.app-grid')
 const appGridLayoutButtons = document.querySelectorAll('[data-app-grid-layout]')
 const appThemeButtons = document.querySelectorAll('[data-app-theme]')
+const editorToolsButtons = document.querySelectorAll('[data-editor-tools-toggle]')
 const panelCollapseButtons = document.querySelectorAll('[data-panel-collapse]')
 const componentPanel = document.getElementById('component-panel')
 const stylesPanel = document.getElementById('styles-panel')
@@ -31,7 +32,6 @@ const clearStylesButton = document.getElementById('clear-styles')
 const shadowToggle = document.getElementById('shadow-toggle')
 const jsxEditor = document.getElementById('jsx-editor')
 const cssEditor = document.getElementById('css-editor')
-const styleWarning = document.getElementById('style-warning')
 const diagnosticsToggle = document.getElementById('diagnostics-toggle')
 const diagnosticsDrawer = document.getElementById('diagnostics-drawer')
 const diagnosticsClose = document.getElementById('diagnostics-close')
@@ -144,6 +144,28 @@ const panelCollapseState = {
   preview: false,
 }
 
+const panelToolsState = {
+  component: false,
+  styles: false,
+}
+
+const applyEditorToolsVisibility = () => {
+  componentPanel?.classList.toggle('panel--tools-hidden', !panelToolsState.component)
+  stylesPanel?.classList.toggle('panel--tools-hidden', !panelToolsState.styles)
+
+  for (const button of editorToolsButtons) {
+    const panelName = button.dataset.editorToolsToggle
+    if (!panelName || !(panelName in panelToolsState)) {
+      continue
+    }
+
+    const isVisible = panelToolsState[panelName]
+    button.setAttribute('aria-pressed', isVisible ? 'true' : 'false')
+    button.setAttribute('aria-label', `${isVisible ? 'Hide' : 'Show'} ${panelName} tools`)
+    button.setAttribute('title', `${isVisible ? 'Hide' : 'Show'} ${panelName} tools`)
+  }
+}
+
 const normalizePanelCollapseState = () => {
   const collapsedPanels = Object.entries(panelCollapseState)
     .filter(([, isCollapsed]) => isCollapsed)
@@ -410,7 +432,6 @@ renderRuntime = createRenderRuntimeController({
   renderMode,
   styleMode,
   shadowToggle,
-  styleWarning,
   getCssSource: () => getCssSource(),
   getJsxSource: () => getJsxSource(),
   getPreviewHost: () => previewHost,
@@ -653,6 +674,18 @@ for (const button of appThemeButtons) {
   })
 }
 
+for (const button of editorToolsButtons) {
+  button.addEventListener('click', () => {
+    const panelName = button.dataset.editorToolsToggle
+    if (!panelName || !(panelName in panelToolsState)) {
+      return
+    }
+
+    panelToolsState[panelName] = !panelToolsState[panelName]
+    applyEditorToolsVisibility()
+  })
+}
+
 for (const button of panelCollapseButtons) {
   button.addEventListener('click', () => {
     const panelName = button.dataset.panelCollapse
@@ -676,6 +709,7 @@ if (typeof compactViewportMediaQuery.addEventListener === 'function') {
 
 applyAppGridLayout(getInitialAppGridLayout(), { persist: false })
 applyTheme(getInitialTheme(), { persist: false })
+applyEditorToolsVisibility()
 applyPanelCollapseState()
 
 updateRenderButtonVisibility()
diff --git a/src/index.html b/src/index.html
index d769ca8..72f12fb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -130,7 +130,7 @@ <h1>
       </div>
 
       <div class="panels-stack panels-stack--editors">
-        <section class="panel component-panel" id="component-panel">
+        <section class="panel component-panel panel--tools-hidden" id="component-panel">
           <div class="panel-header panel-header--grid">
             <h2>Component</h2>
             <div class="controls controls--quick-actions panel-header-quick-actions">
@@ -151,6 +151,21 @@ <h2>Component</h2>
                 </svg>
                 <span class="panel-collapse-toggle__label">Collapse</span>
               </button>
+              <button
+                class="icon-button editor-tools-toggle"
+                id="tools-component"
+                type="button"
+                data-editor-tools-toggle="component"
+                aria-pressed="false"
+                title="Show component tools"
+                aria-label="Show component tools"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path
+                    d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2zm0 8.6a3.8 3.8 0 1 1 3.8-3.8 3.804 3.804 0 0 1-3.8 3.8z"
+                  ></path>
+                </svg>
+              </button>
               <button
                 class="icon-button"
                 id="copy-component"
@@ -208,7 +223,7 @@ <h2>Component</h2>
           </div>
         </section>
 
-        <section class="panel styles-panel" id="styles-panel">
+        <section class="panel styles-panel panel--tools-hidden" id="styles-panel">
           <div class="panel-header panel-header--grid">
             <h2>Styles</h2>
             <div class="controls controls--quick-actions panel-header-quick-actions">
@@ -229,6 +244,21 @@ <h2>Styles</h2>
                 </svg>
                 <span class="panel-collapse-toggle__label">Collapse</span>
               </button>
+              <button
+                class="icon-button editor-tools-toggle"
+                id="tools-styles"
+                type="button"
+                data-editor-tools-toggle="styles"
+                aria-pressed="false"
+                title="Show styles tools"
+                aria-label="Show styles tools"
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path
+                    d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2zm0 8.6a3.8 3.8 0 1 1 3.8-3.8 3.804 3.804 0 0 1-3.8 3.8z"
+                  ></path>
+                </svg>
+              </button>
               <button
                 class="icon-button"
                 id="copy-styles"
@@ -275,7 +305,6 @@ <h2>Styles</h2>
           </div>
           <div class="panel-content" id="styles-panel-content">
             <textarea id="css-editor" spellcheck="false"></textarea>
-            <div class="panel-footer" id="style-warning"></div>
           </div>
         </section>
       </div>
diff --git a/src/modules/defaults.js b/src/modules/defaults.js
index be44a6d..1becee3 100644
--- a/src/modules/defaults.js
+++ b/src/modules/defaults.js
@@ -5,7 +5,7 @@ export const defaultJsx = [
   '}',
   '',
   'const CounterButton = ({ label, onClick }: CounterButtonProps) => (',
-  '  <button id="counter-button" type="button" onClick={onClick}>',
+  '  <button class="counter-button" type="button" onClick={onClick}>',
   '    {label}',
   '  </button>',
   ')',
@@ -34,10 +34,9 @@ export const defaultReactJsx = [
   '',
   'const CounterButton = ({ label, active, onClick }: CounterButtonProps) => (',
   '  <button',
-  '    id="counter-button"',
   '    type="button"',
   '    data-active={active ? "true" : "false"}',
-  '    className={active ? "is-even" : ""}',
+  '    className={active ? "counter-button is-even" : "counter-button"}',
   '    onClick={onClick}',
   '  >',
   '    {label}',
@@ -62,7 +61,7 @@ export const defaultReactJsx = [
   '',
 ].join('\n')
 
-export const defaultCss = `#counter-button {
+export const defaultCss = `.counter-button {
   margin: 0;
   padding: 0.75rem 1rem;
   border: 1px solid #3558b8;
@@ -74,20 +73,20 @@ export const defaultCss = `#counter-button {
   transition: background-color 120ms ease;
 }
 
-#counter-button:hover {
+.counter-button:hover {
   background: #dce6ff;
 }
 
-#counter-button[data-active='true'] {
+.counter-button[data-active='true'] {
   background: #3558b8;
   color: #fff;
 }
 
-#counter-button.is-even {
+.counter-button.is-even {
   border-style: dashed;
 }
 
-#counter-button:focus-visible {
+.counter-button:focus-visible {
   outline: 2px solid #6a84d8;
   outline-offset: 2px;
 }
diff --git a/src/modules/render-runtime.js b/src/modules/render-runtime.js
index 338df99..6bb30a5 100644
--- a/src/modules/render-runtime.js
+++ b/src/modules/render-runtime.js
@@ -4,7 +4,6 @@ export const createRenderRuntimeController = ({
   renderMode,
   styleMode,
   shadowToggle,
-  styleWarning,
   getCssSource,
   getJsxSource,
   getPreviewHost,
@@ -31,13 +30,6 @@ export const createRenderRuntimeController = ({
   }
   let hasCompletedInitialRender = false
 
-  const styleLabels = {
-    css: 'Native CSS',
-    module: 'CSS Modules',
-    less: 'Less',
-    sass: 'Sass',
-  }
-
   const setStyleCompiling = isCompiling => {
     const previewHost = getPreviewHost()
     if (!previewHost) {
@@ -130,21 +122,6 @@ export const createRenderRuntimeController = ({
     target.innerHTML = ''
   }
 
-  const updateStyleWarning = () => {
-    const mode = styleMode.value
-    if (mode === 'css') {
-      styleWarning.textContent = ''
-      return
-    }
-    if (mode === 'module') {
-      styleWarning.textContent =
-        'CSS Modules are compiled in-browser and class names are remapped automatically.'
-      return
-    }
-
-    styleWarning.textContent = `${styleLabels[mode]} is compiled in-browser via @knighted/css/browser.`
-  }
-
   const shadowPreviewBaseStyles = `
 :host {
   all: initial;
@@ -622,7 +599,6 @@ export const createRenderRuntimeController = ({
 
   const renderPreview = async () => {
     scheduled = null
-    updateStyleWarning()
     setStatus(hasCompletedInitialRender ? 'Rendering…' : 'Loading CDN assets…', 'pending')
 
     try {
@@ -661,7 +637,6 @@ export const createRenderRuntimeController = ({
   return {
     renderPreview,
     scheduleRender,
-    updateStyleWarning,
     setStyleCompiling,
   }
 }
diff --git a/src/styles/panels-editor.css b/src/styles/panels-editor.css
index 652ce1d..6871d7f 100644
--- a/src/styles/panels-editor.css
+++ b/src/styles/panels-editor.css
@@ -53,6 +53,18 @@
   justify-content: flex-start;
 }
 
+.component-panel.panel--tools-hidden .panel-header-main-actions,
+.styles-panel.panel--tools-hidden .panel-header-main-actions {
+  display: none;
+}
+
+.component-panel.panel--tools-hidden .panel-header--grid,
+.styles-panel.panel--tools-hidden .panel-header--grid {
+  grid-template-areas: 'title quick';
+  align-items: center;
+  row-gap: 0;
+}
+
 .controls {
   display: flex;
   gap: 12px;
@@ -70,6 +82,24 @@
   gap: 10px;
 }
 
+.editor-tools-toggle {
+  opacity: 0.72;
+}
+
+.editor-tools-toggle svg {
+  width: 15px;
+  height: 15px;
+  fill: currentColor;
+  stroke: none;
+}
+
+.editor-tools-toggle[aria-pressed='true'] {
+  opacity: 1;
+  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
+  background: var(--accent-soft);
+  color: var(--select-text);
+}
+
 .panel-collapse-toggle {
   display: inline-flex;
   align-items: center;
@@ -234,7 +264,6 @@ textarea:focus {
 .component-panel.panel--collapsed-vertical textarea,
 .styles-panel.panel--collapsed-vertical .editor-host,
 .styles-panel.panel--collapsed-vertical textarea,
-.styles-panel.panel--collapsed-vertical .panel-footer,
 .preview-panel.panel--collapsed-vertical .preview-host,
 .component-panel.panel--collapsed-vertical .panel-content,
 .styles-panel.panel--collapsed-vertical .panel-content,
@@ -317,8 +346,7 @@ textarea:focus {
 .styles-panel.panel--collapsed-horizontal textarea,
 .styles-panel.panel--collapsed-horizontal .panel-content,
 .styles-panel.panel--collapsed-horizontal .panel-header-main-actions,
-.styles-panel.panel--collapsed-horizontal .panel-header .icon-button,
-.styles-panel.panel--collapsed-horizontal .panel-footer {
+.styles-panel.panel--collapsed-horizontal .panel-header .icon-button {
   display: none;
 }
 

From 6d8e5ce1686bb423d85d5f159a49bf79631d5f12 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Tue, 17 Mar 2026 15:06:00 -0500
Subject: [PATCH 6/6] fix: use object hasOwn.

---
 src/app.js | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/app.js b/src/app.js
index 60d00e6..41317c4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -75,12 +75,6 @@ const layoutTheme = createLayoutThemeController({
 const { applyAppGridLayout, applyTheme, getInitialAppGridLayout, getInitialTheme } =
   layoutTheme
 
-const panelMap = {
-  component: componentPanel,
-  styles: stylesPanel,
-  preview: previewPanel,
-}
-
 const compactViewportMediaQuery = window.matchMedia('(max-width: 900px)')
 
 const getCurrentLayout = () => {
@@ -155,7 +149,7 @@ const applyEditorToolsVisibility = () => {
 
   for (const button of editorToolsButtons) {
     const panelName = button.dataset.editorToolsToggle
-    if (!panelName || !(panelName in panelToolsState)) {
+    if (!panelName || !Object.hasOwn(panelToolsState, panelName)) {
       continue
     }
 
@@ -181,7 +175,7 @@ const syncPanelCollapseButtons = () => {
 
   for (const button of panelCollapseButtons) {
     const panelName = button.dataset.panelCollapse
-    if (!panelName || !(panelName in panelMap)) {
+    if (!panelName || !Object.hasOwn(panelCollapseState, panelName)) {
       continue
     }
 
@@ -273,7 +267,7 @@ const applyPanelCollapseState = () => {
 }
 
 const togglePanelCollapse = panelName => {
-  if (!(panelName in panelCollapseState)) {
+  if (!Object.hasOwn(panelCollapseState, panelName)) {
     return
   }
 
@@ -677,7 +671,7 @@ for (const button of appThemeButtons) {
 for (const button of editorToolsButtons) {
   button.addEventListener('click', () => {
     const panelName = button.dataset.editorToolsToggle
-    if (!panelName || !(panelName in panelToolsState)) {
+    if (!panelName || !Object.hasOwn(panelToolsState, panelName)) {
       return
     }