Controller customization feature

.gitignore

@@ -1,3 +1,10 @@
+src/modules/patcher/patches/controller-customization.js
+src/modules/patcher/patches/expose-stream-session.js
+src/modules/patcher/patches/local-co-op-enable.js
+src/modules/patcher/patches/poll-gamepad.js
+src/modules/patcher/patches/remote-play-keep-alive.js
+src/modules/patcher/patches/vibration-adjust.js
+
 # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
 
 # Logs

.vscode/settings.json

@@ -1,5 +1,11 @@
 {
   "files.readonlyInclude": {
-    "dist/**/*": true
+    "dist/**/*": true,
+    "src/modules/patcher/patches/controller-customization.js": true,
+    "src/modules/patcher/patches/expose-stream-session.js": true,
+    "src/modules/patcher/patches/local-co-op-enable.js": true,
+    "src/modules/patcher/patches/poll-gamepad.js": true,
+    "src/modules/patcher/patches/remote-play-keep-alive.js": true,
+    "src/modules/patcher/patches/vibration-adjust.js": true
   }
 }

build.ts

@@ -1,5 +1,5 @@
 #!/usr/bin/env bun
-import { readFile } from "node:fs/promises";
+import { readFile, readdir } from "node:fs/promises";
 import { parseArgs } from "node:util";
 import { sys } from "typescript";
 // @ts-ignore
@@ -56,7 +56,23 @@ function minifyCodeImports(str: string): string {
     return str;
 }
 
