Decky Frontend Library

https://github.com/steamdeckhomebrew/decky-frontend-lib
Admin
A React component library for developing plugins for Decky Loader on Steam Deck, providing custom UI...
Tokens:160,976
Snippets:693
Trust Score:7.1
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Installs Interface

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-library.md

The Installs interface provides methods to manage game installations, including canceling, continuing, opening wizards, and registering for events.

```APIDOC
## Installs Interface

### Description
Provides methods to control installation processes, open install/uninstall wizards, set installation options, and register for installation-related events.

### Methods

#### CancelInstall()
- **Signature**: `CancelInstall(): void`
- **Description**: Cancels the current installation process.

#### ContinueInstall()
- **Signature**: `ContinueInstall(): void`
- **Description**: Continues the current installation process.

#### GetInstallManagerInfo()
- **Signature**: `GetInstallManagerInfo(): Promise<InstallMgrInfo>`
- **Description**: Retrieves information about the current installation manager state.
- **Returns**: `Promise<InstallMgrInfo>` - The installation manager information.

#### OpenInstallBackup(appBackupPath: string)
- **Signature**: `OpenInstallBackup(appBackupPath: string): void`
- **Parameters**:
  - `appBackupPath` (string) - Required - The path to the backup file to restore from.
- **Description**: Opens the restore from backup wizard.

#### OpenInstallWizard(appIds: number[])
- **Signature**: `OpenInstallWizard(appIds: number[]): void`
- **Parameters**:
  - `appIds` (number[]) - Required - Array of app IDs to install.
- **Description**: Opens the install wizard for the specified app IDs.

#### OpenUninstallWizard(appIds: number[], dontPrompt: boolean)
- **Signature**: `OpenUninstallWizard(appIds: number[], dontPrompt: boolean): void`
- **Parameters**:
  - `appIds` (number[]) - Required - Array of app IDs to uninstall.
  - `dontPrompt` (boolean) - Required - If true, do not prompt for confirmation.
- **Description**: Opens the uninstall wizard for the specified app IDs.

#### RegisterForShowConfirmUninstall
- **Signature**: `RegisterForShowConfirmUninstall: Unregisterable`
- **Description**: Registers a callback for showing confirm uninstall dialog. Note: "Broken? doesn't seem to work"

#### RegisterForShowFailedUninstall(callback: (appId: number, reason: EAppUpdateError) => void)
- **Signature**: `RegisterForShowFailedUninstall(callback: (appId: number, reason: EAppUpdateError) => void): Unregisterable`
- **Parameters**:
  - `callback` (function) - Required - Callback invoked with the app ID and error reason when an uninstall fails.
- **Description**: Registers a callback for when an uninstall fails.

#### RegisterForShowInstallWizard(callback: (data: InstallMgrInfo) => void)
- **Signature**: `RegisterForShowInstallWizard(callback: (data: InstallMgrInfo) => void): Unregisterable`
- **Parameters**:
  - `callback` (function) - Required - Callback invoked with the install manager info when the install wizard is shown.
- **Description**: Registers a callback for when the install wizard is shown.

#### RegisterForShowRegisterCDKey
- **Signature**: `RegisterForShowRegisterCDKey: any`
- **Description**: Registers a callback for showing CD key registration.

#### SetAppList(appIds: number[])
- **Signature**: `SetAppList(appIds: number[]): void`
- **Parameters**:
  - `appIds` (number[]) - Required - Array of app IDs to set in the list.
- **Description**: Sets the list of apps for the wizard. Note: wizard won't reflect until another option changes.

#### SetCreateShortcuts(bDesktopShortcut: boolean, bSystemMenuShortcut: boolean)
- **Signature**: `SetCreateShortcuts(bDesktopShortcut: boolean, bSystemMenuShortcut: boolean): void`
- **Parameters**:
  - `bDesktopShortcut` (boolean) - Required - Whether to create a desktop shortcut.
  - `bSystemMenuShortcut` (boolean) - Required - Whether to create a system menu shortcut.
- **Description**: Sets whether to create desktop and system menu shortcuts.

#### SetInstallFolder(folderIndex: number)
- **Signature**: `SetInstallFolder(folderIndex: number): void`
- **Parameters**:
  - `folderIndex` (number) - Required - Index of the install folder.
- **Description**: Sets the install folder by index.

### Types

#### InstallMgrInfo
- **Properties**:
  - `rgAppIDs` (InstallInfoApps[]) - Array of app install info.
  - `eInstallState` (EInstallMgrState) - Current install state.
  - `nDiskSpaceRequired` (number) - Required disk space in bytes.
  - `nDiskSpaceAvailable` (number) - Available disk space in bytes.
  - `nCurrentDisk` (number) - Current disk index.
  - `nTotalDisks` (number) - Total number of disks.
  - `bCanChangeInstallFolder` (boolean) - Whether install folder can be changed.
  - `iInstallFolder` (number) - Current install folder index.
  - `iUnmountedFolder` (number) - Unmounted folder index.
  - `currentAppID` (number) - Current app ID.
  - `eAppError` (EAppUpdateError) - App update error.
  - `errorDetail` (string) - Error detail.
  - `bSystemMenuShortcut` (boolean) - Whether system menu shortcut is enabled.
  - `bDesktopShortcut` (boolean) - Whether desktop shortcut is enabled.
  - `bIsBackupInstall` (boolean) - Whether this is a backup install.
  - `strPeerContentServer` (string) - Peer content server address.
  - `bPeerContentServerOnline` (boolean) - Whether peer content server is online.
  - `bPeerContentServerAvailable` (boolean) - Whether peer content server is available.

#### InstallInfoApps
- **Properties**:
  - `nAppID` (number) - App ID.
  - `lDiskSpaceRequiredBytes` (number) - Disk space required in bytes.

#### EInstallMgrState
- **Enum values**: `None`, `Setup`, `WaitLicense`, `FreeLicense`, `ShowCDKey`, `WaitAppInfo`, `ShowPassword`, `ShowConfig`, `ShowEULAs`, `CreateApps`, `ReadFromMedia`, `ShowChangeMedia`, `WaitLegacyCDKeys`, `ShowSignup`, `Complete`, `Failed`, `Canceled`
```

