feat: layout options.

Author: knightedcodemonkey

src/app.js

@@ -3,6 +3,8 @@ import { createCodeMirrorEditor } from './editor-codemirror.js'
 import { defaultCss, defaultJsx } from './defaults.js'
 
 const statusNode = document.getElementById('status')
+const appGrid = document.querySelector('.app-grid')
+const appGridLayoutButtons = document.querySelectorAll('[data-app-grid-layout]')
 const renderMode = document.getElementById('render-mode')
 const autoRenderToggle = document.getElementById('auto-render')
 const renderButton = document.getElementById('render-button')
@@ -44,6 +46,7 @@ let pendingClearAction = null
 let hasCompletedInitialRender = false
 let previewBackgroundColor = null
 const clipboardSupported = Boolean(navigator.clipboard?.writeText)
+const appGridLayoutStorageKey = 'knighted-develop:app-grid-layout'
 
 const styleLabels = {
   css: 'Native CSS',
@@ -142,6 +145,43 @@ const setStatus = text => {
   statusNode.textContent = text
 }
 
+const appGridLayouts = ['default', 'preview-right', 'preview-left']
+
+const applyAppGridLayout = (layout, { persist = true } = {}) => {
+  if (!appGrid || !appGridLayouts.includes(layout)) {
+    return
+  }
+
+  appGrid.classList.toggle('app-grid--preview-right', layout === 'preview-right')
+  appGrid.classList.toggle('app-grid--preview-left', layout === 'preview-left')
+
+  for (const button of appGridLayoutButtons) {
+    const isActive = button.dataset.appGridLayout === layout
+    button.setAttribute('aria-pressed', isActive ? 'true' : 'false')
+  }
+
+  if (persist) {
+    try {
+      localStorage.setItem(appGridLayoutStorageKey, layout)
+    } catch {
+      /* Ignore storage write errors in restricted browsing modes. */
+    }
+  }
+}
+
+const getInitialAppGridLayout = () => {
+  try {
+    const value = localStorage.getItem(appGridLayoutStorageKey)
+    if (appGridLayouts.includes(value)) {
+      return value
+    }
+  } catch {
+    /* Ignore storage read errors in restricted browsing modes. */
+  }
+
+  return 'default'
+}
+
 const setCdnLoading = isLoading => {
   if (!cdnLoading) return
   cdnLoading.hidden = !isLoading
@@ -892,6 +932,18 @@ clearStylesButton.addEventListener('click', () => {
 jsxEditor.addEventListener('input', maybeRender)
 cssEditor.addEventListener('input', maybeRender)
 
+for (const button of appGridLayoutButtons) {
+  button.addEventListener('click', () => {
+    const nextLayout = button.dataset.appGridLayout
+    if (!nextLayout) {
+      return
+    }
+    applyAppGridLayout(nextLayout)
+  })
+}
+
+applyAppGridLayout(getInitialAppGridLayout(), { persist: false })
+
 updateRenderButtonVisibility()
 setStyleCompiling(false)
 setCdnLoading(true)

src/index.html

@@ -24,6 +24,54 @@ <h1>
     </header>
 
     <main class="app-grid">
+      <div class="app-grid-layout-controls" role="group" aria-label="App grid layout">
+        <button
+          class="layout-toggle"
+          id="layout-default"
+          type="button"
+          data-app-grid-layout="default"
+          aria-pressed="true"
+          title="Component + Styles on top, Preview below"
+          aria-label="Use stacked preview layout"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <rect x="3" y="3" width="8" height="7" rx="1"></rect>
+            <rect x="13" y="3" width="8" height="7" rx="1"></rect>
+            <rect x="3" y="12" width="18" height="9" rx="1"></rect>
+          </svg>
+        </button>
+        <button
+          class="layout-toggle"
+          id="layout-preview-right"
+          type="button"
+          data-app-grid-layout="preview-right"
+          aria-pressed="false"
+          title="Component + Styles on left, Preview on right"
+          aria-label="Use side preview layout"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <rect x="3" y="3" width="8" height="8" rx="1"></rect>
+            <rect x="3" y="13" width="8" height="8" rx="1"></rect>
+            <rect x="13" y="3" width="8" height="18" rx="1"></rect>
+          </svg>
+        </button>
+        <button
+          class="layout-toggle"
+          id="layout-preview-left"
+          type="button"
+          data-app-grid-layout="preview-left"
+          aria-pressed="false"
+          title="Preview on left, Component + Styles on right"
+          aria-label="Use left preview layout"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <rect x="3" y="3" width="8" height="18" rx="1"></rect>
+            <rect x="13" y="3" width="8" height="8" rx="1"></rect>
+            <rect x="13" y="13" width="8" height="8" rx="1"></rect>
+          </svg>
+        </button>
+      </div>
+
       <section class="panel component-panel">
         <div class="panel-header panel-header--grid">
           <h2>Component</h2>

src/styles.css

@@ -78,12 +78,69 @@ body {
   display: grid;
   grid-template-columns: repeat(2, minmax(320px, 1fr));
   grid-template-areas:
+    'layout-controls layout-controls'
     'component styles'
     'preview preview';
   gap: 18px;
   padding: 24px;
 }
 
+.app-grid--preview-right {
+  grid-template-areas:
+    'layout-controls layout-controls'
+    'component preview'
+    'styles preview';
+}
+
+.app-grid--preview-left {
+  grid-template-areas:
+    'layout-controls layout-controls'
+    'preview component'
+    'preview styles';
+}
+
+.app-grid-layout-controls {
+  grid-area: layout-controls;
+  display: inline-flex;
+  justify-self: end;
+  gap: 10px;
+}
+
+.layout-toggle {
+  display: inline-grid;
+  place-content: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.06);
+  color: #d8e0ef;
+  cursor: pointer;
+}
+
+.layout-toggle svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
+.layout-toggle:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.layout-toggle[aria-pressed='true'] {
+  border-color: rgba(122, 107, 255, 0.65);
+  background: rgba(122, 107, 255, 0.2);
+  color: #f1f5ff;
+}
+
+.layout-toggle:focus-visible {
+  outline: 2px solid rgba(122, 107, 255, 0.85);
+  outline-offset: 2px;
+}
+
 .component-panel {
   grid-area: component;
   max-height: min(64vh, 620px);
@@ -105,10 +162,15 @@ body {
   .app-grid {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
+      'layout-controls'
       'component'
       'styles'
       'preview';
   }
+
+  .app-grid-layout-controls {
+    justify-self: start;
+  }
 }
 
 .panel {
@@ -271,7 +333,7 @@ textarea:focus {
 }
 
 .preview-host {
-  flex: 0 1 auto;
+  flex: 1 1 auto;
   min-height: 180px;
   padding: 18px;
   overflow: auto;