diff --git a/.vscode/settings.json b/.vscode/settings.json
index eef649d84..fbfba239a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -78,7 +78,13 @@
     "eslint.workingDirectories": [
         "libraries/*",
     ],
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
 }
diff --git a/apps/demo/package.json b/apps/demo/package.json
index 17f218a09..ecc643ddf 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -3,14 +3,14 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "postinstall": "fetch-scrcpy-server 1.24",
+        "postinstall": "fetch-scrcpy-server 1.25",
         "dev": "next dev",
         "build": "next build",
         "start": "next start",
         "lint": "next lint"
     },
     "dependencies": {
-        "@fluentui/react": "^8.103.10",
+        "@fluentui/react": "^8.104.0",
         "@fluentui/react-file-type-icons": "^8.8.4",
         "@fluentui/react-hooks": "^8.6.14",
         "@fluentui/react-icons": "^2.0.190",
@@ -33,20 +33,20 @@
         "@yume-chan/struct": "workspace:^0.0.17",
         "mobx": "^6.7.0",
         "mobx-react-lite": "^3.4.0",
-        "next": "13.0.7",
+        "next": "13.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "xterm": "^5.1.0",
-        "xterm-addon-fit": "^0.6.0",
-        "xterm-addon-search": "^0.10.0",
+        "xterm-addon-fit": "^0.7.0",
+        "xterm-addon-search": "^0.11.0",
         "xterm-addon-webgl": "^0.14.0"
     },
     "devDependencies": {
         "@mdx-js/loader": "^2.2.1",
-        "@next/mdx": "^13.0.7",
+        "@next/mdx": "^13.1.0",
         "@types/react": "18.0.26",
         "eslint": "^8.30.0",
-        "eslint-config-next": "13.0.7",
+        "eslint-config-next": "13.1.0",
         "source-map-loader": "^4.0.1",
         "typescript": "^4.9.4"
     }