--------------------------------

### SteamClient.Apps usage example

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-apps.md

TypeScript example showing how to add a non-Steam shortcut, read back its details, watch for overview changes, and launch the app with a source flag. Uses imports from '@decky/ui' and the ELaunchSource enum.

```typescript
import { SteamClient } from '@decky/ui';
import type { SteamAppOverview, AppDetails } from '@decky/ui';

// Add a non-Steam shortcut & read it back
const appId = await SteamClient.Apps.AddShortcut('My Tool', '/usr/bin/mytool', '/home/me', '--flag');
const details = await SteamClient.Apps.GetCachedAppDetails(appId);
console.log(details);

// Watch for overview changes (protobuf ArrayBuffer)
const unreg = SteamClient.Apps.RegisterForAppDetails(appId, (data: AppDetails) => {
  console.log('display name:', data.strDisplayName, 'status:', data.eDisplayStatus);
});
// later: unreg.unregister();

// Launch with a source flag
import { ELaunchSource } from '@decky/ui';
SteamClient.Apps.RunGame(String(appId), '', 0, ELaunchSource._2ftLibraryDetails);
```

--------------------------------

### SteamClient API usage example

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-library.md

Shows how to use the SteamClient API from @decky/ui for common tasks: monitoring download queue, managing install folders, storing key/value pairs in localconfig.vdf, creating a server list request, and setting remote play volume. Each call is async and returns promises or registers callbacks as shown.

```ts
import { SteamClient } from '@decky/ui';
import type { DownloadOverview, DownloadItem, GameServer } from '@decky/ui';

// Queue monitoring
SteamClient.Downloads.RegisterForDownloadOverview((o: DownloadOverview) => {
  console.log(`${o.update_appid}: ${o.update_bytes_downloaded}/${o.update_bytes_to_download} bytes, state=${o.update_state}`);
});

// Library folders
const folders = await SteamClient.InstallFolder.GetInstallFolders();
const idx = await SteamClient.InstallFolder.AddInstallFolder('/run/media/mmcblk0p1/SteamLibrary');
console.log('new folder index', idx);

// Key/value storage (localconfig.vdf)
await SteamClient.Storage.SetString('decky.demo', 'hello');
const v = await SteamClient.Storage.GetString('decky.demo');
if (typeof v === 'string') console.log(v);

// Server browser
const requestId = await SteamClient.ServerBrowser.CreateServerListRequest(
  730, 'internet', [],
  (server: GameServer) => console.log(server.name, server.players, server.maxPlayers),
  (resp) => console.log('done', resp),
);

// Remote play volume
await SteamClient.RemotePlay.SetGameSystemVolume(40);
```

--------------------------------

### SteamClient usage example with BrowserView, URL, and Window

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-browser.md

Usage example for SteamClient: creating a browser view, setting bounds, listening to events, loading a URL, destroying the view, fetching Steam URLs, and moving the window. Demonstrates the API calls with @decky/ui imports.

```ts
import { SteamClient } from '@decky/ui';
import type { BrowserViewPopup } from '@decky/ui';

// Create and manage a browser view
const bv: BrowserViewPopup = SteamClient.BrowserView.Create({ strInitialURL: 'https://deckbrew.xyz' });
bv.SetBounds(0, 0, 800, 600);
bv.on('set-title', (title) => console.log('title:', title));
bv.on('load-error', (code, url, desc) => console.error('load failed', code, url, desc));
bv.LoadURL('https://example.org/');
// cleanup
SteamClient.BrowserView.Destroy(bv);

// Steam URLs
const urls = await SteamClient.URL.GetSteamURLList(['StoreFrontPage', 'CommunityHome']);
console.log(urls.StoreFrontPage.url);

// Window moves
await SteamClient.Window.MoveToLocation('upper-right', 20);
```

--------------------------------

### Usage Example for Module Lookup

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/webpack.md

Demonstrates how to use findModuleByExport to locate specific functions and createModuleMapping to map modules based on exported keys.

```tsx
import { findModuleByExport, CommonUIModule, createModuleMapping } from '@decky/ui';
import type { Module } from '@decky/ui';

// Find any module export whose name lookup works on a prop list
const myComponent = findModuleByExport((e) => typeof e === 'function' && /onOKButton/.test(e.toString?.() ?? ''));

// Map every module that exports an object with a "PanelSection" key
const sections = createModuleMapping((m: Module) => typeof m === 'object' && m.PanelSection);
```

--------------------------------

### Steam Client Installs API Types

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-library.md

TypeScript interfaces and enum for the Steam client install manager. The Installs interface exposes methods to control installs, including CancelInstall, ContinueInstall, OpenInstallWizard, and SetInstallFolder. InstallMgrInfo provides detailed install state and disk information. EInstallMgrState enumerates the possible install states.

