refactor: address comments and more.

Author: knightedcodemonkey

docs/next-steps.md

@@ -0,0 +1,23 @@
+# Next Steps
+
+Focused follow-up work for `@knighted/develop`.
+
+1. **Grid-first header/layout cleanup**
+   - Refactor panel header layout to use CSS Grid as the primary layout mechanism.
+   - Reduce wrapper rows where possible and place controls explicitly in grid areas.
+   - Preserve existing semantics and accessibility behavior while simplifying structure.
+   - Validate desktop/mobile breakpoints and keep visual behavior parity.
+
+2. **Style isolation behavior docs**
+   - Document ShadowRoot on/off behavior and how style isolation changes in light DOM mode.
+   - Clarify that light DOM preview can inherit shell styles and include recommendations for scoping.
+
+3. **Preview UX polish**
+   - Keep tooltip affordances for mode-specific behavior.
+   - Continue tightening panel control alignment and spacing without introducing extra markup.
+
+4. **Theming (light + dark)**
+   - Keep the existing dark mode as the baseline and add a first-class light theme.
+   - Move key colors to semantic CSS variables and define both theme palettes.
+   - Ensure component panels, controls, editor chrome, preview shell, and tooltips all have complete light-mode coverage.
+   - Verify contrast/accessibility across both themes and preserve visual hierarchy parity.

src/app.js

@@ -1,5 +1,6 @@
 import { cdnImports, importFromCdnWithFallback } from './cdn.js'
 import { createCodeMirrorEditor } from './editor-codemirror.js'
+import { defaultCss, defaultJsx } from './defaults.js'
 
 const statusNode = document.getElementById('status')
 const renderMode = document.getElementById('render-mode')
@@ -15,56 +16,7 @@ const jsxEditor = document.getElementById('jsx-editor')
 const cssEditor = document.getElementById('css-editor')
 const styleWarning = document.getElementById('style-warning')
 const cdnLoading = document.getElementById('cdn-loading')
-
-const defaultJsx = [
-  'const Button = ({ onClick }) => {',
-  '  return <button onClick={onClick}>click me</button>',
-  '}',
-  '',
-  'const App = () => {',
-  '  const onClick = () => {',
-  "    alert('clicked!')",
-  '  }',
-  '',
-  '  return <Button onClick={onClick} />',
-  '}',
-  '',
-].join('\n')
-
-const defaultCss = `button {
-  appearance: none;
-  border: 1px solid rgba(122, 107, 255, 0.55);
-  background: linear-gradient(135deg, #7a6bff, #5f4dff);
-  color: #fff;
-  padding: 10px 16px;
-  border-radius: 10px;
-  font-weight: 700;
-  letter-spacing: 0.01em;
-  cursor: pointer;
-  transition:
-    transform 120ms ease,
-    box-shadow 120ms ease,
-    filter 120ms ease;
-  box-shadow:
-    0 8px 20px rgba(95, 77, 255, 0.28),
-    inset 0 1px 0 rgba(255, 255, 255, 0.18);
-}
-
-button:hover {
-  transform: translateY(-1px);
-  filter: brightness(1.06);
-}
-
-button:active {
-  transform: translateY(0);
-  filter: brightness(0.98);
-}
-
-button:focus-visible {
-  outline: 2px solid #9d91ff;
-  outline-offset: 2px;
-}
-`
+const previewBgColorInput = document.getElementById('preview-bg-color')
 
 jsxEditor.value = defaultJsx
 cssEditor.value = defaultCss
@@ -86,6 +38,8 @@ let compiledStylesCache = {
   value: null,
 }
 let hasCompletedInitialRender = false
