chore(release): 3.18.3 [CI SKIP]

fix(Router): update Router interface to SteamOS3.4 and add Navigation (#52 )
chore(release): 3.18.2 [CI SKIP]
2026-05-20 10:00:08 +02:00 · 2022-12-12 23:49:39 +00:00 · 2022-12-12 18:48:52 -05:00 · 2022-12-11 20:12:52 +00:00 · 2022-12-11 15:12:22 -05:00 · 2022-12-11 20:02:11 +00:00
46 changed files with 7493 additions and 22762 deletions
--- a/.github/workflows/docs.yaml
+++ b/.github/workflows/docs.yaml
@@ -0,0 +1,54 @@
+name: Generate docs
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    name: Generate Docs
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Setup | Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          path: lib
+      - name: Setup | Checkout wiki
+        uses: actions/checkout@v3
+        with:
+          repository: SteamDeckHomebrew/wiki
+          path: wiki
+          ssh-key: ${{ secrets.SSH_DEPLOY_KEY }}
+          persist-credentials: true
+      - name: Setup | Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Setup | Dependencies
+        run: |
+          cd lib
+          npm i -g pnpm
+          pnpm i --frozen-lockfile
+
+      - name: Build Docs
+        run: |
+          cd lib
+          pnpm run docs --out ../wiki/api-docs/decky-frontend-lib
+
+      - name: Commit files
+        run: |
+          cd wiki
+          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add -A ./api-docs/decky-frontend-lib
+          git commit -m "Update decky-frontend-lib API docs"
+
+      - name: Push changes
+        uses: ad-m/github-push-action@master
+        with:
+          ssh: true
+          directory: ./wiki
+          repository: SteamDeckHomebrew/wiki
+          branch: main
--- 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,5 +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,390 @@
+## [3.18.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.2...v3.18.3) (2022-12-12)
+
+
+### Bug Fixes
+
+* **Router:** update Router interface to SteamOS3.4 and add Navigation ([#52](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/52)) ([f0379e5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f0379e5d19279863b571e66918bc9107efedb612))
+
+## [3.18.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.1...v3.18.2) (2022-12-11)
+
+
+### Bug Fixes
+
+* **useQuickAccessVisible:** remove invalid prop access ([#66](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/66)) ([767dc2f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/767dc2fcee97d8b6c2d331ae29704d9b469de51a))
+
+## [3.18.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.18.0...v3.18.1) (2022-12-11)
+
+
+### Bug Fixes
+
+* **findSP:** fallback to last active context ([#53](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/53)) ([6f14da1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/6f14da152acc4757b814844f1b77bf83dd98d77e))
+
+# [3.18.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.17.0...v3.18.0) (2022-12-11)
+
+
+### Features
+
+* **DialogCheckbox:** Add DialogCheckbox component ([#58](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/58)) ([88f245d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/88f245d476a6477e9fc0cd35e9b675961ecbc26c))
+
+# [3.17.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.16.2...v3.17.0) (2022-12-11)
+
+
+### Features
+
+* **ControlsList:** Add ControlsList component ([#61](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/61)) ([c586afb](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c586afb97d59928ecb703b5a254ed1b9405e2c7e))
+
+## [3.16.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.16.1...v3.16.2) (2022-12-11)
+
+
+### Bug Fixes
+
+* **Marquee:** replace default export with named export ([cd0635e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/cd0635e94f98499f9f5fc24a7fd4b93efe7dfc38))
+
+## [3.16.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.16.0...v3.16.1) (2022-12-11)
+
+
+### Bug Fixes
+
+* **FooterLegend:** change description types to ReactNode ([#62](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/62)) ([d24136e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/d24136ecb6b0c5239b68723e8f92a4822aa7b590))
+
+# [3.16.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.15.0...v3.16.0) (2022-12-11)
+
+
+### Features
+
+* **Marquee:** Add Marquee component ([#63](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/63)) ([925ea8c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/925ea8c3ceaaf6ff2f79b8808908a9b144a4fcff))
+
+# [3.15.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.14.0...v3.15.0) (2022-12-11)
+
+
+### Features
+
+* **Focusable:** add noFocusRing prop type ([#65](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/65)) ([cc29dda](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/cc29ddaf578e21ab2abe1cd266f1d15debee0637))
+
+# [3.14.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.13.0...v3.14.0) (2022-12-10)
+
+
+### Features
+
+* **toast:** add showToast/playSound to ToastData ([#64](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/64)) ([7ba1229](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7ba1229a4e24fea587b96dc8b078200faf45ddee))
+
+# [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)
+
+
+### Bug Fixes
+
+* **Tabs:** make onShowTab required ([7161e75](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7161e757e9c98d677510e03eb2606ce58152f3b1))
+
+## [3.5.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.0...v3.5.1) (2022-10-08)
+
+
+### Bug Fixes
+
+* **Tabs:** actually export it lmao ([0e0e0d2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0e0e0d204adc8d888f05e98edb6c1a1a171d00bb))
+
+# [3.5.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.4.0...v3.5.0) (2022-10-08)
+
+
+### Features
+
+* **Tabs:** initial tabs component, props, docs ([abbd3cd](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/abbd3cddae24039cbc9b7d955924431e8fbacf94))
+
+# [3.4.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.3.5...v3.4.0) (2022-10-06)
+
+
+### Features
+
+* **hooks:** Added useParams hook ([#36](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/36)) ([e2920dd](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e2920dd91e81d915a2319280d8473df71a4e4232))
+
+## [3.3.5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.3.4...v3.3.5) (2022-10-02)
+
+
+### Bug Fixes
+
+* **docs:** set categorizeByGroup to true ([0f205e8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0f205e891694e2cee211b0c2db74a6dda2432507))
+
+## [3.3.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.3.3...v3.3.4) (2022-10-02)
+
+
+### Bug Fixes
+
+* **docs:** build each component as a seperate page ([fbd936d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/fbd936dc1fe4c23c72f4ee27af95abc004382acd))
+
+## [3.3.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.3.2...v3.3.3) (2022-10-02)
+
+
+### Bug Fixes
+
+* **modal:** make children optional ([#34](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/34)) ([99ad754](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/99ad7543a9966b8ff3f4ec01e6f05c94e5242c93))
+
+## [3.3.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.3.1...v3.3.2) (2022-10-02)
+
+
+### Bug Fixes
+
+* **modal:** allow children ([40871af](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/40871af8539858f435c83123a56d4b31b63d627d))
+
+## [3.3.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.3.0...v3.3.1) (2022-10-02)
+
+
+### Bug Fixes
+
+* **SidebarNavigation:** add more props ([#29](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/29)) ([ed0be5e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/ed0be5e87e964ed57cc99b40ff55fe35a2f518b2))
+
+# [3.3.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.2.2...v3.3.0) (2022-10-02)
+
+
+### Features
+
+* **Menu:** add nested menu groups + more props ([#30](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/30)) ([4233128](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/4233128c7ee8c6e5ab4ee74385c7b1b911d507a6))
+
+## [3.2.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.2.1...v3.2.2) (2022-09-29)
+
+
+### Bug Fixes
+
+* **modal:** extend props for modals ([#32](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/32)) ([1fbe55a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/1fbe55aa544c9e84e2b3e2d6af9950db2fe7546c))
+
+## [3.2.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.2.0...v3.2.1) (2022-09-24)
+
+
+### Bug Fixes
+
+* **modal:** update showModal types ([#27](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/27)) ([6996e54](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/6996e5424f33467ef5bb93f47614058c127cb3ee))
+
+# [3.2.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.1.4...v3.2.0) (2022-09-20)
+
+
+### Features
+
+* **FooterLegend:** add GamepadEvent ([130dfa2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/130dfa24c51c3a670cca9ebc38e4891618532bef))
+
+## [3.1.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.1.3...v3.1.4) (2022-09-19)
+
+
+### Bug Fixes
+
+* **License:** update license in package.json ([064c161](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/064c161b6736bb5574f28cb986c5899620fd69fe))
+
+## [3.1.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.1.2...v3.1.3) (2022-09-18)
+
+
+### Bug Fixes
+
+* **DialogButton:** fix ref type ([74aefc7](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/74aefc7b3c19a98fb607e78c4063c098a2e12546))
+
+## [3.1.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.1.1...v3.1.2) (2022-09-18)
+
+
+### Bug Fixes
+
+* **DialogButton:** fix types, add ref types ([db41e74](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/db41e74cf9f584301e59556e64a5c2371df18ed0))
+
+## [3.1.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.1.0...v3.1.1) (2022-09-18)
+
+
+### Bug Fixes
+
+* **Button:** add types to DialogButton ([29201fa](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/29201fadafff6bdaa0f8fe7d7806cfa88ec545ab))
+
 # [3.1.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.0.0...v3.1.0) (2022-09-18)


--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-                  GNU LESSER GENERAL PUBLIC LICENSE
+                   GNU LESSER GENERAL PUBLIC LICENSE
                       Version 2.1, February 1999

 Copyright (C) 1991, 1999 Free Software Foundation, Inc.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "decky-frontend-lib",
-  "version": "3.1.0",
+  "version": "3.18.3",
  "description": "A library for building decky plugins",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
  "scripts": {
    "build": "shx rm -rf dist && tsc -b",
    "dev": "tsc -b -w",
-    "prepack": "npm run build",
+    "docs": "typedoc --tsconfig ./tsconfig.json src/**/*",
    "test": "echo 'No tests for now!'",
    "prepare": "husky install",
    "commit": "git-cz"
@@ -30,7 +30,7 @@
    "components"
  ],
  "author": "Jonas Dellinger <jonas@dellinger.dev>",
-  "license": "GPL-2.0-or-later",
+  "license": "LGPL-2.1",
  "bugs": {
    "url": "https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues"
  },
@@ -53,10 +53,16 @@
    "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",
    "ts-jest": "^27.1.4",
+    "typedoc": "^0.23.15",
+    "typedoc-plugin-markdown": "^3.13.6",
+    "typedoc-plugin-mdn-links": "^2.0.0",
+    "typedoc-plugin-missing-exports": "^1.0.0",
    "typescript": "^4.6.3"
  },
  "pnpm": {
@@ -72,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
@@ -0,0 +1,131 @@
+import { CSSProperties, FC, useState } from 'react';
+
+import { ConfirmModal, SliderField, gamepadSliderClasses } from '../deck-components';
+
+interface ColorPickerModalProps {
+  closeModal: () => void;
+  onConfirm?(HSLString: string): any;
+  title?: string;
+  defaultH?: number;
+  defaultS?: number;
+  defaultL?: number;
+  defaultA?: number;
+}
+
+export const ColorPickerModal: FC<ColorPickerModalProps> = ({
+  closeModal,
+  onConfirm = () => {},
+  title = 'Color Picker',
+  defaultH = 0,
+  defaultS = 100,
+  defaultL = 50,
+  defaultA = 1,
+}) => {
+  const [H, setH] = useState<number>(defaultH);
+  const [S, setS] = useState<number>(defaultS);
+  const [L, setL] = useState<number>(defaultL);
+  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}`,
+  } as CSSProperties;
+
+  return (
+    <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} {
+          --left-track-color: #0000;
+          /* This is for compatibility with the "Colored Toggles" CSSLoader Theme*/
+          --colored-toggles-main-color: #0000;
+        }
+
+        .ColorPicker_HSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            270deg,
+            hsla(360, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(270, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(180, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(90, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(0, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_SSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), 0%, var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), 100%, var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_LSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 0%, var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 50%, var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 100%, var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_ASlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), 0),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), 1)
+          );
+        }
+        `}
+      </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
+          style={{
+            backgroundColor: `hsla(${H}, ${S}%, ${L}%, ${A})`,
+            width: '40px',
+            height: '40px',
+          }}
+        ></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_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>
+    </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-components/index.ts
+++ b/src/custom-components/index.ts
@@ -1 +1,2 @@
 export * from './SuspensefulImage';
+export * from './ColorPickerModal';
--- a/src/custom-hooks/index.ts
+++ b/src/custom-hooks/index.ts
@@ -0,0 +1 @@
+export * from './useQuickAccessVisible';
--- a/src/custom-hooks/useQuickAccessVisible.tsx
+++ b/src/custom-hooks/useQuickAccessVisible.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+
+declare global {
+  var FocusNavController: any;
+}
+
+function getQuickAccessWindow(): Window | null {
+  try {
+    const context = FocusNavController?.m_ActiveContext || FocusNavController?.m_LastActiveContext;
+    const navTrees = context?.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
+ * 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";
+ *
+ * export const PluginPanelView: VFC<{}> = ({ }) => {
+ *   const isVisible = useQuickAccessVisible();
+ *
+ *   useEffect(() => {
+ *     if (!isVisible) {
+ *       return;
+ *     }
+ *
+ *     const interval = setInterval(() => console.log("Hello world!"), 1000);
+ *     return () => {
+ *       clearInterval(interval);
+ *     }
+ *   }, [isVisible])
+ *
+ *   return (
+ *     <div>
+ *       {isVisible ? "VISIBLE" : "INVISIBLE"}
+ *     </div>
+ *   );
+ * };
+ */
+export function useQuickAccessVisible(): boolean {
+  const [isVisible, setIsVisible] = useState(getQuickAccessWindow()?.document.hasFocus() ?? true);
+
+  useEffect(() => {
+    const quickAccessWindow = getQuickAccessWindow();
+    if (quickAccessWindow === null) {
+      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);
+    return () => {
+      quickAccessWindow.removeEventListener('blur', onBlur);
+      quickAccessWindow.removeEventListener('focus', onFocus);
+    };
+  }, []);
+
+  return isVisible;
+}
--- a/src/deck-components/Button.tsx
+++ b/src/deck-components/Button.tsx
@@ -1,30 +1,8 @@
-import { CSSProperties, FC } from 'react';
+import { FC } from 'react';

-import { CommonUIModule } from '../webpack';
+import { DialogButton, DialogButtonProps } from './Dialog';

-export interface ButtonProps {
-  style: CSSProperties;
-  className?: string;
-  noFocusRing?: boolean;
-  disabled?: boolean;
-  onClick?(e: MouseEvent): void;
-  onPointerDown?(e: PointerEvent): void;
-  onPointerUp?(e: PointerEvent): void;
-  onPointerCancel?(e: PointerEvent): void;
-  onMouseDown?(e: PointerEvent): void;
-  onMouseUp?(e: MouseEvent): void;
-  onTouchStart?(e: TouchEvent): void;
-  onTouchEnd?(e: TouchEvent): void;
-  onTouchCancel?(e: TouchEvent): void;
-  onSubmit?(e: SubmitEvent): void;
-}
-
-export const DialogButton = Object.values(CommonUIModule).find(
-  (mod: any) =>
-    mod?.render?.toString()?.includes('Object.assign({type:"button"') &&
-    mod?.render?.toString()?.includes('DialogButton'),
-) as any;
+export interface ButtonProps extends DialogButtonProps {}

 // Button isn't exported, so call DialogButton to grab it
-
-export const Button = DialogButton!.render({}).type as FC<ButtonProps>; // its actually a forwarded ref but that doesn't really matter in usage
+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/ControlsList.tsx
+++ b/src/deck-components/ControlsList.tsx
@@ -0,0 +1,17 @@
+import { findModuleChild } from '../webpack';
+import { FC } from 'react';
+
+export interface ControlsListProps {
+  alignItems?: 'left' | 'right' | 'center';
+  spacing?: 'standard' | 'extra';
+}
+
+export const ControlsList: FC<ControlsListProps> = findModuleChild((m) => {
+  if (typeof m !== 'object') return;
+  for (const prop in m) {
+    if (m[prop]?.toString && m[prop].toString().includes('().ControlsListChild') && m[prop].toString().includes('().ControlsListOuterPanel')) {
+      return m[prop];
+    }
+  }
+  return;
+});
--- a/src/deck-components/Dialog.tsx
+++ b/src/deck-components/Dialog.tsx
@@ -0,0 +1,86 @@
+import { CSSProperties, FC, RefAttributes } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';
+
+export interface DialogCommonProps extends RefAttributes<HTMLDivElement> {
+  style?: CSSProperties;
+  className?: string;
+}
+
+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;
+  onPointerCancel?(e: PointerEvent): void;
+  onMouseDown?(e: MouseEvent): void;
+  onMouseUp?(e: MouseEvent): void;
+  onTouchStart?(e: TouchEvent): void;
+  onTouchEnd?(e: TouchEvent): void;
+  onTouchCancel?(e: TouchEvent): void;
+  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];
+  }),
+);
+
+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'),
+) 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'),
+) as FC<DialogButtonProps>;
+
+// 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/DialogCheckbox.tsx
+++ b/src/deck-components/DialogCheckbox.tsx
@@ -0,0 +1,33 @@
+import { FC, ReactNode } from 'react';
+
+import { findModule } from '../webpack';
+import { DialogCommonProps } from './Dialog';
+import { FooterLegendProps } from './FooterLegend';
+
+export interface DialogCheckboxProps extends DialogCommonProps, FooterLegendProps {
+  onChange?(checked: boolean): void;
+  label?: ReactNode;
+  description?: ReactNode;
+  disabled?: boolean;
+  tooltip?: string;
+  color?: string;
+  highlightColor?: string;
+  bottomSeparator?: 'standard' | 'thick' | 'none';
+  controlled?: boolean;
+  checked?: boolean;
+  onClick?(evt: Event): void;
+}
+
+export const DialogCheckbox = Object.values(findModule((m: any) => {
+  if (typeof m !== 'object') return false;
+  for (const prop in m) {
+    if (m[prop]?.prototype?.GetPanelElementProps) return true;
+  }
+  return false;
+})).find((m: any) =>
+  m.contextType &&
+  m.prototype?.render.toString().includes('fallback:') &&
+  m?.prototype?.SetChecked &&
+  m?.prototype?.Toggle &&
+  m?.prototype?.GetPanelElementProps
+) as FC<DialogCheckboxProps>;
--- 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,12 +1,14 @@
-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;
+  noFocusRing?: boolean;
  onActivate?: (e: CustomEvent) => void;
  onCancel?: (e: CustomEvent) => void;
 }
@@ -17,4 +19,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,18 +1,67 @@
+import { ReactNode } from 'react';
+
+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,
+}
+export declare enum NavEntryPositionPreferences {
+  FIRST,
+  LAST,
+  MAINTAIN_X,
+  MAINTAIN_Y,
+  PREFERRED_CHILD
+}
+export interface GamepadEventDetail {
+  button: number;
+  is_repeat?: boolean;
+  source: number;
+}
+export declare type ActionDescriptionMap = {
+  [key in GamepadButton]?: ReactNode
+}
+export declare type GamepadEvent = CustomEvent<GamepadEventDetail>;
 export interface FooterLegendProps {
-    actionDescriptionMap?: unknown;
-    onOKActionDescription?: string;
-    onCancelActionDescription?: string;
-    onSecondaryActionDescription?: string;
-    onOptionsActionDescription?: string;
-    onMenuActionDescription?: string;
-    onButtonDown?: () => void;
-    onButtonUp?: () => void;
-    onOKButton?: () => void;
-    onCancelButton?: () => void;
-    onSecondaryButton?: () => void;
-    onOptionsButton?: () => void;
-    onGamepadDirection?: () => void;
-    onGamepadFocus?: () => void;
-    onGamepadBlur?: () => void;
-    onMenuButton?: () => void;
-}
+  actionDescriptionMap?: ActionDescriptionMap;
+  onOKActionDescription?: ReactNode;
+  onCancelActionDescription?: ReactNode;
+  onSecondaryActionDescription?: ReactNode;
+  onOptionsActionDescription?: ReactNode;
+  onMenuActionDescription?: ReactNode;
+  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/Marquee.tsx
+++ b/src/deck-components/Marquee.tsx
@@ -0,0 +1,26 @@
+import { CSSProperties, FC } from 'react';
+
+import { findModuleChild } from '../webpack';
+
+export interface MarqueeProps {
+  play?: boolean;
+  direction?: 'left' | 'right';
+  speed?: number;
+  delay?: number;
+  fadeLength?: number;
+  center?: boolean;
+  resetOnPause?: boolean;
+  style?: CSSProperties;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const Marquee: FC<MarqueeProps> = findModuleChild((m) => {
+  if (typeof m !== 'object') return;
+  for (const prop in m) {
+    if (m[prop]?.toString && m[prop].toString().includes('.Marquee') && m[prop].toString().includes('--fade-length')) {
+      return m[prop];
+    }
+  }
+  return;
+});
--- 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,10 +13,11 @@ export const showContextMenu: (children: ReactNode, parent?: EventTarget) => voi
  }
 });

-export interface MenuProps {
+export interface MenuProps extends FooterLegendProps {
  label: string;
  onCancel?(): void;
  cancelText?: string;
+  children?: ReactNode;
 }

 export const Menu: FC<MenuProps> = findModuleChild((m) => {
@@ -27,15 +30,47 @@ export const Menu: FC<MenuProps> = findModuleChild((m) => {
  }
 });

-export interface MenuItemProps {
-  onSelected?(): void;
+export interface MenuGroupProps {
+  label: string;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+export const MenuGroup: FC<MenuGroupProps> = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+
+  for (let prop in m) {
+    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 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;
 }

 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,9 +1,60 @@
 import { FC, ReactNode } from 'react';

-import { findModuleChild } from '../webpack';
+import { findSP } from '../utils';
+import { findModule, findModuleChild } from '../webpack';

-// TODO: there is another argument, figure out what it does
-export const showModal: (children: ReactNode, parent?: EventTarget) => void = findModuleChild((m) => {
+// All of the popout options + strTitle are related. Proper usage is not yet known...
+export interface ShowModalProps {
+  browserContext?: unknown; // This is another Deck Object that is yet to be found
+  bForcePopOut?: boolean;
+  bHideActionIcons?: boolean;
+  bHideMainWindowForPopouts?: boolean;
+  bNeverPopOut?: boolean;
+  fnOnClose?: () => void; // Seems to be the same as "closeModal" callback, but only when the modal is a popout. Will no longer work after "Update" invocation!
+  popupHeight?: number;
+  popupWidth?: number;
+  promiseRenderComplete?: Promise<void>; // Invoked once the render is complete. Currently, it seems to be used as image loading success/error callback...
+  strTitle?: string;
+}
+
+export interface ShowModalResult {
+  // This method will not invoke any of the variations of "closeModal" callbacks!
+  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:
+  //   <ModalRoot closeModal={() => { console.log("ABOUT TO CLOSE"); showModalRes.Close(); }} />
+  Update: (modal: ReactNode) => void;
+}
+
+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')) {
@@ -12,7 +63,27 @@ export const showModal: (children: ReactNode, parent?: EventTarget) => void = fi
  }
 });

+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;
  closeModal?(): void;
  onOK?(): void;
@@ -24,10 +95,18 @@ export interface ModalRootProps {
  bDisableBackgroundDismiss?: boolean;
  bHideCloseIcon?: boolean;
  bOKDisabled?: boolean;
+  bCancelDisabled?: boolean;
 }

 export interface ConfirmModalProps extends ModalRootProps {
-  onMiddleButton?(): void;
+  onMiddleButton?(): void; // setting this prop will enable the middle button
+  strTitle?: ReactNode;
+  strDescription?: ReactNode;
+  strOKButtonText?: ReactNode;
+  strCancelButtonText?: ReactNode;
+  strMiddleButtonText?: ReactNode;
+  bAlertDialog?: boolean; // This will open a modal with only OK button enabled
+  bMiddleDisabled?: boolean;
 }

 export const ConfirmModal = findModuleChild((m) => {
@@ -39,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,34 +57,44 @@ 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 MenuStore {
+  OpenSideMenu(sideMenu: SideMenu): void;
+  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
+  OpenMainMenu(): void;
+}
+
+export interface WindowRouter {
+  BrowserWindow: Window;
+  MenuStore: MenuStore;
+  Navigate(path: string): void;
+  NavigateToChat(): void;
+  NavigateToSteamWeb(url: string): void;
+  NavigateBack(): void;
+  NavigateToWebRoute(unknown?: any, unknown2?: any): void;
+}
+
+export interface WindowStore {
+  GamepadUIMainWindowInstance?: WindowRouter; // Current
+  SteamUIWindows: WindowRouter[];
+  OverlayWindows: WindowRouter[]; // Used by desktop GamepadUI
 }

 export interface Router {
+  WindowStore?: WindowStore;
  CloseSideMenus(): void;
-  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
-  GetQuickAccessTab(): QuickAccessTab;
  Navigate(path: string): void;
-  NavigateBackOrOpenMenu(): void;
-  NavigateToAppProperties(): void
-  NavigateToBugForum(): void
+  NavigateToAppProperties(): void;
  NavigateToExternalWeb(url: string): 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
-  ToggleSideMenu(sideMenu: SideMenu): void;
-  CloseSideMenus(): void;
-  OpenSideMenu(sideMenu: SideMenu): void;
+  NavigateToInvites(): void;
+  NavigateToChat(): void;
+  NavigateToLibraryTab(): void;
+  NavigateToLayoutPreview(e: unknown): void;
  OpenPowerMenu(unknown?: any): void;
  get RunningApps(): AppOverview[];
  get MainRunningApp(): AppOverview | undefined;
@@ -96,3 +106,51 @@ export const Router = findModuleChild((m: Module) => {
    if (m[prop]?.Navigate && m[prop]?.NavigationManager) return m[prop];
  }
 }) as Router;
+
+export interface Navigation {
+  Navigate(path: string): void;
+  NavigateBack(): void;
+  NavigateToAppProperties(): void;
+  NavigateToExternalWeb(url: string): void;
+  NavigateToInvites(): void;
+  NavigateToChat(): void;
+  NavigateToLibraryTab(): void;
+  NavigateToLayoutPreview(e: unknown): void;
+  NavigateToSteamWeb(url: string): void;
+  NavigateToWebRoute(unknown?: any, unknown2?: any): void;
+  OpenSideMenu(sideMenu: SideMenu): void;
+  OpenQuickAccessMenu(quickAccessTab?: QuickAccessTab): void;
+  OpenMainMenu(): void;
+  OpenPowerMenu(unknown?: any): void;
+  CloseSideMenus(): void;
+}
+
+export const Navigation = {
+  Navigate: Router.Navigate.bind(Router),
+  NavigateBack: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateBack.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance,
+  ),
+  NavigateToAppProperties: Router.NavigateToAppProperties.bind(Router),
+  NavigateToExternalWeb: Router.NavigateToExternalWeb.bind(Router),
+  NavigateToInvites: Router.NavigateToInvites.bind(Router),
+  NavigateToChat: Router.NavigateToChat.bind(Router),
+  NavigateToLibraryTab: Router.NavigateToLibraryTab.bind(Router),
+  NavigateToLayoutPreview: Router.NavigateToLayoutPreview.bind(Router),
+  NavigateToSteamWeb: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateToSteamWeb.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance,
+  ),
+  NavigateToWebRoute: Router.WindowStore?.GamepadUIMainWindowInstance?.NavigateToWebRoute.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance,
+  ),
+  OpenSideMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenSideMenu.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+  ),
+  OpenQuickAccessMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenQuickAccessMenu.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+  ),
+  OpenMainMenu: Router.WindowStore?.GamepadUIMainWindowInstance?.MenuStore.OpenMainMenu.bind(
+    Router.WindowStore.GamepadUIMainWindowInstance.MenuStore,
+  ),
+  CloseSideMenus: Router.CloseSideMenus.bind(Router),
+  OpenPowerMenu: Router.OpenPowerMenu.bind(Router),
+} as Navigation;
--- a/src/deck-components/SidebarNavigation.tsx
+++ b/src/deck-components/SidebarNavigation.tsx
@@ -2,17 +2,25 @@ import { ReactNode, VFC } from 'react';

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

-export interface SidebarNavigationPages {
+export interface SidebarNavigationPage {
  title: string;
-  route: string;
  content: ReactNode;
+  icon?: ReactNode;
+  visible?: boolean;
+  hideTitle?: boolean;
+  identifier?: string;
+  route?: string;
+  link?: string;
+  padding?: 'none' | 'compact';
 }

 export interface SidebarNavigationProps {
  title?: string;
-  pages: SidebarNavigationPages[];
+  pages: SidebarNavigationPage[];
  showTitle?: boolean;
  disableRouteReporting?: boolean;
+  page?: string;
+  onPageRequested?: (page: string) => void;
 }

 export const SidebarNavigation = findModuleChild((mod: Module) => {
--- 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
@@ -0,0 +1,134 @@
+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
+ *
+ * `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;
+}
+
+/**
+ * Props for the {@link Tabs}
+ *
+ * `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: (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 =
+  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
@@ -1,11 +1,15 @@
 export * from './Button';
 export * from './ButtonItem';
 export * from './Carousel';
+export * from './ControlsList';
+export * from './Dialog';
+export * from './DialogCheckbox';
 export * from './Dropdown';
 export * from './Field';
 export * from './Focusable';
 export * from './FocusRing';
 export * from './FooterLegend';
+export * from './Marquee';
 export * from './Menu';
 export * from './Modal';
 export * from './Panel';
@@ -16,6 +20,14 @@ export * from './SliderField';
 export * from './Spinner';
 export * from './static-classes';
 export * from './SteamSpinner';
+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
@@ -1,6 +1,6 @@
 import { findModule } from '../webpack';

-type StaticClasses = Record<
+type QuickAccessMenuClasses = Record<
  | 'ActiveTab'
  | 'AllTabContents'
  | 'BatteryDetailsLabels'
@@ -63,13 +63,7 @@ type StaticClasses = Record<
  string
 >;

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

 type GamepadDialogClasses = Record<
  | 'duration-app-launch'
@@ -166,150 +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
 >;

-export const staticClasses: StaticClasses = findModule((mod) => typeof mod === 'object' && mod.TransitionMenuDelay);
-export const scrollClasses: ScrollClasses = findModule((mod) => typeof mod === 'object' && mod.ScrollPanel && mod.ScrollY);
-export const gamepadDialogClasses: GamepadDialogClasses = findModule((mod) => typeof mod === 'object' && mod.WithFirstRow);
-export const quickAccessControlsClasses: QuickAccessControlsClasses = findModule((mod) => typeof mod === 'object' && mod.PanelSectionRow);
-export const updaterFieldClasses: UpdaterFieldClasses = findModule((mod) => typeof mod === 'object' && mod.PatchNotes && mod.PostedTime);
-export const playSectionClasses: PlaySectionClasses = findModule((mod) => typeof mod === 'object' && mod.MenuButton && mod.MenuActive);
+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',
+  string
+>;
+
+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'),
+);
+/**
+ * @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 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
@@ -0,0 +1 @@
+export * from './useParams';
--- a/src/deck-hooks/useParams.ts
+++ b/src/deck-hooks/useParams.ts
@@ -0,0 +1,15 @@
+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;
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,8 @@
 // export * from './deck-libs';
 export * from './custom-components';
+export * from './custom-hooks';
 export * from './deck-components';
+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,12 @@ export interface ToastData {
  icon?: ReactNode;
  className?: string;
  contentClassName?: string;
-  duration?: number
-  critical?: boolean
+  duration?: number;
+  critical?: boolean;
+  eType?: number;
+  sound?: number;
+  playSound?: boolean;
+  showToast?: boolean;
 }

 export interface Toaster {
@@ -53,7 +60,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,22 @@
-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)
+  const context = FocusNavController.m_ActiveContext || FocusNavController.m_LastActiveContext;
+  return context.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) {
--- a/typedoc.json
+++ b/typedoc.json
@@ -0,0 +1,5 @@
+{
+    "githubPages": false,
+    "categorizeByGroup": false,
+    "excludeExternals": true
+}
Author	SHA1	Message	Date
semantic-release-bot	dc196d53f5	chore(release): 3.18.3 [CI SKIP]	2022-12-12 23:49:39 +00:00
Beebles	f0379e5d19	fix(Router): update Router interface to SteamOS3.4 and add Navigation (#52 )	2022-12-12 18:48:52 -05:00
semantic-release-bot	ef6be8c6ec	chore(release): 3.18.2 [CI SKIP]	2022-12-11 20:12:52 +00:00
Lukas Senionis	767dc2fcee	fix(useQuickAccessVisible): remove invalid prop access (#66 )	2022-12-11 15:12:22 -05:00
semantic-release-bot	52305987c5	chore(release): 3.18.1 [CI SKIP]	2022-12-11 20:02:11 +00:00
Lukas Senionis	6f14da152a	fix(findSP): fallback to last active context (#53 )	2022-12-11 15:01:41 -05:00
semantic-release-bot	bb291b211c	chore(release): 3.18.0 [CI SKIP]	2022-12-11 15:10:33 +00:00
Jozen Blue Martinez	88f245d476	feat(DialogCheckbox): Add DialogCheckbox component (#58 ) * feat(DialogCheckbox): Add DialogCheckbox component * fix(DialogCheckbox): Better sibling match * fix(DialogCheckbox): Extend FocusableProps * fix(DialogCheckbox): Extend FooterLegendProps i should have probably tested that * feat(DialogCheckbox): add onClick() prop * fix(DialogCheckbox): replace default export with named export	2022-12-11 16:10:01 +01:00
semantic-release-bot	5bc78df918	chore(release): 3.17.0 [CI SKIP]	2022-12-11 15:08:02 +00:00
Jozen Blue Martinez	c586afb97d	feat(ControlsList): Add ControlsList component (#61 ) * feat(ControlsList): Add ControlsList component * fix(ControlsList): replace default export with named export	2022-12-11 16:07:31 +01:00
semantic-release-bot	d9150c2556	chore(release): 3.16.2 [CI SKIP]	2022-12-11 14:48:15 +00:00
Jonas Dellinger	cd0635e94f	fix(Marquee): replace default export with named export	2022-12-11 15:47:39 +01:00
semantic-release-bot	443c7850d7	chore(release): 3.16.1 [CI SKIP]	2022-12-11 14:46:16 +00:00
Jozen Blue Martinez	d24136ecb6	fix(FooterLegend): change description types to ReactNode (#62 )	2022-12-11 15:45:40 +01:00
semantic-release-bot	55507446cc	chore(release): 3.16.0 [CI SKIP]	2022-12-11 14:45:21 +00:00
Jozen Blue Martinez	925ea8c3ce	feat(Marquee): Add Marquee component (#63 )	2022-12-11 15:44:50 +01:00
semantic-release-bot	14c5210931	chore(release): 3.15.0 [CI SKIP]	2022-12-11 14:18:49 +00:00
Jozen Blue Martinez	cc29ddaf57	feat(Focusable): add noFocusRing prop type (#65 )	2022-12-11 15:18:07 +01:00
semantic-release-bot	1e8979b641	chore(release): 3.14.0 [CI SKIP]	2022-12-10 00:14:13 +00:00
jurassicplayer	7ba1229a4e	feat(toast): add showToast/playSound to ToastData (#64 )	2022-12-09 19:13:37 -05:00
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
semantic-release-bot	245dd0f3cf	chore(release): 3.5.2 [CI SKIP]	2022-10-08 02:22:06 +00:00
AAGaming	7161e757e9	fix(Tabs): make onShowTab required	2022-10-07 22:21:30 -04:00
semantic-release-bot	c60d1e9787	chore(release): 3.5.1 [CI SKIP]	2022-10-08 02:11:59 +00:00
AAGaming	0e0e0d204a	fix(Tabs): actually export it lmao	2022-10-07 22:11:23 -04:00
semantic-release-bot	e5120928d3	chore(release): 3.5.0 [CI SKIP]	2022-10-08 02:04:42 +00:00
AAGaming	abbd3cddae	feat(Tabs): initial tabs component, props, docs	2022-10-07 22:04:02 -04:00
semantic-release-bot	621e47c6a0	chore(release): 3.4.0 [CI SKIP]	2022-10-06 01:43:25 +00:00
OMGDuke	e2920dd91e	feat(hooks): Added useParams hook (#36 )	2022-10-05 21:42:54 -04:00
semantic-release-bot	67a76e2691	chore(release): 3.3.5 [CI SKIP]	2022-10-02 16:38:31 +00:00
AAGaming	0f205e8916	fix(docs): set categorizeByGroup to true	2022-10-02 12:37:45 -04:00
semantic-release-bot	472307e4a4	chore(release): 3.3.4 [CI SKIP]	2022-10-02 16:34:00 +00:00
AAGaming	fbd936dc1f	fix(docs): build each component as a seperate page	2022-10-02 12:33:20 -04:00
AAGaming	33dd4e5548	chore(docs): initial typedoc setup (#35 )	2022-10-02 12:22:58 -04:00
semantic-release-bot	4b76ccd91a	chore(release): 3.3.3 [CI SKIP]	2022-10-02 12:36:26 +00:00
Lukas Senionis	99ad7543a9	fix(modal): make children optional (#34 )	2022-10-02 08:36:00 -04:00
semantic-release-bot	b5dc08a977	chore(release): 3.3.2 [CI SKIP]	2022-10-02 02:31:09 +00:00
AAGaming	40871af853	fix(modal): allow children	2022-10-01 22:30:33 -04:00
Lukas Senionis	c910dbde79	Add dialog components (#22 )	2022-10-01 21:41:47 -04:00
Lukas Senionis	4cbb30c21c	Add custom-hook: useQuickAccessVisible (#28 )	2022-10-01 21:38:46 -04:00
semantic-release-bot	54a1ef6201	chore(release): 3.3.1 [CI SKIP]	2022-10-02 01:33:33 +00:00
Barend Du Toit	ed0be5e87e	fix(SidebarNavigation): add more props (#29 )	2022-10-01 21:33:02 -04:00
Travis Lane	a064163b49	updated static-classes (#26 )	2022-10-01 21:32:23 -04:00
semantic-release-bot	0b4fcb8d49	chore(release): 3.3.0 [CI SKIP]	2022-10-02 01:31:47 +00:00
Barend Du Toit	4233128c7e	feat(Menu): add nested menu groups + more props (#30 )	2022-10-01 21:31:18 -04:00
TrainDoctor	43cb2726d8	chore(license): remove un-needed exceptions	2022-09-30 21:50:23 -07:00
TrainDoctor	5d9c506fe7	Update package.json	2022-09-30 21:48:33 -07: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
semantic-release-bot	35a061759a	chore(release): 3.2.2 [CI SKIP]	2022-09-29 16:36:04 +00:00
Lukas Senionis	1fbe55aa54	fix(modal): extend props for modals (#32 )	2022-09-29 12:34:00 -04: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
semantic-release-bot	66eb0cbbf3	chore(release): 3.2.1 [CI SKIP]	2022-09-24 17:49:57 +00:00
Lukas Senionis	6996e5424f	fix(modal): update showModal types (#27 )	2022-09-24 13:49:23 -04: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
Travis Lane	ad643836f0	updated DialogButton props and added nav pref enum (#25 )	2022-09-22 17:50:07 -04:00
semantic-release-bot	b39ba26b28	chore(release): 3.2.0 [CI SKIP]	2022-09-20 21:37:13 +00:00
AAGaming	130dfa24c5	feat(FooterLegend): add GamepadEvent	2022-09-20 17:36:16 -04:00
Martmists	71babc82c8	Add ColorPickerModal to exports (#24 )	2022-09-20 08:46:37 -04:00
semantic-release-bot	bb440deed6	chore(release): 3.1.4 [CI SKIP]	2022-09-19 21:33:33 +00:00
TrainDoctor	064c161b67	fix(License): update license in package.json	2022-09-19 14:32:37 -07:00
TrainDoctor	6abf0efc10	Update package.json	2022-09-19 14:30:08 -07:00
TrainDoctor	537b8301ec	Add license exception for static linking	2022-09-18 14:31:18 -07:00
Beebles	2ae87da37a	Add ColorPickerModal component (with issues fixed) to custom-components (#21 )	2022-09-18 17:03:00 -04:00
semantic-release-bot	0d248f3987	chore(release): 3.1.3 [CI SKIP]	2022-09-18 19:38:35 +00:00
AAGaming	74aefc7b3c	fix(DialogButton): fix ref type	2022-09-18 15:37:46 -04:00
semantic-release-bot	16ec1e3d2e	chore(release): 3.1.2 [CI SKIP]	2022-09-18 19:18:58 +00:00
AAGaming	db41e74cf9	fix(DialogButton): fix types, add ref types	2022-09-18 15:17:56 -04:00
semantic-release-bot	6441bde835	chore(release): 3.1.1 [CI SKIP]	2022-09-18 19:02:37 +00:00
AAGaming	29201fadaf	fix(Button): add types to DialogButton also remove useless Button component.	2022-09-18 15:01:44 -04:00