Use findAndParseParams() in "gameCardCustomIcons" patch

* Replace BxEvent.TITLE_INFO_READY with Event Bus

* Migrate more events

* Migrate stream events to event bus

* Migrate preset events

* Migrate more

* Fix dispatching "input" event twice in Number Stepper

.github/ISSUE_TEMPLATE/01-bug-report.yml

@@ -4,6 +4,13 @@ title: "[Bug] "
 labels:
   - bug
 body:
+  - type: markdown
+    attributes:
+      value: |
+        > [!note]
+        > - Use `Discussions` if you want to ask for question.
+        > - Non-English reports will be deleted. No exceptions.
+
   - type: checkboxes
     id: checklist
     attributes:
@@ -15,17 +22,37 @@ body:
           required: true
         - label: I will describe the problem with as much detail as possible.
           required: true
-  - type: checkboxes
-    id: questions
+
+  - type: dropdown
+    id: question_01
     attributes:
-      label: Questions
+      label: xCloud officially supports your country/region
       options:
-        - label: xCloud officially supports my country/region.
-          required: false
-        - label: "The bug doesn't happen when I disable Better xCloud script."
-          required: false
-        - label: "The bug didn't happen in previous Better xCloud version (name which one)."
-          required: false
+        - "No"
+        - "Yes"
+    validations:
+      required: true
+
+  - type: dropdown
+    id: question_02
+    attributes:
+      label: "The bug doesn't happen when you disable Better xCloud script"
+      options:
+        - "No"
+        - "Yes"
+    validations:
+      required: true
+
+  - type: dropdown
+    id: question_03
+    attributes:
+      label: "Previous Better xCloud versions didn't have this bug (name which one)"
+      options:
+        - "No"
+        - "Yes"
+    validations:
+      required: true
+
   - type: dropdown
     id: device_type
     attributes:
@@ -40,6 +67,7 @@ body:
       multiple: false
     validations:
       required: true
+
   - type: input
     id: device_name
     attributes:
@@ -48,6 +76,7 @@ body:
       placeholder: "e.g., Google Pixel 8"
     validations:
       required: true
+
   - type: input
     id: os
     attributes:
@@ -56,6 +85,7 @@ body:
       placeholder: "e.g., Android 14"
     validations:
       required: true
+  
   - type: input
     id: browser_version
     attributes:
@@ -64,6 +94,7 @@ body:
       placeholder: "e.g., Chrome 124.0, Android app 0.15.0"
     validations:
       required: true
+  
   - type: input
     id: extension_version
     attributes:
@@ -72,6 +103,7 @@ body:
       placeholder: "e.g., 3.5.0"
     validations:
       required: true
+  
   - type: input
     id: game_list
     attributes:
@@ -80,6 +112,7 @@ body:
       placeholder: "e.g., Halo"
     validations:
       required: false
+  
   - type: textarea
     id: reproduction
     attributes:
@@ -93,6 +126,7 @@ body:
         3. Error
     validations:
       required: true
+
   - type: textarea
     id: media
     attributes:

.github/ISSUE_TEMPLATE/02-feature-request.yml

@@ -13,7 +13,7 @@ body:
   - type: dropdown
     id: device_type
     attributes:
-      label: Device
+      label: Device type
       description: "Which device type is this feature for?"
       options:
         - All devices
@@ -23,10 +23,20 @@ body:
       multiple: false
     validations:
       required: true
+
+  - type: input
+    id: device_name
+    attributes:
+      label: "Device"
+      description: "Name of the device"
+      placeholder: "e.g., Google Pixel 8"
+    validations:
+      required: true
+  
   - type: textarea
     id: suggestion
     attributes:
       label: "Suggestion"
-      description: "What do you want to suggest?"
+      description: "What do you want to suggest? Include (mockup) screenshot if possible."
     validations:
       required: true

.github/workflows/stale.yaml

@@ -0,0 +1,25 @@
+name: 'Mark stale bug issues'
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * *'  # Runs daily at midnight UTC
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - uses: actions/stale@v9
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          stale-issue-message: |
+            This issue has been marked `stale` due to lack of recent activity. If there is no further activity, the issue will be closed in another 30 days.
+          close-issue-message: |
+            This issue has been closed due to inactivity. If you feel this is in error, please reopen the issue or file a new issue with the relevant details.
+          days-before-stale: 60
+          days-before-close: 30
+          stale-issue-label: 'stale'
+          only-issues: true
+          only-labels: 'bug'

.gitignore

@@ -1,3 +1,5 @@
+src/modules/patcher/patches/*.js
+
 # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
 
 # Logs

.vscode/settings.json

@@ -1,5 +1,12 @@
 {
   "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/game-card-icons.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
   }
 }

README.md

@@ -1,10 +1,17 @@
-# Better xCloud
-Improve Xbox Cloud Gaming (xCloud) experience on [xbox.com/play](https://www.xbox.com/play). It also allows you to use Remote Play on the xCloud website.  
+<div align="center">
+    <img src="https://raw.githubusercontent.com/redphx/better-xcloud/refs/heads/typescript/resources/logos/better-xcloud.png" width="256"/>  
+    <h1>Better xCloud</h1>
+    <!-- Latest Version Badge -->
+    <a href="https://github.com/redphx/better-xcloud/releases"><img src="https://img.shields.io/github/v/release/redphx/better-xcloud?label=latest" alt="Latest version" /></a>
+    <!-- Total Downloads Badge -->
+    <a href="https://github.com/redphx/better-xcloud/releases"><img src="https://img.shields.io/github/downloads/redphx/better-xcloud/total?color=%23e15f2c" alt="Total downloads" /></a>
+    <!-- Total Stars Badge -->
+    <a href="https://github.com/redphx/better-xcloud/stargazers"><img src="https://img.shields.io/github/stars/redphx/better-xcloud?color=%23cca400" alt="Total stars" /></a>
+</div>
 
-> [!TIP]
-> The Android app is in development at [redphx/better-xcloud-android](https://github.com/redphx/better-xcloud-android)
+### Improve Xbox Cloud Gaming (xCloud) experience on [xbox.com/play](https://www.xbox.com/play). It also allows you to use Remote Play on the xCloud website.  
 
-> [!IMPORTANT]
+> [!IMPORTANT]  
 > I only accept pull requests for:
 > - Custom touch controls
 > - Bug fixes
@@ -13,16 +20,12 @@ Improve Xbox Cloud Gaming (xCloud) experience on [xbox.com/play](https://www.xbo
 - Windows
 - macOS
 - Linux, SteamOS (including Steam Deck)
-- Android, Android TV (including Meta Quest VR Headsets)
+- Android, Android TV (including Meta Quest VR Headsets): [redphx/better-xcloud-android](https://github.com/redphx/better-xcloud-android)
 - iOS, iPadOS
 
 This script makes me spend more time with xCloud, and I hope the same thing happens to you.  
 If you like this project please give it a 🌟. Thank you 🙏.
 
-[![Latest version](https://img.shields.io/github/v/release/redphx/better-xcloud?label=latest)](https://github.com/redphx/better-xcloud/releases) 
-[![Total downloads](https://img.shields.io/github/downloads/redphx/better-xcloud/total?color=%23e15f2c)](https://github.com/redphx/better-xcloud/releases) 
-[![Total stars](https://img.shields.io/github/stars/redphx/better-xcloud?color=%23cca400)](https://github.com/redphx/better-xcloud/stargazers)  
-
 ## How to install
 Visit the [home page](https://better-xcloud.github.io) to know how to install Better xCloud on your device.
 

build.sh

@@ -5,8 +5,9 @@ build_all () {
     printf "\033c"
 
     # Build all variants
-    bun build.ts --version $1 --variant full
-    bun build.ts --version $1 --variant lite
+    bun build.ts --version $1 --variant full --pretty
+    bun build.ts --version $1 --variant full --meta
+    # bun build.ts --version $1 --variant lite
 
     # Wait for key
     read -p ">> Press Enter to build again..."

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
@@ -20,7 +20,59 @@ enum BuildTarget {
 
 type BuildVariant = 'full' | 'lite';
 
-const postProcess = (str: string): string => {
+const MINIFY_SYNTAX = true;
+
+function minifySvgImports(str: string): string {
+    // Minify SVG imports
+    const svgMap = {};
+    str = str.replaceAll(/var ([\w_]+) = `(<svg.*?\n)`;\n\n/gsm, (match, p1, p2) => {
+        // Remove new lines in SVG
+        p2 = p2.replaceAll(/\n\s*/g, '');
+        svgMap[p1] = '"' + p2.trim() + '"';
+
+        return '';
+    });
+
+    for (const name in svgMap) {
+        str = str.replace(name + ',', svgMap[name] + ',');
+        str = str.replace(name + '\n', svgMap[name] + '\n');
+    }
+
+    return str;
+}
+
+function minifyCodeImports(str: string): string {
+    str = str.replaceAll(/var ([\w_]+_default\d?) = `(.*?)`;/gsm, (match, p1, p2) => {
+        // Remove new lines in SVG
+        p2 = p2.replaceAll(/\n\s*/g, '\n');
+        p2 = p2.replaceAll(/\n\/\/.*/g, '\n');
+        p2 = p2.replaceAll(/^\/\/.*/g, '\n');
+        p2 = p2.replaceAll(/\n+/g, '\n');
+        p2 = p2.trim();
+
+        return `var ${p1} = \`${p2}\`;`;
+    });
+
+    return str;
+}
+
+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, pretty: boolean): string {
     // Unescape unicode charaters
     str = unescape((str.replace(/\\u/g, '%u')));
     // Replace \x00 to normal character
@@ -29,12 +81,7 @@ const postProcess = (str: string): string => {
     // Replace "globalThis." with "var";
     str = str.replaceAll('globalThis.', 'var ');
 
-    // 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, '');
+    str = removeComments(str);
 
     // Add ADDITIONAL CODE block
     str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
@@ -53,26 +100,12 @@ const postProcess = (str: string): string => {
         return p1 + ': ';
     });
 
-    // Minify SVG import code
-    const svgMap = {}
-    str = str.replaceAll(/var ([\w_]+) = ("<svg.*?");\n\n/g, (match, p1, p2) => {
-        // Remove new lines in SVG
-        p2 = p2.replaceAll(/\\n*\s*/g, '');
-
-        svgMap[p1] = p2;
-        return '';
-    });
-
-    for (const name in svgMap) {
-        str = str.replace(`: ${name}`, `: ${svgMap[name]}`);
-    }
+    str = minifySvgImports(str);
+    str = minifyCodeImports(str);
 
     // Collapse empty brackets
     str = str.replaceAll(/\{[\s\n]+\}/g, '{}');
 
-    // Collapse if/else blocks without curly braces
-    str = str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
-
     // Remove blank lines
     str = str.replaceAll(/\n([\s]*)\n/g, "\n");
 
@@ -83,18 +116,33 @@ const postProcess = (str: string): string => {
     str = str.replaceAll(/\\n\/\/.*?(?=\\n)/g, '');
 
     // Replace ${"time".toUpperCase()} with "TIME"
-    str = str.replaceAll(/\$\{"([^"]+)"\.toUpperCase\(\)\}/g, (match, p1) => {
-        return p1.toUpperCase();
-    });
+    // str = str.replaceAll(/\$\{"([^"]+)"\.toUpperCase\(\)\}/g, (match, p1) => {
+    //    return p1.toUpperCase();
+    // });
 
     // Replace " (e) =>" to " e =>"
     // str = str.replaceAll(/ \(([^\s,.$()]+)\) =>/g, ' $1 =>');
 
     // Set indent to 1 space
-    str = str.replaceAll(/\n(\s+)/g, (match, p1) => {
-        const len = p1.length / 2;
-        return '\n' + ' '.repeat(len);
-    });
+    if (MINIFY_SYNTAX) {
+        str = minifyIfElse(str);
+
+        str = str.replaceAll(/\n(\s+|\})/g, (match, p1) => {
+            if (pretty) {
+                if (p1 === '}') {
+                    return '\n}';
+                } else {
+                    const len = p1.length / 2;
+                    return '\n' + ' '.repeat(len);
+                }
+            } else {
+                return (p1 === '}') ? '}' : '';
+            }
+        });
+    }
+
+    // Fix unicode regex in Patcher.optimizeGameSlugGenerator
+    str = str.replaceAll('^\\™', '^\\\\u2122');
 
     assert(str.includes('/* ADDITIONAL CODE */'));
     assert(str.includes('window.BX_EXPOSED = BxExposed'));