```ts
export interface Installs {
    CancelInstall(): void;
    ContinueInstall(): void;
    GetInstallManagerInfo(): Promise<InstallMgrInfo>;
    OpenInstallBackup(appBackupPath: string): void; // restore from backup wizard
    OpenInstallWizard(appIds: number[]): void;
    OpenUninstallWizard(appIds: number[], dontPrompt: boolean): void;
    RegisterForShowConfirmUninstall: Unregisterable; // "Broken? doesn't seem to work"
    RegisterForShowFailedUninstall(callback: (appId: number, reason: EAppUpdateError) => void): Unregisterable;
    RegisterForShowInstallWizard(callback: (data: InstallMgrInfo) => void): Unregisterable;
    RegisterForShowRegisterCDKey: any;
    SetAppList(appIds: number[]): void;       // wizard won't reflect until another option changes
    SetCreateShortcuts(bDesktopShortcut: boolean, bSystemMenuShortcut: boolean): void;
    SetInstallFolder(folderIndex: number): void;
}
```

```ts
export interface InstallMgrInfo {
  rgAppIDs: InstallInfoApps[]; eInstallState: EInstallMgrState; nDiskSpaceRequired: number; nDiskSpaceAvailable: number;
  nCurrentDisk: number; nTotalDisks: number; bCanChangeInstallFolder: boolean; iInstallFolder: number; iUnmountedFolder: number;
  currentAppID: number; eAppError: EAppUpdateError; errorDetail: string; bSystemMenuShortcut: boolean; bDesktopShortcut: boolean;
  bIsBackupInstall: boolean; strPeerContentServer: string; bPeerContentServerOnline: boolean; bPeerContentServerAvailable: boolean;
}
```

```ts
export interface InstallInfoApps { nAppID: number; lDiskSpaceRequiredBytes: number; }
```

```ts
export enum EInstallMgrState { None, Setup, WaitLicense, FreeLicense, ShowCDKey, WaitAppInfo, ShowPassword, ShowConfig, ShowEULAs, CreateApps, ReadFromMedia, ShowChangeMedia, WaitLegacyCDKeys, ShowSignup, Complete, Failed, Canceled }
```

--------------------------------

### InstallFolder Interface Definition

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-library.md

Defines the structure and methods available for managing Steam installation folders, including interfaces for folder details, app information, and progress tracking.

```ts
export interface InstallFolder {
    AddInstallFolder(path: string): Promise<number>; // returns index
    BrowseFilesInFolder(folderIndex: number): void;
    CancelMove(): void;
    GetInstallFolders(): Promise<SteamInstallFolder[]>;
    GetPotentialFolders(): Promise<PotentialInstallFolder[]>;
    MoveInstallFolderForApp(appId: number, folderIndex: number): void;
    RefreshFolders(): void;
    RegisterForInstallFolderChanges(callback: (change: FolderChange) => void): Unregisterable;
    RegisterForMoveContentProgress(callback: (progress: MoveContentProgress) => void): Unregisterable;
    RegisterForRepairFolderFinished(callback: (change: FolderChange) => void): Unregisterable;
    RemoveInstallFolder(folderIndex: number): void;
    RepairInstallFolder(folderIndex: number): void;
    SetDefaultInstallFolder(folderIndex: number): void;
    SetFolderLabel(folderIndex: number, label: string): void;
}

export interface SteamInstallFolder extends PotentialInstallFolder {
  nFolderIndex: number; strUsedSize: string; strDLCSize: string; strWorkshopSize: string; strStagedSize: string;
  bIsDefaultFolder: boolean; bIsMounted: boolean; vecApps: AppInfo[];
}
export interface PotentialInstallFolder {
  strFolderPath: string; strUserLabel: string; strDriveName: string; strCapacity: string; strFreeSpace: string; bIsFixed: boolean;
}
export interface AppInfo { nAppID: number; strAppName: string; strSortAs: string; rtLastPlayed: number; strUsedSize: string; strDLCSize: string; strWorkshopSize: string; strStagedSize: string; }
export interface FolderChange { folderIndex: number; }
export interface MoveContentProgress { appid: number; eError: EAppUpdateError; flProgress: number; strBytesMoved: string; strTotalBytesToMove: string; nFilesMoved: number; }
```

--------------------------------

### InstallFolder Interface

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-library.md

The InstallFolder interface exposes methods for managing Steam installation folders. It includes operations to add, remove, move, repair, and set default folders, as well as browsing files and registering for change and progress events.