+let previewBackgroundColor = null
+const clipboardSupported = Boolean(navigator.clipboard?.writeText)
 
 const styleLabels = {
   css: 'Native CSS',
@@ -216,33 +170,24 @@ const setCssSource = value => {
 
 const clearComponentSource = () => {
   setJsxSource('')
-  maybeRender()
+  if (!jsxCodeEditor) {
+    maybeRender()
+  }
 }
 
 const clearStylesSource = () => {
   setCssSource('')
-  maybeRender()
+  if (!cssCodeEditor) {
+    maybeRender()
+  }
 }
 
 const copyTextToClipboard = async text => {
-  if (navigator.clipboard?.writeText) {
-    await navigator.clipboard.writeText(text)
-    return
+  if (!clipboardSupported) {
+    throw new Error('Clipboard API is not available in this browser context.')
   }
 
-  const fallbackInput = document.createElement('textarea')
-  fallbackInput.value = text
-  fallbackInput.setAttribute('readonly', 'true')
-  fallbackInput.style.position = 'absolute'
-  fallbackInput.style.left = '-9999px'
-  document.body.append(fallbackInput)
-  fallbackInput.select()
-  const ok = document.execCommand('copy')
-  fallbackInput.remove()
-
-  if (!ok) {
-    throw new Error('Clipboard copy is not available in this browser context.')
-  }
+  await navigator.clipboard.writeText(text)
 }
 
 const copyComponentSource = async () => {
@@ -263,12 +208,74 @@ const copyStylesSource = async () => {
   }
 }
 
+const toHexChannel = value => value.toString(16).padStart(2, '0')
+
+const normalizeColorToHex = colorValue => {
+  if (typeof colorValue !== 'string' || colorValue.length === 0) {
+    return '#12141c'
+  }
+
+  if (/^#[\da-f]{6}$/i.test(colorValue)) {
+    return colorValue.toLowerCase()
+  }
+
+  if (/^#[\da-f]{3}$/i.test(colorValue)) {
+    return colorValue
+      .slice(1)
+      .split('')
+      .map(channel => channel + channel)
+      .join('')
+      .replace(/^/, '#')
+      .toLowerCase()
+  }
+
+  const channels = colorValue.match(/\d+/g)
+  if (!channels || channels.length < 3) {
+    return '#12141c'
+  }
+
+  const [red, green, blue] = channels.slice(0, 3).map(value => Number.parseInt(value, 10))
+  if ([red, green, blue].some(value => Number.isNaN(value))) {
+    return '#12141c'
+  }
+
+  return `#${toHexChannel(red)}${toHexChannel(green)}${toHexChannel(blue)}`
+}
+
+const applyPreviewBackgroundColor = color => {
+  if (!previewHost) {
+    return
+  }
+
+  previewHost.style.backgroundColor = color
+}
+
+const initializePreviewBackgroundPicker = () => {
+  if (!previewBgColorInput || !previewHost) {
+    return
+  }
+
+  const initialColor = normalizeColorToHex(getComputedStyle(previewHost).backgroundColor)
+  previewBackgroundColor = initialColor
+  previewBgColorInput.value = initialColor
+  applyPreviewBackgroundColor(initialColor)
+
+  previewBgColorInput.addEventListener('input', () => {
+    previewBackgroundColor = previewBgColorInput.value
+    applyPreviewBackgroundColor(previewBackgroundColor)
+  })
+}
+
 const recreatePreviewHost = () => {
   const nextHost = document.createElement('div')
   nextHost.id = 'preview-host'
   nextHost.className = previewHost.className
   previewHost.replaceWith(nextHost)
   previewHost = nextHost
+
+  if (previewBackgroundColor) {
+    applyPreviewBackgroundColor(previewBackgroundColor)
+  }
 }
 
 const getRenderTarget = () => {
@@ -318,7 +325,10 @@ const applyStyles = (target, cssText) => {
   if (!target) return
 
   const styleTag = document.createElement('style')
-  styleTag.textContent = cssText
+  const isShadowTarget = target instanceof ShadowRoot
+  styleTag.textContent = isShadowTarget
+    ? cssText
+    : `@scope (#preview-host) {\n${cssText}\n}`
   target.append(styleTag)
 }
 
@@ -638,15 +648,33 @@ const evaluateUserModule = async (helpers = {}) => {
       throw error
     }
 
-    const transpiledUserCode = transpileJsxSource(userCode, {
-      sourceType: 'script',
-    }).code
+    const transpileMode = helpers.React && helpers.reactJsx ? 'react' : 'dom'
+    const transpileOptionsByMode = {
+      dom: {
+        sourceType: 'script',
+        createElement: 'jsx.createElement',
+        fragment: 'jsx.Fragment',
+      },
+      react: {
+        sourceType: 'script',
+        createElement: 'React.createElement',
+        fragment: 'React.Fragment',
+      },
+    }
+    const transpiledUserCode = transpileJsxSource(
+      userCode,
+      transpileOptionsByMode[transpileMode],
+    ).code
     const moduleFactory = createUserModuleFactory(transpiledUserCode)
 
     if (helpers.React && helpers.reactJsx) {
       return moduleFactory(helpers.jsx ?? jsx, helpers.reactJsx, helpers.React)
     }
 
+    if (transpileMode === 'dom') {
+      return moduleFactory(helpers.jsx ?? jsx, helpers.reactJsx, helpers.React)
+    }
+
     const { React, reactJsx } = await ensureReactRuntime()
     return moduleFactory(helpers.jsx ?? jsx, helpers.reactJsx ?? reactJsx, React)
   }
@@ -717,7 +745,7 @@ const renderReact = async () => {
   applyStyles(target, compiledStyles.css)
 
   const { reactJsx, createRoot, React } = await ensureReactRuntime()
-  const renderFn = await evaluateUserModule({ jsx: reactJsx, reactJsx })
+  const renderFn = await evaluateUserModule({ jsx: reactJsx, reactJsx, React })
   if (!renderFn) {
     throw new Error('Expected a render() function or a component named App/View.')
   }
@@ -789,19 +817,25 @@ autoRenderToggle.addEventListener('change', () => {
   }
 })
 renderButton.addEventListener('click', renderPreview)
-copyComponentButton.addEventListener('click', () => {
-  void copyComponentSource()
-})
+if (clipboardSupported) {
+  copyComponentButton.addEventListener('click', () => {
+    void copyComponentSource()
+  })
+  copyStylesButton.addEventListener('click', () => {
+    void copyStylesSource()
+  })
+} else {
+  copyComponentButton.hidden = true
+  copyStylesButton.hidden = true
+}
 clearComponentButton.addEventListener('click', clearComponentSource)
-copyStylesButton.addEventListener('click', () => {
-  void copyStylesSource()
-})
 clearStylesButton.addEventListener('click', clearStylesSource)
 jsxEditor.addEventListener('input', maybeRender)
 cssEditor.addEventListener('input', maybeRender)
 
 updateRenderButtonVisibility()
 setStyleCompiling(false)
 setCdnLoading(true)
+initializePreviewBackgroundPicker()
 void initializeCodeEditors()
 renderPreview()