@@ -104,7 +152,49 @@ 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, params: { version: string, variant: BuildVariant, pretty: boolean, meta: boolean }, config: any={}) {
+    const { version, variant, pretty, meta } = params;
+
     console.log('-- Target:', target);
     const startTime = performance.now();
 
@@ -118,17 +208,22 @@ const build = async (target: BuildTarget, version: string, variant: BuildVariant
     }
 
     let outputMetaName = outputScriptName;
+    if (pretty) {
+        outputScriptName += '.pretty';
+    }
     outputScriptName += '.user.js';
     outputMetaName += '.meta.js';
 
     const outDir = './dist';
 
+    await buildPatches();
+
     let output = await Bun.build({
         entrypoints: ['src/index.ts'],
         outdir: outDir,
         naming: outputScriptName,
         minify: {
-            syntax: true,
+            syntax: MINIFY_SYNTAX,
         },
         define: {
             'Bun.env.BUILD_TARGET': JSON.stringify(target),
@@ -144,7 +239,7 @@ const build = async (target: BuildTarget, version: string, variant: BuildVariant
 
     const {path} = output.outputs[0];
     // Get generated file
-    let result = postProcess(await readFile(path, 'utf-8'));
+    let result = postProcess(await readFile(path, 'utf-8'), pretty);
 
     // Replace [[VERSION]] with real value
     let scriptHeader: string;
@@ -159,7 +254,7 @@ const build = async (target: BuildTarget, version: string, variant: BuildVariant
     await Bun.write(path, scriptHeader + result);
 
     // Create meta file (don't build if it's beta version)
-    if (!version.includes('beta') && variant === 'full') {
+    if (meta && !version.includes('beta') && variant === 'full') {
         await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
     }
 
@@ -192,6 +287,16 @@ const { values, positionals } = parseArgs({
             type: 'string',
             default: 'full',
         },
+
+        pretty: {
+            type: 'boolean',
+            default: false,
+        },
+
+        meta: {
+            type: 'boolean',
+            default: false,
+        },
     },
     strict: true,
     allowPositionals: true,
@@ -199,6 +304,8 @@ const { values, positionals } = parseArgs({
     values: {
         version: string,
         variant: BuildVariant,
+        pretty: boolean,
+        meta: boolean,
     },
     positionals: string[],
 };
@@ -217,7 +324,7 @@ async function main() {
     const config = {};
     console.log(`Building: VERSION=${values['version']}, VARIANT=${values['variant']}`);
     for (const target of buildTargets) {
-        await build(target, values['version']!!, values['variant'], config);
+        await build(target, values, config);
     }
 
     console.log('')

bun.lock

@@ -0,0 +1,310 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "devDependencies": {
+        "@types/bun": "^1.2.10",
+        "@types/node": "^22.14.1",
+        "@types/stylus": "^0.48.43",
+        "@webgpu/types": "^0.1.60",
+        "eslint": "^9.25.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.20.0", "", { "dependencies": { "@eslint/object-schema": "^2.1.6", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ=="],
+
+    "@eslint/config-helpers": ["@eslint/config-helpers@0.2.1", "", {}, "sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw=="],
+
+    "@eslint/core": ["@eslint/core@0.14.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg=="],
+
+    "@eslint/eslintrc": ["@eslint/eslintrc@3.3.1", "", { "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-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ=="],
+
+    "@eslint/js": ["@eslint/js@9.27.0", "", {}, "sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA=="],
+
+    "@eslint/object-schema": ["@eslint/object-schema@2.1.6", "", {}, "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA=="],
+
+    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.3.1", "", { "dependencies": { "@eslint/core": "^0.14.0", "levn": "^0.4.1" } }, "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w=="],
+
+    "@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.2", "", {}, "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ=="],
+
+    "@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.2.15", "", { "dependencies": { "bun-types": "1.2.15" } }, "sha512-U1ljPdBEphF0nw1MIk0hI7kPg7dFdPyM7EenHsp6W5loNHl7zqy6JQf/RKCgnUn2KDzUpkBwHPnEJEjII594bA=="],
+
+    "@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.15.24", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-w9CZGm9RDjzTh/D+hFwlBJ3ziUaVw7oufKA3vOFSOZlzmW9AkZnfjPb+DLnrV6qtgL/LNmP0/2zBNCFHL3F0ng=="],
+
+    "@types/stylus": ["@types/stylus@0.48.43", "", { "dependencies": { "@types/node": "*" } }, "sha512-72dv/zdhuyXWVHUXG2VTPEQdOG+oen95/DNFx2aMFFaY6LoITI6PwEqf5x31JF49kp2w9hvUzkNfTGBIeg61LQ=="],
+
+    "@webgpu/types": ["@webgpu/types@0.1.61", "", {}, "sha512-w2HbBvH+qO19SB5pJOJFKs533CdZqxl3fcGonqL321VHkW7W/iBo6H8bjDy6pr/+pbMwIu5dnuaAxH7NxBqUrQ=="],
+
+    "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.2.15", "", { "dependencies": { "@types/node": "*" } }, "sha512-NarRIaS+iOaQU1JPfyKhZm4AsUOrwUOqRNHY0XxI8GI8jYxiLXLcdjYMG9UKS+fwWasc1uw1htV9AX24dD+p4w=="],
+
+    "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.27.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.20.0", "@eslint/config-helpers": "^0.2.1", "@eslint/core": "^0.14.0", "@eslint/eslintrc": "^3.3.1", "@eslint/js": "9.27.0", "@eslint/plugin-kit": "^0.3.1", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@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.3.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-ixRawFQuMB9DZ7fjU3iGGganFDp3+45bPOdaRurcFHSXO1e/sYwUX/FtQZpLZJR6SjMoJH8hR2pPEAfDyCoU2Q=="],
+
+    "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.3.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ=="],
+
+    "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.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
+
+    "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=="],
+
+    "ast-metadata-inferer/@mdn/browser-compat-data": ["@mdn/browser-compat-data@5.6.26", "", {}, "sha512-7NdgdOR7lkzrN70zGSULmrcvKyi/aJjpTJRCbuy8IZuHiLkPTvsr10jW0MJgWzK2l2wTmhdQvegTw6yNU5AVNQ=="],
+
+    "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=="],
+
+    "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=="],
+  }
+}

dist/better-xcloud.meta.js

@@ -1,5 +1,5 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      5.8.5
+// @version      6.6.1
 // ==/UserScript==

package.json

@@ -10,14 +10,15 @@
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.10",
-    "@types/node": "^22.7.5",
+    "@types/bun": "^1.2.15",
+    "@types/node": "^22.15.24",
     "@types/stylus": "^0.48.43",
-    "eslint": "^9.12.0",
-    "eslint-plugin-compat": "^6.0.1",
-    "stylus": "^0.63.0"
+    "@webgpu/types": "^0.1.61",
+    "eslint": "^9.27.0",
+    "eslint-plugin-compat": "^6.0.2",
+    "stylus": "^0.64.0"
   },
   "peerDependencies": {
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.2"
   }
 }

scripts/custom-flags.user.js

@@ -24,8 +24,12 @@ How to:
 const enabled = true;
 
 enabled && (window.BX_FLAGS = {
+    // Toggle WebGPU Renderer
+    // https://github.com/redphx/better-xcloud/discussions/657
+    EnableWebGPURenderer: false,
+    
     /*
-    Add titleId of the game(s) you want to add here.
+    Add titleId of the game(s) you want to test native M&KB support here.
     Keep in mind: this method only works with some games.
 
     Example:

src/assets/css/button.styl

@@ -37,6 +37,7 @@
     &:disabled {
         cursor: default;
         background-color: unquote('rgb(var(--button-disabled-rgb))');
+        opacity: 0.5;
     }
 
     &.bx-ghost {
@@ -67,6 +68,24 @@
         }
     }
 
+    &.bx-warning {
+        --button-rgb: var(--bx-warning-button-rgb);
+
+        &:not([disabled]):active {
+            --button-active-rgb: var(--bx-warning-button-active-rgb);
+        }
+
+        &:not([disabled]):not(:active) {
+            &:hover, &.bx-focusable:focus {
+                --button-hover-rgb: var(--bx-warning-button-hover-rgb);
+            }
+        }
+
+        &:disabled {
+            --button-disabled-rgb: var(--bx-warning-button-disabled-rgb);
+        }
+    }
+
     &.bx-danger {
         --button-rgb: var(--bx-danger-button-rgb);
 
@@ -88,7 +107,6 @@
     &.bx-frosted {
         --button-alpha: 0.2;
         background-color: unquote('rgba(var(--button-rgb), var(--button-alpha))');
-        backdrop-filter: blur(4px) brightness(1.5);
 
         &:not([disabled]):not(:active) {
             &:hover, &.bx-focusable:focus {
@@ -107,6 +125,7 @@
 
     &.bx-circular {
         border-radius: var(--bx-button-height);
+        width: var(--bx-button-height);
         height: var(--bx-button-height);
     }
 
@@ -126,8 +145,28 @@
         overflow: hidden;
         white-space: nowrap;
 
+        // Text with icon
         &:not(:only-child) {
-            margin-left: 10px;
+            margin-inline-start: 8px;
+        }
+    }
+
+    &.bx-button-multi-lines {
+        height: auto;
+        text-align: left;
+        padding: 10px;
+
+        span {
+            line-height: unset;
+            display: block;
+
+            &:last-of-type {
+                    text-transform: none;
+                    font-weight: normal;
+                    font-family: "Segoe Sans Variable Text";
+                    font-size: 12px;
+                    margin-top: 4px;
+            }
         }
     }
 }

src/assets/css/controller.styl

@@ -0,0 +1,89 @@
+.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;
+            }
+        }
+    }
+}
+
+.bx-controller-customization-summary {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    margin-top: 10px;
+
+    span {
+        font-family: var(--bx-promptfont);
+        font-size: 24px;
+        border-radius: 6px;
+        background: #131313;
+        color: #fff;
+        display: inline-block;
+        padding: 2px;
+        text-align: center;
+    }
+}

src/assets/css/guide-menu.styl

@@ -7,11 +7,11 @@
         margin-bottom: 0 !important;
     }
 
-    html[data-xds-platform=tv] & {
+    body[data-bx-media-type=tv] & {
         flex-direction: column;
     }
 
-    html:not([data-xds-platform=tv]) & {
+    body:not([data-bx-media-type=tv]) & {
         flex-direction: row;
 
         > button:first-of-type {
@@ -34,7 +34,7 @@
         flex-direction: row;
         gap: 12px;
 
-        html[data-xds-platform=tv] & {
+        body[data-bx-media-type=tv] & {
             flex-direction: column;
 
             button {
@@ -42,7 +42,7 @@
             }
         }
 
-        html:not([data-xds-platform=tv]) & {
+        body:not([data-bx-media-type=tv]) & {
             button {
                 span {
                     display: none;

src/assets/css/key-binding-dialog.styl

@@ -1,12 +1,12 @@
-.bx-dialog-overlay {
+.bx-key-binding-dialog-overlay {
     position: fixed;
     inset: 0;
-    z-index: var(--bx-dialog-overlay-z-index);
+    z-index: var(--bx-key-binding-dialog-overlay-z-index);
     background: black;
     opacity: 50%;
 }
 
-.bx-dialog {
+.bx-key-binding-dialog {
     display: flex;
     flex-flow: column;
     max-height: 90vh;
@@ -16,9 +16,9 @@
     margin-right: -50%;
     transform: translate(-50%, -50%);
     min-width: 420px;
-    padding: 20px;
+    padding: 16px;
     border-radius: 8px;
-    z-index: var(--bx-dialog-z-index);
+    z-index: var(--bx-key-binding-dialog-z-index);
     background: #1a1b1e;
     color: #fff;
     font-weight: 400;
@@ -33,26 +33,13 @@
     }
 
     h2 {
-        display: flex;
         margin-bottom: 12px;
-
-        b {
-            flex: 1;
-            color: #fff;
-            display: block;
-            font-family: var(--bx-title-font);
-            font-size: 26px;
-            font-weight: 400;
-            line-height: var(--bx-button-height);
-        }
-    }
-
-    &.bx-binding-dialog {
-        h2 {
-            b {
-                font-family: var(--bx-promptfont-font) !important;
-            }
-        }
+        color: #fff;
+        display: block;
+        font-family: var(--bx-title-font);
+        font-size: 32px;
+        font-weight: 400;
+        line-height: var(--bx-button-height);
     }
 
     > div {
@@ -85,11 +72,26 @@
             background-color: #515863;
         }
     }
+
+    ul {
+        margin-bottom: 1rem;
+
+        li {
+            display: none;
+        }
+
+        &[data-flags*="[1]"] > li[data-flag="1"],
+        &[data-flags*="[2]"] > li[data-flag="2"],
+        &[data-flags*="[4]"] > li[data-flag="4"],
+        &[data-flags*="[8]"] > li[data-flag="8"] {
+            display: list-item;
+        }
+    }
 }
 
 
 @media screen and (max-width: 450px) {
-    .bx-dialog {
+    .bx-key-binding-dialog {
         min-width: 100%;
     }
 }

src/assets/css/misc.styl

@@ -1,3 +1,12 @@
+.bx-product-details-icons {
+    padding: 8px;
+    border-radius: 4px;
+
+    svg {
+        margin-right: 8px;
+    }
+}
+
 .bx-product-details-buttons {
     display: flex;
     gap: 10px;

src/assets/css/mkb.styl

@@ -4,15 +4,6 @@
     flex: 1;
     padding-bottom: 10px;
     overflow: hidden;
-
-    select:disabled {
-        -webkit-appearance: none;
-        background: transparent;
-        text-align-last: right;
-        text-align: right;
-        border: none;
-        color: #fff;
-    }
 }
 
 .bx-mkb-pointer-lock-msg {
@@ -20,13 +11,12 @@
     -webkit-user-select: none;
     position: fixed;
     left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
+    bottom: 40px;
+    transform: translateX(-50%);
     margin: auto;
     background: #151515;
     z-index: var(--bx-mkb-pointer-lock-msg-z-index);
     color: #fff;
-    text-align: center;
     font-weight: 400;
     font-family: "Segoe UI", Arial, Helvetica, sans-serif;
     font-size: 1.3rem;
@@ -34,117 +24,55 @@
     border-radius: 8px;
     align-items: center;
     box-shadow: 0 0 6px #000;
-    min-width: 220px;
+    min-width: 300px;
     opacity: 0.9;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 
     &:hover {
         opacity: 1;
     }
 
-    > div:first-of-type {
-        display: flex;
-        flex-direction: column;
+    > p {
+        margin: 0;
+        width: 100%;
+        font-size: 22px;
+        margin-bottom: 4px;
+        font-weight: bold;
         text-align: left;
     }
 
-    p {
-        margin: 0;
+    > div {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
 
-        &:first-child {
-            font-size: 22px;
-            margin-bottom: 4px;
-            font-weight: bold;
-        }
-
-        &:last-child {
-            font-size: 12px;
-            font-style: italic;
-        }
-    }
-
-    > div:last-of-type {
-        margin-top: 10px;
-
-        &[data-type='native'] {
-            button {
-                &:first-of-type {
-                    margin-bottom: 8px;
-                }
+        gap: 10px;
+        button {
+            &:first-of-type {
+                flex-shrink: 1;
             }
-        }
 
-        &[data-type='virtual'] {
-            div {
-                display: flex;
-                flex-flow: row;
-                margin-top: 8px;
-
-                button {
-                    flex: 1;
-
-                    &:first-of-type {
-                        margin-right: 5px;
-                    }
-
-                    &:last-of-type {
-                        margin-left: 5px;
-                    }
-                }
+            &:last-of-type {
+                flex-grow: 1;
             }
         }
     }
 }
 
-.bx-mkb-preset-tools {
-    display: flex;
-    margin-bottom: 12px;
-
-    select {
-        flex: 1;
-    }
-
-    button {
-        margin-left: 6px;
-    }
-}
-
-
-.bx-mkb-settings-rows {
-    flex: 1;
-    overflow: scroll;
-}
-
 .bx-mkb-key-row {
     display: flex;
     margin-bottom: 10px;
     align-items: center;
+    gap: 20px;
 
 
     label {
         margin-bottom: 0;
         font-family: var(--bx-promptfont-font);
-        font-size: 26px;
+        font-size: 32px;
         text-align: center;
-        width: 26px;
-        height: 32px;
-        line-height: 32px;
-    }
-
-    button {
-        flex: 1;
-        height: 32px;
-        line-height: 32px;
-        margin: 0 0 0 10px;
-        background: transparent;
-        border: none;
-        color: white;
-        border-radius: 0;
-        border-left: 1px solid #373737;
-
-        &:hover {
-            background: transparent;
-            cursor: default;
-        }
     }
 }
 
@@ -181,10 +109,58 @@
 
 .bx-mkb-note {
     display: block;
-    margin: 16px 0 10px;
+    margin: 0 0 10px;
     font-size: 12px;
+    text-align: center;
+}
 
-    &:first-of-type {
-        margin-top: 0;
+button.bx-binding-button {
+    flex: 1;
+    min-height: 38px;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    align-self: center;
+    padding: 0 6px;
+
+    &:disabled {
+        background: #131416;
+        padding: 0 8px;
+    }
+
+    &:not(:disabled) {
+        border: 2px solid transparent;
+        border-top: none;
+        border-bottom: 4px solid #252525;
+        background: #3b3b3b;
+        cursor: pointer;
+
+        &:hover, &.bx-focusable:focus {
+            background: #20b217;
+            border-bottom-color: #186c13;
+        }
+
+        &:active {
+            background: #16900f;
+            border-bottom: 3px solid #0c4e08;
+            border-left-width: 2px;
+            border-right-width: 2px;
+        }
+
+        &.bx-focusable:focus {
+            &::after {
+                top: -6px;
+                left: -8px;
+                right: -8px;
+                bottom: -10px;
+            }
+        }
+    }
+
+    .bx-settings-row .bx-binding-button-wrapper & {
+        min-width: 60px;
     }
 }

src/assets/css/navigation-dialog.styl

@@ -6,6 +6,32 @@
     *:focus {
         outline: none !important;
     }
+
+    select:disabled {
+        -webkit-appearance: none;
+        text-align-last: right;
+        text-align: right;
+        color: #fff;
+        background: #131416;
+        border: none;
+        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 {
@@ -21,3 +47,171 @@
         background: transparent;
     }
 }
+
+.bx-centered-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    color: white;
+    background: #1a1b1e;
+    border-radius: 10px;
+    min-width: @css{ min(calc(100vw - 20px), 500px) };
+    max-width: calc(100vw - 20px);
+    margin: 0 0 0 auto;
+    padding: 16px;
+
+    max-height: 95vh;
+    flex-direction: column;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .bx-dialog-title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 10px;
+
+        p {
+            padding: 0;
+            margin: 0;
+            flex: 1;
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
+
+        button {
+            flex-shrink: 0;
+        }
+    }
+
+    .bx-dialog-content {
+        flex: 1;
+        padding: 6px;
+        overflow: auto;
+        overflow-x: hidden;
+    }
+
+    .bx-dialog-preset-tools {
+        display: flex;
+        margin-bottom: 12px;
+        gap: 6px;
+
+        button {
+            align-self: center;
+            min-height: 50px;
+        }
+    }
+
+    .bx-default-preset-note {
+        font-size: 12px;
+        font-style: italic;
+        text-align: center;
+        margin-bottom: 10px;
+    }
+}
+
+.bx-centered-dialog,
+.bx-settings-dialog {
+    input {
+        accent-color: var(--bx-primary-button-color);
+
+        &:focus {
+            accent-color: var(--bx-danger-button-color);
+        }
+    }
+
+    select:disabled {
+        -webkit-appearance: none;
+        background: transparent;
+        text-align-last: right;
+        border: none;
+        color: #fff;
+    }
+
+    select option:disabled {
+        display: none;
+    }
+
+    input[type=checkbox],
+    select {
+        &:focus {
+            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
+        }
+    }
+
+    a {
+        color: #1c9d1c;
+        text-decoration: none;
+
+        &:hover, &:focus {
+            color: #5dc21e;
+        }
+    }
+
+    label {
+        margin: 0;
+    }
+}
+
+.bx-controller-shortcuts-manager-container {
+    .bx-shortcut-note {
+        margin-top: 10px;
+        font-size: 14px;
+        text-align: center;
+    }
+
+    .bx-shortcut-row {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 10px;
+        align-items: center;
+
+        label.bx-prompt {
+            flex-shrink: 0;
+            font-size: 32px;
+            margin: 0;
+
+            &::first-letter {
+                letter-spacing: 6px;
+            }
+        }
+    }
+
+    select:disabled {
+        text-align: left;
+        text-align-last: left;
+    }
+}
+
+.bx-keyboard-shortcuts-manager-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    fieldset {
+        background: #2a2a2a;
+        border: 1px solid #2a2a2a;
+        border-radius: 4px;
+        padding: 4px;
+    }
+
+    legend {
+        width: auto;
+        padding: 4px 8px;
+        margin: 0 4px 4px;
+        background: #004f87;
+        box-shadow: 0px 2px 0px #071e3d;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    .bx-settings-row {
+        background: none;
+        padding: 10px;
+    }
+}

src/assets/css/number-stepper.styl

@@ -1,46 +1,55 @@
 .bx-number-stepper {
     text-align: center;
 
-    span {
-        display: inline-block;
-        min-width: 40px;
-        font-family: var(--bx-monospaced-font);
-        font-size: 13px;
-        margin: 0 4px;
-    }
+    > div {
+        display: flex;
+        align-items: center;
 
-    button {
-        border: none;
-        width: 24px;
-        height: 24px;
-        margin: 0;
-        line-height: 24px;
-        background-color: var(--bx-default-button-color);
-        color: #fff;
-        border-radius: 4px;
-        font-weight: bold;
-        font-size: 14px;
-        font-family: var(--bx-monospaced-font);
+        span {
+            flex: 1;
+            display: inline-block;
+            min-width: 40px;
+            font-family: var(--bx-monospaced-font);
+            white-space: pre;
+            font-size: 13px;
+            margin: 0 4px;
+        }
 
-        &:hover {
-            @media (hover: hover) {
+        button {
+            flex-shrink: 0;
+            border: none;
+            width: 24px;
+            height: 24px;
+            margin: 0;
+            line-height: 24px;
+            background-color: var(--bx-default-button-color);
+            color: #fff;
+            border-radius: 4px;
+            font-weight: bold;
+            font-size: 14px;
+            font-family: var(--bx-monospaced-font);
+
+            &:hover {
+                @media (hover: hover) {
+                    background-color: var(--bx-default-button-hover-color);
+                }
+            }
+
+            &:active {
                 background-color: var(--bx-default-button-hover-color);
             }
-        }
 
-        &:active {
-            background-color: var(--bx-default-button-hover-color);
-        }
-
-        &:disabled + span {
-            font-family: var(--bx-title-font);
+            &:disabled + span {
+                font-family: var(--bx-title-font);
+            }
         }
     }
 
-    input[type="range"] {
+    input[type=range] {
         display: block;
-        margin: 12px auto 2px;
-        width: 180px;
+        margin: 8px 0 2px auto;
+        min-width: 180px;
+        width: 100%;
         color: #959595 !important;
     }
 
@@ -48,9 +57,97 @@
         display: none;
     }
 
-    &[data-disabled=true] {
+    &[data-disabled=true], &[disabled=true] {
         input[type=range], button {
             display: none;
         }
     }
 }
+
+
+.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/remote-play.styl

@@ -1,23 +1,3 @@
-.bx-remote-play-container {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    color: white;
-    background: #1a1b1e;
-    border-radius: 10px;
-    width: 420px;
-    max-width: calc(100vw - 20px);
-    margin: 0 0 0 auto;
-    padding: 20px;
-
-    > .bx-button {
-        display: table;
-        margin: 0 0 0 auto;
-    }
-}
-
 .bx-remote-play-settings {
     margin-bottom: 12px;
     padding-bottom: 12px;
@@ -29,6 +9,7 @@
 
     label {
         flex: 1;
+        font-size: 14px;
 
         p {
             margin: 4px 0 0;
@@ -63,23 +44,24 @@
 
 .bx-remote-play-device-info {
     flex: 1;
+    align-self: center;
     padding: 4px 0;
 }
 
 .bx-remote-play-device-name {
-    font-size: 20px;
+    font-size: 14px;
     font-weight: bold;
     display: inline-block;
     vertical-align: middle;
 }
 
 .bx-remote-play-console-type {
-    font-size: 12px;
+    font-size: 8px;
     background: #004c87;
     color: #fff;
     display: inline-block;
-    border-radius: 14px;
-    padding: 2px 10px;
+    border-radius: 8px;
+    padding: 2px 6px;
     margin-left: 8px;
     vertical-align: middle;
 }

src/assets/css/root.styl

@@ -24,31 +24,34 @@ button_color(name, normal, hover, active, disabled)
 
     button_color('default', #2d3036, #515863, #222428, #8e8e8e);
     button_color('primary', #008746, #04b358, #044e2a, #448262);
-    button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
+    button_color('warning', #c16e04, #fa9005, #965603, #a2816c);
+    button_color('danger', #c10404, #e61d1d, #a26c6c, #bd8282);
 
-    --bx-fullscreen-text-z-index: 99999;
-    --bx-toast-z-index: 60000;
-    --bx-dialog-z-index: 50000;
+    --bx-fullscreen-text-z-index: 9999;
+    --bx-toast-z-index: 6000;
+    --bx-key-binding-dialog-z-index: 5010;
+    --bx-key-binding-dialog-overlay-z-index: 5000;
 
-    --bx-dialog-overlay-z-index: 40200;
-    --bx-stats-bar-z-index: 40100;
-    --bx-mkb-pointer-lock-msg-z-index: 40000;
+    --bx-stats-bar-z-index: 4010;
 
-    --bx-navigation-dialog-z-index: 30100;
-    --bx-navigation-dialog-overlay-z-index: 30000;
+    --bx-navigation-dialog-z-index: 3010;
+    --bx-navigation-dialog-overlay-z-index: 3000;
 
-    --bx-game-bar-z-index: 10000;
-    --bx-screenshot-animation-z-index: 9000;
-    --bx-wait-time-box-z-index: 1000;
+    --bx-mkb-pointer-lock-msg-z-index: 2000;
+
+    --bx-game-bar-z-index: 1000;
+    --bx-screenshot-animation-z-index: 200;
+    --bx-wait-time-box-z-index: 100;
 }
 
 @font-face {
     font-family: 'promptfont';
     src: url('https://redphx.github.io/better-xcloud/fonts/promptfont.otf');
+    unicode-range: U+2196-E011, U+27F6, U+FF31;
 }
 
 /* Fix Stream menu buttons not hiding */
-div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module__hiddenContainer]) {
+#StreamHud div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module__hiddenContainer]) {
     opacity: 0;
     pointer-events: none !important;
     position: absolute;
@@ -57,9 +60,35 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
 }
 
 /* Remove the "Cloud Gaming" text in header when the screen is too small */
+@media screen and (min-width: 641px) and (max-width: 767px) {
+    header {
+        button[class^="ExperienceDropdown-module__toggleButton"],
+        button[class^="XboxButton-module__headerXboxButton"] {
+            margin-right: 10px !important;
+        }
+
+        a[href="/play"],
+        button[class^="ExperienceDropdown-module__toggleButton"] {
+            > div {
+                > div {
+                    font-size: 12px;
+                }
+
+                > svg {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+        }
+    }
+}
+
 @media screen and (max-width: 640px) {
-    header a[href="/play"] {
-        display: none;
+    header {
+        a[href="/play"],
+        button[class^="ExperienceDropdown-module__toggleButton"] {
+            display: none;
+        }
     }
 }
 
@@ -71,6 +100,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;
 }
@@ -120,7 +153,11 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
 }
 
 .bx-prompt {
-    font-family: var(--bx-promptfont-font);
+    font-family: var(--bx-promptfont-font) !important;
+}
+
+.bx-monospaced {
+    font-family: var(--bx-monospaced-font) !important;
 }
 
 .bx-line-through {
@@ -138,8 +175,32 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     font-family: var(--bx-normal-font) !important;
 }
 
-select[multiple] {
+.bx-frosted {
+    backdrop-filter: blur(4px) brightness(1.5);
+}
+
+select[multiple], select[multiple]:focus {
     overflow: auto;
+    border: none;
+
+    option {
+        padding: 4px 6px;
+
+        &:checked {
+            color = #1a7bc0;
+            background: color linear-gradient(0deg, color 0%, color 100%);
+
+            &::before {
+                content: '☑️';
+                font-size: 12px;
+                display: inline-block;
+                margin-right: 6px;
+                height: 100%;
+                line-height: 100%;
+                vertical-align: middle;
+            }
+        }
+    }
 }
 
 /* Hide UI elements */
@@ -147,32 +208,26 @@ select[multiple] {
     display: none;
 }
 
-div[class*=NotFocusedDialog] {
-    position: absolute !important;
-    top: -9999px !important;
-    left: -9999px !important;
-    width: 0px !important;
-    height: 0px !important;
-}
+#game-stream {
+    div[class^=NotFocusedDialog] {
+        position: absolute !important;
+        top: -9999px !important;
+        left: -9999px !important;
+        width: 0px !important;
+        height: 0px !important;
+    }
 
-#game-stream video:not([src]) {
-    visibility: hidden;
-}
-
-/* Hide Controller icon in Game tiles */
-div[class*=SupportedInputsBadge] {
-    &:not(:has(:nth-child(2))), svg:first-of-type {
-        display: none;
+    video:not([src]) {
+        visibility: hidden;
     }
 }
 
-
 .bx-game-tile-wait-time {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
-    background: #0000008c;
+    background: rgba(0, 0, 0, 0.5);
     display: flex;
     border-radius: 4px 0 4px 0;
     align-items: center;
@@ -192,6 +247,18 @@ div[class*=SupportedInputsBadge] {
         font-weight: bold;
         margin-left: 2px;
     }
+
+    &[data-duration=short] {
+        background-color: rgba(0, 133, 133, 0.75);
+    }
+
+    &[data-duration=medium] {
+        background-color: rgba(213, 133, 0, 0.75);
+    }
+
+    &[data-duration=long] {
+        background-color: rgba(150, 0, 0, 0.75);
+    }
 }
 
 
@@ -226,3 +293,25 @@ div[class*=SupportedInputsBadge] {
         display: none;
     }
 }
+
+.bx-blink-me {
+  animation: bx-blinker 1s linear infinite;
+}
+
+@keyframes bx-blinker {
+  100% {
+    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;
@@ -31,42 +16,6 @@
         font-weight: normal;
         height: var(--bx-button-height);
     }
-
-    input {
-        accent-color: var(--bx-primary-button-color);
-
-        &:focus {
-            accent-color: var(--bx-danger-button-color);
-        }
-    }
-
-    select:disabled {
-        -webkit-appearance: none;
-        background: transparent;
-        text-align-last: right;
-        border: none;
-        color: #fff;
-    }
-
-    select option:disabled {
-        display: none;
-    }
-
-    input[type=checkbox],
-    select {
-        &:focus {
-            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
-        }
-    }
-
-    a {
-        color: #1c9d1c;
-        text-decoration: none;
-
-        &:hover, &:focus {
-            color: #5dc21e;
-        }
-    }
 }
 
 .bx-settings-tabs-container {
@@ -149,10 +98,8 @@
     tabsWidth = 48px;
 
     flex-direction: column;
-    padding: 10px;
     margin-left: tabsWidth;
     width: 450px;
-    max-width: calc(100vw - tabsWidth);
     background: #1a1b1e;
     color: #fff;
     font-weight: 400;
@@ -163,76 +110,6 @@
     overflow: overlay;
     z-index: 1;
 
-    > div[data-tab-group=mkb] {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    > div[data-tab-group=shortcuts] {
-        > div {
-            &[data-has-gamepad=true] {
-                > div:first-of-type {
-                    display: none;
-                }
-
-                > div:last-of-type {
-                    display: block;
-                }
-            }
-
-            &[data-has-gamepad=false] {
-                > div:first-of-type {
-                    display: block;
-                }
-
-                > div:last-of-type {
-                    display: none;
-                }
-            }
-        }
-
-        .bx-shortcut-profile {
-            width: 100%;
-            height: 36px;
-            display: block;
-        }
-
-        .bx-shortcut-note {
-            margin-top: 10px;
-            font-size: 14px;
-        }
-
-        .bx-shortcut-row {
-            display: flex;
-            margin-bottom: 10px;
-
-            label.bx-prompt {
-                flex: 1;
-                font-size: 26px;
-                margin-bottom: 0;
-            }
-
-            .bx-shortcut-actions {
-                flex: 2;
-                position: relative;
-
-                select {
-                    position: absolute;
-                    width: 100%;
-                    height: 100%;
-                    display: block;
-
-                    &:last-of-type {
-                        opacity: 0;
-                        z-index: calc(var(--bx-settings-z-index) + 1);
-                    }
-                }
-            }
-        }
-    }
-
     .bx-top-buttons {
         display: flex;
         flex-direction: column;
@@ -262,6 +139,8 @@
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
+            min-height: var(--bx-button-height);
+            align-content: center;
         }
     }
 }
@@ -276,7 +155,6 @@
     display: flex;
     gap: 10px;
     padding: 16px 10px;
-    margin: 0;
     background: #2a2a2a;
     border-bottom: 1px solid #343434;
 
@@ -302,10 +180,32 @@
         margin-bottom: 0 !important;
         flex: 1;
 
+        svg {
+            width: 20px;
+            height: 20px;
+            margin-inline-end: 8px;
+        }
+
         + * {
             margin: 0 0 0 auto;
         }
     }
+
+    &[data-multi-lines="true"] {
+        flex-direction: column;
+
+        > span.bx-settings-label {
+            align-self: start;
+
+            + * {
+                margin: unset;
+            }
+        }
+    }
+
+    &.bx-settings-important-row {
+        background: #733b00;
+    }
 }
 
 .bx-settings-dialog-note {
@@ -339,6 +239,7 @@
     line-height: 20px;
     font-size: 14px;
     margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 .bx-debug-info {
@@ -377,25 +278,37 @@
     color: #828282;
 }
 
-.bx-settings-tab-contents {
+.bx-settings-tab-content {
+    padding: 10px;
+    border-radius-size = 6px;
+
     > div {
         // Label at the beginning
         *:not(.bx-settings-row):has(+ .bx-settings-row) + .bx-settings-row:has(+ .bx-settings-row) {
-            border-top-left-radius: 10px;
-            border-top-right-radius: 10px;
+            border-top-left-radius: border-radius-size;
+            border-top-right-radius: border-radius-size;
         }
 
         // Label at the end
         .bx-settings-row:not(:has(+ .bx-settings-row)) {
             border: none;
-            border-bottom-left-radius: 10px;
-            border-bottom-right-radius: 10px;
+            border-bottom-left-radius: border-radius-size;
+            border-bottom-right-radius: border-radius-size;
         }
 
         // Single label
         *:not(.bx-settings-row):has(+ .bx-settings-row) + .bx-settings-row:not(:has(+ .bx-settings-row)) {
             border: none;
-            border-radius: 10px;
+            border-radius: border-radius-size;
+        }
+    }
+
+    &:not([data-game-id="-1"]) {
+        .bx-settings-row[data-override=true], .bx-settings-row:has(*[data-override=true]) {
+            border-left: 4px solid orange !important;
+            border-top-left-radius: 0 !important;
+            border-bottom-left-radius: 0 !important;
+            padding-left: 6px !important;
         }
     }
 }
@@ -406,19 +319,22 @@
     border-radius: 4px;
     overflow: hidden;
     background: #003861;
+    height: 45px;
+    align-items: center;
 
     label {
         flex: 1;
-        margin-bottom: 0;
-        padding: 10px;
+        align-content: center;
+        padding: 0 10px;
         background: #004f87;
+        height: 100%;
     }
 
     span {
         display: inline-block;
         align-self: center;
         padding: 10px;
-        width: 40px;
+        width: 45px;
         text-align: center;
     }
 
@@ -444,10 +360,6 @@
 
 .bx-suggest-box {
     display: none;
-    background: #161616;
-    padding: 10px;
-    box-shadow: 0px 0px 12px #0f0f0f inset;
-    border-radius: 10px;
 }
 
 .bx-suggest-wrapper {
@@ -563,3 +475,115 @@
         }
     }
 }
+
+.bx-sub-content-box {
+    background: #161616;
+    padding: 10px;
+    box-shadow: 0px 0px 12px #0f0f0f inset;
+    border-radius: 10px;
+
+    .bx-settings-row & {
+        background: #202020;
+        padding: 12px;
+        box-shadow: 0 0 4px #000000 inset;
+        border-radius: 6px;
+    }
+}
+
+.bx-controller-extra-settings {
+    &[data-has-gamepad=true] {
+        > :first-child {
+            display: none;
+        }
+
+        > :last-child {
+            display: block;
+        }
+    }
+
+    &[data-has-gamepad=false] {
+        > :first-child {
+            display: block;
+        }
+
+        > :last-child {
+            display: none;
+        }
+    }
+
+    .bx-controller-extra-wrapper {
+        flex: 1;
+        min-width: 1px;
+    }
+
+    .bx-sub-content-box {
+        flex: 1;
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+        margin-top: 10px;
+
+        > label {
+            font-size: 14px;
+        }
+    }
+}
+
+.bx-preset-row {
+    display: flex;
+    gap: 8px;
+
+    .bx-select {
+        flex: 1;
+    }
+}
+
+.bx-stream-settings-selection {
+    margin-bottom: 8px;
+    position: sticky;
+    z-index: 1000;
+    top: 0;
+
+    > div {
+        display: flex;
+        gap: 8px;
+        background: #222222;
+        padding: 10px;
+        border-bottom: 4px solid #353638;
+        box-shadow: 0 0 6px #000;
+        position: relative;
+        z-index: 1;
+
+        .bx-select {
+            flex: 1;
+
+            label {
+                font-weight: bold;
+                font-size: 1.1rem;
+                line-height: initial;
+
+                span {
+                    line-height: initial;
+                }
+            }
+
+            .bx-select-indicators {
+                display: none;
+            }
+        }
+    }
+
+    p {
+        font-family: var(--bx-promptfont-font), var(--bx-normal-font);
+        margin: 0;
+        font-size: 13px;
+        background: #505050f2;
+        height: 25px;
+        line-height: 23px;
+        position: absolute;
+        bottom: -25px;
+        left: 0;
+        right: 0;
+        text-shadow: 0 1px #000;
+    }
+}

src/assets/css/stream-stats.styl

@@ -144,7 +144,7 @@ div[class^=StreamMenu-module__container] .bx-badges {
         border-radius: 0 0 4px 4px;
     }
 
-    &[data-transparent=true] {
+    &[data-shadow=true] {
         background: none;
         filter: drop-shadow(1px 0 0 #000000f0) drop-shadow(-1px 0 0 #000000f0) drop-shadow(0 1px 0 #000000f0) drop-shadow(0 -1px 0 #000000f0);
     }
@@ -165,10 +165,10 @@ div[class^=StreamMenu-module__container] .bx-badges {
     }
 
     span {
-        min-width: 60px;
         display: inline-block;
         text-align: right;
         vertical-align: middle;
+        white-space: pre;
 
         &[data-grade=good] {
             color: #6bffff;
@@ -181,9 +181,5 @@ div[class^=StreamMenu-module__container] .bx-badges {
         &[data-grade=bad] {
             color: #ff5f5f;
         }
-
-        &:first-of-type {
-            min-width: 22px;
-        }
     }
 }

src/assets/css/stream.styl

@@ -1,4 +1,4 @@
-div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
+#game-stream div[class^=StreamMenu-module__menuContainer] > div[class^=Menu-module] {
     overflow: visible;
 }
 
@@ -47,7 +47,41 @@ body[data-media-type=tv] .bx-stream-home-button {
 }
 
 div[data-testid=media-container] {
-    display: flex;
+    &[data-position=center] {
+        display: flex;
+    }
+
+    &[data-position=top] {
+        video, canvas {
+            top: 0;
+        }
+    }
+
+    &[data-position=bottom] {
+        video, canvas {
+            bottom: 0;
+        }
+    }
+}
+
+
+#game-stream {
+    video {
+        margin: auto;
+        align-self: center;
+        background: #000;
+        position: absolute;
+        left: 0;
+        right: 0;
+    }
+
+    canvas {
+        align-self: center;
+        margin: auto;
+        position: absolute;
+        left: 0;
+        right: 0;
+    }
 
     &.bx-taking-screenshot:before {
         animation: bx-anim-taking-screenshot 0.5s ease;
@@ -59,21 +93,6 @@ div[data-testid=media-container] {
     }
 }
 
-
-#game-stream video {
-    margin: auto;
-    align-self: center;
-    background: #000;
-}
-
-#game-stream canvas {
-    position: absolute;
-    align-self: center;
-    margin: auto;
-    left: 0;
-    right: 0;
-}
-
 #gamepass-dialog-root div[class^=Guide-module__guide] {
     .bx-button {
         overflow: visible;

src/assets/css/styles.styl

@@ -2,7 +2,7 @@
 
 @import 'button.styl';
 @import 'header.styl';
-@import 'dialog.styl';
+@import 'key-binding-dialog.styl';
 @import 'navigation-dialog.styl';
 @import 'settings-dialog.styl';
 @import 'toast.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/toast.styl

@@ -5,8 +5,8 @@
     left: 50%;
     top: 24px;
     transform: translate(-50%, 0);
-    background: #000000;
-    border-radius: 16px;
+    background: #212121;
+    border-radius: 10px;
     color: white;
     z-index: var(--bx-toast-z-index);
     font-family: var(--bx-normal-font);
@@ -16,9 +16,10 @@
     opacity: 0;
     overflow: clip;
     transition: opacity 0.2s ease-in;
+    box-shadow: 0 0 6px #000;
 
     &.bx-show {
-        opacity: 0.85;
+        opacity: 0.95;
     }
 
     &.bx-hide {
@@ -39,8 +40,8 @@
     font-size: 14px;
     text-transform: uppercase;
     display: inline-block;
-    background: #515863;
+    background: #fff;
     padding: 12px 16px;
-    color: #fff;
+    color: #212121;
     white-space: pre;
 }

src/assets/css/web-components.styl

@@ -1,31 +1,47 @@
-.bx-select {
+select.bx-select {
+    min-height: 30px;
+}
+
+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;
+            }
+
+            & ~ div {
+                background: #131416;
+                color: white;
+                pointer-events: none;
+
+                .bx-select-indicators {
+                    visibility: hidden;
+                }
+            }
+        }
     }
 
     > div, button.bx-select-value {
         min-width: 120px;
         text-align: left;
-        margin: 0 8px;
         line-height: 24px;
         vertical-align: middle;
         background: #fff;
         color: #000;
         border-radius: 4px;
         padding: 2px 8px;
+        display: flex;
         flex: 1;
+        flex-direction: column;
     }
 
     > div {
-        display: inline-block;
+        min-height: 24px;
 
         input {
             display: inline-block;
@@ -36,25 +52,36 @@
             margin-bottom: 0;
             font-size: 14px;
             width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            min-height: 15px;
 
             span {
                 display: block;
                 font-size: 10px;
                 font-weight: bold;
                 text-align: left;
-                line-height: initial;
+                line-height: 20px;
+                white-space: pre;
+                min-height: 15px;
+                align-content: center;
             }
         }
     }
 
     button.bx-select-value {
         border: none;
-        display: inline-flex;
         cursor: pointer;
         min-height: 30px;
         font-size: 0.9rem;
         align-items: center;
 
+        > div {
+            display: flex;
+            width: 100%;
+        }
+
         span {
             flex: 1;
             text-align: left;
@@ -81,10 +108,9 @@
 
     button.bx-button {
         border: none;
-        height: 24px;
         width: 24px;
+        height: auto;
         padding: 0;
-        line-height: 24px;
         color: #fff;
         border-radius: 4px;
         font-weight: bold;
@@ -96,4 +122,95 @@
             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 {
+    display: flex;
+    height: 4px;
+    gap: 2px;
+    margin-bottom: 2px;
+
+    span {
+        content: ' ';
+        display: inline-block;
+        flex: 1;
+        background: #cfcfcf;
+        border-radius: 4px;
+        min-width: 1px;
+
+        &[data-highlighted] {
+            background: #9c9c9c;
+            min-width: 6px;
+        }
+
+        &[data-selected] {
+            background: #aacfe7;
+        }
+
+        &[data-highlighted][data-selected] {
+            background: #5fa3d0;
+        }
+    }
 }

src/assets/header_script.txt

@@ -7,6 +7,7 @@
 // @license      MIT
 // @match        https://www.xbox.com/*/play*
 // @match        https://www.xbox.com/*/auth/msa?*loggedIn*
+// @exclude      https://www.xbox.com/*/xbox-game-pass/play-day-one
 // @run-at       document-start
 // @grant        none
 // @updateURL    https://raw.githubusercontent.com/redphx/better-xcloud/typescript/dist/better-xcloud.meta.js

src/assets/svg/better-xcloud.svg

@@ -1,4 +1,8 @@
-<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='2' stroke-width='2' viewBox='0 0 32 32'>
-    <path d='M16.001 7.236h-2.328c-.443 0-1.941-.851-2.357-.905-.824-.106-1.684 0-2.489.176a13.04 13.04 0 0 0-3.137 1.14c-.392.275-.677.668-.866 1.104v.03l-3.302 8.963-.015.015c-.288.867-.553 3.75-.5 4.279a4.89 4.89 0 0 0 1.022 2.55c.654.823 3.71 1.364 4.057 1.016l4.462-4.475c.185-.186 1.547-.706 2.01-.706h6.884c.463 0 1.825.52 2.01.706l4.462 4.475c.347.348 3.403-.193 4.057-1.016a4.89 4.89 0 0 0 1.022-2.55c.053-.529-.212-3.412-.5-4.279l-.015-.015-3.302-8.963v-.03c-.189-.436-.474-.829-.866-1.104a13.04 13.04 0 0 0-3.137-1.14c-.805-.176-1.665-.282-2.489-.176-.416.054-1.914.905-2.357.905h-2.328' fill='none' stroke='#fff'/>
-    <path d='M8.172 12.914H6.519c-.235 0-.315.267-.335.452l-.052.578c0 .193.033.384.054.576.023.202.091.511.355.511h1.631l-.001 1.652c0 .234.266.315.452.335l.578.052c.193 0 .384-.033.576-.054.203-.023.511-.091.511-.355V15.03l1.652.001c.234 0 .315-.266.335-.452l.052-.578c-.001-.193-.033-.385-.055-.577-.022-.202-.09-.51-.354-.51h-1.632v-1.652c0-.234-.266-.315-.453-.335l-.577-.052c-.193 0-.385.033-.577.054-.202.023-.51.091-.51.355v1.631m16.546 2.994h-3.487c-.206 0-.413-.043-.604-.121-.177-.072-.339-.183-.476-.316-.149-.144-.259-.315-.341-.504-.156-.361-.172-.788-.032-1.157a1.57 1.57 0 0 1 .459-.641c.106-.089.223-.164.349-.222a1.52 1.52 0 0 1 .423-.123c.167-.024.338-.02.504.012a1.83 1.83 0 0 1 .455-.482 1.62 1.62 0 0 1 .522-.252c.307-.089.651-.09.959-.003a1.75 1.75 0 0 1 1.009.764 1.83 1.83 0 0 1 .251.721c.156 0 .312.031.456.09a1.24 1.24 0 0 1 .372.248c.091.087.165.19.221.302a1.19 1.19 0 0 1-.173 1.299c-.119.132-.276.239-.441.305a1.17 1.17 0 0 1-.426.08z' fill='#fff' stroke='none'/>
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='none' fill-rule='evenodd' viewBox='0 0 32 32'>
+    <clipPath id='svg-bx-logo'>
+        <path d='M0 0h32v32H0z'/>
+    </clipPath>
+    <g clip-path='url(#svg-bx-logo)'>
+        <path d='M19.959 18.286l3.959 2.285-3.959 2.286V32L16 29.714v-9.143l3.959-2.285zM16 16V6.857l3.959-2.286 3.959 2.286-3.959 2.286v9.143L16 16zm-3.959-2.286L16 16l-3.959 2.286v9.143l-3.959-2.286V16l3.959-2.286zM8.082 2.286L12.041 0 16 2.286l-3.959 2.285v9.143l-3.959-2.285V2.286zm8.846 19.535c-.171-.098-.309-.018-.309.179s.138.437.309.536.309.018.309-.179-.138-.437-.309-.536zm0-13.714c-.171-.098-.309-.018-.309.179s.138.437.309.535.309.019.309-.178-.138-.437-.309-.536zM9.01 17.25c-.171-.099-.309-.019-.309.179s.138.437.309.535.309.019.309-.178-.138-.437-.309-.536zm0-13.714c-.171-.099-.309-.019-.309.178s.138.437.309.536.309.019.309-.179-.138-.437-.309-.535z' fill='#fff'/>
+    </g>
 </svg>

src/assets/svg/global-restore.svg

@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M1.681 16h28.638'/>
+    <path d='M16 30.319C8.145 30.319 1.681 23.855 1.681 16S8.145 1.681 16 1.681 30.319 8.145 30.319 16'/>
+    <path d='M16 30.319S10.034 25.546 10.034 16 16 1.681 16 1.681 21.966 6.454 21.966 16m-.238 8.592l-2.864 2.864 2.864 2.863'/>
+    <path d='M21.728 20.773h5.25a3.36 3.36 0 0 1 3.341 3.341 3.36 3.36 0 0 1-3.341 3.342h-8.114'/>
+</svg>

src/assets/svg/local-co-op.svg

@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'>
+    <g>
+        <path d='M24.272 11.165h-3.294l-3.14 3.564c-.391.391-.922.611-1.476.611a2.1 2.1 0 0 1-2.087-2.088 2.09 2.09 0 0 1 .031-.362l1.22-6.274a3.89 3.89 0 0 1 3.81-3.206h6.57c1.834 0 3.439 1.573 3.833 3.295l1.205 6.185a2.09 2.09 0 0 1 .031.362 2.1 2.1 0 0 1-2.087 2.088c-.554 0-1.085-.22-1.476-.611l-3.14-3.564' fill='none' stroke='#fff' stroke-width='2'/>
+        <circle cx='22.625' cy='5.874' r='.879'/><path d='M11.022 24.415H7.728l-3.14 3.564c-.391.391-.922.611-1.476.611a2.1 2.1 0 0 1-2.087-2.088 2.09 2.09 0 0 1 .031-.362l1.22-6.274a3.89 3.89 0 0 1 3.81-3.206h6.57c1.834 0 3.439 1.573 3.833 3.295l1.205 6.185a2.09 2.09 0 0 1 .031.362 2.1 2.1 0 0 1-2.087 2.088c-.554 0-1.085-.22-1.476-.611l-3.14-3.564' fill='none' stroke='#fff' stroke-width='2'/>
+        <circle cx='9.375' cy='19.124' r='.879'/>
+    </g>
+</svg>

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/bypass-servers.ts

@@ -1,17 +1,17 @@
 import { t } from "@/utils/translation"
 
 export const BypassServers = {
-    'br': t('brazil'),
-    'jp': t('japan'),
-    'kr': t('korea'),
-    'pl': t('poland'),
-    'us': t('united-states'),
-}
+    br: t('brazil'),
+    jp: t('japan'),
+    kr: t('korea'),
+    pl: t('poland'),
+    us: t('united-states'),
+} as const;
 
 export const BypassServerIps: Record<keyof typeof BypassServers, string> = {
-    'br': '169.150.198.66',
-    'kr': '121.125.60.151',
-    'jp': '138.199.21.239',
-    'pl': '45.134.212.66',
-    'us': '143.244.47.65',
-}
+    br: '169.150.198.66',
+    kr: '121.125.60.151',
+    jp: '138.199.21.239',
+    pl: '45.134.212.66',
+    us: '143.244.47.65',
+} as const;

src/enums/game-pass-gallery.ts

@@ -1,6 +1,9 @@
 export enum GamePassCloudGallery {
     ALL = '29a81209-df6f-41fd-a528-2ae6b91f719c',
+    ALL_WITH_BYGO = 'ce573635-7c18-4d0c-9d68-90b932393470',
+    LEAVING_SOON = '393f05bf-e596-4ef6-9487-6d4fa0eab987',
     MOST_POPULAR = 'e7590b22-e299-44db-ae22-25c61405454c',
     NATIVE_MKB = '8fa264dd-124f-4af3-97e8-596fcdf4b486',
+    RECENTLY_ADDED = '44a55037-770f-4bbf-bde5-a9fa27dba1da',
     TOUCH = '9c86f07a-f3e8-45ad-82a0-a1f759597059',
 }

src/enums/gamepad.ts

@@ -0,0 +1,77 @@
+import { PrompFont } from "./prompt-font";
+
+export enum GamepadKey {
+    A = 0,
+    B = 1,
+    X = 2,
+    Y = 3,
+    LB = 4,
+    RB = 5,
+    LT = 6,
+    RT = 7,
+    SELECT = 8,
+    START = 9,
+    L3 = 10,
+    R3 = 11,
+    UP = 12,
+    DOWN = 13,
+    LEFT = 14,
+    RIGHT = 15,
+    HOME = 16,
+    SHARE = 17,
+
+    LS_UP = 100,
+    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]> = {
+    [GamepadKey.A]: ['A', PrompFont.A],
+    [GamepadKey.B]: ['B', PrompFont.B],
+    [GamepadKey.X]: ['X', PrompFont.X],
+    [GamepadKey.Y]: ['Y', PrompFont.Y],
+
+    [GamepadKey.LB]: ['LB', PrompFont.LB],
+    [GamepadKey.RB]: ['RB', PrompFont.RB],
+    [GamepadKey.LT]: ['LT', PrompFont.LT],
+    [GamepadKey.RT]: ['RT', PrompFont.RT],
+
+    [GamepadKey.SELECT]: ['Select', PrompFont.SELECT],
+    [GamepadKey.START]: ['Start', PrompFont.START],
+    [GamepadKey.HOME]: ['Home', PrompFont.HOME],
+
+    [GamepadKey.UP]: ['D-Pad Up', PrompFont.UP],
+    [GamepadKey.DOWN]: ['D-Pad Down', PrompFont.DOWN],
+    [GamepadKey.LEFT]: ['D-Pad Left', PrompFont.LEFT],
+    [GamepadKey.RIGHT]: ['D-Pad Right', PrompFont.RIGHT],
+
+    [GamepadKey.L3]: ['L3', PrompFont.L3],
+    [GamepadKey.LS_UP]: ['Left Stick Up', PrompFont.LS_UP],
+    [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],
+};
+
+
+export enum GamepadStick {
+    LEFT = 0,
+    RIGHT = 1,
+};

src/enums/mkb.ts

@@ -1,102 +1,44 @@
-import type { GamepadKeyNameType } from "@/types/mkb";
-import { PrompFont } from "@enums/prompt-font";
-
-export enum GamepadKey {
-    A = 0,
-    B = 1,
-    X = 2,
-    Y = 3,
-    LB = 4,
-    RB = 5,
-    LT = 6,
-    RT = 7,
-    SELECT = 8,
-    START = 9,
-    L3 = 10,
-    R3 = 11,
-    UP = 12,
-    DOWN = 13,
-    LEFT = 14,
-    RIGHT = 15,
-    HOME = 16,
-    SHARE = 17,
-
-    LS_UP = 100,
-    LS_DOWN = 101,
-    LS_LEFT = 102,
-    LS_RIGHT = 103,
-
-    RS_UP = 200,
-    RS_DOWN = 201,
-    RS_LEFT = 202,
-    RS_RIGHT = 203,
-};
+export const enum MouseConstant {
+    DEFAULT_PANNING_SENSITIVITY = 0.0010,
+    DEFAULT_DEADZONE_COUNTERWEIGHT = 0.01,
+    MAXIMUM_STICK_RANGE = 1.1,
+}
 
 
-export const GamepadKeyName: GamepadKeyNameType = {
-    [GamepadKey.A]: ['A', PrompFont.A],
-    [GamepadKey.B]: ['B', PrompFont.B],
-    [GamepadKey.X]: ['X', PrompFont.X],
-    [GamepadKey.Y]: ['Y', PrompFont.Y],
-
-    [GamepadKey.LB]: ['LB', PrompFont.LB],
-    [GamepadKey.RB]: ['RB', PrompFont.RB],
-    [GamepadKey.LT]: ['LT', PrompFont.LT],
-    [GamepadKey.RT]: ['RT', PrompFont.RT],
-
-    [GamepadKey.SELECT]: ['Select', PrompFont.SELECT],
-    [GamepadKey.START]: ['Start', PrompFont.START],
-    [GamepadKey.HOME]: ['Home', PrompFont.HOME],
-
-    [GamepadKey.UP]: ['D-Pad Up', PrompFont.UP],
-    [GamepadKey.DOWN]: ['D-Pad Down', PrompFont.DOWN],
-    [GamepadKey.LEFT]: ['D-Pad Left', PrompFont.LEFT],
-    [GamepadKey.RIGHT]: ['D-Pad Right', PrompFont.RIGHT],
-
-    [GamepadKey.L3]: ['L3', PrompFont.L3],
-    [GamepadKey.LS_UP]: ['Left Stick Up', PrompFont.LS_UP],
-    [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.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],
-};
-
-
-export enum GamepadStick {
-    LEFT = 0,
-    RIGHT = 1,
-};
-
-export enum MouseButtonCode {
+export const enum MouseButtonCode {
     LEFT_CLICK = 'Mouse0',
     RIGHT_CLICK = 'Mouse2',
     MIDDLE_CLICK = 'Mouse1',
 };
 
-export enum MouseMapTo {
+
+export const enum MouseMapTo {
     OFF = 0,
     LS = 1,
     RS = 2,
 }
 
 
-export enum WheelCode {
+export const enum WheelCode {
     SCROLL_UP = 'ScrollUp',
     SCROLL_DOWN = 'ScrollDown',
     SCROLL_LEFT = 'ScrollLeft',
     SCROLL_RIGHT = 'ScrollRight',
 };
 
-export enum MkbPresetKey {
-    MOUSE_MAP_TO = 'map_to',
 
-    MOUSE_SENSITIVITY_X = 'sensitivity_x',
-    MOUSE_SENSITIVITY_Y = 'sensitivity_y',
+export const enum MkbPresetKey {
+    MOUSE_MAP_TO = 'mapTo',
 
-    MOUSE_DEADZONE_COUNTERWEIGHT = 'deadzone_counterweight',
+    MOUSE_SENSITIVITY_X = 'sensitivityX',
+    MOUSE_SENSITIVITY_Y = 'sensitivityY',
+
+    MOUSE_DEADZONE_COUNTERWEIGHT = 'deadzoneCounterweight',
+}
+
+
+export const enum KeyModifier {
+    CTRL = 1,
+    ALT = 2,
+    SHIFT = 4,
 }

src/enums/pref-keys.ts

@@ -1,103 +1,313 @@
-export enum StorageKey {
-    GLOBAL = 'better_xcloud',
+import type { BaseSettingsStorage } from "@/utils/settings-storages/base-settings-storage";
+import type { BlockFeature, CodecProfile, DeviceVibrationMode, GameBarPosition, LoadingScreenRocket, NativeMkbMode, StreamPlayerType, StreamResolution, StreamStat, StreamStatPosition, StreamVideoProcessing, StreamVideoProcessingMode, TouchControllerMode, TouchControllerStyleCustom, TouchControllerStyleStandard, UiLayout, UiSection, UiTheme, VideoPosition, VideoPowerPreference, VideoRatio } from "./pref-values"
+
+export const enum StorageKey {
+    GLOBAL = 'BetterXcloud',
+    STREAM = 'BetterXcloud.Stream',
+
+    LOCALE = 'BetterXcloud.Locale',
+    LOCALE_TRANSLATIONS = 'BetterXcloud.Locale.Translations',
+    PATCHES_CACHE = 'BetterXcloud.Patches.Cache',
+    PATCHES_SIGNATURE = 'BetterXcloud.Patches.Cache.Signature',
+    USER_AGENT = 'BetterXcloud.UserAgent',
+
+    GH_PAGES_COMMIT_HASH = 'BetterXcloud.GhPages.CommitHash',
+    LIST_CUSTOM_TOUCH_LAYOUTS = 'BetterXcloud.GhPages.CustomTouchLayouts',
+    LIST_FORCE_NATIVE_MKB = 'BetterXcloud.GhPages.ForceNativeMkb',
+    LIST_LOCAL_CO_OP = 'BetterXcloud.GhPages.LocalCoOp',
 }
 
-export enum PrefKey {
-    LAST_UPDATE_CHECK = 'version_last_check',
-    LATEST_VERSION = 'version_latest',
-    CURRENT_VERSION = 'version_current',
 
-    BETTER_XCLOUD_LOCALE = 'bx_locale',
+export const enum GlobalPref {
+    VERSION_LAST_CHECK = 'version.lastCheck',
+    VERSION_LATEST = 'version.latest',
+    VERSION_CURRENT = 'version.current',
 
-    SERVER_REGION = 'server_region',
-    SERVER_BYPASS_RESTRICTION = 'server_bypass_restriction',
+    SCRIPT_LOCALE = 'bx.locale',
 
-    PREFER_IPV6_SERVER = 'prefer_ipv6_server',
-    STREAM_TARGET_RESOLUTION = 'stream_target_resolution',
-    STREAM_PREFERRED_LOCALE = 'stream_preferred_locale',
-    STREAM_CODEC_PROFILE = 'stream_codec_profile',
+    SERVER_REGION = 'server.region',
+    SERVER_BYPASS_RESTRICTION = 'server.bypassRestriction',
+    SERVER_PREFER_IPV6 = 'server.ipv6.prefer',
 
-    USER_AGENT_PROFILE = 'user_agent_profile',
-    STREAM_SIMPLIFY_MENU = 'stream_simplify_menu',
+    STREAM_PREFERRED_LOCALE = 'stream.locale',
+    STREAM_RESOLUTION = 'stream.video.resolution',
+    STREAM_CODEC_PROFILE = 'stream.video.codecProfile',
+    STREAM_MAX_VIDEO_BITRATE = 'stream.video.maxBitrate',
+    STREAM_COMBINE_SOURCES = 'stream.video.combineAudio',
 
-    STREAM_COMBINE_SOURCES = 'stream_combine_sources',
+    USER_AGENT_PROFILE = 'userAgent.profile',
 
-    STREAM_TOUCH_CONTROLLER = 'stream_touch_controller',
-    STREAM_TOUCH_CONTROLLER_AUTO_OFF = 'stream_touch_controller_auto_off',
-    STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY = 'stream_touch_controller_default_opacity',
-    STREAM_TOUCH_CONTROLLER_STYLE_STANDARD = 'stream_touch_controller_style_standard',
-    STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM = 'stream_touch_controller_style_custom',
+    TOUCH_CONTROLLER_MODE = 'touchController.mode',
+    TOUCH_CONTROLLER_AUTO_OFF = 'touchController.autoOff',
+    TOUCH_CONTROLLER_DEFAULT_OPACITY = 'touchController.opacity.default',
+    TOUCH_CONTROLLER_STYLE_STANDARD = 'touchController.style.standard',
+    TOUCH_CONTROLLER_STYLE_CUSTOM = 'touchController.style.custom',
 
-    STREAM_DISABLE_FEEDBACK_DIALOG = 'stream_disable_feedback_dialog',
+    GAME_BAR_POSITION = 'gameBar.position',
 
-    BITRATE_VIDEO_MAX = 'bitrate_video_max',
+    NATIVE_MKB_MODE = 'nativeMkb.mode',
+    NATIVE_MKB_FORCED_GAMES = 'nativeMkb.forcedGames',
 
-    GAME_BAR_POSITION = 'game_bar_position',
+    MKB_ENABLED = 'mkb.enabled',
+    MKB_HIDE_IDLE_CURSOR = 'mkb.cursor.hideIdle',
 
-    LOCAL_CO_OP_ENABLED = 'local_co_op_enabled',
-    // LOCAL_CO_OP_SEPARATE_TOUCH_CONTROLLER = 'local_co_op_separate_touch_controller',
+    SCREENSHOT_APPLY_FILTERS = 'screenshot.applyFilters',
 
-    CONTROLLER_ENABLE_SHORTCUTS = 'controller_enable_shortcuts',
-    CONTROLLER_ENABLE_VIBRATION = 'controller_enable_vibration',
-    CONTROLLER_DEVICE_VIBRATION = 'controller_device_vibration',
-    CONTROLLER_VIBRATION_INTENSITY = 'controller_vibration_intensity',
-    CONTROLLER_SHOW_CONNECTION_STATUS = 'controller_show_connection_status',
+    BLOCK_TRACKING = 'block.tracking',
+    BLOCK_FEATURES = 'block.features',
 
-    NATIVE_MKB_ENABLED = 'native_mkb_enabled',
-    NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'native_mkb_scroll_x_sensitivity',
-    NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY = 'native_mkb_scroll_y_sensitivity',
+    LOADING_SCREEN_GAME_ART = 'loadingScreen.gameArt.show',
+    LOADING_SCREEN_SHOW_WAIT_TIME = 'loadingScreen.waitTime.show',
+    LOADING_SCREEN_ROCKET = 'loadingScreen.rocket',
 
-    MKB_ENABLED = 'mkb_enabled',
-    MKB_HIDE_IDLE_CURSOR = 'mkb_hide_idle_cursor',
-    MKB_ABSOLUTE_MOUSE = 'mkb_absolute_mouse',
-    MKB_DEFAULT_PRESET_ID = 'mkb_default_preset_id',
+    UI_CONTROLLER_FRIENDLY = 'ui.controllerFriendly',
+    UI_LAYOUT = 'ui.layout',
+    UI_SCROLLBAR_HIDE = 'ui.hideScrollbar',
+    UI_HIDE_SECTIONS = 'ui.hideSections',
 
-    SCREENSHOT_APPLY_FILTERS = 'screenshot_apply_filters',
+    UI_GAME_CARD_SHOW_WAIT_TIME = 'ui.gameCard.waitTime.show',
+    UI_SIMPLIFY_STREAM_MENU = 'ui.streamMenu.simplify',
+    UI_DISABLE_FEEDBACK_DIALOG = 'ui.feedbackDialog.disabled',
+    UI_CONTROLLER_SHOW_STATUS = 'ui.controllerStatus.show',
 
-    BLOCK_TRACKING = 'block_tracking',
-    BLOCK_SOCIAL_FEATURES = 'block_social_features',
-    SKIP_SPLASH_VIDEO = 'skip_splash_video',
-    HIDE_DOTS_ICON = 'hide_dots_icon',
-    REDUCE_ANIMATIONS = 'reduce_animations',
+    UI_SKIP_SPLASH_VIDEO = 'ui.splashVideo.skip',
+    UI_HIDE_SYSTEM_MENU_ICON = 'ui.systemMenu.hideHandle',
+    UI_REDUCE_ANIMATIONS = 'ui.reduceAnimations',
+    UI_IMAGE_QUALITY = 'ui.imageQuality',
+    UI_THEME = 'ui.theme',
 
-    UI_LOADING_SCREEN_GAME_ART = 'ui_loading_screen_game_art',
-    UI_LOADING_SCREEN_WAIT_TIME = 'ui_loading_screen_wait_time',
-    UI_LOADING_SCREEN_ROCKET = 'ui_loading_screen_rocket',
+    AUDIO_MIC_ON_PLAYING = 'audio.mic.onPlaying',
+    AUDIO_VOLUME_CONTROL_ENABLED = 'audio.volume.booster.enabled',
 
-    UI_CONTROLLER_FRIENDLY = 'ui_controller_friendly',
-    UI_LAYOUT = 'ui_layout',
-    UI_SCROLLBAR_HIDE = 'ui_scrollbar_hide',
-    UI_HIDE_SECTIONS = 'ui_hide_sections',
+    REMOTE_PLAY_STREAM_RESOLUTION = 'xhome.video.resolution',
 
-    UI_HOME_CONTEXT_MENU_DISABLED = 'ui_home_context_menu_disabled',
-    UI_GAME_CARD_SHOW_WAIT_TIME = 'ui_game_card_show_wait_time',
-
-    VIDEO_PLAYER_TYPE = 'video_player_type',
-    VIDEO_PROCESSING = 'video_processing',
-    VIDEO_POWER_PREFERENCE = 'video_power_preference',
-    VIDEO_MAX_FPS = 'video_max_fps',
-    VIDEO_SHARPNESS = 'video_sharpness',
-    VIDEO_RATIO = 'video_ratio',
-    VIDEO_BRIGHTNESS = 'video_brightness',
-    VIDEO_CONTRAST = 'video_contrast',
-    VIDEO_SATURATION = 'video_saturation',
-
-    AUDIO_MIC_ON_PLAYING = 'audio_mic_on_playing',
-    AUDIO_ENABLE_VOLUME_CONTROL = 'audio_enable_volume_control',
-    AUDIO_VOLUME = 'audio_volume',
-
-    STATS_ITEMS = 'stats_items',
-    STATS_SHOW_WHEN_PLAYING = 'stats_show_when_playing',
-    STATS_QUICK_GLANCE = 'stats_quick_glance',
-    STATS_POSITION = 'stats_position',
-    STATS_TEXT_SIZE = 'stats_text_size',
-    STATS_TRANSPARENT = 'stats_transparent',
-    STATS_OPACITY = 'stats_opacity',
-    STATS_CONDITIONAL_FORMATTING = 'stats_conditional_formatting',
-
-    REMOTE_PLAY_ENABLED = 'xhome_enabled',
-    REMOTE_PLAY_RESOLUTION = 'xhome_resolution',
-
-    GAME_FORTNITE_FORCE_CONSOLE = 'game_fortnite_force_console',
-    GAME_MSFS2020_FORCE_NATIVE_MKB = 'game_msfs2020_force_native_mkb',
+    GAME_FORTNITE_FORCE_CONSOLE = 'game.fortnite.forceConsole',
 }
+
+export type GlobalPrefTypeMap = {
+    [GlobalPref.AUDIO_MIC_ON_PLAYING]: boolean;
+    [GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED]: boolean;
+    [GlobalPref.BLOCK_FEATURES]: BlockFeature[];
+    [GlobalPref.BLOCK_TRACKING]: boolean;
+    [GlobalPref.GAME_BAR_POSITION]: GameBarPosition;
+    [GlobalPref.GAME_FORTNITE_FORCE_CONSOLE]: boolean;
+    [GlobalPref.LOADING_SCREEN_GAME_ART]: boolean;
+    [GlobalPref.LOADING_SCREEN_ROCKET]: LoadingScreenRocket;
+    [GlobalPref.LOADING_SCREEN_SHOW_WAIT_TIME]: boolean;
+    [GlobalPref.MKB_ENABLED]: boolean;
+    [GlobalPref.MKB_HIDE_IDLE_CURSOR]: boolean;
+    [GlobalPref.NATIVE_MKB_FORCED_GAMES]: string[];
+    [GlobalPref.NATIVE_MKB_MODE]: NativeMkbMode;
+    [GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION]: StreamResolution;
+    [GlobalPref.SCREENSHOT_APPLY_FILTERS]: boolean;
+    [GlobalPref.SERVER_BYPASS_RESTRICTION]: string;
+    [GlobalPref.SERVER_PREFER_IPV6]: boolean;
+    [GlobalPref.SERVER_REGION]: string;
+    [GlobalPref.STREAM_CODEC_PROFILE]: CodecProfile;
+    [GlobalPref.STREAM_COMBINE_SOURCES]: boolean;
+    [GlobalPref.STREAM_MAX_VIDEO_BITRATE]: number;
+    [GlobalPref.STREAM_PREFERRED_LOCALE]: StreamPreferredLocale;
+    [GlobalPref.STREAM_RESOLUTION]: StreamResolution;
+    [GlobalPref.TOUCH_CONTROLLER_AUTO_OFF]: boolean;
+    [GlobalPref.TOUCH_CONTROLLER_DEFAULT_OPACITY]: number;
+    [GlobalPref.TOUCH_CONTROLLER_MODE]: TouchControllerMode;
+    [GlobalPref.TOUCH_CONTROLLER_STYLE_CUSTOM]: TouchControllerStyleCustom;
+    [GlobalPref.TOUCH_CONTROLLER_STYLE_STANDARD]: TouchControllerStyleStandard;
+    [GlobalPref.UI_CONTROLLER_FRIENDLY]: boolean;
+    [GlobalPref.UI_CONTROLLER_SHOW_STATUS]: boolean;
+    [GlobalPref.UI_DISABLE_FEEDBACK_DIALOG]: boolean;
+    [GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME]: boolean;
+    [GlobalPref.UI_HIDE_SECTIONS]: UiSection[];
+    [GlobalPref.UI_HIDE_SYSTEM_MENU_ICON]: boolean;
+    [GlobalPref.UI_IMAGE_QUALITY]: number;
+    [GlobalPref.UI_LAYOUT]: UiLayout;
+    [GlobalPref.UI_REDUCE_ANIMATIONS]: boolean;
+    [GlobalPref.UI_SCROLLBAR_HIDE]: boolean;
+    [GlobalPref.UI_SIMPLIFY_STREAM_MENU]: boolean;
+    [GlobalPref.UI_SKIP_SPLASH_VIDEO]: boolean;
+    [GlobalPref.UI_THEME]: UiTheme;
+    [GlobalPref.VERSION_CURRENT]: string;
+    [GlobalPref.VERSION_LAST_CHECK]: number;
+    [GlobalPref.VERSION_LATEST]: string;
+
+    [GlobalPref.SCRIPT_LOCALE]: string;
+    [GlobalPref.USER_AGENT_PROFILE]: string;
+}
+
+export const enum StreamPref {
+    LOCAL_CO_OP_ENABLED = 'localCoOp.enabled',
+
+    DEVICE_VIBRATION_MODE = 'deviceVibration.mode',
+    DEVICE_VIBRATION_INTENSITY = 'deviceVibration.intensity',
+
+    CONTROLLER_POLLING_RATE = 'controller.pollingRate',
+    CONTROLLER_SETTINGS = 'controller.settings',
+
+    NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'nativeMkb.scroll.sensitivityX',
+    NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY = 'nativeMkb.scroll.sensitivityY',
+
+    MKB_P1_MAPPING_PRESET_ID = 'mkb.p1.preset.mappingId',
+    MKB_P1_SLOT = 'mkb.p1.slot',
+    MKB_P2_MAPPING_PRESET_ID = 'mkb.p2.preset.mappingId',
+    MKB_P2_SLOT = 'mkb.p2.slot',
+
+    KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID = 'keyboardShortcuts.preset.inGameId',
+
+    VIDEO_PLAYER_TYPE = 'video.player.type',
+    VIDEO_POWER_PREFERENCE = 'video.player.powerPreference',
+    VIDEO_PROCESSING = 'video.processing',
+    VIDEO_PROCESSING_MODE = 'video.processing.mode',
+    VIDEO_SHARPNESS = 'video.processing.sharpness',
+    VIDEO_MAX_FPS = 'video.maxFps',
+    VIDEO_RATIO = 'video.ratio',
+    VIDEO_BRIGHTNESS = 'video.brightness',
+    VIDEO_CONTRAST = 'video.contrast',
+    VIDEO_SATURATION = 'video.saturation',
+    VIDEO_POSITION = 'video.position',
+
+    AUDIO_VOLUME = 'audio.volume',
+
+    STATS_ITEMS = 'stats.items',
+    STATS_SHOW_WHEN_PLAYING = 'stats.showWhenPlaying',
+    STATS_QUICK_GLANCE_ENABLED = 'stats.quickGlance.enabled',
+    STATS_POSITION = 'stats.position',
+    STATS_TEXT_SIZE = 'stats.textSize',
+    STATS_OPACITY_ALL = 'stats.opacity.all',
+    STATS_OPACITY_BACKGROUND = 'stats.opacity.background',
+    STATS_CONDITIONAL_FORMATTING = 'stats.colors',
+}
+
+export type StreamPrefTypeMap = {
+    [StreamPref.AUDIO_VOLUME]: number;
+    [StreamPref.CONTROLLER_POLLING_RATE]: number;
+    [StreamPref.CONTROLLER_SETTINGS]: ControllerSettings;
+    [StreamPref.DEVICE_VIBRATION_INTENSITY]: number;
+    [StreamPref.DEVICE_VIBRATION_MODE]: DeviceVibrationMode;
+    [StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID]: number;
+    [StreamPref.LOCAL_CO_OP_ENABLED]: boolean;
+    [StreamPref.MKB_P1_MAPPING_PRESET_ID]: number;
+    [StreamPref.MKB_P1_SLOT]: number;
+    [StreamPref.MKB_P2_MAPPING_PRESET_ID]: number;
+    [StreamPref.MKB_P2_SLOT]: number;
+    [StreamPref.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY]: number;
+    [StreamPref.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY]: number;
+    [StreamPref.STATS_CONDITIONAL_FORMATTING]: boolean;
+    [StreamPref.STATS_ITEMS]: StreamStat[];
+    [StreamPref.STATS_OPACITY_ALL]: number;
+    [StreamPref.STATS_OPACITY_BACKGROUND]: number;
+    [StreamPref.STATS_POSITION]: StreamStatPosition;
+    [StreamPref.STATS_QUICK_GLANCE_ENABLED]: boolean;
+    [StreamPref.STATS_SHOW_WHEN_PLAYING]: boolean;
+    [StreamPref.STATS_TEXT_SIZE]: string;
+    [StreamPref.VIDEO_BRIGHTNESS]: number;
+    [StreamPref.VIDEO_CONTRAST]: number;
+    [StreamPref.VIDEO_MAX_FPS]: number;
+    [StreamPref.VIDEO_PLAYER_TYPE]: StreamPlayerType;
+    [StreamPref.VIDEO_POSITION]: VideoPosition;
+    [StreamPref.VIDEO_POWER_PREFERENCE]: VideoPowerPreference;
+    [StreamPref.VIDEO_PROCESSING]: StreamVideoProcessing;
+    [StreamPref.VIDEO_PROCESSING_MODE]: StreamVideoProcessingMode;
+    [StreamPref.VIDEO_RATIO]: VideoRatio;
+    [StreamPref.VIDEO_SATURATION]: number;
+    [StreamPref.VIDEO_SHARPNESS]: number;
+}
+
+export type AllPrefs = GlobalPref | StreamPref;
+
+export const ALL_PREFS: {
+    global: GlobalPref[],
+    stream: StreamPref[],
+} = {
+    global: [
+        GlobalPref.AUDIO_MIC_ON_PLAYING,
+        GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED,
+        GlobalPref.BLOCK_FEATURES,
+        GlobalPref.BLOCK_TRACKING,
+        GlobalPref.GAME_BAR_POSITION,
+        GlobalPref.GAME_FORTNITE_FORCE_CONSOLE,
+        GlobalPref.LOADING_SCREEN_GAME_ART,
+        GlobalPref.LOADING_SCREEN_ROCKET,
+        GlobalPref.LOADING_SCREEN_SHOW_WAIT_TIME,
+        GlobalPref.MKB_ENABLED,
+        GlobalPref.MKB_HIDE_IDLE_CURSOR,
+        GlobalPref.NATIVE_MKB_FORCED_GAMES,
+        GlobalPref.NATIVE_MKB_MODE,
+        GlobalPref.REMOTE_PLAY_STREAM_RESOLUTION,
+        GlobalPref.SCREENSHOT_APPLY_FILTERS,
+        GlobalPref.SERVER_BYPASS_RESTRICTION,
+        GlobalPref.SERVER_PREFER_IPV6,
+        GlobalPref.SERVER_REGION,
+        GlobalPref.STREAM_CODEC_PROFILE,
+        GlobalPref.STREAM_COMBINE_SOURCES,
+        GlobalPref.STREAM_MAX_VIDEO_BITRATE,
+        GlobalPref.STREAM_PREFERRED_LOCALE,
+        GlobalPref.STREAM_RESOLUTION,
+        GlobalPref.TOUCH_CONTROLLER_AUTO_OFF,
+        GlobalPref.TOUCH_CONTROLLER_DEFAULT_OPACITY,
+        GlobalPref.TOUCH_CONTROLLER_MODE,
+        GlobalPref.TOUCH_CONTROLLER_STYLE_CUSTOM,
+        GlobalPref.TOUCH_CONTROLLER_STYLE_STANDARD,
+        GlobalPref.UI_CONTROLLER_FRIENDLY,
+        GlobalPref.UI_CONTROLLER_SHOW_STATUS,
+        GlobalPref.UI_DISABLE_FEEDBACK_DIALOG,
+        GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME,
+        GlobalPref.UI_HIDE_SECTIONS,
+        GlobalPref.UI_HIDE_SYSTEM_MENU_ICON,
+        GlobalPref.UI_IMAGE_QUALITY,
+        GlobalPref.UI_LAYOUT,
+        GlobalPref.UI_REDUCE_ANIMATIONS,
+        GlobalPref.UI_SCROLLBAR_HIDE,
+        GlobalPref.UI_SIMPLIFY_STREAM_MENU,
+        GlobalPref.UI_SKIP_SPLASH_VIDEO,
+        GlobalPref.UI_THEME,
+        GlobalPref.VERSION_CURRENT,
+        GlobalPref.VERSION_LAST_CHECK,
+        GlobalPref.VERSION_LATEST,
+
+        GlobalPref.SCRIPT_LOCALE,
+        GlobalPref.USER_AGENT_PROFILE,
+    ],
+    stream: [
+        StreamPref.AUDIO_VOLUME,
+        StreamPref.CONTROLLER_POLLING_RATE,
+        StreamPref.CONTROLLER_SETTINGS,
+        StreamPref.DEVICE_VIBRATION_INTENSITY,
+        StreamPref.DEVICE_VIBRATION_MODE,
+        StreamPref.KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID,
+        StreamPref.LOCAL_CO_OP_ENABLED,
+        StreamPref.MKB_P1_MAPPING_PRESET_ID,
+        StreamPref.MKB_P1_SLOT,
+        StreamPref.MKB_P2_MAPPING_PRESET_ID,
+        StreamPref.MKB_P2_SLOT,
+        StreamPref.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY,
+        StreamPref.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY,
+        StreamPref.STATS_CONDITIONAL_FORMATTING,
+        StreamPref.STATS_ITEMS,
+        StreamPref.STATS_OPACITY_ALL,
+        StreamPref.STATS_OPACITY_BACKGROUND,
+        StreamPref.STATS_POSITION,
+        StreamPref.STATS_QUICK_GLANCE_ENABLED,
+        StreamPref.STATS_SHOW_WHEN_PLAYING,
+        StreamPref.STATS_TEXT_SIZE,
+        StreamPref.VIDEO_BRIGHTNESS,
+        StreamPref.VIDEO_CONTRAST,
+        StreamPref.VIDEO_MAX_FPS,
+        StreamPref.VIDEO_PLAYER_TYPE,
+        StreamPref.VIDEO_POSITION,
+        StreamPref.VIDEO_POWER_PREFERENCE,
+        StreamPref.VIDEO_PROCESSING,
+        StreamPref.VIDEO_PROCESSING_MODE,
+        StreamPref.VIDEO_RATIO,
+        StreamPref.VIDEO_SATURATION,
+        StreamPref.VIDEO_SHARPNESS,
+    ],
+} as const;
+
+export type AnySettingsStorage = BaseSettingsStorage<GlobalPref> | BaseSettingsStorage<StreamPref>;
+export type AnyPref = GlobalPref | StreamPref;
+
+export type PrefTypeMap<Key> = Key extends GlobalPref
+  ? GlobalPrefTypeMap
+  : Key extends StreamPref
+  ? StreamPrefTypeMap
+  : never;

src/enums/pref-values.ts

@@ -0,0 +1,150 @@
+export const enum UiSection {
+    ALL_GAMES = 'all-games',
+    FRIENDS = 'friends',
+    MOST_POPULAR = 'most-popular',
+    NATIVE_MKB = 'native-mkb',
+    NEWS = 'news',
+    TOUCH = 'touch',
+    BOYG = 'byog',
+    RECENTLY_ADDED = 'recently-added',
+    LEAVING_SOON = 'leaving-soon',
+    GENRES = 'genres',
+}
+
+export const enum GameBarPosition {
+    BOTTOM_LEFT = 'bottom-left',
+    BOTTOM_RIGHT = 'bottom-right',
+    OFF = 'off',
+};
+
+export const enum UiLayout {
+    TV = 'tv',
+    NORMAL = 'normal',
+    DEFAULT = 'default',
+}
+
+export const enum LoadingScreenRocket {
+    SHOW = 'show',
+    HIDE = 'hide',
+    HIDE_QUEUE = 'hide-queue',
+}
+
+export const enum StreamResolution {
+    DIM_720P = '720p',
+    DIM_1080P = '1080p',
+    DIM_1080P_HQ = '1080p-hq',
+    AUTO = 'auto',
+}
+
+export const enum CodecProfile {
+    DEFAULT = 'default',
+    LOW = 'low',
+    NORMAL = 'normal',
+    HIGH = 'high',
+};
+
+export const enum TouchControllerMode {
+    DEFAULT = 'default',
+    ALL = 'all',
+    OFF = 'off',
+}
+
+export const enum TouchControllerStyleStandard {
+    DEFAULT = 'default',
+    WHITE = 'white',
+    MUTED = 'muted',
+}
+
+export const enum TouchControllerStyleCustom {
+    DEFAULT = 'default',
+    MUTED = 'muted',
+}
+
+export const enum DeviceVibrationMode {
+    ON = 'on',
+    AUTO = 'auto',
+    OFF = 'off',
+}
+
+export const enum NativeMkbMode {
+    DEFAULT = 'default',
+    ON = 'on',
+    OFF = 'off',
+}
+
+export const enum StreamStat {
+    PING = 'ping',
+    JITTER = 'jit',
+    FPS = 'fps',
+    BITRATE = 'btr',
+    DECODE_TIME = 'dt',
+    PACKETS_LOST = 'pl',
+    FRAMES_LOST = 'fl',
+    DOWNLOAD = 'dl',
+    UPLOAD = 'ul',
+    PLAYTIME = 'play',
+    BATTERY = 'batt',
+    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',
+    '16:10' = '16:10',
+    '18:9' = '18:9',
+    '20:9' = '20:9',
+    '21:9' = '21:9',
+    '3:2' = '3:2',
+    '4:3' = '4:3',
+    '5:4' = '5:4',
+    FILL = 'fill',
+}
+
+export const enum VideoPosition {
+    CENTER = 'center',
+    TOP = 'top',
+    TOP_HALF = 'top-half',
+    BOTTOM = 'bottom',
+    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',
+    WEBGPU = 'webgpu',
+}
+
+export const enum StreamVideoProcessing {
+    USM = 'usm',
+    CAS = 'cas',
+}
+
+export const enum StreamVideoProcessingMode {
+    QUALITY = 'quality',
+    PERFORMANCE = 'performance',
+}
+
+export const enum BlockFeature {
+    CHAT = 'chat',
+    FRIENDS = 'friends',
+    BYOG = 'byog',
+    NOTIFICATIONS_INVITES = 'notifications-invites',
+    NOTIFICATIONS_ACHIEVEMENTS = 'notifications-achievements',
+    REMOTE_PLAY = 'remote-play',
+}
+
+export const enum UiTheme {
+    DEFAULT = 'default',
+    DARK_OLED = 'dark-oled',
+}

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/enums/shortcut-actions.ts

@@ -0,0 +1,27 @@
+export const enum ShortcutAction {
+    BETTER_XCLOUD_SETTINGS_SHOW = 'bx.settings.show',
+
+    CONTROLLER_XBOX_BUTTON_PRESS = 'controller.xbox.press',
+
+    STREAM_VIDEO_TOGGLE = 'stream.video.toggle',
+    STREAM_SCREENSHOT_CAPTURE = 'stream.screenshot.capture',
+
+    STREAM_MENU_SHOW = 'stream.menu.show',
+    STREAM_STATS_TOGGLE = 'stream.stats.toggle',
+    STREAM_SOUND_TOGGLE = 'stream.sound.toggle',
+    STREAM_MICROPHONE_TOGGLE = 'stream.microphone.toggle',
+
+    STREAM_VOLUME_INC = 'stream.volume.inc',
+    STREAM_VOLUME_DEC = 'stream.volume.dec',
+
+    DEVICE_SOUND_TOGGLE = 'device.sound.toggle',
+    DEVICE_VOLUME_INC = 'device.volume.inc',
+    DEVICE_VOLUME_DEC = 'device.volume.dec',
+
+    DEVICE_BRIGHTNESS_INC = 'device.brightness.inc',
+    DEVICE_BRIGHTNESS_DEC = 'device.brightness.dec',
+
+    MKB_TOGGLE = 'mkb.toggle',
+
+    TRUE_ACHIEVEMENTS_OPEN = 'ta.open',
+};

src/enums/stream-player.ts

@@ -1,9 +0,0 @@
-export enum StreamPlayerType {
-    VIDEO = 'default',
-    WEBGL2 = 'webgl2',
-}
-
-export enum StreamVideoProcessing {
-    USM = 'usm',
-    CAS = 'cas',
-}

src/enums/ui-sections.ts

@@ -1,8 +0,0 @@
-export enum UiSection {
-    ALL_GAMES = 'all-games',
-    FRIENDS = 'friends',
-    MOST_POPULAR = 'most-popular',
-    NATIVE_MKB = 'native-mkb',
-    NEWS = 'news',
-    TOUCH = 'touch',
-}

src/index.ts

@@ -1,4 +1,4 @@
-import { compressCss, isFullVersion } from "@macros/build" with {type: "macro"};
+import { compressCss, isFullVersion } from "@macros/build" with { type: "macro" };
 
 import "@utils/global";
 import { BxEvent } from "@utils/bx-event";
@@ -12,36 +12,43 @@ import { EmulatedMkbHandler } from "@modules/mkb/mkb-handler";
 import { StreamBadges } from "@modules/stream/stream-badges";
 import { StreamStats } from "@modules/stream/stream-stats";
 import { addCss, preloadFonts } from "@utils/css";
-import { Toast } from "@utils/toast";
 import { LoadingScreen } from "@modules/loading-screen";
 import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
 import { TouchController } from "@modules/touch-controller";
 import { checkForUpdate, disablePwa, productTitleToSlug } from "@utils/utils";
-import { Patcher } from "@modules/patcher";
+import { Patcher } from "@/modules/patcher/patcher";
 import { RemotePlayManager } from "@/modules/remote-play-manager";
 import { onHistoryChanged, patchHistoryMethod } from "@utils/history";
-import { VibrationManager } from "@modules/vibration-manager";
-import { overridePreloadState } from "@utils/preload-state";
 import { disableAdobeAudienceManager, patchAudioContext, patchCanvasContext, patchMeControl, patchPointerLockApi, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
 import { AppInterface, STATES } from "@utils/global";
 import { BxLogger } from "@utils/bx-logger";
 import { GameBar } from "./modules/game-bar/game-bar";
-import { Screenshot } from "./utils/screenshot";
+import { ScreenshotManager } from "./utils/screenshot-manager";
 import { NativeMkbHandler } from "./modules/mkb/native-mkb-handler";
 import { GuideMenu } from "./modules/ui/guide-menu";
 import { updateVideoPlayer } from "./modules/stream/stream-settings-utils";
-import { UiSection } from "./enums/ui-sections";
+import { BlockFeature, NativeMkbMode, TouchControllerMode, UiSection } from "./enums/pref-values";
 import { HeaderSection } from "./modules/ui/header";
 import { GameTile } from "./modules/ui/game-tile";
 import { ProductDetailsPage } from "./modules/ui/product-details";
 import { NavigationDialogManager } from "./modules/ui/dialog/navigation-dialog";
-import { PrefKey } from "./enums/pref-keys";
-import { getPref, StreamTouchController } from "./utils/settings-storages/global-settings-storage";
-import { SettingsNavigationDialog } from "./modules/ui/dialog/settings-dialog";
-import { StreamUiHandler } from "./modules/stream/stream-ui";
+import { GlobalPref, StreamPref } from "./enums/pref-keys";
 import { UserAgent } from "./utils/user-agent";
 import { XboxApi } from "./utils/xbox-api";
 import { StreamStatsCollector } from "./utils/stream-stats-collector";
+import { StreamSettings } from "./utils/stream-settings";
+import { KeyboardShortcutHandler } from "./modules/mkb/keyboard-shortcut-handler";
+import { GhPagesUtils } from "./utils/gh-pages";
+import { DeviceVibrationManager } from "./modules/device-vibration-manager";
+import { BxEventBus } from "./utils/bx-event-bus";
+import { getGlobalPref, getStreamPref } from "./utils/pref-utils";
+import { SettingsManager } from "./modules/settings-manager";
+import { Toast } from "./utils/toast";
+import { WebGPUPlayer } from "./modules/player/webgpu/webgpu-player";
+import { StreamUiHandler } from "./modules/stream/stream-ui";
+import { TrueAchievements } from "./utils/true-achievements";
+
+SettingsManager.getInstance();
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
@@ -110,7 +117,7 @@ if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loa
     const isSafari = UserAgent.isSafari();
     let $secondaryAction: HTMLElement;
     if (isSafari) {
-        $secondaryAction = CE('p', {}, t('settings-reloading'));
+        $secondaryAction = CE('p', false, t('settings-reloading'));
     } else {
         $secondaryAction = CE('a', {
             href: 'https://better-xcloud.github.io/troubleshooting',
@@ -120,12 +127,12 @@ if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loa
 
     // Show the reloading overlay
     const $fragment = document.createDocumentFragment();
-    $fragment.appendChild(CE('style', {}, css));
+    $fragment.appendChild(CE('style', false, css));
     $fragment.appendChild(CE('div',{
         class: 'bx-reload-overlay',
     },
-        CE('div', {},
-            CE('p', {}, t('load-failed-message')),
+        CE('div', false,
+            CE('p', false, t('load-failed-message')),
             $secondaryAction,
         ),
     ));
@@ -140,6 +147,12 @@ if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loa
     throw new Error('[Better xCloud] Executing workaround for Safari');
 }
 
+// Make sure it only run on /play
+if (!window.location.pathname.match(/^\/[a-zA-Z]{2}-[a-zA-Z]{2}\/play/)) {
+    throw new Error('[Better xCloud] Not xCloud page');
+}
+
+
 window.addEventListener('load', e => {
     // Automatically reload the page when running into the "We are sorry..." error message
     window.setTimeout(() => {
@@ -157,19 +170,21 @@ document.addEventListener('readystatechange', e => {
         return;
     }
 
-    STATES.isSignedIn = !!((window as any).xbcUser?.isSignedIn);
+    STATES.isSignedIn = !!window.xbcUser?.isSignedIn;
 
     if (STATES.isSignedIn) {
         // Preload Remote Play
-        getPref(PrefKey.REMOTE_PLAY_ENABLED) && RemotePlayManager.getInstance().initialize();
+        if (isFullVersion()) {
+            RemotePlayManager.getInstance()?.initialize();
+        }
     } else {
         // Show Settings button in the header when not signed in
-        window.setTimeout(HeaderSection.watchHeader, 2000);
+        // window.setTimeout(HeaderSection.watchHeader, 2000);
     }
 
     // Hide "Play with Friends" skeleton section
-    if (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS)) {
-        const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest('div[class*=HomePage-module]') as HTMLElement;
+    if (getGlobalPref(GlobalPref.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS) || getGlobalPref(GlobalPref.BLOCK_FEATURES).includes(BlockFeature.FRIENDS)) {
+        const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest<HTMLElement>('div[class*=HomePage-module]');
         $parent && ($parent.style.display = 'none');
     }
 
@@ -188,79 +203,113 @@ window.addEventListener('popstate', onHistoryChanged);
 window.history.pushState = patchHistoryMethod('pushState');
 window.history.replaceState = patchHistoryMethod('replaceState');
 
-window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
-    STATES.supportedRegion = false;
-    window.setTimeout(HeaderSection.watchHeader, 2000);
-
-    // Open Settings dialog on Unsupported page
-    const $unsupportedPage = document.querySelector('div[class^=UnsupportedMarketPage-module__container]') as HTMLElement;
-    if ($unsupportedPage) {
-        SettingsNavigationDialog.getInstance().show();
-    }
-}, {once: true});
-
-window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
-    STATES.isSignedIn = true;
-    window.setTimeout(HeaderSection.watchHeader, 2000);
+BxEventBus.Script.on('ui.header.rendered', () => {
+    HeaderSection.getInstance().checkHeader();
 });
 
-window.addEventListener(BxEvent.STREAM_LOADING, e => {
+BxEventBus.Stream.on('state.loading', () => {
     // Get title ID for screenshot's name
     if (window.location.pathname.includes('/launch/') && STATES.currentStream.titleInfo) {
-        STATES.currentStream.titleSlug = productTitleToSlug(STATES.currentStream.titleInfo.product.title);
+        STATES.currentStream.titleSlug = productTitleToSlug(STATES.currentStream.titleInfo.productInfo.title);
     } else {
         STATES.currentStream.titleSlug = 'remote-play';
     }
 });
 
 // Setup loading screen
-getPref(PrefKey.UI_LOADING_SCREEN_GAME_ART) && window.addEventListener(BxEvent.TITLE_INFO_READY, LoadingScreen.setup);
+getGlobalPref(GlobalPref.LOADING_SCREEN_GAME_ART) && BxEventBus.Script.on('titleInfo.ready', LoadingScreen.setup);
 
-window.addEventListener(BxEvent.STREAM_STARTING, e => {
+BxEventBus.Stream.on('state.starting', () => {
     // Hide loading screen
     LoadingScreen.hide();
 
-    // Start hiding cursor
-    if (!getPref(PrefKey.MKB_ENABLED) && getPref(PrefKey.MKB_HIDE_IDLE_CURSOR)) {
-        MouseCursorHider.start();
-        MouseCursorHider.hide();
+    if (isFullVersion()) {
+        // Start hiding cursor
+        const cursorHider = MouseCursorHider.getInstance();
+        if (cursorHider) {
+            cursorHider.start();
+            cursorHider.hide();
+        }
     }
 });
 
-window.addEventListener(BxEvent.STREAM_PLAYING, e => {
-    STATES.isPlaying = true;
-    StreamUiHandler.observe();
-
-    if (isFullVersion() && getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
-        const gameBar = GameBar.getInstance();
-        gameBar.reset();
-        gameBar.enable();
-        gameBar.showBar();
+BxEventBus.Stream.on('state.playing', payload => {
+    if (isFullVersion()) {
+        window.BX_STREAM_SETTINGS = StreamSettings.settings;
+        StreamSettings.refreshAllSettings();
     }
 
+    STATES.isPlaying = true;
+
     if (isFullVersion()) {
-        const $video = (e as any).$video as HTMLVideoElement;
-        Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight);
+        const gameBar = GameBar.getInstance();
+        if (gameBar) {
+            gameBar.reset();
+            gameBar.enable();
+            gameBar.showBar();
+        }
+
+        // Setup Keyboard shortcuts
+        KeyboardShortcutHandler.getInstance().start();
+
+        // Setup screenshot
+        const $video = payload.$video as HTMLVideoElement;
+        ScreenshotManager.getInstance().updateCanvasSize($video.videoWidth, $video.videoHeight);
+
+        // Setup local co-op
+        if (getStreamPref(StreamPref.LOCAL_CO_OP_ENABLED)) {
+            BxExposed.toggleLocalCoOp(true);
+            Toast.show(t('local-co-op'), t('enabled'));
+        }
     }
 
     updateVideoPlayer();
 });
 
-window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
-    BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
+BxEventBus.Script.on('ui.error.rendered', () => {
+    BxEventBus.Stream.emit('state.stopped', {});
 });
 
-window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e => {
+BxEventBus.Script.on('ui.guideHome.rendered', () => {
+    const $root = document.querySelector<HTMLElement>('#gamepass-dialog-root div[role=dialog] div[role=tabpanel] div[class*=HomeLandingPage]');
+    $root && GuideMenu.getInstance().injectHome($root, STATES.isPlaying);
+});
+
+BxEventBus.Script.on('ui.guideAchievementProgress.rendered', () => {
+    const $elm = document.querySelector('#gamepass-dialog-root button[class*=AchievementsButton-module__progressBarContainer]');
+    if ($elm) {
+        TrueAchievements.getInstance().injectAchievementsProgress($elm as HTMLElement);
+    }
+});
+
+BxEventBus.Script.on('ui.guideAchievementDetail.rendered', () => {
+    const $elm = document.querySelector('#gamepass-dialog-root div[class^=AchievementDetailPage-module]');
+    if ($elm) {
+        TrueAchievements.getInstance().injectAchievementDetailPage($elm as HTMLElement);
+    }
+});
+
+BxEventBus.Stream.on('ui.streamMenu.rendered', async () => {
+    await StreamUiHandler.handleStreamMenu();
+});
+
+BxEventBus.Stream.on('ui.streamHud.rendered', async () => {
+    const $elm = document.querySelector<HTMLElement>('#StreamHud');
+    $elm && StreamUiHandler.handleSystemMenu($elm);
+});
+
+
+isFullVersion() && window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e => {
     const component = (e as any).component;
-    if (component === 'product-details') {
+    if (component === 'product-detail') {
         ProductDetailsPage.injectButtons();
     }
 });
 
 // Detect game change
-window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
-    const dataChannel = (e as any).dataChannel;
-    if (!dataChannel || dataChannel.label !== 'message') {
+BxEventBus.Stream.on('dataChannelCreated', payload => {
+    const { dataChannel } = payload;
+    if (dataChannel?.label !== 'message') {
         return;
     }
 
@@ -269,39 +318,59 @@ window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
             return;
         }
 
-        // Get xboxTitleId from message
-        if (msg.data.includes('/titleinfo')) {
-            const json = JSON.parse(JSON.parse(msg.data).content);
-            const xboxTitleId = parseInt(json.titleid, 16);
-            STATES.currentStream.xboxTitleId = xboxTitleId;
+        if (!msg.data.includes('/titleinfo')) {
+            return;
+        }
 
-            // Get titleSlug for Remote Play
-            if (STATES.remotePlay.isPlaying) {
-                STATES.currentStream.titleSlug = 'remote-play';
-                if (json.focused) {
-                    const productTitle = await XboxApi.getProductTitle(xboxTitleId);
-                    if (productTitle) {
-                        STATES.currentStream.titleSlug = productTitleToSlug(productTitle);
-                    }
+        // Get xboxTitleId from message
+        const currentStream = STATES.currentStream;
+        const json = JSON.parse(JSON.parse(msg.data).content);
+        const currentId = currentStream.xboxTitleId ?? null;
+        let newId: number = parseInt(json.titleid, 16);
+
+        // Get titleSlug for Remote Play
+        if (window.location.pathname.includes('/play/consoles/launch/')) {
+            currentStream.titleSlug = 'remote-play';
+            if (json.focused) {
+                const productTitle = await XboxApi.getProductTitle(newId);
+                if (productTitle) {
+                    currentStream.titleSlug = productTitleToSlug(productTitle);
+                } else {
+                    newId = -1;
                 }
+            } else {
+                newId = 0;
             }
         }
+
+        if (currentId !== newId) {
+            currentStream.xboxTitleId = newId;
+            BxEventBus.Stream.emit('xboxTitleId.changed', {
+                id: newId,
+            });
+        }
     });
 });
 
+
 function unload() {
     if (!STATES.isPlaying) {
         return;
     }
 
+    BxLogger.warning('Unloading');
     if (isFullVersion()) {
+        KeyboardShortcutHandler.getInstance().stop();
+
         // Stop MKB listeners
-        EmulatedMkbHandler.getInstance().destroy();
-        NativeMkbHandler.getInstance().destroy();
+        EmulatedMkbHandler.getInstance()?.destroy();
+        NativeMkbHandler.getInstance()?.destroy();
+
+        DeviceVibrationManager.getInstance()?.reset();
     }
 
     // Destroy StreamPlayer
-    STATES.currentStream.streamPlayer?.destroy();
+    STATES.currentStream.streamPlayerManager?.destroy();
 
     STATES.isPlaying = false;
     STATES.currentStream = {};
@@ -309,79 +378,41 @@ function unload() {
     window.BX_EXPOSED.stopTakRendering = false;
 
     NavigationDialogManager.getInstance().hide();
-    StreamStats.getInstance().onStoppedPlaying();
+    StreamStats.getInstance().destroy();
+    StreamBadges.getInstance().destroy();
 
     if (isFullVersion()) {
-        MouseCursorHider.stop();
+        MouseCursorHider.getInstance()?.stop();
         TouchController.reset();
-        GameBar.getInstance().disable();
+
+        GameBar.getInstance()?.disable();
+
+        BxEventBus.Stream.emit('xboxTitleId.changed', { id: -1 });
     }
 }
 
-window.addEventListener(BxEvent.STREAM_STOPPED, unload);
+BxEventBus.Stream.on('state.stopped', unload);
 window.addEventListener('pagehide', e => {
-    BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
+    BxEventBus.Stream.emit('state.stopped', {});
 });
 
 isFullVersion() && window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
-    Screenshot.takeScreenshot();
+    ScreenshotManager.getInstance().takeScreenshot();
 });
 
 
-function observeRootDialog($root: HTMLElement) {
-    let beingShown = false;
-
-    const observer = new MutationObserver(mutationList => {
-        for (const mutation of mutationList) {
-            if (mutation.type !== 'childList') {
-                continue;
-            }
-
-            BX_FLAGS.Debug && BxLogger.warning('RootDialog', 'added', mutation.addedNodes);
-            if (mutation.addedNodes.length === 1) {
-                const $addedElm = mutation.addedNodes[0];
-                if ($addedElm instanceof HTMLElement && $addedElm.className) {
-                    // Make sure it's Guide dialog
-                    if ($root.querySelector('div[class*=GuideDialog]')) {
-                        GuideMenu.observe($addedElm);
-                    }
-                }
-            }
-
-            const shown = !!($root.firstElementChild && $root.firstElementChild.childElementCount > 0);
-            if (shown !== beingShown) {
-                beingShown = shown;
-                BxEvent.dispatch(window, shown ? BxEvent.XCLOUD_DIALOG_SHOWN : BxEvent.XCLOUD_DIALOG_DISMISSED);
-            }
-        }
-    });
-    observer.observe($root, {subtree: true, childList: true});
-}
-
-function waitForRootDialog() {
-    const observer = new MutationObserver(mutationList => {
-        for (const mutation of mutationList) {
-            if (mutation.type !== 'childList') {
-                continue;
-            }
-
-            const $target = mutation.target as HTMLElement;
-            if ($target.id && $target.id === 'gamepass-dialog-root') {
-                observer.disconnect();
-                observeRootDialog($target);
-                break;
-            }
-        };
-    });
-    observer.observe(document.documentElement, {subtree: true, childList: true});
-}
-
-
 function main() {
-    if (getPref(PrefKey.GAME_MSFS2020_FORCE_NATIVE_MKB)) {
-        BX_FLAGS.ForceNativeMkbTitles.push('9PMQDM08SNK9');
+    GhPagesUtils.fetchLatestCommit();
+
+    if (isFullVersion()) {
+        if (getGlobalPref(GlobalPref.NATIVE_MKB_MODE) !== NativeMkbMode.OFF) {
+            const customList = getGlobalPref(GlobalPref.NATIVE_MKB_FORCED_GAMES);
+            BX_FLAGS.ForceNativeMkbTitles.push(...customList);
+        }
     }
 
+    StreamSettings.setup();
+
     // Monkey patches
     patchRtcPeerConnection();
     patchRtcCodecs();
@@ -390,32 +421,26 @@ function main() {
     patchCanvasContext();
     isFullVersion() && AppInterface && patchPointerLockApi();
 
-    getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext();
+    getGlobalPref(GlobalPref.AUDIO_VOLUME_CONTROL_ENABLED) && patchAudioContext();
 
-    if (getPref(PrefKey.BLOCK_TRACKING)) {
+    if (getGlobalPref(GlobalPref.BLOCK_TRACKING)) {
         patchMeControl();
         disableAdobeAudienceManager();
     }
 
-    waitForRootDialog();
-
     // Setup UI
     addCss();
-    Toast.setup();
 
-    GuideMenu.addEventListeners();
     StreamStatsCollector.setupEvents();
     StreamBadges.setupEvents();
     StreamStats.setupEvents();
 
     if (isFullVersion()) {
-        (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
-        Screenshot.setup();
+        WebGPUPlayer.prepare();
 
         STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
-        overridePreloadState();
 
-        VibrationManager.initialSetup();
+        DeviceVibrationManager.getInstance();
 
         // Check for Update
         BX_FLAGS.CheckForUpdate && checkForUpdate();
@@ -423,29 +448,24 @@ function main() {
         Patcher.init();
         disablePwa();
 
-        // Preload Remote Play
-        if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
-            RemotePlayManager.detect();
-        }
-
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
+        if (getGlobalPref(GlobalPref.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL) {
             TouchController.setup();
         }
 
         // Start PointerProviderServer
-        if (getPref(PrefKey.MKB_ENABLED) && AppInterface) {
+        if (AppInterface && (getGlobalPref(GlobalPref.MKB_ENABLED) || getGlobalPref(GlobalPref.NATIVE_MKB_MODE) === NativeMkbMode.ON)) {
             STATES.pointerServerPort = AppInterface.startPointerServer() || 9269;
             BxLogger.info('startPointerServer', 'Port', STATES.pointerServerPort.toString());
         }
 
         // Show wait time in game card
-        getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && GameTile.setup();
+        getGlobalPref(GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME) && GameTile.setup();
 
         EmulatedMkbHandler.setupEvents();
     }
 
     // Show a toast when connecting/disconecting controller
-    if (getPref(PrefKey.CONTROLLER_SHOW_CONNECTION_STATUS)) {
+    if (getGlobalPref(GlobalPref.UI_CONTROLLER_SHOW_STATUS)) {
         window.addEventListener('gamepadconnected', e => showGamepadToast(e.gamepad));
         window.addEventListener('gamepaddisconnected', e => showGamepadToast(e.gamepad));
     }

src/macros/build.ts

@@ -25,3 +25,17 @@ export const renderStylus = async () => {
 export const compressCss = (css: string) => {
     return (stylus(css, {}).set('compress', true)).render();
 };
+
+export const compressCode = (code: string): string => {
+    return code.split('\n') // Split into lines
+        .map(line => line.startsWith('#') || line.startsWith('@') ? line + '\n' : line.trim()) // Trim spaces, with exceptions for shader files
+        .filter(line => line && !line.startsWith('//')) // Remove empty and commented lines
+        .join(''); // Join into a single line
+};
+
+export const compressCodeFile = async (path: string) => {
+    const file = Bun.file(path);
+    const code = await file.text();
+
+    return compressCode(code);
+};