diff --git a/apps/demo/src/components/device-view.tsx b/apps/demo/src/components/device-view.tsx
index c5cd85ae8..ad88df69f 100644
--- a/apps/demo/src/components/device-view.tsx
+++ b/apps/demo/src/components/device-view.tsx
@@ -1,14 +1,27 @@
-import { mergeStyleSets, StackItem } from '@fluentui/react';
-import { ComponentType, CSSProperties, ReactNode, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { forwardRef } from '../utils/with-display-name';
-import { ResizeObserver, Size } from './resize-observer';
+import { StackItem } from "@fluentui/react";
+import { makeStyles } from "@griffel/react";
+import {
+    CSSProperties,
+    ComponentType,
+    ReactNode,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+import { forwardRef } from "../utils/with-display-name";
+import { ResizeObserver, Size } from "./resize-observer";
 
 export interface DeviceViewProps {
     width: number;
 
     height: number;
 
-    BottomElement?: ComponentType<{ className: string, style: CSSProperties, children: ReactNode; }>;
+    BottomElement?: ComponentType<{
+        className: string;
+        style: CSSProperties;
+        children: ReactNode;
+    }>;
 
     children?: ReactNode;
 }
@@ -17,114 +30,128 @@ export interface DeviceViewRef {
     enterFullscreen(): void;
 }
 
-export const DeviceView = forwardRef<DeviceViewRef>('DeviceView')(({
-    width,
-    height,
-    BottomElement,
-    children,
-}: DeviceViewProps, ref) => {
-    const styles = mergeStyleSets({
-        outer: {
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'black',
-        },
-        inner: {
-            position: 'absolute',
-            transformOrigin: 'top left',
-        },
-        bottom: {
-            position: 'absolute',
-        },
-    });
-
-    const [containerSize, setContainerSize] = useState<Size>({ width: 0, height: 0 });
-    const [bottomSize, setBottomSize] = useState<Size>({ width: 0, height: 0 });
-
-    // Container size minus bottom element size
-    const usableSize = useMemo(() => ({
-        width: containerSize.width,
-        height: containerSize.height - bottomSize.height,
-    }), [containerSize, bottomSize]);
-
-    // Compute sizes after scaling
-    const childrenStyle = useMemo(() => {
-        let scale: number;
-        let childrenWidth: number;
-        let childrenHeight: number;
-        let childrenTop: number;
-        let childrenLeft: number;
-
-        if (width === 0 || usableSize.width === 0) {
-            scale = 1;
-            childrenWidth = 0;
-            childrenHeight = 0;
-            childrenTop = 0;
-            childrenLeft = 0;
-        } else {
-            const videoRatio = width / height;
-            const containerRatio = usableSize.width / usableSize.height;
-
-            if (videoRatio > containerRatio) {
-                scale = usableSize.width / width;
-                childrenWidth = usableSize.width;
-                childrenHeight = height * scale;
-                childrenTop = (usableSize.height - childrenHeight) / 2;
+const useClasses = makeStyles({
+    outer: {
+        width: "100%",
+        height: "100%",
+        backgroundColor: "black",
+    },
+    inner: {
+        position: "absolute",
+        transformOrigin: "top left",
+    },
+    bottom: {
+        position: "absolute",
+    },
+});
+
+export const DeviceView = forwardRef<DeviceViewRef>("DeviceView")(
+    ({ width, height, BottomElement, children }: DeviceViewProps, ref) => {
+        const classes = useClasses();
+
+        const [containerSize, setContainerSize] = useState<Size>({
+            width: 0,
+            height: 0,
+        });
+        const [bottomSize, setBottomSize] = useState<Size>({
+            width: 0,
+            height: 0,
+        });
+
+        // Container size minus bottom element size
+        const usableSize = useMemo(
+            () => ({
+                width: containerSize.width,
+                height: containerSize.height - bottomSize.height,
+            }),
+            [containerSize, bottomSize]
+        );
+
+        // Compute sizes after scaling
+        const childrenStyle = useMemo(() => {
+            let scale: number;
+            let childrenWidth: number;
+            let childrenHeight: number;
+            let childrenTop: number;
+            let childrenLeft: number;
+
+            if (width === 0 || usableSize.width === 0) {
+                scale = 1;
+                childrenWidth = 0;
+                childrenHeight = 0;
+                childrenTop = 0;
                 childrenLeft = 0;
             } else {
-                scale = usableSize.height / height;
-                childrenWidth = width * scale;
-                childrenHeight = usableSize.height;
-                childrenTop = 0;
-                childrenLeft = (usableSize.width - childrenWidth) / 2;
+                const videoRatio = width / height;
+                const containerRatio = usableSize.width / usableSize.height;
+
+                if (videoRatio > containerRatio) {
+                    scale = usableSize.width / width;
+                    childrenWidth = usableSize.width;
+                    childrenHeight = height * scale;
+                    childrenTop = (usableSize.height - childrenHeight) / 2;
+                    childrenLeft = 0;
+                } else {
+                    scale = usableSize.height / height;
+                    childrenWidth = width * scale;
+                    childrenHeight = usableSize.height;
+                    childrenTop = 0;
+                    childrenLeft = (usableSize.width - childrenWidth) / 2;
+                }
             }
-        }
-
-        return {
-            scale,
-            width: childrenWidth,
-            height: childrenHeight,
-            top: childrenTop,
-            left: childrenLeft,
-        };
-    }, [width, height, usableSize]);
-
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    useImperativeHandle(ref, () => ({
-        enterFullscreen() { containerRef.current!.requestFullscreen(); },
-    }), []);
-
-    return (
-        <StackItem grow styles={{ root: { position: 'relative' } }}>
-            <div ref={containerRef} className={styles.outer}>
-                <ResizeObserver onResize={setContainerSize} />
-
-                <div
-                    className={styles.inner}
-                    style={{
-                        top: childrenStyle.top,
-                        left: childrenStyle.left,
-                        width,
-                        height,
-                        transform: `scale(${childrenStyle.scale})`,
-                    }}
-                >
-                    {children}
-                </div>
 
-                {(!!width && !!BottomElement) && (
-                    <BottomElement
-                        className={styles.bottom}
+            return {
+                scale,
+                width: childrenWidth,
+                height: childrenHeight,
+                top: childrenTop,
+                left: childrenLeft,
+            };
+        }, [width, height, usableSize]);
+
+        const containerRef = useRef<HTMLDivElement | null>(null);
+        useImperativeHandle(
+            ref,
+            () => ({
+                enterFullscreen() {
+                    containerRef.current!.requestFullscreen();
+                },
+            }),
+            []
+        );
+
+        return (
+            <StackItem grow styles={{ root: { position: "relative" } }}>
+                <div ref={containerRef} className={classes.outer}>
+                    <ResizeObserver onResize={setContainerSize} />
+
+                    <div
+                        className={classes.inner}
                         style={{
-                            top: childrenStyle.top + childrenStyle.height,
+                            top: childrenStyle.top,
                             left: childrenStyle.left,
-                            width: childrenStyle.width,
+                            width,
+                            height,
+                            transform: `scale(${childrenStyle.scale})`,
                         }}
                     >
-                        <ResizeObserver onResize={setBottomSize} />
-                    </BottomElement>
-                )}
-            </div>
-        </StackItem >
-    );
-});
+                        {children}
+                    </div>
+
+                    {!!width && !!BottomElement && (
+                        <BottomElement
+                            className={classes.bottom}
+                            style={{
+                                top: childrenStyle.top + childrenStyle.height,
+                                left: childrenStyle.left,
+                                width: childrenStyle.width,
+                            }}
+                        >
+                            <ResizeObserver onResize={setBottomSize} />
+                        </BottomElement>
+                    )}
+                </div>
+            </StackItem>
+        );
+    }
+);
diff --git a/apps/demo/src/pages/_app.tsx b/apps/demo/src/pages/_app.tsx
index c82a2cf96..cbdc07602 100644
--- a/apps/demo/src/pages/_app.tsx
+++ b/apps/demo/src/pages/_app.tsx
@@ -1,80 +1,92 @@
-import { IComponentAsProps, IconButton, INavButtonProps, mergeStyles, mergeStyleSets, Nav, Stack, StackItem } from "@fluentui/react";
-import type { AppProps } from 'next/app';
+import {
+    IComponentAsProps,
+    INavButtonProps,
+    IconButton,
+    Nav,
+    Stack,
+    StackItem,
+} from "@fluentui/react";
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
+import type { AppProps } from "next/app";
 import Head from "next/head";
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import Link from "next/link";
+import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import { Connect, ErrorDialogProvider } from "../components";
-import '../styles/globals.css';
+import "../styles/globals.css";
 import { Icons } from "../utils";
-import { register as registerIcons } from '../utils/icons';
+import { register as registerIcons } from "../utils/icons";
 
 registerIcons();
 
 const ROUTES = [
     {
-        url: '/',
+        url: "/",
         icon: Icons.Bookmark,
-        name: 'README',
+        name: "README",
     },
     {
-        url: '/device-info',
+        url: "/device-info",
         icon: Icons.Phone,
-        name: 'Device Info',
+        name: "Device Info",
     },
     {
-        url: '/file-manager',
+        url: "/file-manager",
         icon: Icons.Folder,
-        name: 'File Manager',
+        name: "File Manager",
     },
     {
-        url: '/framebuffer',
+        url: "/framebuffer",
         icon: Icons.Camera,
-        name: 'Screen Capture',
+        name: "Screen Capture",
     },
     {
-        url: '/shell',
+        url: "/shell",
         icon: Icons.WindowConsole,
-        name: 'Interactive Shell',
+        name: "Interactive Shell",
     },
     {
-        url: '/scrcpy',
+        url: "/scrcpy",
         icon: Icons.PhoneLaptop,
-        name: 'Scrcpy',
+        name: "Scrcpy",
     },
     {
-        url: '/tcpip',
+        url: "/tcpip",
         icon: Icons.WifiSettings,
-        name: 'ADB over WiFi',
+        name: "ADB over WiFi",
     },
     {
-        url: '/install',
+        url: "/install",
         icon: Icons.Box,
-        name: 'Install APK',
+        name: "Install APK",
     },
     {
-        url: '/logcat',
+        url: "/logcat",
         icon: Icons.BookSearch,
-        name: 'Logcat',
+        name: "Logcat",
     },
     {
-        url: '/power',
+        url: "/power",
         icon: Icons.Power,
-        name: 'Power Menu',
+        name: "Power Menu",
     },
     {
-        url: '/bug-report',
+        url: "/bug-report",
         icon: Icons.Bug,
-        name: 'Bug Report',
+        name: "Bug Report",
     },
     {
-        url: '/packet-log',
+        url: "/packet-log",
         icon: Icons.TextGrammarError,
-        name: 'Packet Log',
+        name: "Packet Log",
     },
 ];
 
-function NavLink({ link, defaultRender: DefaultRender, ...props }: IComponentAsProps<INavButtonProps>) {
+function NavLink({
+    link,
+    defaultRender: DefaultRender,
+    ...props
+}: IComponentAsProps<INavButtonProps>) {
     if (!link) {
         return null;
     }
@@ -86,30 +98,32 @@ function NavLink({ link, defaultRender: DefaultRender, ...props }: IComponentAsP
     );
 }
 
+const useClasses = makeStyles({
+    titleContainer: {
+        ...shorthands.borderBottom("1px", "solid", "rgb(243, 242, 241)"),
+    },
+    hidden: {
+        display: "none",
+    },
+    title: {
+        ...shorthands.padding("4px", "0"),
+        fontSize: "20px",
+        textAlign: "center",
+    },
+    leftColumn: {
+        width: "270px",
+        paddingRight: "8px",
+        ...shorthands.borderRight("1px", "solid", "rgb(243, 242, 241)"),
+        overflowY: "auto",
+    },
+});
+
 function App({ Component, pageProps }: AppProps) {
-    const classNames = mergeStyleSets({
-        'title-container': {
-            borderBottom: '1px solid rgb(243, 242, 241)',
-        },
-        title: {
-            padding: '4px 0',
-            fontSize: 20,
-            textAlign: 'center',
-        },
-        'left-column': {
-            width: 270,
-            paddingRight: 8,
-            borderRight: '1px solid rgb(243, 242, 241)',
-            overflow: 'auto',
-        },
-        'right-column': {
-            borderLeft: '1px solid rgb(243, 242, 241)',
-        }
-    });
+    const classes = useClasses();
 
     const [leftPanelVisible, setLeftPanelVisible] = useState(false);
     const toggleLeftPanel = useCallback(() => {
-        setLeftPanelVisible(value => !value);
+        setLeftPanelVisible((value) => !value);
     }, []);
     useEffect(() => {
         setLeftPanelVisible(innerWidth > 650);
@@ -124,7 +138,11 @@ function App({ Component, pageProps }: AppProps) {
             </Head>
 
             <Stack verticalFill>
-                <Stack className={classNames['title-container']} horizontal verticalAlign="center">
+                <Stack
+                    className={classes.titleContainer}
+                    horizontal
+                    verticalAlign="center"
+                >
                     <IconButton
                         checked={leftPanelVisible}
                         title="Toggle Menu"
@@ -133,11 +151,11 @@ function App({ Component, pageProps }: AppProps) {
                     />
 
                     <StackItem grow>
-                        <div className={classNames.title}>Android Web Toolbox</div>
+                        <div className={classes.title}>Android Web Toolbox</div>
                     </StackItem>
 
                     <IconButton
-                        iconProps={{ iconName: 'PersonFeedback' }}
+                        iconProps={{ iconName: "PersonFeedback" }}
                         title="Feedback"
                         as="a"
                         href="https://github.com/yume-chan/ya-webadb/issues/new"
@@ -145,17 +163,36 @@ function App({ Component, pageProps }: AppProps) {
                     />
                 </Stack>
 
-                <Stack grow horizontal verticalFill disableShrink styles={{ root: { minHeight: 0, overflow: 'hidden', lineHeight: '1.5' } }}>
-                    <StackItem className={mergeStyles(classNames['left-column'], !leftPanelVisible && { display: 'none' })}>
+                <Stack
+                    grow
+                    horizontal
+                    verticalFill
+                    disableShrink
+                    styles={{
+                        root: {
+                            minHeight: 0,
+                            overflow: "hidden",
+                            lineHeight: "1.5",
+                        },
+                    }}
+                >
+                    <StackItem
+                        className={mergeClasses(
+                            classes.leftColumn,
+                            !leftPanelVisible && classes.hidden
+                        )}
+                    >
                         <Connect />
 
                         <Nav
-                            groups={[{
-                                links: ROUTES.map(route => ({
-                                    ...route,
-                                    key: route.url,
-                                })),
-                            }]}
+                            groups={[
+                                {
+                                    links: ROUTES.map((route) => ({
+                                        ...route,
+                                        key: route.url,
+                                    })),
+                                },
+                            ]}
                             linkAs={NavLink}
                             selectedKey={router.pathname}
                         />
diff --git a/apps/demo/src/pages/file-manager.tsx b/apps/demo/src/pages/file-manager.tsx
index f2d715d9e..badabac0c 100644
--- a/apps/demo/src/pages/file-manager.tsx
+++ b/apps/demo/src/pages/file-manager.tsx
@@ -1,19 +1,67 @@
-import { Breadcrumb, concatStyleSets, ContextualMenu, ContextualMenuItem, DetailsListLayoutMode, Dialog, DirectionalHint, IBreadcrumbItem, IColumn, Icon, IContextualMenuItem, IDetailsHeaderProps, IRenderFunction, Layer, MarqueeSelection, mergeStyleSets, Overlay, ProgressIndicator, Selection, ShimmeredDetailsList, Stack, StackItem } from '@fluentui/react';
-import { FileIconType, getFileTypeIconProps, initializeFileTypeIcons } from "@fluentui/react-file-type-icons";
-import { useConst } from '@fluentui/react-hooks';
-import { getIcon } from '@fluentui/style-utilities';
-import { AdbFeatures, ADB_SYNC_MAX_PACKET_SIZE, LinuxFileType, type AdbSyncEntry } from '@yume-chan/adb';
-import { ChunkStream } from '@yume-chan/stream-extra';
-import { action, autorun, makeAutoObservable, observable, runInAction } from "mobx";
+import {
+    Breadcrumb,
+    ContextualMenu,
+    ContextualMenuItem,
+    DetailsListLayoutMode,
+    Dialog,
+    DirectionalHint,
+    IBreadcrumbItem,
+    IColumn,
+    IContextualMenuItem,
+    IDetailsHeaderProps,
+    IRenderFunction,
+    Icon,
+    Layer,
+    MarqueeSelection,
+    Overlay,
+    ProgressIndicator,
+    Selection,
+    ShimmeredDetailsList,
+    Stack,
+    StackItem,
+    concatStyleSets,
+    mergeStyleSets,
+} from "@fluentui/react";
+import {
+    FileIconType,
+    getFileTypeIconProps,
+    initializeFileTypeIcons,
+} from "@fluentui/react-file-type-icons";
+import { useConst } from "@fluentui/react-hooks";
+import { getIcon } from "@fluentui/style-utilities";
+import {
+    ADB_SYNC_MAX_PACKET_SIZE,
+    AdbFeatures,
+    LinuxFileType,
+    type AdbSyncEntry,
+} from "@yume-chan/adb";
+import { ChunkStream } from "@yume-chan/stream-extra";
+import {
+    action,
+    autorun,
+    makeAutoObservable,
+    observable,
+    runInAction,
+} from "mobx";
 import { observer } from "mobx-react-lite";
 import { NextPage } from "next";
 import Head from "next/head";
 import Router, { useRouter } from "next/router";
-import path from 'path';
-import { useCallback, useEffect, useState } from 'react';
-import { CommandBar, NoSsr } from '../components';
-import { GlobalState } from '../state';
-import { asyncEffect, createFileStream, formatSize, formatSpeed, Icons, pickFile, ProgressStream, RouteStackProps, saveFile } from '../utils';
+import path from "path";
+import { useCallback, useEffect, useState } from "react";
+import { CommandBar, NoSsr } from "../components";
+import { GlobalState } from "../state";
+import {
+    Icons,
+    ProgressStream,
+    RouteStackProps,
+    asyncEffect,
+    createFileStream,
+    formatSize,
+    formatSpeed,
+    pickFile,
+    saveFile,
+} from "../utils";
 
 initializeFileTypeIcons();
 
@@ -28,21 +76,24 @@ function toListItem(item: AdbSyncEntry): ListItem {
 
 const classNames = mergeStyleSets({
     name: {
-        cursor: 'pointer',
-        '&:hover': {
-            textDecoration: 'underline',
+        cursor: "pointer",
+        "&:hover": {
+            textDecoration: "underline",
         },
     },
 });
 
-const renderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props?, defaultRender?) => {
+const renderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (
+    props?,
+    defaultRender?
+) => {
     if (!props || !defaultRender) {
         return null;
     }
 
     return defaultRender({
         ...props,
-        styles: concatStyleSets(props.styles, { root: { paddingTop: 0 } })
+        styles: concatStyleSets(props.styles, { root: { paddingTop: 0 } }),
     });
 };
 
@@ -58,10 +109,10 @@ function compareCaseInsensitively(a: string, b: string) {
 class FileManagerState {
     initial = true;
     visible = false;
-    path = '/';
+    path = "/";
     loading = false;
     items: ListItem[] = [];
-    sortKey: keyof ListItem = 'name';
+    sortKey: keyof ListItem = "name";
     sortDescending = false;
 
     uploading = false;
@@ -75,24 +126,27 @@ class FileManagerState {
     contextMenuTarget: MouseEvent | undefined = undefined;
 
     get breadcrumbItems(): IBreadcrumbItem[] {
-        let part = '';
-        const list: IBreadcrumbItem[] = this.path.split('/').filter(Boolean).map(segment => {
-            part += '/' + segment;
-            return {
-                key: part,
-                text: segment,
-                onClick: (e, item) => {
-                    if (!item) {
-                        return;
-                    }
-                    this.pushPathQuery(item.key);
-                },
-            };
-        });
+        let part = "";
+        const list: IBreadcrumbItem[] = this.path
+            .split("/")
+            .filter(Boolean)
+            .map((segment) => {
+                part += "/" + segment;
+                return {
+                    key: part,
+                    text: segment,
+                    onClick: (e, item) => {
+                        if (!item) {
+                            return;
+                        }
+                        this.pushPathQuery(item.key);
+                    },
+                };
+            });
         list.unshift({
-            key: '/',
-            text: 'Device',
-            onClick: () => this.pushPathQuery('/'),
+            key: "/",
+            text: "Device",
+            onClick: () => this.pushPathQuery("/"),
         });
         list[list.length - 1].isCurrentItem = true;
         delete list[list.length - 1].onClick;
@@ -105,11 +159,11 @@ class FileManagerState {
         switch (this.selectedItems.length) {
             case 0:
                 result.push({
-                    key: 'upload',
-                    text: 'Upload',
+                    key: "upload",
+                    text: "Upload",
                     iconProps: {
                         iconName: Icons.CloudArrowUp,
-                        style: { height: 20, fontSize: 20, lineHeight: 1.5 }
+                        style: { height: 20, fontSize: 20, lineHeight: 1.5 },
                     },
                     disabled: !GlobalState.device,
                     onClick: () => {
@@ -122,26 +176,39 @@ class FileManagerState {
                         })();
 
                         return false;
-                    }
+                    },
                 });
                 break;
             case 1:
                 if (this.selectedItems[0].type === LinuxFileType.File) {
                     result.push({
-                        key: 'download',
-                        text: 'Download',
+                        key: "download",
+                        text: "Download",
                         iconProps: {
                             iconName: Icons.CloudArrowDown,
-                            style: { height: 20, fontSize: 20, lineHeight: 1.5 }
+                            style: {
+                                height: 20,
+                                fontSize: 20,
+                                lineHeight: 1.5,
+                            },
                         },
                         onClick: () => {
                             (async () => {
                                 const sync = await GlobalState.device!.sync();
                                 try {
                                     const item = this.selectedItems[0];
-                                    const itemPath = path.resolve(this.path, item.name);
-                                    await sync.read(itemPath)
-                                        .pipeTo(saveFile(item.name, Number(item.size)));
+                                    const itemPath = path.resolve(
+                                        this.path,
+                                        item.name
+                                    );
+                                    await sync
+                                        .read(itemPath)
+                                        .pipeTo(
+                                            saveFile(
+                                                item.name,
+                                                Number(item.size)
+                                            )
+                                        );
                                 } catch (e: any) {
                                     GlobalState.showErrorDialog(e);
                                 } finally {
@@ -155,17 +222,19 @@ class FileManagerState {
             // fall through
             default:
                 result.push({
-                    key: 'delete',
-                    text: 'Delete',
+                    key: "delete",
+                    text: "Delete",
                     iconProps: {
                         iconName: Icons.Delete,
-                        style: { height: 20, fontSize: 20, lineHeight: 1.5 }
+                        style: { height: 20, fontSize: 20, lineHeight: 1.5 },
                     },
                     onClick: () => {
                         (async () => {
                             try {
                                 for (const item of this.selectedItems) {
-                                    const output = await GlobalState.device!.rm(path.resolve(this.path, item.name!));
+                                    const output = await GlobalState.device!.rm(
+                                        path.resolve(this.path, item.name!)
+                                    );
                                     if (output) {
                                         GlobalState.showErrorDialog(output);
                                         return;
@@ -178,7 +247,7 @@ class FileManagerState {
                             }
                         })();
                         return false;
-                    }
+                    },
                 });
                 break;
         }
@@ -201,8 +270,11 @@ class FileManagerState {
 
                 if (aSortKey === bSortKey) {
                     result = compareCaseInsensitively(a.name!, b.name!);
-                } else if (typeof aSortKey === 'string') {
-                    result = compareCaseInsensitively(aSortKey, bSortKey as string);
+                } else if (typeof aSortKey === "string") {
+                    result = compareCaseInsensitively(
+                        aSortKey,
+                        bSortKey as string
+                    );
                 } else {
                     result = aSortKey < bSortKey ? -1 : 1;
                 }
@@ -221,8 +293,8 @@ class FileManagerState {
 
         const list: IColumn[] = [
             {
-                key: 'type',
-                name: 'File Type',
+                key: "type",
+                name: "File Type",
                 iconName: Icons.Document20,
                 isIconOnly: true,
                 minWidth: ICON_SIZE,
@@ -239,24 +311,40 @@ class FileManagerState {
                             iconName = "linkedfolder16_svg";
                             break;
                         case LinuxFileType.Directory:
-                            ({ iconName } = getFileTypeIconProps({ type: FileIconType.folder }));
+                            ({ iconName } = getFileTypeIconProps({
+                                type: FileIconType.folder,
+                            }));
                             break;
                         case LinuxFileType.File:
-                            ({ iconName } = getFileTypeIconProps({ extension: path.extname(item.name!) }));
+                            ({ iconName } = getFileTypeIconProps({
+                                extension: path.extname(item.name!),
+                            }));
                             break;
                         default:
-                            ({ iconName } = getFileTypeIconProps({ type: FileIconType.genericFile }));
+                            ({ iconName } = getFileTypeIconProps({
+                                type: FileIconType.genericFile,
+                            }));
                             break;
                     }
 
                     // `@fluentui/react-file-type-icons` doesn't export icon src.
-                    const iconSrc = (getIcon(iconName)!.code as unknown as JSX.Element).props.src;
-                    return <Icon imageProps={{ crossOrigin: 'anonymous', src: iconSrc }} style={{ width: ICON_SIZE, height: ICON_SIZE }} />;
-                }
+                    const iconSrc = (
+                        getIcon(iconName)!.code as unknown as JSX.Element
+                    ).props.src;
+                    return (
+                        <Icon
+                            imageProps={{
+                                crossOrigin: "anonymous",
+                                src: iconSrc,
+                            }}
+                            style={{ width: ICON_SIZE, height: ICON_SIZE }}
+                        />
+                    );
+                },
             },
             {
-                key: 'name',
-                name: 'Name',
+                key: "name",
+                name: "Name",
                 minWidth: 0,
                 isRowHeader: true,
                 onRender(item: AdbSyncEntry) {
@@ -265,67 +353,76 @@ class FileManagerState {
                             {item.name}
                         </span>
                     );
-                }
+                },
             },
             {
-                key: 'permission',
-                name: 'Permission',
+                key: "permission",
+                name: "Permission",
                 minWidth: 0,
                 isCollapsible: true,
                 onRender(item: AdbSyncEntry) {
-                    return `${(item.mode >> 6 & 0b100).toString(8)}${(item.mode >> 3 & 0b100).toString(8)}${(item.mode & 0b100).toString(8)}`;
-                }
+                    return `${((item.mode >> 6) & 0b100).toString(8)}${(
+                        (item.mode >> 3) &
+                        0b100
+                    ).toString(8)}${(item.mode & 0b100).toString(8)}`;
+                },
             },
             {
-                key: 'size',
-                name: 'Size',
+                key: "size",
+                name: "Size",
                 minWidth: 0,
                 isCollapsible: true,
                 onRender(item: AdbSyncEntry) {
                     if (item.type === LinuxFileType.File) {
                         return formatSize(Number(item.size));
                     }
-                    return '';
-                }
+                    return "";
+                },
             },
             {
-                key: 'mtime',
-                name: 'Last Modified Time',
+                key: "mtime",
+                name: "Last Modified Time",
                 minWidth: 150,
                 isCollapsible: true,
                 onRender(item: AdbSyncEntry) {
                     return new Date(Number(item.mtime) * 1000).toLocaleString();
                 },
-            }
+            },
         ];
 
         if (GlobalState.device?.features?.includes(AdbFeatures.ListV2)) {
             list.push(
                 {
-                    key: 'ctime',
-                    name: 'Creation Time',
+                    key: "ctime",
+                    name: "Creation Time",
                     minWidth: 150,
                     isCollapsible: true,
                     onRender(item: AdbSyncEntry) {
-                        return new Date(Number(item.ctime!) * 1000).toLocaleString();
+                        return new Date(
+                            Number(item.ctime!) * 1000
+                        ).toLocaleString();
                     },
                 },
                 {
-                    key: 'atime',
-                    name: 'Last Access Time',
+                    key: "atime",
+                    name: "Last Access Time",
                     minWidth: 150,
                     isCollapsible: true,
                     onRender(item: AdbSyncEntry) {
-                        return new Date(Number(item.atime!) * 1000).toLocaleString();
+                        return new Date(
+                            Number(item.atime!) * 1000
+                        ).toLocaleString();
                     },
-                },
+                }
             );
         }
 
         for (const item of list) {
             item.onColumnClick = (e, column) => {
                 if (this.sortKey === column.key) {
-                    runInAction(() => this.sortDescending = !this.sortDescending);
+                    runInAction(
+                        () => (this.sortDescending = !this.sortDescending)
+                    );
                 } else {
                     runInAction(() => {
                         this.sortKey = column.key as keyof ListItem;
@@ -385,13 +482,13 @@ class FileManagerState {
     loadFiles = asyncEffect(async (signal) => {
         const currentPath = this.path;
 
-        runInAction(() => this.items = []);
+        runInAction(() => (this.items = []));
 
         if (!GlobalState.device) {
             return;
         }
 
-        runInAction(() => this.loading = true);
+        runInAction(() => (this.loading = true));
 
         const sync = await GlobalState.device.sync();
 
@@ -402,7 +499,7 @@ class FileManagerState {
                 return;
             }
 
-            runInAction(() => this.items = items.slice());
+            runInAction(() => (this.items = items.slice()));
         }, 1000);
 
         try {
@@ -411,7 +508,7 @@ class FileManagerState {
                     return;
                 }
 
-                if (entry.name === '.' || entry.name === '..') {
+                if (entry.name === "." || entry.name === "..") {
                     continue;
                 }
 
@@ -427,7 +524,11 @@ class FileManagerState {
                     return;
                 }
 
-                if (!await sync.isDirectory(path.resolve(currentPath, entry.name!))) {
+                if (
+                    !(await sync.isDirectory(
+                        path.resolve(currentPath, entry.name!)
+                    ))
+                ) {
                     entry.mode = (LinuxFileType.File << 12) | entry.permission;
                     entry.size = 0n;
                 }
@@ -439,10 +540,10 @@ class FileManagerState {
                 return;
             }
 
-            runInAction(() => this.items = items);
+            runInAction(() => (this.items = items));
         } finally {
             if (!signal.aborted) {
-                runInAction(() => this.loading = false);
+                runInAction(() => (this.loading = false));
             }
             clearInterval(intervalId);
             sync.dispose();
@@ -462,25 +563,36 @@ class FileManagerState {
                 this.uploadSpeed = 0;
             });
 
-            const intervalId = setInterval(action(() => {
-                this.uploadSpeed = this.uploadedSize - this.debouncedUploadedSize;
-                this.debouncedUploadedSize = this.uploadedSize;
-            }), 1000);
+            const intervalId = setInterval(
+                action(() => {
+                    this.uploadSpeed =
+                        this.uploadedSize - this.debouncedUploadedSize;
+                    this.debouncedUploadedSize = this.uploadedSize;
+                }),
+                1000
+            );
 
             try {
                 await createFileStream(file)
                     .pipeThrough(new ChunkStream(ADB_SYNC_MAX_PACKET_SIZE))
-                    .pipeThrough(new ProgressStream(action((uploaded) => {
-                        this.uploadedSize = uploaded;
-                    })))
-                    .pipeTo(sync.write(
-                        itemPath,
-                        (LinuxFileType.File << 12) | 0o666,
-                        file.lastModified / 1000,
-                    ));
+                    .pipeThrough(
+                        new ProgressStream(
+                            action((uploaded) => {
+                                this.uploadedSize = uploaded;
+                            })
+                        )
+                    )
+                    .pipeTo(
+                        sync.write(
+                            itemPath,
+                            (LinuxFileType.File << 12) | 0o666,
+                            file.lastModified / 1000
+                        )
+                    );
 
                 runInAction(() => {
-                    this.uploadSpeed = this.uploadedSize - this.debouncedUploadedSize;
+                    this.uploadSpeed =
+                        this.uploadedSize - this.debouncedUploadedSize;
                     this.debouncedUploadedSize = this.uploadedSize;
                 });
             } finally {
@@ -505,12 +617,16 @@ const UploadDialog = observer(() => {
         <Dialog
             hidden={!state.uploading}
             dialogContentProps={{
-                title: 'Uploading...',
-                subText: state.uploadPath
+                title: "Uploading...",
+                subText: state.uploadPath,
             }}
         >
             <ProgressIndicator
-                description={formatSpeed(state.debouncedUploadedSize, state.uploadTotalSize, state.uploadSpeed)}
+                description={formatSpeed(
+                    state.debouncedUploadedSize,
+                    state.uploadTotalSize,
+                    state.uploadSpeed
+                )}
                 percentComplete={state.uploadedSize / state.uploadTotalSize}
             />
         </Dialog>
@@ -563,52 +679,58 @@ const FileManager: NextPage = (): JSX.Element | null => {
         setPreviewUrl(undefined);
     }, []);
 
-    const handleItemInvoked = useCallback((item: AdbSyncEntry) => {
-        switch (item.type) {
-            case LinuxFileType.Link:
-            case LinuxFileType.Directory:
-                state.pushPathQuery(path.resolve(state.path!, item.name!));
-                break;
-            case LinuxFileType.File:
-                switch (path.extname(item.name!)) {
-                    case '.jpg':
-                    case '.png':
-                    case '.svg':
-                    case '.gif':
-                        previewImage(path.resolve(state.path!, item.name!));
-                        break;
-                }
-                break;
-        }
-    }, [previewImage]);
-
-    const selection = useConst(() => new Selection({
-        onSelectionChanged() {
-            runInAction(() => {
-                state.selectedItems = selection.getSelection() as ListItem[];
-            });
+    const handleItemInvoked = useCallback(
+        (item: AdbSyncEntry) => {
+            switch (item.type) {
+                case LinuxFileType.Link:
+                case LinuxFileType.Directory:
+                    state.pushPathQuery(path.resolve(state.path!, item.name!));
+                    break;
+                case LinuxFileType.File:
+                    switch (path.extname(item.name!)) {
+                        case ".jpg":
+                        case ".png":
+                        case ".svg":
+                        case ".gif":
+                            previewImage(path.resolve(state.path!, item.name!));
+                            break;
+                    }
+                    break;
+            }
         },
-    }));
-
-    const showContextMenu = useCallback((
-        item?: AdbSyncEntry,
-        index?: number,
-        e?: Event
-    ) => {
-        if (!e) {
-            return false;
-        }
+        [previewImage]
+    );
 
-        if (state.menuItems.length) {
-            runInAction(() => {
-                state.contextMenuTarget = e as MouseEvent;
-            });
-        }
+    const selection = useConst(
+        () =>
+            new Selection({
+                onSelectionChanged() {
+                    runInAction(() => {
+                        state.selectedItems =
+                            selection.getSelection() as ListItem[];
+                    });
+                },
+            })
+    );
 
-        return false;
-    }, []);
+    const showContextMenu = useCallback(
+        (item?: AdbSyncEntry, index?: number, e?: Event) => {
+            if (!e) {
+                return false;
+            }
+
+            if (state.menuItems.length) {
+                runInAction(() => {
+                    state.contextMenuTarget = e as MouseEvent;
+                });
+            }
+
+            return false;
+        },
+        []
+    );
     const hideContextMenu = useCallback(() => {
-        runInAction(() => state.contextMenuTarget = undefined);
+        runInAction(() => (state.contextMenuTarget = undefined));
     }, []);
 
     return (
@@ -621,13 +743,16 @@ const FileManager: NextPage = (): JSX.Element | null => {
 
             <Breadcrumb items={state.breadcrumbItems} />
 
-            <StackItem grow styles={{
-                root: {
-                    margin: '-8px -16px -16px -16px',
-                    padding: '8px 16px 16px 16px',
-                    overflowY: 'auto',
-                }
-            }}>
+            <StackItem
+                grow
+                styles={{
+                    root: {
+                        margin: "-8px -16px -16px -16px",
+                        padding: "8px 16px 16px 16px",
+                        overflowY: "auto",
+                    },
+                }}
+            >
                 <MarqueeSelection selection={selection}>
                     <ShimmeredDetailsList
                         items={state.sortedList}
@@ -635,7 +760,9 @@ const FileManager: NextPage = (): JSX.Element | null => {
                         setKey={state.path}
                         selection={selection}
                         layoutMode={DetailsListLayoutMode.justified}
-                        enableShimmer={state.loading && state.items.length === 0}
+                        enableShimmer={
+                            state.loading && state.items.length === 0
+                        }
                         onItemInvoked={handleItemInvoked}
                         onItemContextMenu={showContextMenu}
                         onRenderDetailsHeader={renderDetailsHeader}
@@ -647,9 +774,24 @@ const FileManager: NextPage = (): JSX.Element | null => {
                 {previewUrl && (
                     <Layer>
                         <Overlay onClick={hidePreview}>
-                            <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                            <div
+                                style={{
+                                    width: "100%",
+                                    height: "100%",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                }}
+                            >
                                 {/* eslint-disable-next-line @next/next/no-img-element */}
-                                <img src={previewUrl} alt="" style={{ maxWidth: '100%', maxHeight: '100%' }} />
+                                <img
+                                    src={previewUrl}
+                                    alt=""
+                                    style={{
+                                        maxWidth: "100%",
+                                        maxHeight: "100%",
+                                    }}
+                                />
                             </div>
                         </Overlay>
                     </Layer>
@@ -663,7 +805,9 @@ const FileManager: NextPage = (): JSX.Element | null => {
                     directionalHint={DirectionalHint.bottomLeftEdge}
                     target={state.contextMenuTarget}
                     onDismiss={hideContextMenu}
-                    contextualMenuItemAs={props => <ContextualMenuItem {...props} hasIcons={false} />}
+                    contextualMenuItemAs={(props) => (
+                        <ContextualMenuItem {...props} hasIcons={false} />
+                    )}
                 />
             </NoSsr>
 
diff --git a/apps/demo/src/pages/scrcpy.tsx b/apps/demo/src/pages/scrcpy.tsx
index 8915acf7f..9ea1d8294 100644
--- a/apps/demo/src/pages/scrcpy.tsx
+++ b/apps/demo/src/pages/scrcpy.tsx
@@ -1,37 +1,104 @@
-import { CommandBar, ContextualMenuItemType, Dialog, Dropdown, ICommandBarItemProps, Icon, IconButton, IDropdownOption, LayerHost, Position, ProgressIndicator, SpinButton, Stack, TextField, Toggle, TooltipHost } from "@fluentui/react";
+import {
+    CommandBar,
+    Dialog,
+    Dropdown,
+    ICommandBarItemProps,
+    Icon,
+    IconButton,
+    IDropdownOption,
+    LayerHost,
+    Position,
+    ProgressIndicator,
+    SpinButton,
+    Stack,
+    TextField,
+    Toggle,
+    TooltipHost,
+} from "@fluentui/react";
 import { useId } from "@fluentui/react-hooks";
 import { makeStyles } from "@griffel/react";
-import { action, autorun, makeAutoObservable, observable, runInAction } from "mobx";
+import {
+    action,
+    autorun,
+    makeAutoObservable,
+    observable,
+    runInAction,
+} from "mobx";
 import { observer } from "mobx-react-lite";
 import { NextPage } from "next";
 import Head from "next/head";
 import { CSSProperties, ReactNode, useEffect, useState } from "react";
 
-import { ADB_SYNC_MAX_PACKET_SIZE } from '@yume-chan/adb';
+import { ADB_SYNC_MAX_PACKET_SIZE } from "@yume-chan/adb";
 import { Disposable, EventEmitter } from "@yume-chan/event";
-import { AdbScrcpyClient, AdbScrcpyOptions1_22, AndroidCodecLevel, AndroidCodecProfile, AndroidKeyCode, AndroidKeyEventAction, AndroidMotionEventAction, AndroidScreenPowerMode, CodecOptions, DEFAULT_SERVER_PATH, ScrcpyDeviceMessageType, ScrcpyLogLevel, ScrcpyOptions1_24, ScrcpyOptionsInit1_24, ScrcpyVideoOrientation, type ScrcpyVideoStreamPacket } from "@yume-chan/scrcpy";
-import { TinyH264Decoder } from '@yume-chan/scrcpy-decoder-tinyh264';
-import { WebCodecsDecoder } from '@yume-chan/scrcpy-decoder-webcodecs';
-import SCRCPY_SERVER_VERSION from '@yume-chan/scrcpy/bin/version';
-import { ChunkStream, InspectStream, ReadableStream, WritableStream } from '@yume-chan/stream-extra';
-
-import { DemoModePanel, DeviceView, DeviceViewRef, ExternalLink } from "../components";
+import {
+    AdbScrcpyClient,
+    AdbScrcpyOptions1_22,
+    AndroidCodecLevel,
+    AndroidCodecProfile,
+    AndroidKeyCode,
+    AndroidKeyEventAction,
+    AndroidMotionEventAction,
+    AndroidScreenPowerMode,
+    CodecOptions,
+    DEFAULT_SERVER_PATH,
+    ScrcpyDeviceMessageType,
+    ScrcpyLogLevel,
+    ScrcpyOptions1_25,
+    ScrcpyOptionsInit1_24,
+    ScrcpyPointerId,
+    ScrcpyVideoOrientation,
+    type ScrcpyVideoStreamPacket,
+} from "@yume-chan/scrcpy";
+import { TinyH264Decoder } from "@yume-chan/scrcpy-decoder-tinyh264";
+import { WebCodecsDecoder } from "@yume-chan/scrcpy-decoder-webcodecs";
+import SCRCPY_SERVER_VERSION from "@yume-chan/scrcpy/bin/version";
+import {
+    ChunkStream,
+    InspectStream,
+    ReadableStream,
+    WritableStream,
+} from "@yume-chan/stream-extra";
+
+import {
+    DemoModePanel,
+    DeviceView,
+    DeviceViewRef,
+    ExternalLink,
+} from "../components";
 import { GlobalState } from "../state";
-import { CommonStackTokens, formatSpeed, Icons, ProgressStream, RouteStackProps } from "../utils";
-
-const SERVER_URL = new URL('@yume-chan/scrcpy/bin/scrcpy-server?url', import.meta.url);
+import {
+    CommonStackTokens,
+    formatSpeed,
+    Icons,
+    ProgressStream,
+    RouteStackProps,
+} from "../utils";
+
+const SERVER_URL = new URL(
+    "@yume-chan/scrcpy/bin/scrcpy-server?url",
+    import.meta.url
+);
 
 class FetchWithProgress {
     public readonly promise: Promise<Uint8Array>;
 
     private _downloaded = 0;
-    public get downloaded() { return this._downloaded; }
+    public get downloaded() {
+        return this._downloaded;
+    }
 
     private _total = 0;
-    public get total() { return this._total; }
+    public get total() {
+        return this._total;
+    }
 
-    private progressEvent = new EventEmitter<[download: number, total: number]>();
-    public get onProgress() { return this.progressEvent.event; }
+    private progressEvent = new EventEmitter<
+        [download: number, total: number]
+    >();
+    public get onProgress() {
+        return this.progressEvent.event;
+    }
 
     public constructor(url: string | URL) {
         this.promise = this.fetch(url);
@@ -39,7 +106,10 @@ class FetchWithProgress {
 
     private async fetch(url: string | URL) {
         const response = await window.fetch(url);
-        this._total = Number.parseInt(response.headers.get('Content-Length') ?? '0', 10);
+        this._total = Number.parseInt(
+            response.headers.get("Content-Length") ?? "0",
+            10
+        );
         this.progressEvent.fire([this._downloaded, this._total]);
 
         const reader = response.body!.getReader();
@@ -54,7 +124,10 @@ class FetchWithProgress {
             this.progressEvent.fire([this._downloaded, this._total]);
         }
 
-        this._total = chunks.reduce((result, item) => result + item.byteLength, 0);
+        this._total = chunks.reduce(
+            (result, item) => result + item.byteLength,
+            0
+        );
         const result = new Uint8Array(this._total);
         let position = 0;
         for (const chunk of chunks) {
@@ -66,7 +139,9 @@ class FetchWithProgress {
 }
 
 let cachedValue: FetchWithProgress | undefined;
-function fetchServer(onProgress?: (e: [downloaded: number, total: number]) => void) {
+function fetchServer(
+    onProgress?: (e: [downloaded: number, total: number]) => void
+) {
     if (!cachedValue) {
         cachedValue = new FetchWithProgress(SERVER_URL);
         cachedValue.promise.catch((e) => {
@@ -104,7 +179,7 @@ export interface H264Decoder extends Disposable {
 }
 
 export interface H264DecoderConstructor {
-    new(): H264Decoder;
+    new (): H264Decoder;
 }
 
 interface DecoderDefinition {
@@ -113,14 +188,27 @@ interface DecoderDefinition {
     Constructor: H264DecoderConstructor;
 }
 
-type RequiredScrcpyOptions = Pick<ScrcpyOptionsInit1_24, 'crop' | 'maxSize' | 'bitRate' | 'powerOn'>;
-type OptionalScrcpyOptions = Partial<Pick<ScrcpyOptionsInit1_24, 'displayId' | 'lockVideoOrientation' | 'encoderName' | 'tunnelForward' | 'stayAwake' | 'powerOffOnClose'>>;
+type RequiredScrcpyOptions = Pick<
+    ScrcpyOptionsInit1_24,
+    "crop" | "maxSize" | "bitRate" | "powerOn"
+>;
+type OptionalScrcpyOptions = Partial<
+    Pick<
+        ScrcpyOptionsInit1_24,
+        | "displayId"
+        | "lockVideoOrientation"
+        | "encoderName"
+        | "tunnelForward"
+        | "stayAwake"
+        | "powerOffOnClose"
+    >
+>;
 
 interface Settings extends RequiredScrcpyOptions, OptionalScrcpyOptions {
     turnScreenOff?: boolean;
     decoder?: string;
     ignoreDecoderCodecArgs?: boolean;
-};
+}
 
 interface SettingDefinitionBase {
     key: keyof Settings;
@@ -131,32 +219,32 @@ interface SettingDefinitionBase {
 }
 
 interface TextSettingDefinition extends SettingDefinitionBase {
-    type: 'text';
+    type: "text";
     placeholder?: string;
 }
 
 interface DropdownSettingDefinition extends SettingDefinitionBase {
-    type: 'dropdown';
+    type: "dropdown";
     placeholder?: string;
     options: IDropdownOption[];
 }
 
 interface ToggleSettingDefinition extends SettingDefinitionBase {
-    type: 'toggle',
+    type: "toggle";
 }
 
 interface NumberSettingDefinition extends SettingDefinitionBase {
-    type: 'number',
+    type: "number";
     min?: number;
     max?: number;
     step?: number;
 }
 
 type SettingDefinition =
-    TextSettingDefinition |
-    DropdownSettingDefinition |
-    ToggleSettingDefinition |
-    NumberSettingDefinition;
+    | TextSettingDefinition
+    | DropdownSettingDefinition
+    | ToggleSettingDefinition
+    | NumberSettingDefinition;
 
 interface SettingItemProps {
     definition: SettingDefinition;
@@ -166,10 +254,10 @@ interface SettingItemProps {
 
 const useClasses = makeStyles({
     labelRight: {
-        marginLeft: '4px',
+        marginLeft: "4px",
     },
     video: {
-        transformOrigin: 'center center',
+        transformOrigin: "center center",
     },
 });
 
@@ -185,7 +273,10 @@ const SettingItem = observer(function SettingItem({
             <span>{definition.label}</span>
             {!!definition.description && (
                 <TooltipHost content={definition.description}>
-                    <Icon className={classes.labelRight} iconName={Icons.Info} />
+                    <Icon
+                        className={classes.labelRight}
+                        iconName={Icons.Info}
+                    />
                 </TooltipHost>
             )}
             {definition.labelExtra}
@@ -193,7 +284,7 @@ const SettingItem = observer(function SettingItem({
     );
 
     switch (definition.type) {
-        case 'text':
+        case "text":
             return (
                 <TextField
                     label={label as any}
@@ -202,17 +293,19 @@ const SettingItem = observer(function SettingItem({
                     onChange={(e, value) => onChange(definition.key, value)}
                 />
             );
-        case 'dropdown':
+        case "dropdown":
             return (
                 <Dropdown
                     label={label as any}
                     options={definition.options}
                     placeholder={definition.placeholder}
                     selectedKey={settings[definition.key]}
-                    onChange={(e, option) => onChange(definition.key, option!.key)}
+                    onChange={(e, option) =>
+                        onChange(definition.key, option!.key)
+                    }
                 />
             );
-        case 'toggle':
+        case "toggle":
             return (
                 <Toggle
                     label={label}
@@ -220,7 +313,7 @@ const SettingItem = observer(function SettingItem({
                     onChange={(e, checked) => onChange(definition.key, checked)}
                 />
             );
-        case 'number':
+        case "number":
             return (
                 <SpinButton
                     label={definition.label}
@@ -229,12 +322,29 @@ const SettingItem = observer(function SettingItem({
                     max={definition.max}
                     step={definition.step}
                     value={settings[definition.key].toString()}
-                    onChange={(e, value) => onChange(definition.key, Number.parseInt(value!, 10))}
+                    onChange={(e, value) =>
+                        onChange(definition.key, Number.parseInt(value!, 10))
+                    }
                 />
             );
     }
 });
 
+const KEY_MAP = {
+    Enter: AndroidKeyCode.Enter,
+    Escape: AndroidKeyCode.Escape,
+    Backspace: AndroidKeyCode.Delete,
+    Tab: AndroidKeyCode.Tab,
+    Delete: AndroidKeyCode.ForwardDelete,
+    Home: AndroidKeyCode.MoveHome,
+    End: AndroidKeyCode.MoveEnd,
+    Space: AndroidKeyCode.Space,
+    ArrowUp: AndroidKeyCode.DPadUp,
+    ArrowDown: AndroidKeyCode.DPadDown,
+    ArrowLeft: AndroidKeyCode.DPadLeft,
+    ArrowRight: AndroidKeyCode.DPadRight,
+} as Record<string, AndroidKeyCode | undefined>;
+
 class ScrcpyPageState {
     running = false;
 
@@ -251,8 +361,12 @@ class ScrcpyPageState {
     height = 0;
     rotate = 0;
 
-    get rotatedWidth() { return state.rotate & 1 ? state.height : state.width; }
-    get rotatedHeight() { return state.rotate & 1 ? state.width : state.height; }
+    get rotatedWidth() {
+        return state.rotate & 1 ? state.height : state.width;
+    }
+    get rotatedHeight() {
+        return state.rotate & 1 ? state.width : state.height;
+    }
 
     client: AdbScrcpyClient | undefined = undefined;
 
@@ -264,8 +378,7 @@ class ScrcpyPageState {
                 controller.enqueue(serverBuffer);
                 controller.close();
             },
-        })
-            .pipeTo(AdbScrcpyClient.pushServer(GlobalState.device!));
+        }).pipeTo(AdbScrcpyClient.pushServer(GlobalState.device!));
     }
 
     encoders: string[] = [];
@@ -277,16 +390,20 @@ class ScrcpyPageState {
                 GlobalState.device!,
                 DEFAULT_SERVER_PATH,
                 SCRCPY_SERVER_VERSION,
-                new AdbScrcpyOptions1_22(new ScrcpyOptions1_24({
-                    logLevel: ScrcpyLogLevel.Debug,
-                    tunnelForward: this.settings.tunnelForward,
-                }))
+                new AdbScrcpyOptions1_22(
+                    new ScrcpyOptions1_25({
+                        logLevel: ScrcpyLogLevel.Debug,
+                        tunnelForward: this.settings.tunnelForward,
+                    })
+                )
             );
 
             runInAction(() => {
                 this.encoders = encoders;
-                if (!this.settings.encoderName ||
-                    !this.encoders.includes(this.settings.encoderName)) {
+                if (
+                    !this.settings.encoderName ||
+                    !this.encoders.includes(this.settings.encoderName)
+                ) {
                     this.settings.encoderName = this.encoders[0];
                 }
             });
@@ -295,11 +412,13 @@ class ScrcpyPageState {
         }
     };
 
-    decoders: DecoderDefinition[] = [{
-        key: 'tinyh264',
-        name: 'TinyH264 (Software)',
-        Constructor: TinyH264Decoder,
-    }];
+    decoders: DecoderDefinition[] = [
+        {
+            key: "tinyh264",
+            name: "TinyH264 (Software)",
+            Constructor: TinyH264Decoder,
+        },
+    ];
     decoder: H264Decoder | undefined = undefined;
     fpsCounterIntervalId: any = undefined;
     fps = 0;
@@ -313,16 +432,20 @@ class ScrcpyPageState {
                 GlobalState.device!,
                 DEFAULT_SERVER_PATH,
                 SCRCPY_SERVER_VERSION,
-                new AdbScrcpyOptions1_22(new ScrcpyOptions1_24({
-                    logLevel: ScrcpyLogLevel.Debug,
-                    tunnelForward: this.settings.tunnelForward,
-                }))
+                new AdbScrcpyOptions1_22(
+                    new ScrcpyOptions1_25({
+                        logLevel: ScrcpyLogLevel.Debug,
+                        tunnelForward: this.settings.tunnelForward,
+                    })
+                )
             );
 
             runInAction(() => {
                 this.displays = displays;
-                if (!this.settings.displayId ||
-                    !this.displays.includes(this.settings.displayId)) {
+                if (
+                    !this.settings.displayId ||
+                    !this.displays.includes(this.settings.displayId)
+                ) {
                     this.settings.displayId = this.displays[0];
                 }
             });
@@ -345,146 +468,165 @@ class ScrcpyPageState {
 
         if (!this.running) {
             result.push({
-                key: 'start',
+                key: "start",
                 disabled: !GlobalState.device,
                 iconProps: { iconName: Icons.Play },
-                text: 'Start',
+                text: "Start",
                 onClick: this.start as VoidFunction,
             });
         } else {
             result.push({
-                key: 'stop',
+                key: "stop",
                 iconProps: { iconName: Icons.Stop },
-                text: 'Stop',
+                text: "Stop",
                 onClick: this.stop as VoidFunction,
             });
         }
 
         result.push({
-            key: 'fullscreen',
+            key: "fullscreen",
             disabled: !this.running,
             iconProps: { iconName: Icons.FullScreenMaximize },
             iconOnly: true,
-            text: 'Fullscreen',
-            onClick: () => { this.deviceView?.enterFullscreen(); },
-        });
-
-        result.push({
-            key: 'volumeUp',
-            disabled: !this.running,
-            iconProps: { iconName: Icons.Speaker2 },
-            iconOnly: true,
-            text: 'Volume Up',
-            onClick: (async () => {
-                // TODO: Auto repeat when holding
-                await this.client?.controlMessageSerializer!.injectKeyCode({
-                    action: AndroidKeyEventAction.Down,
-                    keyCode: AndroidKeyCode.VolumeUp,
-                    repeat: 0,
-                    metaState: 0,
-                });
-                await this.client?.controlMessageSerializer!.injectKeyCode({
-                    action: AndroidKeyEventAction.Up,
-                    keyCode: AndroidKeyCode.VolumeUp,
-                    repeat: 0,
-                    metaState: 0,
-                });
-            }) as (() => void),
-        }, {
-            key: 'volumeDown',
-            disabled: !this.running,
-            iconProps: { iconName: Icons.Speaker1 },
-            iconOnly: true,
-            text: 'Volume Down',
-            onClick: (async () => {
-                await this.client?.controlMessageSerializer!.injectKeyCode({
-                    action: AndroidKeyEventAction.Down,
-                    keyCode: AndroidKeyCode.VolumeDown,
-                    repeat: 0,
-                    metaState: 0,
-                });
-                await this.client?.controlMessageSerializer!.injectKeyCode({
-                    action: AndroidKeyEventAction.Up,
-                    keyCode: AndroidKeyCode.VolumeDown,
-                    repeat: 0,
-                    metaState: 0,
-                });
-            }) as (() => void),
-        }, {
-            key: 'volumeMute',
-            disabled: !this.running,
-            iconProps: { iconName: Icons.SpeakerOff },
-            iconOnly: true,
-            text: 'Toggle Mute',
-            onClick: (async () => {
-                await this.client?.controlMessageSerializer!.injectKeyCode({
-                    action: AndroidKeyEventAction.Down,
-                    keyCode: AndroidKeyCode.VolumeMute,
-                    repeat: 0,
-                    metaState: 0,
-                });
-                await this.client?.controlMessageSerializer!.injectKeyCode({
-                    action: AndroidKeyEventAction.Up,
-                    keyCode: AndroidKeyCode.VolumeMute,
-                    repeat: 0,
-                    metaState: 0,
-                });
-            }) as (() => void),
+            text: "Fullscreen",
+            onClick: () => {
+                this.deviceView?.enterFullscreen();
+            },
         });
 
-        result.push({
-            key: 'rotateDevice',
-            disabled: !this.running,
-            iconProps: { iconName: Icons.Orientation },
-            iconOnly: true,
-            text: 'Rotate Device',
-            onClick: () => { this.client!.controlMessageSerializer!.rotateDevice(); },
-        }, {
-            key: 'rotateVideoLeft',
-            disabled: !this.running,
-            iconProps: { iconName: Icons.RotateLeft },
-            iconOnly: true,
-            text: 'Rotate Video Left',
-            onClick: action(() => {
-                this.rotate -= 1;
-                if (this.rotate < 0) {
-                    this.rotate = 3;
-                }
-            }),
-        }, {
-            key: 'rotateVideoRight',
-            disabled: !this.running,
-            iconProps: { iconName: Icons.RotateRight },
-            iconOnly: true,
-            text: 'Rotate Video Right',
-            onClick: action(() => {
-                this.rotate = (this.rotate + 1) & 3;
-            }),
-        });
+        result.push(
+            {
+                key: "volumeUp",
+                disabled: !this.running,
+                iconProps: { iconName: Icons.Speaker2 },
+                iconOnly: true,
+                text: "Volume Up",
+                onClick: (async () => {
+                    // TODO: Auto repeat when holding
+                    await this.client?.controlMessageSerializer!.injectKeyCode({
+                        action: AndroidKeyEventAction.Down,
+                        keyCode: AndroidKeyCode.VolumeUp,
+                        repeat: 0,
+                        metaState: 0,
+                    });
+                    await this.client?.controlMessageSerializer!.injectKeyCode({
+                        action: AndroidKeyEventAction.Up,
+                        keyCode: AndroidKeyCode.VolumeUp,
+                        repeat: 0,
+                        metaState: 0,
+                    });
+                }) as () => void,
+            },
+            {
+                key: "volumeDown",
+                disabled: !this.running,
+                iconProps: { iconName: Icons.Speaker1 },
+                iconOnly: true,
+                text: "Volume Down",
+                onClick: (async () => {
+                    await this.client?.controlMessageSerializer!.injectKeyCode({
+                        action: AndroidKeyEventAction.Down,
+                        keyCode: AndroidKeyCode.VolumeDown,
+                        repeat: 0,
+                        metaState: 0,
+                    });
+                    await this.client?.controlMessageSerializer!.injectKeyCode({
+                        action: AndroidKeyEventAction.Up,
+                        keyCode: AndroidKeyCode.VolumeDown,
+                        repeat: 0,
+                        metaState: 0,
+                    });
+                }) as () => void,
+            },
+            {
+                key: "volumeMute",
+                disabled: !this.running,
+                iconProps: { iconName: Icons.SpeakerOff },
+                iconOnly: true,
+                text: "Toggle Mute",
+                onClick: (async () => {
+                    await this.client?.controlMessageSerializer!.injectKeyCode({
+                        action: AndroidKeyEventAction.Down,
+                        keyCode: AndroidKeyCode.VolumeMute,
+                        repeat: 0,
+                        metaState: 0,
+                    });
+                    await this.client?.controlMessageSerializer!.injectKeyCode({
+                        action: AndroidKeyEventAction.Up,
+                        keyCode: AndroidKeyCode.VolumeMute,
+                        repeat: 0,
+                        metaState: 0,
+                    });
+                }) as () => void,
+            }
+        );
 
-        result.push({
-            key: 'turnScreenOff',
-            disabled: !this.running,
-            iconProps: { iconName: Icons.Lightbulb },
-            iconOnly: true,
-            text: 'Turn Screen Off',
-            onClick: () => {
-                this.client!.controlMessageSerializer!.setScreenPowerMode(AndroidScreenPowerMode.Off);
+        result.push(
+            {
+                key: "rotateDevice",
+                disabled: !this.running,
+                iconProps: { iconName: Icons.Orientation },
+                iconOnly: true,
+                text: "Rotate Device",
+                onClick: () => {
+                    this.client!.controlMessageSerializer!.rotateDevice();
+                },
             },
-        }, {
-            key: 'turnScreenOn',
-            disabled: !this.running,
-            iconProps: { iconName: Icons.LightbulbFilament },
-            iconOnly: true,
-            text: 'Turn Screen On',
-            onClick: () => {
-                this.client!.controlMessageSerializer!.setScreenPowerMode(AndroidScreenPowerMode.Normal);
+            {
+                key: "rotateVideoLeft",
+                disabled: !this.running,
+                iconProps: { iconName: Icons.RotateLeft },
+                iconOnly: true,
+                text: "Rotate Video Left",
+                onClick: action(() => {
+                    this.rotate -= 1;
+                    if (this.rotate < 0) {
+                        this.rotate = 3;
+                    }
+                }),
             },
-        });
+            {
+                key: "rotateVideoRight",
+                disabled: !this.running,
+                iconProps: { iconName: Icons.RotateRight },
+                iconOnly: true,
+                text: "Rotate Video Right",
+                onClick: action(() => {
+                    this.rotate = (this.rotate + 1) & 3;
+                }),
+            }
+        );
+
+        result.push(
+            {
+                key: "turnScreenOff",
+                disabled: !this.running,
+                iconProps: { iconName: Icons.Lightbulb },
+                iconOnly: true,
+                text: "Turn Screen Off",
+                onClick: () => {
+                    this.client!.controlMessageSerializer!.setScreenPowerMode(
+                        AndroidScreenPowerMode.Off
+                    );
+                },
+            },
+            {
+                key: "turnScreenOn",
+                disabled: !this.running,
+                iconProps: { iconName: Icons.LightbulbFilament },
+                iconOnly: true,
+                text: "Turn Screen On",
+                onClick: () => {
+                    this.client!.controlMessageSerializer!.setScreenPowerMode(
+                        AndroidScreenPowerMode.Normal
+                    );
+                },
+            }
+        );
 
         if (this.running) {
             result.push({
-                key: 'fps',
+                key: "fps",
                 text: `FPS: ${this.fps}`,
                 disabled: true,
             });
@@ -496,66 +638,75 @@ class ScrcpyPageState {
     get commandBarFarItems(): ICommandBarItemProps[] {
         return [
             {
-                key: 'NavigationBar',
+                key: "NavigationBar",
                 iconProps: { iconName: Icons.PanelBottom },
                 checked: this.navigationBarVisible,
-                text: 'Navigation Bar',
+                text: "Navigation Bar",
                 iconOnly: true,
                 onClick: action(() => {
                     this.navigationBarVisible = !this.navigationBarVisible;
                 }),
             },
             {
-                key: 'Log',
+                key: "Log",
                 iconProps: { iconName: Icons.TextGrammarError },
                 checked: this.logVisible,
-                text: 'Log',
+                text: "Log",
                 iconOnly: true,
                 onClick: action(() => {
                     this.logVisible = !this.logVisible;
                 }),
             },
             {
-                key: 'Settings',
+                key: "Settings",
                 iconProps: { iconName: Icons.Settings },
                 checked: this.settingsVisible,
-                text: 'Settings',
+                text: "Settings",
                 iconOnly: true,
                 onClick: action(() => {
                     this.settingsVisible = !this.settingsVisible;
                 }),
             },
             {
-                key: 'DemoMode',
+                key: "DemoMode",
                 iconProps: { iconName: Icons.Wand },
                 checked: this.demoModeVisible,
-                text: 'Demo Mode',
+                text: "Demo Mode",
                 iconOnly: true,
                 onClick: action(() => {
                     this.demoModeVisible = !this.demoModeVisible;
                 }),
             },
             {
-                key: 'info',
+                key: "info",
                 iconProps: { iconName: Icons.Info },
                 iconOnly: true,
                 tooltipHostProps: {
                     content: (
                         <>
                             <p>
-                                <ExternalLink href="https://github.com/Genymobile/scrcpy" spaceAfter>Scrcpy</ExternalLink>
-                                developed by Genymobile can display the screen with low latency (1~2 frames) and control the device, all without root access.
+                                <ExternalLink
+                                    href="https://github.com/Genymobile/scrcpy"
+                                    spaceAfter
+                                >
+                                    Scrcpy
+                                </ExternalLink>
+                                developed by Genymobile can display the screen
+                                with low latency (1~2 frames) and control the
+                                device, all without root access.
                             </p>
                             <p>
-                                This is a TypeScript implementation of the client part. Paired with official pre-built server binary.
+                                This is a TypeScript implementation of the
+                                client part. Paired with official pre-built
+                                server binary.
                             </p>
                         </>
                     ),
                     calloutProps: {
                         calloutMaxWidth: 300,
-                    }
+                    },
                 },
-            }
+            },
         ];
     }
 
@@ -564,36 +715,41 @@ class ScrcpyPageState {
         bitRate: 4_000_000,
         lockVideoOrientation: ScrcpyVideoOrientation.Unlocked,
         displayId: 0,
-        crop: '',
+        crop: "",
         powerOn: true,
     };
 
     get settingDefinitions() {
         const result: SettingDefinition[] = [];
 
-        result.push({
-            key: 'powerOn',
-            type: 'toggle',
-            label: 'Turn device on when starting',
-        }, {
-            key: 'turnScreenOff',
-            type: 'toggle',
-            label: 'Turn screen off when starting',
-        }, {
-            key: 'stayAwake',
-            type: 'toggle',
-            label: 'Stay awake (if plugged in)',
-        }, {
-            key: 'powerOffOnClose',
-            type: 'toggle',
-            label: 'Turn device off when exiting',
-        });
+        result.push(
+            {
+                key: "powerOn",
+                type: "toggle",
+                label: "Turn device on when starting",
+            },
+            {
+                key: "turnScreenOff",
+                type: "toggle",
+                label: "Turn screen off when starting",
+            },
+            {
+                key: "stayAwake",
+                type: "toggle",
+                label: "Stay awake (if plugged in)",
+            },
+            {
+                key: "powerOffOnClose",
+                type: "toggle",
+                label: "Turn device off when exiting",
+            }
+        );
 
         result.push({
-            key: 'displayId',
-            type: 'dropdown',
-            label: 'Display',
-            placeholder: 'Press refresh to update available displays',
+            key: "displayId",
+            type: "dropdown",
+            label: "Display",
+            placeholder: "Press refresh to update available displays",
             labelExtra: (
                 <IconButton
                     iconProps={{ iconName: Icons.ArrowClockwise }}
@@ -602,74 +758,74 @@ class ScrcpyPageState {
                     onClick={this.updateDisplays}
                 />
             ),
-            options: this.displays.map(item => ({
+            options: this.displays.map((item) => ({
                 key: item,
                 text: item.toString(),
             })),
         });
 
         result.push({
-            key: 'crop',
-            type: 'text',
-            label: 'Crop',
-            placeholder: 'W:H:X:Y',
+            key: "crop",
+            type: "text",
+            label: "Crop",
+            placeholder: "W:H:X:Y",
         });
 
         result.push({
-            key: 'maxSize',
-            type: 'number',
-            label: 'Max Resolution (longer side, 0 = unlimited)',
+            key: "maxSize",
+            type: "number",
+            label: "Max Resolution (longer side, 0 = unlimited)",
             min: 0,
             max: 2560,
             step: 50,
         });
 
         result.push({
-            key: 'bitRate',
-            type: 'number',
-            label: 'Max Bit Rate',
+            key: "bitRate",
+            type: "number",
+            label: "Max Bit Rate",
             min: 100,
             max: 100_000_000,
             step: 100,
         });
 
         result.push({
-            key: 'lockVideoOrientation',
-            type: 'dropdown',
-            label: 'Lock Video Orientation',
+            key: "lockVideoOrientation",
+            type: "dropdown",
+            label: "Lock Video Orientation",
             options: [
                 {
                     key: ScrcpyVideoOrientation.Unlocked,
-                    text: 'Unlocked',
+                    text: "Unlocked",
                 },
                 {
                     key: ScrcpyVideoOrientation.Initial,
-                    text: 'Current',
+                    text: "Current",
                 },
                 {
                     key: ScrcpyVideoOrientation.Portrait,
-                    text: 'Portrait',
+                    text: "Portrait",
                 },
                 {
                     key: ScrcpyVideoOrientation.Landscape,
-                    text: 'Landscape',
+                    text: "Landscape",
                 },
                 {
                     key: ScrcpyVideoOrientation.PortraitFlipped,
-                    text: 'Portrait (Flipped)',
+                    text: "Portrait (Flipped)",
                 },
                 {
                     key: ScrcpyVideoOrientation.LandscapeFlipped,
-                    text: 'Landscape (Flipped)',
+                    text: "Landscape (Flipped)",
                 },
             ],
         });
 
         result.push({
-            key: 'encoderName',
-            type: 'dropdown',
-            label: 'Encoder',
-            placeholder: 'Press refresh to update available encoders',
+            key: "encoderName",
+            type: "dropdown",
+            label: "Encoder",
+            placeholder: "Press refresh to update available encoders",
             labelExtra: (
                 <IconButton
                     iconProps={{ iconName: Icons.ArrowClockwise }}
@@ -678,7 +834,7 @@ class ScrcpyPageState {
                     onClick={this.updateEncoders}
                 />
             ),
-            options: this.encoders.map(item => ({
+            options: this.encoders.map((item) => ({
                 key: item,
                 text: item,
             })),
@@ -686,10 +842,10 @@ class ScrcpyPageState {
 
         if (this.decoders.length > 1) {
             result.push({
-                key: 'decoder',
-                type: 'dropdown',
-                label: 'Decoder',
-                options: this.decoders.map(item => ({
+                key: "decoder",
+                type: "dropdown",
+                label: "Decoder",
+                options: this.decoders.map((item) => ({
                     key: item.key,
                     text: item.name,
                     data: item,
@@ -698,17 +854,18 @@ class ScrcpyPageState {
         }
 
         result.push({
-            key: 'ignoreDecoderCodecArgs',
-            type: 'toggle',
+            key: "ignoreDecoderCodecArgs",
+            type: "toggle",
             label: `Ignore decoder's codec arguments`,
             description: `Some decoders don't support all H.264 profile/levels, so they request the device to encode at their highest-supported codec. However, some super old devices may not support that codec so their encoders will fail to start. Use this option to let device choose the codec to be used.`,
         });
 
         result.push({
-            key: 'tunnelForward',
-            type: 'toggle',
-            label: 'Use forward connection',
-            description: 'Android before version 9 has a bug that prevents reverse tunneling when using ADB over WiFi.'
+            key: "tunnelForward",
+            type: "toggle",
+            label: "Use forward connection",
+            description:
+                "Android before version 9 has a bug that prevents reverse tunneling when using ADB over WiFi.",
         });
 
         return result;
@@ -765,16 +922,6 @@ class ScrcpyPageState {
         autorun(() => {
             this.settings.decoder = this.decoders[0].key;
         });
-
-        if (typeof window !== 'undefined' && typeof window.VideoDecoder === 'function') {
-            setTimeout(action(() => {
-                this.decoders.unshift({
-                    key: 'webcodecs',
-                    name: 'WebCodecs',
-                    Constructor: WebCodecsDecoder,
-                });
-            }), 0);
-        }
     }
 
     start = async () => {
@@ -784,7 +931,7 @@ class ScrcpyPageState {
 
         try {
             if (!this.settings.decoder) {
-                throw new Error('No available decoder');
+                throw new Error("No available decoder");
             }
 
             runInAction(() => {
@@ -796,30 +943,46 @@ class ScrcpyPageState {
                 this.connecting = true;
             });
 
-            let intervalId = setInterval(action(() => {
-                this.serverDownloadSpeed = this.serverDownloadedSize - this.debouncedServerDownloadedSize;
-                this.debouncedServerDownloadedSize = this.serverDownloadedSize;
-            }), 1000);
+            let intervalId = setInterval(
+                action(() => {
+                    this.serverDownloadSpeed =
+                        this.serverDownloadedSize -
+                        this.debouncedServerDownloadedSize;
+                    this.debouncedServerDownloadedSize =
+                        this.serverDownloadedSize;
+                }),
+                1000
+            );
 
             let serverBuffer: Uint8Array;
 
             try {
-                serverBuffer = await fetchServer(action(([downloaded, total]) => {
-                    this.serverDownloadedSize = downloaded;
-                    this.serverTotalSize = total;
-                }));
+                serverBuffer = await fetchServer(
+                    action(([downloaded, total]) => {
+                        this.serverDownloadedSize = downloaded;
+                        this.serverTotalSize = total;
+                    })
+                );
                 runInAction(() => {
-                    this.serverDownloadSpeed = this.serverDownloadedSize - this.debouncedServerDownloadedSize;
-                    this.debouncedServerDownloadedSize = this.serverDownloadedSize;
+                    this.serverDownloadSpeed =
+                        this.serverDownloadedSize -
+                        this.debouncedServerDownloadedSize;
+                    this.debouncedServerDownloadedSize =
+                        this.serverDownloadedSize;
                 });
             } finally {
                 clearInterval(intervalId);
             }
 
-            intervalId = setInterval(action(() => {
-                this.serverUploadSpeed = this.serverUploadedSize - this.debouncedServerUploadedSize;
-                this.debouncedServerUploadedSize = this.serverUploadedSize;
-            }), 1000);
+            intervalId = setInterval(
+                action(() => {
+                    this.serverUploadSpeed =
+                        this.serverUploadedSize -
+                        this.debouncedServerUploadedSize;
+                    this.debouncedServerUploadedSize = this.serverUploadedSize;
+                }),
+                1000
+            );
 
             try {
                 await new ReadableStream<Uint8Array>({
@@ -829,49 +992,68 @@ class ScrcpyPageState {
                     },
                 })
                     .pipeThrough(new ChunkStream(ADB_SYNC_MAX_PACKET_SIZE))
-                    .pipeThrough(new ProgressStream(action((progress) => {
-                        this.serverUploadedSize = progress;
-                    })))
+                    .pipeThrough(
+                        new ProgressStream(
+                            action((progress) => {
+                                this.serverUploadedSize = progress;
+                            })
+                        )
+                    )
                     .pipeTo(AdbScrcpyClient.pushServer(GlobalState.device!));
 
                 runInAction(() => {
-                    this.serverUploadSpeed = this.serverUploadedSize - this.debouncedServerUploadedSize;
+                    this.serverUploadSpeed =
+                        this.serverUploadedSize -
+                        this.debouncedServerUploadedSize;
                     this.debouncedServerUploadedSize = this.serverUploadedSize;
                 });
             } finally {
                 clearInterval(intervalId);
             }
 
-            const decoderDefinition = this.decoders.find(x => x.key === this.settings.decoder) ?? this.decoders[0];
+            const decoderDefinition =
+                this.decoders.find((x) => x.key === this.settings.decoder) ??
+                this.decoders[0];
             const decoder = new decoderDefinition.Constructor();
 
             runInAction(() => {
                 this.decoder = decoder;
 
                 let lastFrameCount = 0;
-                this.fpsCounterIntervalId = setInterval(action(() => {
-                    this.fps = decoder.frameRendered - lastFrameCount;
-                    lastFrameCount = decoder.frameRendered;
-                }), 1000);
+                this.fpsCounterIntervalId = setInterval(
+                    action(() => {
+                        this.fps = decoder.frameRendered - lastFrameCount;
+                        lastFrameCount = decoder.frameRendered;
+                    }),
+                    1000
+                );
             });
 
-            const options = new AdbScrcpyOptions1_22(new ScrcpyOptions1_24({
-                logLevel: ScrcpyLogLevel.Debug,
-                ...this.settings,
-                sendDeviceMeta: false,
-                sendDummyByte: false,
-                codecOptions: !this.settings.ignoreDecoderCodecArgs
-                    ? new CodecOptions({
-                        profile: decoder.maxProfile,
-                        level: decoder.maxLevel,
-                    })
-                    : undefined,
-            }));
+            const options = new AdbScrcpyOptions1_22(
+                new ScrcpyOptions1_25({
+                    logLevel: ScrcpyLogLevel.Debug,
+                    ...this.settings,
+                    sendDeviceMeta: false,
+                    sendDummyByte: false,
+                    codecOptions: !this.settings.ignoreDecoderCodecArgs
+                        ? new CodecOptions({
+                              profile: decoder.maxProfile,
+                              level: decoder.maxLevel,
+                          })
+                        : undefined,
+                })
+            );
 
             runInAction(() => {
                 this.log = [];
-                this.log.push(`[client] Server version: ${SCRCPY_SERVER_VERSION}`);
-                this.log.push(`[client] Server arguments: ${options.formatServerArguments().join(' ')}`);
+                this.log.push(
+                    `[client] Server version: ${SCRCPY_SERVER_VERSION}`
+                );
+                this.log.push(
+                    `[client] Server arguments: ${options
+                        .formatServerArguments()
+                        .join(" ")}`
+                );
             });
 
             const client = await AdbScrcpyClient.start(
@@ -881,39 +1063,56 @@ class ScrcpyPageState {
                 options
             );
 
-            client.stdout.pipeTo(new WritableStream<string>({
-                write: action((line) => {
-                    this.log.push(line);
-                }),
-            }));
+            client.stdout.pipeTo(
+                new WritableStream<string>({
+                    write: action((line) => {
+                        this.log.push(line);
+                    }),
+                })
+            );
 
             client.videoStream
-                .pipeThrough(new InspectStream(action((packet: ScrcpyVideoStreamPacket) => {
-                    if (packet.type === 'configuration') {
-                        const { croppedWidth, croppedHeight, } = packet.data;
-                        this.log.push(`[client] Video size changed: ${croppedWidth}x${croppedHeight}`);
-
-                        this.width = croppedWidth;
-                        this.height = croppedHeight;
-                    }
-                })))
+                .pipeThrough(
+                    new InspectStream(
+                        action((packet: ScrcpyVideoStreamPacket) => {
+                            if (packet.type === "configuration") {
+                                const { croppedWidth, croppedHeight } =
+                                    packet.data;
+                                this.log.push(
+                                    `[client] Video size changed: ${croppedWidth}x${croppedHeight}`
+                                );
+
+                                this.width = croppedWidth;
+                                this.height = croppedHeight;
+                            }
+                        })
+                    )
+                )
                 .pipeTo(decoder.writable)
-                .catch(() => { });
+                .catch(() => {});
 
             client.exit.then(this.dispose);
 
-            client.deviceMessageStream!.pipeTo(new WritableStream({
-                write(message) {
-                    switch (message.type) {
-                        case ScrcpyDeviceMessageType.Clipboard:
-                            window.navigator.clipboard.writeText(message.content);
-                            break;
-                    }
-                }
-            })).catch(() => { });
+            client
+                .deviceMessageStream!.pipeTo(
+                    new WritableStream({
+                        write(message) {
+                            switch (message.type) {
+                                case ScrcpyDeviceMessageType.Clipboard:
+                                    window.navigator.clipboard.writeText(
+                                        message.content
+                                    );
+                                    break;
+                            }
+                        },
+                    })
+                )
+                .catch(() => {});
 
             if (this.settings.turnScreenOff) {
-                await client.controlMessageSerializer!.setScreenPowerMode(AndroidScreenPowerMode.Off);
+                await client.controlMessageSerializer!.setScreenPowerMode(
+                    AndroidScreenPowerMode.Off
+                );
             }
 
             runInAction(() => {
@@ -953,8 +1152,10 @@ class ScrcpyPageState {
 
     handleRendererContainerRef(element: HTMLDivElement | null) {
         this.rendererContainer = element;
-        this.rendererContainer?.addEventListener('wheel', this.handleWheel, { passive: false });
-    };
+        this.rendererContainer?.addEventListener("wheel", this.handleWheel, {
+            passive: false,
+        });
+    }
 
     handleBackPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
         if (!this.client) {
@@ -966,7 +1167,9 @@ class ScrcpyPageState {
         }
         e.currentTarget.setPointerCapture(e.pointerId);
 
-        this.client!.controlMessageSerializer!.backOrScreenOn(AndroidKeyEventAction.Down);
+        this.client!.controlMessageSerializer!.backOrScreenOn(
+            AndroidKeyEventAction.Down
+        );
     };
 
     handleBackPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
@@ -978,7 +1181,9 @@ class ScrcpyPageState {
             return;
         }
 
-        this.client!.controlMessageSerializer!.backOrScreenOn(AndroidKeyEventAction.Up);
+        this.client!.controlMessageSerializer!.backOrScreenOn(
+            AndroidKeyEventAction.Up
+        );
     };
 
     handleHomePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
@@ -1016,7 +1221,9 @@ class ScrcpyPageState {
         });
     };
 
-    handleAppSwitchPointerDown = async (e: React.PointerEvent<HTMLDivElement>) => {
+    handleAppSwitchPointerDown = async (
+        e: React.PointerEvent<HTMLDivElement>
+    ) => {
         if (!this.client) {
             return;
         }
@@ -1034,7 +1241,9 @@ class ScrcpyPageState {
         });
     };
 
-    handleAppSwitchPointerUp = async (e: React.PointerEvent<HTMLDivElement>) => {
+    handleAppSwitchPointerUp = async (
+        e: React.PointerEvent<HTMLDivElement>
+    ) => {
         if (!this.client) {
             return;
         }
@@ -1054,10 +1263,14 @@ class ScrcpyPageState {
     calculatePointerPosition(clientX: number, clientY: number) {
         const viewRect = this.rendererContainer!.getBoundingClientRect();
         let pointerViewX = clamp((clientX - viewRect.x) / viewRect.width, 0, 1);
-        let pointerViewY = clamp((clientY - viewRect.y) / viewRect.height, 0, 1);
+        let pointerViewY = clamp(
+            (clientY - viewRect.y) / viewRect.height,
+            0,
+            1
+        );
 
         if (this.rotate & 1) {
-            ([pointerViewX, pointerViewY] = [pointerViewY, pointerViewX]);
+            [pointerViewX, pointerViewY] = [pointerViewY, pointerViewX];
         }
         switch (this.rotate) {
             case 1:
@@ -1086,15 +1299,27 @@ class ScrcpyPageState {
             return;
         }
 
+        const { pointerType } = e;
+        let pointerId: bigint;
+        let { pressure } = e;
+        if (pointerType === "mouse") {
+            // ScrcpyPointerId.Mouse doesn't work with Chrome browser
+            // https://github.com/Genymobile/scrcpy/issues/3635
+            pointerId = ScrcpyPointerId.Finger;
+            pressure = pressure === 0 ? 0 : 1;
+        } else {
+            pointerId = BigInt(e.pointerId);
+        }
+
         const { x, y } = this.calculatePointerPosition(e.clientX, e.clientY);
         this.client!.controlMessageSerializer!.injectTouch({
             action,
-            pointerId: e.pointerType === "mouse" ? BigInt(-1) : BigInt(e.pointerId),
+            pointerId,
             screenWidth: this.client!.screenWidth!,
             screenHeight: this.client!.screenHeight!,
             pointerX: x,
             pointerY: y,
-            pressure: e.pressure * 65535,
+            pressure,
             buttons: e.buttons,
         });
     };
@@ -1108,7 +1333,9 @@ class ScrcpyPageState {
 
     handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
         this.injectTouch(
-            e.buttons === 0 ? AndroidMotionEventAction.HoverMove : AndroidMotionEventAction.Move,
+            e.buttons === 0
+                ? AndroidMotionEventAction.HoverMove
+                : AndroidMotionEventAction.Move,
             e
         );
     };
@@ -1131,8 +1358,8 @@ class ScrcpyPageState {
             screenHeight: this.client!.screenHeight!,
             pointerX: x,
             pointerY: y,
-            scrollX: -Math.sign(e.deltaX),
-            scrollY: -Math.sign(e.deltaY),
+            scrollX: e.deltaX / 100,
+            scrollY: e.deltaY / 100,
             buttons: 0,
         });
     };
@@ -1152,13 +1379,13 @@ class ScrcpyPageState {
             return;
         }
 
-        const keyCode = ({
-            Backspace: AndroidKeyCode.Delete,
-            Space: AndroidKeyCode.Space,
-            Enter: AndroidKeyCode.Enter,
-        } as Record<string, AndroidKeyCode | undefined>)[code];
+        const keyCode = KEY_MAP[code];
 
         if (keyCode) {
+            // Intercept keys like "Tab"
+            e.preventDefault();
+            e.stopPropagation();
+
             this.client!.controlMessageSerializer!.injectKeyCode({
                 action: AndroidKeyEventAction.Down,
                 keyCode,
@@ -1178,7 +1405,7 @@ class ScrcpyPageState {
 const state = new ScrcpyPageState();
 
 const ConnectionDialog = observer(() => {
-    const layerHostId = useId('layerHost');
+    const layerHostId = useId("layerHost");
 
     const [isClient, setIsClient] = useState(false);
 
@@ -1192,30 +1419,62 @@ const ConnectionDialog = observer(() => {
 
     return (
         <>
-            <LayerHost id={layerHostId} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, margin: 0, pointerEvents: 'none' }} />
+            <LayerHost
+                id={layerHostId}
+                style={{
+                    position: "absolute",
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    margin: 0,
+                    pointerEvents: "none",
+                }}
+            />
 
             <Dialog
                 hidden={!state.connecting}
                 modalProps={{ layerProps: { hostId: layerHostId } }}
-                dialogContentProps={{ title: 'Connecting...' }}
+                dialogContentProps={{ title: "Connecting..." }}
             >
                 <Stack tokens={CommonStackTokens}>
                     <ProgressIndicator
                         label="1. Downloading scrcpy server..."
-                        percentComplete={state.serverTotalSize ? state.serverDownloadedSize / state.serverTotalSize : undefined}
-                        description={formatSpeed(state.debouncedServerDownloadedSize, state.serverTotalSize, state.serverDownloadSpeed)}
+                        percentComplete={
+                            state.serverTotalSize
+                                ? state.serverDownloadedSize /
+                                  state.serverTotalSize
+                                : undefined
+                        }
+                        description={formatSpeed(
+                            state.debouncedServerDownloadedSize,
+                            state.serverTotalSize,
+                            state.serverDownloadSpeed
+                        )}
                     />
 
                     <ProgressIndicator
                         label="2. Pushing scrcpy server to device..."
-                        progressHidden={state.serverTotalSize === 0 || state.serverDownloadedSize !== state.serverTotalSize}
-                        percentComplete={state.serverUploadedSize / state.serverTotalSize}
-                        description={formatSpeed(state.debouncedServerUploadedSize, state.serverTotalSize, state.serverUploadSpeed)}
+                        progressHidden={
+                            state.serverTotalSize === 0 ||
+                            state.serverDownloadedSize !== state.serverTotalSize
+                        }
+                        percentComplete={
+                            state.serverUploadedSize / state.serverTotalSize
+                        }
+                        description={formatSpeed(
+                            state.debouncedServerUploadedSize,
+                            state.serverTotalSize,
+                            state.serverUploadSpeed
+                        )}
                     />
 
                     <ProgressIndicator
                         label="3. Starting scrcpy server on device..."
-                        progressHidden={state.serverTotalSize === 0 || state.serverUploadedSize !== state.serverTotalSize}
+                        progressHidden={
+                            state.serverTotalSize === 0 ||
+                            state.serverUploadedSize !== state.serverTotalSize
+                        }
                     />
                 </Stack>
             </Dialog>
@@ -1226,37 +1485,50 @@ const ConnectionDialog = observer(() => {
 const NavigationBar = observer(function NavigationBar({
     className,
     style,
-    children
+    children,
 }: {
     className: string;
     style: CSSProperties;
     children: ReactNode;
-    }) {
+}) {
     if (!state.navigationBarVisible) {
         return (
-            <div className={className} style={style}>{children}</div>
+            <div className={className} style={style}>
+                {children}
+            </div>
         );
     }
 
     return (
-        <Stack className={className} verticalFill horizontalAlign="center" style={{ height: '40px', background: '#999', ...style }}>
+        <Stack
+            className={className}
+            verticalFill
+            horizontalAlign="center"
+            style={{ height: "40px", background: "#999", ...style }}
+        >
             {children}
-            <Stack verticalFill horizontal style={{ width: '100%', maxWidth: 300 }} horizontalAlign="space-evenly" verticalAlign="center">
+            <Stack
+                verticalFill
+                horizontal
+                style={{ width: "100%", maxWidth: 300 }}
+                horizontalAlign="space-evenly"
+                verticalAlign="center"
+            >
                 <IconButton
                     iconProps={{ iconName: Icons.Play }}
-                    style={{ transform: 'rotate(180deg)', color: 'white' }}
+                    style={{ transform: "rotate(180deg)", color: "white" }}
                     onPointerDown={state.handleBackPointerDown}
                     onPointerUp={state.handleBackPointerUp}
                 />
                 <IconButton
                     iconProps={{ iconName: Icons.Circle }}
-                    style={{ color: 'white' }}
+                    style={{ color: "white" }}
                     onPointerDown={state.handleHomePointerDown}
                     onPointerUp={state.handleHomePointerUp}
                 />
                 <IconButton
                     iconProps={{ iconName: Icons.Stop }}
-                    style={{ color: 'white' }}
+                    style={{ color: "white" }}
                     onPointerDown={state.handleAppSwitchPointerDown}
                     onPointerUp={state.handleAppSwitchPointerUp}
                 />
@@ -1268,13 +1540,32 @@ const NavigationBar = observer(function NavigationBar({
 const Scrcpy: NextPage = () => {
     const classes = useClasses();
 
+    useEffect(() => {
+        // Detect WebCodecs support at client side
+        if (
+            state.decoders.length === 1 &&
+            typeof window.VideoDecoder === "function"
+        ) {
+            runInAction(() => {
+                state.decoders.unshift({
+                    key: "webcodecs",
+                    name: "WebCodecs",
+                    Constructor: WebCodecsDecoder,
+                });
+            });
+        }
+    }, []);
+
     return (
         <Stack {...RouteStackProps}>
             <Head>
                 <title>Scrcpy - Android Web Toolbox</title>
             </Head>
 
-            <CommandBar items={state.commandBarItems} farItems={state.commandBarFarItems} />
+            <CommandBar
+                items={state.commandBarItems}
+                farItems={state.commandBarFarItems}
+            />
 
             <Stack horizontal grow styles={{ root: { height: 0 } }}>
                 <DeviceView
@@ -1290,7 +1581,11 @@ const Scrcpy: NextPage = () => {
                         style={{
                             width: state.width,
                             height: state.height,
-                            transform: `translate(${(state.rotatedWidth - state.width) / 2}px, ${(state.rotatedHeight - state.height) / 2}px) rotate(${state.rotate * 90}deg)`
+                            transform: `translate(${
+                                (state.rotatedWidth - state.width) / 2
+                            }px, ${
+                                (state.rotatedHeight - state.height) / 2
+                            }px) rotate(${state.rotate * 90}deg)`,
                         }}
                         onPointerDown={state.handlePointerDown}
                         onPointerMove={state.handlePointerMove}
@@ -1301,38 +1596,50 @@ const Scrcpy: NextPage = () => {
                     />
                 </DeviceView>
 
-                <div style={{
-                    padding: 12,
-                    overflow: 'hidden auto',
-                    display: state.logVisible ? 'block' : 'none',
-                    width: 500,
-                    fontFamily: 'monospace',
-                    overflowY: 'auto',
-                    whiteSpace: 'pre-wrap',
-                    wordWrap: 'break-word',
-                }}>
+                <div
+                    style={{
+                        padding: 12,
+                        overflow: "hidden auto",
+                        display: state.logVisible ? "block" : "none",
+                        width: 500,
+                        fontFamily: "monospace",
+                        overflowY: "auto",
+                        whiteSpace: "pre-wrap",
+                        wordWrap: "break-word",
+                    }}
+                >
                     {state.log.map((line, index) => (
-                        <div key={index}>
-                            {line}
-                        </div>
+                        <div key={index}>{line}</div>
                     ))}
                 </div>
 
-                <div style={{ padding: 12, overflow: 'hidden auto', display: state.settingsVisible ? 'block' : 'none', width: 300 }}>
+                <div
+                    style={{
+                        padding: 12,
+                        overflow: "hidden auto",
+                        display: state.settingsVisible ? "block" : "none",
+                        width: 300,
+                    }}
+                >
                     <div>Changes will take effect on next connection</div>
 
-                    {state.settingDefinitions.map(definition => (
+                    {state.settingDefinitions.map((definition) => (
                         <SettingItem
                             key={definition.key}
                             definition={definition}
                             settings={state.settings}
-                            onChange={action((key, value) => (state.settings as any)[key] = value)}
+                            onChange={action(
+                                (key, value) =>
+                                    ((state.settings as any)[key] = value)
+                            )}
                         />
                     ))}
                 </div>
 
                 <DemoModePanel
-                    style={{ display: state.demoModeVisible ? 'block' : 'none' }}
+                    style={{
+                        display: state.demoModeVisible ? "block" : "none",
+                    }}
                 />
 
                 <ConnectionDialog />
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index ce46113a8..b613d42d3 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -38,14 +38,14 @@ importers:
 
   ../../apps/demo:
     specifiers:
-      '@fluentui/react': ^8.103.10
+      '@fluentui/react': ^8.104.0
       '@fluentui/react-file-type-icons': ^8.8.4
       '@fluentui/react-hooks': ^8.6.14
       '@fluentui/react-icons': ^2.0.190
       '@fluentui/style-utilities': ^8.8.4
       '@griffel/react': ^1.5.2
       '@mdx-js/loader': ^2.2.1
-      '@next/mdx': ^13.0.7
+      '@next/mdx': ^13.1.0
       '@types/react': 18.0.26
       '@yume-chan/adb': workspace:^0.0.17
       '@yume-chan/adb-backend-direct-sockets': workspace:^0.0.9
@@ -63,20 +63,20 @@ importers:
       '@yume-chan/stream-saver': ^2.0.6
       '@yume-chan/struct': workspace:^0.0.17
       eslint: ^8.30.0
-      eslint-config-next: 13.0.7
+      eslint-config-next: 13.1.0
       mobx: ^6.7.0
       mobx-react-lite: ^3.4.0
-      next: 13.0.7
+      next: 13.1.0
       react: ^18.2.0
       react-dom: ^18.2.0
       source-map-loader: ^4.0.1
       typescript: ^4.9.4
       xterm: ^5.1.0
-      xterm-addon-fit: ^0.6.0
-      xterm-addon-search: ^0.10.0
+      xterm-addon-fit: ^0.7.0
+      xterm-addon-search: ^0.11.0
       xterm-addon-webgl: ^0.14.0
     dependencies:
-      '@fluentui/react': 8.103.10_ib3m5ricvtkl2cll7qpr2f6lvq
+      '@fluentui/react': 8.104.0_ib3m5ricvtkl2cll7qpr2f6lvq
       '@fluentui/react-file-type-icons': 8.8.4_kzbn2opkn2327fwg5yzwzya5o4
       '@fluentui/react-hooks': 8.6.14_kzbn2opkn2327fwg5yzwzya5o4
       '@fluentui/react-icons': 2.0.190_react@18.2.0
@@ -99,19 +99,19 @@ importers:
       '@yume-chan/struct': link:../../libraries/struct
       mobx: 6.7.0
       mobx-react-lite: 3.4.0_jofyzmwkboewm6mjrhi25mngky
-      next: 13.0.7_biqbaboplfbrettd7655fr4n2y
+      next: 13.1.0_biqbaboplfbrettd7655fr4n2y
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       xterm: 5.1.0
-      xterm-addon-fit: 0.6.0_xterm@5.1.0
-      xterm-addon-search: 0.10.0_xterm@5.1.0
+      xterm-addon-fit: 0.7.0_xterm@5.1.0
+      xterm-addon-search: 0.11.0_xterm@5.1.0
       xterm-addon-webgl: 0.14.0_xterm@5.1.0
     devDependencies:
       '@mdx-js/loader': 2.2.1
-      '@next/mdx': 13.0.7_@mdx-js+loader@2.2.1
+      '@next/mdx': 13.1.0_@mdx-js+loader@2.2.1
       '@types/react': 18.0.26
       eslint: 8.30.0
-      eslint-config-next: 13.0.7_lzzuuodtsqwxnvqeq4g4likcqa
+      eslint-config-next: 13.1.0_lzzuuodtsqwxnvqeq4g4likcqa
       source-map-loader: 4.0.1
       typescript: 4.9.4
 
@@ -4176,8 +4176,8 @@ packages:
       tslib: 2.4.1
     dev: false
 
-  /@fluentui/react/8.103.10_ib3m5ricvtkl2cll7qpr2f6lvq:
-    resolution: {integrity: sha512-ivAn05e6JleJsihR46ne8IMRStOM5GUM+XZMoGx1SynXhKvcuR/h2mGl6tXIM+9xoNXhjr5hf9Yx68kCPDWAGw==}
+  /@fluentui/react/8.104.0_ib3m5ricvtkl2cll7qpr2f6lvq:
+    resolution: {integrity: sha512-D68dmf4ZTScb3dADwESPMyJtQGzQ5eTY5y1uPAyaMwlAc2oUCimycqYkaggb55ELrxlSdCzFSfTQ/5Xq3pGs+A==}
     peerDependencies:
       '@types/react': '>=16.8.0 <19.0.0'
       '@types/react-dom': '>=16.8.0 <19.0.0'
@@ -4664,18 +4664,18 @@ packages:
     resolution: {integrity: sha512-91uZ4u6p5ZClHQE2RpJKTZALeCl1G9cZB47SPivfPrRtjrhqCfS3gC3zNoikUhpwccWjfSN50zjm289Wxkf/8Q==}
     dev: false
 
-  /@next/env/13.0.7:
-    resolution: {integrity: sha512-ZBclBRB7DbkSswXgbJ+muF5RxfgmAuQKAWL8tcm86aZmoiL1ZainxQK0hMcMYdh+IYG8UObAKV2wKB5O+6P4ng==}
+  /@next/env/13.1.0:
+    resolution: {integrity: sha512-6iNixFzCndH+Bl4FetQzOMjxCJqg8fs0LAlZviig1K6mIjOWH2m2oPcHcOg1Ta5VCe7Bx5KG1Hs+NrWDUkBt9A==}
     dev: false
 
-  /@next/eslint-plugin-next/13.0.7:
-    resolution: {integrity: sha512-Q/Z0V3D3UpKhhzFU6/s17wD4rqJ+ZDGded8UpqNyzX1nUdD+/PnsZexPhSIZ2Yf/c8QESeirmJVRb3eAfCQkRQ==}
+  /@next/eslint-plugin-next/13.1.0:
+    resolution: {integrity: sha512-LGh0iqcEwxs0HmEK96cXXuhofcOGSUGl8Zms279JW8Zq/6GJkXo87gtRpfJrwD+a77nEIdRaORPM91Us3xW0Qw==}
     dependencies:
       glob: 7.1.7
     dev: true
 
-  /@next/mdx/13.0.7_@mdx-js+loader@2.2.1:
-    resolution: {integrity: sha512-ekuxCOO7j/Un7qxIYtuBAQN+bduDAtYDEMEf0OqBQ3ZDWJpQYrJ1kGr0uk1WjW5Z1OH7hV8ZlGwuBvhfjaao8Q==}
+  /@next/mdx/13.1.0_@mdx-js+loader@2.2.1:
+    resolution: {integrity: sha512-kNq4E0QRqCLf1hnIrKwCzinVjQzmoJmyS11pq4jv6pXtKXhTPjnpaUZ8aSZFM5E97LOvAC1axl9cyMsA1fexiQ==}
     peerDependencies:
       '@mdx-js/loader': '>=0.15.0'
       '@mdx-js/react': '*'
@@ -4684,8 +4684,8 @@ packages:
       source-map: 0.7.4
     dev: true
 
-  /@next/swc-android-arm-eabi/13.0.7:
-    resolution: {integrity: sha512-QTEamOK/LCwBf05GZ261rULMbZEpE3TYdjHlXfznV+nXwTztzkBNFXwP67gv2wW44BROzgi/vrR9H8oP+J5jxg==}
+  /@next/swc-android-arm-eabi/13.1.0:
+    resolution: {integrity: sha512-ANBZZRjZBV+Sii11ZVxbxSvfIi6dZwu4w+XnJBDmz+0/wtAigpjYWyMkuWZ/RCD7INdusOlU4EgJ99WzWGIDjA==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [android]
@@ -4693,8 +4693,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-android-arm64/13.0.7:
-    resolution: {integrity: sha512-wcy2H0Tl9ME8vKy2GnJZ7Mybwys+43F/Eh2Pvph7mSDpMbYBJ6iA0zeY62iYYXxlZhnAID3+h79FUqUEakkClw==}
+  /@next/swc-android-arm64/13.1.0:
+    resolution: {integrity: sha512-nPwbkS3aZjCIe61wztgjXjIeylijOP8uGtDGjjJVUF3B/5GLVx3ngZu6tjPTMEgaLM0u//HuGK+aZolWUQWE4g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
@@ -4702,8 +4702,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-arm64/13.0.7:
-    resolution: {integrity: sha512-F/mU7csN1/J2cqXJPMgTQ6MwAbc1pJ6sp6W+X0z5JEY4IFDzxKd3wRc3pCiNF7j8xW381JlNpWxhjCctnNmfaw==}
+  /@next/swc-darwin-arm64/13.1.0:
+    resolution: {integrity: sha512-0hUydiAW18jK2uGPnZRdnRQtdB/3ZoPo84A6zH7MJHxAWw9lzVsv3kMg9kgVBBlrivzqdNN8rdgA+eYNxzXU9w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -4711,8 +4711,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64/13.0.7:
-    resolution: {integrity: sha512-636AuRQynCPnIPRVzcCk5B7OMq9XjaYam2T0HeWUCE6y7EqEO3kxiuZ4QmN81T7A6Ydb+JnivYrLelHXmgdj6A==}
+  /@next/swc-darwin-x64/13.1.0:
+    resolution: {integrity: sha512-3S3iQqJIysklj0Q9gnanuYMzF8H9p+fUVhvSHxVVLcKH4HsE8EGddNkXsaOyznL1kC6vGKw7h6uz1ojaXEafCA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -4720,8 +4720,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-freebsd-x64/13.0.7:
-    resolution: {integrity: sha512-92XAMzNgQazowZ9t7uZmHRA5VdBl/SwEdrf5UybdfRovsxB4r3+yJWEvFaqYpSEp0gwndbwLokJdpz7OwFdL3Q==}
+  /@next/swc-freebsd-x64/13.1.0:
+    resolution: {integrity: sha512-wAgzwm/em48GIuWq3OYr0BpncMy7c+UA3hsyX+xKh/vb/sOIpQly7JTa+GNdk17s7kprhMfsgzPG3da36NLpkA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
@@ -4729,8 +4729,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm-gnueabihf/13.0.7:
-    resolution: {integrity: sha512-3r1CWl5P6I5n5Yxip8EXv/Rfu2Cp6wVmIOpvmczyUR82j+bcMkwPAcUjNkG/vMCagS4xV7NElrcdGb39iFmfLg==}
+  /@next/swc-linux-arm-gnueabihf/13.1.0:
+    resolution: {integrity: sha512-Cr2hzL7ad+4nj9KrR1Cz1RDcsWa61X6I7gc6PToRYIY4gL480Sijq19xo7dlXQPnr1viVzbNiNnNXZASHv7uvw==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
@@ -4738,8 +4738,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu/13.0.7:
-    resolution: {integrity: sha512-RXo8tt6ppiwyS6hpDw3JdAjKcdVewsefxnxk9xOH4mRhMyq9V2lQx0e24X/dRiZqkx3jnWReR2WRrUlgN1UkSQ==}
+  /@next/swc-linux-arm64-gnu/13.1.0:
+    resolution: {integrity: sha512-EjCIKfeZB9h72evL2yGNwBvE5Im96Zn7o2zxImlvCiUYb/xXDqn4hzhck035BSP3g3sGDLfijFTE1wKRyXIk4w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -4747,8 +4747,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl/13.0.7:
-    resolution: {integrity: sha512-RWpnW+bmfXyxyY7iARbueYDGuIF+BEp3etLeYh/RUNHb9PhOHLDgJOG8haGSykud3a6CcyBI8hEjqOhoObaDpw==}
+  /@next/swc-linux-arm64-musl/13.1.0:
+    resolution: {integrity: sha512-WAsZtCtPXlz/7/bnW9ryw856xEun+c6xSwZwbcvrMxtcSiW3z0LD91Nsj3AkexsjRtBjeEpNeVtDExqF2VKKSA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -4756,8 +4756,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu/13.0.7:
-    resolution: {integrity: sha512-/ygUIiMMTYnbKlFs5Ba9J5k/tNxFWy8eI1bBF8UuMTvV8QJHl/aLDiA5dwsei2kk99/cu3eay62JnJXkSk3RSQ==}
+  /@next/swc-linux-x64-gnu/13.1.0:
+    resolution: {integrity: sha512-Tjd5gieI3X9vPce5yF+GsQxOl0jwUkyOrTR1g5PQr+bT/9Qos/yPL48H1L5ayEp0hxgLVPW7skGal7lVnAoVEQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -4765,8 +4765,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl/13.0.7:
-    resolution: {integrity: sha512-dLzr6AL77USJN0ejgx5AS8O8SbFlbYTzs0XwAWag4oQpUG2p3ARvxwQgYQ0Z+6EP0zIRZ/XfLkN/mhsyi3m4PA==}
+  /@next/swc-linux-x64-musl/13.1.0:
+    resolution: {integrity: sha512-H9UMEQv40e9pkgdX4mCms0dDf2dimmZ6WXhDTWF/yIh9icgcsHaP73BJ9IFlgvh80wLiUgWZ3LAX4vXnXzidmg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -4774,8 +4774,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc/13.0.7:
-    resolution: {integrity: sha512-+vFIVa82AwqFkpFClKT+n73fGxrhAZ2u1u3mDYEBdxO6c9U4Pj3S5tZFsGFK9kLT/bFvf/eeVOICSLCC7MSgJQ==}
+  /@next/swc-win32-arm64-msvc/13.1.0:
+    resolution: {integrity: sha512-LFFIKjW/cPl4wvG8HF/6oYPJZ+Jy32G3FUflC8UW1Od6W9yOSEvadhk9fMyDZN4cgsNOcVc3uVSMpcuuCpbDGw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -4783,8 +4783,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-ia32-msvc/13.0.7:
-    resolution: {integrity: sha512-RNLXIhp+assD39dQY9oHhDxw+/qSJRARKhOFsHfOtf8yEfCHqcKkn3X/L+ih60ntaEqK294y1WkMk6ylotsxwA==}
+  /@next/swc-win32-ia32-msvc/13.1.0:
+    resolution: {integrity: sha512-MBLaoHZSenMdxhB3Ww1VNEhjyPT3uLjzAi5Ygk48LLLbOGu5KxQolhINRrqGuJWqJRNWSJ9JSFBfJrZwQzrUew==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -4792,8 +4792,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc/13.0.7:
-    resolution: {integrity: sha512-kvdnlLcrnEq72ZP0lqe2Z5NqvB9N5uSCvtXJ0PhKvNncWWd0fEG9Ec9erXgwCmVlM2ytw41k9/uuQ+SVw4Pihw==}
+  /@next/swc-win32-x64-msvc/13.1.0:
+    resolution: {integrity: sha512-fFTfIQvnmpbKoyh4v3ezlGqtERlgc2Sx8qJwPuYqoVi0V08wCx9wp2Iq1CINxP3UMHkEeNX7gYpDOd+9Cw9EiQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -5892,17 +5892,6 @@ packages:
     resolution: {integrity: sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==}
     dev: false
 
-  /array-includes/3.1.5:
-    resolution: {integrity: sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.1.4
-      es-abstract: 1.20.1
-      get-intrinsic: 1.1.2
-      is-string: 1.0.7
-    dev: true
-
   /array-includes/3.1.6:
     resolution: {integrity: sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==}
     engines: {node: '>= 0.4'}
@@ -5912,22 +5901,11 @@ packages:
       es-abstract: 1.20.5
       get-intrinsic: 1.1.3
       is-string: 1.0.7
-    dev: false
 
   /array-union/2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
 
-  /array.prototype.flat/1.3.0:
-    resolution: {integrity: sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.1.4
-      es-abstract: 1.20.1
-      es-shim-unscopables: 1.0.0
-    dev: true
-
   /array.prototype.flat/1.3.1:
     resolution: {integrity: sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==}
     engines: {node: '>= 0.4'}
@@ -5936,7 +5914,6 @@ packages:
       define-properties: 1.1.4
       es-abstract: 1.20.5
       es-shim-unscopables: 1.0.0
-    dev: false
 
   /array.prototype.flatmap/1.3.0:
     resolution: {integrity: sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==}
@@ -5944,7 +5921,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.1
+      es-abstract: 1.20.5
       es-shim-unscopables: 1.0.0
     dev: true
 
@@ -7511,7 +7488,6 @@ packages:
       string.prototype.trimend: 1.0.6
       string.prototype.trimstart: 1.0.6
       unbox-primitive: 1.0.2
-    dev: false
 
   /es-module-lexer/0.9.3:
     resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
@@ -7556,8 +7532,8 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  /eslint-config-next/13.0.7_lzzuuodtsqwxnvqeq4g4likcqa:
-    resolution: {integrity: sha512-X7DB7iDJ9iHi5DAZbnFdWm4M0dwarj5h5y6Vpm9INCYzFgAwSWslq3v0qjYEjtUO5IQ8n1WK6IU5FkOQ2HBhOA==}
+  /eslint-config-next/13.1.0_lzzuuodtsqwxnvqeq4g4likcqa:
+    resolution: {integrity: sha512-UdZm8GTR8PWys1dw+gJY+aLR/etkbTTsrRxiQ57nxqAE4Fw6PGZ2prLjqV6IhNkFve3c8ZgbCrUolfGad2mryA==}
     peerDependencies:
       eslint: ^7.23.0 || ^8.0.0
       typescript: '>=3.3.1'
@@ -7565,7 +7541,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@next/eslint-plugin-next': 13.0.7
+      '@next/eslint-plugin-next': 13.1.0
       '@rushstack/eslint-patch': 1.2.0
       '@typescript-eslint/parser': 5.47.0_lzzuuodtsqwxnvqeq4g4likcqa
       eslint: 8.30.0
@@ -7606,14 +7582,6 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils/2.7.3:
-    resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      debug: 3.2.7
-      find-up: 2.1.0
-    dev: true
-
   /eslint-module-utils/2.7.4_eslint@8.30.0:
     resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
     engines: {node: '>=4'}
@@ -7625,7 +7593,6 @@ packages:
     dependencies:
       debug: 3.2.7
       eslint: 8.30.0
-    dev: false
 
   /eslint-plugin-import/2.26.0_eslint@8.30.0:
     resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
@@ -7633,18 +7600,18 @@ packages:
     peerDependencies:
       eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
     dependencies:
-      array-includes: 3.1.5
-      array.prototype.flat: 1.3.0
+      array-includes: 3.1.6
+      array.prototype.flat: 1.3.1
       debug: 2.6.9
       doctrine: 2.1.0
       eslint: 8.30.0
       eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.3
+      eslint-module-utils: 2.7.4_eslint@8.30.0
       has: 1.0.3
       is-core-module: 2.11.0
       is-glob: 4.0.3
       minimatch: 3.1.2
-      object.values: 1.1.5
+      object.values: 1.1.6
       resolve: 1.22.1
       tsconfig-paths: 3.14.1
     dev: true
@@ -7657,7 +7624,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.18.9
       aria-query: 4.2.2
-      array-includes: 3.1.5
+      array-includes: 3.1.6
       ast-types-flow: 0.0.7
       axe-core: 4.4.3
       axobject-query: 2.2.0
@@ -7686,7 +7653,7 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
     dependencies:
-      array-includes: 3.1.5
+      array-includes: 3.1.6
       array.prototype.flatmap: 1.3.0
       doctrine: 2.1.0
       eslint: 8.30.0
@@ -7696,7 +7663,7 @@ packages:
       object.entries: 1.1.5
       object.fromentries: 2.0.5
       object.hasown: 1.1.1
-      object.values: 1.1.5
+      object.values: 1.1.6
       prop-types: 15.8.1
       resolve: 2.0.0-next.4
       semver: 6.3.0
@@ -8157,13 +8124,6 @@ packages:
       pkg-dir: 4.2.0
     dev: false
 
-  /find-up/2.1.0:
-    resolution: {integrity: sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==}
-    engines: {node: '>=4'}
-    dependencies:
-      locate-path: 2.0.0
-    dev: true
-
   /find-up/3.0.0:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
     engines: {node: '>=6'}
@@ -8358,7 +8318,6 @@ packages:
       function-bind: 1.1.1
       has: 1.0.3
       has-symbols: 1.0.3
-    dev: false
 
   /get-own-enumerable-property-symbols/3.0.2:
     resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
@@ -8531,7 +8490,6 @@ packages:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
       get-intrinsic: 1.1.3
-    dev: false
 
   /got/8.3.2:
     resolution: {integrity: sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==}
@@ -9098,7 +9056,6 @@ packages:
   /is-callable/1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
-    dev: false
 
   /is-ci/2.0.0:
     resolution: {integrity: sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==}
@@ -9976,8 +9933,8 @@ packages:
     resolution: {integrity: sha512-4ZCADZHRkno244xlNnn4AOG6sRQ7iBZ5BbgZ4vW4y5IZw7cVUD1PPeblm1xx/nfmMxPdt/LHsXZW8z/j58+l9Q==}
     engines: {node: '>=4.0'}
     dependencies:
-      array-includes: 3.1.5
-      object.assign: 4.1.2
+      array-includes: 3.1.6
+      object.assign: 4.1.4
     dev: true
 
   /keyv/3.0.0:
@@ -10066,14 +10023,6 @@ packages:
     engines: {node: '>= 12.13.0'}
     dev: false
 
-  /locate-path/2.0.0:
-    resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
-    engines: {node: '>=4'}
-    dependencies:
-      p-locate: 2.0.0
-      path-exists: 3.0.0
-    dev: true
-
   /locate-path/3.0.0:
     resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
     engines: {node: '>=6'}
@@ -10787,8 +10736,8 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: false
 
-  /next/13.0.7_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-YfTifqX9vfHm+rSU/H/3xvzOHDkYuMuh4wsvTjiqj9h7qHEF7KHB66X4qrH96Po+ohdid4JY8YVGPziDwdXL0A==}
+  /next/13.1.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-lQMZH1V94L5IL/WaihQkTYabSY73aqgrkGPJB5uz+2O3ES4I3losV/maXLY7l7x5e+oNyE9N81upNQ8uRsR5/A==}
     engines: {node: '>=14.6.0'}
     hasBin: true
     peerDependencies:
@@ -10805,27 +10754,27 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.0.7
+      '@next/env': 13.1.0
       '@swc/helpers': 0.4.14
       caniuse-lite: 1.0.30001431
       postcss: 8.4.14
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      styled-jsx: 5.1.0_react@18.2.0
+      styled-jsx: 5.1.1_react@18.2.0
     optionalDependencies:
-      '@next/swc-android-arm-eabi': 13.0.7
-      '@next/swc-android-arm64': 13.0.7
-      '@next/swc-darwin-arm64': 13.0.7
-      '@next/swc-darwin-x64': 13.0.7
-      '@next/swc-freebsd-x64': 13.0.7
-      '@next/swc-linux-arm-gnueabihf': 13.0.7
-      '@next/swc-linux-arm64-gnu': 13.0.7
-      '@next/swc-linux-arm64-musl': 13.0.7
-      '@next/swc-linux-x64-gnu': 13.0.7
-      '@next/swc-linux-x64-musl': 13.0.7
-      '@next/swc-win32-arm64-msvc': 13.0.7
-      '@next/swc-win32-ia32-msvc': 13.0.7
-      '@next/swc-win32-x64-msvc': 13.0.7
+      '@next/swc-android-arm-eabi': 13.1.0
+      '@next/swc-android-arm64': 13.1.0
+      '@next/swc-darwin-arm64': 13.1.0
+      '@next/swc-darwin-x64': 13.1.0
+      '@next/swc-freebsd-x64': 13.1.0
+      '@next/swc-linux-arm-gnueabihf': 13.1.0
+      '@next/swc-linux-arm64-gnu': 13.1.0
+      '@next/swc-linux-arm64-musl': 13.1.0
+      '@next/swc-linux-x64-gnu': 13.1.0
+      '@next/swc-linux-x64-musl': 13.1.0
+      '@next/swc-win32-arm64-msvc': 13.1.0
+      '@next/swc-win32-ia32-msvc': 13.1.0
+      '@next/swc-win32-x64-msvc': 13.1.0
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -10953,7 +10902,6 @@ packages:
       define-properties: 1.1.4
       has-symbols: 1.0.3
       object-keys: 1.1.1
-    dev: false
 
   /object.entries/1.1.5:
     resolution: {integrity: sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==}
@@ -10961,7 +10909,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.1
+      es-abstract: 1.20.5
     dev: true
 
   /object.fromentries/2.0.5:
@@ -10970,23 +10918,14 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.1
+      es-abstract: 1.20.5
     dev: true
 
   /object.hasown/1.1.1:
     resolution: {integrity: sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==}
     dependencies:
       define-properties: 1.1.4
-      es-abstract: 1.20.1
-    dev: true
-
-  /object.values/1.1.5:
-    resolution: {integrity: sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.1.4
-      es-abstract: 1.20.1
+      es-abstract: 1.20.5
     dev: true
 
   /object.values/1.1.6:
@@ -10996,7 +10935,6 @@ packages:
       call-bind: 1.0.2
       define-properties: 1.1.4
       es-abstract: 1.20.5
-    dev: false
 
   /obuf/1.1.2:
     resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
@@ -11076,13 +11014,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /p-limit/1.3.0:
-    resolution: {integrity: sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==}
-    engines: {node: '>=4'}
-    dependencies:
-      p-try: 1.0.0
-    dev: true
-
   /p-limit/2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -11095,13 +11026,6 @@ packages:
     dependencies:
       yocto-queue: 0.1.0
 
-  /p-locate/2.0.0:
-    resolution: {integrity: sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==}
-    engines: {node: '>=4'}
-    dependencies:
-      p-limit: 1.3.0
-    dev: true
-
   /p-locate/3.0.0:
     resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
     engines: {node: '>=6'}
@@ -11143,11 +11067,6 @@ packages:
       p-finally: 1.0.0
     dev: true
 
-  /p-try/1.0.0:
-    resolution: {integrity: sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==}
-    engines: {node: '>=4'}
-    dev: true
-
   /p-try/2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
@@ -11244,6 +11163,7 @@ packages:
   /path-exists/3.0.0:
     resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
     engines: {node: '>=4'}
+    dev: false
 
   /path-exists/4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
@@ -12454,7 +12374,6 @@ packages:
       call-bind: 1.0.2
       get-intrinsic: 1.1.3
       is-regex: 1.1.4
-    dev: false
 
   /safer-buffer/2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
@@ -12882,8 +12801,8 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.1
-      get-intrinsic: 1.1.2
+      es-abstract: 1.20.5
+      get-intrinsic: 1.1.3
       has-symbols: 1.0.3
       internal-slot: 1.0.3
       regexp.prototype.flags: 1.4.3
@@ -12903,7 +12822,6 @@ packages:
       call-bind: 1.0.2
       define-properties: 1.1.4
       es-abstract: 1.20.5
-    dev: false
 
   /string.prototype.trimstart/1.0.5:
     resolution: {integrity: sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==}
@@ -12918,7 +12836,6 @@ packages:
       call-bind: 1.0.2
       define-properties: 1.1.4
       es-abstract: 1.20.5
-    dev: false
 
   /string_decoder/1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
@@ -13005,8 +12922,8 @@ packages:
     dependencies:
       inline-style-parser: 0.1.1
 
-  /styled-jsx/5.1.0_react@18.2.0:
-    resolution: {integrity: sha512-/iHaRJt9U7T+5tp6TRelLnqBqiaIT0HsO0+vgyj8hK2KUk7aejFqRrumqPUlAqDwAj8IbS/1hk3IhBAAK/FCUQ==}
+  /styled-jsx/5.1.1_react@18.2.0:
+    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
       '@babel/core': '*'
@@ -14108,16 +14025,16 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
-  /xterm-addon-fit/0.6.0_xterm@5.1.0:
-    resolution: {integrity: sha512-9/7A+1KEjkFam0yxTaHfuk9LEvvTSBi0PZmEkzJqgafXPEXL9pCMAVV7rB09sX6ATRDXAdBpQhZkhKj7CGvYeg==}
+  /xterm-addon-fit/0.7.0_xterm@5.1.0:
+    resolution: {integrity: sha512-tQgHGoHqRTgeROPnvmtEJywLKoC/V9eNs4bLLz7iyJr1aW/QFzRwfd3MGiJ6odJd9xEfxcW36/xRU47JkD5NKQ==}
     peerDependencies:
       xterm: ^5.0.0
     dependencies:
       xterm: 5.1.0
     dev: false
 
-  /xterm-addon-search/0.10.0_xterm@5.1.0:
-    resolution: {integrity: sha512-l+kjDxNDQbkniU5OUo9BHknxUEPZGM0OFpVpc2sMmrb97S0FKJVJO4wAZPJvSGVJ8ZEG6KuDyzXluvnb08t71Q==}
+  /xterm-addon-search/0.11.0_xterm@5.1.0:
+    resolution: {integrity: sha512-6U4uHXcQ7G5igsdaGqrJ9ehm7vep24bXqWxuy3AnIosXF2Z5uy2MvmYRyTGNembIqPV/x1YhBQ7uShtuqBHhOQ==}
     peerDependencies:
       xterm: ^5.0.0
     dependencies:
diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json
index 8cfd0c8c7..d4c005c84 100644
--- a/common/config/rush/repo-state.json
+++ b/common/config/rush/repo-state.json
@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "299fc3205952059fcc5f33d350852a626eb6dff2",
+  "pnpmShrinkwrapHash": "fc12d2ee6b42782689d955ce4e6070b3774bab58",
   "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
 }
diff --git a/libraries/adb-backend-webusb/src/backend.ts b/libraries/adb-backend-webusb/src/backend.ts
index 8e7685ca8..99c287adb 100644
--- a/libraries/adb-backend-webusb/src/backend.ts
+++ b/libraries/adb-backend-webusb/src/backend.ts
@@ -7,9 +7,9 @@ import {
 } from "@yume-chan/adb";
 import {
     DuplexStreamFactory,
-    pipeFrom,
     ReadableStream,
     WritableStream,
+    pipeFrom,
     type ReadableWritablePair,
 } from "@yume-chan/stream-extra";
 import {
@@ -58,9 +58,12 @@ export class AdbWebUsbBackendStream
         inEndpoint: USBEndpoint,
         outEndpoint: USBEndpoint
     ) {
+        let closed = false;
+
         const factory = new DuplexStreamFactory<AdbPacketData, Uint8Array>({
             close: async () => {
                 try {
+                    closed = true;
                     await device.close();
                 } catch {
                     /* device may have already disconnected */
@@ -128,10 +131,17 @@ export class AdbWebUsbBackendStream
                 new WritableStream(
                     {
                         write: async (chunk) => {
-                            await device.transferOut(
-                                outEndpoint.endpointNumber,
-                                chunk
-                            );
+                            try {
+                                await device.transferOut(
+                                    outEndpoint.endpointNumber,
+                                    chunk
+                                );
+                            } catch (e) {
+                                if (closed) {
+                                    return;
+                                }
+                                throw e;
+                            }
                         },
                     },
                     {
diff --git a/libraries/scrcpy/src/adb/options/types.ts b/libraries/scrcpy/src/adb/options/types.ts
index 70460ae67..754814b40 100644
--- a/libraries/scrcpy/src/adb/options/types.ts
+++ b/libraries/scrcpy/src/adb/options/types.ts
@@ -1,10 +1,11 @@
 import { type Adb } from "@yume-chan/adb";
 import { type TransformStream } from "@yume-chan/stream-extra";
 
-import { type ScrcpyControlMessageType } from "../../control/index.js";
 import {
-    type ScrcpyBackOrScreenOnControlMessage1_18,
-    type ScrcpyInjectScrollControlMessage1_22,
+    type ScrcpyBackOrScreenOnControlMessage,
+    type ScrcpyControlMessageType,
+} from "../../control/index.js";
+import {
     type ScrcpyOptions,
     type ScrcpyVideoStreamPacket,
 } from "../../options/index.js";
@@ -54,15 +55,13 @@ export abstract class AdbScrcpyOptionsBase<T extends object>
     }
 
     public serializeBackOrScreenOnControlMessage(
-        message: ScrcpyBackOrScreenOnControlMessage1_18
+        message: ScrcpyBackOrScreenOnControlMessage
     ): Uint8Array | undefined {
         return this.raw.serializeBackOrScreenOnControlMessage(message);
     }
 
-    public serializeInjectScrollControlMessage(
-        message: ScrcpyInjectScrollControlMessage1_22
-    ): Uint8Array {
-        return this.raw.serializeInjectScrollControlMessage(message);
+    public getScrollController() {
+        return this.raw.getScrollController();
     }
 
     public abstract createConnection(adb: Adb): AdbScrcpyConnection;
diff --git a/libraries/scrcpy/src/control/back-or-screen-on.ts b/libraries/scrcpy/src/control/back-or-screen-on.ts
new file mode 100644
index 000000000..e372249ef
--- /dev/null
+++ b/libraries/scrcpy/src/control/back-or-screen-on.ts
@@ -0,0 +1,4 @@
+import { type ScrcpyBackOrScreenOnControlMessage1_18 } from "../index.js";
+
+export type ScrcpyBackOrScreenOnControlMessage =
+    ScrcpyBackOrScreenOnControlMessage1_18;
diff --git a/libraries/scrcpy/src/control/index.ts b/libraries/scrcpy/src/control/index.ts
index 4fa4984f7..03f5d7c97 100644
--- a/libraries/scrcpy/src/control/index.ts
+++ b/libraries/scrcpy/src/control/index.ts
@@ -1,7 +1,9 @@
-export * from './inject-keycode.js';
-export * from './inject-text.js';
-export * from './inject-touch.js';
-export * from './rotate-device.js';
-export * from './serializer.js';
-export * from './set-screen-power-mode.js';
-export * from './type.js';
+export * from "./back-or-screen-on.js";
+export * from "./inject-keycode.js";
+export * from "./inject-scroll.js";
+export * from "./inject-text.js";
+export * from "./inject-touch.js";
+export * from "./rotate-device.js";
+export * from "./serializer.js";
+export * from "./set-screen-power-mode.js";
+export * from "./type.js";
diff --git a/libraries/scrcpy/src/control/inject-keycode.ts b/libraries/scrcpy/src/control/inject-keycode.ts
index b36db06d7..9cdc02d3c 100644
--- a/libraries/scrcpy/src/control/inject-keycode.ts
+++ b/libraries/scrcpy/src/control/inject-keycode.ts
@@ -1,6 +1,6 @@
-import Struct, { placeholder } from '@yume-chan/struct';
+import Struct, { placeholder } from "@yume-chan/struct";
 
-import { ScrcpyControlMessageType } from './type.js';
+import { ScrcpyControlMessageType } from "./type.js";
 
 export enum AndroidKeyEventAction {
     Down = 0,
@@ -11,8 +11,15 @@ export enum AndroidKeyEventAction {
 export enum AndroidKeyCode {
     Home = 3,
     Back = 4,
+
+    DPadUp = 19,
+    DPadDown,
+    DPadLeft,
+    DPadRight,
+
     VolumeUp = 24,
     VolumeDown,
+
     A = 29,
     B,
     C,
@@ -39,21 +46,27 @@ export enum AndroidKeyCode {
     X,
     Y,
     Z,
+
     Tab = 61,
     Space,
     Enter = 66,
     Delete,
+    Escape = 111,
+    ForwardDelete,
+
+    MoveHome = 122,
+    MoveEnd = 123,
+
     VolumeMute = 164,
     AppSwitch = 187,
 }
 
-export const ScrcpyInjectKeyCodeControlMessage =
-    new Struct()
-        .uint8('type', ScrcpyControlMessageType.InjectKeyCode as const)
-        .uint8('action', placeholder<AndroidKeyEventAction>())
-        .uint32('keyCode')
-        .uint32('repeat')
-        .uint32('metaState');
+export const ScrcpyInjectKeyCodeControlMessage = new Struct()
+    .uint8("type", ScrcpyControlMessageType.InjectKeyCode as const)
+    .uint8("action", placeholder<AndroidKeyEventAction>())
+    .uint32("keyCode")
+    .uint32("repeat")
+    .uint32("metaState");
 
 export type ScrcpyInjectKeyCodeControlMessage =
-    typeof ScrcpyInjectKeyCodeControlMessage['TInit'];
+    typeof ScrcpyInjectKeyCodeControlMessage["TInit"];
diff --git a/libraries/scrcpy/src/control/inject-scroll.ts b/libraries/scrcpy/src/control/inject-scroll.ts
new file mode 100644
index 000000000..ffb25def7
--- /dev/null
+++ b/libraries/scrcpy/src/control/inject-scroll.ts
@@ -0,0 +1,4 @@
+import { type ScrcpyInjectScrollControlMessage1_25 } from "../options/index.js";
+
+export type ScrcpyInjectScrollControlMessage =
+    ScrcpyInjectScrollControlMessage1_25;
diff --git a/libraries/scrcpy/src/control/inject-touch.ts b/libraries/scrcpy/src/control/inject-touch.ts
index 00a8ad407..026832146 100644
--- a/libraries/scrcpy/src/control/inject-touch.ts
+++ b/libraries/scrcpy/src/control/inject-touch.ts
@@ -1,4 +1,8 @@
-import Struct, { placeholder } from "@yume-chan/struct";
+import Struct, {
+    NumberFieldDefinition,
+    NumberFieldType,
+    placeholder,
+} from "@yume-chan/struct";
 
 import { ScrcpyControlMessageType } from "./type.js";
 
@@ -19,6 +23,33 @@ export enum AndroidMotionEventAction {
     ButtonRelease,
 }
 
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace ScrcpyPointerId {
+    export const Mouse = BigInt(-1);
+    export const Finger = BigInt(-2);
+    export const VirtualMouse = BigInt(-3);
+    export const VirtualFinger = BigInt(-4);
+}
+
+const Uint16Max = (1 << 16) - 1;
+
+const ScrcpyFloatToUint16NumberType: NumberFieldType = {
+    size: 2,
+    signed: false,
+    deserialize(array, littleEndian) {
+        const value = NumberFieldType.Uint16.deserialize(array, littleEndian);
+        return value / Uint16Max;
+    },
+    serialize(dataView, offset, value, littleEndian) {
+        value = value * Uint16Max;
+        NumberFieldType.Uint16.serialize(dataView, offset, value, littleEndian);
+    },
+};
+
+const ScrcpyFloatToUint16FieldDefinition = new NumberFieldDefinition(
+    ScrcpyFloatToUint16NumberType
+);
+
 export const ScrcpyInjectTouchControlMessage = new Struct()
     .uint8("type", ScrcpyControlMessageType.InjectTouch as const)
     .uint8("action", placeholder<AndroidMotionEventAction>())
@@ -27,7 +58,7 @@ export const ScrcpyInjectTouchControlMessage = new Struct()
     .uint32("pointerY")
     .uint16("screenWidth")
     .uint16("screenHeight")
-    .uint16("pressure")
+    .field("pressure", ScrcpyFloatToUint16FieldDefinition)
     .uint32("buttons");
 
 export type ScrcpyInjectTouchControlMessage =
diff --git a/libraries/scrcpy/src/control/serializer.ts b/libraries/scrcpy/src/control/serializer.ts
index 8d487b2b5..8a1ec935c 100644
--- a/libraries/scrcpy/src/control/serializer.ts
+++ b/libraries/scrcpy/src/control/serializer.ts
@@ -4,14 +4,15 @@ import {
 } from "@yume-chan/stream-extra";
 
 import {
-    type ScrcpyInjectScrollControlMessage1_22,
     type ScrcpyOptions,
+    type ScrcpyScrollController,
 } from "../options/index.js";
 
 import {
     ScrcpyInjectKeyCodeControlMessage,
     type AndroidKeyEventAction,
 } from "./inject-keycode.js";
+import { type ScrcpyInjectScrollControlMessage } from "./inject-scroll.js";
 import { ScrcpyInjectTextControlMessage } from "./inject-text.js";
 import { ScrcpyInjectTouchControlMessage } from "./inject-touch.js";
 import { ScrcpyRotateDeviceControlMessage } from "./rotate-device.js";
@@ -26,14 +27,17 @@ export class ScrcpyControlMessageSerializer {
     /** Control message type values for current version of server */
     private types: ScrcpyControlMessageType[];
     private writer: WritableStreamDefaultWriter<Uint8Array>;
+    private scrollController: ScrcpyScrollController;
 
     public constructor(
         stream: WritableStream<Uint8Array>,
         options: ScrcpyOptions<object>
     ) {
+        this.writer = stream.getWriter();
+
         this.options = options;
         this.types = options.getControlMessageTypes();
-        this.writer = stream.getWriter();
+        this.scrollController = options.getScrollController();
     }
 
     public getTypeValue(type: ScrcpyControlMessageType): number {
@@ -64,6 +68,9 @@ export class ScrcpyControlMessageSerializer {
         );
     }
 
+    /**
+     * `pressure` is a float value between 0 and 1.
+     */
     public injectTouch(message: Omit<ScrcpyInjectTouchControlMessage, "type">) {
         return this.writer.write(
             ScrcpyInjectTouchControlMessage.serialize({
@@ -73,15 +80,24 @@ export class ScrcpyControlMessageSerializer {
         );
     }
 
+    /**
+     * `scrollX` and `scrollY` are float values between 0 and 1.
+     */
     public injectScroll(
-        message: Omit<ScrcpyInjectScrollControlMessage1_22, "type">
+        message: Omit<ScrcpyInjectScrollControlMessage, "type">
     ) {
-        return this.writer.write(
-            this.options.serializeInjectScrollControlMessage({
-                ...message,
-                type: this.getTypeValue(ScrcpyControlMessageType.InjectScroll),
-            })
+        (message as ScrcpyInjectScrollControlMessage).type = this.getTypeValue(
+            ScrcpyControlMessageType.InjectScroll
+        );
+
+        const data = this.scrollController.serializeScrollMessage(
+            message as ScrcpyInjectScrollControlMessage
         );
+        if (!data) {
+            return;
+        }
+
+        return this.writer.write(data);
     }
 
     public async backOrScreenOn(action: AndroidKeyEventAction) {
diff --git a/libraries/scrcpy/src/options/1_16/index.ts b/libraries/scrcpy/src/options/1_16/index.ts
index 2ae4be4c7..3f64f756c 100644
--- a/libraries/scrcpy/src/options/1_16/index.ts
+++ b/libraries/scrcpy/src/options/1_16/index.ts
@@ -1,3 +1,4 @@
 export * from './codec-options.js';
 export * from './options.js';
+export * from "./scroll.js";
 export * from './sps.js';
diff --git a/libraries/scrcpy/src/options/1_16/options.ts b/libraries/scrcpy/src/options/1_16/options.ts
index f21f8dee4..21e1ba01e 100644
--- a/libraries/scrcpy/src/options/1_16/options.ts
+++ b/libraries/scrcpy/src/options/1_16/options.ts
@@ -7,9 +7,8 @@ import Struct from "@yume-chan/struct";
 import {
     AndroidKeyEventAction,
     ScrcpyControlMessageType,
+    type ScrcpyBackOrScreenOnControlMessage,
 } from "../../control/index.js";
-import { type ScrcpyBackOrScreenOnControlMessage1_18 } from "../1_18.js";
-import { type ScrcpyInjectScrollControlMessage1_22 } from "../1_22.js";
 import {
     toScrcpyOptionValue,
     type ScrcpyOptions,
@@ -17,6 +16,10 @@ import {
 } from "../types.js";
 
 import { CodecOptions } from "./codec-options.js";
+import {
+    ScrcpyScrollController1_16,
+    type ScrcpyScrollController,
+} from "./scroll.js";
 import { parse_sequence_parameter_set } from "./sps.js";
 
 export enum ScrcpyLogLevel {
@@ -106,18 +109,8 @@ export const ScrcpyBackOrScreenOnControlMessage1_16 = new Struct().uint8(
     ScrcpyControlMessageType.BackOrScreenOn as const
 );
 
-export const ScrcpyInjectScrollControlMessage1_16 = new Struct()
-    .uint8("type", ScrcpyControlMessageType.InjectScroll as const)
-    .uint32("pointerX")
-    .uint32("pointerY")
-    .uint16("screenWidth")
-    .uint16("screenHeight")
-    .int32("scrollX")
-    .int32("scrollY");
-
-export class ScrcpyOptions1_16<
-    T extends ScrcpyOptionsInit1_16 = ScrcpyOptionsInit1_16
-> implements ScrcpyOptions<T>
+export class ScrcpyOptions1_16<T extends ScrcpyOptionsInit1_16 = ScrcpyOptionsInit1_16>
+    implements ScrcpyOptions<T>
 {
     public value: Partial<T>;
 
@@ -307,7 +300,7 @@ export class ScrcpyOptions1_16<
     }
 
     public serializeBackOrScreenOnControlMessage(
-        message: ScrcpyBackOrScreenOnControlMessage1_18
+        message: ScrcpyBackOrScreenOnControlMessage
     ) {
         if (message.action === AndroidKeyEventAction.Down) {
             return ScrcpyBackOrScreenOnControlMessage1_16.serialize(message);
@@ -316,9 +309,7 @@ export class ScrcpyOptions1_16<
         return undefined;
     }
 
-    public serializeInjectScrollControlMessage(
-        message: ScrcpyInjectScrollControlMessage1_22
-    ): Uint8Array {
-        return ScrcpyInjectScrollControlMessage1_16.serialize(message);
+    public getScrollController(): ScrcpyScrollController {
+        return new ScrcpyScrollController1_16();
     }
 }
diff --git a/libraries/scrcpy/src/options/1_16/scroll.ts b/libraries/scrcpy/src/options/1_16/scroll.ts
new file mode 100644
index 000000000..e709d0b2c
--- /dev/null
+++ b/libraries/scrcpy/src/options/1_16/scroll.ts
@@ -0,0 +1,76 @@
+import Struct from "@yume-chan/struct";
+
+import {
+    ScrcpyControlMessageType,
+    type ScrcpyInjectScrollControlMessage,
+} from "../../control/index.js";
+
+export interface ScrcpyScrollController {
+    serializeScrollMessage(
+        message: ScrcpyInjectScrollControlMessage
+    ): Uint8Array | undefined;
+}
+
+export const ScrcpyInjectScrollControlMessage1_16 = new Struct()
+    .uint8("type", ScrcpyControlMessageType.InjectScroll as const)
+    .uint32("pointerX")
+    .uint32("pointerY")
+    .uint16("screenWidth")
+    .uint16("screenHeight")
+    .int32("scrollX")
+    .int32("scrollY");
+
+/**
+ * Old version of Scrcpy server only supports integer values for scroll.
+ *
+ * Accumulate scroll values and send scroll message when accumulated value
+ * reaches 1 or -1.
+ */
+export class ScrcpyScrollController1_16 implements ScrcpyScrollController {
+    private accumulatedX = 0;
+    private accumulatedY = 0;
+
+    protected processMessage(
+        message: ScrcpyInjectScrollControlMessage
+    ): ScrcpyInjectScrollControlMessage | undefined {
+        this.accumulatedX += message.scrollX;
+        this.accumulatedY += message.scrollY;
+
+        let scrollX = 0;
+        let scrollY = 0;
+        if (this.accumulatedX >= 1) {
+            scrollX = 1;
+            this.accumulatedX -= 1;
+        } else if (this.accumulatedX <= -1) {
+            scrollX = -1;
+            this.accumulatedX += 1;
+        }
+
+        if (this.accumulatedY >= 1) {
+            scrollY = 1;
+            this.accumulatedY -= 1;
+        } else if (this.accumulatedY <= -1) {
+            scrollY = -1;
+            this.accumulatedY += 1;
+        }
+
+        if (scrollX === 0 && scrollY === 0) {
+            return undefined;
+        }
+
+        message.scrollX = scrollX;
+        message.scrollY = scrollY;
+        return message;
+    }
+
+    public serializeScrollMessage(
+        message: ScrcpyInjectScrollControlMessage
+    ): Uint8Array | undefined {
+        const processed = this.processMessage(message);
+        if (!processed) {
+            return undefined;
+        }
+
+        return ScrcpyInjectScrollControlMessage1_16.serialize(processed);
+    }
+}
diff --git a/libraries/scrcpy/src/options/1_18.ts b/libraries/scrcpy/src/options/1_18.ts
index db83d777c..0187ff1c9 100644
--- a/libraries/scrcpy/src/options/1_18.ts
+++ b/libraries/scrcpy/src/options/1_18.ts
@@ -1,8 +1,9 @@
 import Struct, { placeholder } from "@yume-chan/struct";
 
 import {
-    type AndroidKeyEventAction,
     ScrcpyControlMessageType,
+    type AndroidKeyEventAction,
+    type ScrcpyBackOrScreenOnControlMessage,
 } from "../control/index.js";
 
 import {
@@ -65,7 +66,7 @@ export class ScrcpyOptions1_18<
     }
 
     public override serializeBackOrScreenOnControlMessage(
-        message: ScrcpyBackOrScreenOnControlMessage1_18
+        message: ScrcpyBackOrScreenOnControlMessage
     ) {
         return ScrcpyBackOrScreenOnControlMessage1_18.serialize(message);
     }
diff --git a/libraries/scrcpy/src/options/1_22/index.ts b/libraries/scrcpy/src/options/1_22/index.ts
new file mode 100644
index 000000000..249cfba6f
--- /dev/null
+++ b/libraries/scrcpy/src/options/1_22/index.ts
@@ -0,0 +1,2 @@
+export * from "./options.js";
+export * from "./scroll.js";
diff --git a/libraries/scrcpy/src/options/1_22.ts b/libraries/scrcpy/src/options/1_22/options.ts
similarity index 59%
rename from libraries/scrcpy/src/options/1_22.ts
rename to libraries/scrcpy/src/options/1_22/options.ts
index d194c6d0b..724eb396c 100644
--- a/libraries/scrcpy/src/options/1_22.ts
+++ b/libraries/scrcpy/src/options/1_22/options.ts
@@ -1,7 +1,7 @@
-import Struct from '@yume-chan/struct';
+import { type ScrcpyScrollController } from "../1_16/index.js";
+import { ScrcpyOptions1_21, type ScrcpyOptionsInit1_21 } from "../1_21.js";
 
-import { ScrcpyInjectScrollControlMessage1_16 } from './1_16/options.js';
-import { ScrcpyOptions1_21, type ScrcpyOptionsInit1_21 } from './1_21.js';
+import { ScrcpyScrollController1_22 } from "./scroll.js";
 
 export interface ScrcpyOptionsInit1_22 extends ScrcpyOptionsInit1_21 {
     downsizeOnError: boolean;
@@ -28,16 +28,9 @@ export interface ScrcpyOptionsInit1_22 extends ScrcpyOptionsInit1_21 {
     rawVideoStream: boolean;
 }
 
-export const ScrcpyInjectScrollControlMessage1_22 =
-    new Struct()
-        .fields(ScrcpyInjectScrollControlMessage1_16)
-        .int32('buttons');
-
-export type ScrcpyInjectScrollControlMessage1_22 =
-    typeof ScrcpyInjectScrollControlMessage1_22['TInit'];
-
-export class ScrcpyOptions1_22<T extends ScrcpyOptionsInit1_22 = ScrcpyOptionsInit1_22>
-    extends ScrcpyOptions1_21<T> {
+export class ScrcpyOptions1_22<
+    T extends ScrcpyOptionsInit1_22 = ScrcpyOptionsInit1_22
+> extends ScrcpyOptions1_21<T> {
     public constructor(init: Partial<ScrcpyOptionsInit1_22>) {
         if (init.rawVideoStream) {
             // Set implied options for client-side processing
@@ -59,9 +52,7 @@ export class ScrcpyOptions1_22<T extends ScrcpyOptionsInit1_22 = ScrcpyOptionsIn
         };
     }
 
-    public override serializeInjectScrollControlMessage(
-        message: ScrcpyInjectScrollControlMessage1_22,
-    ): Uint8Array {
-        return ScrcpyInjectScrollControlMessage1_22.serialize(message);
+    public override getScrollController(): ScrcpyScrollController {
+        return new ScrcpyScrollController1_22();
     }
 }
diff --git a/libraries/scrcpy/src/options/1_22/scroll.ts b/libraries/scrcpy/src/options/1_22/scroll.ts
new file mode 100644
index 000000000..6af6beca5
--- /dev/null
+++ b/libraries/scrcpy/src/options/1_22/scroll.ts
@@ -0,0 +1,26 @@
+import Struct from "@yume-chan/struct";
+
+import {
+    ScrcpyInjectScrollControlMessage1_16,
+    ScrcpyScrollController1_16,
+} from "../1_16/index.js";
+
+export const ScrcpyInjectScrollControlMessage1_22 = new Struct()
+    .fields(ScrcpyInjectScrollControlMessage1_16)
+    .int32("buttons");
+
+export type ScrcpyInjectScrollControlMessage1_22 =
+    typeof ScrcpyInjectScrollControlMessage1_22["TInit"];
+
+export class ScrcpyScrollController1_22 extends ScrcpyScrollController1_16 {
+    public override serializeScrollMessage(
+        message: ScrcpyInjectScrollControlMessage1_22
+    ): Uint8Array | undefined {
+        const processed = this.processMessage(message);
+        if (!processed) {
+            return undefined;
+        }
+
+        return ScrcpyInjectScrollControlMessage1_22.serialize(processed);
+    }
+}
diff --git a/libraries/scrcpy/src/options/1_23.ts b/libraries/scrcpy/src/options/1_23.ts
index fbc4395a7..a814c4df8 100644
--- a/libraries/scrcpy/src/options/1_23.ts
+++ b/libraries/scrcpy/src/options/1_23.ts
@@ -1,6 +1,9 @@
 import { TransformStream } from "@yume-chan/stream-extra";
 
-import { ScrcpyOptions1_22, type ScrcpyOptionsInit1_22 } from "./1_22.js";
+import {
+    ScrcpyOptions1_22,
+    type ScrcpyOptionsInit1_22,
+} from "./1_22/options.js";
 import { type ScrcpyVideoStreamPacket } from "./types.js";
 
 export interface ScrcpyOptionsInit1_23 extends ScrcpyOptionsInit1_22 {
diff --git a/libraries/scrcpy/src/options/1_25/index.ts b/libraries/scrcpy/src/options/1_25/index.ts
new file mode 100644
index 000000000..249cfba6f
--- /dev/null
+++ b/libraries/scrcpy/src/options/1_25/index.ts
@@ -0,0 +1,2 @@
+export * from "./options.js";
+export * from "./scroll.js";
diff --git a/libraries/scrcpy/src/options/1_25/options.ts b/libraries/scrcpy/src/options/1_25/options.ts
new file mode 100644
index 000000000..efbf7c938
--- /dev/null
+++ b/libraries/scrcpy/src/options/1_25/options.ts
@@ -0,0 +1,12 @@
+import { type ScrcpyScrollController } from "../1_16/index.js";
+import { ScrcpyOptions1_24, type ScrcpyOptionsInit1_24 } from "../1_24.js";
+
+import { ScrcpyScrollController1_25 } from "./scroll.js";
+
+export class ScrcpyOptions1_25<
+    T extends ScrcpyOptionsInit1_24 = ScrcpyOptionsInit1_24
+> extends ScrcpyOptions1_24<T> {
+    public override getScrollController(): ScrcpyScrollController {
+        return new ScrcpyScrollController1_25();
+    }
+}
diff --git a/libraries/scrcpy/src/options/1_25/scroll.ts b/libraries/scrcpy/src/options/1_25/scroll.ts
new file mode 100644
index 000000000..de1992071
--- /dev/null
+++ b/libraries/scrcpy/src/options/1_25/scroll.ts
@@ -0,0 +1,50 @@
+import Struct, {
+    NumberFieldDefinition,
+    NumberFieldType,
+} from "@yume-chan/struct";
+
+import {
+    ScrcpyControlMessageType,
+    type ScrcpyInjectScrollControlMessage,
+} from "../../control/index.js";
+import { type ScrcpyScrollController } from "../1_16/index.js";
+
+const Int16Max = (1 << 15) - 1;
+
+const ScrcpyFloatToInt16NumberType: NumberFieldType = {
+    size: 2,
+    signed: true,
+    deserialize(array, littleEndian) {
+        const value = NumberFieldType.Int16.deserialize(array, littleEndian);
+        return value / Int16Max;
+    },
+    serialize(dataView, offset, value, littleEndian) {
+        value = value * Int16Max;
+        NumberFieldType.Int16.serialize(dataView, offset, value, littleEndian);
+    },
+};
+
+const ScrcpyFloatToInt16FieldDefinition = new NumberFieldDefinition(
+    ScrcpyFloatToInt16NumberType
+);
+
+export const ScrcpyInjectScrollControlMessage1_25 = new Struct()
+    .uint8("type", ScrcpyControlMessageType.InjectScroll as const)
+    .uint32("pointerX")
+    .uint32("pointerY")
+    .uint16("screenWidth")
+    .uint16("screenHeight")
+    .field("scrollX", ScrcpyFloatToInt16FieldDefinition)
+    .field("scrollY", ScrcpyFloatToInt16FieldDefinition)
+    .int32("buttons");
+
+export type ScrcpyInjectScrollControlMessage1_25 =
+    typeof ScrcpyInjectScrollControlMessage1_25["TInit"];
+
+export class ScrcpyScrollController1_25 implements ScrcpyScrollController {
+    serializeScrollMessage(
+        message: ScrcpyInjectScrollControlMessage
+    ): Uint8Array | undefined {
+        return ScrcpyInjectScrollControlMessage1_25.serialize(message);
+    }
+}
diff --git a/libraries/scrcpy/src/options/index.ts b/libraries/scrcpy/src/options/index.ts
index bc22dc41a..15f52dc0d 100644
--- a/libraries/scrcpy/src/options/index.ts
+++ b/libraries/scrcpy/src/options/index.ts
@@ -1,7 +1,8 @@
 export * from './1_16/index.js';
 export * from './1_18.js';
 export * from './1_21.js';
-export * from './1_22.js';
-export * from './1_23.js';
-export * from './1_24.js';
-export * from './types.js';
+export * from "./1_22/index.js";
+export * from "./1_23.js";
+export * from "./1_24.js";
+export * from "./1_25/index.js";
+export * from "./types.js";
diff --git a/libraries/scrcpy/src/options/types.ts b/libraries/scrcpy/src/options/types.ts
index 92e73e70f..2d1058b79 100644
--- a/libraries/scrcpy/src/options/types.ts
+++ b/libraries/scrcpy/src/options/types.ts
@@ -1,9 +1,11 @@
 import { type TransformStream } from "@yume-chan/stream-extra";
 
-import { type ScrcpyControlMessageType } from "../control/index.js";
+import {
+    type ScrcpyBackOrScreenOnControlMessage,
+    type ScrcpyControlMessageType,
+} from "../control/index.js";
 
-import { type ScrcpyBackOrScreenOnControlMessage1_18 } from "./1_18.js";
-import { type ScrcpyInjectScrollControlMessage1_22 } from "./1_22.js";
+import { type ScrcpyScrollController } from "./1_16/scroll.js";
 
 export const DEFAULT_SERVER_PATH = "/data/local/tmp/scrcpy-server.jar";
 
@@ -23,14 +25,15 @@ export function isScrcpyOptionValue(
 }
 
 export function toScrcpyOptionValue<T>(value: unknown, empty: T): string | T {
-    if (value === undefined) {
-        return empty;
-    }
-
     if (isScrcpyOptionValue(value)) {
         value = value.toOptionValue();
     }
 
+    // `value` may become `undefined` after `toOptionValue`
+    if (value === undefined) {
+        return empty;
+    }
+
     return String(value);
 }
 
@@ -85,10 +88,8 @@ export interface ScrcpyOptions<T extends object> {
     getControlMessageTypes(): ScrcpyControlMessageType[];
 
     serializeBackOrScreenOnControlMessage(
-        message: ScrcpyBackOrScreenOnControlMessage1_18
+        message: ScrcpyBackOrScreenOnControlMessage
     ): Uint8Array | undefined;
 
-    serializeInjectScrollControlMessage(
-        message: ScrcpyInjectScrollControlMessage1_22
-    ): Uint8Array;
+    getScrollController(): ScrcpyScrollController;
 }
diff --git a/libraries/struct/src/struct.ts b/libraries/struct/src/struct.ts
index 730dfd5e2..754dc9378 100644
--- a/libraries/struct/src/struct.ts
+++ b/libraries/struct/src/struct.ts
@@ -301,7 +301,7 @@ export class Struct<
     private number<
         TName extends PropertyKey,
         TType extends NumberFieldType = NumberFieldType,
-        TTypeScriptType = TType["TTypeScriptType"]
+        TTypeScriptType = number
     >(name: TName, type: TType, typeScriptType?: TTypeScriptType) {
         return this.field(
             name,
@@ -312,60 +312,60 @@ export class Struct<
     /**
      * Appends an `int8` field to the `Struct`
      */
-    public int8<
-        TName extends PropertyKey,
-        TTypeScriptType = typeof NumberFieldType["Uint8"]["TTypeScriptType"]
-    >(name: TName, typeScriptType?: TTypeScriptType) {
+    public int8<TName extends PropertyKey, TTypeScriptType = number>(
+        name: TName,
+        typeScriptType?: TTypeScriptType
+    ) {
         return this.number(name, NumberFieldType.Int8, typeScriptType);
     }
 
     /**
      * Appends an `uint8` field to the `Struct`
      */
-    public uint8<
-        TName extends PropertyKey,
-        TTypeScriptType = typeof NumberFieldType["Uint8"]["TTypeScriptType"]
-    >(name: TName, typeScriptType?: TTypeScriptType) {
+    public uint8<TName extends PropertyKey, TTypeScriptType = number>(
+        name: TName,
+        typeScriptType?: TTypeScriptType
+    ) {
         return this.number(name, NumberFieldType.Uint8, typeScriptType);
     }
 
     /**
      * Appends an `int16` field to the `Struct`
      */
-    public int16<
-        TName extends PropertyKey,
-        TTypeScriptType = typeof NumberFieldType["Uint16"]["TTypeScriptType"]
-    >(name: TName, typeScriptType?: TTypeScriptType) {
+    public int16<TName extends PropertyKey, TTypeScriptType = number>(
+        name: TName,
+        typeScriptType?: TTypeScriptType
+    ) {
         return this.number(name, NumberFieldType.Int16, typeScriptType);
     }
 
     /**
      * Appends an `uint16` field to the `Struct`
      */
-    public uint16<
-        TName extends PropertyKey,
-        TTypeScriptType = typeof NumberFieldType["Uint16"]["TTypeScriptType"]
-    >(name: TName, typeScriptType?: TTypeScriptType) {
+    public uint16<TName extends PropertyKey, TTypeScriptType = number>(
+        name: TName,
+        typeScriptType?: TTypeScriptType
+    ) {
         return this.number(name, NumberFieldType.Uint16, typeScriptType);
     }
 
     /**
      * Appends an `int32` field to the `Struct`
      */
-    public int32<
-        TName extends PropertyKey,
-        TTypeScriptType = typeof NumberFieldType["Int32"]["TTypeScriptType"]
-    >(name: TName, typeScriptType?: TTypeScriptType) {
+    public int32<TName extends PropertyKey, TTypeScriptType = number>(
+        name: TName,
+        typeScriptType?: TTypeScriptType
+    ) {
         return this.number(name, NumberFieldType.Int32, typeScriptType);
     }
 
     /**
      * Appends an `uint32` field to the `Struct`
      */
-    public uint32<
-        TName extends PropertyKey,
-        TTypeScriptType = typeof NumberFieldType["Uint32"]["TTypeScriptType"]
-    >(name: TName, typeScriptType?: TTypeScriptType) {
+    public uint32<TName extends PropertyKey, TTypeScriptType = number>(
+        name: TName,
+        typeScriptType?: TTypeScriptType
+    ) {
         return this.number(name, NumberFieldType.Uint32, typeScriptType);
     }
 
diff --git a/libraries/struct/src/types/number.ts b/libraries/struct/src/types/number.ts
index e3bd05bb6..83e5b480c 100644
--- a/libraries/struct/src/types/number.ts
+++ b/libraries/struct/src/types/number.ts
@@ -9,104 +9,107 @@ import {
 import { SyncPromise } from "../sync-promise.js";
 import { type ValueOrPromise } from "../utils.js";
 
-type NumberTypeDeserializer = (
-    array: Uint8Array,
-    littleEndian: boolean
-) => number;
-
-const DESERIALIZERS: Record<number, NumberTypeDeserializer> = {
-    1: (array) => array[0]!,
-    2: (array, littleEndian) =>
-        (((array[1]! << 8) | array[0]!) * (littleEndian as any)) |
-        (((array[0]! << 8) | array[1]!) * (!littleEndian as any)),
-    4: (array, littleEndian) =>
-        (((array[3]! << 24) |
-            (array[2]! << 16) |
-            (array[1]! << 8) |
-            array[0]!) *
-            (littleEndian as any)) |
-        (((array[0]! << 24) |
-            (array[1]! << 16) |
-            (array[2]! << 8) |
-            array[3]!) *
-            (!littleEndian as any)),
-};
-
-export type DataViewSetters = {
-    [TKey in keyof DataView]: TKey extends `set${string}` ? TKey : never;
-}[keyof DataView];
-
-export class NumberFieldType {
-    public readonly TTypeScriptType!: number;
-
-    public readonly signed: boolean;
-
-    public readonly size: number;
-
-    public readonly deserializer: NumberTypeDeserializer;
-    public readonly convertSign: (value: number) => number;
-
-    public readonly dataViewSetter: DataViewSetters;
-
-    public constructor(
-        size: number,
-        signed: boolean,
-        convertSign: (value: number) => number,
-        dataViewSetter: DataViewSetters
-    ) {
-        this.size = size;
-        this.signed = signed;
-        this.deserializer = DESERIALIZERS[size]!;
-        this.convertSign = convertSign;
-        this.dataViewSetter = dataViewSetter;
-    }
-
-    public static readonly Int8 = new NumberFieldType(
-        1,
-        true,
-        (value) => (value << 24) >> 24,
-        "setInt8"
-    );
-
-    public static readonly Uint8 = new NumberFieldType(
-        1,
-        false,
-        (value) => value,
-        "setUint8"
-    );
-
-    public static readonly Int16 = new NumberFieldType(
-        2,
-        true,
-        (value) => (value << 16) >> 16,
-        "setInt16"
-    );
-
-    public static readonly Uint16 = new NumberFieldType(
-        2,
-        false,
-        (value) => value,
-        "setUint16"
-    );
-
-    public static readonly Int32 = new NumberFieldType(
-        4,
-        true,
-        (value) => value,
-        "setInt32"
-    );
+export interface NumberFieldType {
+    signed: boolean;
+    size: number;
+    deserialize(array: Uint8Array, littleEndian: boolean): number;
+    serialize(
+        dataView: DataView,
+        offset: number,
+        value: number,
+        littleEndian: boolean
+    ): void;
+}
 
-    public static readonly Uint32 = new NumberFieldType(
-        4,
-        false,
-        (value) => value >>> 0,
-        "setUint32"
-    );
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace NumberFieldType {
+    export const Uint8: NumberFieldType = {
+        signed: false,
+        size: 1,
+        deserialize(array) {
+            return array[0]!;
+        },
+        serialize(dataView, offset, value) {
+            dataView.setUint8(offset, value);
+        },
+    };
+
+    export const Int8: NumberFieldType = {
+        signed: true,
+        size: 1,
+        deserialize(array) {
+            const value = Uint8.deserialize(array, false);
+            return (value << 24) >> 24;
+        },
+        serialize(dataView, offset, value) {
+            dataView.setInt8(offset, value);
+        },
+    };
+
+    export const Uint16: NumberFieldType = {
+        signed: false,
+        size: 2,
+        deserialize(array, littleEndian) {
+            return (
+                (((array[1]! << 8) | array[0]!) * (littleEndian as any)) |
+                (((array[0]! << 8) | array[1]!) * (!littleEndian as any))
+            );
+        },
+        serialize(dataView, offset, value, littleEndian) {
+            dataView.setUint16(offset, value, littleEndian);
+        },
+    };
+
+    export const Int16: NumberFieldType = {
+        signed: true,
+        size: 2,
+        deserialize(array, littleEndian) {
+            const value = Uint16.deserialize(array, littleEndian);
+            return (value << 16) >> 16;
+        },
+        serialize(dataView, offset, value, littleEndian) {
+            dataView.setInt16(offset, value, littleEndian);
+        },
+    };
+
+    export const Uint32: NumberFieldType = {
+        signed: false,
+        size: 4,
+        deserialize(array, littleEndian) {
+            return (
+                (((array[3]! << 24) |
+                    (array[2]! << 16) |
+                    (array[1]! << 8) |
+                    array[0]!) *
+                    (littleEndian as any)) |
+                (((array[0]! << 24) |
+                    (array[1]! << 16) |
+                    (array[2]! << 8) |
+                    array[3]!) *
+                    (!littleEndian as any))
+            );
+        },
+        serialize(dataView, offset, value, littleEndian) {
+            dataView.setUint32(offset, value, littleEndian);
+        },
+    };
+
+    export const Int32: NumberFieldType = {
+        signed: true,
+        size: 4,
+        deserialize(array, littleEndian) {
+            const value = Uint32.deserialize(array, littleEndian);
+            return value >>> 0;
+        },
+        serialize(dataView, offset, value, littleEndian) {
+            dataView.setInt32(offset, value, littleEndian);
+        },
+    };
 }
 
 export class NumberFieldDefinition<
     TType extends NumberFieldType = NumberFieldType,
-    TTypeScriptType = TType["TTypeScriptType"]
+    TTypeScriptType = number
 > extends StructFieldDefinition<void, TTypeScriptType> {
     public readonly type: TType;
 
@@ -147,9 +150,10 @@ export class NumberFieldDefinition<
             return stream.read(this.getSize());
         })
             .then((array) => {
-                let value: number;
-                value = this.type.deserializer(array, options.littleEndian);
-                value = this.type.convertSign(value);
+                const value = this.type.deserialize(
+                    array,
+                    options.littleEndian
+                );
                 return this.create(options, struct, value as any);
             })
             .valueOrPromise();
@@ -160,12 +164,10 @@ export class NumberFieldValue<
     TDefinition extends NumberFieldDefinition<NumberFieldType, any>
 > extends StructFieldValue<TDefinition> {
     public serialize(dataView: DataView, offset: number): void {
-        // `setBigInt64` requires a `bigint` while others require `number`
-        // So `dataView[DataViewSetters]` requires `bigint & number`
-        // and that is, `never`
-        dataView[this.definition.type.dataViewSetter](
+        this.definition.type.serialize(
+            dataView,
             offset,
-            this.value as never,
+            this.value,
             this.options.littleEndian
         );
     }