chore(release): 3.13.0 [CI SKIP]

feat(Menu): add more missing props (#60 ) [CI SKIP]
* feat(Menu): extend FooterLegendProps * feat(MenuItem): add more missing props
2026-05-20 10:00:08 +02:00 · 2022-11-29 20:01:20 +00:00 · 2022-11-29 21:00:45 +01:00 · 2022-11-28 12:03:43 +00:00 · 2022-11-28 07:03:07 -05:00 · 2022-11-20 01:13:29 +00:00
40 changed files with 6812 additions and 23187 deletions
--- a/.github/workflows/docs.yaml
+++ b/.github/workflows/docs.yaml
@@ -29,12 +29,13 @@ jobs:
      - name: Setup | Dependencies
        run: |
          cd lib
-          npm ci
+          npm i -g pnpm
+          pnpm i --frozen-lockfile

      - name: Build Docs
        run: |
          cd lib
-          npm run docs -- --out ../wiki/api-docs/decky-frontend-lib
+          pnpm run docs --out ../wiki/api-docs/decky-frontend-lib

      - name: Commit files
        run: |
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -1,6 +1,7 @@
 name: Release

 on:
+  pull_request:
  push:
    branches:
      - main
@@ -19,11 +20,14 @@ jobs:
        with:
          node-version: 16
      - name: Setup | Dependencies
-        run: npm ci
+        run: npm i -g pnpm && pnpm i --frozen-lockfile
+      - name: Build
+        run: pnpm run build
      - name: Test
-        run: npm test
+        run: pnpm run test
      - name: Release
+        if: github.event_name != 'pull_request'
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npm exec semantic-release
+        run: pnpm exec semantic-release
--- a/.gitignore
+++ b/.gitignore
@@ -36,7 +36,4 @@ dist/

 research/

-# PNPM lockfile
-pnpm-lock.yaml
-
 docs/
--- a/.releaserc.json
+++ b/.releaserc.json
@@ -6,7 +6,8 @@
      {
        "preset": "angular",
        "releaseRules": [
-          {"type": "chore", "scope": "classes", "release": "patch"}
+          {"type": "chore", "scope": "classes", "release": "patch"},
+          {"type": "*", "scope": "docs", "release": false}
        ]
      }
    ],
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,201 @@
+# [3.13.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.12.0...v3.13.0) (2022-11-29)
+
+
+### Features
+
+* **Menu:** add more missing props ([#60](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/60)) [CI SKIP] ([678ba21](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/678ba216f1e194986b0c391398e6f73536cd0102))
+
+# [3.12.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.11.1...v3.12.0) (2022-11-28)
+
+
+### Features
+
+* **MenuItem:** add missing props ([#59](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/59)) ([c84a091](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c84a09146935f0942265b7a1e4aadc40e8cf22dc))
+
+## [3.11.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.11.0...v3.11.1) (2022-11-20)
+
+
+### Bug Fixes
+
+* **Footer:** add types for ActionDescriptionMap ([2ec9519](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2ec9519b7d6d1cc0d232853ce05a773953b37c5a))
+
+# [3.11.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.10.0...v3.11.0) (2022-11-18)
+
+
+### Features
+
+* **classes:** add "appDetailsClasses" ([#55](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/55)) ([ed98d14](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/ed98d14b37cf09500afd88e7c8e9c03749119b38))
+
+# [3.10.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.9.0...v3.10.0) (2022-11-18)
+
+
+### Features
+
+* **classes:** add appDetailsHeaderClasses ([#54](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/54)) ([3229162](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/32291620b403f8b65cf378343454a3f2668fb6ee))
+
+# [3.9.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.8.0...v3.9.0) (2022-11-16)
+
+
+### Features
+
+* **Dialog:** add "focusable" button prop ([#51](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/51)) ([e167ef5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e167ef5a138a3edc004db2365334f8455c177132))
+
+# [3.8.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.14...v3.8.0) (2022-11-11)
+
+
+### Features
+
+* **routerhook:** add global components support ([215156d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/215156d31688faac9028627379e5a3ac4d64ec46))
+
+## [3.7.14](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.13...v3.7.14) (2022-11-05)
+
+
+### Bug Fixes
+
+* **Menu:** fix on Steam beta ([82768e0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/82768e0415d084deb2af39beb3f9273a83e819de))
+* **Modal:** fix on Steam beta ([e44187f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e44187fe4b9d3e3c9e94490669591599dc5246ba))
+
+## [3.7.13](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.12...v3.7.13) (2022-11-02)
+
+
+### Bug Fixes
+
+* **useQuickAccessVisible:** make it work in beta ([#49](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/49)) ([e1f64a3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e1f64a38de85073e5cea74ecea4b9cde9a783ecc))
+
+## [3.7.12](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.11...v3.7.12) (2022-10-29)
+
+
+### Bug Fixes
+
+* **Item:** change title and description types to ReactNode ([0ed054f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0ed054fae972ffd36299b142bd693f80388480a6))
+
+## [3.7.11](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.10...v3.7.11) (2022-10-28)
+
+
+### Bug Fixes
+
+* **package.json:** train wtf ([789e163](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/789e16380fd01a6b46188c7a1174a55c18c8dead))
+
+## [3.7.10](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.9...v3.7.10) (2022-10-28)
+
+
+### Bug Fixes
+
+* **tabs:** shut up typescript ([75f3588](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/75f35882f27252e1255208953a6e801c68d5dcec))
+
+## [3.7.9](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.8...v3.7.9) (2022-10-28)
+
+
+### Bug Fixes
+
+* **tabs:** fix on stable for real this time i think ([a074277](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a074277bb58428a64295154ebf96aceb96e654a7))
+
+## [3.7.8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.7...v3.7.8) (2022-10-26)
+
+
+### Bug Fixes
+
+* **Field:** fix this time for real ([#44](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/44)) ([cfef1dc](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/cfef1dc320a5f649d66c3af365cd6aa2d88e46ea))
+
+## [3.7.7](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.6...v3.7.7) (2022-10-26)
+
+
+### Bug Fixes
+
+* **Field:** remove incompatible properties ([#42](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/42)) ([0010a1f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0010a1fceedc417aa25b709d066341da97d42444))
+
+## [3.7.6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.5...v3.7.6) (2022-10-26)
+
+
+### Bug Fixes
+
+* **Field:** add override for onClick type ([#43](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/43)) ([fe75dfb](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/fe75dfb5f4fb1ec9417cc07dc714c71820945748))
+
+## [3.7.5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.4...v3.7.5) (2022-10-26)
+
+
+### Bug Fixes
+
+* **Field:** add types for focusing field ([#41](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/41)) ([bedb6b8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/bedb6b8bb90e021a60e47a93709d6f48e0bd75c6))
+
+## [3.7.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.3...v3.7.4) (2022-10-26)
+
+
+### Bug Fixes
+
+* **docs:** change arg format ([ed0b92d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/ed0b92de2ec13a585f6524b45eef0ab538d87448))
+* **tabs:** fix on stable ([f16e0b2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f16e0b29f8e1de500e8f436db659d1ad99d4eaa6))
+
+## [3.7.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.2...v3.7.3) (2022-10-25)
+
+
+### Bug Fixes
+
+* **tabs:** it returns ([3c553a2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/3c553a227d1aa7b03c4431ff968f336b4f871801))
+
+## [3.7.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.1...v3.7.2) (2022-10-24)
+
+
+### Bug Fixes
+
+* **tabs:** unkill build ([3dbca1a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/3dbca1a0567592a597e70ce5e9bef157f709c765))
+
+## [3.7.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.0...v3.7.1) (2022-10-24)
+
+
+### Bug Fixes
+
+* **Tabs:** temp remove until we have a way to grab it on beta ([25c33b2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/25c33b2a05a30c3c72008c5f459c3b77f819db5a))
+
+# [3.7.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.6.1...v3.7.0) (2022-10-24)
+
+
+### Features
+
+* **modal:** support for latest steamos preview ([5f0470c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/5f0470c351dc4ecb24ea3e928ff0b0199c399fa4))
+
+## [3.6.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.6.0...v3.6.1) (2022-10-19)
+
+
+### Bug Fixes
+
+* **plugin:** export RoutePatch ([#39](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/39)) ([c44c66f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c44c66facd4e158aa4fe0a69f62a2ca3add805c1))
+
+# [3.6.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.6...v3.6.0) (2022-10-15)
+
+
+### Features
+
+* **plugin:** add alwaysRender ([2fc2060](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2fc2060a6c0d9414d1c36a1a022fdc6f2cd7f8bb))
+
+## [3.5.6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.5...v3.5.6) (2022-10-08)
+
+
+### Bug Fixes
+
+* **Dialog:** remove not exported dialog button ([#37](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/37)) ([5a5218a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/5a5218a7c43f6a90fc4de5f7a0cd524d1cd298d6))
+
+## [3.5.5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.4...v3.5.5) (2022-10-08)
+
+
+### Bug Fixes
+
+* **sidebarnavigation:** no dont ([0ce1b54](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0ce1b5499df699f602aa83ab87ad8b246d133eac))
+
+## [3.5.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.3...v3.5.4) (2022-10-08)
+
+
+### Bug Fixes
+
+* **sidebarnavigation:** allow null pags ([d6b00b0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/d6b00b07337f7a9d38813eeec7c0a848d5c15f17))
+
+## [3.5.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.2...v3.5.3) (2022-10-08)
+
+
+### Bug Fixes
+
+* **tabs:** fix props and add example ([4024b76](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/4024b76918eea43e43a24c162a937877f18627f0))
+
 ## [3.5.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.1...v3.5.2) (2022-10-08)


--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "decky-frontend-lib",
-  "version": "3.5.2",
+  "version": "3.13.0",
  "description": "A library for building decky plugins",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
@@ -10,7 +10,6 @@
    "build": "shx rm -rf dist && tsc -b",
    "dev": "tsc -b -w",
    "docs": "typedoc --tsconfig ./tsconfig.json src/**/*",
-    "prepack": "npm run build",
    "test": "echo 'No tests for now!'",
    "prepare": "husky install",
    "commit": "git-cz"
@@ -54,6 +53,8 @@
    "husky": "^8.0.1",
    "import-sort-style-module": "^6.0.0",
    "jest": "^27.5.1",
+    "minimist": "^1.2.6",
+    "prettier": "^2.7.1",
    "prettier-plugin-import-sort": "^0.0.7",
    "semantic-release": "^19.0.3",
    "shx": "^0.3.4",
@@ -77,8 +78,5 @@
      "style": "module",
      "parser": "typescript"
    }
-  },
-  "dependencies": {
-    "minimist": "^1.2.6"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/custom-components/ColorPickerModal.tsx
+++ b/src/custom-components/ColorPickerModal.tsx
@@ -1,5 +1,6 @@
-import { gamepadSliderClasses, ConfirmModal, SliderField } from "../deck-components";
-import { useState, FC, CSSProperties } from "react";
+import { CSSProperties, FC, useState } from 'react';
+
+import { ConfirmModal, SliderField, gamepadSliderClasses } from '../deck-components';

 interface ColorPickerModalProps {
  closeModal: () => void;
@@ -14,7 +15,7 @@ interface ColorPickerModalProps {
 export const ColorPickerModal: FC<ColorPickerModalProps> = ({
  closeModal,
  onConfirm = () => {},
-  title = "Color Picker",
+  title = 'Color Picker',
  defaultH = 0,
  defaultS = 100,
  defaultL = 50,
@@ -26,22 +27,22 @@ export const ColorPickerModal: FC<ColorPickerModalProps> = ({
  const [A, setA] = useState<number>(defaultA);

  const colorPickerCSSVars = {
-    "--decky-color-picker-hvalue": `${H}`,
-    "--decky-color-picker-svalue": `${S}%`,
-    "--decky-color-picker-lvalue": `${L}%`,
-    "--decky-color-picker-avalue": `${A}`,
+    '--decky-color-picker-hvalue': `${H}`,
+    '--decky-color-picker-svalue': `${S}%`,
+    '--decky-color-picker-lvalue': `${L}%`,
+    '--decky-color-picker-avalue': `${A}`,
  } as CSSProperties;

  return (
-      <ConfirmModal
-        bAllowFullSize
-        onCancel={closeModal}
-        onOK={() => {
-          onConfirm(`hsla(${H}, ${S}%, ${L}%, ${A})`);
-          closeModal();
-        }}
-      >
-        <style>
+    <ConfirmModal
+      bAllowFullSize
+      onCancel={closeModal}
+      onOK={() => {
+        onConfirm(`hsla(${H}, ${S}%, ${L}%, ${A})`);
+        closeModal();
+      }}
+    >
+      <style>
        {`
        /* This removes the cyan track color that is behind the slider head */
        .ColorPicker_Container .${gamepadSliderClasses.SliderTrack} {
@@ -87,77 +88,44 @@ export const ColorPickerModal: FC<ColorPickerModalProps> = ({
        }
        `}
      </style>
+      <div
+        className="ColorPicker_ColorDisplayContainer"
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '1em',
+          // theres a large header by default on the modal, so this just pushes it up into that unused space
+          marginTop: '-2.5em',
+        }}
+      >
+        <div>
+          <span style={{ fontSize: '1.5em' }}>
+            <b>{title}</b>
+          </span>
+        </div>
        <div
-          className="ColorPicker_ColorDisplayContainer"
          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            marginBottom: "1em",
-            // theres a large header by default on the modal, so this just pushes it up into that unused space
-            marginTop: "-2.5em",
+            backgroundColor: `hsla(${H}, ${S}%, ${L}%, ${A})`,
+            width: '40px',
+            height: '40px',
          }}
-        >
-          <div>
-            <span style={{ fontSize: "1.5em" }}>
-              <b>{title}</b>
-            </span>
-          </div>
-          <div
-            style={{
-              backgroundColor: `hsla(${H}, ${S}%, ${L}%, ${A})`,
-              width: "40px",
-              height: "40px",
-            }}
-          ></div>
+        ></div>
+      </div>
+      <div className="ColorPicker_Container" style={colorPickerCSSVars}>
+        <div className="ColorPicker_HSlider">
+          <SliderField showValue editableValue label="Hue" value={H} min={0} max={360} onChange={setH} />
        </div>
-        <div className="ColorPicker_Container" style={colorPickerCSSVars}>
-          <div className="ColorPicker_HSlider">
-            <SliderField
-              showValue
-              editableValue
-              label="Hue"
-              value={H}
-              min={0}
-              max={360}
-              onChange={setH}
-            />
-          </div>
-          <div className="ColorPicker_SSlider">
-            <SliderField
-              showValue
-              editableValue
-              label="Saturation"
-              value={S}
-              min={0}
-              max={100}
-              onChange={setS}
-            />
-          </div>
-          <div className="ColorPicker_LSlider">
-            <SliderField
-              showValue
-              editableValue
-              label="Lightness"
-              value={L}
-              min={0}
-              max={100}
-              onChange={setL}
-            />
-          </div>
-          <div className="ColorPicker_ASlider">
-            <SliderField
-              showValue
-              editableValue
-              label="Alpha"
-              value={A}
-              step={0.1}
-              min={0}
-              max={1}
-              onChange={setA}
-            />
-          </div>
+        <div className="ColorPicker_SSlider">
+          <SliderField showValue editableValue label="Saturation" value={S} min={0} max={100} onChange={setS} />
        </div>
-      </ConfirmModal>
+        <div className="ColorPicker_LSlider">
+          <SliderField showValue editableValue label="Lightness" value={L} min={0} max={100} onChange={setL} />
+        </div>
+        <div className="ColorPicker_ASlider">
+          <SliderField showValue editableValue label="Alpha" value={A} step={0.1} min={0} max={1} onChange={setA} />
+        </div>
+      </div>
+    </ConfirmModal>
  );
 };
--- a/src/custom-components/SuspensefulImage.tsx
+++ b/src/custom-components/SuspensefulImage.tsx
@@ -1,7 +1,8 @@
-import { Spinner } from '../deck-components';
 import { useEffect } from 'react';
 import { FC, ImgHTMLAttributes, useState } from 'react';

+import { Spinner } from '../deck-components';
+
 interface SuspensefulImageProps extends ImgHTMLAttributes<HTMLImageElement> {
  suspenseWidth?: string | number;
  suspenseHeight?: string | number;
@@ -38,4 +39,4 @@ export const SuspensefulImage: FC<SuspensefulImageProps> = (props) => {
  ) : (
    <img {...props} />
  );
-};
+};
--- a/src/custom-hooks/index.ts
+++ b/src/custom-hooks/index.ts
@@ -1 +1 @@
-export * from './usequickaccessvisible';
+export * from './useQuickAccessVisible';
--- a/src/custom-hooks/useQuickAccessVisible.tsx
+++ b/src/custom-hooks/useQuickAccessVisible.tsx
@@ -1,21 +1,31 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';

 declare global {
  var FocusNavController: any;
 }

+function getQuickAccessWindow(): Window | null {
+  try {
+    const navTrees = FocusNavController?.m_ActiveContext?.m_rgGamepadNavigationTrees || FocusNavController?.m_rgGamepadNavigationTrees;
+    return navTrees?.find((tree: any) => tree?.id === "QuickAccess-NA")?.m_Root?.m_element?.ownerDocument.defaultView ?? null;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
 /**
 * Returns state indicating the visibility of quick access menu.
 *
- * @remarks 
+ * @remarks
 * During development it is possible to open the quick access menu without giving it
 * focus in some cases. In such cases, the quick access menu state is invisible.
- * 
+ *
 * This seems to be impossible to replicate when running the deck normally. Even in
 * the edge cases it always seems to have a focus.
- * 
+ *
 * @returns `true` if quick access menu is visible (focused) and `false` otherwise.
- * 
+ *
 * @example
 * import { VFC, useEffect } from "react";
 * import { useQuickAccessVisible } from "decky-frontend-lib";
@@ -42,24 +52,23 @@ declare global {
 * };
 */
 export function useQuickAccessVisible(): boolean {
-  // Assuming that the component is rendered in QAM already, so true by default...
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(getQuickAccessWindow()?.document.hasFocus() ?? true);

  useEffect(() => {
-    const quickAccessWindow: Window | null = FocusNavController?.GetGamepadNavTreeByID("QuickAccess-NA")?.m_Root?.m_element?.ownerDocument.defaultView ?? null;
+    const quickAccessWindow = getQuickAccessWindow();
    if (quickAccessWindow === null) {
-      console.error("Could not get window of QuickAccess menu!");
+      console.error('Could not get window of QuickAccess menu!');
      return;
    }

    const onBlur = () => setIsVisible(false);
    const onFocus = () => setIsVisible(true);

-    quickAccessWindow.addEventListener("blur", onBlur);
-    quickAccessWindow.addEventListener("focus", onFocus);
+    quickAccessWindow.addEventListener('blur', onBlur);
+    quickAccessWindow.addEventListener('focus', onFocus);
    return () => {
-      quickAccessWindow.removeEventListener("blur", onBlur);
-      quickAccessWindow.removeEventListener("focus", onFocus);
+      quickAccessWindow.removeEventListener('blur', onBlur);
+      quickAccessWindow.removeEventListener('focus', onFocus);
    };
  }, []);

--- a/src/deck-components/Button.tsx
+++ b/src/deck-components/Button.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { DialogButton, DialogButtonProps } from "./Dialog";

-export interface ButtonProps extends DialogButtonProps {
-}
+import { DialogButton, DialogButtonProps } from './Dialog';
+
+export interface ButtonProps extends DialogButtonProps {}

 // Button isn't exported, so call DialogButton to grab it
 export const Button = (DialogButton as any)?.render({}).type as FC<ButtonProps>;
--- a/src/deck-components/ButtonItem.tsx
+++ b/src/deck-components/ButtonItem.tsx
@@ -8,6 +8,8 @@ export interface ButtonItemProps extends ItemProps {
  disabled?: boolean;
 }

-export const ButtonItem = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') || mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
+export const ButtonItem = Object.values(CommonUIModule).find(
+  (mod: any) =>
+    mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') ||
+    mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
 ) as FC<ButtonItemProps>;
--- a/src/deck-components/Carousel.ts
+++ b/src/deck-components/Carousel.ts
@@ -1,5 +1,6 @@
-import { HTMLAttributes, ReactNode, RefAttributes, VFC } from "react";
-import { findModuleChild } from "../webpack";
+import { HTMLAttributes, ReactNode, RefAttributes, VFC } from 'react';
+
+import { findModuleChild } from '../webpack';

 export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
  autoFocus?: boolean;
@@ -22,7 +23,6 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
 export const Carousel = findModuleChild((m) => {
  if (typeof m !== 'object') return undefined;
  for (let prop in m) {
-    if (m[prop]?.render?.toString().includes("setFocusedColumn:"))
-      return m[prop];
+    if (m[prop]?.render?.toString().includes('setFocusedColumn:')) return m[prop];
  }
-}) as VFC<CarouselProps & RefAttributes<HTMLDivElement>>;
+}) as VFC<CarouselProps & RefAttributes<HTMLDivElement>>;
--- a/src/deck-components/Dialog.tsx
+++ b/src/deck-components/Dialog.tsx
@@ -1,5 +1,6 @@
-import { CommonUIModule } from "../webpack";
-import { CSSProperties, FC, RefAttributes } from "react";
+import { CSSProperties, FC, RefAttributes } from 'react';
+
+import { CommonUIModule } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';

 export interface DialogCommonProps extends RefAttributes<HTMLDivElement> {
@@ -8,8 +9,35 @@ export interface DialogCommonProps extends RefAttributes<HTMLDivElement> {
 }

 export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps {
+  /**
+   * Enables/disables the focus around the button.
+   * 
+   * @note
+   * Default value depends on context, so setting it to `false` will enable it.
+   */
  noFocusRing?: boolean;
+
+  /**
+   * Disables the button - assigned `on*` methods will not be invoked if clicked.
+   * 
+   * @note
+   * Depending on where it is, it might still get focus. In such case it can be 
+   * partially disabled separately.
+   * 
+   * @see focusable.
+   */
  disabled?: boolean;
+
+  /**
+   * Enables/disables the navigation based focus on button - you won't be able to navigate to
+   * it via the gamepad or keyboard. 
+   * 
+   * @note
+   * If set to `false`, it still can be clicked and **WILL** become focused until navigated away.
+   * Depending on the context of where the button is, even a disabled button can focused.
+   */
+  focusable?: boolean;
+  
  onClick?(e: MouseEvent): void;
  onPointerDown?(e: PointerEvent): void;
  onPointerUp?(e: PointerEvent): void;
@@ -22,42 +50,37 @@ export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps
  onSubmit?(e: SubmitEvent): void;
 }

-const CommonDialogDivs = Object.values(CommonUIModule).filter((m: any) => typeof m === "object" && m?.render?.toString().includes('"div",Object.assign({},'));
-const MappedDialogDivs = new Map(Object.values(CommonDialogDivs).map((m: any) => {
-  const renderedDiv = m.render({});
-  // Take only the first class name segment as it identifies the element we want
-  return [renderedDiv.props.className.split(" ")[0], m]
-}));
+const CommonDialogDivs = Object.values(CommonUIModule).filter(
+  (m: any) => typeof m === 'object' && m?.render?.toString().includes('"div",Object.assign({},'),
+);
+const MappedDialogDivs = new Map(
+  Object.values(CommonDialogDivs).map((m: any) => {
+    const renderedDiv = m.render({});
+    // Take only the first class name segment as it identifies the element we want
+    return [renderedDiv.props.className.split(' ')[0], m];
+  }),
+);

-export const DialogHeader = MappedDialogDivs.get("DialogHeader") as FC<DialogCommonProps>;
-export const DialogSubHeader = MappedDialogDivs.get("DialogSubHeader") as FC<DialogCommonProps>;
-export const DialogFooter = MappedDialogDivs.get("DialogFooter") as FC<DialogCommonProps>;
-export const DialogLabel = MappedDialogDivs.get("DialogLabel") as FC<DialogCommonProps>;
-export const DialogBodyText = MappedDialogDivs.get("DialogBodyText") as FC<DialogCommonProps>;
-export const DialogBody = MappedDialogDivs.get("DialogBody") as FC<DialogCommonProps>;
-export const DialogControlsSection = MappedDialogDivs.get("DialogControlsSection") as FC<DialogCommonProps>;
-export const DialogControlsSectionHeader = MappedDialogDivs.get("DialogControlsSectionHeader") as FC<DialogCommonProps>;
+export const DialogHeader = MappedDialogDivs.get('DialogHeader') as FC<DialogCommonProps>;
+export const DialogSubHeader = MappedDialogDivs.get('DialogSubHeader') as FC<DialogCommonProps>;
+export const DialogFooter = MappedDialogDivs.get('DialogFooter') as FC<DialogCommonProps>;
+export const DialogLabel = MappedDialogDivs.get('DialogLabel') as FC<DialogCommonProps>;
+export const DialogBodyText = MappedDialogDivs.get('DialogBodyText') as FC<DialogCommonProps>;
+export const DialogBody = MappedDialogDivs.get('DialogBody') as FC<DialogCommonProps>;
+export const DialogControlsSection = MappedDialogDivs.get('DialogControlsSection') as FC<DialogCommonProps>;
+export const DialogControlsSectionHeader = MappedDialogDivs.get('DialogControlsSectionHeader') as FC<DialogCommonProps>;

 export const DialogButtonPrimary = Object.values(CommonUIModule).find(
-  (mod: any) =>
-    mod?.render?.toString()?.includes('DialogButton') &&
-    mod?.render?.toString()?.includes('Primary')
+  (mod: any) => mod?.render?.toString()?.includes('DialogButton') && mod?.render?.toString()?.includes('Primary'),
 ) as FC<DialogButtonProps>;

 export const DialogButtonSecondary = Object.values(CommonUIModule).find(
  (mod: any) =>
    mod?.render?.toString()?.includes('Object.assign({type:"button"') &&
    mod?.render?.toString()?.includes('DialogButton') &&
-    mod?.render?.toString()?.includes('Secondary')
+    mod?.render?.toString()?.includes('Secondary'),
 ) as FC<DialogButtonProps>;

-export const DialogButtonSmall = Object.values(CommonUIModule).find(
-  (mod: any) =>
-    mod?.render?.toString()?.includes('Object.assign({type:"button"') &&
-    mod?.render?.toString()?.includes('DialogButton') &&
-    mod?.render?.toString()?.includes('Small')
-) as FC<DialogButtonProps>;
-
-// This is the "main" button. The Primary can act as a submit button, 
+// This is the "main" button. The Primary can act as a submit button,
 // therefore secondary is chosen (also for backwards comp. reasons)
 export const DialogButton = DialogButtonSecondary;
--- a/src/deck-components/Field.tsx
+++ b/src/deck-components/Field.tsx
@@ -1,8 +1,9 @@
-import { FC, HTMLAttributes, ReactNode, RefAttributes } from 'react';
+import { FC, ReactNode, RefAttributes } from 'react';
+
 import { findModuleChild } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';

-export interface FieldProps extends HTMLAttributes<HTMLDivElement>, FooterLegendProps {
+export interface FieldProps extends FooterLegendProps {
  label?: ReactNode;
  bottomSeparator?: 'standard' | 'thick' | 'none';
  description?: ReactNode;
@@ -11,17 +12,20 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement>, FooterLegend
  inlineWrap?: 'keep-inline' | 'shift-children-below'; // If label is too long it will move shildren below before starting to wrap label
  childrenLayout?: 'below' | 'inline';
  childrenContainerWidth?: 'min' | 'max' | 'fixed'; // Does not work with childrenLayout==='below'
-  spacingBetweenLabelAndChild?: 'none'; // This applies only when childrenLayout==='below' 
+  spacingBetweenLabelAndChild?: 'none'; // This applies only when childrenLayout==='below'
  padding?: 'none' | 'standard' | 'compact';
  className?: string;
  highlightOnFocus?: boolean;
  indentLevel?: number;
  verticalAlignment?: 'center' | 'none'; // Alligns inline label with children
+  focusable?: boolean; // Allows to get focus without any focusable children or on* callbacks
+  onActivate?: (e: CustomEvent | MouseEvent) => void;
+  onClick?: (e: CustomEvent | MouseEvent) => void;
 }

 export const Field = findModuleChild((m) => {
-    if (typeof m !== "object") return undefined;
-    for (let prop in m) {
-      if (m[prop]?.render?.toString().includes('"shift-children-below"')) return m[prop]
-    }
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (m[prop]?.render?.toString().includes('"shift-children-below"')) return m[prop];
+  }
 }) as FC<FieldProps & RefAttributes<HTMLDivElement>>;
--- a/src/deck-components/FocusRing.ts
+++ b/src/deck-components/FocusRing.ts
@@ -1,18 +1,19 @@
-import { ElementType, FC, ReactNode } from "react";
-import { findModuleChild } from "../webpack";
+import { ElementType, FC, ReactNode } from 'react';
+
+import { findModuleChild } from '../webpack';

 export interface FocusRingProps {
-    className?: string,
-    rootClassName?: string,
-    render?: ElementType,
-    children?: ReactNode,
-    NavigationManager?: any
+  className?: string;
+  rootClassName?: string;
+  render?: ElementType;
+  children?: ReactNode;
+  NavigationManager?: any;
 }

 export const FocusRing = findModuleChild((m: any) => {
-    if (typeof m !== 'object') return false;
-    for (let prop in m) {
-      if (m[prop]?.toString()?.includes('.GetShowDebugFocusRing())')) return m[prop];
-    }
-    return false;
-}) as FC<FocusRingProps>;
+  if (typeof m !== 'object') return false;
+  for (let prop in m) {
+    if (m[prop]?.toString()?.includes('.GetShowDebugFocusRing())')) return m[prop];
+  }
+  return false;
+}) as FC<FocusRingProps>;
--- a/src/deck-components/Focusable.tsx
+++ b/src/deck-components/Focusable.tsx
@@ -1,10 +1,11 @@
-import { HTMLAttributes, ReactNode, RefAttributes, VFC } from "react";
-import { findModuleChild } from "../webpack";
-import { FooterLegendProps } from "./FooterLegend";
+import { HTMLAttributes, ReactNode, RefAttributes, VFC } from 'react';
+
+import { findModuleChild } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';

 export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLegendProps {
  children: ReactNode;
-  "flow-children"?: string;
+  'flow-children'?: string;
  focusClassName?: string;
  focusWithinClassName?: string;
  onActivate?: (e: CustomEvent) => void;
@@ -17,4 +18,4 @@ export const Focusable = findModuleChild((m) => {
    if (m[prop]?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'))
      return m[prop];
  }
-}) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;
+}) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;
--- a/src/deck-components/FooterLegend.ts
+++ b/src/deck-components/FooterLegend.ts
@@ -1,66 +1,65 @@
 export enum GamepadButton {
-    INVALID,
-    OK,
-    CANCEL,
-    SECONDARY,
-    OPTIONS,
-    BUMPER_LEFT,
-    BUMPER_RIGHT,
-    TRIGGER_LEFT,
-    TRIGGER_RIGHT,
-    DIR_UP,
-    DIR_DOWN,
-    DIR_LEFT,
-    DIR_RIGHT,
-    SELECT,
-    START,
-    LSTICK_CLICK,
-    RSTICK_CLICK,
-    LSTICK_TOUCH,
-    RSTICK_TOUCH,
-    LPAD_TOUCH,
-    LPAD_CLICK,
-    RPAD_TOUCH,
-    RPAD_CLICK,
-    REAR_LEFT_UPPER,
-    REAR_LEFT_LOWER,
-    REAR_RIGHT_UPPER,
-    REAR_RIGHT_LOWER,
-    STEAM_GUIDE,
-    STEAM_QUICK_MENU
+  INVALID,
+  OK,
+  CANCEL,
+  SECONDARY,
+  OPTIONS,
+  BUMPER_LEFT,
+  BUMPER_RIGHT,
+  TRIGGER_LEFT,
+  TRIGGER_RIGHT,
+  DIR_UP,
+  DIR_DOWN,
+  DIR_LEFT,
+  DIR_RIGHT,
+  SELECT,
+  START,
+  LSTICK_CLICK,
+  RSTICK_CLICK,
+  LSTICK_TOUCH,
+  RSTICK_TOUCH,
+  LPAD_TOUCH,
+  LPAD_CLICK,
+  RPAD_TOUCH,
+  RPAD_CLICK,
+  REAR_LEFT_UPPER,
+  REAR_LEFT_LOWER,
+  REAR_RIGHT_UPPER,
+  REAR_RIGHT_LOWER,
+  STEAM_GUIDE,
+  STEAM_QUICK_MENU,
 }
-
-export enum NavEntryPositionPreferences {
-    FIRST,
-    LAST,
-    MAINTAIN_X,
-    MAINTAIN_Y,
-    PREFERRED_CHILD
+export declare enum NavEntryPositionPreferences {
+  FIRST,
+  LAST,
+  MAINTAIN_X,
+  MAINTAIN_Y,
+  PREFERRED_CHILD
 }
-
 export interface GamepadEventDetail {
-    button: number;
-    is_repeat?: boolean;
-    source: number;
+  button: number;
+  is_repeat?: boolean;
+  source: number;
 }
-
-export type GamepadEvent = CustomEvent<GamepadEventDetail>
-
+export declare type ActionDescriptionMap = {
+  [key in GamepadButton]?: string
+}
+export declare type GamepadEvent = CustomEvent<GamepadEventDetail>;
 export interface FooterLegendProps {
-    actionDescriptionMap?: unknown;
-    onOKActionDescription?: string;
-    onCancelActionDescription?: string;
-    onSecondaryActionDescription?: string;
-    onOptionsActionDescription?: string;
-    onMenuActionDescription?: string;
-    onButtonDown?: (evt: GamepadEvent) => void;
-    onButtonUp?: (evt: GamepadEvent) => void;
-    onOKButton?: (evt: GamepadEvent) => void;
-    onCancelButton?: (evt: GamepadEvent) => void;
-    onSecondaryButton?: (evt: GamepadEvent) => void;
-    onOptionsButton?: (evt: GamepadEvent) => void;
-    onGamepadDirection?: (evt: GamepadEvent) => void;
-    onGamepadFocus?: (evt: GamepadEvent) => void;
-    onGamepadBlur?: (evt: GamepadEvent) => void;
-    onMenuButton?: (evt: GamepadEvent) => void;
-}
+  actionDescriptionMap?: ActionDescriptionMap;
+  onOKActionDescription?: string;
+  onCancelActionDescription?: string;
+  onSecondaryActionDescription?: string;
+  onOptionsActionDescription?: string;
+  onMenuActionDescription?: string;
+  onButtonDown?: (evt: GamepadEvent) => void;
+  onButtonUp?: (evt: GamepadEvent) => void;
+  onOKButton?: (evt: GamepadEvent) => void;
+  onCancelButton?: (evt: GamepadEvent) => void;
+  onSecondaryButton?: (evt: GamepadEvent) => void;
+  onOptionsButton?: (evt: GamepadEvent) => void;
+  onGamepadDirection?: (evt: GamepadEvent) => void;
+  onGamepadFocus?: (evt: GamepadEvent) => void;
+  onGamepadBlur?: (evt: GamepadEvent) => void;
+  onMenuButton?: (evt: GamepadEvent) => void;
+}
--- a/src/deck-components/Item.tsx
+++ b/src/deck-components/Item.tsx
@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';

 export interface ItemProps {
-  label?: string;
-  description?: string;
+  label?: ReactNode;
+  description?: ReactNode;
  layout?: 'below' | 'inline';
  icon?: ReactNode;
  bottomSeparator?: 'standard' | 'thick' | 'none';
--- a/src/deck-components/Menu.tsx
+++ b/src/deck-components/Menu.tsx
@@ -1,6 +1,8 @@
 import { FC, ReactNode } from 'react';

+import { fakeRenderComponent } from '../utils';
 import { findModuleChild } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';

 export const showContextMenu: (children: ReactNode, parent?: EventTarget) => void = findModuleChild((m) => {
  if (typeof m !== 'object') return undefined;
@@ -11,7 +13,7 @@ export const showContextMenu: (children: ReactNode, parent?: EventTarget) => voi
  }
 });

-export interface MenuProps {
+export interface MenuProps extends FooterLegendProps {
  label: string;
  onCancel?(): void;
  cancelText?: string;
@@ -38,15 +40,26 @@ export const MenuGroup: FC<MenuGroupProps> = findModuleChild((m) => {
  if (typeof m !== 'object') return undefined;

  for (let prop in m) {
-    if (m[prop]?.prototype?.RenderSubMenu && m[prop]?.prototype?.ShowSubMenu) {
+    if (
+      (m[prop]?.toString()?.includes('bInGamepadUI:') &&
+        fakeRenderComponent(() => m[prop]())?.type?.prototype?.RenderSubMenu) ||
+      (m[prop]?.prototype?.RenderSubMenu && m[prop]?.prototype?.ShowSubMenu)
+    ) {
      return m[prop];
    }
  }
 });

-export interface MenuItemProps {
-  onSelected?(): void;
+export interface MenuItemProps extends FooterLegendProps {
+  bInteractableItem?: boolean;
+  onClick?(evt: Event): void;
+  onSelected?(evt: Event): void;
+  onMouseEnter?(evt: MouseEvent): void;
+  onMoveRight?(): void;
+  selected?: boolean;
  disabled?: boolean;
+  bPlayAudio?: boolean;
+  tone?: 'positive' | 'emphasis' | 'destructive';
  children?: ReactNode;
 }

@@ -54,7 +67,10 @@ export const MenuItem: FC<MenuItemProps> = findModuleChild((m) => {
  if (typeof m !== 'object') return undefined;

  for (let prop in m) {
-    if (m[prop]?.prototype?.OnOKButton && m[prop]?.prototype?.OnMouseEnter) {
+    if (
+      m[prop]?.render?.toString()?.includes('bPlayAudio:') ||
+      (m[prop]?.prototype?.OnOKButton && m[prop]?.prototype?.OnMouseEnter)
+    ) {
      return m[prop];
    }
  }
--- a/src/deck-components/Modal.tsx
+++ b/src/deck-components/Modal.tsx
@@ -1,5 +1,7 @@
 import { FC, ReactNode } from 'react';
-import { findModuleChild } from '../webpack';
+
+import { findSP } from '../utils';
+import { findModule, findModuleChild } from '../webpack';

 // All of the popout options + strTitle are related. Proper usage is not yet known...
 export interface ShowModalProps {
@@ -20,14 +22,39 @@ export interface ShowModalResult {
  Close: () => void;

  // This method will replace the modal element completely and will not update the callback chains,
-  // meaning that "closeModal" and etc. will not automatically close the modal anymore (also "fnOnClose" 
-  // will not be even called upon close anymore)! You have to manually call the "Close" method when, for example, 
-  // the "closeModal" is invoked in the newly updated modal: 
+  // meaning that "closeModal" and etc. will not automatically close the modal anymore (also "fnOnClose"
+  // will not be even called upon close anymore)! You have to manually call the "Close" method when, for example,
+  // the "closeModal" is invoked in the newly updated modal:
  //   <ModalRoot closeModal={() => { console.log("ABOUT TO CLOSE"); showModalRes.Close(); }} />
  Update: (modal: ReactNode) => void;
 }

-export const showModal: (modal: ReactNode, parent?: EventTarget, props?: ShowModalProps) => Promise<ShowModalResult> = findModuleChild((m) => {
+const showModalRaw:
+  | ((
+      modal: ReactNode,
+      parent?: EventTarget,
+      title?: string,
+      props?: ShowModalProps,
+      unknown1?: unknown,
+      hideActions?: { bHideActions?: boolean },
+      modalManager?: unknown,
+    ) => Promise<ShowModalResult>)
+  | void = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (
+      typeof m[prop] === 'function' &&
+      m[prop].toString().includes('props.bDisableBackgroundDismiss') &&
+      !m[prop]?.prototype?.Cancel
+    ) {
+      return m[prop];
+    }
+  }
+});
+
+const oldShowModalRaw:
+  | ((modal: ReactNode, parent?: EventTarget, props?: ShowModalProps) => Promise<ShowModalResult>)
+  | void = findModuleChild((m) => {
  if (typeof m !== 'object') return undefined;
  for (let prop in m) {
    if (typeof m[prop] === 'function' && m[prop].toString().includes('bHideMainWindowForPopouts:!0')) {
@@ -36,6 +63,25 @@ export const showModal: (modal: ReactNode, parent?: EventTarget, props?: ShowMod
  }
 });

+export const showModal = (
+  modal: ReactNode,
+  parent?: EventTarget,
+  props: ShowModalProps = {
+    strTitle: 'Decky Dialog',
+    bHideMainWindowForPopouts: false,
+  },
+): Promise<ShowModalResult> => {
+  if (showModalRaw) {
+    return showModalRaw(modal, parent || findSP(), props.strTitle, props, undefined, {
+      bHideActions: props.bHideActionIcons,
+    });
+  } else if (oldShowModalRaw) {
+    return oldShowModalRaw(modal, parent || findSP(), props);
+  } else {
+    throw new Error('[DFL:Modals]: Cannot find showModal function');
+  }
+};
+
 export interface ModalRootProps {
  children?: ReactNode;
  onCancel?(): void;
@@ -72,11 +118,26 @@ export const ConfirmModal = findModuleChild((m) => {
  }
 }) as FC<ConfirmModalProps>;

-export const ModalRoot = findModuleChild((m) => {
-  if (typeof m !== 'object') return undefined;
-  for (let prop in m) {
-    if (m[prop]?.prototype?.OK && m[prop]?.prototype?.Cancel && m[prop]?.prototype?.render) {
-      return m[prop];
+// new
+export const ModalRoot = (Object.values(
+  findModule((m: any) => {
+    if (typeof m !== 'object') return false;
+
+    for (let prop in m) {
+      if (m[prop]?.toString()?.includes('"ModalManager","DialogWrapper"')) {
+        return true;
+      }
    }
-  }
-}) as FC<ModalRootProps>;
+
+    return false;
+  }) || {},
+)?.find((x: any) => x?.type?.toString()?.includes('((function(){')) ||
+  // old
+  findModuleChild((m) => {
+    if (typeof m !== 'object') return undefined;
+    for (let prop in m) {
+      if (m[prop]?.prototype?.OK && m[prop]?.prototype?.Cancel && m[prop]?.prototype?.render) {
+        return m[prop];
+      }
+    }
+  })) as FC<ModalRootProps>;
--- a/src/deck-components/ProgressBar.tsx
+++ b/src/deck-components/ProgressBar.tsx
@@ -1,4 +1,4 @@
-import { VFC, ReactNode } from 'react';
+import { ReactNode, VFC } from 'react';

 import { findModuleChild } from '../webpack';
 import { ItemProps } from './Item';
--- a/src/deck-components/Router.tsx
+++ b/src/deck-components/Router.tsx
@@ -57,11 +57,11 @@ export enum DisplayStatus {
 }

 export type AppOverview = {
-  appid: string
-  display_name: string
-  display_status: DisplayStatus
-  sort_as: string
-}
+  appid: string;
+  display_name: string;
+  display_status: DisplayStatus;
+  sort_as: string;
+};

 export interface Router {
  CloseSideMenus(): void;
@@ -69,19 +69,19 @@ export interface Router {
  GetQuickAccessTab(): QuickAccessTab;
  Navigate(path: string): void;
  NavigateBackOrOpenMenu(): void;
-  NavigateToAppProperties(): void
-  NavigateToBugForum(): void
+  NavigateToAppProperties(): void;
+  NavigateToBugForum(): void;
  NavigateToExternalWeb(url: string): void;
-  NavigateToHelp(): void
-  NavigateToInvites(): void
+  NavigateToHelp(): void;
+  NavigateToInvites(): void;
  NavigateToRunningApp(replace?: boolean): void;
-  NavigateToStorage(): void
-  NavigateToStore(): void
-  NavigateToStoreApp(appId: number | string): void
-  NavigateToStoreFreeToPlay(): void
-  NavigateToStoreManual(): void
-  NavigateToStoreNewReleases(): void
-  NavigateToStoreOnSale(): void
+  NavigateToStorage(): void;
+  NavigateToStore(): void;
+  NavigateToStoreApp(appId: number | string): void;
+  NavigateToStoreFreeToPlay(): void;
+  NavigateToStoreManual(): void;
+  NavigateToStoreNewReleases(): void;
+  NavigateToStoreOnSale(): void;
  ToggleSideMenu(sideMenu: SideMenu): void;
  CloseSideMenus(): void;
  OpenSideMenu(sideMenu: SideMenu): void;
--- a/src/deck-components/SidebarNavigation.tsx
+++ b/src/deck-components/SidebarNavigation.tsx
@@ -2,7 +2,7 @@ import { ReactNode, VFC } from 'react';

 import { Module, findModuleChild } from '../webpack';

-export interface SidebarNavigationPages {
+export interface SidebarNavigationPage {
  title: string;
  content: ReactNode;
  icon?: ReactNode;
@@ -11,12 +11,12 @@ export interface SidebarNavigationPages {
  identifier?: string;
  route?: string;
  link?: string;
-  padding?: "none" | "compact";
+  padding?: 'none' | 'compact';
 }

 export interface SidebarNavigationProps {
  title?: string;
-  pages: SidebarNavigationPages[];
+  pages: SidebarNavigationPage[];
  showTitle?: boolean;
  disableRouteReporting?: boolean;
  page?: string;
--- a/src/deck-components/Spinner.tsx
+++ b/src/deck-components/Spinner.tsx
@@ -3,6 +3,6 @@ import { FC, SVGAttributes } from 'react';
 import { IconsModule } from '../webpack';

 // TODO type this and other icons?
-export const Spinner = Object.values(IconsModule).find((mod: any) =>
-    mod?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString())
-) as FC<SVGAttributes<SVGElement>>;
+export const Spinner = Object.values(IconsModule).find(
+  (mod: any) => mod?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString()),
+) as FC<SVGAttributes<SVGElement>>;
--- a/src/deck-components/SteamClient.ts
+++ b/src/deck-components/SteamClient.ts
@@ -0,0 +1,300 @@
+export interface Apps {
+  RegisterForAppOverviewChanges: any;
+  RegisterForAppDetails: any;
+  RegisterForLocalizationChanges: any;
+  RegisterForWorkshopChanges: any;
+  RegisterForWorkshopItemDownloads: any;
+  GetLibraryBootstrapData: any;
+  RegisterForAchievementChanges: any;
+  GetFriendAchievementsForApp: any;
+  GetMyAchievementsForApp: any;
+  AddUserTagToApps: any;
+  RemoveUserTagFromApps: any;
+  ClearUserTagsOnApps: any;
+  ClearAndSetUserTagsOnApp: any;
+  SetAppHidden: any;
+  ResetHiddenState: any;
+  SetAppLaunchOptions: any;
+  SetAppResolutionOverride: any;
+  SetAppCurrentLanguage: any;
+  SetAppAutoUpdateBehavior: any;
+  SetAppBackgroundDownloadsBehavior: any;
+  ToggleAppFamilyBlockedState: any;
+  ToggleAppSteamCloudEnabled: any;
+  ToggleAppSteamCloudSyncOnSuspendEnabled: any;
+  ToggleOverrideResolutionForInternalDisplay: any;
+  ToggleEnableSteamOverlayForApp: any;
+  ToggleEnableDesktopTheatreForApp: any;
+  BrowseLocalFilesForApp: any;
+  BrowseScreenshotsForApp: any;
+  BrowseScreenshotForApp: any;
+  BackupFilesForApp: any;
+  VerifyFilesForApp: any;
+  CreateDesktopShortcutForApp: any;
+  JoinAppContentBeta: any;
+  JoinAppContentBetaByPassword: any;
+  GetAchievementsInTimeRange: any;
+  GetSubscribedWorkshopItems: any;
+  SubscribeWorkshopItem: any;
+  GetDownloadedWorkshopItems: any;
+  DownloadWorkshopItem: any;
+  SetLocalScreenshotCaption: any;
+  SetLocalScreenshotSpoiler: any;
+  GetDetailsForScreenshotUpload: any;
+  UploadLocalScreenshot: any;
+  DeleteLocalScreenshot: any;
+  GetScreenshotsInTimeRange: any;
+  GetFriendsWhoPlay: any;
+  RequestLegacyCDKeysForApp: any;
+  GetSoundtrackDetails: any;
+  GetStoreTagLocalization: any;
+  GetLaunchOptionsForApp: any;
+  GetResolutionOverrideForApp: any;
+  ScanForShortcuts: any;
+  GetAllShortcuts: any;
+  GetShortcutData: any;
+  AddShortcut: any;
+  RemoveShortcut: any;
+  InstallFlatpakAppAndCreateShortcut: any;
+  ListFlatpakApps: any;
+  UninstallFlatpakApp: any;
+  ShowControllerConfigurator: any;
+  SetThirdPartyControllerConfiguration: any;
+  ToggleAllowDesktopConfiguration: any;
+  SetControllerRumblePreference: any;
+  GetCachedAppDetails: any;
+  SetCachedAppDetails: any;
+  ReportLibraryAssetCacheMiss: any;
+  SaveAchievementProgressCache: any;
+  SetStreamingClientForApp: any;
+  SetCustomArtworkForApp: any;
+  ClearCustomArtworkForApp: any;
+  SetCustomLogoPositionForApp: any;
+  ClearCustomLogoPositionForApp: any;
+  RequestIconDataForApp: any;
+  SpecifyCompatTool: any;
+  GetAvailableCompatTools: any;
+  SetShortcutName: any;
+  SetShortcutExe: any;
+  SetShortcutStartDir: any;
+  SetShortcutLaunchOptions: any;
+  SetShortcutIsVR: any;
+  PromptToChangeShortcut: any;
+  PromptToSelectShortcutIcon: any;
+  InstallApp: any;
+  RunGame: any;
+  VerifyApp: any;
+  StreamGame: any;
+  CancelLaunch: any;
+  TerminateApp: any;
+  UninstallApps: any;
+  ShowStore: any;
+  SetDLCEnabled: any;
+  ContinueGameAction: any;
+  CancelGameAction: any;
+  GetActiveGameActions: any;
+  GetGameActionDetails: any;
+  GetGameActionForApp: any;
+  SkipShaderProcessing: any;
+  MarkEulaAccepted: any;
+  MarkEulaRejected: any;
+  LoadEula: any;
+  GetConflictingFileTimestamps: any;
+  GetCloudPendingRemoteOperations: any;
+  ClearProton: any;
+  RegisterForMarketingMessages: any;
+  FetchMarketingMessages: any;
+  MarkMarketingMessageSeen: any;
+  ReportMarketingMessageSeen: any;
+  RegisterForGameActionStart: any;
+  RegisterForGameActionEnd: any;
+  RegisterForGameActionTaskChange: any;
+  RegisterForGameActionUserRequest: any;
+  RegisterForGameActionShowError: any;
+  RegisterForGameActionShowUI: any;
+  OpenAppSettingsDialog: any;
+}
+
+export interface Window {
+  RegisterForExternalDisplayChanged: any;
+  SetManualDisplayScaleFactor: any;
+  SetAutoDisplayScale: any;
+  Minimize: any;
+  ProcessShuttingDown: any;
+  ToggleMaximize: any;
+  MoveTo: any;
+  ResizeTo: any;
+  SetMinSize: any;
+  SetResizeGrip: any;
+  SetComposition: any;
+  GamescopeBlur: any;
+  BringToFront: any;
+  SetForegroundWindow: any;
+  SetKeyFocus: any;
+  FlashWindow: any;
+  StopFlashWindow: any;
+  ShowWindow: any;
+  HideWindow: any;
+  SetWindowIcon: any;
+  GetWindowDimensions: any;
+  GetWindowRestoreDetails: any;
+  PositionWindowRelative: any;
+  GetMousePositionDetails: any;
+  IsWindowMinimized: any;
+  GetBrowserID: any;
+}
+
+export interface SteamClient {
+  Apps: Apps;
+  Browser: any;
+  BrowserView: any;
+  ClientNotifications: any;
+  Cloud: any;
+  Console: any;
+  Downloads: any;
+  FamilySharing: any;
+  FriendSettings: any;
+  Friends: any;
+  GameSessions: any;
+  Input: any;
+  InstallFolder: any;
+  Installs: any;
+  MachineStorage: any;
+  Messaging: any;
+  Notifications: any;
+  OpenVR: any;
+  Overlay: any;
+  Parental: any;
+  RegisterIFrameNavigatedCallback: any;
+  RemotePlay: any;
+  RoamingStorage: any;
+  Screenshots: any;
+  Settings: any;
+  SharedConnection: any;
+  Stats: any;
+  Storage: any;
+  Streaming: any;
+  System: any;
+  UI: any;
+  URL: any;
+  Updates: any;
+  User: any;
+  WebChat: any;
+  Window: Window;
+}
+
+export interface SteamShortcut {
+  appid: number;
+  data: {
+    bIsApplication: boolean;
+    strAppName: string;
+    strExePath: string;
+    strArguments: string;
+    strShortcutPath: string;
+    strSortAs: string;
+  };
+}
+
+/**
+ * @prop unAppID is not properly set by Steam for non-steam game shortcuts, so it defaults to 0 for them
+ */
+export interface LifetimeNotification {
+  unAppID: number;
+  nInstanceID: number;
+  bRunning: boolean;
+}
+
+export type AppAchievements = {
+  nAchieved: number;
+  nTotal: number;
+  vecAchievedHidden: any[];
+  vecHighlight: any[];
+  vecUnachieved: any[];
+};
+
+export type AppLanguages = {
+  strDisplayName: string;
+  strShortName: string;
+};
+
+export interface AppDetails {
+  achievements: AppAchievements;
+  bCanMoveInstallFolder: boolean;
+  bCloudAvailable: boolean;
+  bCloudEnabledForAccount: boolean;
+  bCloudEnabledForApp: boolean;
+  bCloudSyncOnSuspendAvailable: boolean;
+  bCloudSyncOnSuspendEnabled: boolean;
+  bCommunityMarketPresence: boolean;
+  bEnableAllowDesktopConfiguration: boolean;
+  bFreeRemovableLicense: boolean;
+  bHasAllLegacyCDKeys: boolean;
+  bHasAnyLocalContent: boolean;
+  bHasLockedPrivateBetas: boolean;
+  bIsExcludedFromSharing: boolean;
+  bIsSubscribedTo: boolean;
+  bOverlayEnabled: boolean;
+  bOverrideInternalResolution: boolean;
+  bRequiresLegacyCDKey: boolean;
+  bShortcutIsVR: boolean;
+  bShowCDKeyInMenus: boolean;
+  bShowControllerConfig: boolean;
+  bSupportsCDKeyCopyToClipboard: boolean;
+  bVRGameTheatreEnabled: boolean;
+  bWorkshopVisible: boolean;
+  eAppOwnershipFlags: number;
+  eAutoUpdateValue: number;
+  eBackgroundDownloads: number;
+  eCloudSync: number;
+  eControllerRumblePreference: number;
+  eDisplayStatus: number;
+  eEnableThirdPartyControllerConfiguration: number;
+  eSteamInputControllerMask: number;
+  iInstallFolder: number;
+  lDiskUsageBytes: number;
+  lDlcUsageBytes: number;
+  nBuildID: number;
+  nCompatToolPriority: number;
+  nPlaytimeForever: number;
+  nScreenshots: number;
+  rtLastTimePlayed: number;
+  rtLastUpdated: number;
+  rtPurchased: number;
+  selectedLanguage: {
+    strDisplayName: string;
+    strShortName: string;
+  };
+  strCloudBytesAvailable: string;
+  strCloudBytesUsed: string;
+  strCompatToolDisplayName: string;
+  strCompatToolName: string;
+  strDeveloperName: string;
+  strDeveloperURL: string;
+  strDisplayName: string;
+  strExternalSubscriptionURL: string;
+  strFlatpakAppID: string;
+  strHomepageURL: string;
+  strLaunchOptions: string;
+  strManualURL: string;
+  strOwnerSteamID: string;
+  strResolutionOverride: string;
+  strSelectedBeta: string;
+  strShortcutExe: string;
+  strShortcutLaunchOptions: string;
+  strShortcutStartDir: string;
+  strSteamDeckBlogURL: string;
+  unAppID: number;
+  vecBetas: any[];
+  vecDLC: any[];
+  vecDeckCompatTestResults: any[];
+  vecLanguages: AppLanguages[];
+  vecLegacyCDKeys: any[];
+  vecMusicAlbums: any[];
+  vecPlatforms: string[];
+  vecScreenShots: any[];
+}
+
+export interface SteamAppOverview {
+  display_name: string;
+  gameid: string;
+}
--- a/src/deck-components/SteamSpinner.tsx
+++ b/src/deck-components/SteamSpinner.tsx
@@ -1,9 +1,11 @@
 import { FC, SVGAttributes } from 'react';
+
 import { findModuleChild } from '../webpack';

 export const SteamSpinner = findModuleChild((m) => {
-    if (typeof m !== "object") return undefined;
-    for (let prop in m) {
-      if (m[prop]?.toString()?.includes("Steam Spinner") && m[prop].toString().includes("PreloadThrobber")) return m[prop]
-    }
-}) as FC<SVGAttributes<SVGElement>>;
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (m[prop]?.toString()?.includes('Steam Spinner') && m[prop].toString().includes('PreloadThrobber'))
+      return m[prop];
+  }
+}) as FC<SVGAttributes<SVGElement>>;
--- a/src/deck-components/Tabs.tsx
+++ b/src/deck-components/Tabs.tsx
@@ -1,47 +1,134 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, createElement, useEffect, useState } from 'react';
+
+import { fakeRenderComponent, findInReactTree, sleep } from '../utils';
 import { findModule } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
+import { SteamSpinner } from './SteamSpinner';

 /**
 * Individual tab objects for the Tabs component
- * 
- * @property id ID of this tab, can be used with activeTab to auto-focus a given tab
- * @property title Title shown in the header bar
- * @property renderTabAddon Return a {@link ReactNode} to render it next to the tab title, i.e. the counts for each tab on the Media page
- * @property content Content of the tab
- * @property footer Sets up button handlers and labels
+ *
+ * `id` ID of this tab, can be used with activeTab to auto-focus a given tab
+ * `title` Title shown in the header bar
+ * `renderTabAddon` Return a {@link ReactNode} to render it next to the tab title, i.e. the counts for each tab on the Media page
+ * `content` Content of the tab
+ * `footer` Sets up button handlers and labels
 */
 export interface Tab {
-    id: string;
-    title: string;
-    renderTabAddon?: () => ReactNode;
-    content: ReactNode;
-    footer?: FooterLegendProps;
+  id: string;
+  title: string;
+  renderTabAddon?: () => ReactNode;
+  content: ReactNode;
+  footer?: FooterLegendProps;
 }

 /**
 * Props for the {@link Tabs}
- * 
- * @property tabs array of {@link Tab}
- * @property activeTab tab to automatically focus, {@link Tab.id}
- * @property onShowTab Currently unknown, but required.
- * @property autoFocusContents Whether to automatically focus the tab contents or not.
- * @property footer Sets up button handlers and labels
+ *
+ * `tabs` array of {@link Tab}
+ * `activeTab` tab currently active, needs to be one of the tabs {@link Tab.id}, must be set using a `useState` in the `onShowTab` handler
+ * `onShowTab` Called when the active tab should change, needs to set `activeTab`. See example.
+ * `autoFocusContents` Whether to automatically focus the tab contents or not.
+ * `footer` Sets up button handlers and labels
+ *
+ * @example
+ * const Component: FC = () => {
+ * const [currentTab, setCurrentTab] = useState<string>("Tab1");
+ *
+ * return (
+ *   <Tabs
+ *     title="Theme Manager"
+ *     activeTab={currentTabRoute}
+ *     onShowTab={(tabID: string) => {
+ *        setCurrentTabRoute(tabID);
+ *     }}
+ *     tabs={[
+ *       {
+ *         title: "Tab 1",
+ *         content: <Tab1Component />,
+ *         id: "Tab1",
+ *       },
+ *       {
+ *         title: "Tab 2",
+ *         content: <Tab2Component />,
+ *         id: "Tab2",
+ *       },
+ *     ]}
+ *   />
+ *  );
+ * };
 */
 export interface TabsProps {
-    tabs: Tab[];
-    activeTab?: string;
-    onShowTab: (...args: unknown[]) => void;
-    autoFocusContents?: boolean;
+  tabs: Tab[];
+  activeTab: string;
+  onShowTab: (tab: string) => void;
+  autoFocusContents?: boolean;
+}
+
+let tabsComponent: any;
+
+const getTabs = async () => {
+  if (tabsComponent) return tabsComponent;
+  // @ts-ignore
+  while (!window?.DeckyPluginLoader?.routerHook?.routes) {
+    console.debug('[DFL:Tabs]: Waiting for Decky router...');
+    await sleep(500);
+  }
+  return (tabsComponent = fakeRenderComponent(
+    () => {
+      return findInReactTree(
+        findInReactTree(
+          // @ts-ignore
+          window.DeckyPluginLoader.routerHook.routes
+            .find((x: any) => x.props.path == '/library/app/:appid/achievements')
+            .props.children.type(),
+          (x) => x?.props?.scrollTabsTop,
+        ).type({ appid: 1 }),
+        (x) => x?.props?.tabs,
+      ).type;
+    },
+    {
+      useRef: () => ({ current: { reaction: { track: () => {} } } }),
+      useContext: () => ({ match: { params: { appid: 1 } } }),
+      useMemo: () => ({ data: {} }),
+    },
+  ));
+};
+
+let oldTabs: any;
+
+try {
+  const oldTabsModule = findModule((m: any) => {
+    if (typeof m !== 'object') return false;
+    for (let prop in m) {
+      if (m[prop]?.Unbleed) return true;
+    }
+    return false;
+  });
+  if (oldTabsModule)
+    oldTabs = Object.values(oldTabsModule).find((x: any) => x?.type?.toString()?.includes('((function(){'));
+} catch (e) {
+  console.error('Error finding oldTabs:', e);
 }

 /**
 * Tabs component as used in the library and media tabs. See {@link TabsProps}
+ * Unlike other components in `decky-frontend-lib`, this requires Decky Loader to be running.
 */
-export const Tabs = Object.values(findModule((m) => {
-    if (typeof m !== 'object') return false;
-    for (let prop in m) {
-        if (m[prop]?.Unbleed) return true;
-    }
-    return false;
-})).find((x: any) => x?.type?.toString()?.includes("((function(){")) as FC<TabsProps>;
+export const Tabs =
+  oldTabs ||
+  (((props: TabsProps) => {
+    const found = tabsComponent;
+    const [tc, setTC] = useState<FC<TabsProps>>(found);
+    useEffect(() => {
+      if (found) return;
+      (async () => {
+        console.debug('[DFL:Tabs]: Finding component...');
+        const t = await getTabs();
+        console.debug('[DFL:Tabs]: Found!');
+        setTC(t);
+      })();
+    }, []);
+    console.log('tc', tc);
+    return tc ? createElement(tc, props) : <SteamSpinner />;
+  }) as FC<TabsProps>);
--- a/src/deck-components/index.ts
+++ b/src/deck-components/index.ts
@@ -21,3 +21,10 @@ export * from './Tabs';
 export * from './TextField';
 export * from './Toggle';
 export * from './ToggleField';
+export * from './SteamClient';
+
+import {SteamClient} from './SteamClient'
+
+declare global {
+    var SteamClient: SteamClient;
+}
--- a/src/deck-components/static-classes.ts
+++ b/src/deck-components/static-classes.ts
@@ -63,13 +63,7 @@ type QuickAccessMenuClasses = Record<
  string
 >;

-type ScrollPanelClasses = Record<
-  | 'ScrollBoth'
-  | 'ScrollPanel'
-  | 'ScrollX'
-  | 'ScrollY',
-  string
->;
+type ScrollPanelClasses = Record<'ScrollBoth' | 'ScrollPanel' | 'ScrollX' | 'ScrollY', string>;

 type GamepadDialogClasses = Record<
  | 'duration-app-launch'
@@ -166,207 +160,319 @@ type QuickAccessControlsClasses = Record<
 >;

 type UpdaterFieldClasses = Record<
-  | "duration-app-launch"
-  | "OOBEUpdateStatusContainer"
-  | "UpdateScreen"
-  | "UpdatePanel"
-  | "CurrentStatus"
-  | "TotalUpdateSize"
-  | "ProgressInfoContainer"
-  | "TimeRemaining"
-  | "BatteryLowWarning"
-  | "fadeInAnimation"
-  | "ProgressStatus"
-  | "UpdateStatusContainer"
-  | "UpdaterFieldStatusSuccess"
-  | "UpdaterFieldStatusApplying"
-  | "TextContainer"
-  | "ApplyingText"
-  | "UpdateBytesRemaining"
-  | "Label"
-  | "Numerator"
-  | "Separator"
-  | "Denominator"
-  | "PatchNotes"
-  | "PostedTime"
-  | "EventDetailTitle"
-  | "EventDetailsSubTitle"
-  | "EventDetailsBody"
-  | "InsufficientBatteryText"
-  | "UnsupportedHardwareWarning"
-  | "Title"
-  | "Text"
-  | "Body"
-  | "ItemFocusAnim-darkerGrey-nocolor"
-  | "ItemFocusAnim-darkerGrey"
-  | "ItemFocusAnim-darkGrey"
-  | "ItemFocusAnim-grey"
-  | "ItemFocusAnimBorder-darkGrey"
-  | "ItemFocusAnim-green"
-  | "focusAnimation"
-  | "hoverAnimation",
+  | 'duration-app-launch'
+  | 'OOBEUpdateStatusContainer'
+  | 'UpdateScreen'
+  | 'UpdatePanel'
+  | 'CurrentStatus'
+  | 'TotalUpdateSize'
+  | 'ProgressInfoContainer'
+  | 'TimeRemaining'
+  | 'BatteryLowWarning'
+  | 'fadeInAnimation'
+  | 'ProgressStatus'
+  | 'UpdateStatusContainer'
+  | 'UpdaterFieldStatusSuccess'
+  | 'UpdaterFieldStatusApplying'
+  | 'TextContainer'
+  | 'ApplyingText'
+  | 'UpdateBytesRemaining'
+  | 'Label'
+  | 'Numerator'
+  | 'Separator'
+  | 'Denominator'
+  | 'PatchNotes'
+  | 'PostedTime'
+  | 'EventDetailTitle'
+  | 'EventDetailsSubTitle'
+  | 'EventDetailsBody'
+  | 'InsufficientBatteryText'
+  | 'UnsupportedHardwareWarning'
+  | 'Title'
+  | 'Text'
+  | 'Body'
+  | 'ItemFocusAnim-darkerGrey-nocolor'
+  | 'ItemFocusAnim-darkerGrey'
+  | 'ItemFocusAnim-darkGrey'
+  | 'ItemFocusAnim-grey'
+  | 'ItemFocusAnimBorder-darkGrey'
+  | 'ItemFocusAnim-green'
+  | 'focusAnimation'
+  | 'hoverAnimation',
  string
 >;

 type PlaySectionClasses = Record<
-  | "AchievementCountLabel"
-  | "AchievementProgressRow"
-  | "ActionSection"
-  | "AppButtonsContainer"
-  | "Arrow"
-  | "AvatarAndPersona"
-  | "BreakNarrow"
-  | "BreakShort"
-  | "BreakTall"
-  | "BreakUltraWide"
-  | "BreakWide"
-  | "ClickablePlayBarItem"
-  | "CloudStatusIcon"
-  | "CloudStatusLabel"
-  | "CloudStatusRow"
-  | "CloudSyncProblem"
-  | "CloudSynching"
-  | "ComingSoon"
-  | "Container"
-  | "DetailsProgressBar"
-  | "DetailsProgressContainer"
-  | "DetailsSection"
-  | "DetailsSectionExtra"
-  | "DetailsSectionStatus"
-  | "DotDotDot"
-  | "DownloadPaused"
-  | "DownloadProgressBar"
-  | "Downloading"
-  | "FavoriteButton"
-  | "Favorited"
-  | "GameInfoButton"
-  | "GameStat"
-  | "GameStatIcon"
-  | "GameStatIconForced"
-  | "GameStatRight"
-  | "GameStatsSection"
-  | "GamepadUIBreakNarrow"
-  | "GamepadUIBreakShort"
-  | "GamepadUIBreakWide"
-  | "Glassy"
-  | "HideWhenNarrow"
-  | "Icon"
-  | "Icons"
-  | "InPage"
-  | "InnerContainer"
-  | "InvalidPlatform"
-  | "ItemFocusAnim-darkGrey"
-  | "ItemFocusAnim-darkerGrey"
-  | "ItemFocusAnim-darkerGrey-nocolor"
-  | "ItemFocusAnim-green"
-  | "ItemFocusAnim-grey"
-  | "ItemFocusAnimBorder-darkGrey"
-  | "Label"
-  | "LastPlayed"
-  | "LastPlayedInfo"
-  | "MenuActive"
-  | "MenuButton"
-  | "MiniAchievements"
-  | "OfflineMode"
-  | "OnlyDownloadBar"
-  | "PermanentlyUnavailable"
-  | "PlayBar"
-  | "PlayBarCloudStatusContainer"
-  | "PlayBarDetailLabel"
-  | "PlayBarGameIcon"
-  | "PlayBarGameName"
-  | "PlayBarIconAndGame"
-  | "PlayBarLabel"
-  | "Playtime"
-  | "PlaytimeIcon"
-  | "PlaytimeIconForced"
-  | "PortraitBar"
-  | "Presale"
-  | "RecentlyUpdated"
-  | "RecentlyUpdatedIcon"
-  | "RecentlyUpdatedLink"
-  | "RecentlyUpdatedText"
-  | "RightBreakNarrow"
-  | "RightBreakUltraNarrow"
-  | "RightBreakUltraWide"
-  | "RightBreakWide"
-  | "RightControls"
-  | "Row"
-  | "SharedLibrary"
-  | "StatusAndStats"
-  | "StatusNameContainer"
-  | "StickyHeader"
-  | "StickyHeaderShadow"
-  | "SuperimposedGridItems"
-  | "SyncAnim"
-  | "Visible"
-  | "duration-app-launch"
-  | "favorited"
-  | "focusAnimation"
-  | "hoverAnimation",
+  | 'AchievementCountLabel'
+  | 'AchievementProgressRow'
+  | 'ActionSection'
+  | 'AppButtonsContainer'
+  | 'Arrow'
+  | 'AvatarAndPersona'
+  | 'BreakNarrow'
+  | 'BreakShort'
+  | 'BreakTall'
+  | 'BreakUltraWide'
+  | 'BreakWide'
+  | 'ClickablePlayBarItem'
+  | 'CloudStatusIcon'
+  | 'CloudStatusLabel'
+  | 'CloudStatusRow'
+  | 'CloudSyncProblem'
+  | 'CloudSynching'
+  | 'ComingSoon'
+  | 'Container'
+  | 'DetailsProgressBar'
+  | 'DetailsProgressContainer'
+  | 'DetailsSection'
+  | 'DetailsSectionExtra'
+  | 'DetailsSectionStatus'
+  | 'DotDotDot'
+  | 'DownloadPaused'
+  | 'DownloadProgressBar'
+  | 'Downloading'
+  | 'FavoriteButton'
+  | 'Favorited'
+  | 'GameInfoButton'
+  | 'GameStat'
+  | 'GameStatIcon'
+  | 'GameStatIconForced'
+  | 'GameStatRight'
+  | 'GameStatsSection'
+  | 'GamepadUIBreakNarrow'
+  | 'GamepadUIBreakShort'
+  | 'GamepadUIBreakWide'
+  | 'Glassy'
+  | 'HideWhenNarrow'
+  | 'Icon'
+  | 'Icons'
+  | 'InPage'
+  | 'InnerContainer'
+  | 'InvalidPlatform'
+  | 'ItemFocusAnim-darkGrey'
+  | 'ItemFocusAnim-darkerGrey'
+  | 'ItemFocusAnim-darkerGrey-nocolor'
+  | 'ItemFocusAnim-green'
+  | 'ItemFocusAnim-grey'
+  | 'ItemFocusAnimBorder-darkGrey'
+  | 'Label'
+  | 'LastPlayed'
+  | 'LastPlayedInfo'
+  | 'MenuActive'
+  | 'MenuButton'
+  | 'MiniAchievements'
+  | 'OfflineMode'
+  | 'OnlyDownloadBar'
+  | 'PermanentlyUnavailable'
+  | 'PlayBar'
+  | 'PlayBarCloudStatusContainer'
+  | 'PlayBarDetailLabel'
+  | 'PlayBarGameIcon'
+  | 'PlayBarGameName'
+  | 'PlayBarIconAndGame'
+  | 'PlayBarLabel'
+  | 'Playtime'
+  | 'PlaytimeIcon'
+  | 'PlaytimeIconForced'
+  | 'PortraitBar'
+  | 'Presale'
+  | 'RecentlyUpdated'
+  | 'RecentlyUpdatedIcon'
+  | 'RecentlyUpdatedLink'
+  | 'RecentlyUpdatedText'
+  | 'RightBreakNarrow'
+  | 'RightBreakUltraNarrow'
+  | 'RightBreakUltraWide'
+  | 'RightBreakWide'
+  | 'RightControls'
+  | 'Row'
+  | 'SharedLibrary'
+  | 'StatusAndStats'
+  | 'StatusNameContainer'
+  | 'StickyHeader'
+  | 'StickyHeaderShadow'
+  | 'SuperimposedGridItems'
+  | 'SyncAnim'
+  | 'Visible'
+  | 'duration-app-launch'
+  | 'favorited'
+  | 'focusAnimation'
+  | 'hoverAnimation',
  string
 >;

 type GamepadSliderClasses = Record<
-  | "error-shake-duration"
-  | "SliderControlPanelGroup"
-  | "SliderControlAndNotches"
-  | "WithDefaultValue"
-  | "SliderControl"
-  | "Disabled"
-  | "SliderTrack"
-  | "SliderHasNotches"
-  | "SliderTrackDark"
-  | "SliderHandleContainer"
-  | "VerticalLineSliderHandleContainer"
-  | "ParenSliderHandleContainer"
-  | "SliderHandle"
-  | "SliderHandleFocusPop"
-  | "VerticalLineSliderHandle"
-  | "ParenSliderHandle"
-  | "Left"
-  | "SliderControlWithIcon"
-  | "Icon"
-  | "SliderNotchContainer"
-  | "SliderNotch"
-  | "AlignToEnds"
-  | "SliderNotchLabel"
-  | "AlignToLeft"
-  | "AlignToRight"
-  | "SliderNotchTick"
-  | "TickActive"
-  | "LabelText"
-  | "DescriptionValue"
-  | "EditableValue"
-  | "FakeEditableValue"
-  | "RedBorder"
-  | "EditableValueSuffix"
-  | "ErrorShake"
-  | "error-shake"
-  | "CompoundSlider"
-  | "CompoundSliderSubSlider"
-  | "Right"
-  | "CompoundSliderSubSliderLabelContainer"
-  | "CompoundSliderSubSliderLabelPositioner"
-  | "CompoundSliderSubSliderLabel"
-  | "CompoundSliderSubSliderLabelInternal"
-  | "DefaultValueTickContainer"
-  | "DefaultValueTick",
+  | 'error-shake-duration'
+  | 'SliderControlPanelGroup'
+  | 'SliderControlAndNotches'
+  | 'WithDefaultValue'
+  | 'SliderControl'
+  | 'Disabled'
+  | 'SliderTrack'
+  | 'SliderHasNotches'
+  | 'SliderTrackDark'
+  | 'SliderHandleContainer'
+  | 'VerticalLineSliderHandleContainer'
+  | 'ParenSliderHandleContainer'
+  | 'SliderHandle'
+  | 'SliderHandleFocusPop'
+  | 'VerticalLineSliderHandle'
+  | 'ParenSliderHandle'
+  | 'Left'
+  | 'SliderControlWithIcon'
+  | 'Icon'
+  | 'SliderNotchContainer'
+  | 'SliderNotch'
+  | 'AlignToEnds'
+  | 'SliderNotchLabel'
+  | 'AlignToLeft'
+  | 'AlignToRight'
+  | 'SliderNotchTick'
+  | 'TickActive'
+  | 'LabelText'
+  | 'DescriptionValue'
+  | 'EditableValue'
+  | 'FakeEditableValue'
+  | 'RedBorder'
+  | 'EditableValueSuffix'
+  | 'ErrorShake'
+  | 'error-shake'
+  | 'CompoundSlider'
+  | 'CompoundSliderSubSlider'
+  | 'Right'
+  | 'CompoundSliderSubSliderLabelContainer'
+  | 'CompoundSliderSubSliderLabelPositioner'
+  | 'CompoundSliderSubSliderLabel'
+  | 'CompoundSliderSubSliderLabelInternal'
+  | 'DefaultValueTickContainer'
+  | 'DefaultValueTick',
  string
 >;

-export const quickAccessMenuClasses: QuickAccessMenuClasses = findModule((mod) => typeof mod === 'object' && mod?.Title?.includes('quickaccessmenu'));
+type AppDetailsHeaderClasses = Record<
+  | 'AddBoxSizer'
+  | 'Background'
+  | 'Bottom'
+  | 'BottomCenter'
+  | 'BottomLeft'
+  | 'BottomRight'
+  | 'BoxSizer'
+  | 'BoxSizerButtonContainer'
+  | 'BoxSizerContainer'
+  | 'BoxSizerDelete'
+  | 'BoxSizerDragBox'
+  | 'BoxSizerEdge'
+  | 'BoxSizerGridBox'
+  | 'BoxSizerInfo'
+  | 'BoxSizerSettings'
+  | 'BoxSizerValidRegion'
+  | 'CenterCenter'
+  | 'DialogButton'
+  | 'EdgeDown'
+  | 'FallbackArt'
+  | 'Features'
+  | 'FullscreenEnterActive'
+  | 'FullscreenEnterDone'
+  | 'FullscreenEnterStart'
+  | 'FullscreenExitActive'
+  | 'FullscreenExitDone'
+  | 'FullscreenExitStart'
+  | 'HeaderBackgroundImage'
+  | 'ImgBlur'
+  | 'ImgBlurBackdrop'
+  | 'ImgContainer'
+  | 'ImgSrc'
+  | 'Left'
+  | 'Loaded'
+  | 'Middle'
+  | 'NoArt'
+  | 'PinBox'
+  | 'Right'
+  | 'SVGTitle'
+  | 'SaveBoxSizer'
+  | 'TextNameSpace'
+  | 'TitleImageContainer'
+  | 'TitleLogo'
+  | 'TitleSection'
+  | 'Top'
+  | 'TopCapsule'
+  | 'TopGradient'
+  | 'TopLeft'
+  | 'TopRight'
+  | 'UpperCenter'
+  | 'UpperLeft'
+  | 'duration-app-launch',
+  string
+>;
+
+type AppDetailsClasses = Record<
+  | 'BreakNarrow'
+  | 'BreakShort'
+  | 'BreakTall'
+  | 'BreakUltraWide'
+  | 'BreakWide'
+  | 'Container'
+  | 'GamepadUIBreakNarrow'
+  | 'GamepadUIBreakShort'
+  | 'GamepadUIBreakWide'
+  | 'Glassy'
+  | 'Header'
+  | 'HeaderLoaded'
+  | 'InnerContainer'
+  | 'ItemFocusAnim-darkGrey'
+  | 'ItemFocusAnim-darkerGrey'
+  | 'ItemFocusAnim-darkerGrey-nocolor'
+  | 'ItemFocusAnim-green'
+  | 'ItemFocusAnim-grey'
+  | 'ItemFocusAnimBorder-darkGrey'
+  | 'PlayBar'
+  | 'PreventScrolling'
+  | 'RightBreakNarrow'
+  | 'RightBreakUltraNarrow'
+  | 'RightBreakUltraWide'
+  | 'RightBreakWide'
+  | 'ScrollContainer'
+  | 'ShowPlayBar'
+  | 'Throbber'
+  | 'duration-app-launch'
+  | 'fadein'
+  | 'focusAnimation'
+  | 'hoverAnimation',
+  string
+>;
+
+export const quickAccessMenuClasses: QuickAccessMenuClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.Title?.includes('quickaccessmenu'),
+);
 /**
 * @depreciated please use quickAccessMenuClasses instead
 */
 export const staticClasses = quickAccessMenuClasses;
-export const scrollPanelClasses: ScrollPanelClasses = findModule((mod) => typeof mod === 'object' && mod?.ScrollPanel?.includes('scrollpanel'));
+export const scrollPanelClasses: ScrollPanelClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.ScrollPanel?.includes('scrollpanel'),
+);
 /**
 * @depreciated please use scrollPanelClasses instead
 */
 export const scrollClasses = scrollPanelClasses;
-export const gamepadDialogClasses: GamepadDialogClasses = findModule((mod) => typeof mod === 'object' && mod?.GamepadDialogContent?.includes('gamepaddialog'));
-export const quickAccessControlsClasses: QuickAccessControlsClasses = findModule((mod) => typeof mod === 'object' && mod?.PanelSection?.includes('quickaccesscontrols'));
-export const updaterFieldClasses: UpdaterFieldClasses = findModule((mod) => typeof mod === 'object' && mod?.OOBEUpdateStatusContainer?.includes('updaterfield'));
-export const playSectionClasses: PlaySectionClasses = findModule((mod) => typeof mod === 'object' && mod?.Container?.includes('appdetailsplaysection'));
-export const gamepadSliderClasses: GamepadSliderClasses = findModule((mod) => typeof mod === 'object' && mod?.SliderControlPanelGroup?.includes('gamepadslider'));
+export const gamepadDialogClasses: GamepadDialogClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.GamepadDialogContent?.includes('gamepaddialog'),
+);
+export const quickAccessControlsClasses: QuickAccessControlsClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.PanelSection?.includes('quickaccesscontrols'),
+);
+export const updaterFieldClasses: UpdaterFieldClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.OOBEUpdateStatusContainer?.includes('updaterfield'),
+);
+export const playSectionClasses: PlaySectionClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.Container?.includes('appdetailsplaysection'),
+);
+export const gamepadSliderClasses: GamepadSliderClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.SliderControlPanelGroup?.includes('gamepadslider'),
+);
+export const appDetailsHeaderClasses: AppDetailsHeaderClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.TopCapsule?.includes('sharedappdetailsheader'),
+);
+export const appDetailsClasses: AppDetailsClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.HeaderLoaded?.includes('appdetails_'),
+);
--- a/src/deck-hooks/index.ts
+++ b/src/deck-hooks/index.ts
@@ -1 +1 @@
-export * from './useParams'
+export * from './useParams';
--- a/src/deck-hooks/useParams.ts
+++ b/src/deck-hooks/useParams.ts
@@ -1,15 +1,15 @@
-import { ReactRouter } from "../webpack";
+import { ReactRouter } from '../webpack';

 /**
 * Get the current params from ReactRouter
- * 
+ *
 * @returns an object with the current ReactRouter params
- * 
+ *
 * @example
 * import { useParams } from "decky-frontend-lib";
- * 
+ *
 * const { appid } = useParams<{ appid: string }>()
 */
-export const useParams = Object.values(ReactRouter).find((val) =>
-  /return (\w)\?\1\.params:{}/.test(`${val}`)
-) as <T>() => T
+export const useParams = Object.values(ReactRouter).find((val) => /return (\w)\?\1\.params:{}/.test(`${val}`)) as <
+  T,
+>() => T;
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,7 +2,7 @@
 export * from './custom-components';
 export * from './custom-hooks';
 export * from './deck-components';
-export * from './deck-hooks'
+export * from './deck-hooks';
 export * from './plugin';
 export * from './webpack';
 export * from './utils';
--- a/src/plugin.tsx
+++ b/src/plugin.tsx
@@ -6,6 +6,7 @@ export interface Plugin {
  icon: JSX.Element;
  content?: JSX.Element;
  onDismount?(): void;
+  alwaysRender?: boolean;
 }

 interface ServerResponseSuccess<TRes> {
@@ -20,13 +21,15 @@ interface ServerResponseError {

 export type ServerResponse<TRes> = ServerResponseSuccess<TRes> | ServerResponseError;

-type RoutePatch = (route: RouteProps) => RouteProps;
+export type RoutePatch = (route: RouteProps) => RouteProps;

 export interface RouterHook {
  addRoute(path: string, component: ComponentType, props?: Omit<RouteProps, 'path' | 'children'>): void;
  addPatch(path: string, patch: RoutePatch): RoutePatch;
-  removePatch(path: string, patch: RoutePatch): void;
+  addGlobalComponent(name: string, component: ComponentType): void;
  removeRoute(path: string): void;
+  removePatch(path: string, patch: RoutePatch): void;
+  removeGlobalComponent(name: string): void;
 }

 export interface ToastData {
@@ -37,8 +40,8 @@ export interface ToastData {
  icon?: ReactNode;
  className?: string;
  contentClassName?: string;
-  duration?: number
-  critical?: boolean
+  duration?: number;
+  critical?: boolean;
 }

 export interface Toaster {
@@ -53,7 +56,7 @@ export interface FilePickerRes {
 export interface ServerAPI {
  routerHook: RouterHook;
  toaster: Toaster;
-  openFilePicker(startPath: string, includeFiles?: boolean, regex?: RegExp): Promise<FilePickerRes>
+  openFilePicker(startPath: string, includeFiles?: boolean, regex?: RegExp): Promise<FilePickerRes>;
  callPluginMethod<TArgs = {}, TRes = {}>(methodName: string, args: TArgs): Promise<ServerResponse<TRes>>;
  callServerMethod<TArgs = {}, TRes = {}>(methodName: string, args: TArgs): Promise<ServerResponse<TRes>>;
  fetchNoCors<TRes = {}>(url: RequestInfo, request?: RequestInit): Promise<ServerResponse<TRes>>;
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,10 +1,21 @@
-export * from "./patcher";
-export * from "./react";
+export * from './patcher';
+export * from './react';

 export function joinClassNames(...classes: string[]): string {
-    return classes.join(" ");
+  return classes.join(' ');
 }

 export function sleep(ms: number) {
-    return new Promise(res => setTimeout(res, ms));
-}
+  return new Promise((res) => setTimeout(res, ms));
+}
+
+/**
+ * Finds the SP window, since it is a render target as of 10-19-2022's beta
+ */
+export function findSP(): Window {
+  // old (SP as host)
+  if (document.title == 'SP') return window;
+  // new (SP as popup)
+  return FocusNavController.m_ActiveContext.m_rgGamepadNavigationTrees.find((x: any) => x.m_ID == 'root_1_').Root
+    .Element.ownerDocument.defaultView;
+}
--- a/src/utils/patcher.ts
+++ b/src/utils/patcher.ts
@@ -1,112 +1,160 @@
 // TODO: implement storing patches as an option so we can offer unpatchAll selectively
 // Return this in a replacePatch to call the original method (can still modify args).
-export let callOriginal = Symbol("DECKY_CALL_ORIGINAL");
+export let callOriginal = Symbol('DECKY_CALL_ORIGINAL');

 export interface PatchOptions {
-    singleShot?: boolean
+  singleShot?: boolean;
 }

 type GenericPatchHandler = (args: any[], ret?: any) => any;

 export interface Patch {
-    original: Function;
-    property: string;
-    object: any;
-    patchedFunction: any;
-    hasUnpatched: boolean;
-    handler: GenericPatchHandler;
+  original: Function;
+  property: string;
+  object: any;
+  patchedFunction: any;
+  hasUnpatched: boolean;
+  handler: GenericPatchHandler;

-    unpatch: () => void
-};
+  unpatch: () => void;
+}

 // let patches = new Set<Patch>();

-export function beforePatch(object: any, property: string, handler: (args: any[]) => any, options: PatchOptions = {}): Patch {
-    const orig = object[property];
-    object[property] = function (...args: any[]) {
-        handler.call(this, args);
-        const ret = patch.original.call(this, ...args);
-        if (options.singleShot) {
-            patch.unpatch();
-        }
-        return ret;
+export function beforePatch(
+  object: any,
+  property: string,
+  handler: (args: any[]) => any,
+  options: PatchOptions = {},
+): Patch {
+  const orig = object[property];
+  object[property] = function (...args: any[]) {
+    handler.call(this, args);
+    const ret = patch.original.call(this, ...args);
+    if (options.singleShot) {
+      patch.unpatch();
    }
-    const patch = processPatch(object, property, handler, object[property], orig);
-    return patch;
+    return ret;
+  };
+  const patch = processPatch(object, property, handler, object[property], orig);
+  return patch;
 }

-export function afterPatch(object: any, property: string, handler: (args: any[], ret: any) => any, options: PatchOptions = {}): Patch {
-    const orig = object[property];
-    object[property] = function (...args: any[]) {
-        let ret = patch.original.call(this, ...args);
-        ret = handler.call(this, args, ret);
-        if (options.singleShot) {
-            patch.unpatch();
-        }
-        return ret;
+export function afterPatch(
+  object: any,
+  property: string,
+  handler: (args: any[], ret: any) => any,
+  options: PatchOptions = {},
+): Patch {
+  const orig = object[property];
+  object[property] = function (...args: any[]) {
+    let ret = patch.original.call(this, ...args);
+    ret = handler.call(this, args, ret);
+    if (options.singleShot) {
+      patch.unpatch();
    }
-    const patch = processPatch(object, property, handler, object[property], orig);
-    return patch;
+    return ret;
+  };
+  const patch = processPatch(object, property, handler, object[property], orig);
+  return patch;
 }

-export function replacePatch(object: any, property: string, handler: (args: any[]) => any, options: PatchOptions = {}): Patch {
-    const orig = object[property];
-    object[property] = function (...args: any[]) {
-        const ret = handler.call(this, args);
-        if (ret == callOriginal) return patch.original.call(this, ...args);
-        if (options.singleShot) {
-            patch.unpatch();
-        }
-        return ret;
-    };
-    const patch = processPatch(object, property, handler, object[property], orig);
-    return patch;
+export function replacePatch(
+  object: any,
+  property: string,
+  handler: (args: any[]) => any,
+  options: PatchOptions = {},
+): Patch {
+  const orig = object[property];
+  object[property] = function (...args: any[]) {
+    const ret = handler.call(this, args);
+    if (ret == callOriginal) return patch.original.call(this, ...args);
+    if (options.singleShot) {
+      patch.unpatch();
+    }
+    return ret;
+  };
+  const patch = processPatch(object, property, handler, object[property], orig);
+  return patch;
 }

-function processPatch(object: any, property: any, handler: GenericPatchHandler, patchedFunction: any, original: any): Patch {
-    // Assign all props of original function to new one
-    Object.assign(object[property], original);
-    // Allow toString webpack filters to continue to work
-    object[property].toString = () => original.toString();
+function processPatch(
+  object: any,
+  property: any,
+  handler: GenericPatchHandler,
+  patchedFunction: any,
+  original: any,
+): Patch {
+  // Assign all props of original function to new one
+  Object.assign(object[property], original);
+  // Allow toString webpack filters to continue to work
+  object[property].toString = () => original.toString();

-    // HACK: for compatibility, remove when all plugins are using new patcher
-    Object.defineProperty(object[property], "__deckyOrig", {
-        get: () => patch.original,
-        set: (val: any) => patch.original = val
-    })
+  // HACK: for compatibility, remove when all plugins are using new patcher
+  Object.defineProperty(object[property], '__deckyOrig', {
+    get: () => patch.original,
+    set: (val: any) => (patch.original = val),
+  });

-    // Build a Patch object of this patch
-    const patch: Patch = {
-        object,
-        property,
-        handler,
-        patchedFunction,
-        original,
-        hasUnpatched: false,
-        unpatch: () => unpatch(patch)
-    };
+  // Build a Patch object of this patch
+  const patch: Patch = {
+    object,
+    property,
+    handler,
+    patchedFunction,
+    original,
+    hasUnpatched: false,
+    unpatch: () => unpatch(patch),
+  };

-    object[property].__deckyPatch = patch;
+  object[property].__deckyPatch = patch;

-    return patch;
+  return patch;
 }

 function unpatch(patch: Patch): void {
-    const { object, property, handler, patchedFunction, original } = patch;
-    if (patch.hasUnpatched) throw new Error("Function is already unpatched.")
-    let realProp = property;
-    let realObject = object;
-    console.debug("[Patcher] unpatching", {realObject, realProp, object, property, handler, patchedFunction, original, isEqual: realObject[realProp] === patchedFunction})
+  const { object, property, handler, patchedFunction, original } = patch;
+  if (patch.hasUnpatched) throw new Error('Function is already unpatched.');
+  let realProp = property;
+  let realObject = object;
+  console.debug('[Patcher] unpatching', {
+    realObject,
+    realProp,
+    object,
+    property,
+    handler,
+    patchedFunction,
+    original,
+    isEqual: realObject[realProp] === patchedFunction,
+  });

-    // If another patch has been applied to this function after this one, move down until we find the correct patch
-    while (realObject[realProp] && realObject[realProp] !== patchedFunction) {
-        realObject = realObject[realProp].__deckyPatch;
-        realProp = "original";
-        console.debug("[Patcher] moved to next", {realObject, realProp, object, property, handler, patchedFunction, original, isEqual: realObject[realProp] === patchedFunction})
-    }
+  // If another patch has been applied to this function after this one, move down until we find the correct patch
+  while (realObject[realProp] && realObject[realProp] !== patchedFunction) {
+    realObject = realObject[realProp].__deckyPatch;
+    realProp = 'original';
+    console.debug('[Patcher] moved to next', {
+      realObject,
+      realProp,
+      object,
+      property,
+      handler,
+      patchedFunction,
+      original,
+      isEqual: realObject[realProp] === patchedFunction,
+    });
+  }

-    realObject[realProp] = realObject[realProp].__deckyPatch.original
+  realObject[realProp] = realObject[realProp].__deckyPatch.original;

-    patch.hasUnpatched = true;
-    console.debug("[Patcher] unpatched", {realObject, realProp, object, property, handler, patchedFunction, original, isEqual: realObject[realProp] === patchedFunction})
-}
+  patch.hasUnpatched = true;
+  console.debug('[Patcher] unpatched', {
+    realObject,
+    realProp,
+    object,
+    property,
+    handler,
+    patchedFunction,
+    original,
+    isEqual: realObject[realProp] === patchedFunction,
+  });
+}
--- a/src/utils/react.ts
+++ b/src/utils/react.ts
@@ -1,86 +1,95 @@
-import * as React from "react";
+import * as React from 'react';

 // this shouldn't need to be redeclared but it does for some reason

 declare global {
-    interface Window {
-      SP_REACT: typeof React;
-    }
+  interface Window {
+    SP_REACT: typeof React;
+  }
 }

-export function fakeRenderComponent(fun: Function): any {
-    const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
+export function fakeRenderComponent(fun: Function, customHooks: any = {}): any {
+  const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
+    .current;

-    // TODO: add more hooks
+  // TODO: add more hooks

-    let oldHooks = {
-        useContext: hooks.useContext,
-        useCallback: hooks.useCallback,
-        useLayoutEffect: hooks.useLayoutEffect,
-        useEffect: hooks.useEffect,
-        useMemo: hooks.useMemo,
-        useRef: hooks.useRef,
-        useState: hooks.useState,
-    }
+  let oldHooks = {
+    useContext: hooks.useContext,
+    useCallback: hooks.useCallback,
+    useLayoutEffect: hooks.useLayoutEffect,
+    useEffect: hooks.useEffect,
+    useMemo: hooks.useMemo,
+    useRef: hooks.useRef,
+    useState: hooks.useState,
+  };

-    hooks.useCallback = (cb: Function) => cb;
-    hooks.useContext = (cb: any) => cb._currentValue;
-    hooks.useLayoutEffect = (_: Function) => {}//cb();
-    hooks.useMemo = (cb: Function, _: any[]) => cb;
-    hooks.useEffect = (_: Function) => {}//cb();
-    hooks.useRef = (val: any) => ({current: val || {}});
-    hooks.useState = (v: any) => {
-        let val = v;
+  hooks.useCallback = (cb: Function) => cb;
+  hooks.useContext = (cb: any) => cb._currentValue;
+  hooks.useLayoutEffect = (_: Function) => {}; //cb();
+  hooks.useMemo = (cb: Function, _: any[]) => cb;
+  hooks.useEffect = (_: Function) => {}; //cb();
+  hooks.useRef = (val: any) => ({ current: val || {} });
+  hooks.useState = (v: any) => {
+    let val = v;

-        return [val, (n: any) => val = n];
-    };
+    return [val, (n: any) => (val = n)];
+  };

-    const res = fun(hooks);
+  Object.assign(hooks, customHooks);

-    Object.assign(hooks, oldHooks);
+  const res = fun(hooks);

-    return res;
+  Object.assign(hooks, oldHooks);
+
+  return res;
 }

 export function wrapReactType(node: any, prop: any = 'type') {
-    return node[prop] = {...node[prop]};
+  return (node[prop] = { ...node[prop] });
 }

 export function wrapReactClass(node: any, prop: any = 'type') {
-    const cls = node[prop];
-    const wrappedCls = class extends cls {};
-    return node[prop] = wrappedCls;
+  const cls = node[prop];
+  const wrappedCls = class extends cls {};
+  return (node[prop] = wrappedCls);
 }

 export function getReactInstance(o: HTMLElement | Element | Node) {
-    return o[Object.keys(o).find(k => k.startsWith('__reactInternalInstance')) as string]
+  return o[Object.keys(o).find((k) => k.startsWith('__reactInternalInstance')) as string];
 }

 // Based on https://github.com/GooseMod/GooseMod/blob/9ef146515a9e59ed4e25665ed365fd72fc0dcf23/src/util/react.js#L20
 export interface findInTreeOpts {
-    walkable?: string[],
-    ignore?: string[]
+  walkable?: string[];
+  ignore?: string[];
 }

-export declare type findInTreeFilter = (element: any) => boolean
+export declare type findInTreeFilter = (element: any) => boolean;

 export const findInTree = (parent: any, filter: findInTreeFilter, opts: findInTreeOpts): any => {
-    const { walkable = null, ignore = [] } = opts ?? {};
-  
-    if (!parent || typeof parent !== 'object') { // Parent is invalid to search through
-        return null;
-    }
-  
-    if (filter(parent)) return parent; // Parent matches, just return
-  
-    if (Array.isArray(parent)) { // Parent is an array, go through values
-        return parent.map((x) => findInTree(x, filter, opts)).find((x) => x);
-    }
-  
-    // Parent is an object, go through values (or option to only use certain keys)
-    return (walkable || Object.keys(parent)).map((x) => !ignore.includes(x) && findInTree(parent[x], filter, opts)).find((x: any) => x);
+  const { walkable = null, ignore = [] } = opts ?? {};
+
+  if (!parent || typeof parent !== 'object') {
+    // Parent is invalid to search through
+    return null;
+  }
+
+  if (filter(parent)) return parent; // Parent matches, just return
+
+  if (Array.isArray(parent)) {
+    // Parent is an array, go through values
+    return parent.map((x) => findInTree(x, filter, opts)).find((x) => x);
+  }
+
+  // Parent is an object, go through values (or option to only use certain keys)
+  return (walkable || Object.keys(parent))
+    .map((x) => !ignore.includes(x) && findInTree(parent[x], filter, opts))
+    .find((x: any) => x);
 };
-  
-export const findInReactTree = (node: any, filter: findInTreeFilter) => findInTree(node, filter, { // Specialised findInTree for React nodes
-    walkable: [ 'props', 'children', 'child', 'sibling' ]
-});
+
+export const findInReactTree = (node: any, filter: findInTreeFilter) =>
+  findInTree(node, filter, {
+    // Specialised findInTree for React nodes
+    walkable: ['props', 'children', 'child', 'sibling'],
+  });
--- a/src/webpack.ts
+++ b/src/webpack.ts
@@ -29,15 +29,23 @@ if (window.webpackJsonp && !window.webpackJsonp.deckyShimmed) {
  hasWebpack5 = true;
  const id = Math.random();
  let initReq: any;
-  window.webpackChunksteamui.push([[ id ], {}, (r: any) => { initReq = r }]);
+  window.webpackChunksteamui.push([
+    [id],
+    {},
+    (r: any) => {
+      initReq = r;
+    },
+  ]);
  for (let i of Object.keys(initReq.m)) {
-    webpackCache[i] = initReq(i)
+    webpackCache[i] = initReq(i);
  }
 }

-export const allModules: Module[] = hasWebpack5 ? Object.values(webpackCache).filter((x) => x) : Object.keys(webpackCache)
-  .map((x) => webpackCache[x].exports)
-  .filter((x) => x);
+export const allModules: Module[] = hasWebpack5
+  ? Object.values(webpackCache).filter((x) => x)
+  : Object.keys(webpackCache)
+      .map((x) => webpackCache[x].exports)
+      .filter((x) => x);

 export const findModule = (filter: FilterFn) => {
  for (const m of allModules) {
Author	SHA1	Message	Date
semantic-release-bot	4c2a715324	chore(release): 3.13.0 [CI SKIP]	2022-11-29 20:01:20 +00:00
Jozen Blue Martinez	678ba216f1	feat(Menu): add more missing props (#60 ) [CI SKIP] * feat(Menu): extend FooterLegendProps * feat(MenuItem): add more missing props	2022-11-29 21:00:45 +01:00
semantic-release-bot	07d15f5dca	chore(release): 3.12.0 [CI SKIP]	2022-11-28 12:03:43 +00:00
Jozen Blue Martinez	c84a091469	feat(MenuItem): add missing props (#59 )	2022-11-28 07:03:07 -05:00
semantic-release-bot	47fd13692f	chore(release): 3.11.1 [CI SKIP]	2022-11-20 01:13:29 +00:00
AAGaming	2ec9519b7d	fix(Footer): add types for ActionDescriptionMap	2022-11-19 20:12:45 -05:00
semantic-release-bot	24606190e0	chore(release): 3.11.0 [CI SKIP]	2022-11-18 18:00:30 +00:00
Lukas Senionis	ed98d14b37	feat(classes): add "appDetailsClasses" (#55 )	2022-11-18 12:59:57 -05:00
semantic-release-bot	b882612dfa	chore(release): 3.10.0 [CI SKIP]	2022-11-18 17:37:50 +00:00
Lukas Senionis	32291620b4	feat(classes): add appDetailsHeaderClasses (#54 )	2022-11-18 12:37:16 -05:00
semantic-release-bot	9b368c5f11	chore(release): 3.9.0 [CI SKIP]	2022-11-16 20:45:13 +00:00
Lukas Senionis	e167ef5a13	feat(Dialog): add "focusable" button prop (#51 )	2022-11-16 15:44:36 -05:00
semantic-release-bot	2f3df00967	chore(release): 3.8.0 [CI SKIP]	2022-11-11 21:05:54 +00:00
AAGaming	215156d316	feat(routerhook): add global components support	2022-11-11 16:05:05 -05:00
semantic-release-bot	47d75db690	chore(release): 3.7.14 [CI SKIP]	2022-11-05 01:47:25 +00:00
AAGaming	82768e0415	fix(Menu): fix on Steam beta	2022-11-04 21:46:39 -04:00
AAGaming	e44187fe4b	fix(Modal): fix on Steam beta	2022-11-04 21:46:22 -04:00
semantic-release-bot	72af32436e	chore(release): 3.7.13 [CI SKIP]	2022-11-02 16:56:44 +00:00
Lukas Senionis	e1f64a38de	fix(useQuickAccessVisible): make it work in beta (#49 ) * fix(useQuickAccessVisible): make it work in beta * fix(useQuickAccessVisible): rename for consistency * fix(useQuickAccessVisible): update the exports * fix(useQuickAccessVisible): shut up typescript	2022-11-02 12:56:11 -04:00
TrainDoctor	82ed48761d	Merge pull request #38 from Tormak9970/main Added some of the SteamClient types	2022-10-30 19:36:12 -07:00
TrainDoctor	a81c342d2a	Update src/deck-components/index.ts	2022-10-30 17:35:48 -07:00
TrainDoctor	68d630262d	Merge pull request #45 from FrogTheFrog/patch-19 Extend CI for PRs	2022-10-29 15:16:22 -07:00
semantic-release-bot	0bb8c67cfa	chore(release): 3.7.12 [CI SKIP]	2022-10-29 19:44:41 +00:00
Jonas Dellinger	edd29e6c5a	Merge pull request #46 from FrogTheFrog/patch-20 fix(Item): change title and description types to ReactNode	2022-10-29 21:44:13 +02:00
Lukas Senionis	0ed054fae9	fix(Item): change title and description types to ReactNode	2022-10-29 13:25:30 +03:00
semantic-release-bot	0d912eac88	chore(release): 3.7.11 [CI SKIP]	2022-10-28 23:04:53 +00:00
AAGaming	789e16380f	fix(package.json): train wtf	2022-10-28 19:04:25 -04:00
semantic-release-bot	88b50bbc1e	chore(release): 3.7.10 [CI SKIP]	2022-10-28 22:56:58 +00:00
AAGaming	75f35882f2	fix(tabs): shut up typescript	2022-10-28 18:56:30 -04:00
semantic-release-bot	23af4c0bb4	chore(release): 3.7.9 [CI SKIP]	2022-10-28 22:43:16 +00:00
AAGaming	a074277bb5	fix(tabs): fix on stable for real this time i think	2022-10-28 18:42:28 -04:00
Lukas Senionis	9c72a55aff	Remove prepack hook	2022-10-28 22:00:33 +03:00
Lukas Senionis	92ffc76075	Extend CI for PRs	2022-10-27 11:48:44 +03:00
semantic-release-bot	fb49d64fd3	chore(release): 3.7.8 [CI SKIP]	2022-10-26 21:54:08 +00:00
Lukas Senionis	cfef1dc320	fix(Field): fix this time for real (#44 )	2022-10-26 17:53:41 -04:00
semantic-release-bot	f6b4d6b254	chore(release): 3.7.7 [CI SKIP]	2022-10-26 21:49:50 +00:00
Lukas Senionis	0010a1fcee	fix(Field): remove incompatible properties (#42 ) * fix(Field): remove incompatible properties * fix(Field): remove the override	2022-10-26 17:49:14 -04:00
semantic-release-bot	28cbc1cfe1	chore(release): 3.7.6 [CI SKIP]	2022-10-26 21:42:37 +00:00
Lukas Senionis	fe75dfb5f4	fix(Field): add override for onClick type (#43 )	2022-10-26 17:42:04 -04:00
semantic-release-bot	91c386a6cc	chore(release): 3.7.5 [CI SKIP]	2022-10-26 12:19:45 +00:00
Lukas Senionis	bedb6b8bb9	fix(Field): add types for focusing field (#41 )	2022-10-26 08:19:16 -04:00
semantic-release-bot	4cdcca0b5a	chore(release): 3.7.4 [CI SKIP]	2022-10-26 00:16:38 +00:00
AAGaming	f16e0b29f8	fix(tabs): fix on stable	2022-10-25 20:16:06 -04:00
AAGaming	37a6658b95	chore(docs): how did i manage to do this	2022-10-24 20:45:01 -04:00
AAGaming	ed0b92de2e	fix(docs): change arg format	2022-10-24 20:43:53 -04:00
AAGaming	dcba5c22f8	chore(docs): fix it	2022-10-24 20:42:47 -04:00
semantic-release-bot	fa50ca6a37	chore(release): 3.7.3 [CI SKIP]	2022-10-25 00:38:49 +00:00
AAGaming	19e986ed8b	chore(ci): switch to npm	2022-10-24 20:38:18 -04:00
AAGaming	3c553a227d	fix(tabs): it returns	2022-10-24 20:35:01 -04:00
AAGaming	1f2694aec8	chore(prettier): fix prettier	2022-10-24 20:33:40 -04:00
semantic-release-bot	2e52cca8a2	chore(release): 3.7.2 [CI SKIP]	2022-10-24 14:59:05 +00:00
AAGaming	3dbca1a056	fix(tabs): unkill build	2022-10-24 10:58:35 -04:00
semantic-release-bot	c6692138c6	chore(release): 3.7.1 [CI SKIP]	2022-10-24 05:01:13 +00:00
AAGaming	25c33b2a05	fix(Tabs): temp remove until we have a way to grab it on beta	2022-10-24 01:00:44 -04:00
semantic-release-bot	00d27d1373	chore(release): 3.7.0 [CI SKIP]	2022-10-24 00:22:31 +00:00
AAGaming	5f0470c351	feat(modal): support for latest steamos preview	2022-10-23 20:22:04 -04:00
semantic-release-bot	c77d6edaae	chore(release): 3.6.1 [CI SKIP]	2022-10-19 19:57:14 +00:00
Lukas Senionis	c44c66facd	fix(plugin): export RoutePatch (#39 )	2022-10-19 15:44:13 -04:00
Tormak	ce3860f73b	added jsdoc and SteamClient global declaration	2022-10-17 08:39:37 -04:00
Tormak	d8b10a2133	ran prettier	2022-10-15 22:46:41 -05:00
Tormak	1581304dcb	restyled	2022-10-15 22:44:58 -05:00
Travis Lane	60ddf474e0	Merge branch 'SteamDeckHomebrew:main' into main	2022-10-15 13:46:50 -05:00
Tormak	52ae328e2e	added some of the SteamClient types	2022-10-15 14:35:57 -05:00
semantic-release-bot	276e4eccd2	chore(release): 3.6.0 [CI SKIP]	2022-10-15 03:44:35 +00:00
AAGaming	2fc2060a6c	feat(plugin): add alwaysRender	2022-10-14 23:43:45 -04:00
semantic-release-bot	1143a9f3e0	chore(release): 3.5.6 [CI SKIP]	2022-10-08 12:57:07 +00:00
Lukas Senionis	5a5218a7c4	fix(Dialog): remove not exported dialog button (#37 )	2022-10-08 08:56:14 -04:00
semantic-release-bot	8a887ca858	chore(release): 3.5.5 [CI SKIP]	2022-10-08 05:54:20 +00:00
AAGaming	0ce1b5499d	fix(sidebarnavigation): no dont	2022-10-08 01:53:35 -04:00
semantic-release-bot	554163cc5d	chore(release): 3.5.4 [CI SKIP]	2022-10-08 05:51:16 +00:00
AAGaming	d6b00b0733	fix(sidebarnavigation): allow null pags	2022-10-08 01:50:25 -04:00
semantic-release-bot	f8ddf210f0	chore(release): 3.5.3 [CI SKIP]	2022-10-08 02:52:44 +00:00
AAGaming	4024b76918	fix(tabs): fix props and add example	2022-10-07 22:51:59 -04:00
Tormak	aa0fad2ecf	fixed typo	2022-09-29 13:24:15 -05:00
Tormak	dab9071d1e	found name of static classes	2022-09-29 13:01:06 -05:00
Tormak	189a90ba31	Updated ScrollPanelClasses marked the old variable as depreciated and moved the implementation to the new variable	2022-09-25 09:06:14 -05:00
Tormak	8509ae8f9a	Merge branch 'main' of https://github.com/Tormak9970/decky-frontend-lib	2022-09-24 12:05:06 -05:00
Tormak	a6ebfdcd7d	fixed includes	2022-09-24 12:05:04 -05:00
Tormak	5f7655baaf	fixed bugs with static-classes and future proofing	2022-09-24 11:51:19 -05:00
Travis Lane	bca2dcc9bd	Merge branch 'SteamDeckHomebrew:main' into main	2022-09-24 10:54:09 -05:00
Tormak	546a4da043	updated DialogButton props and added nav pref enum	2022-09-22 17:33:08 -05:00