@lupinum/nuxt-email 0.1.0

package/dist/runtime/dev-preview/page-script.js

@@ -0,0 +1,403 @@
+export const PREVIEW_PAGE_CLIENT = `
+    (function () {
+      'use strict'
+
+      var state = {
+        activeView: 'preview',
+        failed: false,
+        html: '',
+        pendingRefresh: false,
+        text: '',
+        selectedName: '',
+        signature: '',
+        revision: 0,
+        refreshing: false,
+        viewport: '600'
+      }
+      var elements = {
+        copy: document.getElementById('copy-button'),
+        empty: document.getElementById('empty'),
+        error: document.getElementById('error'),
+        fixtureNote: document.getElementById('fixture-note'),
+        html: document.getElementById('panel-html'),
+        iframe: document.getElementById('panel-preview'),
+        open: document.getElementById('open-link'),
+        previewControls: document.getElementById('preview-controls'),
+        select: document.getElementById('template-select'),
+        sizeBadge: document.getElementById('size-badge'),
+        sizeValue: document.getElementById('size-value'),
+        status: document.getElementById('status'),
+        statusText: document.getElementById('status-text'),
+        subject: document.getElementById('subject'),
+        subjectValue: document.getElementById('subject-value'),
+        tabs: Array.from(document.querySelectorAll('[role="tab"]')),
+        text: document.getElementById('panel-text'),
+        title: document.getElementById('viewer-title'),
+        viewportButtons: Array.from(document.querySelectorAll('.viewport-toggle .segment'))
+      }
+      var previewRoot = window.location.pathname
+      while (previewRoot.endsWith('/')) {
+        previewRoot = previewRoot.slice(0, -1)
+      }
+
+      function previewUrl(path) {
+        return previewRoot + path
+      }
+
+      function setStatus(message, statusState) {
+        if (elements.status.dataset.state === statusState && elements.statusText.textContent === message) {
+          return
+        }
+        elements.status.dataset.state = statusState
+        elements.statusText.textContent = message
+      }
+
+      function rawRenderUrl(name) {
+        var query = new URLSearchParams({ name: name, revision: String(state.revision) })
+        return previewUrl('/render?' + query.toString())
+      }
+
+      function jsonRenderUrl(name) {
+        var query = new URLSearchParams({ name: name, format: 'json' })
+        return previewUrl('/render?' + query.toString())
+      }
+
+      function updatePreviewFrame() {
+        if (!state.selectedName || !state.html || state.failed) {
+          return
+        }
+        var next = rawRenderUrl(state.selectedName)
+        if (elements.iframe.getAttribute('src') !== next) {
+          elements.iframe.src = next
+        }
+      }
+
+      function applyViewport(width) {
+        state.viewport = width
+        elements.iframe.dataset.width = width
+        elements.viewportButtons.forEach(function (button) {
+          button.setAttribute('aria-pressed', String(button.dataset.width === width))
+        })
+      }
+
+      function updateSubject(subject) {
+        var hasSubject = typeof subject === 'string' && subject.length > 0
+        elements.subject.dataset.state = hasSubject ? 'set' : 'none'
+        elements.subjectValue.textContent = hasSubject ? subject : 'No subject defined'
+        elements.subjectValue.title = hasSubject ? subject : ''
+      }
+
+      function formatKilobytes(bytes) {
+        if (bytes < 1024) {
+          return bytes + ' B'
+        }
+        return (bytes / 1024).toFixed(bytes < 102400 ? 1 : 0) + ' KB'
+      }
+
+      function updateSize(bytes) {
+        if (typeof bytes !== 'number' || !Number.isFinite(bytes)) {
+          elements.sizeBadge.hidden = true
+          return
+        }
+        elements.sizeBadge.hidden = false
+        var level = bytes > 102400 ? 'over' : bytes >= 81920 ? 'warn' : 'ok'
+        elements.sizeBadge.dataset.level = level
+        var suffix = level === 'over'
+          ? ' \xB7 Gmail will clip'
+          : level === 'warn' ? ' \xB7 near Gmail limit' : ''
+        elements.sizeValue.textContent = formatKilobytes(bytes) + suffix
+        elements.sizeBadge.title = bytes.toLocaleString() + ' bytes (UTF-8). Gmail clips messages larger than 102,400 bytes; warnings begin at 81,920 bytes.'
+      }
+
+      async function fetchJson(url) {
+        var response = await fetch(url, { cache: 'no-store' })
+        var payload = await response.json()
+        if (!response.ok) {
+          var error = new Error(payload.statusMessage || payload.message || 'Preview request failed')
+          error.details = JSON.stringify(payload.data || payload, null, 2)
+          throw error
+        }
+        return payload
+      }
+
+      async function writeClipboard(value) {
+        if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+          try {
+            await navigator.clipboard.writeText(value)
+            return
+          }
+          catch {
+            // LAN preview URLs are not secure contexts. Fall through to the
+            // selection-based browser API so copying still works on dev Wi-Fi.
+          }
+        }
+
+        var textarea = document.createElement('textarea')
+        textarea.value = value
+        textarea.setAttribute('readonly', '')
+        textarea.style.position = 'fixed'
+        textarea.style.opacity = '0'
+        document.body.appendChild(textarea)
+        textarea.select()
+        textarea.setSelectionRange(0, value.length)
+        var copied = document.execCommand('copy')
+        textarea.remove()
+        if (!copied) {
+          throw new Error('Clipboard unavailable')
+        }
+      }
+
+      function updateTemplateOptions(templates) {
+        var previousName = state.selectedName
+        var fragment = document.createDocumentFragment()
+        templates.forEach(function (template) {
+          var option = document.createElement('option')
+          option.value = template.name
+          option.disabled = !template.hasFixture
+          option.textContent = template.hasFixture ? template.name : template.name + ' \u2014 no fixture'
+          fragment.appendChild(option)
+        })
+        elements.select.replaceChildren(fragment)
+
+        var fixtureTemplates = templates.filter(function (template) { return template.hasFixture })
+        var previousStillExists = fixtureTemplates.some(function (template) {
+          return template.name === previousName
+        })
+        state.selectedName = previousStillExists
+          ? previousName
+          : (fixtureTemplates[0] ? fixtureTemplates[0].name : '')
+
+        elements.select.disabled = fixtureTemplates.length === 0
+        if (state.selectedName) {
+          elements.select.value = state.selectedName
+          elements.fixtureNote.textContent = 'Using ' + state.selectedName + '.fixtures.ts'
+        }
+        else {
+          elements.fixtureNote.textContent = templates.length === 0
+            ? 'Add a Vue SFC under app/emails to begin.'
+            : 'Add a colocated .fixtures.ts file to enable preview.'
+        }
+      }
+
+      function updateActions() {
+        var hasOutput = Boolean(state.selectedName && state.html && !state.failed)
+        elements.copy.disabled = !hasOutput
+        elements.copy.textContent = state.activeView === 'text' ? 'Copy text' : 'Copy HTML'
+        elements.open.setAttribute('aria-disabled', hasOutput ? 'false' : 'true')
+        elements.open.tabIndex = hasOutput ? 0 : -1
+        if (hasOutput) {
+          elements.open.href = rawRenderUrl(state.selectedName)
+        }
+        else {
+          elements.open.removeAttribute('href')
+        }
+      }
+
+      function showView(view) {
+        state.activeView = view
+        elements.tabs.forEach(function (tab) {
+          var selected = tab.dataset.view === view
+          tab.setAttribute('aria-selected', String(selected))
+          tab.tabIndex = selected ? 0 : -1
+        })
+        elements.iframe.hidden = view !== 'preview'
+        elements.html.hidden = view !== 'html'
+        elements.text.hidden = view !== 'text'
+        elements.previewControls.hidden = view !== 'preview'
+        updateActions()
+      }
+
+      function showError(error) {
+        var message = error.message || String(error)
+        elements.error.textContent = error.details ? message + '\\n\\n' + error.details : (error.stack || message)
+        elements.error.hidden = false
+        elements.empty.hidden = true
+        state.failed = true
+        state.html = ''
+        state.text = ''
+        state.signature = ''
+        elements.iframe.hidden = true
+        elements.iframe.removeAttribute('src')
+        elements.html.hidden = true
+        elements.html.textContent = ''
+        elements.text.hidden = true
+        elements.text.textContent = ''
+        updateActions()
+        setStatus('Render failed', 'error')
+      }
+
+      function clearError() {
+        elements.error.textContent = ''
+        elements.error.hidden = true
+        state.failed = false
+      }
+
+      async function refresh(announceActivity) {
+        if (state.refreshing) {
+          if (announceActivity) {
+            state.pendingRefresh = true
+            setStatus('Refreshing\u2026', 'loading')
+          }
+          return
+        }
+        state.refreshing = true
+        if (announceActivity) {
+          setStatus('Refreshing\u2026', 'loading')
+        }
+
+        try {
+          var list = await fetchJson(previewUrl('/api/templates'))
+          var previousName = state.selectedName
+          updateTemplateOptions(list.templates)
+          if (previousName !== state.selectedName) {
+            state.signature = ''
+          }
+
+          if (!state.selectedName) {
+            state.html = ''
+            state.text = ''
+            elements.title.textContent = 'No fixture-backed templates'
+            elements.empty.hidden = false
+            updateSubject(undefined)
+            elements.subjectValue.textContent = 'No template selected'
+            updateSize(undefined)
+            clearError()
+            updateActions()
+            setStatus('Waiting for fixture', 'ready')
+            return
+          }
+
+          var requestedName = state.selectedName
+          var output = await fetchJson(jsonRenderUrl(requestedName))
+          if (requestedName !== state.selectedName) {
+            return
+          }
+          var nextSignature = JSON.stringify([output.name, output.html, output.text, output.subject || null])
+          var outputChanged = nextSignature !== state.signature
+          if (outputChanged) {
+            state.signature = nextSignature
+            state.html = output.html
+            state.text = output.text
+            state.revision += 1
+            elements.html.textContent = output.html
+            elements.text.textContent = output.text
+            elements.iframe.title = 'Email preview: ' + output.name
+          }
+          updateSubject(output.subject)
+          updateSize(output.bytes)
+
+          elements.title.textContent = output.name
+          elements.empty.hidden = true
+          var recoveredFromError = state.failed
+          clearError()
+          if (outputChanged) {
+            updatePreviewFrame()
+          }
+          showView(state.activeView)
+          if (announceActivity || recoveredFromError) {
+            setStatus('Up to date', 'ready')
+          }
+          else if (outputChanged) {
+            setStatus('Updated', 'ready')
+          }
+        }
+        catch (error) {
+          showError(error)
+        }
+        finally {
+          state.refreshing = false
+          if (state.pendingRefresh) {
+            state.pendingRefresh = false
+            void refresh(true)
+          }
+        }
+      }
+
+      elements.select.addEventListener('change', function () {
+        state.selectedName = elements.select.value
+        state.signature = ''
+        void refresh(true)
+      })
+
+      elements.tabs.forEach(function (tab, index) {
+        tab.addEventListener('click', function () {
+          showView(tab.dataset.view)
+        })
+        tab.addEventListener('keydown', function (event) {
+          var nextIndex = index
+          if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            nextIndex = (index + 1) % elements.tabs.length
+          }
+          else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            nextIndex = (index - 1 + elements.tabs.length) % elements.tabs.length
+          }
+          else if (event.key === 'Home') {
+            nextIndex = 0
+          }
+          else if (event.key === 'End') {
+            nextIndex = elements.tabs.length - 1
+          }
+          else {
+            return
+          }
+          event.preventDefault()
+          elements.tabs[nextIndex].focus()
+          showView(elements.tabs[nextIndex].dataset.view)
+        })
+      })
+
+      document.addEventListener('keydown', function (event) {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+          return
+        }
+        var index = Number(event.key) - 1
+        if (index >= 0 && index < elements.tabs.length && document.activeElement !== elements.select) {
+          showView(elements.tabs[index].dataset.view)
+        }
+      })
+
+      elements.copy.addEventListener('click', async function () {
+        var value = state.activeView === 'text' ? state.text : state.html
+        try {
+          await writeClipboard(value)
+          var copiedMessage = state.activeView === 'text' ? 'Text copied' : 'HTML copied'
+          setStatus(copiedMessage, 'ready')
+          window.setTimeout(function () {
+            if (elements.statusText.textContent === copiedMessage) {
+              setStatus('Up to date', 'ready')
+            }
+          }, 1600)
+        }
+        catch (error) {
+          setStatus('Clipboard unavailable', 'error')
+        }
+      })
+
+      elements.open.addEventListener('click', function (event) {
+        if (elements.open.getAttribute('aria-disabled') === 'true') {
+          event.preventDefault()
+        }
+      })
+
+      elements.viewportButtons.forEach(function (button) {
+        button.addEventListener('click', function () {
+          applyViewport(button.dataset.width)
+        })
+      })
+
+      document.addEventListener('visibilitychange', function () {
+        if (document.visibilityState === 'visible') {
+          void refresh(false)
+        }
+      })
+
+      applyViewport(state.viewport)
+      showView('preview')
+      void refresh(true)
+      window.setInterval(function () {
+        if (document.visibilityState === 'visible') {
+          void refresh(false)
+        }
+      }, 1000)
+    })()
+`;

