asdasdasdass

2026-09-27 20:18:32 +02:00 · 2026-09-27 20:18:32 +02:00 · bbfb1fce04
commit bbfb1fce04
parent 9278fe9314
12 changed files with 373 additions and 348 deletions
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@ -1,4 +1,42 @@
 {
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "ignorePatterns": ["dist/**"]
+    "$schema": "./node_modules/oxlint/configuration_schema.json",
+    "ignorePatterns": ["dist/**", "node_modules/**"],
+    "plugins": ["typescript", "unicorn", "oxc", "promise"],
+    "env": {
+        "browser": true,
+        "builtin": true,
+        "es2024": true
+    },
+    "categories": {
+        "correctness": "error",
+        "suspicious": "warn",
+        "perf": "warn"
+    },
+    "rules": {
+        "no-console": "error",
+        "no-debugger": "error",
+        "eqeqeq": ["error", "always"],
+        "no-var": "error",
+        "prefer-const": "error",
+        "object-shorthand": "error",
+        "prefer-template": "error",
+        "unicorn/prefer-dom-node-append": "error",
+        "unicorn/prefer-dom-node-remove": "error",
+        "unicorn/prefer-dom-node-text-content": "error",
+        "unicorn/prefer-query-selector": "error",
+        "unicorn/prefer-add-event-listener": "error",
+        "typescript/no-explicit-any": "error",
+        "typescript/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+        "promise/always-return": "error",
+        "promise/catch-or-return": "error",
+        "oxc/no-accumulating-spread": "error"
+    },
+    "overrides": [
+        {
+            "files": ["**/*.config.json", ".oxlintrc.json", ".prettierrc.json"],
+            "rules": {
+                "no-console": "off"
+            }
+        }
+    ]
 }
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,3 @@
+dist
+node_modules
+bun.lock
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,9 @@
+{
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "trailingComma": "none",
+    "arrowParens": "always"
+}
--- a/bun.lock
+++ b/bun.lock
@ -10,6 +10,7 @@
      },
      "devDependencies": {
        "oxlint": "^1.85.0",
+        "prettier": "^3.9.9",
        "typescript": "~6.0.2",
        "vite": "^8.3.0",
      },