```APIDOC
## InstallFolder Interface

### Description
Provides methods to manage Steam installation folders, including adding, removing, moving, repairing, and setting default folders, as well as browsing files and registering for change and progress events.

### Methods

#### AddInstallFolder(path: string): Promise<number>
- **Description**: Adds a new installation folder at the given path and returns the index of the new folder.
- **Parameters**:
  - `path` (string) - Required - The filesystem path of the folder to add.
- **Returns**: Promise<number> - The index of the newly added folder.

#### BrowseFilesInFolder(folderIndex: number): void
- **Description**: Opens a file browser for the specified installation folder.
- **Parameters**:
  - `folderIndex` (number) - Required - The index of the folder to browse.

#### CancelMove(): void
- **Description**: Cancels any ongoing move operation for an installation folder.

#### GetInstallFolders(): Promise<SteamInstallFolder[]>
- **Description**: Retrieves the list of current Steam installation folders.
- **Returns**: Promise<SteamInstallFolder[]> - An array of SteamInstallFolder objects.

#### GetPotentialFolders(): Promise<PotentialInstallFolder[]>
- **Description**: Retrieves a list of potential installation folders (e.g., drives that could be used).
- **Returns**: Promise<PotentialInstallFolder[]> - An array of PotentialInstallFolder objects.

#### MoveInstallFolderForApp(appId: number, folderIndex: number): void
- **Description**: Moves the installation folder for a specific app to the target folder index.
- **Parameters**:
  - `appId` (number) - Required - The app ID whose folder is to be moved.
  - `folderIndex` (number) - Required - The index of the destination folder.

#### RefreshFolders(): void
- **Description**: Refreshes the list of installation folders.

#### RegisterForInstallFolderChanges(callback: (change: FolderChange) => void): Unregisterable
- **Description**: Registers a callback to be invoked when installation folder changes occur.
- **Parameters**:
  - `callback` (function) - Required - A function that receives a FolderChange object.
- **Returns**: Unregisterable - An object to unregister the callback.

#### RegisterForMoveContentProgress(callback: (progress: MoveContentProgress) => void): Unregisterable
- **Description**: Registers a callback to be invoked when move content progress updates.
- **Parameters**:
  - `callback` (function) - Required - A function that receives a MoveContentProgress object.
- **Returns**: Unregisterable - An object to unregister the callback.

#### RegisterForRepairFolderFinished(callback: (change: FolderChange) => void): Unregisterable
- **Description**: Registers a callback to be invoked when a folder repair operation finishes.
- **Parameters**:
  - `callback` (function) - Required - A function that receives a FolderChange object.
- **Returns**: Unregisterable - An object to unregister the callback.

#### RemoveInstallFolder(folderIndex: number): void
- **Description**: Removes the installation folder at the specified index.
- **Parameters**:
  - `folderIndex` (number) - Required - The index of the folder to remove.

#### RepairInstallFolder(folderIndex: number): void
- **Description**: Repairs the installation folder at the specified index.
- **Parameters**:
  - `folderIndex` (number) - Required - The index of the folder to repair.

#### SetDefaultInstallFolder(folderIndex: number): void
- **Description**: Sets the default installation folder to the specified index.
- **Parameters**:
  - `folderIndex` (number) - Required - The index of the folder to set as default.

#### SetFolderLabel(folderIndex: number, label: string): void
- **Description**: Sets a custom label for the installation folder at the specified index.
- **Parameters**:
  - `folderIndex` (number) - Required - The index of the folder.
  - `label` (string) - Required - The new label for the folder.

### Related Types

#### SteamInstallFolder
- **Description**: Represents a Steam installation folder with additional metadata.
- **Properties**:
  - `nFolderIndex` (number) - The index of the folder.
  - `strUsedSize` (string) - Used size string.
  - `strDLCSize` (string) - DLC size string.
  - `strWorkshopSize` (string) - Workshop size string.
  - `strStagedSize` (string) - Staged size string.
  - `bIsDefaultFolder` (boolean) - Whether this is the default folder.
  - `bIsMounted` (boolean) - Whether the folder is mounted.
  - `vecApps` (AppInfo[]) - Array of AppInfo objects.

#### PotentialInstallFolder
- **Description**: Represents a potential installation folder (e.g., a drive).
- **Properties**:
  - `strFolderPath` (string) - The folder path.
  - `strUserLabel` (string) - User-defined label.
  - `strDriveName` (string) - Drive name.
  - `strCapacity` (string) - Capacity string.
  - `strFreeSpace` (string) - Free space string.
  - `bIsFixed` (boolean) - Whether the drive is fixed.

#### AppInfo
- **Description**: Represents information about an app installed in a folder.
- **Properties**:
  - `nAppID` (number) - The app ID.
  - `strAppName` (string) - The app name.
  - `strSortAs` (string) - Sort key.
  - `rtLastPlayed` (number) - Last played timestamp.
  - `strUsedSize` (string) - Used size string.
  - `strDLCSize` (string) - DLC size string.
  - `strWorkshopSize` (string) - Workshop size string.
  - `strStagedSize` (string) - Staged size string.

#### FolderChange
- **Description**: Represents a change event for an installation folder.
- **Properties**:
  - `folderIndex` (number) - The index of the folder that changed.

#### MoveContentProgress
- **Description**: Represents progress of a move content operation.
- **Properties**:
  - `appid` (number) - The app ID being moved.
  - `eError` (EAppUpdateError) - Error code.
  - `flProgress` (number) - Progress fraction (0-1).
  - `strBytesMoved` (string) - Bytes moved string.
  - `strTotalBytesToMove` (string) - Total bytes to move string.
  - `nFilesMoved` (number) - Number of files moved.
```

--------------------------------

### Decky UI Components and Hooks Usage

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/custom.md

Examples showing the implementation of image fallbacks, color picker modals, reorderable lists, quick access visibility tracking, and router parameter retrieval.

