trap focus

src/components/AppShell.jsx

@@ -9,9 +9,20 @@ import { NAV_ITEMS } from '../nav';
 
 const SIDEBAR_WIDTH = 144;
 
+const FOCUSABLE =
+  'a, button, input, textarea, select, [role="button"], [role="menuitem"], [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+
+function preserveFocusOnBackground(e) {
+  if (e.target.closest(FOCUSABLE)) return;
+  e.preventDefault();
+}
+
 export default function AppShell() {
   return (
-    <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}>
+    <Box
+      onMouseDown={preserveFocusOnBackground}
+      sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}
+    >
       <Box
         component="nav"
         sx={(theme) => ({