From e19f3cad8489f625f4303d2f7f3255e9aa7fd049 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Mon, 16 Mar 2026 15:25:19 -0500
Subject: [PATCH 1/4] chore: strip types when using ts.

---
 playwright/app.spec.ts | 21 +++++++++++++++++++++
 src/app.js             |  7 ++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 8a13532..52392d5 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -8,6 +8,11 @@ const waitForInitialRender = async (page: Page) => {
   await expect(page.locator('#cdn-loading')).toHaveAttribute('hidden', '')
 }
 
+const setComponentEditorSource = async (page: Page, source: string) => {
+  const editorContent = page.locator('.component-panel .cm-content').first()
+  await editorContent.fill(source)
+}
+
 test('renders default playground preview', async ({ page }) => {
   await waitForInitialRender(page)
 
@@ -49,6 +54,22 @@ test('renders in react mode with css modules', async ({ page }) => {
   await expect(previewItems.first()).toContainText('apple')
 })
 
+test('transpiles TypeScript annotations in component source', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await page.getByLabel('ShadowRoot (open)').uncheck()
+  await setComponentEditorSource(
+    page,
+    [
+      'const Button = ({ label }: { label: string }): unknown => <button>{label}</button>',
+      'const App = () => <Button label="typed" />',
+    ].join('\n'),
+  )
+
+  await expect(page.locator('#status')).toHaveText('Rendered')
+  await expect(page.locator('#preview-host button')).toContainText('typed')
+})
+
 test('shows error status when component source is cleared', async ({ page }) => {
   await waitForInitialRender(page)
 
diff --git a/src/app.js b/src/app.js
index 0980823..288acd7 100644
--- a/src/app.js
+++ b/src/app.js
@@ -594,8 +594,7 @@ const remapReactClassNames = (value, moduleExports, React) => {
   return React.cloneElement(value, nextProps)
 }
 
-const looksLikeJsxSyntaxError = error =>
-  error instanceof SyntaxError && /Unexpected token ['"]?</.test(error.message)
+const shouldAttemptTranspileFallback = error => error instanceof SyntaxError
 
 const createUserModuleFactory = source =>
   new Function(
@@ -794,7 +793,7 @@ const evaluateUserModule = async (helpers = {}) => {
     const moduleFactory = createUserModuleFactory(userCode)
     return moduleFactory(helpers.jsx ?? jsx, helpers.reactJsx, helpers.React)
   } catch (error) {
-    if (!looksLikeJsxSyntaxError(error)) {
+    if (!shouldAttemptTranspileFallback(error)) {
       throw error
     }
 
@@ -804,11 +803,13 @@ const evaluateUserModule = async (helpers = {}) => {
         sourceType: 'script',
         createElement: 'jsx.createElement',
         fragment: 'jsx.Fragment',
+        typescript: 'strip',
       },
       react: {
         sourceType: 'script',
         createElement: 'React.createElement',
         fragment: 'React.Fragment',
+        typescript: 'strip',
       },
     }
     const transpiledUserCode = transpileJsxSource(

From d0d3d4df5de656fcddf4c4a1a409702b97f5e524 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Mon, 16 Mar 2026 16:34:06 -0500
Subject: [PATCH 2/4] feat: beta type-checking impl.

---
 src/app.js     | 291 ++++++++++++++++++++++++++++++++++++++++++++++++-
 src/cdn.js     |   5 +
 src/index.html |  32 ++++--
 src/styles.css |  27 +++++
 4 files changed, 347 insertions(+), 8 deletions(-)

diff --git a/src/app.js b/src/app.js
index 288acd7..e82165c 100644
--- a/src/app.js
+++ b/src/app.js
@@ -8,6 +8,8 @@ const appGridLayoutButtons = document.querySelectorAll('[data-app-grid-layout]')
 const appThemeButtons = document.querySelectorAll('[data-app-theme]')
 const renderMode = document.getElementById('render-mode')
 const autoRenderToggle = document.getElementById('auto-render')
+const typecheckToggle = document.getElementById('typecheck-enabled')
+const typecheckButton = document.getElementById('typecheck-button')
 const renderButton = document.getElementById('render-button')
 const copyComponentButton = document.getElementById('copy-component')
 const clearComponentButton = document.getElementById('clear-component')
@@ -18,6 +20,7 @@ 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 typeDiagnostics = document.getElementById('type-diagnostics')
 const cdnLoading = document.getElementById('cdn-loading')
 const previewBgColorInput = document.getElementById('preview-bg-color')
 const clearConfirmDialog = document.getElementById('clear-confirm-dialog')
@@ -39,6 +42,7 @@ let sassCompiler = null
 let lessCompiler = null
 let lightningCssWasm = null
 let coreRuntime = null
+let typeScriptCompiler = null
 let compiledStylesCache = {
   key: null,
   value: null,
@@ -47,6 +51,8 @@ let pendingClearAction = null
 let hasCompletedInitialRender = false
 let previewBackgroundColor = null
 let previewBackgroundCustomized = false
+let typeCheckRunId = 0
+let lastTypeErrorCount = 0
 const clipboardSupported = Boolean(navigator.clipboard?.writeText)
 const appGridLayoutStorageKey = 'knighted-develop:app-grid-layout'
 const appThemeStorageKey = 'knighted-develop:theme'
@@ -81,7 +87,10 @@ const initializeCodeEditors = async () => {
         parent: jsxHost,
         value: defaultJsx,
         language: 'javascript-jsx',
-        onChange: maybeRender,
+        onChange: () => {
+          maybeRender()
+          markTypeDiagnosticsStale()
+        },
       }),
       createCodeMirrorEditor({
         parent: cssHost,
@@ -148,6 +157,246 @@ const setStatus = text => {
   statusNode.textContent = text
 }
 
+const updateTypecheckButtonState = () => {
+  if (!typecheckButton) {
+    return
+  }
+
+  const enabled = Boolean(typecheckToggle?.checked)
+  typecheckButton.hidden = !enabled
+  typecheckButton.disabled = !enabled
+}
+
+const setTypeDiagnostics = (text, level = 'muted') => {
+  if (!typeDiagnostics) {
+    return
+  }
+
+  typeDiagnostics.classList.remove(
+    'panel-footer--muted',
+    'panel-footer--ok',
+    'panel-footer--error',
+  )
+
+  if (!text) {
+    typeDiagnostics.hidden = true
+    typeDiagnostics.textContent = ''
+    return
+  }
+
+  typeDiagnostics.hidden = false
+  typeDiagnostics.textContent = text
+
+  if (level === 'ok') {
+    typeDiagnostics.classList.add('panel-footer--ok')
+    return
+  }
+
+  if (level === 'error') {
+    typeDiagnostics.classList.add('panel-footer--error')
+    return
+  }
+
+  typeDiagnostics.classList.add('panel-footer--muted')
+}
+
+const setRenderedStatus = () => {
+  if (lastTypeErrorCount > 0) {
+    setStatus(`Rendered (Type errors: ${lastTypeErrorCount})`)
+    return
+  }
+
+  if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
+    setStatus('Rendered')
+  }
+}
+
+const flattenTypeDiagnosticMessage = (compiler, messageText) => {
+  if (typeof compiler.flattenDiagnosticMessageText === 'function') {
+    return compiler.flattenDiagnosticMessageText(messageText, '\n')
+  }
+
+  if (typeof messageText === 'string') {
+    return messageText
+  }
+
+  if (messageText && typeof messageText.messageText === 'string') {
+    return messageText.messageText
+  }
+
+  return 'Unknown TypeScript diagnostic'
+}
+
+const formatTypeDiagnostic = (compiler, diagnostic) => {
+  const message = flattenTypeDiagnosticMessage(compiler, diagnostic.messageText)
+
+  if (!diagnostic.file || typeof diagnostic.start !== 'number') {
+    return message
+  }
+
+  const position = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start)
+  return `L${position.line + 1}:${position.character + 1} ${message}`
+}
+
+const ensureTypeScriptCompiler = async () => {
+  if (typeScriptCompiler) {
+    return typeScriptCompiler
+  }
+
+  try {
+    const loaded = await importFromCdnWithFallback(cdnImports.typescript)
+    typeScriptCompiler = loaded.module.default ?? loaded.module
+
+    if (typeof typeScriptCompiler.transpileModule !== 'function') {
+      throw new Error(`transpileModule export was not found from ${loaded.url}`)
+    }
+
+    return typeScriptCompiler
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : 'Unknown TypeScript module loading failure'
+    throw new Error(
+      `Unable to load TypeScript diagnostics runtime from CDN: ${message}`,
+      {
+        cause: error,
+      },
+    )
+  }
+}
+
+const shouldIgnoreTypeDiagnostic = diagnostic => {
+  const ignoredCodes = new Set([2318, 6053])
+  return ignoredCodes.has(diagnostic.code)
+}
+
+const collectTypeDiagnostics = (compiler, sourceText) => {
+  const sourceFileName = 'component.tsx'
+  const jsxTypesFileName = 'knighted-jsx-runtime.d.ts'
+  const jsxTypes =
+    'declare namespace JSX {\n' +
+    '  interface Element {}\n' +
+    '  interface IntrinsicElements { [elemName: string]: any }\n' +
+    '}\n'
+
+  const files = new Map([
+    [sourceFileName, sourceText],
+    [jsxTypesFileName, jsxTypes],
+  ])
+
+  const options = {
+    jsx: compiler.JsxEmit?.Preserve,
+    target: compiler.ScriptTarget?.ES2022,
+    module: compiler.ModuleKind?.ESNext,
+    strict: true,
+    noEmit: true,
+    noLib: true,
+    skipLibCheck: true,
+  }
+
+  const host = {
+    fileExists: fileName => files.has(fileName),
+    readFile: fileName => files.get(fileName),
+    getSourceFile: (fileName, languageVersion) => {
+      const text = files.get(fileName)
+      if (typeof text !== 'string') {
+        return undefined
+      }
+
+      const scriptKind = fileName.endsWith('.tsx')
+        ? compiler.ScriptKind?.TSX
+        : compiler.ScriptKind?.TS
+
+      return compiler.createSourceFile(fileName, text, languageVersion, true, scriptKind)
+    },
+    getDefaultLibFileName: () => 'lib.d.ts',
+    writeFile: () => {},
+    getCurrentDirectory: () => '/',
+    getDirectories: () => [],
+    getCanonicalFileName: fileName => fileName,
+    useCaseSensitiveFileNames: () => true,
+    getNewLine: () => '\n',
+  }
+
+  const program = compiler.createProgram({
+    rootNames: [sourceFileName, jsxTypesFileName],
+    options,
+    host,
+  })
+
+  return compiler
+    .getPreEmitDiagnostics(program)
+    .filter(diagnostic => !shouldIgnoreTypeDiagnostic(diagnostic))
+}
+
+const runTypeDiagnostics = async runId => {
+  if (!typecheckToggle?.checked) {
+    return
+  }
+
+  setTypeDiagnostics('Type checking…', 'muted')
+
+  try {
+    const compiler = await ensureTypeScriptCompiler()
+    if (runId !== typeCheckRunId || !typecheckToggle.checked) {
+      return
+    }
+
+    const diagnostics = collectTypeDiagnostics(compiler, getJsxSource())
+    const errorCategory = compiler.DiagnosticCategory?.Error
+    const errors = diagnostics.filter(diagnostic => diagnostic.category === errorCategory)
+    lastTypeErrorCount = errors.length
+
+    if (errors.length === 0) {
+      setTypeDiagnostics('Type checking enabled. No TypeScript errors found.', 'ok')
+    } else {
+      const preview = errors
+        .slice(0, 3)
+        .map(diagnostic => formatTypeDiagnostic(compiler, diagnostic))
+      const remainder =
+        errors.length > preview.length
+          ? `\n...and ${errors.length - preview.length} more`
+          : ''
+
+      setTypeDiagnostics(
+        `TypeScript found ${errors.length} error${errors.length === 1 ? '' : 's'}:\n${preview.join('\n')}${remainder}`,
+        'error',
+      )
+    }
+
+    if (
+      statusNode.textContent === 'Rendered' ||
+      statusNode.textContent.startsWith('Rendered (Type errors:')
+    ) {
+      setRenderedStatus()
+    }
+  } catch (error) {
+    if (runId !== typeCheckRunId || !typecheckToggle?.checked) {
+      return
+    }
+
+    lastTypeErrorCount = 0
+    const message = error instanceof Error ? error.message : String(error)
+    setTypeDiagnostics(`Type diagnostics unavailable: ${message}`, 'error')
+
+    if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
+      setStatus('Rendered')
+    }
+  }
+}
+
+const markTypeDiagnosticsStale = () => {
+  if (!typecheckToggle?.checked) {
+    return
+  }
+
+  lastTypeErrorCount = 0
+  setTypeDiagnostics('Source changed. Click Check types to update diagnostics.', 'muted')
+
+  if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
+    setStatus('Rendered')
+  }
+}
+
 const appGridLayouts = ['default', 'preview-right', 'preview-left']
 
 const applyAppGridLayout = (layout, { persist = true } = {}) => {
@@ -253,6 +502,7 @@ const setCssSource = value => {
 const clearComponentSource = () => {
   setJsxSource('')
   setStatus('Component cleared')
+  markTypeDiagnosticsStale()
   if (!jsxCodeEditor) {
     maybeRender()
   }
@@ -927,6 +1177,9 @@ const renderPreview = async () => {
       await renderDom()
     }
     setStatus('Rendered')
+    if (typecheckToggle?.checked) {
+      setRenderedStatus()
+    }
   } catch (error) {
     setStatus('Error')
     const target = getRenderTarget()
@@ -967,6 +1220,35 @@ autoRenderToggle.addEventListener('change', () => {
     renderPreview()
   }
 })
+if (typecheckToggle) {
+  typecheckToggle.addEventListener('change', () => {
+    updateTypecheckButtonState()
+
+    if (typecheckToggle.checked) {
+      setTypeDiagnostics(
+        'Type checking enabled. Click Check types to run diagnostics.',
+        'muted',
+      )
+      return
+    }
+
+    lastTypeErrorCount = 0
+    setTypeDiagnostics('')
+    if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
+      setStatus('Rendered')
+    }
+  })
+}
+if (typecheckButton) {
+  typecheckButton.addEventListener('click', () => {
+    if (!typecheckToggle?.checked) {
+      return
+    }
+
+    typeCheckRunId += 1
+    void runTypeDiagnostics(typeCheckRunId)
+  })
+}
 renderButton.addEventListener('click', renderPreview)
 if (clipboardSupported) {
   copyComponentButton.addEventListener('click', () => {
@@ -1002,6 +1284,7 @@ clearStylesButton.addEventListener('click', () => {
   })
 })
 jsxEditor.addEventListener('input', maybeRender)
+jsxEditor.addEventListener('input', markTypeDiagnosticsStale)
 cssEditor.addEventListener('input', maybeRender)
 
 for (const button of appGridLayoutButtons) {
@@ -1027,7 +1310,13 @@ for (const button of appThemeButtons) {
 applyAppGridLayout(getInitialAppGridLayout(), { persist: false })
 applyTheme(getInitialTheme(), { persist: false })
 
+if (typecheckToggle) {
+  typecheckToggle.checked = false
+}
+
 updateRenderButtonVisibility()
+updateTypecheckButtonState()
+setTypeDiagnostics('')
 setStyleCompiling(false)
 setCdnLoading(true)
 initializePreviewBackgroundPicker()
diff --git a/src/cdn.js b/src/cdn.js
index 6c51575..8e2be4a 100644
--- a/src/cdn.js
+++ b/src/cdn.js
@@ -93,6 +93,11 @@ export const cdnImportSpecs = {
     esm: '@parcel/css-wasm',
     jspmGa: 'npm:@parcel/css-wasm',
   },
+  typescript: {
+    importMap: 'typescript',
+    esm: 'typescript@5.9.3/lib/typescript.js',
+    jspmGa: 'npm:typescript@5.9.3/lib/typescript.js',
+  },
   codemirrorState: {
     importMap: '@codemirror/state',
     esm: '@codemirror/state',
diff --git a/src/index.html b/src/index.html
index 8e72a39..0de5ca5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -143,13 +143,30 @@ <h2>Component</h2>
           </div>
           <div class="panel-header-main-actions">
             <div class="controls controls--actions">
-              <button class="render-button" id="render-button" type="button">
-                Render
-              </button>
-              <label class="toggle">
-                <input id="auto-render" type="checkbox" checked />
-                Auto render
-              </label>
+              <div class="control-stack">
+                <label class="toggle">
+                  <input id="auto-render" type="checkbox" checked />
+                  Auto render
+                </label>
+                <button class="render-button" id="render-button" type="button">
+                  Render
+                </button>
+              </div>
+              <div class="control-stack">
+                <label class="toggle">
+                  <input id="typecheck-enabled" type="checkbox" />
+                  Type check
+                </label>
+                <button
+                  class="render-button"
+                  id="typecheck-button"
+                  type="button"
+                  disabled
+                  hidden
+                >
+                  Typecheck
+                </button>
+              </div>
               <label>
                 <span class="sr-only">Render mode</span>
                 <select id="render-mode">
@@ -161,6 +178,7 @@ <h2>Component</h2>
           </div>
         </div>
         <textarea id="jsx-editor" spellcheck="false"></textarea>
+        <div class="panel-footer panel-footer--muted" id="type-diagnostics" hidden></div>
       </section>
 
       <section class="panel styles-panel">
diff --git a/src/styles.css b/src/styles.css
index ed49abd..a902304 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -422,6 +422,17 @@ body {
   justify-content: flex-start;
 }
 
+.panel-header-main-actions .controls--actions:has(.render-button:not([hidden])) {
+  align-items: flex-start;
+}
+
+.control-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
 .controls--quick-actions {
   gap: 10px;
 }
@@ -509,6 +520,22 @@ textarea:focus {
   color: var(--warning);
 }
 
+.panel-footer--muted {
+  color: var(--text-muted);
+}
+
+.panel-footer--ok {
+  color: color-mix(in srgb, var(--panel-text) 70%, #4ade80);
+}
+
+.panel-footer--error {
+  color: rgb(var(--danger-rgb));
+}
+
+#type-diagnostics {
+  white-space: pre-line;
+}
+
 .preview-host {
   --preview-host-display: block;
   --preview-host-flex: 1 1 auto;

From 64f6103c40622edb6782546a9b5fc2ac7a8bc18b Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Mon, 16 Mar 2026 18:52:25 -0500
Subject: [PATCH 3/4] refactor: better diagnostics reporting.

---
 docs/next-steps.md     |   6 +
 playwright/app.spec.ts |  60 ++++-
 src/app.js             | 518 +++++++++++++++++++++++++++++++++--------
 src/cdn.js             |  20 ++
 src/index.html         |  81 +++++--
 src/styles.css         | 182 +++++++++++++--
 6 files changed, 733 insertions(+), 134 deletions(-)

diff --git a/docs/next-steps.md b/docs/next-steps.md
index 10b0683..2a86ced 100644
--- a/docs/next-steps.md
+++ b/docs/next-steps.md
@@ -21,3 +21,9 @@ 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. **App runtime modularization**
+   - Plan a refactor that splits `src/app.js` into scoped modules organized by functionality (for example: diagnostics, render pipeline, editor integration, UI controls, and persistence).
+   - Preserve `src/app.js` as the main runtime orchestration entrypoint while moving implementation details into focused modules.
+   - Split stylesheet concerns into focused files (for example: layout/shell, panel controls, diagnostics, editor overrides, dialogs/overlays) while keeping `src/styles.css` as the single entrypoint via ordered `@import` directives.
+   - Define clear module boundaries and shared interfaces so behavior stays stable while maintainability and readability improve.
diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 52392d5..e988fb3 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -70,7 +70,9 @@ test('transpiles TypeScript annotations in component source', async ({ page }) =
   await expect(page.locator('#preview-host button')).toContainText('typed')
 })
 
-test('shows error status when component source is cleared', async ({ page }) => {
+test('clearing component source reports clear action without error status', async ({
+  page,
+}) => {
   await waitForInitialRender(page)
 
   const dialog = page.locator('#clear-confirm-dialog')
@@ -78,9 +80,27 @@ test('shows error status when component source is cleared', async ({ page }) =>
   await expect(dialog).toHaveAttribute('open', '')
   await dialog.getByRole('button', { name: 'Clear' }).click()
 
+  await expect(page.locator('#status')).toHaveText('Component cleared')
+  await expect(page.locator('#status')).toHaveClass(/status--neutral/)
+  await expect(page.locator('#preview-host pre')).toHaveCount(0)
+})
+
+test('jsx syntax errors affect status but not diagnostics toggle severity', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(
+    page,
+    ['const App = () => <button', 'const value = 1'].join('\n'),
+  )
+
   await expect(page.locator('#status')).toHaveText('Error')
-  await expect(page.locator('#preview-host pre')).toContainText(
-    'Expected a render() function or a component named App/View.',
+  await expect(page.locator('#status')).toHaveClass(/status--error/)
+  await expect(page.locator('#preview-host pre')).toContainText('[jsx]')
+  await expect(page.locator('#diagnostics-toggle')).toHaveText('Diagnostics')
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--neutral/,
   )
 })
 
@@ -186,3 +206,37 @@ test('clear styles action opens confirm dialog and clears on confirm', async ({
   await expect(cssEditor).toHaveValue('')
   await expect(page.locator('#status')).toHaveText('Styles cleared')
 })
+
+test('clearing styles keeps diagnostics error state but resets status styling', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await setComponentEditorSource(
+    page,
+    ["const count: number = 'oops'", 'const App = () => <button>ready</button>'].join(
+      '\n',
+    ),
+  )
+
+  await page.getByRole('button', { name: 'Typecheck' }).click()
+
+  await expect(page.locator('#status')).toHaveText(/Rendered \(Type errors: [1-9]\d*\)/)
+  await expect(page.locator('#status')).toHaveClass(/status--error/)
+  await expect(page.locator('#diagnostics-toggle')).toHaveText(/Diagnostics \([1-9]\d*\)/)
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+
+  const dialog = page.locator('#clear-confirm-dialog')
+  await page.getByLabel('Clear styles source').click()
+  await expect(dialog).toHaveAttribute('open', '')
+  await dialog.getByRole('button', { name: 'Clear' }).click()
+
+  await expect(page.locator('#status')).toHaveText('Styles cleared')
+  await expect(page.locator('#status')).toHaveClass(/status--neutral/)
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+  await expect(page.locator('#diagnostics-toggle')).toHaveText(/Diagnostics \([1-9]\d*\)/)
+})
diff --git a/src/app.js b/src/app.js
index e82165c..173144d 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,4 +1,4 @@
-import { cdnImports, importFromCdnWithFallback } from './cdn.js'
+import { cdnImports, getTypeScriptLibUrls, importFromCdnWithFallback } from './cdn.js'
 import { createCodeMirrorEditor } from './editor-codemirror.js'
 import { defaultCss, defaultJsx } from './defaults.js'
 
@@ -8,7 +8,6 @@ const appGridLayoutButtons = document.querySelectorAll('[data-app-grid-layout]')
 const appThemeButtons = document.querySelectorAll('[data-app-theme]')
 const renderMode = document.getElementById('render-mode')
 const autoRenderToggle = document.getElementById('auto-render')
-const typecheckToggle = document.getElementById('typecheck-enabled')
 const typecheckButton = document.getElementById('typecheck-button')
 const renderButton = document.getElementById('render-button')
 const copyComponentButton = document.getElementById('copy-component')
@@ -20,7 +19,13 @@ 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 typeDiagnostics = document.getElementById('type-diagnostics')
+const diagnosticsToggle = document.getElementById('diagnostics-toggle')
+const diagnosticsDrawer = document.getElementById('diagnostics-drawer')
+const diagnosticsClose = document.getElementById('diagnostics-close')
+const diagnosticsClearComponent = document.getElementById('diagnostics-clear-component')
+const diagnosticsClearAll = document.getElementById('diagnostics-clear-all')
+const diagnosticsComponent = document.getElementById('diagnostics-component')
+const diagnosticsStyles = document.getElementById('diagnostics-styles')
 const cdnLoading = document.getElementById('cdn-loading')
 const previewBgColorInput = document.getElementById('preview-bg-color')
 const clearConfirmDialog = document.getElementById('clear-confirm-dialog')
@@ -43,6 +48,7 @@ let lessCompiler = null
 let lightningCssWasm = null
 let coreRuntime = null
 let typeScriptCompiler = null
+let typeScriptLibFiles = null
 let compiledStylesCache = {
   key: null,
   value: null,
@@ -53,9 +59,16 @@ let previewBackgroundColor = null
 let previewBackgroundCustomized = false
 let typeCheckRunId = 0
 let lastTypeErrorCount = 0
+let hasUnresolvedTypeErrors = false
+let scheduledTypeRecheck = null
+let activeTypeDiagnosticsRuns = 0
+let diagnosticsDrawerOpen = false
+let suppressEditorChangeSideEffects = false
+let statusLevel = 'neutral'
 const clipboardSupported = Boolean(navigator.clipboard?.writeText)
 const appGridLayoutStorageKey = 'knighted-develop:app-grid-layout'
 const appThemeStorageKey = 'knighted-develop:theme'
+const defaultTypeScriptLibFileName = 'lib.esnext.full.d.ts'
 
 const styleLabels = {
   css: 'Native CSS',
@@ -88,6 +101,9 @@ const initializeCodeEditors = async () => {
         value: defaultJsx,
         language: 'javascript-jsx',
         onChange: () => {
+          if (suppressEditorChangeSideEffects) {
+            return
+          }
           maybeRender()
           markTypeDiagnosticsStale()
         },
@@ -96,7 +112,12 @@ const initializeCodeEditors = async () => {
         parent: cssHost,
         value: defaultCss,
         language: getStyleEditorLanguage(styleMode.value),
-        onChange: maybeRender,
+        onChange: () => {
+          if (suppressEditorChangeSideEffects) {
+            return
+          }
+          maybeRender()
+        },
       }),
     ])
 
@@ -153,51 +174,231 @@ const ensureCoreRuntime = async () => {
   }
 }
 
-const setStatus = text => {
+const inferStatusLevel = text => {
+  if (text === 'Rendering…' || text === 'Loading CDN assets…') {
+    return 'pending'
+  }
+
+  if (
+    text === 'Error' ||
+    text === 'Copy failed' ||
+    text.startsWith('Rendered (Type errors:')
+  ) {
+    return 'error'
+  }
+
+  return 'neutral'
+}
+
+const setStatus = (text, level = inferStatusLevel(text)) => {
   statusNode.textContent = text
+  statusLevel = level
+  updateUiIssueIndicators()
 }
 
-const updateTypecheckButtonState = () => {
-  if (!typecheckButton) {
+const getDiagnosticsErrorCount = () => {
+  const componentErrors =
+    diagnosticsByScope.component.level === 'error'
+      ? diagnosticsByScope.component.lines.length
+      : 0
+  const styleErrors =
+    diagnosticsByScope.styles.level === 'error'
+      ? diagnosticsByScope.styles.lines.length
+      : 0
+  return componentErrors + styleErrors
+}
+
+const getDiagnosticsIssueLevel = () => {
+  if (getDiagnosticsErrorCount() > 0) {
+    return 'error'
+  }
+
+  if (activeTypeDiagnosticsRuns > 0) {
+    return 'pending'
+  }
+
+  return 'neutral'
+}
+
+const updateUiIssueIndicators = () => {
+  const diagnosticsLevel = getDiagnosticsIssueLevel()
+
+  statusNode.classList.remove('status--neutral', 'status--pending', 'status--error')
+  statusNode.classList.add(`status--${statusLevel}`)
+
+  if (diagnosticsToggle) {
+    diagnosticsToggle.classList.remove(
+      'diagnostics-toggle--neutral',
+      'diagnostics-toggle--pending',
+      'diagnostics-toggle--error',
+    )
+    diagnosticsToggle.classList.add(`diagnostics-toggle--${diagnosticsLevel}`)
+  }
+}
+
+const diagnosticsByScope = {
+  component: {
+    headline: '',
+    lines: [],
+    level: 'muted',
+  },
+  styles: {
+    headline: '',
+    lines: [],
+    level: 'muted',
+  },
+}
+
+const getDiagnosticsScopeNode = scope => {
+  if (scope === 'component') {
+    return diagnosticsComponent
+  }
+
+  if (scope === 'styles') {
+    return diagnosticsStyles
+  }
+
+  return null
+}
+
+const renderDiagnosticsScope = scope => {
+  const root = getDiagnosticsScopeNode(scope)
+  const state = diagnosticsByScope[scope]
+  if (!root || !state) {
+    return
+  }
+
+  root.classList.remove('panel-footer--muted', 'panel-footer--ok', 'panel-footer--error')
+  root.replaceChildren()
+
+  const hasHeadline = typeof state.headline === 'string' && state.headline.length > 0
+  const hasLines = Array.isArray(state.lines) && state.lines.length > 0
+
+  if (!hasHeadline && !hasLines) {
+    const emptyNode = document.createElement('div')
+    emptyNode.className = 'diagnostics-empty'
+    emptyNode.textContent = 'No diagnostics yet.'
+    root.append(emptyNode)
+    root.classList.add('panel-footer--muted')
     return
   }
 
-  const enabled = Boolean(typecheckToggle?.checked)
-  typecheckButton.hidden = !enabled
-  typecheckButton.disabled = !enabled
+  if (hasHeadline) {
+    const headingNode = document.createElement('div')
+    headingNode.className = 'type-diagnostics-heading'
+    headingNode.textContent = state.headline
+    root.append(headingNode)
+  }
+
+  if (hasLines) {
+    const listNode = document.createElement('ol')
+    listNode.className = 'type-diagnostics-list'
+    for (const line of state.lines) {
+      const itemNode = document.createElement('li')
+      itemNode.textContent = line
+      listNode.append(itemNode)
+    }
+    root.append(listNode)
+  }
+
+  if (state.level === 'ok') {
+    root.classList.add('panel-footer--ok')
+    return
+  }
+
+  if (state.level === 'error') {
+    root.classList.add('panel-footer--error')
+    return
+  }
+
+  root.classList.add('panel-footer--muted')
 }
 
-const setTypeDiagnostics = (text, level = 'muted') => {
-  if (!typeDiagnostics) {
+const updateDiagnosticsToggleLabel = () => {
+  if (!diagnosticsToggle) {
     return
   }
 
-  typeDiagnostics.classList.remove(
-    'panel-footer--muted',
-    'panel-footer--ok',
-    'panel-footer--error',
-  )
+  const totalErrors = getDiagnosticsErrorCount()
+  diagnosticsToggle.textContent =
+    totalErrors > 0 ? `Diagnostics (${totalErrors})` : 'Diagnostics'
+}
 
-  if (!text) {
-    typeDiagnostics.hidden = true
-    typeDiagnostics.textContent = ''
+const setDiagnosticsDrawerOpen = isOpen => {
+  diagnosticsDrawerOpen = Boolean(isOpen)
+
+  if (diagnosticsDrawer) {
+    diagnosticsDrawer.hidden = !diagnosticsDrawerOpen
+  }
+
+  if (diagnosticsToggle) {
+    diagnosticsToggle.setAttribute(
+      'aria-expanded',
+      diagnosticsDrawerOpen ? 'true' : 'false',
+    )
+  }
+}
+
+const setDiagnosticsScope = (scope, { headline = '', lines = [], level = 'muted' }) => {
+  if (!diagnosticsByScope[scope]) {
+    return
+  }
+
+  diagnosticsByScope[scope] = {
+    headline,
+    lines,
+    level,
+  }
+
+  renderDiagnosticsScope(scope)
+  updateDiagnosticsToggleLabel()
+  updateUiIssueIndicators()
+}
+
+const clearDiagnosticsScope = scope => {
+  setDiagnosticsScope(scope, { headline: '', lines: [], level: 'muted' })
+}
+
+const clearAllDiagnostics = () => {
+  clearDiagnosticsScope('component')
+  clearDiagnosticsScope('styles')
+}
+
+const setTypeDiagnosticsDetails = ({ headline, lines = [], level = 'muted' }) => {
+  setDiagnosticsScope('component', { headline, lines, level })
+}
+
+const setTypecheckButtonLoading = isLoading => {
+  if (!typecheckButton) {
     return
   }
 
-  typeDiagnostics.hidden = false
-  typeDiagnostics.textContent = text
+  typecheckButton.classList.toggle('render-button--loading', isLoading)
+  typecheckButton.setAttribute('aria-busy', isLoading ? 'true' : 'false')
+  typecheckButton.disabled = isLoading
+}
 
-  if (level === 'ok') {
-    typeDiagnostics.classList.add('panel-footer--ok')
+const clearTypeRecheckTimer = () => {
+  if (!scheduledTypeRecheck) {
     return
   }
 
-  if (level === 'error') {
-    typeDiagnostics.classList.add('panel-footer--error')
+  clearTimeout(scheduledTypeRecheck)
+  scheduledTypeRecheck = null
+}
+
+const scheduleTypeRecheck = () => {
+  clearTypeRecheckTimer()
+
+  if (!hasUnresolvedTypeErrors) {
     return
   }
 
-  typeDiagnostics.classList.add('panel-footer--muted')
+  scheduledTypeRecheck = setTimeout(() => {
+    scheduledTypeRecheck = null
+    typeCheckRunId += 1
+    void runTypeDiagnostics(typeCheckRunId)
+  }, 450)
 }
 
 const setRenderedStatus = () => {
@@ -231,11 +432,11 @@ const formatTypeDiagnostic = (compiler, diagnostic) => {
   const message = flattenTypeDiagnosticMessage(compiler, diagnostic.messageText)
 
   if (!diagnostic.file || typeof diagnostic.start !== 'number') {
-    return message
+    return `TS${diagnostic.code}: ${message}`
   }
 
   const position = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start)
-  return `L${position.line + 1}:${position.character + 1} ${message}`
+  return `L${position.line + 1}:${position.character + 1} TS${diagnostic.code}: ${message}`
 }
 
 const ensureTypeScriptCompiler = async () => {
@@ -269,18 +470,103 @@ const shouldIgnoreTypeDiagnostic = diagnostic => {
   return ignoredCodes.has(diagnostic.code)
 }
 
-const collectTypeDiagnostics = (compiler, sourceText) => {
+const normalizeVirtualFileName = fileName =>
+  typeof fileName === 'string' && fileName.startsWith('/') ? fileName.slice(1) : fileName
+
+const fetchTypeScriptLibText = async fileName => {
+  const attempts = getTypeScriptLibUrls(fileName).map(async url => {
+    const response = await fetch(url)
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status} from ${url}`)
+    }
+
+    return response.text()
+  })
+
+  try {
+    return await Promise.any(attempts)
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    throw new Error(`Unable to fetch TypeScript lib file ${fileName}: ${message}`, {
+      cause: error,
+    })
+  }
+}
+
+const parseTypeScriptLibReferences = sourceText => {
+  const references = new Set()
+  const libReferencePattern = /\/\/\/\s*<reference\s+lib="([^"]+)"\s*\/>/g
+  const pathReferencePattern = /\/\/\/\s*<reference\s+path="([^"]+)"\s*\/>/g
+
+  for (const match of sourceText.matchAll(libReferencePattern)) {
+    const libName = match[1]?.trim()
+    if (libName) {
+      references.add(`lib.${libName}.d.ts`)
+    }
+  }
+
+  for (const match of sourceText.matchAll(pathReferencePattern)) {
+    const pathName = match[1]?.trim()
+    if (pathName) {
+      references.add(pathName.replace(/^\.\//, ''))
+    }
+  }
+
+  return [...references]
+}
+
+const hydrateTypeScriptLibFiles = async (pendingFileNames, loaded) => {
+  const batch = [...new Set(pendingFileNames.map(normalizeVirtualFileName))].filter(
+    fileName =>
+      typeof fileName === 'string' && fileName.length > 0 && !loaded.has(fileName),
+  )
+
+  if (batch.length === 0) {
+    return
+  }
+
+  const discoveredReferences = await Promise.all(
+    batch.map(async fileName => {
+      const sourceText = await fetchTypeScriptLibText(fileName)
+      loaded.set(fileName, sourceText)
+      return parseTypeScriptLibReferences(sourceText).map(normalizeVirtualFileName)
+    }),
+  )
+
+  await hydrateTypeScriptLibFiles(discoveredReferences.flat(), loaded)
+}
+
+const ensureTypeScriptLibFiles = async () => {
+  if (typeScriptLibFiles) {
+    return typeScriptLibFiles
+  }
+
+  const loaded = new Map()
+  await hydrateTypeScriptLibFiles([defaultTypeScriptLibFileName], loaded)
+  typeScriptLibFiles = loaded
+  return typeScriptLibFiles
+}
+
+const collectTypeDiagnostics = async (compiler, sourceText) => {
   const sourceFileName = 'component.tsx'
   const jsxTypesFileName = 'knighted-jsx-runtime.d.ts'
+  const libFiles = await ensureTypeScriptLibFiles()
   const jsxTypes =
+    'declare namespace React {\n' +
+    '  type Key = string | number\n' +
+    '  interface Attributes { key?: Key | null }\n' +
+    '}\n' +
     'declare namespace JSX {\n' +
-    '  interface Element {}\n' +
-    '  interface IntrinsicElements { [elemName: string]: any }\n' +
+    '  type Element = unknown\n' +
+    '  interface ElementChildrenAttribute { children: unknown }\n' +
+    '  interface IntrinsicAttributes extends React.Attributes {}\n' +
+    '  interface IntrinsicElements { [elemName: string]: Record<string, unknown> }\n' +
     '}\n'
 
   const files = new Map([
     [sourceFileName, sourceText],
     [jsxTypesFileName, jsxTypes],
+    ...libFiles.entries(),
   ])
 
   const options = {
@@ -289,30 +575,38 @@ const collectTypeDiagnostics = (compiler, sourceText) => {
     module: compiler.ModuleKind?.ESNext,
     strict: true,
     noEmit: true,
-    noLib: true,
     skipLibCheck: true,
   }
 
   const host = {
-    fileExists: fileName => files.has(fileName),
-    readFile: fileName => files.get(fileName),
+    fileExists: fileName => files.has(normalizeVirtualFileName(fileName)),
+    readFile: fileName => files.get(normalizeVirtualFileName(fileName)),
     getSourceFile: (fileName, languageVersion) => {
-      const text = files.get(fileName)
+      const normalizedFileName = normalizeVirtualFileName(fileName)
+      const text = files.get(normalizedFileName)
       if (typeof text !== 'string') {
         return undefined
       }
 
-      const scriptKind = fileName.endsWith('.tsx')
+      const scriptKind = normalizedFileName.endsWith('.tsx')
         ? compiler.ScriptKind?.TSX
-        : compiler.ScriptKind?.TS
-
-      return compiler.createSourceFile(fileName, text, languageVersion, true, scriptKind)
+        : normalizedFileName.endsWith('.d.ts')
+          ? compiler.ScriptKind?.TS
+          : compiler.ScriptKind?.TS
+
+      return compiler.createSourceFile(
+        normalizedFileName,
+        text,
+        languageVersion,
+        true,
+        scriptKind,
+      )
     },
-    getDefaultLibFileName: () => 'lib.d.ts',
+    getDefaultLibFileName: () => defaultTypeScriptLibFileName,
     writeFile: () => {},
     getCurrentDirectory: () => '/',
     getDirectories: () => [],
-    getCanonicalFileName: fileName => fileName,
+    getCanonicalFileName: fileName => normalizeVirtualFileName(fileName),
     useCaseSensitiveFileNames: () => true,
     getNewLine: () => '\n',
   }
@@ -329,38 +623,38 @@ const collectTypeDiagnostics = (compiler, sourceText) => {
 }
 
 const runTypeDiagnostics = async runId => {
-  if (!typecheckToggle?.checked) {
-    return
-  }
+  activeTypeDiagnosticsRuns += 1
+  setTypecheckButtonLoading(true)
 
-  setTypeDiagnostics('Type checking…', 'muted')
+  setTypeDiagnosticsDetails({
+    headline: 'Type checking…',
+    level: 'muted',
+  })
 
   try {
     const compiler = await ensureTypeScriptCompiler()
-    if (runId !== typeCheckRunId || !typecheckToggle.checked) {
+    if (runId !== typeCheckRunId) {
       return
     }
 
-    const diagnostics = collectTypeDiagnostics(compiler, getJsxSource())
+    const diagnostics = await collectTypeDiagnostics(compiler, getJsxSource())
     const errorCategory = compiler.DiagnosticCategory?.Error
     const errors = diagnostics.filter(diagnostic => diagnostic.category === errorCategory)
     lastTypeErrorCount = errors.length
+    hasUnresolvedTypeErrors = errors.length > 0
+    clearTypeRecheckTimer()
 
     if (errors.length === 0) {
-      setTypeDiagnostics('Type checking enabled. No TypeScript errors found.', 'ok')
+      setTypeDiagnosticsDetails({
+        headline: 'No TypeScript errors found.',
+        level: 'ok',
+      })
     } else {
-      const preview = errors
-        .slice(0, 3)
-        .map(diagnostic => formatTypeDiagnostic(compiler, diagnostic))
-      const remainder =
-        errors.length > preview.length
-          ? `\n...and ${errors.length - preview.length} more`
-          : ''
-
-      setTypeDiagnostics(
-        `TypeScript found ${errors.length} error${errors.length === 1 ? '' : 's'}:\n${preview.join('\n')}${remainder}`,
-        'error',
-      )
+      setTypeDiagnosticsDetails({
+        headline: `TypeScript found ${errors.length} error${errors.length === 1 ? '' : 's'}:`,
+        lines: errors.map(diagnostic => formatTypeDiagnostic(compiler, diagnostic)),
+        level: 'error',
+      })
     }
 
     if (
@@ -370,27 +664,43 @@ const runTypeDiagnostics = async runId => {
       setRenderedStatus()
     }
   } catch (error) {
-    if (runId !== typeCheckRunId || !typecheckToggle?.checked) {
+    if (runId !== typeCheckRunId) {
       return
     }
 
     lastTypeErrorCount = 0
+    hasUnresolvedTypeErrors = false
+    clearTypeRecheckTimer()
     const message = error instanceof Error ? error.message : String(error)
-    setTypeDiagnostics(`Type diagnostics unavailable: ${message}`, 'error')
+    setTypeDiagnosticsDetails({
+      headline: `Type diagnostics unavailable: ${message}`,
+      level: 'error',
+    })
 
     if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
       setStatus('Rendered')
     }
+  } finally {
+    activeTypeDiagnosticsRuns = Math.max(0, activeTypeDiagnosticsRuns - 1)
+    setTypecheckButtonLoading(activeTypeDiagnosticsRuns > 0)
   }
 }
 
 const markTypeDiagnosticsStale = () => {
-  if (!typecheckToggle?.checked) {
+  if (hasUnresolvedTypeErrors) {
+    setTypeDiagnosticsDetails({
+      headline: 'Source changed. Re-checking type errors…',
+      level: 'muted',
+    })
+    scheduleTypeRecheck()
     return
   }
 
   lastTypeErrorCount = 0
-  setTypeDiagnostics('Source changed. Click Check types to update diagnostics.', 'muted')
+  setTypeDiagnosticsDetails({
+    headline: 'Source changed. Click Typecheck to run diagnostics.',
+    level: 'muted',
+  })
 
   if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
     setStatus('Rendered')
@@ -487,22 +797,36 @@ const debounceRender = () => {
 
 const setJsxSource = value => {
   if (jsxCodeEditor) {
-    jsxCodeEditor.setValue(value)
+    suppressEditorChangeSideEffects = true
+    try {
+      jsxCodeEditor.setValue(value)
+    } finally {
+      suppressEditorChangeSideEffects = false
+    }
   }
   jsxEditor.value = value
 }
 
 const setCssSource = value => {
   if (cssCodeEditor) {
-    cssCodeEditor.setValue(value)
+    suppressEditorChangeSideEffects = true
+    try {
+      cssCodeEditor.setValue(value)
+    } finally {
+      suppressEditorChangeSideEffects = false
+    }
   }
   cssEditor.value = value
 }
 
 const clearComponentSource = () => {
   setJsxSource('')
+  clearDiagnosticsScope('component')
+  lastTypeErrorCount = 0
+  hasUnresolvedTypeErrors = false
+  clearTypeRecheckTimer()
   setStatus('Component cleared')
-  markTypeDiagnosticsStale()
+
   if (!jsxCodeEditor) {
     maybeRender()
   }
@@ -510,6 +834,7 @@ const clearComponentSource = () => {
 
 const clearStylesSource = () => {
   setCssSource('')
+  clearDiagnosticsScope('styles')
   setStatus('Styles cleared')
   if (!cssCodeEditor) {
     maybeRender()
@@ -1177,9 +1502,7 @@ const renderPreview = async () => {
       await renderDom()
     }
     setStatus('Rendered')
-    if (typecheckToggle?.checked) {
-      setRenderedStatus()
-    }
+    setRenderedStatus()
   } catch (error) {
     setStatus('Error')
     const target = getRenderTarget()
@@ -1220,20 +1543,33 @@ autoRenderToggle.addEventListener('change', () => {
     renderPreview()
   }
 })
-if (typecheckToggle) {
-  typecheckToggle.addEventListener('change', () => {
-    updateTypecheckButtonState()
-
-    if (typecheckToggle.checked) {
-      setTypeDiagnostics(
-        'Type checking enabled. Click Check types to run diagnostics.',
-        'muted',
-      )
-      return
+if (diagnosticsToggle) {
+  diagnosticsToggle.addEventListener('click', () => {
+    setDiagnosticsDrawerOpen(!diagnosticsDrawerOpen)
+  })
+}
+if (diagnosticsClose) {
+  diagnosticsClose.addEventListener('click', () => {
+    setDiagnosticsDrawerOpen(false)
+  })
+}
+if (diagnosticsClearComponent) {
+  diagnosticsClearComponent.addEventListener('click', () => {
+    clearDiagnosticsScope('component')
+    lastTypeErrorCount = 0
+    hasUnresolvedTypeErrors = false
+    clearTypeRecheckTimer()
+    if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
+      setStatus('Rendered')
     }
-
+  })
+}
+if (diagnosticsClearAll) {
+  diagnosticsClearAll.addEventListener('click', () => {
+    clearAllDiagnostics()
     lastTypeErrorCount = 0
-    setTypeDiagnostics('')
+    hasUnresolvedTypeErrors = false
+    clearTypeRecheckTimer()
     if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
       setStatus('Rendered')
     }
@@ -1241,10 +1577,6 @@ if (typecheckToggle) {
 }
 if (typecheckButton) {
   typecheckButton.addEventListener('click', () => {
-    if (!typecheckToggle?.checked) {
-      return
-    }
-
     typeCheckRunId += 1
     void runTypeDiagnostics(typeCheckRunId)
   })
@@ -1310,13 +1642,13 @@ for (const button of appThemeButtons) {
 applyAppGridLayout(getInitialAppGridLayout(), { persist: false })
 applyTheme(getInitialTheme(), { persist: false })
 
-if (typecheckToggle) {
-  typecheckToggle.checked = false
-}
-
 updateRenderButtonVisibility()
-updateTypecheckButtonState()
-setTypeDiagnostics('')
+renderDiagnosticsScope('component')
+renderDiagnosticsScope('styles')
+updateDiagnosticsToggleLabel()
+updateUiIssueIndicators()
+setDiagnosticsDrawerOpen(false)
+setTypeDiagnosticsDetails({ headline: '' })
 setStyleCompiling(false)
 setCdnLoading(true)
 initializePreviewBackgroundPicker()
diff --git a/src/cdn.js b/src/cdn.js
index 8e2be4a..0516e18 100644
--- a/src/cdn.js
+++ b/src/cdn.js
@@ -226,3 +226,23 @@ const importFromCdnCandidateAt = async (importCandidates, index, firstError = nu
 
 export const importFromCdnWithFallback = importCandidates =>
   importFromCdnCandidateAt(importCandidates, 0)
+
+const typeScriptVersion = '5.9.3'
+const typeScriptLibBaseByProvider = {
+  esm: `https://esm.sh/typescript@${typeScriptVersion}/lib`,
+  unpkg: `https://unpkg.com/typescript@${typeScriptVersion}/lib`,
+}
+
+const typeScriptLibStableFallbackBase = `https://cdn.jsdelivr.net/npm/typescript@${typeScriptVersion}/lib`
+
+export const getTypeScriptLibUrls = fileName => {
+  const providerOrderedBases = getProviderPriority()
+    .map(provider => typeScriptLibBaseByProvider[provider])
+    .filter(Boolean)
+
+  if (!providerOrderedBases.includes(typeScriptLibStableFallbackBase)) {
+    providerOrderedBases.push(typeScriptLibStableFallbackBase)
+  }
+
+  return providerOrderedBases.map(baseUrl => `${baseUrl}/${fileName}`)
+}
diff --git a/src/index.html b/src/index.html
index 0de5ca5..1161873 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,6 +25,18 @@ <h1>
 
     <main class="app-grid">
       <div class="app-grid-layout-controls" role="group" aria-label="App grid layout">
+        <div class="app-grid-diagnostics-controls" role="group" aria-label="Diagnostics">
+          <button
+            class="diagnostics-toggle"
+            id="diagnostics-toggle"
+            type="button"
+            aria-expanded="false"
+            aria-controls="diagnostics-drawer"
+          >
+            Diagnostics
+          </button>
+        </div>
+
         <button
           class="layout-toggle"
           id="layout-default"
@@ -143,30 +155,16 @@ <h2>Component</h2>
           </div>
           <div class="panel-header-main-actions">
             <div class="controls controls--actions">
-              <div class="control-stack">
-                <label class="toggle">
-                  <input id="auto-render" type="checkbox" checked />
-                  Auto render
-                </label>
-                <button class="render-button" id="render-button" type="button">
-                  Render
-                </button>
-              </div>
-              <div class="control-stack">
-                <label class="toggle">
-                  <input id="typecheck-enabled" type="checkbox" />
-                  Type check
-                </label>
-                <button
-                  class="render-button"
-                  id="typecheck-button"
-                  type="button"
-                  disabled
-                  hidden
-                >
-                  Typecheck
-                </button>
-              </div>
+              <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">
@@ -178,7 +176,6 @@ <h2>Component</h2>
           </div>
         </div>
         <textarea id="jsx-editor" spellcheck="false"></textarea>
-        <div class="panel-footer panel-footer--muted" id="type-diagnostics" hidden></div>
       </section>
 
       <section class="panel styles-panel">
@@ -255,6 +252,40 @@ <h2>Preview</h2>
         </div>
         <div class="preview-host" id="preview-host"></div>
       </section>
+
+      <aside class="diagnostics-drawer" id="diagnostics-drawer" hidden>
+        <div class="diagnostics-drawer__header">
+          <h2>Diagnostics</h2>
+          <button
+            class="icon-button"
+            id="diagnostics-close"
+            type="button"
+            aria-label="Close diagnostics drawer"
+            title="Close diagnostics drawer"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M6 6 18 18"></path>
+              <path d="M18 6 6 18"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="diagnostics-drawer__actions">
+          <button class="render-button" id="diagnostics-clear-component" type="button">
+            Clear component
+          </button>
+          <button class="render-button" id="diagnostics-clear-all" type="button">
+            Clear all
+          </button>
+        </div>
+        <section class="diagnostics-group" data-diagnostics-scope="component">
+          <h3>Component</h3>
+          <div class="diagnostics-scope" id="diagnostics-component"></div>
+        </section>
+        <section class="diagnostics-group" data-diagnostics-scope="styles">
+          <h3>Styles</h3>
+          <div class="diagnostics-scope" id="diagnostics-styles"></div>
+        </section>
+      </aside>
     </main>
 
     <footer class="app-footer">
diff --git a/src/styles.css b/src/styles.css
index a902304..d830d50 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -237,6 +237,21 @@ body {
   color: var(--text-subtle);
 }
 
+.status--neutral {
+  background: var(--surface-chip);
+  color: var(--text-subtle);
+}
+
+.status--pending {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: color-mix(in srgb, var(--panel-text) 72%, var(--accent));
+}
+
+.status--error {
+  background: color-mix(in srgb, rgb(var(--danger-rgb)) 20%, transparent);
+  color: color-mix(in srgb, rgb(var(--danger-rgb)) 85%, var(--panel-text));
+}
+
 .app-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(320px, 1fr));
@@ -265,6 +280,7 @@ body {
 .app-grid-layout-controls {
   grid-area: layout-controls;
   display: inline-flex;
+  align-items: center;
   justify-self: end;
   gap: 10px;
 }
@@ -277,6 +293,14 @@ body {
   border-left: 1px solid var(--border-subtle);
 }
 
+.app-grid-diagnostics-controls {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 8px;
+  padding-right: 10px;
+  border-right: 1px solid var(--border-subtle);
+}
+
 .layout-toggle {
   display: inline-grid;
   place-content: center;
@@ -348,6 +372,12 @@ body {
     padding-left: 0;
     border-left: none;
   }
+
+  .app-grid-diagnostics-controls {
+    margin-right: 0;
+    padding-right: 0;
+    border-right: none;
+  }
 }
 
 .panel {
@@ -422,17 +452,6 @@ body {
   justify-content: flex-start;
 }
 
-.panel-header-main-actions .controls--actions:has(.render-button:not([hidden])) {
-  align-items: flex-start;
-}
-
-.control-stack {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-}
-
 .controls--quick-actions {
   gap: 10px;
 }
@@ -532,8 +551,124 @@ textarea:focus {
   color: rgb(var(--danger-rgb));
 }
 
-#type-diagnostics {
-  white-space: pre-line;
+.type-diagnostics-heading {
+  margin: 0;
+}
+
+.type-diagnostics-list {
+  margin: 8px 0 0;
+  padding-left: 0;
+  list-style-position: inside;
+}
+
+.type-diagnostics-list li {
+  margin: 0 0 4px;
+  padding-left: 2px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.8rem;
+  line-height: 1.4;
+}
+
+.diagnostics-toggle {
+  border: 1px solid var(--border-control);
+  background: var(--surface-control);
+  color: var(--shell-text);
+  padding: 7px 14px;
+  border-radius: 999px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.diagnostics-toggle:hover {
+  background: var(--surface-control-hover);
+}
+
+.diagnostics-toggle--neutral {
+  border-color: var(--border-control);
+  background: var(--surface-control);
+  color: var(--shell-text);
+}
+
+.diagnostics-toggle--pending {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-control));
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: color-mix(in srgb, var(--panel-text) 72%, var(--accent));
+}
+
+.diagnostics-toggle--error {
+  border-color: color-mix(in srgb, rgb(var(--danger-rgb)) 60%, var(--border-control));
+  background: color-mix(in srgb, rgb(var(--danger-rgb)) 18%, transparent);
+  color: color-mix(in srgb, rgb(var(--danger-rgb)) 85%, var(--panel-text));
+}
+
+.diagnostics-drawer {
+  position: fixed;
+  top: 82px;
+  right: 18px;
+  width: min(480px, calc(100vw - 24px));
+  max-height: min(72vh, 760px);
+  padding: 14px 14px 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--surface-panel) 92%, transparent);
+  box-shadow: 0 20px 40px var(--shadow-elev-1);
+  backdrop-filter: blur(8px);
+  overflow: auto;
+  z-index: 25;
+}
+
+.diagnostics-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.diagnostics-drawer__header h2 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.diagnostics-drawer__actions {
+  margin-top: 10px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.diagnostics-group {
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.diagnostics-group h3 {
+  margin: 0 0 8px;
+  font-size: 0.86rem;
+  color: var(--text-muted);
+}
+
+.diagnostics-scope {
+  max-height: 220px;
+  overflow: auto;
+  padding-right: 4px;
+  font-size: 0.84rem;
+}
+
+.diagnostics-empty {
+  color: var(--text-muted);
+}
+
+@media (max-width: 900px) {
+  .diagnostics-drawer {
+    top: auto;
+    right: 12px;
+    left: 12px;
+    bottom: 68px;
+    width: auto;
+    max-height: 58vh;
+  }
 }
 
 .preview-host {
@@ -704,6 +839,27 @@ textarea:focus {
   background: var(--accent-soft-hover);
 }
 
+.render-button--loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.render-button--loading::before {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  border: 2px solid var(--loading-spinner-border);
+  border-top-color: var(--preview-spinner);
+  animation: preview-spin 0.7s linear infinite;
+}
+
+.render-button:disabled {
+  opacity: 0.78;
+  cursor: wait;
+}
+
 .icon-button {
   border: 1px solid var(--border-control);
   background: var(--surface-control);

From 26eb2b5079895bea47f79a5f158e14e99c18b30f Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Mon, 16 Mar 2026 19:18:00 -0500
Subject: [PATCH 4/4] refactor: address comments.

---
 playwright/app.spec.ts | 23 +++++++++++
 src/app.js             | 91 +++++++++++++++++++++++++-----------------
 src/cdn.js             | 34 ++++++++++++----
 src/styles.css         |  5 +++
 4 files changed, 109 insertions(+), 44 deletions(-)

diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index e988fb3..49239b2 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -13,6 +13,11 @@ const setComponentEditorSource = async (page: Page, source: string) => {
   await editorContent.fill(source)
 }
 
+const setStylesEditorSource = async (page: Page, source: string) => {
+  const editorContent = page.locator('.styles-panel .cm-content').first()
+  await editorContent.fill(source)
+}
+
 test('renders default playground preview', async ({ page }) => {
   await waitForInitialRender(page)
 
@@ -169,6 +174,24 @@ test('renders with sass style mode', async ({ page }) => {
   await expect(previewItems.first()).toContainText('apple')
 })
 
+test('style compilation errors populate styles diagnostics scope', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await page.locator('#style-mode').selectOption('sass')
+  await setStylesEditorSource(page, '.card { color: $missing; }')
+
+  await expect(page.locator('#status')).toHaveText('Error')
+  await expect(page.locator('#diagnostics-toggle')).toHaveClass(
+    /diagnostics-toggle--error/,
+  )
+
+  await page.locator('#diagnostics-toggle').click()
+  await expect(page.locator('#diagnostics-styles')).toContainText(
+    'Style compilation failed.',
+  )
+  await expect(page.locator('#diagnostics-styles')).toContainText('Undefined variable')
+})
+
 test('clear component action opens confirm dialog and can be canceled', async ({
   page,
 }) => {
diff --git a/src/app.js b/src/app.js
index 173144d..01151e7 100644
--- a/src/app.js
+++ b/src/app.js
@@ -48,6 +48,7 @@ let lessCompiler = null
 let lightningCssWasm = null
 let coreRuntime = null
 let typeScriptCompiler = null
+let typeScriptCompilerProvider = null
 let typeScriptLibFiles = null
 let compiledStylesCache = {
   key: null,
@@ -132,7 +133,7 @@ const initializeCodeEditors = async () => {
     jsxHost.remove()
     cssHost.remove()
     const message = error instanceof Error ? error.message : String(error)
-    setStatus(`Editor fallback: ${message}`)
+    setStatus(`Editor fallback: ${message}`, 'neutral')
   }
 }
 
@@ -174,25 +175,9 @@ const ensureCoreRuntime = async () => {
   }
 }
 
-const inferStatusLevel = text => {
-  if (text === 'Rendering…' || text === 'Loading CDN assets…') {
-    return 'pending'
-  }
-
-  if (
-    text === 'Error' ||
-    text === 'Copy failed' ||
-    text.startsWith('Rendered (Type errors:')
-  ) {
-    return 'error'
-  }
-
-  return 'neutral'
-}
-
-const setStatus = (text, level = inferStatusLevel(text)) => {
+const setStatus = (text, level) => {
   statusNode.textContent = text
-  statusLevel = level
+  statusLevel = level ?? 'neutral'
   updateUiIssueIndicators()
 }
 
@@ -368,6 +353,10 @@ const setTypeDiagnosticsDetails = ({ headline, lines = [], level = 'muted' }) =>
   setDiagnosticsScope('component', { headline, lines, level })
 }
 
+const setStyleDiagnosticsDetails = ({ headline, lines = [], level = 'muted' }) => {
+  setDiagnosticsScope('styles', { headline, lines, level })
+}
+
 const setTypecheckButtonLoading = isLoading => {
   if (!typecheckButton) {
     return
@@ -403,12 +392,12 @@ const scheduleTypeRecheck = () => {
 
 const setRenderedStatus = () => {
   if (lastTypeErrorCount > 0) {
-    setStatus(`Rendered (Type errors: ${lastTypeErrorCount})`)
+    setStatus(`Rendered (Type errors: ${lastTypeErrorCount})`, 'error')
     return
   }
 
   if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
-    setStatus('Rendered')
+    setStatus('Rendered', 'neutral')
   }
 }
 
@@ -447,6 +436,7 @@ const ensureTypeScriptCompiler = async () => {
   try {
     const loaded = await importFromCdnWithFallback(cdnImports.typescript)
     typeScriptCompiler = loaded.module.default ?? loaded.module
+    typeScriptCompilerProvider = loaded.provider ?? null
 
     if (typeof typeScriptCompiler.transpileModule !== 'function') {
       throw new Error(`transpileModule export was not found from ${loaded.url}`)
@@ -474,7 +464,11 @@ const normalizeVirtualFileName = fileName =>
   typeof fileName === 'string' && fileName.startsWith('/') ? fileName.slice(1) : fileName
 
 const fetchTypeScriptLibText = async fileName => {
-  const attempts = getTypeScriptLibUrls(fileName).map(async url => {
+  const urls = getTypeScriptLibUrls(fileName, {
+    typeScriptProvider: typeScriptCompilerProvider,
+  })
+
+  const attempts = urls.map(async url => {
     const response = await fetch(url)
     if (!response.ok) {
       throw new Error(`HTTP ${response.status} from ${url}`)
@@ -486,7 +480,17 @@ const fetchTypeScriptLibText = async fileName => {
   try {
     return await Promise.any(attempts)
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error)
+    let message = error instanceof Error ? error.message : String(error)
+
+    if (error instanceof AggregateError) {
+      const reasons = Array.from(error.errors ?? [])
+        .slice(0, 3)
+        .map(reason => (reason instanceof Error ? reason.message : String(reason)))
+      const reasonSummary = reasons.length ? ` Causes: ${reasons.join(' | ')}` : ''
+
+      message = `Tried URLs: ${urls.join(', ')}.${reasonSummary}`
+    }
+
     throw new Error(`Unable to fetch TypeScript lib file ${fileName}: ${message}`, {
       cause: error,
     })
@@ -678,7 +682,7 @@ const runTypeDiagnostics = async runId => {
     })
 
     if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
-      setStatus('Rendered')
+      setStatus('Rendered', 'neutral')
     }
   } finally {
     activeTypeDiagnosticsRuns = Math.max(0, activeTypeDiagnosticsRuns - 1)
@@ -703,7 +707,7 @@ const markTypeDiagnosticsStale = () => {
   })
 
   if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
-    setStatus('Rendered')
+    setStatus('Rendered', 'neutral')
   }
 }
 
@@ -825,7 +829,7 @@ const clearComponentSource = () => {
   lastTypeErrorCount = 0
   hasUnresolvedTypeErrors = false
   clearTypeRecheckTimer()
-  setStatus('Component cleared')
+  setStatus('Component cleared', 'neutral')
 
   if (!jsxCodeEditor) {
     maybeRender()
@@ -835,7 +839,7 @@ const clearComponentSource = () => {
 const clearStylesSource = () => {
   setCssSource('')
   clearDiagnosticsScope('styles')
-  setStatus('Styles cleared')
+  setStatus('Styles cleared', 'neutral')
   if (!cssCodeEditor) {
     maybeRender()
   }
@@ -885,18 +889,18 @@ const copyTextToClipboard = async text => {
 const copyComponentSource = async () => {
   try {
     await copyTextToClipboard(getJsxSource())
-    setStatus('Component copied')
+    setStatus('Component copied', 'neutral')
   } catch {
-    setStatus('Copy failed')
+    setStatus('Copy failed', 'error')
   }
 }
 
 const copyStylesSource = async () => {
   try {
     await copyTextToClipboard(getCssSource())
-    setStatus('Styles copied')
+    setStatus('Styles copied', 'neutral')
   } catch {
-    setStatus('Copy failed')
+    setStatus('Copy failed', 'error')
   }
 }
 
@@ -1304,6 +1308,7 @@ const compileStyles = async () => {
   setStyleCompiling(shouldShowSpinner)
 
   if (!shouldShowSpinner) {
+    clearDiagnosticsScope('styles')
     const output = { css: cssSource, moduleExports: null }
     compiledStylesCache = {
       key: cacheKey,
@@ -1346,11 +1351,25 @@ const compileStyles = async () => {
       css: compiledCss,
       moduleExports,
     }
+    clearDiagnosticsScope('styles')
     compiledStylesCache = {
       key: cacheKey,
       value: output,
     }
     return output
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    const lines = message
+      .split('\n')
+      .map(line => line.trimEnd())
+      .filter(line => line.trim().length > 0)
+
+    setStyleDiagnosticsDetails({
+      headline: 'Style compilation failed.',
+      lines,
+      level: 'error',
+    })
+    throw error
   } finally {
     setStyleCompiling(false)
   }
@@ -1493,7 +1512,7 @@ const renderReact = async () => {
 const renderPreview = async () => {
   scheduled = null
   updateStyleWarning()
-  setStatus(hasCompletedInitialRender ? 'Rendering…' : 'Loading CDN assets…')
+  setStatus(hasCompletedInitialRender ? 'Rendering…' : 'Loading CDN assets…', 'pending')
 
   try {
     if (renderMode.value === 'react') {
@@ -1501,10 +1520,10 @@ const renderPreview = async () => {
     } else {
       await renderDom()
     }
-    setStatus('Rendered')
+    setStatus('Rendered', 'neutral')
     setRenderedStatus()
   } catch (error) {
-    setStatus('Error')
+    setStatus('Error', 'error')
     const target = getRenderTarget()
     clearTarget(target)
     const message = document.createElement('pre')
@@ -1560,7 +1579,7 @@ if (diagnosticsClearComponent) {
     hasUnresolvedTypeErrors = false
     clearTypeRecheckTimer()
     if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
-      setStatus('Rendered')
+      setStatus('Rendered', 'neutral')
     }
   })
 }
@@ -1571,7 +1590,7 @@ if (diagnosticsClearAll) {
     hasUnresolvedTypeErrors = false
     clearTypeRecheckTimer()
     if (statusNode.textContent.startsWith('Rendered (Type errors:')) {
-      setStatus('Rendered')
+      setStatus('Rendered', 'neutral')
     }
   })
 }
diff --git a/src/cdn.js b/src/cdn.js
index 0516e18..83939bd 100644
--- a/src/cdn.js
+++ b/src/cdn.js
@@ -218,7 +218,7 @@ const importFromCdnCandidateAt = async (importCandidates, index, firstError = nu
 
   try {
     const module = await import(url)
-    return { module, url }
+    return { module, url, provider: importCandidates[index].provider }
   } catch (error) {
     return importFromCdnCandidateAt(importCandidates, index + 1, firstError ?? error)
   }
@@ -231,18 +231,36 @@ const typeScriptVersion = '5.9.3'
 const typeScriptLibBaseByProvider = {
   esm: `https://esm.sh/typescript@${typeScriptVersion}/lib`,
   unpkg: `https://unpkg.com/typescript@${typeScriptVersion}/lib`,
+  jsdelivr: `https://cdn.jsdelivr.net/npm/typescript@${typeScriptVersion}/lib`,
 }
 
-const typeScriptLibStableFallbackBase = `https://cdn.jsdelivr.net/npm/typescript@${typeScriptVersion}/lib`
+/*
+ * Keep a reliable fallback order for .d.ts files when the active module provider
+ * does not host TypeScript lib declarations consistently (e.g. import maps/jspmGa).
+ */
+const typeScriptLibFallbackProviderPriority = ['jsdelivr', 'unpkg', 'esm']
 
-export const getTypeScriptLibUrls = fileName => {
-  const providerOrderedBases = getProviderPriority()
-    .map(provider => typeScriptLibBaseByProvider[provider])
-    .filter(Boolean)
+const getTypeScriptLibProviderPriority = typeScriptProvider => {
+  const ordered = []
+
+  if (
+    typeof typeScriptProvider === 'string' &&
+    typeScriptProvider in typeScriptLibBaseByProvider
+  ) {
+    ordered.push(typeScriptProvider)
+  }
 
-  if (!providerOrderedBases.includes(typeScriptLibStableFallbackBase)) {
-    providerOrderedBases.push(typeScriptLibStableFallbackBase)
+  for (const provider of typeScriptLibFallbackProviderPriority) {
+    ordered.push(provider)
   }
 
+  return [...new Set(ordered)]
+}
+
+export const getTypeScriptLibUrls = (fileName, { typeScriptProvider } = {}) => {
+  const providerOrderedBases = getTypeScriptLibProviderPriority(typeScriptProvider)
+    .map(provider => typeScriptLibBaseByProvider[provider])
+    .filter(Boolean)
+
   return providerOrderedBases.map(baseUrl => `${baseUrl}/${fileName}`)
 }
diff --git a/src/styles.css b/src/styles.css
index d830d50..eb1b80d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -584,6 +584,11 @@ textarea:focus {
   background: var(--surface-control-hover);
 }
 
+.diagnostics-toggle:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
 .diagnostics-toggle--neutral {
   border-color: var(--border-control);
   background: var(--surface-control);