```tsx
import { SuspensefulImage, ColorPickerModal, ReorderableList, useQuickAccessVisible, useParams, showModal } from '@decky/ui';
import type { ReorderableEntry } from '@decky/ui';
import { useEffect } from 'react';

// Image with fallback
<SuspensefulImage src="https://example.com/art.png" suspenseWidth="200px" suspenseHeight="200px" />;

// Color picker in a modal
showModal(
  <ColorPickerModal title="Theme color" defaultH={210} defaultS={80} defaultL={60}
    onConfirm={(hsl) => applyColor(hsl)}
    closeModal={() => close()} />,
);

// Reorderable settings list
const [entries, setEntries] = useState<ReorderableEntry<string>[]>([
  { label: 'First', data: 'a', position: 0 },
  { label: 'Second', data: 'b', position: 1 },
]);
<ReorderableList entries={entries} onSave={(saved) => persist(saved)} animate fieldProps={{ label: undefined }} />;

// QA visibility
const visible = useQuickAccessVisible();
useEffect(() => { if (visible) console.log('QA open'); }, [visible]);

// Router params
const params = useParams<{ appid: string }>();
console.log(params.appid);
```

--------------------------------

### Customization, CommunityItems, and Cloud interfaces

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-media.md

Customization interface handles startup movies: generating thumbnails, getting downloaded/local movies. CommunityItems manages item asset downloads and paths. Cloud resolves app sync conflicts and retries sync.

```typescript
// Customization.ts
export interface Customization {
    GenerateLocalStartupMoviesThumbnails(param0: number): Promise<number>;
    GetDownloadedStartupMovies(param0: string): Promise<StartupMovie[]>; // param0: "startupmovies"
    GetLocalStartupMovies(): Promise<StartupMovie[]>;
}
export interface StartupMovie { strMovieURL: string; }

// CommunityItems.ts
export interface CommunityItems {
    DownloadItemAsset(communityItemId: string, param1: any, param2: string): any;
    GetItemAssetPath(communityItemId: string, param1: any, param2: string): any;
    RemoveDownloadedItemAsset(communityItemId: string, param1: any, param2: string): any;
}

// Cloud.ts
export interface Cloud {
    ResolveAppSyncConflict(appId: number, keepLocal: boolean): void;
    RetryAppSync(appId: number): void;
}
```

--------------------------------

### Example usage of log, warn, error, and Logger

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/logger.md

Demonstrates importing standalone functions and the Logger class, creating a namespaced logger, and using log, warn, and error methods. Note that Logger must be imported from the source module path, not the package root.

```TypeScript
import { log, warn, error } from '@decky/ui';
import Logger from './src/logger'; // module-local import only

const logger = new Logger('MyPlugin');
logger.log('Initializing');
logger.warn('Deprecated call path used');
try {
  riskyCall();
} catch (e) {
  logger.error('riskyCall failed', e);
  error('MyPlugin', 'top-level error', e);
}
```

--------------------------------

### Using SteamClient global with @decky/ui

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client.md

Shows how to use the global SteamClient object from @decky/ui. It retrieves install folders, attempts a cached sign-in and checks the EResult, and registers a voice chat status callback that must be unregistered.

```ts
import { SteamClient as SteamClientType } from '@decky/ui'; // type-only for the global
import { EResult } from '@decky/ui';

async function example() {
  const folders = await SteamClient.InstallFolder.GetInstallFolders();
  console.log(folders.map((f) => f.strFolderPath));

  const res = await SteamClient.Auth.StartSignInFromCache('myAccount', false);
  if (res && res instanceof Object && 'result' in res) {
    if (res.result !== EResult.OK) console.error('login failed:', res.message);
  }

  const unreg = SteamClient.Friends.RegisterForVoiceChatStatus((status) => {
    console.log('voice chat active:', status.bVoiceChatActive);
  });
  unreg.unregister();
}
```

--------------------------------

### SteamClient.Input usage example

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-input.md

Demonstrates various SteamClient.Input methods: simulating Ctrl+V key presses, registering for controller input messages, enumerating controllers, setting rumble, and registering for controller state changes. Note that some properties are reverse-engineered and may have unconfirmed names.

```ts
import { SteamClient } from '@decky/ui';
import { EHIDKeyboardKey, EControllerRumbleSetting, ControllerInputGamepadButton } from '@decky/ui';
import type { ControllerStateChange, ControllerInfo } from '@decky/ui';

// Synthetic "paste" (Ctrl+V) — from source docs
SteamClient.Input.ControllerKeyboardSetKeyState(EHIDKeyboardKey.LControl, true);
SteamClient.Input.ControllerKeyboardSetKeyState(EHIDKeyboardKey.V, true);
SteamClient.Input.ControllerKeyboardSetKeyState(EHIDKeyboardKey.V, false);
SteamClient.Input.ControllerKeyboardSetKeyState(EHIDKeyboardKey.LControl, false);

// Watch button presses
SteamClient.Input.RegisterForControllerInputMessages(
  (index, button, pressed) => {
    if (pressed && button === ControllerInputGamepadButton.GAMEPAD_BUTTON_A) console.log(`A pressed on ${index}`);
  },
).unregister(); // or keep to unregister later

// Enumerate controllers
const unreg = SteamClient.Input.RegisterForControllerListChanges((list: ControllerInfo[]) => {
  console.log(list.map((c) => `${c.strName} (${c.eControllerType})`));
});

// Configure rumble
SteamClient.Input.SetControllerRumbleSetting(0, EControllerRumbleSetting.On);

// Full state stream (huge objects)
SteamClient.Input.RegisterForControllerStateChanges((changes: ControllerStateChange[]) => {
  changes.forEach((c) => console.log(c.unControllerIndex, c.ulButtons));
});
```

--------------------------------

### Using SteamClient.System API

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-system.md