@ -146,6 +147,8 @@

    "postcss": ["postcss@8.5.28", "", { "dependencies": { "nanoid": "^3.3.18", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A=="],

+    "prettier": ["prettier@3.9.9", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-Z/CJHIkdujO/OtN7nXUii0Rf3VT5SRuhjBA82Xvu2XhBUgX3nhP67T0LHceBdQLex7OOFGTox+Q5Yg8Jk2Qivg=="],
+
    "rolldown": ["rolldown@1.2.10", "", { "dependencies": { "@oxc-project/types": "=0.151.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm-eabi": "1.2.10", "@rolldown/binding-android-arm64": "1.2.10", "@rolldown/binding-darwin-arm64": "1.2.10", "@rolldown/binding-darwin-x64": "1.2.10", "@rolldown/binding-freebsd-x64": "1.2.10", "@rolldown/binding-linux-arm-gnueabihf": "1.2.10", "@rolldown/binding-linux-arm64-gnu": "1.2.10", "@rolldown/binding-linux-arm64-musl": "1.2.10", "@rolldown/binding-linux-ppc64-gnu": "1.2.10", "@rolldown/binding-linux-s390x-gnu": "1.2.10", "@rolldown/binding-linux-x64-gnu": "1.2.10", "@rolldown/binding-linux-x64-musl": "1.2.10", "@rolldown/binding-openharmony-arm64": "1.2.10", "@rolldown/binding-win32-arm64-msvc": "1.2.10", "@rolldown/binding-win32-x64-msvc": "1.2.10" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-OxkA08pSryMK7B3XiFA09B4OJ1xJMPgIYCBMY2xchzpqgBGsV1o0DetPAE+Sl3N3L4oCPiEzmHVSOj7iR04Zog=="],

    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
--- a/index.html
+++ b/index.html
@ -1,29 +1,25 @@
 <!doctype html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>p/slides</title>
+    </head>

-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>p/slides</title>
-</head>
-
-<body>
-  <div class="container">
-    <div class="menubar"><b>p/slides</b></div>
-    <div class="slidelist">
-      <div class="slide-list-header">
-        <span>Slides</span>
-        <button class="add-slide" type="button" aria-label="Add slide">+</button>
-      </div>
-      <div class="slide-list-items"></div>
-    </div>
-    <div class="code"></div>
-    <div class="preview">
-      <div class="slide"></div>
-    </div>
-  </div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>
+    <body>
+        <div class="container">
+            <div class="menubar"><b>p/slides</b></div>
+            <div class="slidelist">
+                <div class="slide-list-header">
+                    <span>Slides</span>
+                    <button class="add-slide" type="button" aria-label="Add slide">+</button>
+                </div>
+                <div class="slide-list-items"></div>
+            </div>
+            <div class="code"></div>
+            <div class="preview"></div>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>
--- a/package.json
+++ b/package.json
@ -1,22 +1,25 @@
 {
-  "name": "psslides",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "oxlint",
-    "lint:fix": "oxlint --fix",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "oxlint": "^1.85.0",
-    "typescript": "~6.0.2",
-    "vite": "^8.3.0"
-  },
-  "dependencies": {
-    "emmet-monaco-es": "^5.7.0",
-    "monaco-editor": "0.55.1"
-  }
+    "name": "psslides",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "oxlint",
+        "lint:fix": "oxlint --fix",
+        "format": "prettier --write .",
+        "format:check": "prettier --check .",
+        "preview": "vite preview"
+    },
+    "devDependencies": {
+        "oxlint": "^1.85.0",
+        "prettier": "^3.9.9",
+        "typescript": "~6.0.2",
+        "vite": "^8.3.0"
+    },
+    "dependencies": {
+        "emmet-monaco-es": "^5.7.0",
+        "monaco-editor": "0.55.1"
+    }
 }
--- a/src/code-to-element.ts
+++ b/src/code-to-element.ts
@ -1,56 +1,57 @@
 import { domToSvgDataUrl } from './dom-to-image'

 export interface CodeToElementOptions {
-  title?: string
-  allowScripts?: boolean
-  styles?: string[]
+    title?: string
+    allowScripts?: boolean
+    styles?: string[]
 }

-export function codeToElement(
-  code: string,
-  options: CodeToElementOptions = {}
-): HTMLIFrameElement {
-  const iframe = document.createElement('iframe')
-  const sandbox = new Set<string>()
+export function codeToElement(code: string, options: CodeToElementOptions = {}): HTMLIFrameElement {
+    const iframe = document.createElement('iframe')
+    const sandbox = new Set<string>()

-  if (!options.allowScripts) {
-    sandbox.add('allow-same-origin')
-  } else {
-    sandbox.add('allow-scripts')
-  }
+    if (!options.allowScripts) {
+        sandbox.add('allow-same-origin')
+    } else {
+        sandbox.add('allow-scripts')
+    }

-  iframe.title = options.title ?? 'Rendered code'
-  iframe.setAttribute('sandbox', Array.from(sandbox).join(' '))
-  iframe.srcdoc = `<!doctype html><html><head><meta charset="UTF-8"><style>html,body{margin:0;min-height:100%;}</style>${(options.styles ?? []).join('\n')}</head><body>${code}</body></html>`
+    iframe.title = options.title ?? 'Rendered code'
+    iframe.setAttribute('sandbox', Array.from(sandbox).join(' '))
+    iframe.srcdoc = `<!doctype html><html><head><meta charset="UTF-8"><style>html,body{margin:0;min-height:100%;}</style>${(options.styles ?? []).join('\n')}</head><body>${code}</body></html>`

-  return iframe
+    return iframe
 }

 export async function createCodeThumbnail(
-  code: string,
-  options: CodeToElementOptions = {}
+    code: string,
+    options: CodeToElementOptions = {}
 ): Promise<HTMLImageElement> {
-  const iframe = codeToElement(code, { title: 'Code thumbnail', ...options, allowScripts: false })
-  iframe.style.width = '640px'
-  iframe.style.height = '360px'
-  iframe.style.position = 'fixed'
-  iframe.style.left = '-10000px'
-  iframe.style.border = '0'
-  document.body.appendChild(iframe)
+    const iframe = codeToElement(code, { title: 'Code thumbnail', ...options, allowScripts: false })
+    iframe.style.width = '640px'
+    iframe.style.height = '360px'
+    iframe.style.position = 'fixed'
+    iframe.style.left = '-10000px'
+    iframe.style.border = '0'
+    document.body.append(iframe)

-  try {
-    await new Promise<void>((resolve, reject) => {
-      iframe.addEventListener('load', () => resolve(), { once: true })
-      iframe.addEventListener('error', () => reject(new Error('Unable to render code thumbnail')), { once: true })
-    })
+    try {
+        await new Promise<void>((resolve, reject) => {
+            iframe.addEventListener('load', () => resolve(), { once: true })
+            iframe.addEventListener(
+                'error',
+                () => reject(new Error('Unable to render code thumbnail')),
+                { once: true }
+            )
+        })

-    const content = iframe.contentDocument?.body
-    const thumbnail = document.createElement('img')
-    if (content) {
-      thumbnail.src = domToSvgDataUrl(content, { width: 640, height: 360 })
+        const content = iframe.contentDocument?.body
+        const thumbnail = document.createElement('img')
+        if (content) {
+            thumbnail.src = domToSvgDataUrl(content, { width: 640, height: 360 })
+        }
+        return thumbnail
+    } finally {
+        iframe.remove()
    }
-    return thumbnail
-  } finally {
-    iframe.remove()
-  }
 }
--- a/src/dom-to-image.ts
+++ b/src/dom-to-image.ts
@ -1,92 +1,50 @@
 export interface DomExportOptions {
-  width?: number
-  height?: number
-  scale?: number
+    width?: number
+    height?: number
 }

 function getElementSize(element: Element) {
-  const rect = element.getBoundingClientRect()
-  return {
-    width: Math.max(1, Math.ceil(rect.width)),
-    height: Math.max(1, Math.ceil(rect.height))
-  }
+    const rect = element.getBoundingClientRect()
+    return {
+        width: Math.max(1, Math.ceil(rect.width)),
+        height: Math.max(1, Math.ceil(rect.height))
+    }
 }

 function copyComputedStyles(source: Element, target: Element) {
-  const computedStyle = window.getComputedStyle(source)
-  const style = Array.from(computedStyle)
-    .map((property) => `${property}:${computedStyle.getPropertyValue(property)}`)
-    .join(';')
+    const computedStyle = window.getComputedStyle(source)
+    const style = Array.from(computedStyle)
+        .map((property) => `${property}:${computedStyle.getPropertyValue(property)}`)
+        .join(';')

-  target.setAttribute('style', style)
+    target.setAttribute('style', style)
 }

-function cloneWithStyles(source: Node, target: Node) {
-  if (source.nodeType === Node.ELEMENT_NODE && target.nodeType === Node.ELEMENT_NODE) {
-    copyComputedStyles(source as Element, target as Element)
-  }
+function cloneWithStyles(source: Node, target: ParentNode) {
+    if (source.nodeType === Node.ELEMENT_NODE && target.nodeType === Node.ELEMENT_NODE) {
+        copyComputedStyles(source as Element, target as Element)
+    }

-  source.childNodes.forEach((child) => {
-    const clonedChild = child.cloneNode(false)
-    cloneWithStyles(child, clonedChild)
-    target.appendChild(clonedChild)
-  })
+    source.childNodes.forEach((child) => {
+        const clonedChild = child.cloneNode(false) as ParentNode
+        cloneWithStyles(child, clonedChild)
+        target.append(clonedChild)
+    })
 }

 function createSvg(element: Element, options: DomExportOptions) {
-  const size = getElementSize(element)
-  const width = options.width ?? size.width
-  const height = options.height ?? size.height
-  const clone = element.cloneNode(false) as Element
-  cloneWithStyles(element, clone)
-  const content = new XMLSerializer().serializeToString(clone)
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject width="100%" height="100%">${content}</foreignObject></svg>`
+    const size = getElementSize(element)
+    const width = options.width ?? size.width
+    const height = options.height ?? size.height
+    const clone = element.cloneNode(false) as Element
+    cloneWithStyles(element, clone)
+    const content = new XMLSerializer().serializeToString(clone)
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject width="100%" height="100%">${content}</foreignObject></svg>`

-  return { svg, width, height }
+    return { svg, width, height }
 }

-export function domToSvgDataUrl(
-  element: Element,
-  options: DomExportOptions = {}
-): string {
-  const { svg } = createSvg(element, options)
-  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
-}
-
-export async function domToCanvas(
-  element: Element,
-  options: DomExportOptions = {}
-): Promise<HTMLCanvasElement> {
-  const size = getElementSize(element)
-  const width = options.width ?? size.width
-  const height = options.height ?? size.height
-  const scale = options.scale ?? 1
-  const svgDataUrl = domToSvgDataUrl(element, options)
-  const image = new Image()
-
-  await new Promise<void>((resolve, reject) => {
-    image.onload = () => resolve()
-    image.onerror = () => reject(new Error('Unable to render DOM export as an image'))
-    image.src = svgDataUrl
-  })
-
-  const canvas = document.createElement('canvas')
-  canvas.width = Math.max(1, Math.ceil(width * scale))
-  canvas.height = Math.max(1, Math.ceil(height * scale))
-  const context = canvas.getContext('2d')
-
-  if (!context) {
-    throw new Error('Unable to create a canvas context')
-  }
-
-  context.drawImage(image, 0, 0, canvas.width, canvas.height)
-  return canvas
-}
-
-export async function domToPngDataUrl(
-  element: Element,
-  options: DomExportOptions = {}
-): Promise<string> {
-  const canvas = await domToCanvas(element, options)
-  return canvas.toDataURL('image/png')
+export function domToSvgDataUrl(element: Element, options: DomExportOptions = {}): string {
+    const { svg } = createSvg(element, options)
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
 }
--- a/src/editor.ts
+++ b/src/editor.ts
@ -8,27 +8,24 @@ emmetHTML(monaco, ['html'])
 emmetCSS(monaco, ['css', 'scss', 'less'])

 self.MonacoEnvironment = {
-  getWorker(_, label) {
-    if (label === 'css' || label === 'scss' || label === 'less') {
-      return new cssWorker()
+    getWorker(_, label) {
+        if (label === 'css' || label === 'scss' || label === 'less') {
+            return new cssWorker()
+        }
+        if (label === 'html' || label === 'handlebars' || label === 'razor') {
+            return new htmlWorker()
+        }
+        return new editorWorker()
    }
-    if (label === 'html' || label === 'handlebars' || label === 'razor') {
-      return new htmlWorker()
-    }
-    return new editorWorker()
-  }
 }

 const MONACO_PARENT = '.code'

 export function createEditor() {
-  return monaco.editor.create(
-    document.querySelector(MONACO_PARENT)!,
-    {
-      value: 'test',
-      language: 'html',
-      theme: 'vs-dark',
-      automaticLayout: true
-    }
-  )
-}
+    return monaco.editor.create(document.querySelector(MONACO_PARENT)!, {
+        value: 'test',
+        language: 'html',
+        theme: 'vs-dark',
+        automaticLayout: true
+    })
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -67,7 +67,7 @@ async function generateSlideThumbnail(slide: Slide, i: number) {

    const thumbnail = await createCodeThumbnail(slide.code)
    slideInList.append(slideNumber, thumbnail)
-    slideElement.appendChild(slideInList)
+    slideElement.append(slideInList)

    if (i !== -1) {
        const deleteButton = document.createElement('button')
@ -78,7 +78,7 @@ async function generateSlideThumbnail(slide: Slide, i: number) {
        deleteButton.addEventListener('click', () => {
            deleteSlide(Number(slideElement.dataset.slideId))
        })
-        slideElement.appendChild(deleteButton)
+        slideElement.append(deleteButton)
    }

    if (i === -1) {
@ -110,22 +110,45 @@ async function refreshThumbnail(index: number, slide: Slide) {
    updateSelection()
 }

+const THUMBNAIL_CONCURRENCY = 6
+
+async function mapWithConcurrency<T, R>(
+    items: T[],
+    limit: number,
+    map: (item: T, index: number) => Promise<R>
+): Promise<R[]> {
+    const results: R[] = []
+    let nextIndex = 0
+
+    async function worker() {
+        while (nextIndex < items.length) {
+            const index = nextIndex++
+            // oxlint-disable-next-line no-await-in-loop -- each worker claims one index at a time; the await is what bounds concurrency
+            results[index] = await map(items[index], index)
+        }
+    }
+
+    await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker))
+    return results
+}
+
 async function setSlideList() {
-    const slideListSlidesList = [{ code: globalSlide }, ...slides]
+    const allSlides = [{ code: globalSlide }, ...slides]
    slideList.replaceChildren()
    slideElements.clear()
    globalSlideElement = null

-    for (let i = -1; i < slides.length; i++) {
-        slideList.appendChild(await generateSlideThumbnail(slideListSlidesList[i + 1], i))
-    }
+    const elements = await mapWithConcurrency(allSlides, THUMBNAIL_CONCURRENCY, (slide, index) =>
+        generateSlideThumbnail(slide, index - 1)
+    )
+    slideList.append(...elements)
    updateSelection()
 }

 function updateSlideOrder() {
    if (globalSlideElement) {
        globalSlideElement.dataset.slideId = '-1'
-        slideList.appendChild(globalSlideElement)
+        slideList.append(globalSlideElement)
    }

    for (const [index, slide] of slides.entries()) {
@ -141,8 +164,10 @@ function updateSlideOrder() {
        if (slideNumber) {
            slideNumber.textContent = `${index + 1}`
        }
-        slideElement.querySelector<HTMLButtonElement>('.delete-slide')?.setAttribute('aria-label', `Delete slide ${index + 1}`)
-        slideList.appendChild(slideElement)
+        slideElement
+            .querySelector<HTMLButtonElement>('.delete-slide')
+            ?.setAttribute('aria-label', `Delete slide ${index + 1}`)
+        slideList.append(slideElement)
    }
    updateSelection()
 }
@ -190,7 +215,7 @@ addSlideButton.addEventListener('click', async () => {
    const slide = { code: '' }
    slides.push(slide)
    const slideElement = await generateSlideThumbnail(slide, slides.length - 1)
-    slideList.appendChild(slideElement)
+    slideList.append(slideElement)
    updateSlideOrder()
    setSlide(slides.length - 1)
 })
--- a/src/style.css
+++ b/src/style.css
@ -1,209 +1,201 @@
 :root {
-  color-scheme: dark;
+    color-scheme: dark;

-  --bg: #181818;
-  --bg-raised: #202020;
-  --bg-sunken: #101010;
+    --bg: #181818;
+    --bg-raised: #202020;
+    --bg-sunken: #101010;

-  --text: #e8e8e8;
-  --text-muted: #a0a0a0;
+    --text: #e8e8e8;
+    --text-muted: #a0a0a0;

-  --border-color: #3f3f3f;
+    --border-color: #3f3f3f;

-  --accent: #008800;
-  --accent-text: #ffffff;
+    --accent: #008800;
+    --accent-text: #ffffff;

-  --slide-bg: #ffffff;
-  --slide-border: #000000;
+    --slide-bg: #ffffff;
+    --slide-border: #000000;
 }

 body {
-  margin: 0;
-  font-family: sans-serif;
-  background: var(--bg);
-  color: var(--text);
+    margin: 0;
+    font-family: sans-serif;
+    background: var(--bg);
+    color: var(--text);
 }

 .container {
-  display: grid;
-  grid-template-columns: minmax(0, 0.6fr) minmax(0, 40%) minmax(0, 1fr);
-  grid-template-rows: 0.03fr 1fr;
-  gap: 0;
-  grid-auto-flow: row;
-  grid-template-areas:
-    "menubar menubar menubar"
-    "slidelist code preview";
-  width: 100vw;
-  height: 100vh;
+    display: grid;
+    grid-template-columns: minmax(0, 0.6fr) minmax(0, 40%) minmax(0, 1fr);
+    grid-template-rows: 0.03fr 1fr;
+    gap: 0;
+    grid-auto-flow: row;
+    grid-template-areas:
+        'menubar menubar menubar'
+        'slidelist code preview';
+    width: 100vw;
+    height: 100vh;
 }

 .menubar {
-  grid-area: menubar;
-  background-color: var(--accent);
-  color: var(--accent-text);
-  display: flex;
-  align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  border-bottom: 1px solid var(--border-color);
+    grid-area: menubar;
+    background-color: var(--accent);
+    color: var(--accent-text);
+    display: flex;
+    align-items: center;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-bottom: 1px solid var(--border-color);
 }

 .slidelist {
-  grid-area: slidelist;
-  min-width: 0;
-  background-color: var(--bg);
-  border-right: 1px solid var(--border-color);
-  overflow-y: auto;
+    grid-area: slidelist;
+    min-width: 0;
+    background-color: var(--bg);
+    border-right: 1px solid var(--border-color);
+    overflow-y: auto;
 }

 .slide-list-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 3rem;
-  padding: 0 1rem;
-  border-bottom: 1px solid var(--border-color);
-  color: var(--text);
-  font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 3rem;
+    padding: 0 1rem;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text);
+    font-weight: 600;
 }

 .add-slide {
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0;
-  border: 1px solid var(--border-color);
-  background: var(--bg-raised);
-  color: var(--text);
-  font-size: 1.1rem;
-  line-height: 1;
-  cursor: pointer;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    border: 1px solid var(--border-color);
+    background: var(--bg-raised);
+    color: var(--text);
+    font-size: 1.1rem;
+    line-height: 1;
+    cursor: pointer;
 }

 .add-slide:hover,
 .add-slide:focus-visible,
 .delete-slide:hover,
 .delete-slide:focus-visible {
-  border-color: var(--accent);
-  color: var(--accent-text);
-  background: var(--accent);
-  outline: none;
+    border-color: var(--accent);
+    color: var(--accent-text);
+    background: var(--accent);
+    outline: none;
 }

 .slide-list-items {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1rem;
 }

 .code {
-  grid-area: code;
-  min-width: 0;
-  background-color: var(--bg-sunken);
-  border-right: 1px solid var(--border-color);
+    grid-area: code;
+    min-width: 0;
+    background-color: var(--bg-sunken);
+    border-right: 1px solid var(--border-color);
 }

 .preview {
-  grid-area: preview;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  background-color: var(--bg);
-}
-
-.slide {
-  display: block;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  background: var(--slide-bg);
-  border: 1px solid var(--slide-border);
+    grid-area: preview;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background-color: var(--bg);
 }

 .slide-list-item {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1.25rem minmax(0, 1fr);
-  gap: 0.4rem;
-  align-items: start;
-  min-width: 0;
+    position: relative;
+    display: grid;
+    grid-template-columns: 1.25rem minmax(0, 1fr);
+    gap: 0.4rem;
+    align-items: start;
+    min-width: 0;
 }

 .slide-in-list {
-  grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns: 1.25rem minmax(0, 1fr);
-  gap: 0.4rem;
-  align-items: start;
-  width: 100%;
-  min-width: 0;
-  padding: 0.35rem;
-  border: 1px solid var(--slide-border);
-  background: var(--bg-raised);
-  color: var(--text);
-  text-align: left;
-  cursor: pointer;
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 1.25rem minmax(0, 1fr);
+    gap: 0.4rem;
+    align-items: start;
+    width: 100%;
+    min-width: 0;
+    padding: 0.35rem;
+    border: 1px solid var(--slide-border);
+    background: var(--bg-raised);
+    color: var(--text);
+    text-align: left;
+    cursor: pointer;
 }

 .slide-in-list:hover,
 .slide-in-list:focus-visible {
-  border-color: var(--accent);
-  outline: none;
+    border-color: var(--accent);
+    outline: none;
 }

 .slide-list-item.selected .slide-in-list {
-  border-color: var(--accent);
-  box-shadow: inset 2px 0 0 var(--accent);
+    border-color: var(--accent);
+    box-shadow: inset 2px 0 0 var(--accent);
 }

 .slide-number {
-  display: block;
-  min-height: 1rem;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-align: center;
+    display: block;
+    min-height: 1rem;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    text-align: center;
 }

 .global-slide {
-  padding-left: 0.25rem;
-  border-left: 2px solid var(--accent);
+    padding-left: 0.25rem;
+    border-left: 2px solid var(--accent);
 }

 .global-slide .slide-number {
-  color: var(--accent);
-  font-weight: 700;
+    color: var(--accent);
+    font-weight: 700;
 }

 .slide-in-list img {
-  display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: 16 / 9;
-  object-fit: contain;
-  background: var(--slide-bg);
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16 / 9;
+    object-fit: contain;
+    background: var(--slide-bg);
 }

 .delete-slide {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  display: grid;
-  place-items: center;
-  width: 1.4rem;
-  height: 1.4rem;
-  padding: 0;
-  border: 1px solid var(--border-color);
-  background: var(--bg-raised);
-  color: var(--text);
-  font-size: 1rem;
-  line-height: 1;
-  opacity: 0;
-  cursor: pointer;
+    position: absolute;
+    top: 0.25rem;
+    right: 0.25rem;
+    display: grid;
+    place-items: center;
+    width: 1.4rem;
+    height: 1.4rem;
+    padding: 0;
+    border: 1px solid var(--border-color);
+    background: var(--bg-raised);
+    color: var(--text);
+    font-size: 1rem;
+    line-height: 1;
+    opacity: 0;
+    cursor: pointer;
 }

 .slide-list-item:hover .delete-slide,
 .delete-slide:focus-visible {
-  opacity: 1;
-}
+    opacity: 1;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,24 +1,24 @@
 {
-  "compilerOptions": {
-    "target": "es2023",
-    "module": "esnext",
-    "lib": ["ES2023", "DOM"],
-    "types": ["vite/client"],
-    "allowArbitraryExtensions": true,
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "target": "es2023",
+        "module": "esnext",
+        "lib": ["ES2023", "DOM"],
+        "types": ["vite/client"],
+        "allowArbitraryExtensions": true,
+        "skipLibCheck": true,

-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,

-    /* Linting */
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
+        /* Linting */
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"]
 }