From b356b80f8c86d110951301b83607de245b4ef6cc Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 30 Aug 2026 17:44:39 -0400
Subject: [PATCH] refac

---
 src/lib/components/common/PDFViewer.svelte   | 27 ++++++++++++--------
 src/lib/components/common/PptxPreview.svelte | 21 +++++++++------
 2 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/common/PDFViewer.svelte b/src/lib/components/common/PDFViewer.svelte
index c8dfaabf35..badbb8ac58 100644
--- a/src/lib/components/common/PDFViewer.svelte
+++ b/src/lib/components/common/PDFViewer.svelte
@@ -386,6 +386,10 @@
 		void selectPage(selectedPage + (e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 1));
 	};
 
+	const focusViewer = () => {
+		if (!outerContainer?.contains(document.activeElement)) outerContainer?.focus();
+	};
+
 	const loadPdf = async () => {
 		if (!url && !data) return;
 
@@ -462,9 +466,7 @@
 	});
 </script>
 
-<svelte:window on:keydown={handleKeyDown} />
-
-<div class="relative {className}">
+	<div class="relative {className}">
 	{#if loading}
 		<div class="absolute inset-0 flex items-center justify-center">
 			<Spinner className="size-5" />
@@ -475,14 +477,17 @@
 		</div>
 	{/if}
 
-	<div
-		class={singlePage
-			? 'overflow-hidden h-full flex items-center justify-center overscroll-contain'
-			: 'overflow-y-auto h-full'}
-		bind:this={outerContainer}
-		on:scroll={handleScroll}
-		on:wheel|nonpassive={handleWheel}
-	>
+		<div
+			class={singlePage
+				? 'overflow-hidden h-full flex items-center justify-center overscroll-contain'
+				: 'overflow-y-auto h-full'}
+			bind:this={outerContainer}
+			tabindex="0"
+			on:scroll={handleScroll}
+			on:wheel|nonpassive={handleWheel}
+			on:pointerdown={focusViewer}
+			on:keydown={handleKeyDown}
+		>
 		<div bind:this={sceneElement} class={singlePage ? '' : 'w-full'}></div>
 	</div>
 
diff --git a/src/lib/components/common/PptxPreview.svelte b/src/lib/components/common/PptxPreview.svelte
index d94708ddbf..dc9b54d7a5 100644
--- a/src/lib/components/common/PptxPreview.svelte
+++ b/src/lib/components/common/PptxPreview.svelte
@@ -121,6 +121,10 @@
 		}
 	};
 
+	const focusPreview = () => {
+		if (!rootEl?.contains(document.activeElement)) rootEl?.focus();
+	};
+
 	const zoomIn = () => {
 		if (!pzInstance || !stageEl) return;
 		pzInstance.zoomTo(stageEl.clientWidth / 2, stageEl.clientHeight / 2, 1.25);
@@ -227,14 +231,15 @@
 	});
 </script>
 
-<svelte:window on:keydown={handleKeyDown} />
-
-<div
-	bind:this={rootEl}
-	class="relative grid {hideThumbs
-		? 'grid-cols-[minmax(0,1fr)]'
-		: 'grid-cols-[144px_minmax(0,1fr)]'} min-h-0 bg-transparent text-gray-900 dark:text-gray-100 {className}"
->
+	<div
+		bind:this={rootEl}
+		tabindex="0"
+		on:keydown={handleKeyDown}
+		on:pointerdown={focusPreview}
+		class="relative grid {hideThumbs
+			? 'grid-cols-[minmax(0,1fr)]'
+			: 'grid-cols-[144px_minmax(0,1fr)]'} min-h-0 bg-transparent text-gray-900 dark:text-gray-100 {className}"
+	>
 	<aside
 		class={hideThumbs
 			? 'hidden'