Shows how to use SteamClient.System to get system info, subscribe to battery state changes, open a file dialog, and toggle Bluetooth. The Bluetooth call uses optional chaining and a type assertion to handle the possibly undefined property.

```ts
import { SteamClient } from '@decky/ui';
import type { SystemInfo, BatteryState } from '@decky/ui';

const info: SystemInfo = await SteamClient.System.GetSystemInfo();
console.log(info.sCPUName, info.nSystemRAMSizeMB);

const unreg = SteamClient.System.RegisterForBatteryStateChanges((state: BatteryState) => {
  console.log('battery', state.flLevel * 100, '%', state.eBatteryState);
});

const file = await SteamClient.System.OpenFileDialog({
  strTitle: 'Pick a file',
  rgFilters: [{ strFileTypeName: 'All files', rFilePatterns: ['*'], bUseAsDefault: true }],
}).catch((res) => {
  console.error('no file selected', res); // OperationResponse
  return undefined;
});

const bluetoothEnabled: boolean = (await SteamClient.System.Bluetooth?.SetEnabled(true)) as unknown as boolean;
```

--------------------------------

### SteamClient API Usage Examples

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-media.md

Code snippets demonstrating the usage of the SteamClient API from the decky-frontend-lib, covering music playback control, screenshot management, notification registration, and native notification display.

```APIDOC
## SteamClient.Music.SetVolume

### Description
Sets the volume for music playback.

### Method
Call

### Endpoint
`SteamClient.Music.SetVolume(volume: number)`

### Parameters
- **volume** (number) - Required - The volume level to set.

### Request Example
```ts
SteamClient.Music.SetVolume(75);
```

### Response
No response value is returned.

```

```APIDOC
## SteamClient.Music.TogglePlayPause

### Description
Toggles between play and pause states for music playback.

### Method
Call

### Endpoint
`SteamClient.Music.TogglePlayPause()`

### Parameters
None.

### Request Example
```ts
SteamClient.Music.TogglePlayPause();
```

### Response
No response value is returned.

```

```APIDOC
## SteamClient.Music.RegisterForMusicPlaybackChanges

### Description
Registers a callback to receive music playback change events. The callback receives either a boolean indicating a change or an object with track and playback status details.

### Method
Call

### Endpoint
`SteamClient.Music.RegisterForMusicPlaybackChanges(callback: (data: boolean | { nActiveTrack: number, ePlaybackStatus: number }) => void): UnregisterFunction`

### Parameters
- **callback** (function) - Required - The callback function to invoke on playback changes.

### Request Example
```ts
const unreg = SteamClient.Music.RegisterForMusicPlaybackChanges((data) => {
  if (typeof data === 'boolean') console.log('changed', data);
  else console.log('track', data.nActiveTrack, 'status', data.ePlaybackStatus);
});
```

### Response
Returns an unregister function to stop receiving notifications.

```

```APIDOC
## SteamClient.Screenshots.GetAllAppsLocalScreenshots

### Description
Retrieves all local screenshots for all applications.

### Method
Call (async)

### Endpoint
`SteamClient.Screenshots.GetAllAppsLocalScreenshots(): Promise<Screenshot[]>`

### Parameters
None.

### Request Example
```ts
const screenshots = await SteamClient.Screenshots.GetAllAppsLocalScreenshots();
```

### Response
Returns a promise that resolves to an array of screenshot objects.

```

```APIDOC
## SteamClient.Screenshots.UploadLocalScreenshot

### Description
Uploads a local screenshot to the Steam Cloud with a specified privacy setting.

### Method
Call (async)

### Endpoint
`SteamClient.Screenshots.UploadLocalScreenshot(appId: string, handle: number, privacy: EUCMFilePrivacyState): Promise<void>`

### Parameters
- **appId** (string) - Required - The application ID as a string.
- **handle** (number) - Required - The screenshot handle.
- **privacy** (EUCMFilePrivacyState) - Required - The privacy state for the uploaded file.

### Request Example
```ts
await SteamClient.Screenshots.UploadLocalScreenshot(String(s.nAppID), s.hHandle, EUCMFilePrivacyState.Private);
```

### Response
Returns a promise that resolves when the upload is complete.

```

```APIDOC
## SteamClient.Notifications.RegisterForNotifications

### Description
Registers a callback to receive Steam client notifications. The callback receives an index, a notification type, and raw protobuf data as an ArrayBuffer.

### Method
Call

### Endpoint
`SteamClient.Notifications.RegisterForNotifications(callback: (index: number, type: EClientNotificationType, data: ArrayBuffer) => void): UnregisterFunction`

### Parameters
- **callback** (function) - Required - The callback function to invoke on notifications.

### Request Example
```ts
SteamClient.Notifications.RegisterForNotifications((index, type, data) => {
  if (type === EClientNotificationType.Achievement) {
    const msg = ClientNotificationAchievementMessageClass.deserializeBinary(data).toObject(true);
    console.log('achievement:', msg.name());
  }
});
```

### Response
Returns an unregister function to stop receiving notifications.

```

```APIDOC
## SteamClient.ClientNotifications.DisplayClientNotification

### Description
Displays a native Steam client notification with a custom payload and a click callback.

### Method
Call

### Endpoint
`SteamClient.ClientNotifications.DisplayClientNotification(type: number, payload: string, callback: (ctx: { m_nBrowserID: number }) => void): void`

### Parameters
- **type** (number) - Required - The notification type identifier (e.g., `2` for FriendChatMessage).
- **payload** (string) - Required - A JSON string containing the notification content.
- **callback** (function) - Required - The callback invoked when the notification is clicked.

### Request Example
```ts
SteamClient.ClientNotifications.DisplayClientNotification(
  2 /* FriendChatMessage */,
  JSON.stringify({ title: 'Hi', body: 'message from decky', steamid: '76561198000000000', state: 'active' }),
  (ctx) => console.log('clicked', ctx.m_nBrowserID),
);
```

### Response
No response value is returned.

```

