refactor: address comments.

Author: knightedcodemonkey

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.

eslint.config.js

@@ -20,6 +20,9 @@ export default [
       sourceType: 'module',
       ecmaVersion: 'latest',
     },
+    rules: {
+      'no-unused-vars': 'error',
+    },
   },
   {
     ...playwrightConfig,

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}`)
 

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(() => {

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>

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 {