package/dist/runtime/dev-preview/page.css.d.ts

@@ -0,0 +1 @@
+export declare const PREVIEW_PAGE_CSS = "\n    :root {\n      color-scheme: light;\n      --background: oklch(0.975 0 0);\n      --surface: oklch(1 0 0);\n      --surface-subtle: oklch(0.955 0.008 160);\n      --ink: oklch(0.19 0.018 160);\n      --muted: oklch(0.44 0.025 160);\n      --line: oklch(0.885 0.012 160);\n      --line-strong: oklch(0.76 0.025 160);\n      --primary: oklch(0.4 0.087 160);\n      --primary-hover: oklch(0.34 0.087 160);\n      --primary-soft: oklch(0.93 0.035 160);\n      --focus: oklch(0.56 0.17 255);\n      --danger: oklch(0.49 0.17 28);\n      --danger-soft: oklch(0.96 0.025 28);\n      --radius: 10px;\n      --toolbar-height: 64px;\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n      font-synthesis: none;\n    }\n\n    * {\n      box-sizing: border-box;\n    }\n\n    html,\n    body {\n      min-height: 100%;\n    }\n\n    body {\n      margin: 0;\n      background: var(--background);\n      color: var(--ink);\n      font-size: 14px;\n      line-height: 1.5;\n      -webkit-font-smoothing: antialiased;\n    }\n\n    button,\n    select,\n    a {\n      font: inherit;\n    }\n\n    button,\n    select {\n      color: inherit;\n    }\n\n    button:focus-visible,\n    select:focus-visible,\n    a:focus-visible {\n      outline: 2px solid var(--focus);\n      outline-offset: 2px;\n    }\n\n    button {\n      border: 0;\n    }\n\n    .shell {\n      display: grid;\n      grid-template-rows: var(--toolbar-height) minmax(0, 1fr);\n      min-height: 100vh;\n    }\n\n    .topbar {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      padding: 0 22px;\n      background: var(--surface);\n      border-bottom: 1px solid var(--line);\n    }\n\n    .mark {\n      display: grid;\n      width: 32px;\n      height: 32px;\n      place-items: center;\n      border-radius: 8px;\n      background: var(--primary);\n      color: var(--surface);\n      font-weight: 760;\n      letter-spacing: -0.02em;\n    }\n\n    .product-name {\n      margin: 0;\n      font-size: 15px;\n      font-weight: 720;\n      letter-spacing: -0.015em;\n    }\n\n    .product-context {\n      margin: -2px 0 0;\n      color: var(--muted);\n      font-size: 12px;\n    }\n\n    .status {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      min-width: 0;\n      margin-left: auto;\n      color: var(--muted);\n      font-size: 12px;\n    }\n\n    .status-dot {\n      width: 7px;\n      height: 7px;\n      flex: none;\n      border-radius: 50%;\n      background: var(--primary);\n    }\n\n    .status[data-state=\"loading\"] .status-dot {\n      animation: breathe 1.2s ease-in-out infinite;\n    }\n\n    .status[data-state=\"error\"] {\n      color: var(--danger);\n    }\n\n    .status[data-state=\"error\"] .status-dot {\n      background: var(--danger);\n    }\n\n    @keyframes breathe {\n      50% { opacity: 0.35; transform: scale(0.78); }\n    }\n\n    .workspace {\n      display: grid;\n      grid-template-columns: 260px minmax(0, 1fr);\n      min-height: 0;\n    }\n\n    .sidebar {\n      display: flex;\n      min-height: 0;\n      flex-direction: column;\n      gap: 24px;\n      padding: 22px 18px;\n      background: var(--surface-subtle);\n      border-right: 1px solid var(--line);\n    }\n\n    .field-label,\n    .section-label {\n      display: block;\n      margin: 0 0 8px;\n      color: var(--muted);\n      font-size: 12px;\n      font-weight: 650;\n    }\n\n    .template-select {\n      width: 100%;\n      height: 38px;\n      padding: 0 34px 0 11px;\n      border: 1px solid var(--line-strong);\n      border-radius: 8px;\n      background: var(--surface);\n      font-weight: 590;\n    }\n\n    .template-select:hover:not(:disabled) {\n      border-color: var(--primary);\n    }\n\n    .template-select:disabled {\n      cursor: not-allowed;\n      opacity: 0.58;\n    }\n\n    .fixture-note {\n      min-height: 36px;\n      margin: 8px 0 0;\n      color: var(--muted);\n      font-size: 12px;\n      text-wrap: pretty;\n    }\n\n    .tabs {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .tab {\n      display: flex;\n      width: 100%;\n      align-items: center;\n      justify-content: space-between;\n      min-height: 38px;\n      padding: 7px 10px;\n      border-radius: 8px;\n      background: transparent;\n      cursor: pointer;\n      text-align: left;\n      transition: background-color 160ms ease, color 160ms ease;\n    }\n\n    .tab:hover {\n      background: oklch(1 0 0 / 0.72);\n    }\n\n    .tab[aria-selected=\"true\"] {\n      background: var(--primary-soft);\n      color: var(--primary-hover);\n      font-weight: 680;\n    }\n\n    .tab-key {\n      color: var(--muted);\n      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n      font-size: 10px;\n    }\n\n    .sidebar-note {\n      margin: auto 0 0;\n      padding-top: 18px;\n      border-top: 1px solid var(--line);\n      color: var(--muted);\n      font-size: 12px;\n      text-wrap: pretty;\n    }\n\n    .main {\n      display: grid;\n      grid-template-rows: auto auto minmax(0, 1fr);\n      min-width: 0;\n      min-height: 0;\n      padding: 18px;\n      gap: 12px;\n    }\n\n    .viewer-toolbar {\n      display: flex;\n      min-width: 0;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 10px;\n      row-gap: 8px;\n    }\n\n    .viewer-title {\n      min-width: 0;\n      margin: 0;\n      overflow: hidden;\n      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n      font-size: 13px;\n      font-weight: 650;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .viewer-actions {\n      display: flex;\n      flex: none;\n      gap: 8px;\n      margin-left: auto;\n    }\n\n    .preview-controls {\n      display: flex;\n      flex: none;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .preview-controls[hidden] {\n      display: none;\n    }\n\n    .viewport-toggle {\n      display: inline-flex;\n      padding: 2px;\n      border: 1px solid var(--line-strong);\n      border-radius: 8px;\n      background: var(--surface);\n    }\n\n    .segment {\n      min-height: 28px;\n      padding: 3px 10px;\n      border-radius: 6px;\n      background: transparent;\n      color: var(--muted);\n      cursor: pointer;\n      font-size: 12px;\n      font-weight: 620;\n      font-variant-numeric: tabular-nums;\n      transition: background-color 160ms ease, color 160ms ease;\n    }\n\n    .segment:hover:not([aria-pressed=\"true\"]) {\n      color: var(--ink);\n    }\n\n    .segment[aria-pressed=\"true\"] {\n      background: var(--primary-soft);\n      color: var(--primary-hover);\n    }\n\n    .meta-bar {\n      display: flex;\n      min-width: 0;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .subject {\n      display: flex;\n      min-width: 0;\n      align-items: center;\n      gap: 8px;\n      margin: 0;\n      color: var(--ink);\n      font-size: 13px;\n    }\n\n    .subject-label {\n      flex: none;\n      padding: 2px 7px;\n      border-radius: 5px;\n      background: var(--primary-soft);\n      color: var(--primary-hover);\n      font-size: 11px;\n      font-weight: 650;\n    }\n\n    .subject-value {\n      min-width: 0;\n      overflow: hidden;\n      font-weight: 600;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .subject[data-state=\"none\"] .subject-label {\n      background: var(--surface-subtle);\n      color: var(--muted);\n    }\n\n    .subject[data-state=\"none\"] .subject-value {\n      color: var(--muted);\n      font-weight: 500;\n      font-style: italic;\n    }\n\n    .size-badge {\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n      margin: 0 0 0 auto;\n      padding: 3px 9px;\n      border: 1px solid var(--line-strong);\n      border-radius: 999px;\n      color: var(--muted);\n      font-size: 12px;\n      font-variant-numeric: tabular-nums;\n      font-weight: 600;\n    }\n\n    .size-badge[data-level=\"warn\"] {\n      border-color: oklch(0.78 0.1 85);\n      background: oklch(0.96 0.05 85);\n      color: oklch(0.42 0.1 75);\n    }\n\n    .size-badge[data-level=\"over\"] {\n      border-color: oklch(0.75 0.09 28);\n      background: var(--danger-soft);\n      color: oklch(0.4 0.13 28);\n    }\n\n    .size-badge[hidden] {\n      display: none;\n    }\n\n    .action {\n      display: inline-flex;\n      min-height: 34px;\n      align-items: center;\n      justify-content: center;\n      padding: 6px 11px;\n      border: 1px solid var(--line-strong);\n      border-radius: 8px;\n      background: var(--surface);\n      color: var(--ink);\n      cursor: pointer;\n      font-weight: 620;\n      text-decoration: none;\n      transition: border-color 160ms ease, background-color 160ms ease;\n    }\n\n    .action:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n      border-color: var(--primary);\n      background: var(--primary-soft);\n    }\n\n    .action:active:not(:disabled):not([aria-disabled=\"true\"]) {\n      background: oklch(0.9 0.04 160);\n    }\n\n    .action:disabled,\n    .action[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.52;\n    }\n\n    .viewer {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      min-width: 0;\n      min-height: 460px;\n      overflow: hidden;\n      border: 1px solid var(--line);\n      border-radius: var(--radius);\n      background: var(--surface-subtle);\n    }\n\n    .panel {\n      width: 100%;\n      height: 100%;\n      min-height: inherit;\n      border: 0;\n    }\n\n    .panel[hidden] {\n      display: none;\n    }\n\n    iframe.panel {\n      display: block;\n      background: var(--surface);\n    }\n\n    iframe.panel[data-width=\"600\"] {\n      width: 600px;\n      max-width: 100%;\n      border-inline: 1px solid var(--line);\n    }\n\n    iframe.panel[data-width=\"375\"] {\n      width: 375px;\n      max-width: 100%;\n      border-inline: 1px solid var(--line);\n    }\n\n    iframe.panel[data-width=\"full\"] {\n      width: 100%;\n    }\n\n    pre.panel {\n      margin: 0;\n      overflow: auto;\n      padding: 22px;\n      background: var(--surface);\n      color: oklch(0.26 0.03 160);\n      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n      font-size: 12px;\n      line-height: 1.65;\n      tab-size: 2;\n      white-space: pre-wrap;\n      overflow-wrap: anywhere;\n    }\n\n    .empty {\n      position: absolute;\n      inset: 0;\n      display: grid;\n      place-content: center;\n      padding: 28px;\n      color: var(--muted);\n      text-align: center;\n    }\n\n    .empty[hidden] {\n      display: none;\n    }\n\n    .empty strong {\n      display: block;\n      margin-bottom: 4px;\n      color: var(--ink);\n      font-size: 14px;\n    }\n\n    .error {\n      position: absolute;\n      inset: 16px;\n      z-index: 1;\n      margin: 0;\n      overflow: auto;\n      padding: 16px;\n      border: 1px solid oklch(0.75 0.09 28);\n      border-radius: 9px;\n      background: var(--danger-soft);\n      color: oklch(0.34 0.12 28);\n      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n      font-size: 12px;\n      line-height: 1.6;\n      white-space: pre-wrap;\n    }\n\n    .error[hidden] {\n      display: none;\n    }\n\n    @media (max-width: 760px) {\n      .shell {\n        display: block;\n      }\n\n      .topbar {\n        min-height: var(--toolbar-height);\n      }\n\n      .workspace {\n        display: block;\n      }\n\n      .sidebar {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n        border-right: 0;\n        border-bottom: 1px solid var(--line);\n      }\n\n      .tabs {\n        flex-direction: row;\n        flex-wrap: wrap;\n      }\n\n      .tab {\n        width: auto;\n      }\n\n      .tab-key,\n      .sidebar-note {\n        display: none;\n      }\n\n      .main {\n        min-height: 640px;\n        padding: 14px;\n      }\n    }\n\n    @media (max-width: 500px) {\n      .topbar {\n        padding: 0 14px;\n      }\n\n      .product-context {\n        display: none;\n      }\n\n      .status {\n        max-width: 42%;\n      }\n\n      .sidebar {\n        display: flex;\n        gap: 14px;\n        padding: 16px 14px;\n      }\n\n      .viewer-toolbar {\n        align-items: flex-start;\n        flex-direction: column;\n      }\n\n      .viewer-actions {\n        width: 100%;\n        margin-left: 0;\n      }\n\n      .action {\n        flex: 1;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      *,\n      *::before,\n      *::after {\n        scroll-behavior: auto !important;\n        transition-duration: 0.01ms !important;\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n      }\n    }\n";