--------------------------------

### Input components usage example

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/components-input.md

Shows how to use Toggle, ToggleField, SliderField, TextField, Dropdown, and DropdownItem together in a React component. Includes state hooks for enabled, volume, name, and selected option, plus configuration for dropdown options and slider notches.

```tsx
import { Toggle, ToggleField, SliderField, TextField, Dropdown, DropdownItem } from '@decky/ui';
import type { SingleDropdownOption, NotchLabel } from '@decky/ui';
import { useState } from 'react';

function Example() {
  const [enabled, setEnabled] = useState(false);
  const [volume, setVolume] = useState(50);
  const [name, setName] = useState('');
  const [opt, setOpt] = useState<any>(null);

  const options: SingleDropdownOption[] = [
    { data: 'a', label: 'Option A' },
    { data: 'b', label: 'Option B' },
  ];

  const notches: NotchLabel[] = [
    { notchIndex: 0, label: 'Off', value: 0 },
    { notchIndex: 3, label: 'Mid' },
    { notchIndex: 6, label: 'Max', value: 100 },
  ];

  return (
    <>
      <Toggle value={enabled} disabled={volume === 0} onChange={setEnabled} />
      <ToggleField label="Notifications" checked={enabled} onChange={setEnabled} bottomSeparator="thick" />
      <SliderField label="Volume" value={volume} min={0} max={100} step={1}
        notchCount={6} notchTicksVisible notchLabels={notches} showValue valueSuffix="%" onChange={setVolume} />
      <TextField label="Name" value={name} onChange={(e) => setName(e.target.value)} mustBeNumeric={false} />
      <Dropdown rgOptions={options} selectedOption={opt} onChange={setOpt} menuLabel="Pick" strDefaultLabel="Select…" />
      <DropdownItem label="In a field row" rgOptions={options} selectedOption={opt} onChange={setOpt} />
    </>
  );
}
```

--------------------------------

### Customization

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-media.md

Methods for managing startup movies and their thumbnails.

```APIDOC
## GenerateLocalStartupMoviesThumbnails

### Description
Generates thumbnails for local startup movies.

### Method
GenerateLocalStartupMoviesThumbnails

### Parameters
- **param0** (number) - Required - Parameter description not provided.

### Response
Returns a Promise<number>.
```

```APIDOC
## GetDownloadedStartupMovies

### Description
Retrieves downloaded startup movies.

### Method
GetDownloadedStartupMovies

### Parameters
- **param0** (string) - Required - Should be "startupmovies".

### Response
Returns a Promise<StartupMovie[]>.
```

```APIDOC
## GetLocalStartupMovies

### Description
Retrieves local startup movies.

### Method
GetLocalStartupMovies

### Parameters
None.

### Response
Returns a Promise<StartupMovie[]>.
```

--------------------------------

### Network.StartScanningForNetworks

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-system.md

Starts scanning for available networks. Returns an OperationResponse indicating the result.

```APIDOC
## StartScanningForNetworks

### Description
Starts scanning for available networks.

### Method
StartScanningForNetworks

### Parameters
None

### Returns
Promise<OperationResponse>
```

--------------------------------

### SteamClient API Methods

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-user.md

Code snippets for the SteamClient API methods demonstrated in the usage example.

```APIDOC
## SteamClient.User.GetIPCountry

### Description
Retrieves the IP country code of the current user.

### Method
GetIPCountry

### Endpoint
SteamClient.User.GetIPCountry

### Parameters
None

### Response
Returns a string representing the country code (e.g., "US").

```

```APIDOC
## SteamClient.Auth.GetRefreshInfo

### Description
Retrieves authentication refresh information for the current user.

### Method
GetRefreshInfo

### Endpoint
SteamClient.Auth.GetRefreshInfo

### Parameters
None

### Response
Returns an `AuthRefreshInfo` object.

```

```APIDOC
## SteamClient.Settings.GetAvailableLanguages

### Description
Retrieves the list of available languages for the Steam client.

### Method
GetAvailableLanguages

### Endpoint
SteamClient.Settings.GetAvailableLanguages

### Parameters
None

### Response
Returns a list of available languages.

```

```APIDOC
## SteamClient.Friends.GetCoplayData

### Description
Retrieves coplay data for friends.

### Method
GetCoplayData

### Endpoint
SteamClient.Friends.GetCoplayData

### Parameters
None

### Response
Returns coplay data for friends.

```

```APIDOC
## SteamClient.Friends.RegisterForVoiceChatStatus

### Description
Registers a callback for voice chat status changes.

### Method
RegisterForVoiceChatStatus

### Endpoint
SteamClient.Friends.RegisterForVoiceChatStatus

### Parameters
- **callback** (function) - Required - A callback function that receives a status object with a `bMicMuted` boolean property.

### Response
Returns an unregister function to stop receiving updates.

```

```APIDOC
## SteamClient.WebChat.SetPersonaName

### Description
Sets the persona name for the current user in web chat.

### Method
SetPersonaName

### Endpoint
SteamClient.WebChat.SetPersonaName

### Parameters
- **name** (string) - Required - The new persona name to set.

### Response
Returns a `SetPersonaNameResult` object.

```