-const postProcess = (str: string): string => {
+function minifyIfElse(str: string): string {
+    // Collapse if/else blocks without curly braces
+    return str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
+}
+
+function removeComments(str: string): string {
+    // Remove enum's inlining comments
+    str = str.replaceAll(/ \/\* [A-Z0-9_:]+ \*\//g, '');
+    str = str.replaceAll('/* @__PURE__ */ ', '');
+
+    // Remove comments from import
+    str = str.replaceAll(/\/\/ src.*\n/g, '');
+
+    return str;
+}
+
+function postProcess(str: string): string {
     // Unescape unicode charaters
     str = unescape((str.replace(/\\u/g, '%u')));
     // Replace \x00 to normal character
@@ -65,12 +81,7 @@ const postProcess = (str: string): string => {
     // Replace "globalThis." with "var";
     str = str.replaceAll('globalThis.', 'var ');
 
-    // Remove enum's inlining comments
+    str = removeComments(str);
-    str = str.replaceAll(/ \/\* [A-Z0-9_:]+ \*\//g, '');
-    str = str.replaceAll('/* @__PURE__ */ ', '');
-
-    // Remove comments from import
-    str = str.replaceAll(/\/\/ src.*\n/g, '');
 
     // Add ADDITIONAL CODE block
     str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
@@ -114,8 +125,7 @@ const postProcess = (str: string): string => {
 
     // Set indent to 1 space
     if (MINIFY_SYNTAX) {
-        // Collapse if/else blocks without curly braces
+        str = minifyIfElse(str);
-        str = str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
 
         str = str.replaceAll(/\n(\s+)/g, (match, p1) => {
             const len = p1.length / 2;
@@ -134,7 +144,47 @@ const postProcess = (str: string): string => {
     return str;
 }
 
-const build = async (target: BuildTarget, version: string, variant: BuildVariant, config: any={}) => {
+async function buildPatches() {
+    const inputDir = './src/modules/patcher/patches/src';
+    const outputDir = './src/modules/patcher/patches';
+
+    const files = await readdir(inputDir);
+    const tsFiles = files.filter(file => file.endsWith('.ts'));
+
+    tsFiles.forEach(async file => {
+        // You can perform any operation with each TypeScript file
+        console.log(`Building patch: ${file}`);
+        const filePath = `${inputDir}/${file}`;
+
+        await Bun.build({
+            entrypoints: [filePath],
+            outdir: outputDir,
+            target: 'browser',
+            format: 'esm',
+            minify: {
+                syntax: true,
+                whitespace: true,
+            },
+        });
+
+        const outputFile = `${outputDir}/${file.replace('.ts', '.js')}`;
+
+        let code = await readFile(outputFile, 'utf-8');
+
+        // Replace "$this$" to "this"
+        code = code.replaceAll('$this$', 'this');
+
+        // Minify code
+        code = removeComments(code);
+        code = minifyIfElse(code);
+
+        // Save
+        await Bun.write(outputFile, code);
+        console.log(`Patch built successfully: ${file}`)
+      });
+}
+
+async function build(target: BuildTarget, version: string, variant: BuildVariant, config: any={}) {
     console.log('-- Target:', target);
     const startTime = performance.now();
 
@@ -153,6 +203,8 @@ const build = async (target: BuildTarget, version: string, variant: BuildVariant
 
     const outDir = './dist';
 
+    await buildPatches();
+
     let output = await Bun.build({
         entrypoints: ['src/index.ts'],
         outdir: outDir,

bun.lock

@@ -0,0 +1,315 @@
+{
+  "lockfileVersion": 0,
+  "workspaces": {
+    "": {
+      "devDependencies": {
+        "@types/bun": "^1.1.14",
+        "@types/node": "^22.10.2",
+        "@types/stylus": "^0.48.43",
+        "eslint": "^9.17.0",
+        "eslint-plugin-compat": "^6.0.2",
+        "stylus": "^0.64.0",
+      },
+      "peerDependencies": {
+        "typescript": "^5.7.2",
+      },
+    },
+  },
+  "packages": {
+    "@adobe/css-tools": ["@adobe/css-tools@4.3.3", "", {}, "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ=="],
+
+    "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.4.0", "", { "dependencies": { "eslint-visitor-keys": "^3.3.0" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA=="],
+
+    "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.1", "", {}, "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ=="],
+
+    "@eslint/config-array": ["@eslint/config-array@0.19.0", "", { "dependencies": { "@eslint/object-schema": "^2.1.4", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-zdHg2FPIFNKPdcHWtiNT+jEFCHYVplAXRDlQDyqy0zGx/q2parwh7brGJSiTxRk/TSMkbM//zt/f5CHgyTyaSQ=="],
+
+    "@eslint/core": ["@eslint/core@0.9.0", "", {}, "sha512-7ATR9F0e4W85D/0w7cU0SNj7qkAexMG+bAHEZOjo9akvGuhHE2m7umzWzfnpa0XAg5Kxc1BWmtPMV67jJ+9VUg=="],
+
+    "@eslint/eslintrc": ["@eslint/eslintrc@3.2.0", "", { "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", "js-yaml": "^4.1.0", "minimatch": "^3.1.2", "strip-json-comments": "^3.1.1" } }, "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w=="],
+
+    "@eslint/js": ["@eslint/js@9.17.0", "", {}, "sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w=="],
+
+    "@eslint/object-schema": ["@eslint/object-schema@2.1.4", "", {}, "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ=="],
+
+    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.2.3", "", { "dependencies": { "levn": "^0.4.1" } }, "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA=="],
+
+    "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
+
+    "@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
+
+    "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="],
+
+    "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.1", "", {}, "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA=="],
+
+    "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", "strip-ansi": "^7.0.1", "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", "wrap-ansi": "^8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],
+
+    "@mdn/browser-compat-data": ["@mdn/browser-compat-data@5.5.42", "", {}, "sha512-qhHVgb2dxaFNT00Z1upHaDCstUEjjrgtIkrk4tr+YnDSGbTIKncbdydIpSed+RCXz0f6nb4UDD4eKEWokNom6g=="],
+
+    "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
+
+    "@types/bun": ["@types/bun@1.1.14", "", { "dependencies": { "bun-types": "1.1.37" } }, "sha512-opVYiFGtO2af0dnWBdZWlioLBoxSdDO5qokaazLhq8XQtGZbY4pY3/JxY8Zdf/hEwGubbp7ErZXoN1+h2yesxA=="],
+
+    "@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
+
+    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
+
+    "@types/node": ["@types/node@22.10.2", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ=="],
+
+    "@types/stylus": ["@types/stylus@0.48.43", "", { "dependencies": { "@types/node": "*" } }, "sha512-72dv/zdhuyXWVHUXG2VTPEQdOG+oen95/DNFx2aMFFaY6LoITI6PwEqf5x31JF49kp2w9hvUzkNfTGBIeg61LQ=="],
+
+    "@types/ws": ["@types/ws@8.5.10", "", { "dependencies": { "@types/node": "*" } }, "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A=="],
+
+    "acorn": ["acorn@8.14.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA=="],
+
+    "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
+
+    "ajv": ["ajv@6.12.6", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="],
+
+    "ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
+
+    "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
+    "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
+
+    "ast-metadata-inferer": ["ast-metadata-inferer@0.8.1", "", { "dependencies": { "@mdn/browser-compat-data": "^5.6.19" } }, "sha512-ht3Dm6Zr7SXv6t1Ra6gFo0+kLDglHGrEbYihTkcycrbHw7WCcuhBzPlJYHEsIpycaUwzsJHje+vUcxXUX4ztTA=="],
+
+    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
+
+    "brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
+
+    "browserslist": ["browserslist@4.24.3", "", { "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" }, "bin": { "browserslist": "cli.js" } }, "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA=="],
+
+    "bun-types": ["bun-types@1.1.37", "", { "dependencies": { "@types/node": "~20.12.8", "@types/ws": "~8.5.10" } }, "sha512-C65lv6eBr3LPJWFZ2gswyrGZ82ljnH8flVE03xeXxKhi2ZGtFiO4isRKTKnitbSqtRAcaqYSR6djt1whI66AbA=="],
+
+    "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
+
+    "caniuse-lite": ["caniuse-lite@1.0.30001690", "", {}, "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w=="],
+
+    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
+    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
+
+    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
+
+    "debug": ["debug@4.3.5", "", { "dependencies": { "ms": "2.1.2" } }, "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg=="],
+
+    "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
+
+    "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
+
+    "electron-to-chromium": ["electron-to-chromium@1.5.75", "", {}, "sha512-Lf3++DumRE/QmweGjU+ZcKqQ+3bKkU/qjaKYhIJKEOhgIO9Xs6IiAQFkfFoj+RhgDk4LUeNsLo6plExHqSyu6Q=="],
+
+    "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
+
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
+
+    "eslint": ["eslint@9.17.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.19.0", "@eslint/core": "^0.9.0", "@eslint/eslintrc": "^3.2.0", "@eslint/js": "9.17.0", "@eslint/plugin-kit": "^0.2.3", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.1", "@types/estree": "^1.0.6", "@types/json-schema": "^7.0.15", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.2.0", "eslint-visitor-keys": "^4.2.0", "espree": "^10.3.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA=="],
+
+    "eslint-plugin-compat": ["eslint-plugin-compat@6.0.2", "", { "dependencies": { "@mdn/browser-compat-data": "^5.5.35", "ast-metadata-inferer": "^0.8.1", "browserslist": "^4.24.2", "caniuse-lite": "^1.0.30001687", "find-up": "^5.0.0", "globals": "^15.7.0", "lodash.memoize": "^4.1.2", "semver": "^7.6.2" }, "peerDependencies": { "eslint": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0" } }, "sha512-1ME+YfJjmOz1blH0nPZpHgjMGK4kjgEeoYqGCqoBPQ/mGu/dJzdoP0f1C8H2jcWZjzhZjAMccbM/VdXhPORIfA=="],
+
+    "eslint-scope": ["eslint-scope@8.2.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A=="],
+
+    "eslint-visitor-keys": ["eslint-visitor-keys@4.2.0", "", {}, "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw=="],
+
+    "espree": ["espree@10.3.0", "", { "dependencies": { "acorn": "^8.14.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^4.2.0" } }, "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg=="],
+
+    "esquery": ["esquery@1.6.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg=="],
+
+    "esrecurse": ["esrecurse@4.3.0", "", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="],
+
+    "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
+
+    "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
+
+    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
+
+    "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
+
+    "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
+
+    "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
+
+    "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
+
+    "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
+
+    "flatted": ["flatted@3.3.1", "", {}, "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw=="],
+
+    "foreground-child": ["foreground-child@3.3.0", "", { "dependencies": { "cross-spawn": "^7.0.0", "signal-exit": "^4.0.1" } }, "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg=="],
+
+    "glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
+
+    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
+
+    "globals": ["globals@15.8.0", "", {}, "sha512-VZAJ4cewHTExBWDHR6yptdIBlx9YSSZuwojj9Nt5mBRXQzrKakDsVKQ1J63sklLvzAJm0X5+RpO4i3Y2hcOnFw=="],
+
+    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
+
+    "ignore": ["ignore@5.3.1", "", {}, "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw=="],
+
+    "import-fresh": ["import-fresh@3.3.0", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw=="],
+
+    "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
+    "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
+
+    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
+    "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
+    "jackspeak": ["jackspeak@3.4.3", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" }, "optionalDependencies": { "@pkgjs/parseargs": "^0.11.0" } }, "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw=="],
+
+    "js-yaml": ["js-yaml@4.1.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="],
+
+    "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],
+
+    "json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
+
+    "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
+
+    "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
+
+    "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
+
+    "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
+
+    "lodash.memoize": ["lodash.memoize@4.1.2", "", {}, "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="],
+
+    "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
+
+    "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
+
+    "minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
+
+    "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
+
+    "ms": ["ms@2.1.2", "", {}, "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="],
+
+    "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
+
+    "node-releases": ["node-releases@2.0.19", "", {}, "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="],
+
+    "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
+
+    "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
+
+    "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
+
+    "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],
+
+    "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
+
+    "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
+
+    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
+
+    "path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
+
+    "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
+
+    "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
+
+    "sax": ["sax@1.4.1", "", {}, "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg=="],
+
+    "semver": ["semver@7.6.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A=="],
+
+    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
+
+    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
+
+    "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
+
+    "source-map": ["source-map@0.7.4", "", {}, "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="],
+
+    "string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],
+
+    "string-width-cjs": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="],
+
+    "strip-ansi-cjs": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
+
+    "stylus": ["stylus@0.64.0", "", { "dependencies": { "@adobe/css-tools": "~4.3.3", "debug": "^4.3.2", "glob": "^10.4.5", "sax": "~1.4.1", "source-map": "^0.7.3" }, "bin": { "stylus": "bin/stylus" } }, "sha512-ZIdT8eUv8tegmqy1tTIdJv9We2DumkNZFdCF5mz/Kpq3OcTaxSuCAYZge6HKK2CmNC02G1eJig2RV7XTw5hQrA=="],
+
+    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+
+    "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
+
+    "typescript": ["typescript@5.7.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg=="],
+
+    "undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+
+    "update-browserslist-db": ["update-browserslist-db@1.1.1", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.0" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A=="],
+
+    "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
+
+    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
+    "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
+
+    "wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
+
+    "wrap-ansi-cjs": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
+    "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
+
+    "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
+
+    "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
+
+    "@humanfs/node/@humanwhocodes/retry": ["@humanwhocodes/retry@0.3.1", "", {}, "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA=="],
+
+    "@types/stylus/@types/node": ["@types/node@22.5.5", "", { "dependencies": { "undici-types": "~6.19.2" } }, "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA=="],
+
+    "@types/ws/@types/node": ["@types/node@20.14.2", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q=="],
+
+    "ast-metadata-inferer/@mdn/browser-compat-data": ["@mdn/browser-compat-data@5.6.26", "", {}, "sha512-7NdgdOR7lkzrN70zGSULmrcvKyi/aJjpTJRCbuy8IZuHiLkPTvsr10jW0MJgWzK2l2wTmhdQvegTw6yNU5AVNQ=="],
+
+    "bun-types/@types/node": ["@types/node@20.12.14", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-scnD59RpYD91xngrQQLGkE+6UrHUPzeKZWhhjBSa3HSkwjbQc38+q3RoIVEwxQGRw3M+j5hpNAM+lgV3cVormg=="],
+
+    "foreground-child/cross-spawn": ["cross-spawn@7.0.3", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w=="],
+
+    "glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
+
+    "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
+    "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "strip-ansi-cjs/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "wrap-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
+
+    "wrap-ansi-cjs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "@types/stylus/@types/node/undici-types": ["undici-types@6.19.8", "", {}, "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="],
+
+    "@types/ws/@types/node/undici-types": ["undici-types@5.26.5", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
+
+    "bun-types/@types/node/undici-types": ["undici-types@5.26.5", "", {}, "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="],
+
+    "glob/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
+
+    "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
+    "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+  }
+}

package.json

@@ -11,10 +11,10 @@
   },
   "devDependencies": {
     "@types/bun": "^1.1.14",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.10.2",
     "@types/stylus": "^0.48.43",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
-    "eslint-plugin-compat": "^6.0.1",
+    "eslint-plugin-compat": "^6.0.2",
     "stylus": "^0.64.0"
   },
   "peerDependencies": {

src/assets/css/controller.styl

@@ -0,0 +1,71 @@
+.bx-controller-customizations-container {
+    .bx-btn-detect {
+        display: block;
+        margin-bottom: 20px;
+
+        &.bx-monospaced {
+            background: none;
+            font-weight: bold;
+            font-size: 12px;
+        }
+    }
+
+    .bx-buttons-grid {
+        display: grid;
+        grid-template-columns: auto auto;
+        column-gap: 20px;
+        row-gap: 10px;
+        margin-bottom: 20px;
+    }
+
+}
+
+.bx-controller-key-row {
+    display: flex;
+    align-items: stretch;
+
+    > label {
+        margin-bottom: 0;
+        font-family: var(--bx-promptfont-font);
+        font-size: 32px;
+        text-align: center;
+        min-width: 50px;
+        flex-shrink: 0;
+        display: flex;
+        align-self: center;
+
+        &::after {
+            content: '❯';
+            margin: 0 12px;
+            font-size: 16px;
+            align-self: center;
+        }
+    }
+
+    .bx-select {
+        width: 100% !important;
+
+        > div {
+            min-width: 50px;
+        }
+
+        label {
+            font-family: var(--bx-promptfont-font), var(--bx-normal-font);
+            font-size: 32px;
+            text-align: center;
+            margin-bottom: 6px;
+            height: 40px;
+            line-height: 40px;
+        }
+    }
+
+    &:hover {
+        > label {
+            color: #ffe64b;
+
+            &::after {
+                color: #fff;
+            }
+        }
+    }
+}

src/assets/css/navigation-dialog.styl

@@ -17,6 +17,21 @@
         border-radius: 4px;
         padding: 0 5px;
     }
+
+    .bx-focusable {
+        &::after {
+            border-radius: 4px;
+        }
+
+        &:focus::after {
+            offset = 0;
+
+            top: offset;
+            left: offset;
+            right: offset;
+            bottom: offset;
+        }
+    }
 }
 
 .bx-navigation-dialog-overlay {
@@ -42,7 +57,7 @@
     color: white;
     background: #1a1b1e;
     border-radius: 10px;
-    width: 450px;
+    min-width: @css{ min(calc(100vw - 20px), 500px) };
     max-width: calc(100vw - 20px);
     margin: 0 0 0 auto;
     padding: 16px;
@@ -74,11 +89,9 @@
 
     .bx-dialog-content {
         flex: 1;
+        padding: 6px;
         overflow: auto;
         overflow-x: hidden;
-
-        > div {
-        }
     }
 
     .bx-dialog-preset-tools {
@@ -86,8 +99,9 @@
         margin-bottom: 12px;
         gap: 6px;
 
-        select {
+        button {
-            flex: 1;
+            align-self: center;
+            min-height: 50px;
         }
     }
 
@@ -164,29 +178,6 @@
                 letter-spacing: 6px;
             }
         }
-
-        .bx-shortcut-actions {
-            flex: 1;
-            position: relative;
-
-            select {
-                width: 100%;
-                height: 100%;
-                min-height: 38px;
-                display: block;
-
-                &:first-of-type {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                }
-
-                &:last-of-type {
-                    opacity: 0;
-                    z-index: calc(var(--bx-settings-z-index) + 1);
-                }
-            }
-        }
     }
 
     select:disabled {

src/assets/css/number-stepper.styl

@@ -10,6 +10,7 @@
             display: inline-block;
             min-width: 40px;
             font-family: var(--bx-monospaced-font);
+            white-space: pre;
             font-size: 13px;
             margin: 0 4px;
         }
@@ -44,7 +45,7 @@
         }
     }
 
-    input[type="range"] {
+    input[type=range] {
         display: block;
         margin: 8px 0 2px auto;
         min-width: 180px;
@@ -62,3 +63,91 @@
         }
     }
 }
+
+
+.bx-dual-number-stepper {
+    > span {
+        display: block;
+        font-family: var(--bx-monospaced-font);
+        font-size: 13px;
+        white-space: pre;
+        margin: 0 4px;
+        text-align: center;
+    }
+
+    > div {
+        input[type=range] {
+            display: block;
+            width: 100%;
+            min-width: 180px;
+            background: transparent;
+            color: #959595 !important;
+            appearance: none;
+            padding: 8px 0;
+
+            range-track() {
+                background: linear-gradient(90deg, #fff var(--from), var(--bx-primary-button-color) var(--from) var(--to), #fff var(--to) 100%);
+                height: 8px;
+                border-radius: 2px;
+            }
+
+            range-track-hover() {
+                background: linear-gradient(90deg, #fff var(--from), #006635 var(--from) var(--to), #fff var(--to) 100%);
+            }
+
+            thumb() {
+                margin-top: -4px;
+                appearance: none;
+                width: 4px;
+                height: 16px;
+                background: #00b85f;
+                border: none;
+                border-radius: 2px;
+            }
+
+            thumb-hover() {
+                background: #fb3232;
+            }
+
+            &::-webkit-slider-runnable-track {
+                range-track()
+            }
+
+            &::-moz-range-track {
+                range-track()
+            }
+
+            &::-webkit-slider-thumb {
+                thumb();
+            }
+
+            &::-moz-range-thumb {
+                thumb();
+            }
+
+            &:hover, &&:active, &:focus {
+                &::-webkit-slider-runnable-track {
+                    range-track-hover();
+                }
+
+                &::-moz-range-track {
+                    range-track-hover();
+                }
+
+                &::-webkit-slider-thumb {
+                    thumb-hover();
+                }
+
+                &::-moz-range-thumb {
+                    thumb-hover();
+                }
+            }
+        }
+    }
+
+    &[data-disabled=true], &[disabled=true] {
+        input[type=range] {
+            display: none;
+        }
+    }
+}

src/assets/css/root.styl

@@ -47,6 +47,7 @@ button_color(name, normal, hover, active, disabled)
 @font-face {
     font-family: 'promptfont';
     src: url('https://redphx.github.io/better-xcloud/fonts/promptfont.otf');
+    unicode-range: U+2196-E011;
 }
 
 /* Fix Stream menu buttons not hiding */
@@ -73,6 +74,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     height: 100% !important;
 }
 
+.bx-auto-height {
+    height: auto !important;
+}
+
 .bx-no-scroll {
     overflow: hidden !important;
 }
@@ -125,6 +130,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     font-family: var(--bx-promptfont-font) !important;
 }
 
+.bx-monospaced {
+    font-family: var(--bx-monospaced-font) !important;
+}
+
 .bx-line-through {
     text-decoration: line-through !important;
 }
@@ -270,3 +279,15 @@ div[class*=SupportedInputsBadge] {
     opacity: 0;
   }
 }
+
+.bx-horizontal-shaking {
+    animation: bx-horizontal-shaking .4s ease-in-out 2;
+}
+
+@keyframes bx-horizontal-shaking {
+    0% { transform: translateX(0) }
+    25% { transform: translateX(5px) }
+    50% { transform: translateX(-5px) }
+    75% { transform: translateX(5px) }
+    100% { transform: translateX(0) }
+}

src/assets/css/settings-dialog.styl

@@ -8,21 +8,6 @@
     user-select: none;
     -webkit-user-select: none;
 
-    .bx-focusable {
-        &::after {
-            border-radius: 4px;
-        }
-
-        &:focus::after {
-            offset = 0;
-
-            top: offset;
-            left: offset;
-            right: offset;
-            bottom: offset;
-        }
-    }
-
     .bx-settings-reload-note {
         font-size: 0.8rem;
         display: block;

src/assets/css/styles.styl

@@ -16,4 +16,5 @@
 @import 'game-bar.styl';
 @import 'stream-stats.styl';
 @import 'mkb.styl';
+@import 'controller.styl';
 @import 'misc.styl';

src/assets/css/web-components.styl

@@ -4,17 +4,11 @@ select.bx-select {
 
 div.bx-select {
     display: flex;
-    align-items: center;
+    align-items: stretch;
     flex: 0 1 auto;
     gap: 8px;
 
     select {
-        // Render offscreen instead of "display: none" so we could get its size
-        position: absolute !important;
-        top: -9999px !important;
-        left: -9999px !important;
-        visibility: hidden !important;
-
         &:disabled {
             & ~ button {
                 display: none;
@@ -48,7 +42,6 @@ div.bx-select {
 
     > div {
         min-height: 24px;
-        box-sizing: content-box;
 
         input {
             display: inline-block;
@@ -69,7 +62,7 @@ div.bx-select {
                 font-size: 10px;
                 font-weight: bold;
                 text-align: left;
-                line-height: initial;
+                line-height: 20px;
                 white-space: pre;
                 min-height: 15px;
                 align-content: center;
@@ -115,10 +108,9 @@ div.bx-select {
 
     button.bx-button {
         border: none;
-        height: 24px;
         width: 24px;
+        height: auto;
         padding: 0;
-        line-height: 24px;
         color: #fff;
         border-radius: 4px;
         font-weight: bold;
@@ -130,6 +122,68 @@ div.bx-select {
             line-height: unset;
         }
     }
+
+    &[data-controller-friendly=true] {
+        > div {
+            box-sizing: content-box;
+        }
+
+        select {
+            // Render offscreen instead of "display: none" so we could get its size
+            position: absolute !important;
+            top: -9999px !important;
+            left: -9999px !important;
+            visibility: hidden !important;
+        }
+    }
+
+    &[data-controller-friendly=false] {
+        position: relative;
+
+        > div {
+            box-sizing: border-box;
+
+            label {
+                margin-right: 24px;
+            }
+        }
+
+        select {
+            &:disabled {
+                display: none;
+            }
+
+            &:not(:disabled) {
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                display: block;
+
+                opacity: 0;
+                z-index: calc(var(--bx-settings-z-index) + 1);
+
+                &:hover {
+                    + div {
+                        background: #f0f0f0;
+                    }
+                }
+
+                + div {
+                    label {
+                        &::after {
+                            content: '▾';
+                            font-size: 14px;
+                            position: absolute;
+                            right: 8px;
+                            pointer-events: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 .bx-select-indicators {
@@ -144,9 +198,11 @@ div.bx-select {
         flex: 1;
         background: #cfcfcf;
         border-radius: 4px;
+        min-width: 1px;
 
         &[data-highlighted] {
             background: #9c9c9c;
+            min-width: 6px;
         }
 
         &[data-selected] {

src/assets/svg/pencil-simple-line.svg

@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' viewBox='0 0 32 32'>
+    <path d='M10.417 30.271H2.97a1.25 1.25 0 0 1-1.241-1.241v-6.933c.001-.329.131-.644.363-.877L21.223 2.09c.481-.481 1.273-.481 1.754 0l6.933 6.928a1.25 1.25 0 0 1 0 1.755L10.417 30.271z'/>
+    <path d='M29.032 30.271H10.417m6.205-23.58l8.687 8.687'/>
+</svg>

src/enums/gamepad.ts

@@ -24,11 +24,13 @@ export enum GamepadKey {
     LS_DOWN = 101,
     LS_LEFT = 102,
     LS_RIGHT = 103,
+    LS = 104,
 
     RS_UP = 200,
     RS_DOWN = 201,
     RS_LEFT = 202,
     RS_RIGHT = 203,
+    RS = 204,
 };
 
 export const GamepadKeyName: Record<number, [string, PrompFont]> = {
@@ -56,12 +58,16 @@ export const GamepadKeyName: Record<number, [string, PrompFont]> = {
     [GamepadKey.LS_DOWN]: ['Left Stick Down', PrompFont.LS_DOWN],
     [GamepadKey.LS_LEFT]: ['Left Stick Left', PrompFont.LS_LEFT],
     [GamepadKey.LS_RIGHT]: ['Left Stick Right', PrompFont.LS_RIGHT],
+    [GamepadKey.LS]: ['Left Stick', PrompFont.LS],
 
     [GamepadKey.R3]: ['R3', PrompFont.R3],
     [GamepadKey.RS_UP]: ['Right Stick Up', PrompFont.RS_UP],
     [GamepadKey.RS_DOWN]: ['Right Stick Down', PrompFont.RS_DOWN],
     [GamepadKey.RS_LEFT]: ['Right Stick Left', PrompFont.RS_LEFT],
     [GamepadKey.RS_RIGHT]: ['Right Stick Right', PrompFont.RS_RIGHT],
+    [GamepadKey.RS]: ['Right Stick', PrompFont.RS],
+
+    [GamepadKey.SHARE]: ['Screenshot', PrompFont.SHARE],
 };
 
 

src/enums/pref-keys.ts

@@ -1,3 +1,5 @@
+import type { BlockFeature, CodecProfile, DeviceVibrationMode, GameBarPosition, LoadingScreenRocket, NativeMkbMode, StreamPlayerType, StreamResolution, StreamStat, StreamStatPosition, StreamVideoProcessing, TouchControllerMode, TouchControllerStyleCustom, TouchControllerStyleStandard, UiLayout, UiSection, VideoPosition, VideoPowerPreference, VideoRatio } from "./pref-values"
+
 export const enum StorageKey {
     GLOBAL = 'BetterXcloud',
 
@@ -12,6 +14,7 @@ export const enum StorageKey {
     LIST_FORCE_NATIVE_MKB = 'BetterXcloud.GhPages.ForceNativeMkb',
 }
 
+
 export const enum PrefKey {
     VERSION_LAST_CHECK = 'version.lastCheck',
     VERSION_LATEST = 'version.latest',
@@ -112,3 +115,78 @@ export const enum PrefKey {
 
     GAME_FORTNITE_FORCE_CONSOLE = 'game.fortnite.forceConsole',
 }
+
+
+export type PrefTypeMap = {
+    [PrefKey.AUDIO_MIC_ON_PLAYING]: boolean,
+    [PrefKey.AUDIO_VOLUME_CONTROL_ENABLED]: boolean,
+    [PrefKey.AUDIO_VOLUME]: number,
+    [PrefKey.BLOCK_FEATURES]: BlockFeature[],
+    [PrefKey.BLOCK_TRACKING]: boolean,
+    [PrefKey.CONTROLLER_POLLING_RATE]: number,
+    [PrefKey.DEVICE_VIBRATION_INTENSITY]: number,
+    [PrefKey.DEVICE_VIBRATION_MODE]: DeviceVibrationMode,
+    [PrefKey.GAME_BAR_POSITION]: GameBarPosition,
+    [PrefKey.GAME_FORTNITE_FORCE_CONSOLE]: boolean,
+    [PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID]: number,
+    [PrefKey.LOADING_SCREEN_GAME_ART]: boolean,
+    [PrefKey.LOADING_SCREEN_ROCKET]: LoadingScreenRocket,
+    [PrefKey.LOADING_SCREEN_SHOW_WAIT_TIME]: boolean,
+    [PrefKey.LOCAL_CO_OP_ENABLED]: boolean,
+    [PrefKey.MKB_ENABLED]: boolean,
+    [PrefKey.MKB_HIDE_IDLE_CURSOR]: boolean,
+    [PrefKey.MKB_P1_MAPPING_PRESET_ID]: number,
+    [PrefKey.MKB_P1_SLOT]: number,
+    [PrefKey.NATIVE_MKB_FORCED_GAMES]: string[],
+    [PrefKey.NATIVE_MKB_MODE]: NativeMkbMode,
+    [PrefKey.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY]: number,
+    [PrefKey.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY]: number,
+    [PrefKey.REMOTE_PLAY_ENABLED]: boolean,
+    [PrefKey.REMOTE_PLAY_STREAM_RESOLUTION]: StreamResolution,
+    [PrefKey.SCREENSHOT_APPLY_FILTERS]: boolean,
+    [PrefKey.SERVER_BYPASS_RESTRICTION]: string,
+    [PrefKey.SERVER_PREFER_IPV6]: boolean,
+    [PrefKey.SERVER_REGION]: string,
+    [PrefKey.STATS_CONDITIONAL_FORMATTING]: boolean,
+    [PrefKey.STATS_ITEMS]: StreamStat[],
+    [PrefKey.STATS_OPACITY_ALL]: number,
+    [PrefKey.STATS_OPACITY_BACKGROUND]: number,
+    [PrefKey.STATS_POSITION]: StreamStatPosition,
+    [PrefKey.STATS_QUICK_GLANCE_ENABLED]: boolean,
+    [PrefKey.STATS_SHOW_WHEN_PLAYING]: boolean,
+    [PrefKey.STATS_TEXT_SIZE]: string,
+    [PrefKey.STREAM_CODEC_PROFILE]: CodecProfile,
+    [PrefKey.STREAM_COMBINE_SOURCES]: boolean,
+    [PrefKey.STREAM_MAX_VIDEO_BITRATE]: number,
+    [PrefKey.STREAM_PREFERRED_LOCALE]: StreamPreferredLocale,
+    [PrefKey.STREAM_RESOLUTION]: StreamResolution,
+    [PrefKey.TOUCH_CONTROLLER_AUTO_OFF]: boolean,
+    [PrefKey.TOUCH_CONTROLLER_DEFAULT_OPACITY]: number,
+    [PrefKey.TOUCH_CONTROLLER_MODE]: TouchControllerMode,
+    [PrefKey.TOUCH_CONTROLLER_STYLE_CUSTOM]: TouchControllerStyleCustom,
+    [PrefKey.TOUCH_CONTROLLER_STYLE_STANDARD]: TouchControllerStyleStandard,
+    [PrefKey.UI_CONTROLLER_FRIENDLY]: boolean,
+    [PrefKey.UI_CONTROLLER_SHOW_STATUS]: boolean,
+    [PrefKey.UI_DISABLE_FEEDBACK_DIALOG]: boolean,
+    [PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME]: boolean,
+    [PrefKey.UI_HIDE_SECTIONS]: UiSection[],
+    [PrefKey.UI_HIDE_SYSTEM_MENU_ICON]: boolean,
+    [PrefKey.UI_LAYOUT]: UiLayout,
+    [PrefKey.UI_REDUCE_ANIMATIONS]: boolean,
+    [PrefKey.UI_SCROLLBAR_HIDE]: boolean,
+    [PrefKey.UI_SIMPLIFY_STREAM_MENU]: boolean,
+    [PrefKey.UI_SKIP_SPLASH_VIDEO]: boolean,
+    [PrefKey.VERSION_CURRENT]: string,
+    [PrefKey.VERSION_LAST_CHECK]: number,
+    [PrefKey.VERSION_LATEST]: string,
+    [PrefKey.VIDEO_BRIGHTNESS]: number,
+    [PrefKey.VIDEO_CONTRAST]: number,
+    [PrefKey.VIDEO_MAX_FPS]: number,
+    [PrefKey.VIDEO_PLAYER_TYPE]: StreamPlayerType,
+    [PrefKey.VIDEO_POSITION]: VideoPosition,
+    [PrefKey.VIDEO_POWER_PREFERENCE]: VideoPowerPreference,
+    [PrefKey.VIDEO_PROCESSING]: StreamVideoProcessing,
+    [PrefKey.VIDEO_RATIO]: VideoRatio,
+    [PrefKey.VIDEO_SATURATION]: number,
+    [PrefKey.VIDEO_SHARPNESS]: number,
+}

src/enums/pref-values.ts

@@ -84,6 +84,12 @@ export const enum StreamStat {
     CLOCK = 'time',
 };
 
+export const enum StreamStatPosition {
+    TOP_LEFT = 'top-left',
+    TOP_CENTER = 'top-center',
+    TOP_RIGHT = 'top-right',
+}
+
 export const enum VideoRatio {
     '16:9' = '16:9',
     '18:9' = '18:9',
@@ -101,6 +107,12 @@ export const enum VideoPosition {
     BOTTOM_HALF = 'bottom-half',
 }
 
+export const enum VideoPowerPreference {
+    DEFAULT = 'default',
+    LOW_POWER = 'low-power',
+    HIGH_PERFORMANCE = 'high-performance',
+}
+
 export const enum StreamPlayerType {
     VIDEO = 'default',
     WEBGL2 = 'webgl2',

src/enums/prompt-font.ts

@@ -18,15 +18,19 @@ export enum PrompFont {
     LEFT = '≺',
     RIGHT = '≼',
 
+    LS = '⇱',
     L3 = '↺',
     LS_UP = '↾',
     LS_DOWN = '⇂',
     LS_LEFT = '↼',
     LS_RIGHT = '⇀',
 
+    RS = '⇲',
     R3 = '↻',
     RS_UP = '↿',
     RS_DOWN = '⇃',
     RS_LEFT = '↽',
     RS_RIGHT = '⇁',
+
+    SHARE = '📸',
 }

src/index.ts

@@ -171,7 +171,7 @@ document.addEventListener('readystatechange', e => {
     }
 
     // Hide "Play with Friends" skeleton section
-    if (getPref<UiSection[]>(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS) || getPref<BlockFeature[]>(PrefKey.BLOCK_FEATURES).includes(BlockFeature.FRIENDS)) {
+    if (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS) || getPref(PrefKey.BLOCK_FEATURES).includes(BlockFeature.FRIENDS)) {
         const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest<HTMLElement>('div[class*=HomePage-module]');
         $parent && ($parent.style.display = 'none');
     }
@@ -357,8 +357,8 @@ isFullVersion() && window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
 function main() {
     GhPagesUtils.fetchLatestCommit();
 
-    if (getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) !== NativeMkbMode.OFF) {
+    if (getPref(PrefKey.NATIVE_MKB_MODE) !== NativeMkbMode.OFF) {
-        const customList = getPref<string[]>(PrefKey.NATIVE_MKB_FORCED_GAMES);
+        const customList = getPref(PrefKey.NATIVE_MKB_FORCED_GAMES);
         BX_FLAGS.ForceNativeMkbTitles.push(...customList);
     }
 
@@ -405,12 +405,12 @@ function main() {
             RemotePlayManager.detect();
         }
 
-        if (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL) {
+        if (getPref(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL) {
             TouchController.setup();
         }
 
         // Start PointerProviderServer
-        if (AppInterface && (getPref(PrefKey.MKB_ENABLED) || getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON)) {
+        if (AppInterface && (getPref(PrefKey.MKB_ENABLED) || getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON)) {
             STATES.pointerServerPort = AppInterface.startPointerServer() || 9269;
             BxLogger.info('startPointerServer', 'Port', STATES.pointerServerPort.toString());
         }

src/modules/game-bar/game-bar.ts

@@ -20,7 +20,7 @@ export class GameBar {
     private static instance: GameBar | null | undefined;
     public static getInstance(): typeof GameBar['instance'] {
         if (typeof GameBar.instance === 'undefined') {
-            if (getPref<GameBarPosition>(PrefKey.GAME_BAR_POSITION) !== GameBarPosition.OFF) {
+            if (getPref(PrefKey.GAME_BAR_POSITION) !== GameBarPosition.OFF) {
                 GameBar.instance = new GameBar();
             } else {
                 GameBar.instance = null;
@@ -46,7 +46,7 @@ export class GameBar {
 
         let $container;
 
-        const position = getPref<GameBarPosition>(PrefKey.GAME_BAR_POSITION);
+        const position = getPref(PrefKey.GAME_BAR_POSITION);
 
         const $gameBar = CE('div', { id: 'bx-game-bar', class: 'bx-gone', 'data-position': position },
             $container = CE('div', { class: 'bx-game-bar-container bx-offscreen' }),
@@ -55,7 +55,7 @@ export class GameBar {
 
         this.actions = [
             new ScreenshotAction(),
-            ...(STATES.userAgent.capabilities.touch && (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.OFF) ? [new TouchControlAction()] : []),
+            ...(STATES.userAgent.capabilities.touch && (getPref(PrefKey.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.OFF) ? [new TouchControlAction()] : []),
             new SpeakerAction(),
             new RendererAction(),
             new MicrophoneAction(),

src/modules/loading-screen.ts

@@ -37,7 +37,7 @@ export class LoadingScreen {
 
         LoadingScreen.setBackground(titleInfo.product.heroImageUrl || titleInfo.product.titledHeroImageUrl || titleInfo.product.tileImageUrl);
 
-        if (getPref<LoadingScreenRocket>(PrefKey.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE) {
+        if (getPref(PrefKey.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE) {
             LoadingScreen.hideRocket();
         }
     }
@@ -89,7 +89,7 @@ export class LoadingScreen {
 
     static setupWaitTime(waitTime: number) {
         // Hide rocket when queing
-        if (getPref<LoadingScreenRocket>(PrefKey.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE_QUEUE) {
+        if (getPref(PrefKey.LOADING_SCREEN_ROCKET) === LoadingScreenRocket.HIDE_QUEUE) {
             LoadingScreen.hideRocket();
         }
 

src/modules/mkb/mkb-handler.ts

@@ -580,7 +580,7 @@ export class EmulatedMkbHandler extends MkbHandler {
 
     updateGamepadSlots() {
         // Set gamepad slot
-        this.VIRTUAL_GAMEPAD.index = getPref<number>(PrefKey.MKB_P1_SLOT) - 1;
+        this.VIRTUAL_GAMEPAD.index = getPref(PrefKey.MKB_P1_SLOT) - 1;
     }
 
     start() {

src/modules/mkb/mkb-popup.ts

@@ -7,6 +7,7 @@ import { NativeMkbHandler } from "./native-mkb-handler";
 import { StreamSettings } from "@/utils/stream-settings";
 import { KeyHelper } from "./key-helper";
 import { BxEventBus } from "@/utils/bx-event-bus";
+import { BxIcon } from "@/utils/bx-icon";
 
 type MkbPopupType = 'virtual' | 'native';
 
@@ -90,6 +91,7 @@ export class MkbPopup {
 
                 createButton({
                     label: t('manage'),
+                    icon: BxIcon.MANAGE,
                     style: ButtonStyle.FOCUSABLE,
                     onClick: () => {
                         const dialog = SettingsDialog.getInstance();

src/modules/mkb/native-mkb-handler.ts

@@ -43,7 +43,7 @@ export class NativeMkbHandler extends MkbHandler {
     private readonly LOG_TAG = 'NativeMkbHandler';
 
     static isAllowed = () => {
-        return STATES.browser.capabilities.emulatedNativeMkb && getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON;
+        return STATES.browser.capabilities.emulatedNativeMkb && getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON;
     }
 
     private pointerClient: PointerClient | undefined;

src/modules/patcher/patcher-utils.ts

@@ -1,22 +1,30 @@
 import type { PatchArray, PatchName, PatchPage } from "./patcher";
 
 export class PatcherUtils {
-    static indexOf(txt: string, searchString: string, startIndex: number, maxRange: number): number {
+    static indexOf(txt: string, searchString: string, startIndex: number, maxRange=0, after=false): number {
+        if (startIndex < 0) {
+            return -1;
+        }
+
         const index = txt.indexOf(searchString, startIndex);
         if (index < 0 || (maxRange && index - startIndex > maxRange)) {
             return -1;
         }
 
-        return index;
+        return after ? index + searchString.length : index;
+    }
+
+    static lastIndexOf(txt: string, searchString: string, startIndex: number, maxRange=0, after=false): number {
+        if (startIndex < 0) {
+            return -1;
         }
 
-    static lastIndexOf(txt: string, searchString: string, startIndex: number, maxRange: number): number {
         const index = txt.lastIndexOf(searchString, startIndex);
         if (index < 0 || (maxRange && startIndex - index > maxRange)) {
             return -1;
         }
 
-        return index;
+        return after ? index + searchString.length : index;
     }
 
     static insertAt(txt: string, index: number, insertString: string): string {

src/modules/patcher/patcher.ts

@@ -4,10 +4,10 @@ import { BxLogger } from "@utils/bx-logger";
 import { blockSomeNotifications, hashCode, renderString } from "@utils/utils";
 import { BxEvent } from "@/utils/bx-event";
 
-import codeControllerShortcuts from "./patches/controller-shortcuts.js" with { type: "text" };
+import codeControllerCustomization from "./patches/controller-customization.js" with { type: "text" };
+import codePollGamepad from "./patches/poll-gamepad.js" with { type: "text" };
 import codeExposeStreamSession from "./patches/expose-stream-session.js" with { type: "text" };
 import codeLocalCoOpEnable from "./patches/local-co-op-enable.js" with { type: "text" };
-import codeRemotePlayEnable from "./patches/remote-play-enable.js" with { type: "text" };
 import codeRemotePlayKeepAlive from "./patches/remote-play-keep-alive.js" with { type: "text" };
 import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "text" };
 import { PrefKey, StorageKey } from "@/enums/pref-keys.js";
@@ -88,7 +88,7 @@ const PATCHES = {
             return false;
         }
 
-        const layout = getPref<UiLayout>(PrefKey.UI_LAYOUT) === UiLayout.TV ? UiLayout.TV : UiLayout.DEFAULT;
+        const layout = getPref(PrefKey.UI_LAYOUT) === UiLayout.TV ? UiLayout.TV : UiLayout.DEFAULT;
         return str.replace(text, `?"${layout}":"${layout}"`);
     },
 
@@ -120,7 +120,9 @@ const PATCHES = {
             return false;
         }
 
-        return str.replace(text, codeRemotePlayEnable);
+        const newCode = `connectMode: window.BX_REMOTE_PLAY_CONFIG ? "xhome-connect" : "cloud-connect",
+remotePlayServerId: (window.BX_REMOTE_PLAY_CONFIG && window.BX_REMOTE_PLAY_CONFIG.serverId) || '',`;
+        return str.replace(text, newCode);
     },
 
     // Remote Play: Disable achievement toast
@@ -191,17 +193,34 @@ const PATCHES = {
             codeBlock = codeBlock.replace('this.inputPollingDurationStats.addValue', '');
         }
 
-        // Map the Share button on Xbox Series controller with the capturing screenshot feature
+        // Controller shortcuts
-        const match = codeBlock.match(/this\.gamepadTimestamps\.set\((\w+)\.index/);
+        let match = codeBlock.match(/this\.gamepadTimestamps\.set\(([A-Za-z0-9_$]+)\.index/);
-        if (match) {
+        if (!match) {
-            const gamepadVar = match[1];
+            return false;
-            const newCode = renderString(codeControllerShortcuts, {
-                gamepadVar,
-            });
-
-            codeBlock = codeBlock.replace('this.gamepadTimestamps.set', newCode + 'this.gamepadTimestamps.set');
         }
 
+        let newCode = renderString(codePollGamepad, {
+            gamepadVar: match[1],
+        });
+        codeBlock = codeBlock.replace('this.gamepadTimestamps.set', newCode + 'this.gamepadTimestamps.set');
+
+        // Controller customization
+        match = codeBlock.match(/let ([A-Za-z0-9_$]+)=this\.gamepadMappings\.find/);
+        if (!match) {
+            return false;
+        }
+
+        const xCloudGamepadVar = match[1];
+        const inputFeedbackManager = PatcherUtils.indexOf(codeBlock, 'this.inputFeedbackManager.onGamepadConnected(', 0, 10000);
+        const backetIndex = PatcherUtils.indexOf(codeBlock, '}', inputFeedbackManager, 100);
+        if (backetIndex < 0) {
+            return false;
+        }
+
+        let customizationCode = ';';  // End previous code line
+        customizationCode += renderString(codeControllerCustomization, { xCloudGamepadVar });
+        codeBlock = PatcherUtils.insertAt(codeBlock, backetIndex, customizationCode);
+
         str = str.substring(0, index) + codeBlock + str.substring(setTimeoutIndex);
         return str;
     },
@@ -357,7 +376,7 @@ if (window.BX_EXPOSED.stopTakRendering) {
         }
 
         let autoOffCode = '';
-        if (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
+        if (getPref(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
             autoOffCode = 'return;';
         } else if (getPref(PrefKey.TOUCH_CONTROLLER_AUTO_OFF)) {
             autoOffCode = `
@@ -414,7 +433,7 @@ e.guideUI = null;
 `;
 
         // Remove the TAK Edit button when the touch controller is disabled
-        if (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
+        if (getPref(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF) {
             newCode += 'e.canShowTakHUD = false;';
         }
 
@@ -534,7 +553,7 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});
             return false;
         }
 
-        const opacity = (getPref<TouchControllerDefaultOpacity>(PrefKey.TOUCH_CONTROLLER_DEFAULT_OPACITY) / 100).toFixed(1);
+        const opacity = (getPref(PrefKey.TOUCH_CONTROLLER_DEFAULT_OPACITY) / 100).toFixed(1);
         const newCode = `opacityMultiplier: ${opacity}`;
         str = str.replace(text, newCode);
         return str;
@@ -771,7 +790,7 @@ true` + text;
             return false;
         }
 
-        const PREF_HIDE_SECTIONS = getPref<UiSection[]>(PrefKey.UI_HIDE_SECTIONS);
+        const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS);
         const siglIds: GamePassCloudGallery[] = [];
 
         const sections: PartialRecord<UiSection, GamePassCloudGallery> = {
@@ -962,7 +981,7 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
 
         // Find index after {
         index = str.indexOf('{', index) + 1;
-        const blockFeatures = getPref<BlockFeature[]>(PrefKey.BLOCK_FEATURES);
+        const blockFeatures = getPref(PrefKey.BLOCK_FEATURES);
         const filters = [];
         if (blockFeatures.includes(BlockFeature.NOTIFICATIONS_INVITES)) {
             filters.push('GameInvite', 'PartyInvite');
@@ -987,7 +1006,7 @@ ${subsVar} = subs;
 };
 
 let PATCH_ORDERS = PatcherUtils.filterPatches([
-    ...(AppInterface && getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
+    ...(AppInterface && getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
         'enableNativeMkb',
         'exposeInputSink',
         'disableAbsoluteMouse',
@@ -1019,7 +1038,7 @@ let PATCH_ORDERS = PatcherUtils.filterPatches([
     'overrideStorageGetSettings',
     getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && 'patchSetCurrentFocus',
 
-    getPref<UiLayout>(PrefKey.UI_LAYOUT) !== UiLayout.DEFAULT && 'websiteLayout',
+    getPref(PrefKey.UI_LAYOUT) !== UiLayout.DEFAULT && 'websiteLayout',
     getPref(PrefKey.GAME_FORTNITE_FORCE_CONSOLE) && 'forceFortniteConsole',
 
     ...(STATES.userAgent.capabilities.touch ? [
@@ -1055,7 +1074,7 @@ let PATCH_ORDERS = PatcherUtils.filterPatches([
     ] : []),
 ]);
 
-const hideSections = getPref<UiSection[]>(PrefKey.UI_HIDE_SECTIONS);
+const hideSections = getPref(PrefKey.UI_HIDE_SECTIONS);
 let HOME_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
     hideSections.includes(UiSection.NEWS) && 'ignoreNewsSection',
     hideSections.includes(UiSection.FRIENDS) && 'ignorePlayWithFriendsSection',
@@ -1086,11 +1105,11 @@ let STREAM_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
     getPref(PrefKey.UI_DISABLE_FEEDBACK_DIALOG) && 'skipFeedbackDialog',
 
     ...(STATES.userAgent.capabilities.touch ? [
-        getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL && 'patchShowSensorControls',
+        getPref(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL && 'patchShowSensorControls',
-        getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL && 'exposeTouchLayoutManager',
+        getPref(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL && 'exposeTouchLayoutManager',
-        (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF || getPref(PrefKey.TOUCH_CONTROLLER_AUTO_OFF)) && 'disableTakRenderer',
+        (getPref(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.OFF || getPref(PrefKey.TOUCH_CONTROLLER_AUTO_OFF)) && 'disableTakRenderer',
-        getPref<TouchControllerDefaultOpacity>(PrefKey.TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
+        getPref(PrefKey.TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
-        (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.OFF && (getPref(PrefKey.MKB_ENABLED) || getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON)) && 'patchBabylonRendererClass',
+        (getPref(PrefKey.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.OFF && (getPref(PrefKey.MKB_ENABLED) || getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON)) && 'patchBabylonRendererClass',
     ] : []),
 
     BX_FLAGS.EnableXcloudLogging && 'enableConsoleLogging',
@@ -1105,7 +1124,7 @@ let STREAM_PAGE_PATCH_ORDERS = PatcherUtils.filterPatches([
     ] : []),
 
     // Native MKB
-    ...(AppInterface && getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
+    ...(AppInterface && getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON ? [
         'patchMouseAndKeyboardEnabled',
         'disableNativeRequestPointerLock',
     ] : []),

src/modules/patcher/patches/controller-shortcuts.js

@@ -1,99 +0,0 @@
-if (window.BX_EXPOSED.disableGamepadPolling) {
-    this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(50) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, 50);
-    return;
-}
-
-const currentGamepad = ${gamepadVar};
-
-// Share button on XS controller
-if (currentGamepad.buttons[17] && currentGamepad.buttons[17].pressed) {
-    window.dispatchEvent(new Event(BxEvent.CAPTURE_SCREENSHOT));
-}
-
-const btnHome = currentGamepad.buttons[16];
-if (btnHome) {
-    if (!this.bxHomeStates) {
-        this.bxHomeStates = {};
-    }
-
-    let intervalMs = 0;
-    let hijack = false;
-
-    if (btnHome.pressed) {
-        hijack = true;
-        intervalMs = 16;
-        this.gamepadIsIdle.set(currentGamepad.index, false);
-
-        if (this.bxHomeStates[currentGamepad.index]) {
-            const lastTimestamp = this.bxHomeStates[currentGamepad.index].timestamp;
-
-            if (currentGamepad.timestamp !== lastTimestamp) {
-                this.bxHomeStates[currentGamepad.index].timestamp = currentGamepad.timestamp;
-
-                const handled = window.BX_EXPOSED.handleControllerShortcut(currentGamepad);
-                if (handled) {
-                    this.bxHomeStates[currentGamepad.index].shortcutPressed += 1;
-                }
-            }
-        } else {
-            // First time pressing > save current timestamp
-            window.BX_EXPOSED.resetControllerShortcut(currentGamepad.index);
-            this.bxHomeStates[currentGamepad.index] = {
-                shortcutPressed: 0,
-                timestamp: currentGamepad.timestamp,
-            };
-        }
-    } else if (this.bxHomeStates[currentGamepad.index]) {
-        hijack = true;
-        const info = structuredClone(this.bxHomeStates[currentGamepad.index]);
-
-        // Home button released
-        this.bxHomeStates[currentGamepad.index] = null;
-
-        if (info.shortcutPressed === 0) {
-            const fakeGamepadMappings = [{
-                GamepadIndex: currentGamepad.index,
-                A: 0,
-                B: 0,
-                X: 0,
-                Y: 0,
-                LeftShoulder: 0,
-                RightShoulder: 0,
-                LeftTrigger: 0,
-                RightTrigger: 0,
-                View: 0,
-                Menu: 0,
-                LeftThumb: 0,
-                RightThumb: 0,
-                DPadUp: 0,
-                DPadDown: 0,
-                DPadLeft: 0,
-                DPadRight: 0,
-                Nexus: 1,
-                LeftThumbXAxis: 0,
-                LeftThumbYAxis: 0,
-                RightThumbXAxis: 0,
-                RightThumbYAxis: 0,
-                PhysicalPhysicality: 0,
-                VirtualPhysicality: 0,
-                Dirty: true,
-                Virtual: false,
-            }];
-
-            const isLongPress = (currentGamepad.timestamp - info.timestamp) >= 500;
-            intervalMs = isLongPress ? 500 : 100;
-
-            this.inputSink.onGamepadInput(performance.now() - intervalMs, fakeGamepadMappings);
-        } else {
-            intervalMs = window.BX_STREAM_SETTINGS.controllerPollingRate;
-        }
-    }
-
-    if (hijack && intervalMs) {
-        // Listen to next button press
-        this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(intervalMs) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, intervalMs);
-
-        // Hijack this button
-        return;
-    }
-}

src/modules/patcher/patches/remote-play-enable.js

@@ -1,2 +0,0 @@
-connectMode: window.BX_REMOTE_PLAY_CONFIG ? "xhome-connect" : "cloud-connect",
-remotePlayServerId: (window.BX_REMOTE_PLAY_CONFIG && window.BX_REMOTE_PLAY_CONFIG.serverId) || '',

src/modules/patcher/patches/remote-play-keep-alive.js

@@ -1,7 +0,0 @@
-const msg = JSON.parse(e);
-if (msg.reason === 'WarningForBeingIdle' && !window.location.pathname.includes('/launch/')) {
-    try {
-        this.sendKeepAlive();
-        return;
-    } catch (ex) { console.log(ex); }
-}

src/modules/patcher/patches/src/controller-customization.ts

@@ -0,0 +1,167 @@
+import { BxEvent as BxEventNamespace } from "@/utils/bx-event";
+
+// "currentGamepad" variable in poll-gamepad.js
+declare const currentGamepad: Gamepad;
+declare const $xCloudGamepadVar$: XcloudGamepad;
+declare const BxEvent: typeof BxEventNamespace;
+
+// Share button on XS controller
+const shareButtonPressed = currentGamepad.buttons[17]?.pressed;
+let shareButtonHandled = false;
+
+const xCloudGamepad: XcloudGamepad = $xCloudGamepadVar$;
+if (currentGamepad.id in window.BX_STREAM_SETTINGS.controllers) {
+    const controller = window.BX_STREAM_SETTINGS.controllers[currentGamepad.id];
+    if (controller?.customization) {
+        const MIN_RANGE = 0.1;
+
+        const { mapping, ranges } = controller.customization;
+        const pressedButtons: Partial<Record<keyof XcloudGamepad, number>> = {};
+        const releasedButtons: Partial<Record<keyof XcloudGamepad, number>> = {};
+        let isModified = false;
+
+        // Limit left trigger range
+        if (ranges.LeftTrigger) {
+            const [from, to] = ranges.LeftTrigger;
+            xCloudGamepad.LeftTrigger = xCloudGamepad.LeftTrigger > to ? 1 : xCloudGamepad.LeftTrigger;
+            xCloudGamepad.LeftTrigger = xCloudGamepad.LeftTrigger < from ? 0 : xCloudGamepad.LeftTrigger;
+        }
+
+        // Limit right trigger range
+        if (ranges.RightTrigger) {
+            const [from, to] = ranges.RightTrigger;
+            xCloudGamepad.RightTrigger = xCloudGamepad.RightTrigger > to ? 1 : xCloudGamepad.RightTrigger;
+            xCloudGamepad.RightTrigger = xCloudGamepad.RightTrigger < from ? 0 : xCloudGamepad.RightTrigger;
+        }
+
+        // Limit left stick deadzone
+        if (ranges.LeftThumb) {
+            const [from, to] = ranges.LeftThumb;
+
+            const xAxis = xCloudGamepad.LeftThumbXAxis;
+            const yAxis = xCloudGamepad.LeftThumbYAxis;
+
+            const range = Math.abs(Math.sqrt(xAxis * xAxis + yAxis * yAxis));
+            let newRange = range > to ? 1 : range;
+            newRange = newRange < from ? 0 : newRange;
+
+            if (newRange !== range) {
+                xCloudGamepad.LeftThumbXAxis = xAxis * (newRange / range);
+                xCloudGamepad.LeftThumbYAxis = yAxis * (newRange / range);
+            }
+        }
+
+        // Limit right stick deadzone
+        if (ranges.RightThumb) {
+            const [from, to] = ranges.RightThumb;
+
+            const xAxis = xCloudGamepad.RightThumbXAxis;
+            const yAxis = xCloudGamepad.RightThumbYAxis;
+
+            const range = Math.abs(Math.sqrt(xAxis * xAxis + yAxis * yAxis));
+            let newRange = range > to ? 1 : range;
+            newRange = newRange < from ? 0 : newRange;
+
+            if (newRange !== range) {
+                xCloudGamepad.RightThumbXAxis = xAxis * (newRange / range);
+                xCloudGamepad.RightThumbYAxis = yAxis * (newRange / range);
+            }
+        }
+
+        // Handle the Share button
+        if (shareButtonPressed && 'Share' in mapping) {
+            const targetButton = mapping['Share'];
+            if (typeof targetButton === 'string') {
+                pressedButtons[targetButton] = 1;
+            }
+
+            // Don't send capturing request
+            shareButtonHandled = true;
+            delete mapping['Share'];
+        }
+
+        // Handle other buttons
+        let key: keyof typeof mapping;
+        for (key in mapping) {
+            const mappedKey = mapping[key];
+
+            if (key === 'LeftStickAxes' || key === 'RightStickAxes') {
+                let sourceX: keyof XcloudGamepad;
+                let sourceY: keyof XcloudGamepad;
+                let targetX: keyof XcloudGamepad;
+                let targetY: keyof XcloudGamepad;
+
+                if (key === 'LeftStickAxes') {
+                    sourceX = 'LeftThumbXAxis';
+                    sourceY = 'LeftThumbYAxis';
+                    targetX = 'RightThumbXAxis';
+                    targetY = 'RightThumbYAxis';
+                } else {
+                    sourceX = 'RightThumbXAxis';
+                    sourceY = 'RightThumbYAxis';
+                    targetX = 'LeftThumbXAxis';
+                    targetY = 'LeftThumbYAxis';
+                }
+
+                if (typeof mappedKey === 'string') {
+                    // Calculate moved range
+                    const rangeX = xCloudGamepad[sourceX];
+                    const rangeY = xCloudGamepad[sourceY];
+                    const movedRange = Math.abs(Math.sqrt(rangeX * rangeX + rangeY * rangeY));
+                    const moved = movedRange >= MIN_RANGE;
+
+                    // Swap sticks
+                    if (moved) {
+                        pressedButtons[targetX] = rangeX;
+                        pressedButtons[targetY] = rangeY;
+                    }
+                }
+
+                // Unbind original stick
+                releasedButtons[sourceX] = 0;
+                releasedButtons[sourceY] = 0;
+
+                isModified = true;
+            } else if (typeof mappedKey === 'string') {
+                let pressed = false;
+                let value = 0;
+
+                if (key === 'LeftTrigger' || key === 'RightTrigger') {
+                    // Only set pressed state when pressing pass max range
+                    const currentRange = xCloudGamepad[key];
+                    if (mappedKey === 'LeftTrigger' || mappedKey === 'RightTrigger') {
+                        pressed = currentRange >= MIN_RANGE;
+                        value = currentRange;
+                    } else {
+                        pressed = true;
+                        value = currentRange >= 0.9 ? 1 : 0;
+                    }
+                } else if (xCloudGamepad[key]) {
+                    pressed = true;
+                    value = xCloudGamepad[key] as number;
+                }
+
+                if (pressed) {
+                    // Only copy button value when it's being pressed
+                    pressedButtons[mappedKey] = value;
+                    // Unbind original button
+                    releasedButtons[key] = 0;
+
+                    isModified = true;
+                }
+            } else if (mappedKey === false) {
+                // Disable key
+                pressedButtons[key] = 0;
+
+                isModified = true;
+            }
+        }
+
+        isModified && Object.assign(xCloudGamepad, releasedButtons, pressedButtons);
+    }
+}
+
+// Capture screenshot when the Share button is pressed
+if (shareButtonPressed && !shareButtonHandled) {
+    window.dispatchEvent(new Event(BxEvent.CAPTURE_SCREENSHOT));
+}

src/modules/patcher/patches/src/expose-stream-session.ts

@@ -1,7 +1,15 @@
-window.BX_EXPOSED.streamSession = this;
+import type { MicrophoneState } from "@/modules/shortcuts/microphone-shortcut";
+import { BxEvent as BxEventNamespace } from "@/utils/bx-event";
 
-const orgSetMicrophoneState = this.setMicrophoneState.bind(this);
+declare const $this$: any;
-this.setMicrophoneState = state => {
+declare const BxEvent: typeof BxEventNamespace;
+
+const self = $this$;
+window.BX_EXPOSED.streamSession = self;
+
+// Patch setMicrophoneState()
+const orgSetMicrophoneState = self.setMicrophoneState.bind(self);
+self.setMicrophoneState = (state: MicrophoneState) => {
     orgSetMicrophoneState(state);
     window.BxEventBus.Stream.emit('microphone.state.changed', { state });
 };
@@ -9,7 +17,7 @@ this.setMicrophoneState = state => {
 window.dispatchEvent(new Event(BxEvent.STREAM_SESSION_READY));
 
 // Patch updateDimensions() to make native touch work correctly with WebGL2
-let updateDimensionsStr = this.updateDimensions.toString();
+let updateDimensionsStr = self.updateDimensions.toString();
 
 if (updateDimensionsStr.startsWith('function ')) {
     updateDimensionsStr = updateDimensionsStr.substring(9);
@@ -19,7 +27,6 @@ if (updateDimensionsStr.startsWith('function ')) {
 const renderTargetVar = updateDimensionsStr.match(/if\((\w+)\){/)[1];
 
 updateDimensionsStr = updateDimensionsStr.replaceAll(renderTargetVar + '.scroll', 'scroll');
-
 updateDimensionsStr = updateDimensionsStr.replace(`if(${renderTargetVar}){`, `
 if (${renderTargetVar}) {
     const scrollWidth = ${renderTargetVar}.dataset.width ? parseInt(${renderTargetVar}.dataset.width) : ${renderTargetVar}.scrollWidth;

src/modules/patcher/patches/src/local-co-op-enable.ts

@@ -1,9 +1,14 @@
+import { BxLogger as OrgBxLogger } from "@/utils/bx-logger";
+
+declare const BxLogger: typeof OrgBxLogger;
+declare const $this$: any;
+
 // Save the original onGamepadChanged() and onGamepadInput()
-this.orgOnGamepadChanged = this.onGamepadChanged;
+$this$.orgOnGamepadChanged = $this$.onGamepadChanged;
-this.orgOnGamepadInput = this.onGamepadInput;
+$this$.orgOnGamepadInput = $this$.onGamepadInput;
 
 let match;
-let onGamepadChangedStr = this.onGamepadChanged.toString();
+let onGamepadChangedStr = $this$.onGamepadChanged.toString();
 
 // Fix problem with Safari
 if (onGamepadChangedStr.startsWith('function ')) {
@@ -11,9 +16,9 @@ if (onGamepadChangedStr.startsWith('function ')) {
 }
 
 onGamepadChangedStr = onGamepadChangedStr.replaceAll('0', 'arguments[1]');
-eval(`this.patchedOnGamepadChanged = function ${onGamepadChangedStr}`);
+eval(`$this$.patchedOnGamepadChanged = function ${onGamepadChangedStr}`);
 
-let onGamepadInputStr = this.onGamepadInput.toString();
+let onGamepadInputStr = $this$.onGamepadInput.toString();
 // Fix problem with Safari
 if (onGamepadInputStr.startsWith('function ')) {
     onGamepadInputStr = onGamepadInputStr.substring(9);
@@ -22,19 +27,19 @@ if (onGamepadInputStr.startsWith('function ')) {
 match = onGamepadInputStr.match(/(\w+\.GamepadIndex)/);
 if (match) {
     const gamepadIndexVar = match[0];
-    onGamepadInputStr = onGamepadInputStr.replace('this.gamepadStates.get(', `this.gamepadStates.get(${gamepadIndexVar},`);
+    onGamepadInputStr = onGamepadInputStr.replace('$this$.gamepadStates.get(', `$this$.gamepadStates.get(${gamepadIndexVar},`);
-    eval(`this.patchedOnGamepadInput = function ${onGamepadInputStr}`);
+    eval(`$this$.patchedOnGamepadInput = function ${onGamepadInputStr}`);
     BxLogger.info('supportLocalCoOp', '✅ Successfully patched local co-op support');
 } else {
     BxLogger.error('supportLocalCoOp', '❌ Unable to patch local co-op support');
 }
 
 // Add method to switch between patched and original methods
-this.toggleLocalCoOp = enable => {
+$this$.toggleLocalCoOp = (enable: boolean) => {
     BxLogger.info('toggleLocalCoOp', enable ? 'Enabled' : 'Disabled');
 
-    this.onGamepadChanged = enable ? this.patchedOnGamepadChanged : this.orgOnGamepadChanged;
+    $this$.onGamepadChanged = enable ? $this$.patchedOnGamepadChanged : $this$.orgOnGamepadChanged;
-    this.onGamepadInput = enable ? this.patchedOnGamepadInput : this.orgOnGamepadInput;
+    $this$.onGamepadInput = enable ? $this$.patchedOnGamepadInput : $this$.orgOnGamepadInput;
 
     // Reconnect all gamepads
     const gamepads = window.navigator.getGamepads();
@@ -54,4 +59,4 @@ this.toggleLocalCoOp = enable => {
 };
 
 // Expose this method
-window.BX_EXPOSED.toggleLocalCoOp = this.toggleLocalCoOp.bind(this);
+window.BX_EXPOSED.toggleLocalCoOp = $this$.toggleLocalCoOp.bind(this);

src/modules/patcher/patches/src/poll-gamepad.ts

@@ -0,0 +1,98 @@
+type GamepadManager = {
+    pollGamepadssetTimeoutTimerID: number;
+    intervalWorker: any;
+    pollGamepads(pollGamepads: any, arg1: number): any;
+    gamepadIsIdle: any;
+    inputSink: any;
+    inputConfiguration: any;
+
+    bxHomeStates: any;
+};
+
+declare const $gamepadVar$: Gamepad;
+declare const $this$: GamepadManager;
+
+const self = $this$;
+if (window.BX_EXPOSED.disableGamepadPolling) {
+    self.inputConfiguration.useIntervalWorkerThreadForInput && self.intervalWorker ? self.intervalWorker.scheduleTimer(50) : self.pollGamepadssetTimeoutTimerID = window.setTimeout(self.pollGamepads, 50);
+    // @ts-ignore
+    return;
+}
+
+const currentGamepad = $gamepadVar$;
+
+const btnHome = currentGamepad.buttons[16];
+// Controller shortcuts
+if (btnHome) {
+    if (!self.bxHomeStates) {
+        self.bxHomeStates = {};
+    }
+
+    let intervalMs = 0;
+    let hijack = false;
+
+    if (btnHome.pressed) {
+        hijack = true;
+        intervalMs = 16;
+        self.gamepadIsIdle.set(currentGamepad.index, false);
+
+        if (self.bxHomeStates[currentGamepad.index]) {
+            const lastTimestamp = self.bxHomeStates[currentGamepad.index].timestamp;
+
+            if (currentGamepad.timestamp !== lastTimestamp) {
+                self.bxHomeStates[currentGamepad.index].timestamp = currentGamepad.timestamp;
+
+                const handled = window.BX_EXPOSED.handleControllerShortcut(currentGamepad);
+                if (handled) {
+                    self.bxHomeStates[currentGamepad.index].shortcutPressed += 1;
+                }
+            }
+        } else {
+            // First time pressing > save current timestamp
+            window.BX_EXPOSED.resetControllerShortcut(currentGamepad.index);
+            self.bxHomeStates[currentGamepad.index] = {
+                shortcutPressed: 0,
+                timestamp: currentGamepad.timestamp,
+            };
+        }
+    } else if (self.bxHomeStates[currentGamepad.index]) {
+        hijack = true;
+        const info = structuredClone(self.bxHomeStates[currentGamepad.index]);
+
+        // Home button released
+        self.bxHomeStates[currentGamepad.index] = null;
+
+        if (info.shortcutPressed === 0) {
+            const fakeGamepadMappings: XcloudGamepad[] = [{
+                GamepadIndex: currentGamepad.index,
+                A: 0, B: 0, X: 0, Y: 0,
+                LeftShoulder: 0, RightShoulder: 0,
+                LeftTrigger: 0, RightTrigger: 0,
+                View: 0, Menu: 0,
+                LeftThumb: 0, RightThumb: 0,
+                DPadUp: 0, DPadDown: 0, DPadLeft: 0, DPadRight: 0,
+                Nexus: 1,
+                LeftThumbXAxis: 0, LeftThumbYAxis: 0,
+                RightThumbXAxis: 0, RightThumbYAxis: 0,
+                PhysicalPhysicality: 0, VirtualPhysicality: 0,
+                Dirty: true, Virtual: false,
+            }];
+
+            const isLongPress = (currentGamepad.timestamp - info.timestamp) >= 500;
+            intervalMs = isLongPress ? 500 : 100;
+
+            self.inputSink.onGamepadInput(performance.now() - intervalMs, fakeGamepadMappings);
+        } else {
+            intervalMs = window.BX_STREAM_SETTINGS.controllerPollingRate;
+        }
+    }
+
+    if (hijack && intervalMs) {
+        // Listen to next button press
+        self.inputConfiguration.useIntervalWorkerThreadForInput && self.intervalWorker ? self.intervalWorker.scheduleTimer(intervalMs) : self.pollGamepadssetTimeoutTimerID = setTimeout(self.pollGamepads, intervalMs);
+
+        // Hijack this button
+        // @ts-ignore
+        return;
+    }
+}

src/modules/patcher/patches/src/remote-play-keep-alive.ts

@@ -0,0 +1,11 @@
+declare const $this$: any;
+declare const e: string;
+
+try {
+    const msg = JSON.parse(e);
+    if (msg.reason === 'WarningForBeingIdle' && !window.location.pathname.includes('/launch/')) {
+        $this$.sendKeepAlive();
+        // @ts-ignore
+        return;
+    }
+} catch (ex) { console.log(ex); }

src/modules/patcher/patches/src/vibration-adjust.ts

@@ -0,0 +1,26 @@
+declare const e: {
+    gamepad: Gamepad;
+    repeat: number;
+    leftMotorPercent: number;
+    rightMotorPercent: number;
+    leftTriggerMotorPercent: number;
+    rightTriggerMotorPercent: number;
+};
+
+if (e?.gamepad?.connected) {
+    const gamepadSettings = window.BX_STREAM_SETTINGS.controllers[e.gamepad.id];
+    if (gamepadSettings?.customization) {
+        const intensity = gamepadSettings.customization.vibrationIntensity;
+
+        if (intensity <= 0) {
+            e.repeat = 0;
+            // @ts-ignore
+            return;
+        } else if (intensity < 1) {
+            e.leftMotorPercent *= intensity;
+            e.rightMotorPercent *= intensity;
+            e.leftTriggerMotorPercent *= intensity;
+            e.rightTriggerMotorPercent *= intensity;
+        }
+    }
+}

src/modules/patcher/patches/vibration-adjust.js

@@ -1,16 +0,0 @@
-const gamepad = e.gamepad;
-if (gamepad?.connected) {
-    const gamepadSettings = window.BX_STREAM_SETTINGS.controllers[gamepad.id];
-    if (gamepadSettings) {
-        const intensity = gamepadSettings.vibrationIntensity;
-
-        if (intensity === 0) {
-            return void(e.repeat = 0);
-        } else if (intensity < 1) {
-            e.leftMotorPercent *= intensity;
-            e.rightMotorPercent *= intensity;
-            e.leftTriggerMotorPercent *= intensity;
-            e.rightTriggerMotorPercent *= intensity;
-        }
-    }
-}

src/modules/shortcuts/sound-shortcut.ts

@@ -17,7 +17,7 @@ export class SoundShortcut {
             return 0;
         }
 
-        const currentValue = getPref<AudioVolume>(PrefKey.AUDIO_VOLUME);
+        const currentValue = getPref(PrefKey.AUDIO_VOLUME);
         let nearestValue: number;
 
         if (amount > 0) {  // Increase
@@ -49,7 +49,7 @@ export class SoundShortcut {
     static muteUnmute() {
         if (getPref(PrefKey.AUDIO_VOLUME_CONTROL_ENABLED) && STATES.currentStream.audioGainNode) {
             const gainValue = STATES.currentStream.audioGainNode.gain.value;
-            const settingValue = getPref<AudioVolume>(PrefKey.AUDIO_VOLUME);
+            const settingValue = getPref(PrefKey.AUDIO_VOLUME);
 
             let targetValue: number;
             if (settingValue === 0) {  // settingValue is 0 => set to 100

src/modules/stream-player.ts

@@ -7,7 +7,7 @@ import { STATES } from "@/utils/global";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "@/utils/settings-storages/global-settings-storage";
 import { BX_FLAGS } from "@/utils/bx-flags";
-import { StreamPlayerType, StreamVideoProcessing, VideoPosition, VideoRatio } from "@/enums/pref-values";
+import { StreamPlayerType, StreamVideoProcessing, VideoPosition } from "@/enums/pref-values";
 
 export type StreamPlayerOptions = Partial<{
     processing: string,
@@ -44,7 +44,7 @@ export class StreamPlayer {
 
         const $fragment = document.createDocumentFragment();
 
-        this.$videoCss = CE<HTMLStyleElement>('style', { id: 'bx-video-css' });
+        this.$videoCss = CE('style', { id: 'bx-video-css' });
         $fragment.appendChild(this.$videoCss);
 
         // Setup SVG filters
@@ -60,7 +60,7 @@ export class StreamPlayer {
                     id: 'bx-filter-usm-matrix',
                     order: '3',
                     xmlns: 'http://www.w3.org/2000/svg',
-                })),
+                }) as unknown as SVGFEConvolveMatrixElement),
             ),
         );
         $fragment.appendChild($svg);
@@ -98,7 +98,7 @@ export class StreamPlayer {
     }
 
     private resizePlayer() {
-        const PREF_RATIO = getPref<VideoRatio>(PrefKey.VIDEO_RATIO);
+        const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
         const $video = this.$video;
         const isNativeTouchGame = STATES.currentStream.titleInfo?.details.hasNativeTouchSupport;
 
@@ -142,7 +142,7 @@ export class StreamPlayer {
 
             // Set position
             const $parent = $video.parentElement!;
-            const position = getPref<VideoPosition>(PrefKey.VIDEO_POSITION);
+            const position = getPref(PrefKey.VIDEO_POSITION);
             $parent.style.removeProperty('padding-top');
 
             $parent.dataset.position = position;

src/modules/stream/stream-settings-utils.ts

@@ -7,7 +7,7 @@ import { StreamVideoProcessing, StreamPlayerType } from "@/enums/pref-values";
 import { escapeCssSelector } from "@/utils/html";
 
 export function onChangeVideoPlayerType() {
-    const playerType = getPref<StreamPlayerType>(PrefKey.VIDEO_PLAYER_TYPE);
+    const playerType = getPref(PrefKey.VIDEO_PLAYER_TYPE);
     const $videoProcessing = document.getElementById(`bx_setting_${escapeCssSelector(PrefKey.VIDEO_PROCESSING)}`) as HTMLSelectElement;
     const $videoSharpness = document.getElementById(`bx_setting_${escapeCssSelector(PrefKey.VIDEO_SHARPNESS)}`) as HTMLElement;
     const $videoPowerPreference = document.getElementById(`bx_setting_${escapeCssSelector(PrefKey.VIDEO_POWER_PREFERENCE)}`) as HTMLElement;

src/modules/stream/stream-stats.ts

@@ -192,8 +192,8 @@ export class StreamStats {
     }
 
     refreshStyles() {
-        const PREF_ITEMS = getPref<StreamStat[]>(PrefKey.STATS_ITEMS);
+        const PREF_ITEMS = getPref(PrefKey.STATS_ITEMS);
-        const PREF_OPACITY_BG = getPref<number>(PrefKey.STATS_OPACITY_BACKGROUND);
+        const PREF_OPACITY_BG = getPref(PrefKey.STATS_OPACITY_BACKGROUND);
 
         const $container = this.$container;
         $container.dataset.stats = '[' + PREF_ITEMS.join('][') + ']';

src/modules/touch-controller.ts

@@ -289,8 +289,8 @@ export class TouchController {
 
         TouchController.#$style = $style;
 
-        const PREF_STYLE_STANDARD = getPref<TouchControllerStyleStandard>(PrefKey.TOUCH_CONTROLLER_STYLE_STANDARD);
+        const PREF_STYLE_STANDARD = getPref(PrefKey.TOUCH_CONTROLLER_STYLE_STANDARD);
-        const PREF_STYLE_CUSTOM = getPref<TouchControllerStyleCustom>(PrefKey.TOUCH_CONTROLLER_STYLE_CUSTOM);
+        const PREF_STYLE_CUSTOM = getPref(PrefKey.TOUCH_CONTROLLER_STYLE_CUSTOM);
 
         BxEventBus.Stream.on('dataChannelCreated', payload => {
             const { dataChannel } = payload;

src/modules/ui/dialog/navigation-dialog.ts

@@ -1,12 +1,10 @@
 import { GamepadKey } from "@/enums/gamepad";
-import { PrefKey } from "@/enums/pref-keys";
 import { VIRTUAL_GAMEPAD_ID } from "@/modules/mkb/mkb-handler";
 import { BxEvent } from "@/utils/bx-event";
 import { BxEventBus } from "@/utils/bx-event-bus";
 import { BxLogger } from "@/utils/bx-logger";
-import { CE, isElementVisible } from "@/utils/html";
+import { calculateSelectBoxes, CE, isElementVisible } from "@/utils/html";
 import { setNearby } from "@/utils/navigation-utils";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 export enum NavigationDirection {
     UP = 1,
@@ -21,10 +19,10 @@ export type NavigationNearbyElements = Partial<{
 
     focus: NavigationElement | (() => boolean),
     loop: ((direction: NavigationDirection) => boolean),
-    [NavigationDirection.UP]: NavigationElement | (() => void) | 'previous' | 'next',
+    [NavigationDirection.UP]: NavigationElement,
-    [NavigationDirection.DOWN]: NavigationElement | (() => void) | 'previous' | 'next',
+    [NavigationDirection.DOWN]: NavigationElement,
-    [NavigationDirection.LEFT]: NavigationElement | (() => void) | 'previous' | 'next',
+    [NavigationDirection.LEFT]: NavigationElement,
-    [NavigationDirection.RIGHT]: NavigationElement | (() => void) | 'previous' | 'next',
+    [NavigationDirection.RIGHT]: NavigationElement,
 }>;
 
 export interface NavigationElement extends HTMLElement {
@@ -107,16 +105,18 @@ export class NavigationDialogManager {
 
     private static readonly GAMEPAD_POLLING_INTERVAL = 50;
     private static readonly GAMEPAD_KEYS = [
-        GamepadKey.UP,
+        GamepadKey.A, GamepadKey.B,
-        GamepadKey.DOWN,
+        GamepadKey.X, GamepadKey.Y,
-        GamepadKey.LEFT,
+
-        GamepadKey.RIGHT,
+        GamepadKey.UP, GamepadKey.RIGHT,
-        GamepadKey.A,
+        GamepadKey.DOWN, GamepadKey.LEFT,
-        GamepadKey.B,
+
-        GamepadKey.LB,
+        GamepadKey.LB, GamepadKey.RB,
-        GamepadKey.RB,
+        GamepadKey.LT, GamepadKey.RT,
-        GamepadKey.LT,
+
-        GamepadKey.RT,
+        GamepadKey.L3, GamepadKey.R3,
+
+        GamepadKey.SELECT, GamepadKey.START,
     ];
 
     private static readonly GAMEPAD_DIRECTION_MAP = {
@@ -172,7 +172,6 @@ export class NavigationDialogManager {
         window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, e => this.hide());
 
         // Calculate minimum width of controller-friendly <select> elements
-        if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
         const observer = new MutationObserver(mutationList => {
             if (mutationList.length === 0 || mutationList[0].addedNodes.length === 0) {
                 return;
@@ -185,49 +184,10 @@ export class NavigationDialogManager {
             }
 
             // Find un-calculated <select> elements
-                this.calculateSelectBoxes($dialog);
+            calculateSelectBoxes($dialog);
         });
         observer.observe(this.$container, { childList: true });
     }
-    }
-
-    calculateSelectBoxes($root: HTMLElement) {
-        const selects = Array.from($root.querySelectorAll('.bx-select:not([data-calculated]) select'));
-
-        for (const $select of selects) {
-            const $parent = $select.parentElement! as HTMLElement;
-
-            // Don't apply to select.bx-full-width elements
-            if ($parent.classList.contains('bx-full-width')) {
-                $parent.dataset.calculated = 'true';
-                return;
-            }
-
-            const rect = $select.getBoundingClientRect();
-
-            let $label: HTMLElement;
-            let width = Math.ceil(rect.width);
-            if (!width) {
-                return;
-            }
-
-            if (($select as HTMLSelectElement).multiple) {
-                $label = $parent.querySelector<HTMLElement>('.bx-select-value')!;
-                width += 20;  // Add checkbox's width
-            } else {
-                $label = $parent.querySelector<HTMLElement>('div')!;
-            }
-
-            // Reduce width if it has <optgroup>
-            if ($select.querySelector('optgroup')) {
-                width -= 15;
-            }
-
-            // Set min-width
-            $label.style.minWidth = width + 'px';
-            $parent.dataset.calculated = 'true';
-        };
-    }
 
     private updateActiveInput(input: 'keyboard' | 'gamepad' | 'mouse') {
         // Set <html>'s activeInput
@@ -369,7 +329,7 @@ export class NavigationDialogManager {
                         }
 
                         this.clearGamepadHoldingInterval();
-                    }, 200);
+                    }, 100);
                 }
                 continue;
             }
@@ -579,6 +539,16 @@ export class NavigationDialogManager {
         const nearby = ($target as NavigationElement).nearby || {};
         const orientation = this.getOrientation($target)!;
 
+        if (nearby[NavigationDirection.UP] && direction === NavigationDirection.UP) {
+            return nearby[NavigationDirection.UP];
+        } else if (nearby[NavigationDirection.DOWN] && direction === NavigationDirection.DOWN) {
+            return nearby[NavigationDirection.DOWN];
+        } else if (nearby[NavigationDirection.LEFT] && direction === NavigationDirection.LEFT) {
+            return nearby[NavigationDirection.LEFT];
+        } else if (nearby[NavigationDirection.RIGHT] && direction === NavigationDirection.RIGHT) {
+            return nearby[NavigationDirection.RIGHT];
+        }
+
         // @ts-ignore
         let siblingProperty = (NavigationDialogManager.SIBLING_PROPERTY_MAP[orientation])[direction];
         if (siblingProperty) {

src/modules/ui/dialog/profile-manger/base-profile-manager-dialog.ts

@@ -5,6 +5,7 @@ import { t } from "@/utils/translation";
 import type { AllPresets, PresetRecord } from "@/types/presets";
 import type { BasePresetsTable } from "@/utils/local-db/base-presets-table";
 import { BxSelectElement } from "@/web-components/bx-select";
+import { BxEvent } from "@/utils/bx-event";
 
 export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends NavigationDialog {
     $container!: HTMLElement;
@@ -12,7 +13,8 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
     private title: string;
     protected presetsDb: BasePresetsTable<T>;
     protected allPresets!: AllPresets<T>;
-    protected currentPresetId: number = 0;
+    protected currentPresetId: number | null = null;
+    protected activatedPresetId: number | null = null;
 
     private $presets!: HTMLSelectElement;
     private $header!: HTMLElement;
@@ -34,7 +36,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
     protected abstract switchPreset(id: number): void;
 
     protected updateButtonStates() {
-        const isDefaultPreset = this.currentPresetId <= 0;
+        const isDefaultPreset = this.currentPresetId === null || this.currentPresetId <= 0;
         this.$btnRename.disabled = isDefaultPreset;
         this.$btnDelete.disabled = isDefaultPreset;
         this.$defaultNote.classList.toggle('bx-gone', !isDefaultPreset);
@@ -42,7 +44,11 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
 
     private async renderPresetsList() {
         this.allPresets = await this.presetsDb.getPresets();
-        renderPresetsList<T>(this.$presets, this.allPresets, this.currentPresetId, { selectedIndicator: true });
+        if (this.currentPresetId === null) {
+            this.currentPresetId = this.allPresets.default[0];
+        }
+
+        renderPresetsList<T>(this.$presets, this.allPresets, this.activatedPresetId, { selectedIndicator: true });
     }
 
     private promptNewName(action: string,value='') {
@@ -59,10 +65,12 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
     };
 
     private async renderDialog() {
-        this.$presets = CE<HTMLSelectElement>('select', { tabindex: -1 });
+        this.$presets = CE('select', {
+            class: 'bx-full-width',
+            tabindex: -1,
+        });
 
         const $select = BxSelectElement.create(this.$presets);
-        $select.classList.add('bx-full-width');
         $select.addEventListener('input', e => {
             this.switchPreset(parseInt(($select as HTMLSelectElement).value));
         });
@@ -82,7 +90,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
                 icon: BxIcon.CURSOR_TEXT,
                 style: ButtonStyle.FOCUSABLE,
                 onClick: async () => {
-                    const preset = this.allPresets.data[this.currentPresetId];
+                    const preset = this.allPresets.data[this.currentPresetId!];
 
                     const newName = this.promptNewName(t('rename'), preset.name);
                     if (!newName) {
@@ -107,8 +115,8 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
                         return;
                     }
 
-                    await this.presetsDb.deletePreset(this.currentPresetId);
+                    await this.presetsDb.deletePreset(this.currentPresetId!);
-                    delete this.allPresets.data[this.currentPresetId];
+                    delete this.allPresets.data[this.currentPresetId!];
                     this.currentPresetId = parseInt(Object.keys(this.allPresets.data)[0]);
 
                     await this.refresh();
@@ -140,7 +148,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
                 title: t('copy'),
                 style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
                 onClick: async (e) => {
-                    const preset = this.allPresets.data[this.currentPresetId];
+                    const preset = this.allPresets.data[this.currentPresetId!];
 
                     const newName = this.promptNewName(t('copy'), `${preset.name} (2)`);
                     if (!newName) {
@@ -176,12 +184,26 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
 
     async refresh() {
         await this.renderPresetsList();
-        this.switchPreset(this.currentPresetId);
+        this.$presets.value = this.currentPresetId!.toString();
+        BxEvent.dispatch(this.$presets, 'input', { manualTrigger: true });
     }
 
     async onBeforeMount(configs:{ id?: number }={}) {
-        if (configs?.id) {
+        await this.renderPresetsList();
+
+        let valid = false;
+        if (typeof configs?.id === 'number') {
+            if (configs.id in this.allPresets.data) {
                 this.currentPresetId = configs.id;
+                this.activatedPresetId = configs.id;
+                valid = true;
+            }
+        }
+
+        // Invalid selected ID => get default ID;
+        if (!valid) {
+            this.currentPresetId = this.allPresets.default[0];
+            this.activatedPresetId = null;
         }
 
         // Select first preset

src/modules/ui/dialog/profile-manger/controller-customizations-manager-dialog.ts

@@ -0,0 +1,371 @@
+import type { ControllerCustomizationPresetData, ControllerCustomizationPresetRecord } from "@/types/presets";
+import { BaseProfileManagerDialog } from "./base-profile-manager-dialog";
+import { ControllerCustomizationsTable } from "@/utils/local-db/controller-customizations-table";
+import { t } from "@/utils/translation";
+import { GamepadKey, GamepadKeyName } from "@/enums/gamepad";
+import { ButtonStyle, CE, createButton, createSettingRow } from "@/utils/html";
+import { BxSelectElement } from "@/web-components/bx-select";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { BxEvent } from "@/utils/bx-event";
+import { deepClone } from "@/utils/global";
+import { StreamSettings } from "@/utils/stream-settings";
+import { BxDualNumberStepper } from "@/web-components/bx-dual-number-stepper";
+import { NavigationDirection, type NavigationElement } from "../navigation-dialog";
+import { setNearby } from "@/utils/navigation-utils";
+import type { DualNumberStepperParams } from "@/types/setting-definition";
+import { BxNumberStepper } from "@/web-components/bx-number-stepper";
+
+export class ControllerCustomizationsManagerDialog extends BaseProfileManagerDialog<ControllerCustomizationPresetRecord> {
+    private static instance: ControllerCustomizationsManagerDialog;
+    public static getInstance = () => ControllerCustomizationsManagerDialog.instance ?? (ControllerCustomizationsManagerDialog.instance = new ControllerCustomizationsManagerDialog(t('controller-customization')));
+
+    declare protected $content: HTMLElement;
+    private $vibrationIntensity!: BxNumberStepper;
+    private $leftTriggerRange!: BxDualNumberStepper;
+    private $rightTriggerRange!: BxDualNumberStepper;
+    private $leftStickDeadzone!: BxDualNumberStepper;
+    private $rightStickDeadzone!: BxDualNumberStepper;
+    private $btnDetect!: HTMLButtonElement;
+
+    protected BLANK_PRESET_DATA = {
+        mapping: {},
+        settings: {
+            leftTriggerRange: [0, 100],
+            rightTriggerRange: [0, 100],
+            leftStickDeadzone: [0, 100],
+            rightStickDeadzone: [0, 100],
+
+            vibrationIntensity: 100,
+        },
+    } satisfies ControllerCustomizationPresetData;
+
+    private selectsMap: Partial<Record<GamepadKey, HTMLSelectElement>> = {};
+    private selectsOrder: GamepadKey[] = [];
+
+    private isDetectingButton: boolean = false;
+    private detectIntervalId: number | null = null;
+
+    private readonly BUTTONS_ORDER = [
+        GamepadKey.A, GamepadKey.B,
+        GamepadKey.X, GamepadKey.Y,
+
+        GamepadKey.UP, GamepadKey.RIGHT,
+        GamepadKey.DOWN, GamepadKey.LEFT,
+
+        GamepadKey.LB, GamepadKey.RB,
+        GamepadKey.LT, GamepadKey.RT,
+
+        GamepadKey.SELECT, GamepadKey.START,
+
+        GamepadKey.L3, GamepadKey.R3,
+        GamepadKey.LS, GamepadKey.RS,
+
+        GamepadKey.SHARE,
+    ];
+
+    constructor(title: string) {
+        super(title, ControllerCustomizationsTable.getInstance());
+        this.render();
+    }
+
+    private render() {
+        const isControllerFriendly = getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
+        const $rows = CE('div', { class: 'bx-buttons-grid' });
+
+        const $baseSelect = CE('select', { class: 'bx-full-width' },
+            CE('option', { value: '' }, '---'),
+            CE('option', { value: 'false', _dataset: { label: '🚫' } }, isControllerFriendly ? '🚫' : t('off')),
+        );
+        const $baseButtonSelect = $baseSelect.cloneNode(true);
+        const $baseStickSelect = $baseSelect.cloneNode(true);
+
+        const onButtonChanged = (e: Event) => {
+            // Update preset
+            if (!(e as any).ignoreOnChange) {
+                this.updatePreset();
+            }
+        };
+
+        const boundUpdatePreset = this.updatePreset.bind(this);
+
+        for (const gamepadKey of this.BUTTONS_ORDER) {
+            if (gamepadKey === GamepadKey.SHARE) {
+                continue;
+            }
+
+            const name = GamepadKeyName[gamepadKey][isControllerFriendly ? 1 : 0];
+            const $target = (gamepadKey === GamepadKey.LS || gamepadKey === GamepadKey.RS) ? $baseStickSelect : $baseButtonSelect;
+            $target.appendChild(CE('option', {
+                value: gamepadKey,
+                _dataset: { label: GamepadKeyName[gamepadKey][1] },
+            }, name));
+        }
+
+        for (const gamepadKey of this.BUTTONS_ORDER) {
+            const [buttonName, buttonPrompt] = GamepadKeyName[gamepadKey];
+            const $sourceSelect = (gamepadKey === GamepadKey.LS || gamepadKey === GamepadKey.RS) ? $baseStickSelect : $baseButtonSelect;
+
+            // Remove current button from selection
+            const $clonedSelect = $sourceSelect.cloneNode(true) as HTMLSelectElement;
+            $clonedSelect.querySelector(`option[value="${gamepadKey}"]`)?.remove();
+
+            const $select = BxSelectElement.create($clonedSelect);
+            $select.dataset.index = gamepadKey.toString();
+            $select.addEventListener('input', onButtonChanged);
+
+            this.selectsMap[gamepadKey] = $select;
+            this.selectsOrder.push(gamepadKey);
+
+            const $row = CE('div', {
+                class: 'bx-controller-key-row',
+                _nearby: { orientation: 'horizontal' },
+            },
+                CE('label', { title: buttonName }, buttonPrompt),
+                $select,
+            );
+
+            $rows.append($row);
+        }
+
+        // Map nearby elenemts for controller-friendly UI
+        if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+            for (let i = 0; i < this.selectsOrder.length; i++) {
+                const $select = this.selectsMap[this.selectsOrder[i] as unknown as GamepadKey] as NavigationElement;
+                const directions = {
+                    [NavigationDirection.UP]: i - 2,
+                    [NavigationDirection.DOWN]: i + 2,
+                    [NavigationDirection.LEFT]: i - 1,
+                    [NavigationDirection.RIGHT]: i + 1,
+                };
+
+                for (const dir in directions) {
+                    const idx = directions[dir as unknown as NavigationDirection];
+                    if (typeof this.selectsOrder[idx] === 'undefined') {
+                        continue;
+                    }
+
+                    const $targetSelect = this.selectsMap[this.selectsOrder[idx] as unknown as GamepadKey];
+                    setNearby($select, {
+                        [dir]: $targetSelect,
+                    });
+                }
+            }
+        }
+
+        const params: DualNumberStepperParams = {
+            min: 0,
+            minDiff: 1,
+            max: 100,
+
+            steps: 1,
+        };
+        this.$content = CE('div', { class: 'bx-controller-customizations-container' },
+            // Detect button
+            this.$btnDetect = createButton({
+                label: t('detect-controller-button'),
+                classes: ['bx-btn-detect'],
+                style: ButtonStyle.NORMAL_CASE | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
+                onClick: () => {
+                    this.startDetectingButton();
+                },
+            }),
+
+            // Mapping
+            $rows,
+
+            // Vibration intensity
+            createSettingRow(t('vibration-intensity'),
+                this.$vibrationIntensity = BxNumberStepper.create('controller_vibration_intensity', 50, 0, 100, {
+                    steps: 10,
+                    suffix: '%',
+                    exactTicks: 20,
+                    customTextValue: (value: any) => {
+                        value = parseInt(value);
+                        return value === 0 ? t('off') : value + '%';
+                    },
+                }, boundUpdatePreset),
+            ),
+
+            // Range settings
+            createSettingRow(t('left-trigger-range'),
+                this.$leftTriggerRange = BxDualNumberStepper.create('left-trigger-range', this.BLANK_PRESET_DATA.settings.leftTriggerRange, params, boundUpdatePreset),
+            ),
+
+            createSettingRow(t('right-trigger-range'),
+                this.$rightTriggerRange = BxDualNumberStepper.create('right-trigger-range', this.BLANK_PRESET_DATA.settings.rightTriggerRange, params, boundUpdatePreset),
+            ),
+
+            createSettingRow(t('left-stick-deadzone'),
+                this.$leftStickDeadzone = BxDualNumberStepper.create('left-stick-deadzone', this.BLANK_PRESET_DATA.settings.leftStickDeadzone, params, boundUpdatePreset),
+            ),
+
+            createSettingRow(t('right-stick-deadzone'),
+                this.$rightStickDeadzone = BxDualNumberStepper.create('right-stick-deadzone', this.BLANK_PRESET_DATA.settings.rightStickDeadzone, params, boundUpdatePreset),
+            ),
+        );
+    }
+
+    private startDetectingButton() {
+        this.isDetectingButton = true;
+
+        const { $btnDetect } = this;
+        $btnDetect.classList.add('bx-monospaced', 'bx-blink-me');
+        $btnDetect.disabled = true;
+
+        let count = 4;
+        $btnDetect.textContent = `[${count}] ${t('press-any-button')}`;
+
+        this.detectIntervalId = window.setInterval(() => {
+            count -= 1;
+            if (count === 0) {
+                this.stopDetectingButton();
+
+                // Re-focus the Detect button
+                $btnDetect.focus();
+                return;
+            }
+
+            $btnDetect.textContent = `[${count}] ${t('press-any-button')}`;
+        }, 1000);
+    }
+
+    private stopDetectingButton() {
+        const { $btnDetect } = this;
+        $btnDetect.classList.remove('bx-monospaced', 'bx-blink-me');
+        $btnDetect.textContent = t('detect-controller-button');
+        $btnDetect.disabled = false;
+
+        this.isDetectingButton = false;
+        this.detectIntervalId && window.clearInterval(this.detectIntervalId);
+        this.detectIntervalId = null;
+    }
+
+    async onBeforeMount() {
+        this.stopDetectingButton();
+        super.onBeforeMount(...arguments);
+    }
+
+    onBeforeUnmount(): void {
+        this.stopDetectingButton();
+        StreamSettings.refreshControllerSettings();
+        super.onBeforeUnmount();
+    }
+
+    handleGamepad(button: GamepadKey): boolean {
+        if (!this.isDetectingButton) {
+            return super.handleGamepad(button);
+        }
+
+        if (button in this.BUTTONS_ORDER) {
+            this.stopDetectingButton();
+
+            const $select = this.selectsMap[button]!;
+            const $label = $select.previousElementSibling!;
+            $label.addEventListener('animationend', () => {
+                $label.classList.remove('bx-horizontal-shaking');
+            }, { once: true });
+            $label.classList.add('bx-horizontal-shaking');
+
+            // Focus select
+            if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                this.dialogManager.focus($select);
+            }
+        }
+
+        return true;
+    }
+
+    protected switchPreset(id: number): void {
+        const preset = this.allPresets.data[id];
+        if (!preset) {
+            this.currentPresetId = 0;
+            return;
+        }
+
+        const {
+            $btnDetect,
+            $vibrationIntensity,
+            $leftStickDeadzone,
+            $rightStickDeadzone,
+            $leftTriggerRange,
+            $rightTriggerRange,
+            selectsMap,
+        } = this;
+
+        const presetData = preset.data;
+        this.currentPresetId = id;
+        const isDefaultPreset = id <= 0;
+        this.updateButtonStates();
+
+        // Show/hide Detect button
+        $btnDetect.classList.toggle('bx-gone', isDefaultPreset);
+
+        // Set mappings
+        let buttonIndex: unknown;
+        for (buttonIndex in selectsMap) {
+            buttonIndex = buttonIndex as GamepadKey;
+
+            const $select = selectsMap[buttonIndex as GamepadKey];
+            if (!$select) {
+                continue;
+            }
+
+            const mappedButton = presetData.mapping[buttonIndex as GamepadKey];
+
+            $select.value = typeof mappedButton === 'undefined' ? '' : mappedButton.toString();
+            $select.disabled = isDefaultPreset;
+
+            BxEvent.dispatch($select, 'input', {
+                ignoreOnChange: true,
+                manualTrigger: true,
+            });
+        }
+
+        // Add missing settings
+        presetData.settings = Object.assign(this.BLANK_PRESET_DATA.settings, presetData.settings);
+
+        // Vibration intensity
+        $vibrationIntensity.value = presetData.settings.vibrationIntensity.toString();
+        $vibrationIntensity.dataset.disabled = isDefaultPreset.toString();
+
+        // Set extra settings
+        $leftStickDeadzone.dataset.disabled = $rightStickDeadzone.dataset.disabled = $leftTriggerRange.dataset.disabled = $rightTriggerRange.dataset.disabled = isDefaultPreset.toString();
+        $leftStickDeadzone.setValue(presetData.settings.leftStickDeadzone);
+        $rightStickDeadzone.setValue(presetData.settings.rightStickDeadzone);
+        $leftTriggerRange.setValue(presetData.settings.leftTriggerRange);
+        $rightTriggerRange.setValue(presetData.settings.rightTriggerRange);
+    }
+
+    private updatePreset() {
+        const newData: ControllerCustomizationPresetData = deepClone(this.BLANK_PRESET_DATA);
+
+        // Set mappings
+        let gamepadKey: unknown;
+        for (gamepadKey in this.selectsMap) {
+            const $select = this.selectsMap[gamepadKey as GamepadKey]!;
+            const value = $select.value;
+            if (!value) {
+                continue;
+            }
+
+            const mapTo = (value === 'false') ? false : parseInt(value);
+            newData.mapping[gamepadKey as GamepadKey] = mapTo;
+        }
+
+        // Set extra settings
+        Object.assign(newData.settings, {
+            vibrationIntensity: parseInt(this.$vibrationIntensity.value),
+
+            leftStickDeadzone: this.$leftStickDeadzone.getValue(),
+            rightStickDeadzone: this.$rightStickDeadzone.getValue(),
+            leftTriggerRange: this.$leftTriggerRange.getValue(),
+            rightTriggerRange: this.$rightTriggerRange.getValue(),
+        } satisfies typeof newData.settings);
+
+        // Update preset
+        const preset = this.allPresets.data[this.currentPresetId!];
+        preset.data = newData;
+        this.presetsDb.updatePreset(preset);
+    }
+}

src/modules/ui/dialog/profile-manger/controller-shortcuts-manager-dialog.ts

@@ -2,12 +2,10 @@ import { t } from "@/utils/translation";
 import { BaseProfileManagerDialog } from "./base-profile-manager-dialog";
 import { CE } from "@/utils/html";
 import { GamepadKey, GamepadKeyName } from "@/enums/gamepad";
-import { PrefKey } from "@/enums/pref-keys";
 import { PrompFont } from "@/enums/prompt-font";
 import { ShortcutAction } from "@/enums/shortcut-actions";
 import { deepClone } from "@/utils/global";
 import { setNearby } from "@/utils/navigation-utils";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
 import { BxSelectElement } from "@/web-components/bx-select";
 import type { ControllerShortcutPresetData, ControllerShortcutPresetRecord } from "@/types/presets";
 import { ControllerShortcutsTable } from "@/utils/local-db/controller-shortcuts-table";
@@ -21,7 +19,7 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
     // private readonly LOG_TAG = 'ControllerShortcutsManagerDialog';
 
     protected $content: HTMLElement;
-    private selectActions: Partial<Record<GamepadKey, [HTMLSelectElement, HTMLSelectElement | null]>> = {};
+    private selectActions: Partial<Record<GamepadKey, HTMLSelectElement>> = {};
 
     protected readonly BLANK_PRESET_DATA = {
         mapping: {},
@@ -39,19 +37,18 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
     constructor(title: string) {
         super(title, ControllerShortcutsTable.getInstance());
 
-        const PREF_CONTROLLER_FRIENDLY_UI = getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
+        const $baseSelect = CE('select', {
+            class: 'bx-full-width',
+            autocomplete: 'off',
+        }, CE('option', { value: '' }, '---'));
 
-        // Read actions from localStorage
-        // ControllerShortcut.ACTIONS = ControllerShortcut.getActionsFromStorage();
-
-        const $baseSelect = CE<HTMLSelectElement>('select', { autocomplete: 'off' }, CE('option', { value: '' }, '---'));
         for (const groupLabel in SHORTCUT_ACTIONS) {
             const items = SHORTCUT_ACTIONS[groupLabel];
             if (!items) {
                 continue;
             }
 
-            const $optGroup = CE<HTMLOptGroupElement>('optgroup', { label: groupLabel });
+            const $optGroup = CE('optgroup', { label: groupLabel });
             for (const action in items) {
                 const crumbs = items[action as keyof typeof items];
                 if (!crumbs) {
@@ -59,7 +56,7 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
                 }
 
                 const label = crumbs.join(' ❯ ');
-                const $option = CE<HTMLOptionElement>('option', { value: action }, label);
+                const $option = CE('option', { value: action }, label);
                 $optGroup.appendChild($option);
             }
 
@@ -71,23 +68,6 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
         });
 
         const onActionChanged = (e: Event) => {
-            const $target = e.target as HTMLSelectElement;
-
-            // const profile = $selectProfile.value;
-            // const button: unknown = $target.dataset.button;
-            const action = $target.value as ShortcutAction;
-
-            if (!PREF_CONTROLLER_FRIENDLY_UI) {
-                const $fakeSelect = $target.previousElementSibling! as HTMLSelectElement;
-                let fakeText = '---';
-                if (action) {
-                    const $selectedOption =  $target.options[$target.selectedIndex];
-                    const $optGroup = $selectedOption.parentElement as HTMLOptGroupElement;
-                    fakeText = $optGroup.label + ' ❯ ' + $selectedOption.text;
-                }
-                ($fakeSelect.firstElementChild as HTMLOptionElement).text = fakeText;
-            }
-
             // Update preset
             if (!(e as any).ignoreOnChange) {
                 this.updatePreset();
@@ -110,30 +90,18 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
                 },
             });
             const $label = CE('label', { class: 'bx-prompt' }, `${PrompFont.HOME}${prompt}`);
-            const $div = CE('div', { class: 'bx-shortcut-actions' });
-
-            let $fakeSelect: HTMLSelectElement | null = null;
-            if (!PREF_CONTROLLER_FRIENDLY_UI) {
-                $fakeSelect = CE<HTMLSelectElement>('select', { autocomplete: 'off' },
-                    CE('option', {}, '---'),
-                );
-
-                $div.appendChild($fakeSelect);
-            }
 
             const $select = BxSelectElement.create($baseSelect.cloneNode(true) as HTMLSelectElement);
             $select.dataset.button = button.toString();
-            $select.classList.add('bx-full-width');
             $select.addEventListener('input', onActionChanged);
 
-            this.selectActions[button] = [$select, $fakeSelect];
+            this.selectActions[button] = $select;
 
-            $div.appendChild($select);
             setNearby($row, {
                 focus: $select,
             });
 
-            $row.append($label, $div);
+            $row.append($label, $select);
             fragment.appendChild($row);
         }
 
@@ -156,10 +124,9 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
         // Reset selects' values
         let button: unknown;
         for (button in this.selectActions) {
-            const [$select, $fakeSelect] = this.selectActions[button as GamepadKey]!;
+            const $select = this.selectActions[button as GamepadKey]!;
             $select.value = actions.mapping[button as GamepadKey] || '';
             $select.disabled = isDefaultPreset;
-            $fakeSelect && ($fakeSelect.disabled = isDefaultPreset);
 
             BxEvent.dispatch($select, 'input', {
                 ignoreOnChange: true,
@@ -175,8 +142,7 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
 
         let button: unknown;
         for (button in this.selectActions) {
-            const [$select, _] = this.selectActions[button as GamepadKey]!;
+            const $select = this.selectActions[button as GamepadKey]!;
-
             const action = $select.value;
             if (!action) {
                 continue;
@@ -185,10 +151,13 @@ export class ControllerShortcutsManagerDialog extends BaseProfileManagerDialog<C
             newData.mapping[button as GamepadKey] = action as ShortcutAction;
         }
 
-        const preset = this.allPresets.data[this.currentPresetId];
+        const preset = this.allPresets.data[this.currentPresetId!];
         preset.data = newData;
         this.presetsDb.updatePreset(preset);
+    }
 
+    onBeforeUnmount() {
         StreamSettings.refreshControllerSettings();
+        super.onBeforeUnmount();
     }
 }

src/modules/ui/dialog/profile-manger/keyboard-shortcuts-manager-dialog.ts

@@ -37,7 +37,7 @@ export class KeyboardShortcutsManagerDialog extends BaseProfileManagerDialog<Key
                 continue;
             }
 
-            const $fieldSet = CE<HTMLFieldSetElement>('fieldset', {}, CE('legend', {}, groupLabel));
+            const $fieldSet = CE('fieldset', {}, CE('legend', {}, groupLabel));
             for (const action in items) {
                 const crumbs = items[action as keyof typeof items];
                 if (!crumbs) {
@@ -144,15 +144,19 @@ export class KeyboardShortcutsManagerDialog extends BaseProfileManagerDialog<Key
             }
         }
 
-        const oldPreset = this.allPresets.data[this.currentPresetId];
+        const oldPreset = this.allPresets.data[this.currentPresetId!];
         const newPreset = {
-            id: this.currentPresetId,
+            id: this.currentPresetId!,
             name: oldPreset.name,
             data: presetData,
         };
         this.presetsDb.updatePreset(newPreset);
 
-        this.allPresets.data[this.currentPresetId] = newPreset;
+        this.allPresets.data[this.currentPresetId!] = newPreset;
+    }
+
+    onBeforeUnmount(): void {
         StreamSettings.refreshKeyboardShortcuts();
+        super.onBeforeUnmount();
     }
 }

src/modules/ui/dialog/profile-manger/mkb-mapping-manager-dialog.ts

@@ -121,9 +121,7 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
 
             const $keyRow = CE('div', {
                 class: 'bx-mkb-key-row',
-                _nearby: {
+                _nearby: { orientation: 'horizontal' },
-                    orientation: 'horizontal',
-                },
             },
                 CE('label', { title: buttonName }, buttonPrompt),
                 $fragment,
@@ -244,15 +242,19 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
         mouse.sensitivityY = parseInt(this.$mouseSensitivityY.value);
         mouse.deadzoneCounterweight = parseInt(this.$mouseDeadzone.value);
 
-        const oldPreset = this.allPresets.data[this.currentPresetId];
+        const oldPreset = this.allPresets.data[this.currentPresetId!];
         const newPreset = {
-            id: this.currentPresetId,
+            id: this.currentPresetId!,
             name: oldPreset.name,
             data: presetData,
         };
         this.presetsDb.updatePreset(newPreset);
 
-        this.allPresets.data[this.currentPresetId] = newPreset;
+        this.allPresets.data[this.currentPresetId!] = newPreset;
+    }
+
+    onBeforeUnmount() {
         StreamSettings.refreshMkbSettings();
+        super.onBeforeUnmount();
     }
 }

src/modules/ui/dialog/remote-play-dialog.ts

@@ -37,10 +37,10 @@ export class RemotePlayDialog extends NavigationDialog {
         const $settingNote = CE('p', {});
 
         const currentResolution = getPref(PrefKey.REMOTE_PLAY_STREAM_RESOLUTION);
-        let $resolutions : HTMLSelectElement | NavigationElement = CE<HTMLSelectElement>('select', {},
+        let $resolutions : HTMLSelectElement | NavigationElement = CE('select', {},
             CE('option', { value: StreamResolution.DIM_720P }, '720p'),
             CE('option', { value: StreamResolution.DIM_1080P }, '1080p'),
-            // CE('option', { value: StreamResolution.DIM_1080P_HQ }, `1080p (HQ) ${t('experimental')}`),
+            // CE('option', { value: StreamResolution.DIM_1080P_HQ }, `1080p (HQ)`),
         );
 
         $resolutions = BxSelectElement.create($resolutions as HTMLSelectElement);

src/modules/ui/dialog/settings-dialog.ts

@@ -1,7 +1,7 @@
 import { isFullVersion } from "@macros/build" with { type: "macro" };
 
 import { limitVideoPlayerFps, onChangeVideoPlayerType, updateVideoPlayer } from "@/modules/stream/stream-settings-utils";
-import { ButtonStyle, CE, createButton, createSettingRow, createSvgIcon, escapeCssSelector, type BxButtonOptions } from "@/utils/html";
+import { ButtonStyle, calculateSelectBoxes, CE, createButton, createSettingRow, createSvgIcon, escapeCssSelector, type BxButtonOptions } from "@/utils/html";
 import { NavigationDialog, NavigationDirection } from "./navigation-dialog";
 import { SoundShortcut } from "@/modules/shortcuts/sound-shortcut";
 import { StreamStats } from "@/modules/stream/stream-stats";
@@ -37,7 +37,7 @@ type SettingTabSectionItem = Partial<{
     pref: PrefKey;
     multiLines: boolean;
     label: string;
-    note: string | (() => HTMLElement);
+    note: string | (() => HTMLElement) | HTMLElement;
     experimental: string;
     content: HTMLElement | (() => HTMLElement);
     options: { [key: string]: string };
@@ -56,7 +56,7 @@ type SettingTabSection = {
         | 'stats';
     label?: string;
     unsupported?: boolean;
-    unsupportedNote?: string | Text | null;
+    unsupportedNote?: HTMLElement | string | Text | null;
     helpUrl?: string;
     content?: HTMLElement;
     lazyContent?: boolean | (() => HTMLElement);
@@ -86,7 +86,7 @@ export class SettingsDialog extends NavigationDialog {
     private $btnReload!: HTMLElement;
     private $btnGlobalReload!: HTMLButtonElement;
     private $noteGlobalReload!: HTMLElement;
-    private $btnSuggestion!: HTMLButtonElement;
+    private $btnSuggestion!: HTMLDivElement;
 
     private renderFullSettings: boolean;
 
@@ -106,7 +106,7 @@ export class SettingsDialog extends NavigationDialog {
         items: [
             // Top buttons
             ($parent) => {
-                const PREF_LATEST_VERSION = getPref<VersionLatest>(PrefKey.VERSION_LATEST);
+                const PREF_LATEST_VERSION = getPref(PrefKey.VERSION_LATEST);
                 const topButtons = [];
 
                 // "New version available" button
@@ -322,7 +322,7 @@ export class SettingsDialog extends NavigationDialog {
                 onCreated: (setting, $control) => {
                     const defaultUserAgent = window.navigator.orgUserAgent || window.navigator.userAgent;
 
-                    const $inpCustomUserAgent = CE<HTMLInputElement>('input', {
+                    const $inpCustomUserAgent = CE('input', {
                         type: 'text',
                         placeholder: defaultUserAgent,
                         autocomplete: 'off',
@@ -494,20 +494,7 @@ export class SettingsDialog extends NavigationDialog {
         }],
     }];
 
-    private readonly TAB_CONTROLLER_ITEMS: Array<SettingTabSection | HTMLElement | false> = [isFullVersion() && STATES.browser.capabilities.deviceVibration && {
+    private readonly TAB_CONTROLLER_ITEMS: Array<SettingTabSection | HTMLElement | false> = [{
-        group: 'device',
-        label: t('device'),
-        items: [{
-            pref: PrefKey.DEVICE_VIBRATION_MODE,
-            multiLines: true,
-            unsupported: !STATES.browser.capabilities.deviceVibration,
-            onChange: () => StreamSettings.refreshControllerSettings(),
-        }, {
-            pref: PrefKey.DEVICE_VIBRATION_INTENSITY,
-            unsupported: !STATES.browser.capabilities.deviceVibration,
-            onChange: () => StreamSettings.refreshControllerSettings(),
-        }],
-    }, {
         group: 'controller',
         label: t('controller'),
         helpUrl: 'https://better-xcloud.github.io/ingame-features/#controller',
@@ -576,6 +563,19 @@ export class SettingsDialog extends NavigationDialog {
                 });
             },
         }],
+    }, isFullVersion() && STATES.browser.capabilities.deviceVibration && {
+        group: 'device',
+        label: t('device'),
+        items: [{
+            pref: PrefKey.DEVICE_VIBRATION_MODE,
+            multiLines: true,
+            unsupported: !STATES.browser.capabilities.deviceVibration,
+            onChange: () => StreamSettings.refreshControllerSettings(),
+        }, {
+            pref: PrefKey.DEVICE_VIBRATION_INTENSITY,
+            unsupported: !STATES.browser.capabilities.deviceVibration,
+            onChange: () => StreamSettings.refreshControllerSettings(),
+        }],
     }];
 
     private readonly TAB_MKB_ITEMS: (() => Array<SettingTabSection | false>) = () => [
@@ -764,9 +764,7 @@ export class SettingsDialog extends NavigationDialog {
                 $child.classList.remove('bx-gone');
 
                 // Calculate size of controller-friendly select boxes
-                if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                calculateSelectBoxes($child as HTMLElement);
-                    this.dialogManager.calculateSelectBoxes($child as HTMLElement);
-                }
             } else {
                 // Hide tab content
                 $child.classList.add('bx-gone');
@@ -804,7 +802,7 @@ export class SettingsDialog extends NavigationDialog {
     }
 
     private renderServerSetting(setting: SettingTabSectionItem): HTMLElement {
-        let selectedValue = getPref<ServerRegionName>(PrefKey.SERVER_REGION);
+        let selectedValue = getPref(PrefKey.SERVER_REGION);
 
         const continents: Record<ServerContinent, {
             label: string,
@@ -830,9 +828,8 @@ export class SettingsDialog extends NavigationDialog {
             },
         };
 
-        const $control = CE<HTMLSelectElement>('select', {
+        const $control = CE('select', {
             id: `bx_setting_${escapeCssSelector(setting.pref!)}`,
-            title: setting.label,
             tabindex: 0,
         });
         $control.name = $control.id;
@@ -859,7 +856,7 @@ export class SettingsDialog extends NavigationDialog {
 
             setting.options[value] = label;
 
-            const $option = CE<HTMLOptionElement>('option', { value }, label);
+            const $option = CE('option', { value }, label);
             const continent = continents[region.contintent];
             if (!continent.children) {
                 continent.children = [];

src/modules/ui/dialog/settings/controller-extra.ts

@@ -1,14 +1,16 @@
 import { BxEvent } from "@/utils/bx-event";
 import { getUniqueGamepadNames } from "@/utils/gamepad";
-import { CE, removeChildElements, createButton, ButtonStyle, createSettingRow, renderPresetsList } from "@/utils/html";
+import { CE, removeChildElements, createButton, ButtonStyle, createSettingRow, renderPresetsList, calculateSelectBoxes } from "@/utils/html";
 import { t } from "@/utils/translation";
 import { BxSelectElement } from "@/web-components/bx-select";
 import { ControllerShortcutsManagerDialog } from "../profile-manger/controller-shortcuts-manager-dialog";
 import type { SettingsDialog } from "../settings-dialog";
 import { ControllerShortcutsTable } from "@/utils/local-db/controller-shortcuts-table";
-import { BxNumberStepper } from "@/web-components/bx-number-stepper";
 import { ControllerSettingsTable } from "@/utils/local-db/controller-settings-table";
 import { StreamSettings } from "@/utils/stream-settings";
+import { ControllerCustomizationsTable } from "@/utils/local-db/controller-customizations-table";
+import { ControllerCustomizationsManagerDialog } from "../profile-manger/controller-customizations-manager-dialog";
+import { BxIcon } from "@/utils/bx-icon";
 
 export class ControllerExtraSettings extends HTMLElement {
     currentControllerId!: string;
@@ -16,7 +18,7 @@ export class ControllerExtraSettings extends HTMLElement {
 
     $selectControllers!: BxSelectElement;
     $selectShortcuts!: BxSelectElement;
-    $vibrationIntensity!: BxNumberStepper;
+    $selectCustomization!: BxSelectElement;
 
     updateLayout!: () => void;
     switchController!: (id: string) => void;
@@ -24,16 +26,17 @@ export class ControllerExtraSettings extends HTMLElement {
     saveSettings!: () => void;
 
     static renderSettings(this: SettingsDialog): HTMLElement {
-        const $container = CE<ControllerExtraSettings>('label', {
+        const $container = CE('label', {
             class: 'bx-settings-row bx-controller-extra-settings',
-        });
+        }) as unknown as ControllerExtraSettings;
 
         $container.updateLayout = ControllerExtraSettings.updateLayout.bind($container);
         $container.switchController = ControllerExtraSettings.switchController.bind($container);
         $container.getCurrentControllerId = ControllerExtraSettings.getCurrentControllerId.bind($container);
         $container.saveSettings = ControllerExtraSettings.saveSettings.bind($container);
 
-        const $selectControllers = BxSelectElement.create(CE<HTMLSelectElement>('select', {
+        const $selectControllers = BxSelectElement.create(CE('select', {
+            class: 'bx-full-width',
             autocomplete: 'off',
             _on: {
                 input: (e: Event) => {
@@ -41,24 +44,16 @@ export class ControllerExtraSettings extends HTMLElement {
                 },
             },
         }));
-        $selectControllers.classList.add('bx-full-width');
 
-        const $selectShortcuts = BxSelectElement.create(CE<HTMLSelectElement>('select', {
+        const $selectShortcuts = BxSelectElement.create(CE('select', {
             autocomplete: 'off',
-            _on: {
+            _on: { input: $container.saveSettings },
-                input: $container.saveSettings,
-            },
         }));
 
-        const $vibrationIntensity = BxNumberStepper.create('controller_vibration_intensity', 50, 0, 100, {
+        const $selectCustomization = BxSelectElement.create(CE('select', {
-            steps: 10,
+            autocomplete: 'off',
-            suffix: '%',
+            _on: { input: $container.saveSettings },
-            exactTicks: 20,
+        }));
-            customTextValue: (value: any) => {
-                value = parseInt(value);
-                return value === 0 ? t('off') : value + '%';
-            },
-        }, $container.saveSettings);
 
         $container.append(
             CE('span', {}, t('no-controllers-connected')),
@@ -67,17 +62,16 @@ export class ControllerExtraSettings extends HTMLElement {
 
                 CE('div', { class: 'bx-sub-content-box' },
                     createSettingRow(
-                        t('controller-shortcuts-in-game'),
+                        t('in-game-controller-shortcuts'),
                         CE('div', {
                             class: 'bx-preset-row',
-                            _nearby: {
+                            _nearby: { orientation: 'horizontal' },
-                                orientation: 'horizontal',
-                            },
                         },
                             $selectShortcuts,
                             createButton({
-                                label: t('manage'),
+                                title: t('manage'),
-                                style: ButtonStyle.FOCUSABLE,
+                                icon: BxIcon.MANAGE,
+                                style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY | ButtonStyle.AUTO_HEIGHT,
                                 onClick: () => ControllerShortcutsManagerDialog.getInstance().show({
                                     id: parseInt($container.$selectShortcuts.value),
                                 }),
@@ -87,8 +81,25 @@ export class ControllerExtraSettings extends HTMLElement {
                     ),
 
                     createSettingRow(
-                        t('vibration-intensity'),
+                        t('in-game-controller-customization'),
-                        $vibrationIntensity,
+                        CE('div', {
+                            class: 'bx-preset-row',
+                            _nearby: { orientation: 'horizontal' },
+                        },
+                            $selectCustomization,
+                            createButton({
+                                title: t('manage'),
+                                icon: BxIcon.MANAGE,
+                                style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY | ButtonStyle.AUTO_HEIGHT,
+                                onClick: () => ControllerCustomizationsManagerDialog.getInstance().show({
+                                    id: $container.$selectCustomization.value ? parseInt($container.$selectCustomization.value) : null,
+                                }),
+                            }),
+                        ),
+                        {
+                            multiLines: true,
+                            $note: CE('div', { class: 'bx-settings-dialog-note' }, 'ⓘ ' + t('slightly-increase-input-latency')),
+                        },
                     ),
                 ),
             ),
@@ -96,7 +107,7 @@ export class ControllerExtraSettings extends HTMLElement {
 
         $container.$selectControllers = $selectControllers;
         $container.$selectShortcuts = $selectShortcuts;
-        $container.$vibrationIntensity = $vibrationIntensity;
+        $container.$selectCustomization = $selectCustomization;
 
         $container.updateLayout();
 
@@ -128,7 +139,7 @@ export class ControllerExtraSettings extends HTMLElement {
 
         // Render controller list
         for (const name of this.controllerIds) {
-            const $option = CE<HTMLOptionElement>('option', { value: name }, name);
+            const $option = CE('option', { value: name }, name);
             $fragment.appendChild($option);
         }
 
@@ -138,12 +149,17 @@ export class ControllerExtraSettings extends HTMLElement {
         const allShortcutPresets = await ControllerShortcutsTable.getInstance().getPresets();
         renderPresetsList(this.$selectShortcuts, allShortcutPresets, null, { addOffValue: true });
 
+        // Render customization presets
+        const allCustomizationPresets = await ControllerCustomizationsTable.getInstance().getPresets();
+        renderPresetsList(this.$selectCustomization, allCustomizationPresets, null, { addOffValue: true });
+
         for (const name of this.controllerIds) {
-            const $option = CE<HTMLOptionElement>('option', { value: name }, name);
+            const $option = CE('option', { value: name }, name);
             $fragment.appendChild($option);
         }
 
         BxEvent.dispatch(this.$selectControllers, 'input');
+        calculateSelectBoxes(this);
     }
 
     private static async switchController(this: ControllerExtraSettings, id: string) {
@@ -156,7 +172,7 @@ export class ControllerExtraSettings extends HTMLElement {
 
         // Update UI
         this.$selectShortcuts.value = controllerSettings.shortcutPresetId.toString();
-        this.$vibrationIntensity.value = controllerSettings.vibrationIntensity.toString();
+        this.$selectCustomization.value = controllerSettings.customizationPresetId.toString();
     }
 
     private static getCurrentControllerId(this: ControllerExtraSettings) {
@@ -190,7 +206,7 @@ export class ControllerExtraSettings extends HTMLElement {
             id: this.currentControllerId,
             data: {
                 shortcutPresetId: parseInt(this.$selectShortcuts.value),
-                vibrationIntensity: parseInt(this.$vibrationIntensity.value),
+                customizationPresetId: parseInt(this.$selectCustomization.value),
             },
         };
 

src/modules/ui/dialog/settings/mkb-extra.ts

@@ -12,6 +12,7 @@ import { KeyboardShortcutsTable } from "@/utils/local-db/keyboard-shortcuts-tabl
 import { SettingElement } from "@/utils/setting-element";
 import { STORAGE } from "@/utils/global";
 import { EmulatedMkbHandler } from "@/modules/mkb/mkb-handler";
+import { BxIcon } from "@/utils/bx-icon";
 
 export class MkbExtraSettings extends HTMLElement {
     private $mappingPresets!: BxSelectElement;
@@ -28,14 +29,14 @@ export class MkbExtraSettings extends HTMLElement {
         $container.saveMkbSettings = MkbExtraSettings.saveMkbSettings.bind($container);
         $container.saveShortcutsSettings = MkbExtraSettings.saveShortcutsSettings.bind($container);
 
-        const $mappingPresets = BxSelectElement.create(CE<HTMLSelectElement>('select', {
+        const $mappingPresets = BxSelectElement.create(CE('select', {
             autocomplete: 'off',
             _on: {
                 input: $container.saveMkbSettings,
             },
         }));
 
-        const $shortcutsPresets = BxSelectElement.create(CE<HTMLSelectElement>('select', {
+        const $shortcutsPresets = BxSelectElement.create(CE('select', {
             autocomplete: 'off',
             _on: {
                 input: $container.saveShortcutsSettings,
@@ -54,8 +55,9 @@ export class MkbExtraSettings extends HTMLElement {
                     },
                         $mappingPresets,
                         createButton({
-                            label: t('manage'),
+                            title: t('manage'),
-                            style: ButtonStyle.FOCUSABLE,
+                            icon: BxIcon.MANAGE,
+                            style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY | ButtonStyle.AUTO_HEIGHT,
                             onClick: () => MkbMappingManagerDialog.getInstance().show({
                                 id: parseInt($container.$mappingPresets.value),
                             }),
@@ -73,7 +75,7 @@ export class MkbExtraSettings extends HTMLElement {
             ] : []),
 
             createSettingRow(
-                t('keyboard-shortcuts-in-game'),
+                t('in-game-keyboard-shortcuts'),
                 CE('div', {
                     class: 'bx-preset-row',
                     _nearby: {
@@ -82,8 +84,9 @@ export class MkbExtraSettings extends HTMLElement {
                 },
                     $shortcutsPresets,
                     createButton({
-                        label: t('manage'),
+                        title: t('manage'),
-                        style: ButtonStyle.FOCUSABLE,
+                        icon: BxIcon.MANAGE,
+                        style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY | ButtonStyle.AUTO_HEIGHT,
                         onClick: () => KeyboardShortcutsManagerDialog.getInstance().show({
                             id: parseInt($container.$shortcutsPresets.value),
                         }),
@@ -108,23 +111,23 @@ export class MkbExtraSettings extends HTMLElement {
     private static async updateLayout(this: MkbExtraSettings) {
         // Render shortcut presets
         const mappingPresets = await MkbMappingPresetsTable.getInstance().getPresets();
-        renderPresetsList(this.$mappingPresets, mappingPresets, getPref<MkbPresetId>(PrefKey.MKB_P1_MAPPING_PRESET_ID));
+        renderPresetsList(this.$mappingPresets, mappingPresets, getPref(PrefKey.MKB_P1_MAPPING_PRESET_ID));
 
         // Render shortcut presets
         const shortcutsPresets = await KeyboardShortcutsTable.getInstance().getPresets();
-        renderPresetsList(this.$shortcutsPresets, shortcutsPresets, getPref<MkbPresetId>(PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID), { addOffValue: true });
+        renderPresetsList(this.$shortcutsPresets, shortcutsPresets, getPref(PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID), { addOffValue: true });
     }
 
     private static async saveMkbSettings(this: MkbExtraSettings) {
         const presetId = parseInt(this.$mappingPresets.value);
-        setPref<MkbPresetId>(PrefKey.MKB_P1_MAPPING_PRESET_ID, presetId);
+        setPref(PrefKey.MKB_P1_MAPPING_PRESET_ID, presetId);
 
         StreamSettings.refreshMkbSettings();
     }
 
     private static async saveShortcutsSettings(this: MkbExtraSettings) {
         const presetId = parseInt(this.$shortcutsPresets.value);
-        setPref<KeyboardShortcutsPresetId>(PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID, presetId);
+        setPref(PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID, presetId);
 
         StreamSettings.refreshKeyboardShortcuts();
     }

src/modules/ui/dialog/settings/suggestions.ts

@@ -92,7 +92,7 @@ export class SuggestionsSetting {
 
         // Start rendering
         const $suggestedSettings = CE('div', { class: 'bx-suggest-wrapper' });
-        const $select = CE<HTMLSelectElement>('select', {},
+        const $select = CE('select', {},
             hasRecommendedSettings && CE('option', { value: 'recommended' }, t('recommended')),
             !hasRecommendedSettings && CE('option', { value: 'highest' }, t('highest-quality')),
             CE('option', { value: 'default' }, t('default')),
@@ -126,6 +126,7 @@ export class SuggestionsSetting {
                     suggestedValue = settings[prefKey];
                 }
 
+                // @ts-ignore
                 const currentValue = getPref(prefKey, false);
                 const currentValueText = STORAGE.Global.getValueText(prefKey, currentValue);
                 const isSameValue = currentValue === suggestedValue;
@@ -233,7 +234,7 @@ export class SuggestionsSetting {
                 orientation: 'vertical',
             }
         },
-            BxSelectElement.create($select, true),
+            BxSelectElement.create($select),
             $suggestedSettings,
             $btnApply,
 

src/modules/ui/guide-menu.ts

@@ -115,7 +115,7 @@ export class GuideMenu {
         });
 
         // Set TV tag
-        if (STATES.userAgent.isTv || getPref<UiLayout>(PrefKey.UI_LAYOUT) === UiLayout.TV) {
+        if (STATES.userAgent.isTv || getPref(PrefKey.UI_LAYOUT) === UiLayout.TV) {
             document.body.dataset.bxMediaType = 'tv';
         }
 

src/modules/ui/header.ts

@@ -50,7 +50,7 @@ export class HeaderSection {
             return;
         }
 
-        const PREF_LATEST_VERSION = getPref<VersionLatest>(PrefKey.VERSION_LATEST);
+        const PREF_LATEST_VERSION = getPref(PrefKey.VERSION_LATEST);
 
         // Setup Settings button
         const $btnSettings = this.$btnSettings;

src/modules/ui/ui.ts

@@ -9,7 +9,7 @@ export function localRedirect(path: string) {
         return;
     }
 
-    const $anchor = CE<HTMLAnchorElement>('a', {
+    const $anchor = CE('a', {
             href: url,
             class: 'bx-hidden bx-offscreen',
         }, '');

src/types/db.d.ts

@@ -6,7 +6,7 @@ interface BaseRecord {
 interface ControllerSettingsRecord extends BaseRecord {
     id: string;
     data: {
-        vibrationIntensity: number;
         shortcutPresetId: number;
+        customizationPresetId: number;
     };
 };

src/types/global.d.ts

@@ -3,6 +3,7 @@ import type { AllPresets, ControllerShortcutPresetRecord } from "./presets";
 import type { PrefKey } from "@/enums/pref-keys";
 import type { StreamSettings, type StreamSettingsData } from "@/utils/stream-settings";
 import type { BxEvent } from "@/utils/bx-event";
+import type { BxEventBus } from "@/utils/bx-event-bus";
 import type { BxLogger } from "@/utils/bx-logger";
 
 export {};

src/types/index.d.ts

@@ -24,7 +24,7 @@ type ServerRegion = {
 
 type BxStates = {
     supportedRegion: boolean;
-    serverRegions: Record<ServerRegionName, ServerRegion>;
+    serverRegions: Record<string, ServerRegion>;
     selectedRegion: any;
     gsToken: string;
     isSignedIn: boolean;
@@ -164,3 +164,37 @@ type XboxAchievement = {
 };
 
 type OsName = 'windows' | 'tizen' | 'android';
+
+type XcloudGamepad = {
+    GamepadIndex: number;
+    A: number;
+    B: number;
+    X: number;
+    Y: number;
+    LeftShoulder: number;
+    RightShoulder: number;
+    LeftTrigger: number;
+    RightTrigger: number;
+    View: number;
+    Menu: number;
+    LeftThumb: number;
+    RightThumb: number;
+    DPadUp: number;
+    DPadDown: number;
+    DPadLeft: number;
+    DPadRight: number;
+    Nexus: number;
+    LeftThumbXAxis: number;
+    LeftThumbYAxis: number;
+    RightThumbXAxis: number;
+    RightThumbYAxis: number;
+    PhysicalPhysicality: number;
+    VirtualPhysicality: number;
+    Dirty: boolean;
+    Virtual: boolean;
+
+    // Only in Better xCloud
+    LeftStickAxes?: any;
+    RightStickAxes?: any;
+    Share?: any;
+};

src/types/prefs.d.ts

@@ -1,17 +1 @@
-type VersionCurrent = string;
-type VersionLatest = string;
-type VersionLastCheck = number;
-
-type VideoMaxFps = number;
-type VideoMaxBitrate = number;
-
-type ServerRegionName = string;
-
-type TouchControllerDefaultOpacity = number;
-
-type AudioVolume = number;
-type DeviceVibrationIntensity = number;
 type StreamPreferredLocale = 'default' | string;
-type ControllerPollingRate = number;
-type MkbPresetId = number;
-type KeyboardShortcutsPresetId = number;

src/types/presets.d.ts

@@ -14,13 +14,7 @@ interface PresetRecords<T extends PresetRecord> {
     [key: number]: T;
 }
 
-
+// MKB
-interface MkbPresetRecord extends PresetRecord {
-    data: MkbPresetData;
-};
-
-type MkbPresetRecords = PresetRecords<MkbPresetRecord>;
-
 type MkbPresetData = {
     mapping: Partial<Record<GamepadKey, Array<KeyCode | MouseButtonCode | WheelCode | null>>>;
     mouse: Omit<{
@@ -30,30 +24,32 @@ type MkbPresetData = {
     };
 };
 
-interface MkbConvertedPresetRecord extends PresetRecord {
-    data: MkbConvertedPresetData;
-};
-
 type MkbConvertedPresetData = MkbPresetData & {
     mapping: Record<string, number?>;
 };
 
+interface MkbPresetRecord extends PresetRecord {
+    data: MkbPresetData;
+};
+
+interface MkbConvertedPresetRecord extends PresetRecord {
+    data: MkbConvertedPresetData;
+};
+
+// Controller shortcuts
 interface ControllerShortcutPresetRecord extends PresetRecord {
     data: ControllerShortcutPresetData;
 };
 
-type ControllerShortcutPresetRecords = PresetRecords<ControllerShortcutPresetRecord>;
-
 type ControllerShortcutPresetData = {
     mapping: Partial<Record<GamepadKey, ShortcutAction>>,
 };
 
+// Keyboard shortcuts
 interface KeyboardShortcutPresetRecord extends PresetRecord {
     data: KeyboardShortcutPresetData;
 };
 
-type KeyboardShortcutPresetRecords = PresetRecords<KeyboardShortcutPresetRecord>;
-
 type KeyboardShortcutPresetData = {
     mapping: Partial<Record<ShortcutAction, KeyEventInfo>>,
 };
@@ -62,12 +58,39 @@ type KeyboardShortcutConvertedPresetData = KeyboardShortcutPresetData & {
     mapping: { [key: string]: ShortcutAction };
 };
 
+// All presets
 interface AllPresets<T extends PresetRecord> {
-    default: Array<number>,
+    default: Array<number>;
-    custom: Array<number>,
+    custom: Array<number>;
-    data: { [key: string]: T },
+    data: { [key: string]: T };
 };
 
 interface AllPresetsData<T extends PresetRecord> {
-    [presetId: string]: T['data'],
+    [presetId: string]: T['data'];
 };
+
+// Controller customization
+type ControllerCustomizationPresetData = {
+    mapping: Partial<Record<GamepadKey, GamepadKey | false | undefined>>;
+    settings: {
+        leftTriggerRange?: [number, number];
+        rightTriggerRange?: [number, number];
+
+        leftStickDeadzone?: [number, number];
+        rightStickDeadzone?: [number, number];
+
+        vibrationIntensity: number;
+    },
+};
+
+interface ControllerCustomizationPresetRecord extends PresetRecord {
+    data: ControllerCustomizationPresetData;
+};
+
+type ControllerCustomizationConvertedPresetData = {
+    mapping: Partial<Record<keyof XcloudGamepad, keyof XcloudGamepad | false>>;
+    ranges: {
+        [key in keyof Pick<XcloudGamepad, 'LeftTrigger' | 'RightTrigger' | 'LeftThumb' | 'RightThumb'>]?: [number, number];
+    };
+    vibrationIntensity: number;
+}

src/types/setting-definition.d.ts

@@ -20,7 +20,7 @@ interface BaseSettingDefinition {
     default: any;
 
     label?: string;
-    note?: string | (() => HTMLElement);
+    note?: string | (() => HTMLElement) | HTMLElement;
     experimental?: boolean;
     unsupported?: boolean;
     unsupportedValue?: SettingDefinition['default'];
@@ -76,3 +76,14 @@ export type NumberStepperParams = Partial<{
     customTextValue: (value: any, min?: number, max?: number) => string | null;
     reverse: boolean;
 }>
+
+export type DualNumberStepperParams = {
+    min: number;
+    minDiff: number;
+    max: number;
+
+    steps?: number;
+    suffix?: string;
+    disabled?: boolean;
+    customTextValue?: (values: [number, number], min?: number, max?: number) => string | null;
+};

src/utils/bx-exposed.ts

@@ -106,14 +106,14 @@ export const BxExposed = {
         }
 
         // Remove native MKB support on mobile browsers or by user's choice
-        if (getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.OFF) {
+        if (getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.OFF) {
             supportedInputTypes = supportedInputTypes.filter(i => i !== SupportedInputType.MKB);
         }
 
         titleInfo.details.hasMkbSupport = supportedInputTypes.includes(SupportedInputType.MKB);
 
         if (STATES.userAgent.capabilities.touch) {
-            let touchControllerAvailability = getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE);
+            let touchControllerAvailability = getPref(PrefKey.TOUCH_CONTROLLER_MODE);
 
             // Disable touch control when gamepad found
             if (touchControllerAvailability !== TouchControllerMode.OFF && getPref(PrefKey.TOUCH_CONTROLLER_AUTO_OFF)) {
@@ -185,8 +185,8 @@ export const BxExposed = {
         }
     },
 
-    handleControllerShortcut: isFullVersion() && ControllerShortcut.handle,
+    handleControllerShortcut: isFullVersion() ? ControllerShortcut.handle : () => {},
-    resetControllerShortcut: isFullVersion() && ControllerShortcut.reset,
+    resetControllerShortcut: isFullVersion() ? ControllerShortcut.reset : () => {},
 
     overrideSettings: {
         Tv_settings: {

src/utils/bx-icon.ts

@@ -12,6 +12,7 @@ import iconEyeSlash from "@assets/svg/eye-slash.svg" with { type: "text" };
 import iconHome from "@assets/svg/home.svg" with { type: "text" };
 import iconNativeMkb from "@assets/svg/native-mkb.svg" with { type: "text" };
 import iconNew from "@assets/svg/new.svg" with { type: "text" };
+import iconPencil from "@assets/svg/pencil-simple-line.svg" with { type: "text" };
 import iconPower from "@assets/svg/power.svg" with { type: "text" };
 import iconQuestion from "@assets/svg/question.svg" with { type: "text" };
 import iconRefresh from "@assets/svg/refresh.svg" with { type: "text" };
@@ -53,6 +54,7 @@ export const BxIcon = {
     HOME: iconHome,
     NATIVE_MKB: iconNativeMkb,
     NEW: iconNew,
+    MANAGE: iconPencil,
     COPY: iconCopy,
     TRASH: iconTrash,
     CURSOR_TEXT: iconCursorText,

src/utils/css.ts

@@ -9,7 +9,7 @@ export function addCss() {
     const STYLUS_CSS = renderStylus() as unknown as string;
     let css = STYLUS_CSS;
 
-    const PREF_HIDE_SECTIONS = getPref<UiSection[]>(PrefKey.UI_HIDE_SECTIONS);
+    const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS);
     const selectorToHide = [];
 
     // Hide "News" section
@@ -18,7 +18,7 @@ export function addCss() {
     }
 
     // Hide BYOG section
-    if (getPref<BlockFeature[]>(PrefKey.BLOCK_FEATURES).includes(BlockFeature.BYOG)) {
+    if (getPref(PrefKey.BLOCK_FEATURES).includes(BlockFeature.BYOG)) {
         selectorToHide.push('#BodyContent > div[class*=ByogRow-module__container___]');
     }
 
@@ -39,7 +39,7 @@ export function addCss() {
     }
 
    // Hide "Start a party" button in the Guide menu
-    if (getPref<BlockFeature[]>(PrefKey.BLOCK_FEATURES).includes(BlockFeature.FRIENDS)) {
+    if (getPref(PrefKey.BLOCK_FEATURES).includes(BlockFeature.FRIENDS)) {
         selectorToHide.push('#gamepass-dialog-root div[class^=AchievementsPreview-module__container] + button[class*=HomeLandingPage-module__button]');
     }
 
@@ -170,7 +170,7 @@ body::-webkit-scrollbar {
 
 
 export function preloadFonts() {
-    const $link = CE<HTMLLinkElement>('link', {
+    const $link = CE('link', {
             rel: 'preload',
             href: 'https://redphx.github.io/better-xcloud/fonts/promptfont.otf',
             as: 'font',

src/utils/feature-gates.ts

@@ -12,13 +12,13 @@ export let FeatureGates: { [key: string]: boolean } = {
 };
 
 // Enable Native Mouse & Keyboard
-const nativeMkbMode = getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE);
+const nativeMkbMode = getPref(PrefKey.NATIVE_MKB_MODE);
 if (nativeMkbMode !== NativeMkbMode.DEFAULT) {
     FeatureGates.EnableMouseAndKeyboard = nativeMkbMode === NativeMkbMode.ON;
 }
 
 // Disable chat feature
-const blockFeatures = getPref<BlockFeature[]>(PrefKey.BLOCK_FEATURES);
+const blockFeatures = getPref(PrefKey.BLOCK_FEATURES);
 if (blockFeatures.includes(BlockFeature.CHAT)) {
     FeatureGates.EnableGuideChatTab = false;
 }

src/utils/html.ts

@@ -3,6 +3,7 @@ import { setNearby } from "./navigation-utils";
 import type { NavigationNearbyElements } from "@/modules/ui/dialog/navigation-dialog";
 import type { PresetRecord, AllPresets } from "@/types/presets";
 import { t } from "./translation";
+import type { BxSelectElement } from "@/web-components/bx-select";
 
 export enum ButtonStyle {
     PRIMARY = 1,
@@ -14,10 +15,11 @@ export enum ButtonStyle {
     FOCUSABLE = 1 << 6,
     FULL_WIDTH = 1 << 7,
     FULL_HEIGHT = 1 << 8,
-    TALL = 1 << 9,
+    AUTO_HEIGHT = 1 << 9,
-    CIRCULAR = 1 << 10,
+    TALL = 1 << 10,
-    NORMAL_CASE = 1 << 11,
+    CIRCULAR = 1 << 11,
-    NORMAL_LINK = 1 << 12,
+    NORMAL_CASE = 1 << 12,
+    NORMAL_LINK = 1 << 13,
 }
 
 const ButtonStyleClass = {
@@ -30,6 +32,7 @@ const ButtonStyleClass = {
     [ButtonStyle.FOCUSABLE]: 'bx-focusable',
     [ButtonStyle.FULL_WIDTH]: 'bx-full-width',
     [ButtonStyle.FULL_HEIGHT]: 'bx-full-height',
+    [ButtonStyle.AUTO_HEIGHT]: 'bx-auto-height',
     [ButtonStyle.TALL]: 'bx-tall',
     [ButtonStyle.CIRCULAR]: 'bx-circular',
     [ButtonStyle.NORMAL_CASE]: 'bx-normal-case',
@@ -62,23 +65,41 @@ type CreateElementOptions = {
         [ key: string ]: (e: Event) => void;
     };
     _dataset?: {
-        [ key: string ]: string | number;
+        [ key: string ]: string | number | boolean;
     };
     _nearby?: NavigationNearbyElements;
 };
 
+type HTMLElementTagNameMap = {
+    a: HTMLAnchorElement;
+    button: HTMLButtonElement;
+    canvas: HTMLCanvasElement;
+    datalist: HTMLDataListElement,
+    div: HTMLDivElement;
+    fieldset: HTMLFieldSetElement;
+    input: HTMLInputElement;
+    label: HTMLLabelElement;
+    link: HTMLLinkElement;
+    optgroup: HTMLOptGroupElement;
+    option: HTMLOptionElement;
+    p: HTMLParagraphElement;
+    select: HTMLSelectElement;
+    span: HTMLSpanElement;
+    style: HTMLStyleElement;
+    [key: string] : HTMLElement;
+};
 
-function createElement<T=HTMLElement>(elmName: string, props: CreateElementOptions={}, ..._: any): T {
+function createElement<T extends keyof HTMLElementTagNameMap>(elmName: T, props: CreateElementOptions={}, ..._: any): HTMLElementTagNameMap[T] {
     let $elm;
     const hasNs = 'xmlns' in props;
 
     // console.trace('createElement', elmName, props);
 
     if (hasNs) {
-        $elm = document.createElementNS(props.xmlns, elmName);
+        $elm = document.createElementNS(props.xmlns, elmName as string);
         delete props.xmlns;
     } else {
-        $elm = document.createElement(elmName);
+        $elm = document.createElement(elmName as string);
     }
 
     if (props._nearby) {
@@ -121,7 +142,7 @@ function createElement<T=HTMLElement>(elmName: string, props: CreateElementOptio
         }
     }
 
-    return $elm as T;
+    return $elm as HTMLElementTagNameMap[T];
 }
 
 
@@ -137,13 +158,13 @@ export function createButton<T=HTMLButtonElement>(options: BxButtonOptions): T {
 
     // Create base button element
     if (options.url) {
-        $btn = CE<HTMLAnchorElement>('a', {
+        $btn = CE('a', {
             class: 'bx-button',
             href: options.url,
             target: '_blank',
         });
     } else {
-        $btn = CE<HTMLButtonElement>('button', {
+        $btn = CE('button', {
             class: 'bx-button',
             type: 'button',
         });
@@ -185,7 +206,7 @@ export function createButton<T=HTMLButtonElement>(options: BxButtonOptions): T {
 export function createSettingRow(label: string, $control: HTMLElement | false | undefined, options: SettingsRowOptions={}) {
     let $label: HTMLElement;
 
-    const $row = CE<HTMLLabelElement>('label', { class: 'bx-settings-row' },
+    const $row = CE('label', { class: 'bx-settings-row' },
         $label = CE('span', { class: 'bx-settings-label' },
             label,
             options.$note,
@@ -267,7 +288,7 @@ export function renderPresetsList<T extends PresetRecord>($select: HTMLSelectEle
     removeChildElements($select);
 
     if (options.addOffValue) {
-        const $option = CE<HTMLOptionElement>('option', { value: 0 }, t('off'));
+        const $option = CE('option', { value: 0 }, t('off'));
         $option.selected = selectedValue === 0;
 
         $select.appendChild($option);
@@ -287,7 +308,7 @@ export function renderPresetsList<T extends PresetRecord>($select: HTMLSelectEle
             const selected = selectedValue === record.id;
             const name = options.selectedIndicator && selected ? '✅ ' + record.name : record.name;
 
-            const $option = CE<HTMLOptionElement>('option', { value: record.id }, name);
+            const $option = CE('option', { value: record.id }, name);
             if (selected) {
                 $option.selected = true;
             }
@@ -301,6 +322,48 @@ export function renderPresetsList<T extends PresetRecord>($select: HTMLSelectEle
     }
 }
 
+export function calculateSelectBoxes($root: HTMLElement) {
+    const selects = Array.from<HTMLSelectElement>($root.querySelectorAll('div.bx-select:not([data-calculated]) select'));
+
+    for (const $select of selects) {
+        const $parent = $select.parentElement! as BxSelectElement;
+
+        // Don't apply to select.bx-full-width elements
+        if ($parent.classList.contains('bx-full-width')) {
+            $parent.dataset.calculated = 'true';
+            continue;
+        }
+
+        const rect = $select.getBoundingClientRect();
+
+        let $label: HTMLElement;
+        let width = Math.ceil(rect.width);
+        if (!width) {
+            continue;
+        }
+
+        $label = $parent.querySelector<HTMLElement>($select.multiple ? '.bx-select-value' : 'div')!;
+        if ($parent.isControllerFriendly) {
+            // Adjust width for controller-friendly UI
+            if ($select.multiple) {
+                width += 20;  // Add checkbox's width
+            }
+
+            // Reduce width if it has <optgroup>
+            if ($select.querySelector('optgroup')) {
+                width -= 15;
+            }
+        } else {
+            width += 10;
+        }
+
+        // Set min-width
+        $select.style.left = '0';
+        $label.style.minWidth = width + 'px';
+        $parent.dataset.calculated = 'true';
+    };
+}
+
 // https://stackoverflow.com/a/20732091
 const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
 export function humanFileSize(size: number) {

src/utils/local-db/controller-customizations-table.ts

@@ -0,0 +1,45 @@
+import type { ControllerCustomizationPresetRecord, PresetRecords } from "@/types/presets";
+import { LocalDb } from "./local-db";
+import { BasePresetsTable } from "./base-presets-table";
+import { GamepadKey } from "@/enums/gamepad";
+
+export const enum ControllerCustomizationDefaultPresetId {
+    OFF = 0,
+    BAYX = -1,
+
+    DEFAULT = OFF,
+};
+
+export class ControllerCustomizationsTable extends BasePresetsTable<ControllerCustomizationPresetRecord> {
+    private static instance: ControllerCustomizationsTable;
+    public static getInstance = () => ControllerCustomizationsTable.instance ?? (ControllerCustomizationsTable.instance = new ControllerCustomizationsTable(LocalDb.TABLE_CONTROLLER_CUSTOMIZATIONS));
+
+    protected readonly TABLE_PRESETS = LocalDb.TABLE_CONTROLLER_CUSTOMIZATIONS;
+    protected DEFAULT_PRESETS: PresetRecords<ControllerCustomizationPresetRecord> = {
+        [ControllerCustomizationDefaultPresetId.BAYX]: {
+            id: ControllerCustomizationDefaultPresetId.BAYX,
+            name: 'ABXY ⇄ BAYX',
+            data: {
+                mapping: {
+                    [GamepadKey.A]: GamepadKey.B,
+                    [GamepadKey.B]: GamepadKey.A,
+                    [GamepadKey.X]: GamepadKey.Y,
+                    [GamepadKey.Y]: GamepadKey.X,
+                },
+
+                settings: {
+                    leftStickDeadzone: [0, 100],
+                    rightStickDeadzone: [0, 100],
+
+                    leftTriggerRange: [0, 100],
+                    rightTriggerRange: [0, 100],
+
+                    vibrationIntensity: 100,
+                },
+            },
+        },
+    };
+
+    protected DEFAULT_PRESET_ID = ControllerCustomizationDefaultPresetId.DEFAULT;
+
+}

src/utils/local-db/controller-settings-table.ts

@@ -2,6 +2,7 @@ import { BaseLocalTable } from "./base-table";
 import { LocalDb } from "./local-db";
 import { ControllerShortcutDefaultId } from "./controller-shortcuts-table";
 import { deepClone } from "../global";
+import { ControllerCustomizationDefaultPresetId } from "./controller-customizations-table";
 
 export class ControllerSettingsTable extends BaseLocalTable<ControllerSettingsRecord> {
     private static instance: ControllerSettingsTable;
@@ -9,7 +10,7 @@ export class ControllerSettingsTable extends BaseLocalTable<ControllerSettingsRe
 
     static readonly DEFAULT_DATA: ControllerSettingsRecord['data'] = {
         shortcutPresetId: ControllerShortcutDefaultId.DEFAULT,
-        vibrationIntensity: 50,
+        customizationPresetId: ControllerCustomizationDefaultPresetId.DEFAULT,
     };
 
     async getControllerData(id: string): Promise<ControllerSettingsRecord['data']> {
@@ -30,10 +31,7 @@ export class ControllerSettingsTable extends BaseLocalTable<ControllerSettingsRe
                 continue;
             }
 
-            const settings = all[key].data;
+            const settings = Object.assign(all[key].data, ControllerSettingsTable.DEFAULT_DATA);
-            // Pre-calculate virabtionIntensity
-            settings.vibrationIntensity /= 100;
-
             results[key] = settings;
         }
 

src/utils/local-db/local-db.ts

@@ -4,10 +4,11 @@ export class LocalDb {
     // private readonly LOG_TAG = 'LocalDb';
 
     static readonly DB_NAME = 'BetterXcloud';
-    static readonly DB_VERSION = 3;
+    static readonly DB_VERSION = 4;
 
     static readonly TABLE_VIRTUAL_CONTROLLERS = 'virtual_controllers';
     static readonly TABLE_CONTROLLER_SHORTCUTS = 'controller_shortcuts';
+    static readonly TABLE_CONTROLLER_CUSTOMIZATIONS = 'controller_customizations';
     static readonly TABLE_CONTROLLER_SETTINGS = 'controller_settings';
     static readonly TABLE_KEYBOARD_SHORTCUTS = 'keyboard_shortcuts';
 
@@ -52,6 +53,14 @@ export class LocalDb {
                     });
                 }
 
+                // Controller mappings
+                if (!db.objectStoreNames.contains(LocalDb.TABLE_CONTROLLER_CUSTOMIZATIONS)) {
+                    db.createObjectStore(LocalDb.TABLE_CONTROLLER_CUSTOMIZATIONS, {
+                        keyPath: 'id',
+                        autoIncrement: true,
+                    });
+                }
+
                 // Keyboard shortcuts
                 if (!db.objectStoreNames.contains(LocalDb.TABLE_KEYBOARD_SHORTCUTS)) {
                     db.createObjectStore(LocalDb.TABLE_KEYBOARD_SHORTCUTS, {

src/utils/monkey-patches.ts

@@ -60,7 +60,7 @@ export function patchVideoApi() {
 
 
 export function patchRtcCodecs() {
-    const codecProfile = getPref<CodecProfile>(PrefKey.STREAM_CODEC_PROFILE);
+    const codecProfile = getPref(PrefKey.STREAM_CODEC_PROFILE);
     if (codecProfile === 'default') {
         return;
     }
@@ -81,8 +81,8 @@ export function patchRtcPeerConnection() {
     }
 
     const maxVideoBitrateDef = getPrefDefinition(PrefKey.STREAM_MAX_VIDEO_BITRATE) as Extract<SettingDefinition, { min: number }>;
-    const maxVideoBitrate = getPref<VideoMaxBitrate>(PrefKey.STREAM_MAX_VIDEO_BITRATE);
+    const maxVideoBitrate = getPref(PrefKey.STREAM_MAX_VIDEO_BITRATE);
-    const codec = getPref<CodecProfile>(PrefKey.STREAM_CODEC_PROFILE);
+    const codec = getPref(PrefKey.STREAM_CODEC_PROFILE);
 
     if (codec !== CodecProfile.DEFAULT || maxVideoBitrate < maxVideoBitrateDef.max) {
         const nativeSetLocalDescription = RTCPeerConnection.prototype.setLocalDescription;
@@ -134,7 +134,7 @@ export function patchAudioContext() {
 
         ctx.createGain = function() {
             const gainNode = nativeCreateGain.apply(this);
-            gainNode.gain.value = getPref<AudioVolume>(PrefKey.AUDIO_VOLUME) / 100;
+            gainNode.gain.value = getPref(PrefKey.AUDIO_VOLUME) / 100;
 
             STATES.currentStream.audioGainNode = gainNode;
             return gainNode;

src/utils/network.ts

@@ -141,7 +141,7 @@ export function interceptHttpRequests() {
 
     // 'https://notificationinbox.xboxlive.com',
     // 'https://accounts.xboxlive.com/family/memberXuid',
-    const blockFeatures = getPref<BlockFeature[]>(PrefKey.BLOCK_FEATURES);
+    const blockFeatures = getPref(PrefKey.BLOCK_FEATURES);
     if (blockFeatures.includes(BlockFeature.CHAT)) {
         BLOCKED_URLS.push(
             'https://xblmessaging.xboxlive.com/network/xbox/users/me/inbox',

src/utils/region.ts

@@ -4,7 +4,7 @@ import { getPref } from "./settings-storages/global-settings-storage";
 
 
 export function getPreferredServerRegion(shortName = false): string | null {
-    let preferredRegion = getPref<ServerRegionName>(PrefKey.SERVER_REGION);
+    let preferredRegion = getPref(PrefKey.SERVER_REGION);
     const serverRegions = STATES.serverRegions;
 
     // Return preferred region

src/utils/screenshot-manager.ts

@@ -18,9 +18,9 @@ export class ScreenshotManager {
     private constructor() {
         BxLogger.info(this.LOG_TAG, 'constructor()');
 
-        this.$download = CE<HTMLAnchorElement>('a');
+        this.$download = CE('a');
 
-        this.$canvas = CE<HTMLCanvasElement>('canvas', { class: 'bx-gone' });
+        this.$canvas = CE('canvas', { class: 'bx-gone' });
         this.canvasContext = this.$canvas.getContext('2d', {
             alpha: false,
             willReadFrequently: false,

src/utils/setting-element.ts

@@ -23,10 +23,10 @@ export interface BxSelectSettingElement extends HTMLSelectElement, BxBaseSetting
 
 export class SettingElement {
     private static renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any): BxSelectSettingElement {
-        const $control = CE<BxSelectSettingElement>('select', {
+        const $control = CE('select', {
             // title: setting.label,
             tabindex: 0,
-        });
+        }) as BxSelectSettingElement;
 
         let $parent: HTMLElement;
         if (setting.optionsGroup) {
@@ -41,7 +41,7 @@ export class SettingElement {
         for (let value in setting.options) {
             const label = setting.options[value];
 
-            const $option = CE<HTMLOptionElement>('option', { value }, label);
+            const $option = CE('option', { value }, label);
             $parent.appendChild($option);
         }
 
@@ -62,11 +62,11 @@ export class SettingElement {
     }
 
     private static renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}): BxSelectSettingElement {
-        const $control = CE<BxSelectSettingElement>('select', {
+        const $control = CE('select', {
             // title: setting.label,
             multiple: true,
             tabindex: 0,
-        });
+        }) as BxSelectSettingElement;
 
         const totalOptions = Object.keys(setting.multipleOptions!).length;
         const size = params.size ? Math.min(params.size, totalOptions) : totalOptions;
@@ -75,7 +75,7 @@ export class SettingElement {
         for (const value in setting.multipleOptions) {
             const label = setting.multipleOptions[value];
 
-            const $option = CE<HTMLOptionElement>('option', { value }, label) as HTMLOptionElement;
+            const $option = CE('option', { value }, label) as HTMLOptionElement;
             $option.selected = currentValue.indexOf(value) > -1;
 
             $option.addEventListener('mousedown', function(e) {
@@ -156,6 +156,7 @@ export class SettingElement {
 
     static fromPref(key: PrefKey, storage: BaseSettingsStore, onChange: any, overrideParams={}) {
         const definition = storage.getDefinition(key);
+        // @ts-ignore
         let currentValue = storage.getSetting(key);
 
         let type;

src/utils/settings-storages/base-settings-storage.ts

@@ -1,4 +1,4 @@
-import type { PrefKey, StorageKey } from "@/enums/pref-keys";
+import type { PrefKey, PrefTypeMap, StorageKey } from "@/enums/pref-keys";
 import type { NumberStepperParams, SettingAction, SettingDefinitions } from "@/types/setting-definition";
 import { t } from "../translation";
 import { SCRIPT_VARIANT } from "../global";
@@ -63,20 +63,20 @@ export class BaseSettingsStore {
         return this.definitions[key];
     }
 
-    getSetting<T=boolean>(key: PrefKey, checkUnsupported = true): T {
+    getSetting<T extends keyof PrefTypeMap>(key: T, checkUnsupported = true): PrefTypeMap[T] {
         const definition = this.definitions[key];
 
         // Return default value if build variant is different
         if (definition.requiredVariants && !definition.requiredVariants.includes(SCRIPT_VARIANT)) {
-            return definition.default as T;
+            return definition.default as PrefTypeMap[T];
         }
 
         // Return default value if the feature is not supported
         if (checkUnsupported && definition.unsupported) {
             if ('unsupportedValue' in definition) {
-                return definition.unsupportedValue as T;
+                return definition.unsupportedValue as PrefTypeMap[T];
             } else {
-                return definition.default as T;
+                return definition.default as PrefTypeMap[T];
             }
         }
 
@@ -84,7 +84,7 @@ export class BaseSettingsStore {
             this.settings[key] = this.validateValue('get', key, null);
         }
 
-        return this.settings[key] as T;
+        return this.settings[key] as PrefTypeMap[T];
     }
 
     setSetting<T=any>(key: PrefKey, value: T, emitEvent = false) {

src/utils/settings-storages/global-settings-storage.ts

@@ -8,7 +8,7 @@ import { CE } from "../html";
 import { t, SUPPORTED_LANGUAGES } from "../translation";
 import { UserAgent } from "../user-agent";
 import { BaseSettingsStore as BaseSettingsStorage } from "./base-settings-storage";
-import { CodecProfile, StreamResolution, TouchControllerMode, TouchControllerStyleStandard, TouchControllerStyleCustom, GameBarPosition, DeviceVibrationMode, NativeMkbMode, UiLayout, UiSection, StreamPlayerType, StreamVideoProcessing, VideoRatio, StreamStat, VideoPosition, BlockFeature } from "@/enums/pref-values";
+import { CodecProfile, StreamResolution, TouchControllerMode, TouchControllerStyleStandard, TouchControllerStyleCustom, GameBarPosition, DeviceVibrationMode, NativeMkbMode, UiLayout, UiSection, StreamPlayerType, StreamVideoProcessing, VideoRatio, StreamStat, VideoPosition, BlockFeature, StreamStatPosition, VideoPowerPreference } from "@/enums/pref-values";
 import { MkbMappingDefaultPresetId } from "../local-db/mkb-mapping-presets-table";
 import { KeyboardShortcutDefaultId } from "../local-db/keyboard-shortcuts-table";
 import { GhPagesUtils } from "../gh-pages";
@@ -322,7 +322,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             label: t('enable-local-co-op-support'),
             default: false,
             note: () => CE('div', {},
-                CE<HTMLAnchorElement>('a', {
+                CE('a', {
                     href: 'https://github.com/redphx/better-xcloud/discussions/275',
                     target: '_blank',
                 }, t('enable-local-co-op-support-note')),
@@ -399,7 +399,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                     url = 'https://better-xcloud.github.io/mouse-and-keyboard/#disclaimer';
                 }
 
-                setting.unsupportedNote = () => CE<HTMLAnchorElement>('a', {
+                setting.unsupportedNote = () => CE('a', {
                     href: url,
                     target: '_blank',
                 }, '⚠️ ' + note);
@@ -649,11 +649,11 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
         [PrefKey.VIDEO_POWER_PREFERENCE]: {
             label: t('renderer-configuration'),
-            default: 'default',
+            default: VideoPowerPreference.DEFAULT,
             options: {
-                default: t('default'),
+                [VideoPowerPreference.DEFAULT]: t('default'),
-                'low-power': t('battery-saving'),
+                [VideoPowerPreference.LOW_POWER]: t('battery-saving'),
-                'high-performance': t('high-performance'),
+                [VideoPowerPreference.HIGH_PERFORMANCE]: t('high-performance'),
             },
             suggest: {
                 highest: 'low-power',
@@ -813,11 +813,11 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
         [PrefKey.STATS_POSITION]: {
             label: t('position'),
-            default: 'top-right',
+            default: StreamStatPosition.TOP_RIGHT,
             options: {
-                'top-left': t('top-left'),
+                [StreamStatPosition.TOP_LEFT]: t('top-left'),
-                'top-center': t('top-center'),
+                [StreamStatPosition.TOP_CENTER]: t('top-center'),
-                'top-right': t('top-right'),
+                [StreamStatPosition.TOP_RIGHT]: t('top-right'),
             },
         },
         [PrefKey.STATS_TEXT_SIZE]: {

src/utils/stream-settings.ts

@@ -1,32 +1,33 @@
-import { PrefKey } from "@/enums/pref-keys";
+import { PrefKey, type PrefTypeMap } from "@/enums/pref-keys";
 import { ControllerSettingsTable } from "./local-db/controller-settings-table";
 import { ControllerShortcutsTable } from "./local-db/controller-shortcuts-table";
 import { getPref, setPref } from "./settings-storages/global-settings-storage";
-import type { ControllerShortcutPresetRecord, KeyboardShortcutConvertedPresetData, MkbConvertedPresetData } from "@/types/presets";
+import type { ControllerCustomizationConvertedPresetData, ControllerCustomizationPresetData, ControllerShortcutPresetRecord, KeyboardShortcutConvertedPresetData, MkbConvertedPresetData } from "@/types/presets";
 import { STATES } from "./global";
 import { DeviceVibrationMode } from "@/enums/pref-values";
 import { VIRTUAL_GAMEPAD_ID } from "@/modules/mkb/mkb-handler";
 import { hasGamepad } from "./gamepad";
 import { MkbMappingPresetsTable } from "./local-db/mkb-mapping-presets-table";
-import type { GamepadKey } from "@/enums/gamepad";
+import { GamepadKey } from "@/enums/gamepad";
 import { MkbPresetKey, MouseConstant } from "@/enums/mkb";
 import { KeyboardShortcutDefaultId, KeyboardShortcutsTable } from "./local-db/keyboard-shortcuts-table";
 import { ShortcutAction } from "@/enums/shortcut-actions";
 import { KeyHelper } from "@/modules/mkb/key-helper";
 import { BxEventBus } from "./bx-event-bus";
+import { ControllerCustomizationsTable } from "./local-db/controller-customizations-table";
 
 
 export type StreamSettingsData = {
     settings: Partial<Record<PrefKey, any>>;
     xCloudPollingMode: 'none' | 'callbacks' | 'navigation' | 'all';
 
-    deviceVibrationIntensity: DeviceVibrationIntensity;
+    deviceVibrationIntensity: number;
 
-    controllerPollingRate: ControllerPollingRate;
+    controllerPollingRate: number;
     controllers: {
         [gamepadId: string]: {
-            vibrationIntensity: number;
             shortcuts: ControllerShortcutPresetRecord['data']['mapping'] | null;
+            customization: ControllerCustomizationConvertedPresetData | null;
         };
     };
 
@@ -50,7 +51,33 @@ export class StreamSettings {
         keyboardShortcuts: {},
     };
 
-    static getPref<T=boolean>(key: PrefKey) {
+    private static CONTROLLER_CUSTOMIZATION_MAPPING: { [key in GamepadKey]?: keyof XcloudGamepad } = {
+        [GamepadKey.A]: 'A',
+        [GamepadKey.B]: 'B',
+        [GamepadKey.X]: 'X',
+        [GamepadKey.Y]: 'Y',
+
+        [GamepadKey.UP]: 'DPadUp',
+        [GamepadKey.RIGHT]: 'DPadRight',
+        [GamepadKey.DOWN]: 'DPadDown',
+        [GamepadKey.LEFT]: 'DPadLeft',
+
+        [GamepadKey.LB]: 'LeftShoulder',
+        [GamepadKey.RB]: 'RightShoulder',
+        [GamepadKey.LT]: 'LeftTrigger',
+        [GamepadKey.RT]: 'RightTrigger',
+
+        [GamepadKey.L3]: 'LeftThumb',
+        [GamepadKey.R3]: 'RightThumb',
+        [GamepadKey.LS]: 'LeftStickAxes',
+        [GamepadKey.RS]: 'RightStickAxes',
+
+        [GamepadKey.SELECT]: 'View',
+        [GamepadKey.START]: 'Menu',
+        [GamepadKey.SHARE]: 'Share',
+    };
+
+    static getPref<T extends keyof PrefTypeMap>(key: T) {
         return getPref<T>(key);
     }
 
@@ -60,6 +87,7 @@ export class StreamSettings {
 
         const settingsTable = ControllerSettingsTable.getInstance();
         const shortcutsTable = ControllerShortcutsTable.getInstance();
+        const mappingTable = ControllerCustomizationsTable.getInstance();
 
         const gamepads = window.navigator.getGamepads();
         for (const gamepad of gamepads) {
@@ -74,17 +102,17 @@ export class StreamSettings {
 
             const settingsData = await settingsTable.getControllerData(gamepad.id);
 
-            let shortcutsMapping;
+            // Shortcuts
-            const preset = await shortcutsTable.getPreset(settingsData.shortcutPresetId);
+            const shortcutsPreset = await shortcutsTable.getPreset(settingsData.shortcutPresetId);
-            if (!preset) {
+            const shortcutsMapping = !shortcutsPreset ? null : shortcutsPreset.data.mapping;
-                shortcutsMapping = null;
+
-            } else {
+            // Mapping
-                shortcutsMapping = preset.data.mapping;
+            const customizationPreset = await mappingTable.getPreset(settingsData.customizationPresetId);
-            }
+            const customizationData = StreamSettings.convertControllerCustomization(customizationPreset?.data);
 
             controllers[gamepad.id] = {
-                vibrationIntensity: settingsData.vibrationIntensity,
                 shortcuts: shortcutsMapping,
+                customization: customizationData,
             }
         }
         settings.controllers = controllers;
@@ -95,18 +123,66 @@ export class StreamSettings {
         await StreamSettings.refreshDeviceVibration();
     }
 
+    private static preCalculateControllerRange(obj: Record<string, [number, number]>, target: keyof XcloudGamepad, values: [number, number] | undefined) {
+        if (values && Array.isArray(values)) {
+            const [from, to] = values;
+            if (from > 1 || to < 100) {
+                obj[target] = [from / 100, to / 100];
+            }
+        }
+    }
+
+    private static convertControllerCustomization(customization: ControllerCustomizationPresetData | null | undefined) {
+        if (!customization) {
+            return null;
+        }
+
+        const converted = {
+            mapping: {},
+            ranges: {},
+            vibrationIntensity: 1,
+        } as ControllerCustomizationConvertedPresetData;
+
+        // Swap GamepadKey.A with "A"
+        let gamepadKey: unknown;
+        for (gamepadKey in customization.mapping) {
+            const gamepadStr = StreamSettings.CONTROLLER_CUSTOMIZATION_MAPPING[gamepadKey as GamepadKey];
+            if (!gamepadStr) {
+                continue;
+            }
+
+            const mappedKey = customization.mapping[gamepadKey as GamepadKey];
+            if (typeof mappedKey === 'number') {
+                converted.mapping[gamepadStr] = StreamSettings.CONTROLLER_CUSTOMIZATION_MAPPING[mappedKey as GamepadKey];
+            } else {
+                converted.mapping[gamepadStr] = false;
+            }
+        }
+
+        // Pre-calculate ranges & deadzone
+        StreamSettings.preCalculateControllerRange(converted.ranges, 'LeftTrigger', customization.settings.leftTriggerRange);
+        StreamSettings.preCalculateControllerRange(converted.ranges, 'RightTrigger', customization.settings.rightTriggerRange);
+        StreamSettings.preCalculateControllerRange(converted.ranges, 'LeftThumb', customization.settings.leftStickDeadzone);
+        StreamSettings.preCalculateControllerRange(converted.ranges, 'RightThumb', customization.settings.rightStickDeadzone);
+
+        // Pre-calculate virabtionIntensity
+        converted.vibrationIntensity = customization.settings.vibrationIntensity / 100;
+
+        return converted;
+    }
+
     private static async refreshDeviceVibration() {
         if (!STATES.browser.capabilities.deviceVibration) {
             return;
         }
 
-        const mode = StreamSettings.getPref<DeviceVibrationMode>(PrefKey.DEVICE_VIBRATION_MODE);
+        const mode = StreamSettings.getPref(PrefKey.DEVICE_VIBRATION_MODE);
         let intensity = 0;  // Disable
 
         // Enable when no controllers are detected in Auto mode
         if (mode === DeviceVibrationMode.ON || (mode === DeviceVibrationMode.AUTO && !hasGamepad())) {
             // Set intensity
-            intensity = StreamSettings.getPref<DeviceVibrationIntensity>(PrefKey.DEVICE_VIBRATION_INTENSITY) / 100;
+            intensity = StreamSettings.getPref(PrefKey.DEVICE_VIBRATION_INTENSITY) / 100;
         }
 
         StreamSettings.settings.deviceVibrationIntensity = intensity;
@@ -116,7 +192,7 @@ export class StreamSettings {
     static async refreshMkbSettings() {
         const settings = StreamSettings.settings;
 
-        let presetId = StreamSettings.getPref<MkbPresetId>(PrefKey.MKB_P1_MAPPING_PRESET_ID);
+        let presetId = StreamSettings.getPref(PrefKey.MKB_P1_MAPPING_PRESET_ID);
         const orgPreset = (await MkbMappingPresetsTable.getInstance().getPreset(presetId))!;
         const orgPresetData = orgPreset.data;
 
@@ -154,7 +230,7 @@ export class StreamSettings {
     static async refreshKeyboardShortcuts() {
         const settings = StreamSettings.settings;
 
-        let presetId = StreamSettings.getPref<KeyboardShortcutsPresetId>(PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID);
+        let presetId = StreamSettings.getPref(PrefKey.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID);
         if (presetId === KeyboardShortcutDefaultId.OFF) {
             settings.keyboardShortcuts = null;
 

src/utils/stream-stats-collector.ts

@@ -96,7 +96,7 @@ export class StreamStatsCollector {
             current: -1,
             grades: [40, 75, 100],
             toString() {
-                return this.current === -1 ? '???' : this.current.toString().padStart(3, ' ');
+                return this.current === -1 ? '???' : this.current.toString().padStart(3);
             },
         },
 
@@ -104,22 +104,22 @@ export class StreamStatsCollector {
             current: 0,
             grades: [30, 40, 60],
             toString() {
-                return `${this.current.toFixed(1)}ms`.padStart(6, ' ');
+                return `${this.current.toFixed(1)}ms`.padStart(6);
             },
         },
 
         [StreamStat.FPS]: {
             current: 0,
             toString() {
-                const maxFps = getPref<VideoMaxFps>(PrefKey.VIDEO_MAX_FPS);
+                const maxFps = getPref(PrefKey.VIDEO_MAX_FPS);
-                return maxFps < 60 ? `${maxFps}/${this.current}`.padStart(5, ' ') : this.current.toString();
+                return maxFps < 60 ? `${maxFps}/${this.current}`.padStart(5) : this.current.toString();
             },
         },
 
         [StreamStat.BITRATE]: {
             current: 0,
             toString() {
-                return `${this.current.toFixed(1)} Mbps`.padStart(9, ' ');
+                return `${this.current.toFixed(1)} Mbps`.padStart(9);
             },
         },
 
@@ -146,14 +146,14 @@ export class StreamStatsCollector {
             total: 0,
             grades: [6, 9, 12],
             toString() {
-                return isNaN(this.current) ? '??ms' : `${this.current.toFixed(1)}ms`.padStart(6, ' ');
+                return isNaN(this.current) ? '??ms' : `${this.current.toFixed(1)}ms`.padStart(6);
             },
         },
 
         [StreamStat.DOWNLOAD]: {
             total: 0,
             toString() {
-                return humanFileSize(this.total).padStart(8, ' ');
+                return humanFileSize(this.total).padStart(8);
             },
         },
 

src/utils/translation.ts

@@ -27,6 +27,7 @@ export const SUPPORTED_LANGUAGES = {
 };
 
 const Texts = {
+    "slightly-increase-input-latency": "Slightly increase input latency",
     "achievements": "Achievements",
     "activate": "Activate",
     "activated": "Activated",
@@ -86,12 +87,10 @@ const Texts = {
     "continent-south-america": "South America",
     "contrast": "Contrast",
     "controller": "Controller",
+    "controller-customization": "Controller customization",
     "controller-friendly-ui": "Controller-friendly UI",
-    "controller-mapping": "Controller mapping",
-    "controller-mapping-in-game": "In-game controller mapping",
     "controller-shortcuts": "Controller shortcuts",
     "controller-shortcuts-connect-note": "Connect a controller to use this feature",
-    "controller-shortcuts-in-game": "In-game controller shortcuts",
     "controller-shortcuts-xbox-note": "Button to open the Guide menu",
     "controller-vibration": "Controller vibration",
     "copy": "Copy",
@@ -102,12 +101,12 @@ const Texts = {
     "default": "Default",
     "default-preset-note": "You can't modify default presets. Create a new one to customize it.",
     "delete": "Delete",
+    "detect-controller-button": "Detect controller button",
     "device": "Device",
     "device-unsupported-touch": "Your device doesn't have touch support",
     "device-vibration": "Device vibration",
     "device-vibration-not-using-gamepad": "On when not using gamepad",
     "disable": "Disable",
-    "disable-byog-feature": "Disable \"Stream your own game\" feature",
     "disable-features": "Disable features",
     "disable-home-context-menu": "Disable context menu in Home page",
     "disable-post-stream-feedback-dialog": "Disable post-stream feedback dialog",
@@ -153,6 +152,10 @@ const Texts = {
     "how-to-improve-app-performance": "How to improve app's performance",
     "ignore": "Ignore",
     "import": "Import",
+    "in-game-controller-customization": "In-game controller customization",
+    "in-game-controller-shortcuts": "In-game controller shortcuts",
+    "in-game-keyboard-shortcuts": "In-game keyboard shortcuts",
+    "in-game-shortcuts": "In-game shortcuts",
     "increase": "Increase",
     "install-android": "Better xCloud app for Android",
     "invites": "Invites",
@@ -160,12 +163,13 @@ const Texts = {
     "jitter": "Jitter",
     "keyboard-key": "Keyboard key",
     "keyboard-shortcuts": "Keyboard shortcuts",
-    "keyboard-shortcuts-in-game": "In-game keyboard shortcuts",
     "korea": "Korea",
     "language": "Language",
     "large": "Large",
     "layout": "Layout",
     "left-stick": "Left stick",
+    "left-stick-deadzone": "Left stick deadzone",
+    "left-trigger-range": "Left trigger range",
     "limit-fps": "Limit FPS",
     "load-failed-message": "Failed to run Better xCloud",
     "loading-screen": "Loading screen",
@@ -173,7 +177,6 @@ const Texts = {
     "lowest-quality": "Lowest quality",
     "manage": "Manage",
     "map-mouse-to": "Map mouse to",
-    "mapping": "Mapping",
     "may-not-work-properly": "May not work properly!",
     "menu": "Menu",
     "microphone": "Microphone",
@@ -230,6 +233,7 @@ const Texts = {
     "preferred-game-language": "Preferred game's language",
     "preset": "Preset",
     "press": "Press",
+    "press-any-button": "Press any button...",
     "press-esc-to-cancel": "Press Esc to cancel",
     "press-key-to-toggle-mkb": [
         (e: any) => `Press ${e.key} to toggle this feature`,
@@ -285,6 +289,8 @@ const Texts = {
     "renderer-configuration": "Renderer configuration",
     "right-click-to-unbind": "Right-click on a key to unbind it",
     "right-stick": "Right stick",
+    "right-stick-deadzone": "Right stick deadzone",
+    "right-trigger-range": "Right trigger range",
     "rocket-always-hide": "Always hide",
     "rocket-always-show": "Always show",
     "rocket-animation": "Rocket animation",
@@ -294,7 +300,6 @@ const Texts = {
     "screen": "Screen",
     "screenshot-apply-filters": "Apply video filters to screenshots",
     "section-all-games": "All games",
-    "section-byog": "Stream your own game",
     "section-most-popular": "Most popular",
     "section-native-mkb": "Play with mouse & keyboard",
     "section-news": "News",
@@ -384,7 +389,6 @@ const Texts = {
         (e: any) => `觸控遊玩佈局由 ${e.name} 提供`,
     ],
     "touch-controller": "Touch controller",
-    "transparent-background": "Transparent background",
     "true-achievements": "TrueAchievements",
     "ui": "UI",
     "unexpected-behavior": "May cause unexpected behavior",

src/utils/true-achievements.ts

@@ -32,7 +32,7 @@ export class TrueAchievements {
             onClick: this.onClick,
         });
 
-        this.$hiddenLink = CE<HTMLAnchorElement>('a', {
+        this.$hiddenLink = CE('a', {
             target: '_blank',
         });
     }

src/utils/utils.ts

@@ -18,8 +18,8 @@ export function checkForUpdate() {
 
     const CHECK_INTERVAL_SECONDS = 2 * 3600; // check every 2 hours
 
-    const currentVersion = getPref<VersionCurrent>(PrefKey.VERSION_CURRENT);
+    const currentVersion = getPref(PrefKey.VERSION_CURRENT);
-    const lastCheck = getPref<VersionLastCheck>(PrefKey.VERSION_LAST_CHECK);
+    const lastCheck = getPref(PrefKey.VERSION_LAST_CHECK);
     const now = Math.round((+new Date) / 1000);
 
     if (currentVersion === SCRIPT_VERSION && now - lastCheck < CHECK_INTERVAL_SECONDS) {
@@ -77,13 +77,10 @@ export function hashCode(str: string): number {
 
 
 export function renderString(str: string, obj: any){
-    return str.replace(/\$\{.+?\}/g, match => {
+    // Accept ${var} and $var$
-        const key = match.substring(2, match.length - 1);
+    return str.replace(/\$\{([A-Za-z0-9_$]+)\}|\$([A-Za-z0-9_$]+)\$/g, (match, p1, p2) => {
-        if (key in obj) {
+        const name = p1 || p2;
-            return obj[key];
+        return name in obj ? obj[name] : match;
-        }
-
-        return match;
     });
 }
 
@@ -158,13 +155,13 @@ export function clearAllData() {
 }
 
 export function blockAllNotifications() {
-    const blockFeatures = getPref<BlockFeature[]>(PrefKey.BLOCK_FEATURES);
+    const blockFeatures = getPref(PrefKey.BLOCK_FEATURES);
     const blockAll = [BlockFeature.FRIENDS, BlockFeature.NOTIFICATIONS_ACHIEVEMENTS, BlockFeature.NOTIFICATIONS_INVITES].every(value => blockFeatures.includes(value));
     return blockAll;
 }
 
 export function blockSomeNotifications() {
-    const blockFeatures = getPref<BlockFeature[]>(PrefKey.BLOCK_FEATURES);
+    const blockFeatures = getPref(PrefKey.BLOCK_FEATURES);
     if (blockAllNotifications()) {
         return false;
     }

src/utils/xcloud-interceptor.ts

@@ -11,7 +11,7 @@ import { getPreferredServerRegion } from "./region";
 import { BypassServerIps } from "@/enums/bypass-servers";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "./settings-storages/global-settings-storage";
-import { NativeMkbMode, StreamResolution, TouchControllerMode } from "@/enums/pref-values";
+import { NativeMkbMode, TouchControllerMode } from "@/enums/pref-values";
 import { BxEventBus } from "./bx-event-bus";
 
 export class XcloudInterceptor {
@@ -43,7 +43,7 @@ export class XcloudInterceptor {
     };
 
     private static async handleLogin(request: RequestInfo | URL, init?: RequestInit) {
-        const bypassServer = getPref<string>(PrefKey.SERVER_BYPASS_RESTRICTION);
+        const bypassServer = getPref(PrefKey.SERVER_BYPASS_RESTRICTION);
         if (bypassServer !== 'off') {
             const ip = BypassServerIps[bypassServer as keyof typeof BypassServerIps];
             ip && (request as Request).headers.set('X-Forwarded-For', ip);
@@ -110,8 +110,8 @@ export class XcloudInterceptor {
     private static async handlePlay(request: RequestInfo | URL, init?: RequestInit) {
         BxEventBus.Stream.emit('state.loading', {});
 
-        const PREF_STREAM_TARGET_RESOLUTION = getPref<StreamResolution>(PrefKey.STREAM_RESOLUTION);
+        const PREF_STREAM_TARGET_RESOLUTION = getPref(PrefKey.STREAM_RESOLUTION);
-        const PREF_STREAM_PREFERRED_LOCALE = getPref<StreamPreferredLocale>(PrefKey.STREAM_PREFERRED_LOCALE);
+        const PREF_STREAM_PREFERRED_LOCALE = getPref(PrefKey.STREAM_PREFERRED_LOCALE);
 
         const url = (typeof request === 'string') ? request : (request as Request).url;
         const parsedUrl = new URL(url);
@@ -174,7 +174,7 @@ export class XcloudInterceptor {
         }
 
         // Touch controller for all games
-        if (isFullVersion() && getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL) {
+        if (isFullVersion() && getPref(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL) {
             const titleInfo = STATES.currentStream.titleInfo;
             if (titleInfo?.details.hasTouchSupport) {
                 TouchController.disable();
@@ -200,11 +200,11 @@ export class XcloudInterceptor {
 
         let overrideMkb: boolean | null = null;
 
-        if (getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON || (STATES.currentStream.titleInfo && BX_FLAGS.ForceNativeMkbTitles?.includes(STATES.currentStream.titleInfo.details.productId))) {
+        if (getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON || (STATES.currentStream.titleInfo && BX_FLAGS.ForceNativeMkbTitles?.includes(STATES.currentStream.titleInfo.details.productId))) {
             overrideMkb = true;
         }
 
-        if (getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.OFF) {
+        if (getPref(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.OFF) {
             overrideMkb = false;
         }
 

src/utils/xhome-interceptor.ts

@@ -8,7 +8,7 @@ import { PrefKey } from "@/enums/pref-keys";
 import { getPref } from "./settings-storages/global-settings-storage";
 import type { RemotePlayConsoleAddresses } from "@/types/network";
 import { RemotePlayManager } from "@/modules/remote-play-manager";
-import { StreamResolution, TouchControllerMode } from "@/enums/pref-values";
+import { TouchControllerMode } from "@/enums/pref-values";
 import { BxEventBus } from "./bx-event-bus";
 
 export class XhomeInterceptor {
@@ -71,7 +71,7 @@ export class XhomeInterceptor {
     private static async handleInputConfigs(request: Request | URL, opts: { [index: string]: any }) {
         const response = await NATIVE_FETCH(request);
 
-        if (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.ALL) {
+        if (getPref(PrefKey.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.ALL) {
             return response;
         }
 
@@ -152,7 +152,7 @@ export class XhomeInterceptor {
         headers.authorization = `Bearer ${RemotePlayManager.getInstance()!.getXhomeToken()}`;
 
         // Patch resolution
-        const osName = getOsNameFromResolution(getPref<StreamResolution>(PrefKey.REMOTE_PLAY_STREAM_RESOLUTION));
+        const osName = getOsNameFromResolution(getPref(PrefKey.REMOTE_PLAY_STREAM_RESOLUTION));
         headers['x-ms-device-info'] = JSON.stringify(generateMsDeviceInfo(osName));
 
         const opts: Record<string, any> = {

src/web-components/bx-dual-number-stepper.ts

@@ -0,0 +1,195 @@
+import type { DualNumberStepperParams } from "@/types/setting-definition";
+import { CE, escapeCssSelector } from "@/utils/html";
+import { setNearby } from "@/utils/navigation-utils";
+import type { BxHtmlSettingElement } from "@/utils/setting-element";
+import { t } from "@/utils/translation";
+
+
+export class BxDualNumberStepper extends HTMLInputElement implements BxHtmlSettingElement  {
+    private controlValues!: [number, number];
+    private controlMin!: number;
+    private controlMinDiff!: number;
+    private controlMax!: number;
+
+    private steps!: number;
+    private options!: DualNumberStepperParams;
+    private onChange: any;
+
+    private $text!: HTMLSpanElement;
+    private $rangeFrom!: HTMLInputElement;
+    private $rangeTo!: HTMLInputElement;
+    private $activeRange!: HTMLInputElement;
+
+    onRangeInput!: typeof BxDualNumberStepper['onRangeInput'];
+
+    setValue!: typeof BxDualNumberStepper['setValues'];
+    getValue!: typeof BxDualNumberStepper['getValues'];
+    normalizeValue!: typeof BxDualNumberStepper['normalizeValues'];
+
+    static create(key: string, values: [number, number], options: DualNumberStepperParams, onChange?: any) {
+        options.suffix = options.suffix || '';
+        options.disabled = !!options.disabled;
+
+        let $text: HTMLSpanElement;
+        let $rangeFrom: HTMLInputElement;
+        let $rangeTo: HTMLInputElement;
+
+        const $wrapper = CE('div', {
+            class: 'bx-dual-number-stepper',
+            id: `bx_setting_${escapeCssSelector(key)}`,
+        },
+            $text = CE('span') as HTMLSpanElement,
+        ) as BxDualNumberStepper;
+
+        const self = $wrapper;
+        self.$text = $text;
+        self.onChange = onChange;
+
+        self.onRangeInput = BxDualNumberStepper.onRangeInput.bind(self);
+
+        self.controlMin = options.min;
+        self.controlMax = options.max;
+        self.controlMinDiff = options.minDiff;
+
+        self.options = options;
+        self.steps = Math.max(options.steps || 1, 1);
+
+        if (options.disabled) {
+            (self as any).disabled = true;
+            return self;
+        }
+
+        $rangeFrom = CE('input', {
+            // id: `bx_inp_setting_${key}`,
+            type: 'range',
+            min: self.controlMin,
+            max: self.controlMax,
+            step: self.steps,
+            tabindex: 0,
+        });
+        $rangeTo = $rangeFrom.cloneNode() as HTMLInputElement;
+
+        self.$rangeFrom = $rangeFrom;
+        self.$rangeTo = $rangeTo;
+        self.$activeRange = $rangeFrom;
+        self.getValue = BxDualNumberStepper.getValues.bind(self);
+        self.setValue = BxDualNumberStepper.setValues.bind(self);
+
+        $rangeFrom.addEventListener('input', self.onRangeInput);
+        $rangeTo.addEventListener('input', self.onRangeInput);
+
+        self.addEventListener('input', self.onRangeInput);
+        self.append(CE('div', {}, $rangeFrom, $rangeTo));
+
+        // Set values
+        BxDualNumberStepper.setValues.call(self, values);
+
+        self.addEventListener('contextmenu', BxDualNumberStepper.onContextMenu);
+        setNearby(self, {
+            focus: $rangeFrom,
+            orientation: 'vertical',
+        });
+
+        Object.defineProperty(self, 'value', {
+            get() { return self.controlValues; },
+            set(value) {
+                let from: number | undefined;
+                let to: number | undefined;
+                if (typeof value === 'string') {
+                    const tmp = value.split(',');
+                    from = parseInt(tmp[0]);
+                    to = parseInt(tmp[1]);
+                } else if (Array.isArray(value)) {
+                    [from, to] = value;
+                }
+
+                if (typeof from !== 'undefined' && typeof to !== 'undefined') {
+                    BxDualNumberStepper.setValues.call(self, [from, to]);
+                }
+            },
+        });
+
+        return self;
+    }
+
+    private static setValues(this: BxDualNumberStepper, values: [number, number] | undefined | null) {
+        let from: number;
+        let to: number;
+
+        if (values) {
+            [from, to] = BxDualNumberStepper.normalizeValues.call(this, values);
+        } else {
+            from = this.controlMin;
+            to = this.controlMax;
+            values = [from, to];
+        }
+
+        this.controlValues = [from, to];
+        this.$text.textContent = BxDualNumberStepper.updateTextValue.call(this);
+
+        this.$rangeFrom.value = from.toString();
+        this.$rangeTo.value = to.toString();
+
+        const ratio = 100 / (this.controlMax - this.controlMin);
+        this.style.setProperty('--from', (ratio * (from - this.controlMin)) + '%');
+        this.style.setProperty('--to', (ratio * (to - this.controlMin)) + '%');
+    }
+
+    private static getValues(this: BxDualNumberStepper) {
+        return this.controlValues || [this.controlMin, this.controlMax];
+    }
+
+    private static normalizeValues(this: BxDualNumberStepper, values: [number, number]): [number, number] {
+        let [from, to] = values;
+
+        if (this.$activeRange === this.$rangeFrom) {
+            to = Math.min(this.controlMax, to);
+            from = Math.min(from, to);
+            from = Math.min(to - this.controlMinDiff, from);
+        } else {
+            from = Math.max(this.controlMin, from);
+            to = Math.max(from, to);
+            to = Math.max(this.controlMinDiff + from, to);
+        }
+
+        to = Math.min(this.controlMax, to);
+        from = Math.min(from, to);
+
+        return [from, to];
+    }
+
+    private static onRangeInput(this: BxDualNumberStepper, e: Event) {
+        this.$activeRange = e.target as HTMLInputElement;
+        const values = BxDualNumberStepper.normalizeValues.call(this, [parseInt(this.$rangeFrom.value), parseInt(this.$rangeTo.value)]);
+        BxDualNumberStepper.setValues.call(this, values);
+
+        if (!(e as any).ignoreOnChange && this.onChange) {
+            this.onChange(e, values);
+        }
+    }
+
+    private static onContextMenu(e: Event) {
+        e.preventDefault();
+    }
+
+    private static updateTextValue(this: BxDualNumberStepper): string | null {
+        const values = this.controlValues;
+
+        let textContent = null;
+        if (this.options.customTextValue) {
+            textContent = this.options.customTextValue(values, this.controlMin, this.controlMax);
+        }
+
+        if (textContent === null) {
+            const [from, to] = values;
+            if (from === this.controlMin && to === this.controlMax) {
+                textContent = t('default');
+            } else {
+                const pad = to.toString().length;
+                textContent = `${from.toString().padStart(pad)} - ${to.toString().padEnd(pad)}${this.options.suffix}`;
+            }
+        }
+
+        return textContent;
+    }
+}

src/web-components/bx-key-binding-button.ts

@@ -35,10 +35,10 @@ export class BxKeyBindingButton extends HTMLButtonElement {
     unbindKey!: typeof BxKeyBindingButton['unbindKey'];
 
     static create(options: BxKeyBindingButtonOptions) {
-        const $btn = CE<BxKeyBindingButton>('button', {
+        const $btn = CE('button', {
             class: 'bx-binding-button bx-focusable',
             type: 'button',
-        });
+        }) as BxKeyBindingButton;
 
         $btn.title = options.title;
         $btn.isPrompt = !!options.isPrompt;

src/web-components/bx-number-stepper.ts

@@ -44,7 +44,7 @@ export class BxNumberStepper extends HTMLInputElement implements BxHtmlSettingEl
         let $btnDec: HTMLButtonElement;
         let $range: HTMLInputElement | null;
 
-        const $wrapper = CE<BxNumberStepper>('div', {
+        const $wrapper = CE('div', {
             class: 'bx-number-stepper',
             id: `bx_setting_${escapeCssSelector(key)}`,
         },
@@ -67,7 +67,7 @@ export class BxNumberStepper extends HTMLInputElement implements BxHtmlSettingEl
                     tabindex: options.hideSlider ? 0 : -1,
                 }, '+') as HTMLButtonElement,
             ),
-        );
+        ) as BxNumberStepper;
 
         const self = $wrapper;
         self.$text = $text;
@@ -102,7 +102,7 @@ export class BxNumberStepper extends HTMLInputElement implements BxHtmlSettingEl
             return self;
         }
 
-        $range = CE<HTMLInputElement>('input', {
+        $range = CE('input', {
             id: `bx_inp_setting_${key}`,
             type: 'range',
             min: self.uiMin,
@@ -131,13 +131,13 @@ export class BxNumberStepper extends HTMLInputElement implements BxHtmlSettingEl
                 }
 
                 for (let i = start; i < max; i += options.exactTicks) {
-                    $markers.appendChild(CE<HTMLOptionElement>('option', {
+                    $markers.appendChild(CE('option', {
                         value: options.reverse ? -i : i,
                     }));
                 }
             } else {
                 for (let i = self.uiMin + options.ticks!; i < self.uiMax; i += options.ticks!) {
-                    $markers.appendChild(CE<HTMLOptionElement>('option', { value: i }));
+                    $markers.appendChild(CE('option', { value: i }));
                 }
             }
             self.appendChild($markers);

src/web-components/bx-select.ts

@@ -6,6 +6,7 @@ import { getPref } from "@/utils/settings-storages/global-settings-storage";
 import { ButtonStyle, CE, clearDataSet, createButton } from "@utils/html";
 
 export class BxSelectElement extends HTMLSelectElement {
+    isControllerFriendly!: boolean;
     private optionsList!: HTMLOptionElement[];
     private indicatorsList!: HTMLElement[];
     private $indicators!: HTMLElement;
@@ -13,14 +14,16 @@ export class BxSelectElement extends HTMLSelectElement {
     private isMultiple!: boolean;
 
     private $select!: HTMLSelectElement;
-    private $btnNext!: HTMLButtonElement;
+    private $btnNext!: HTMLButtonElement | undefined;
-    private $btnPrev!: HTMLButtonElement;
+    private $btnPrev!: HTMLButtonElement | undefined;
-    private $label!: HTMLLabelElement;
+    private $label!: HTMLSpanElement;
     private $checkBox!: HTMLInputElement;
 
     static create($select: HTMLSelectElement, forceFriendly=false): BxSelectElement {
-        // Return normal <select> if not using controller-friendly UI
+        const isControllerFriendly = forceFriendly || getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
-        if (!forceFriendly && !getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+
+        // Return normal <select> if it's non-controller friendly <select multiple>
+        if ($select.multiple && !isControllerFriendly) {
             $select.classList.add('bx-select');
             // @ts-ignore
             return $select;
@@ -29,13 +32,40 @@ export class BxSelectElement extends HTMLSelectElement {
         // Remove "tabindex" attribute from <select>
         $select.removeAttribute('tabindex');
 
-        const $wrapper = CE<BxSelectElement & NavigationElement>('div', { class: 'bx-select' });
+        const $wrapper = CE('div', {
-        const $btnPrev = createButton({
+            class: 'bx-select',
+            _dataset: {
+                controllerFriendly: isControllerFriendly,
+            },
+        }) as unknown as (BxSelectElement & NavigationElement);
+
+        // Copy bx-full-width class
+        if ($select.classList.contains('bx-full-width')) {
+            $wrapper.classList.add('bx-full-width');
+        }
+
+        let $content;
+
+        const self = $wrapper;
+        self.isControllerFriendly = isControllerFriendly;
+        self.isMultiple = $select.multiple;
+        self.visibleIndex = $select.selectedIndex;
+
+        self.$select = $select;
+        self.optionsList = Array.from($select.querySelectorAll<HTMLOptionElement>('option'));
+        self.$indicators = CE('div', { class: 'bx-select-indicators' });
+        self.indicatorsList = [];
+
+        let $btnPrev;
+        let $btnNext;
+        if (isControllerFriendly) {
+            // Setup prev/next buttons
+            $btnPrev = createButton({
                 label: '<',
                 style: ButtonStyle.FOCUSABLE,
             });
 
-        const $btnNext = createButton({
+            $btnNext = createButton({
                 label: '>',
                 style: ButtonStyle.FOCUSABLE,
             });
@@ -45,19 +75,22 @@ export class BxSelectElement extends HTMLSelectElement {
                 focus: $btnNext,
             });
 
-        let $content;
-
-        const self = $wrapper;
-        self.isMultiple = $select.multiple;
-        self.visibleIndex = $select.selectedIndex;
-
-        self.$select = $select;
-        self.optionsList = Array.from($select.querySelectorAll<HTMLOptionElement>('option'));
-        self.$indicators = CE('div', { class: 'bx-select-indicators' });
-        self.indicatorsList = [];
             self.$btnNext = $btnNext;
             self.$btnPrev = $btnPrev;
 
+            const boundOnPrevNext = BxSelectElement.onPrevNext.bind(self);
+            $btnPrev.addEventListener('click', boundOnPrevNext);
+            $btnNext.addEventListener('click', boundOnPrevNext);
+        } else {
+            // Setup 'change' event for $select
+            $select.addEventListener('change', e => {
+                self.visibleIndex = $select.selectedIndex;
+                // Re-render
+                BxSelectElement.resetIndicators.call(self);
+                BxSelectElement.render.call(self);
+            });
+        }
+
         if (self.isMultiple) {
             $content = CE('button', {
                 class: 'bx-select-value bx-focusable',
@@ -88,11 +121,7 @@ export class BxSelectElement extends HTMLSelectElement {
             );
         }
 
-        const boundOnPrevNext = BxSelectElement.onPrevNext.bind(self);
-
         $select.addEventListener('input', BxSelectElement.render.bind(self));
-        $btnPrev.addEventListener('click', boundOnPrevNext);
-        $btnNext.addEventListener('click', boundOnPrevNext);
 
         const observer = new MutationObserver((mutationList, observer) => {
             mutationList.forEach(mutation => {
@@ -114,9 +143,9 @@ export class BxSelectElement extends HTMLSelectElement {
 
         self.append(
             $select,
-            $btnPrev,
+            $btnPrev || '',
             $content,
-            $btnNext,
+            $btnNext || '',
         );
 
         BxSelectElement.resetIndicators.call(self);
@@ -208,7 +237,6 @@ export class BxSelectElement extends HTMLSelectElement {
             $btnNext,
             $btnPrev,
             $checkBox,
-            visibleIndex,
             optionsList,
             indicatorsList,
         } = this;
@@ -225,7 +253,7 @@ export class BxSelectElement extends HTMLSelectElement {
             const $parent = $option.parentElement!;
             const hasLabel = $parent instanceof HTMLOptGroupElement || this.$select.querySelector('optgroup');
 
-            content = $option.textContent || '';
+            content = $option.dataset.label || $option.textContent || '';
             if (content && hasLabel) {
                 const groupLabel = $parent instanceof HTMLOptGroupElement ? $parent.label : ' ';
 
@@ -253,8 +281,8 @@ export class BxSelectElement extends HTMLSelectElement {
 
         // Disable buttons when there is only one option or fewer
         const disableButtons = optionsList.length <= 1;
-        $btnPrev.classList.toggle('bx-inactive', disableButtons);
+        $btnPrev?.classList.toggle('bx-inactive', disableButtons);
-        $btnNext.classList.toggle('bx-inactive', disableButtons);
+        $btnNext?.classList.toggle('bx-inactive', disableButtons);
 
         // Update indicators
         for (let i = 0; i < optionsList.length; i++) {
@@ -269,7 +297,7 @@ export class BxSelectElement extends HTMLSelectElement {
                 $indicator.dataset.selected = 'true';
             }
 
-            if ($option.index === visibleIndex) {
+            if ($option.index === this.visibleIndex) {
                 $indicator.dataset.highlighted = 'true';
             }
         }