--------------------------------

### RunGame

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/steam-client-apps.md

Launches a game with specified options and launch source.

```APIDOC
## RunGame(appId: string, launchOptions: string, param2: number, launchSource: ELaunchSource): void

### Description
Initiates the launch of a game using the provided application ID and launch parameters.

### Parameters
- **appId** (string) - Required - The ID of the game to launch.
- **launchOptions** (string) - Required - Command line options to append to the launch command.
- **param2** (number) - Required - Additional parameter for the launch process.
- **launchSource** (ELaunchSource) - Required - The source from which the game launch was triggered.
```

--------------------------------

### INTERNAL_HOOKS

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/react-utils.md

Gets the current React dispatcher (hook implementation) from the Steam window. This is the object that `applyHookStubs` mutates.

```ts
export let INTERNAL_HOOKS = (window.SP_REACT as any)?.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentDispatcher
    .current || Object.values((window.SP_REACT as any)?.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE).find((p: any) => p?.useEffect);
```

--------------------------------

### Decky UI components usage examples

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/components-display.md

Import components from @decky/ui and use them in a React component. Includes controlled Tabs, SidebarNavigation, Carousel, progress bars, and spinners.

```tsx
import {
  Carousel, Marquee, ProgressBar, ProgressBarWithInfo, Spinner, SteamSpinner,
  PanelSection, PanelSectionRow, ScrollPanel, ScrollPanelGroup, Tabs, SidebarNavigation,
} from '@decky/ui';
import type { Tab } from '@decky/ui';
import { useState } from 'react';

// Tabs with controlled state
const [tab, setTab] = useState('tab1');
const tabs: Tab[] = [
  { id: 'tab1', title: 'First', content: <PanelSection title="A">…</PanelSection> },
  { id: 'tab2', title: 'Second', renderTabAddon: () => <span>(2)</span>, content: <div>…</div> },
];
<Tabs tabs={tabs} activeTab={tab} onShowTab={setTab} />;

// Sidebar settings layout
<SidebarNavigation
  title="Settings"
  pages={[
    { title: 'General', identifier: 'general', content: <PanelSectionRow><Field label="X" /></PanelSectionRow> },
    'separator',
    { title: 'About', route: '/about', content: <About /> },
  ]}
  page={currentPage}
  onPageRequested={setCurrentPage}
/>;

// Carousel
<Carousel nHeight={200} nNumItems={10} fnItemRenderer={(id) => <Tile id={id} />} enableBumperPaging />;

// Progress
<ProgressBar nProgress={65} />
<ProgressBarWithInfo label="Download" nProgress={65} sTimeRemaining="2 min" sOperationText="Installing" indeterminate={false} />;

// Loading spinners
<Spinner style={{ height: '48px' }} />
<SteamSpinner />
```

--------------------------------

### Dialog Layout with DialogBody and DialogControlsSection

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/components-core.md

Demonstrates how to structure a settings dialog using DialogBody, DialogControlsSection, and a DialogCheckbox.

```tsx
import {
  DialogBody, DialogControlsSection, DialogControlsSectionHeader, DialogButton,
  DialogCheckbox, ButtonItem, Field, Focusable, ControlsList, ErrorBoundary,
  NavEntryPositionPreferences, GamepadButton,
} from '@decky/ui';

// A dialog layout
<DialogBody>
  <DialogControlsSection>
    <DialogControlsSectionHeader>Settings</DialogControlsSectionHeader>
    <DialogCheckbox
      label="Enable feature"
      description="Turns the feature on"
      checked={enabled}
      onChange={setEnabled}
      bottomSeparator="standard"
    />
  </DialogControlsSection>
</DialogBody>
```

--------------------------------

### Using Navigation and Router APIs from @decky/ui

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/router.md

Shows how to use the Navigation and Router APIs from @decky/ui to navigate the focused Steam window, open the Quick Access menu, open a side menu, and read running apps. The Router.RunningApps and Router.MainRunningApp properties provide access to currently running applications.

```ts
import { Navigation, SideMenu, QuickAccessTab, Router } from '@decky/ui';

// Navigate the focused Steam window to a route
Navigation.Navigate('/library/home');

// Open the Decky tab in the Quick Access menu
Navigation.OpenQuickAccessMenu(QuickAccessTab.Decky);

// Open a side menu
Navigation.OpenSideMenu(SideMenu.Main);

// Read currently running apps from the raw Router
const current: string[] = Router.RunningApps.map((a) => a.appid);
const main = Router.MainRunningApp?.display_name;
```

--------------------------------

### Manage a modal with showModal and Update

Source: https://github.com/steamdeckhomebrew/decky-frontend-lib/blob/main/_autodocs/api-reference/menu-modal.md

Demonstrates opening a confirmation modal and subsequently updating its content programmatically using the returned handle.

```tsx
// Modal with programmatic close/update
let handle: ShowModalResult | undefined;
handle = showModal(
  <ConfirmModal
    strTitle="Delete?"
    strDescription="This cannot be undone."
    strOKButtonText="Delete"
    bDestructiveWarning
    onOK={() => handle?.Close()}
    onCancel={() => handle?.Close()}
  />,
);

// Later replace the modal body entirely
handle?.Update(<ModalRoot closeModal={() => handle?.Close()}>New body</ModalRoot>);
```
Tokens:
Raw