### Practical event and shortcut examples

Source: https://docs.win93.xyz/docs/guide/events

Common patterns for delegated events, save shortcuts, and command sequences.

```javascript
{
	tag: "ul",
	on: {
		selector: "li",
		"click || keydown"(e, target, el) {
			// click/keydown on list items
		},
	},
}
```

```javascript
{
	on: {
		prevent: true,
		"Ctrl+S || Meta+S"(e) {
			// save action
		},
	},
}
```

```javascript
{
	on: {
		disrupt: true,
		"Ctrl+K Ctrl+D"(e) {
			// run command palette action chain
		},
	},
}
```

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

### Defining a custom component

Source: https://docs.win93.xyz/docs/api/gui/component

Example of extending the Component class and registering it using Component.define.

```javascript
class MyComponent extends Component {  

  static plan = {  

    tag: "ui-my-component",  

    props: {  

      label: true,  

    },  

    content: "Hello!",  

  }  

}  

  

Component.define(MyComponent)
```

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

### Perform GET request

Source: https://docs.win93.xyz/docs/api/http

Execute a basic GET request using the http client.

```javascript
const data = await http("https://api.example.com/data")
```

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

### Select a folder using folderPicker

Source: https://docs.win93.xyz/docs/gui/explorer

Opens a dialog to select a folder starting from a specified path.

```javascript
const { ok, directory } = await folderPicker("~/documents")  
```

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

### Initialize explorer and file pickers

Source: https://docs.win93.xyz/docs/gui/explorer

Demonstrates importing the explorer module and using the file picker and folder picker functions.

```javascript
import { explorer, filePickerOpen, filePickerSave, folderPicker } from "/42/ui/desktop/explorer.js"  

//Or  

const { explorer } = sys42  

  

const el = await explorer("~/documents")  

const { ok, directory, selection } = await filePickerOpen("~/documents")  

const { ok, directory, selection } = await filePickerSave("~/documents")  

const { ok, directory } = await folderPicker("~/documents")
```

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

### basicPlayer(options)

Source: https://docs.win93.xyz/docs/gui/basic-player

Initializes a new basicPlayer instance with the specified media source.

```APIDOC
## basicPlayer(options)

### Description
Initializes a minimal audio/video player component.

### Parameters
#### Options
- **src** (String) - Required - URL or path to the media file

### Usage Example
```javascript
import { basicPlayer } from "/42/ui/media/basicPlayer.js";

const myPlayer = basicPlayer({
  src: "/music/song.mp3",
});
```
```

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

### Create a dialog window

Source: https://docs.win93.xyz/docs/gui/dialog

Demonstrates how to initialize a dialog using either a modular import or the global sys42 object.

```javascript
import { dialog } from "/42/ui/components/dialog.js"  

// Or  

const { dialog } = sys42  

  

const myDialog = dialog({  

  x: 100,  

  y: 100,  

  width: 400,  

  height: 300,  

  label: "My Dialog",  

  content: "This is the content of the dialog.",  

})  
```

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

### Save a file using filePickerSave

Source: https://docs.win93.xyz/docs/gui/explorer

Opens a dialog to save a file, allowing for a suggested filename and starting directory.

```javascript
const { ok, directory, selection } = await filePickerSave("~/documents", {  

  suggestedName: "document.txt",  

})  
```

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

### Initialize Player via Module

Source: https://docs.win93.xyz/docs/gui/player

Import the player function and initialize it with a media source URL.

```javascript
import { player } from "/42/ui/media/player.js"  

  

const myPlayer = player({  

  src: "/music/song.mp3",  

})  
```

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

### player(options)

Source: https://docs.win93.xyz/docs/gui/player

Initializes a new player instance with the specified media source.

```APIDOC
## player(options)

### Description
Initializes and returns a player instance for audio or video playback.

### Parameters
- **options** (Object) - Required
  - **src** (String) - Required - URL or path to the media file

### Usage Example
```javascript
import { player } from "/42/ui/media/player.js";

const myPlayer = player({
  src: "/music/song.mp3",
});
```
```

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

### createShortcut(path, options?)

Source: https://docs.win93.xyz/docs/api/actions

Opens an app picker and creates a .desktop shortcut for the selected application.

```APIDOC
## createShortcut(path, options?)

### Description
Opens an app picker and creates a .desktop shortcut for the selected application.

### Parameters
- **path** (string) - Required - The directory path where the shortcut will be created.
- **options** (object) - Optional - Configuration options for the creation process.
```

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

### folder(options)

Source: https://docs.win93.xyz/docs/gui/folder

Initializes a new folder component instance.

```APIDOC
## folder(options)

### Description
Initializes and returns a new folder component instance.

### Parameters
- **value** (String) - Required - The directory path to display.
- **glob** (Boolean) - Optional - Whether to use glob pattern matching for the path.
- **filter** (String) - Optional - A glob pattern or extension to filter files.
- **filterType** (String) - Optional - Set to "disable" to disable filtered items instead of hiding them.
```

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

### Creating a Shortcut

Source: https://docs.win93.xyz/docs/api/actions

Opens an app picker to create a .desktop shortcut at the specified path.

```javascript
await actions.createShortcut("/desktop/")
```

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

### Initialize Player via Plan

Source: https://docs.win93.xyz/docs/gui/player

Define the player component using a configuration object with the ui-player tag.

```json
{

  tag: "ui-player",

  src: "/music/song.mp3",

}
```

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

### shader(options)

Source: https://docs.win93.xyz/docs/gui/shader

Initializes a new shader component instance.

```APIDOC
## shader(options)

### Description
Creates and initializes a shader component instance for rendering WebGL shaders.

### Parameters
- **options** (Object) - Required - Configuration object for the shader.
  - **src** (String) - Optional - URL to the shader source file.
  - **srcdoc** (String) - Optional - Inline shader source code.
  - **uniforms** (Object) - Optional - Initial shader uniform values.
```

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

### Creating a Folder

Source: https://docs.win93.xyz/docs/api/actions

Opens a name prompt to create a new directory at the specified path.

```javascript
const name = await actions.createFolder("/desktop/")
```

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

### Launch File Action

Source: https://docs.win93.xyz/docs/api/actions

Opens a file using its associated application.

```javascript
await actions.launchFile("/docs/readme")
```

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

### Launch Folder Action

Source: https://docs.win93.xyz/docs/api/actions

Opens a folder using the applications manager.

```javascript
await actions.launchFolder("/documents/")
```

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

### Initialize a knob using the modular API

Source: https://docs.win93.xyz/docs/gui/knob

Import the knob function and configure it with initial values and an action callback.

```javascript
import { knob } from "/42/ui/control/knob.js"  

  

const myKnob = knob({  

  value: 0.5,  

  min: 0,  

  max: 1,  

  step: 0.01,  

  action(e, el) {  

    console.log(el.value)  

  },  

})  
```

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

### volume(options)

Source: https://docs.win93.xyz/docs/gui/volume

Initializes a new volume control component using the provided configuration options.

```APIDOC
## volume(options)

### Description
Creates and returns a new volume control instance.

### Parameters
- **value** (Number) - Optional - Current volume level
- **min** (Number) - Optional - Minimum value
- **max** (Number) - Optional - Maximum value
- **scale** (String) - Optional - Display scale (default: "dB")
- **action** (Function) - Optional - Callback function triggered on interaction, receiving event and element as arguments

### Usage Example
```javascript
import { volume } from "/42/ui/control/volume.js";

const myVolume = volume({
  value: 0.8,
  min: 0,
  max: 1,
  action(e, el) {
    console.log(el.value);
  },
});
```
```

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

### Initialize a picto component

Source: https://docs.win93.xyz/docs/gui/picto

Use the picto function to create a component instance by specifying the icon value and size.

```javascript
import { picto } from "/42/ui/media/picto.js"  

  

const myPicto = picto({  

  value: "folder",  

  size: 16,  

})  
```

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

### picto(options)

Source: https://docs.win93.xyz/docs/gui/picto

Creates a picto component instance for rendering icons.

```APIDOC
## picto(options)

### Description
Creates a new picto component. The component can represent native icons or custom images.

### Parameters
- **value** (string) - Required - The picto's identifier (if a native picto) or the path to a custom image.
- **size** (number) - Optional - The size of the picto in pixels (default is 16).
```

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

### launchFile(selection)

Source: https://docs.win93.xyz/docs/api/actions

Opens files with their associated application.

```APIDOC
## launchFile(selection)

### Description
Opens files with their associated application via appsManager.open().

### Usage
```javascript
await actions.launchFile("/docs/readme")
```
```

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

### Initialize basicPlayer via Configuration Object

Source: https://docs.win93.xyz/docs/gui/basic-player

Use this object structure to define the player component configuration.

```json
{

  tag: "ui-basic-player",

  src: "/music/song.mp3",

}
```

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

### Initialize basicPlayer via Module

Source: https://docs.win93.xyz/docs/gui/basic-player

Use this approach to import and instantiate the player programmatically in a JavaScript module.

```javascript
import { basicPlayer } from "/42/ui/media/basicPlayer.js"  

  

const myPlayer = basicPlayer({  

  src: "/music/song.mp3",  

})  
```

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

### createFolder(path, options?)

Source: https://docs.win93.xyz/docs/api/actions

Opens a name prompt and creates a new directory. Returns the created folder name, or undefined if cancelled.

```APIDOC
## createFolder(path, options?)

### Description
Opens a name prompt and creates a new directory. Returns the created folder name, or undefined if cancelled.

### Parameters
- **path** (string) - Required - The directory path where the folder will be created.
- **options** (object) - Optional - Configuration options for the creation process.
```

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

### Initialize Toast Component

Source: https://docs.win93.xyz/docs/gui/toast

Shows how to import or access the toast function and create a basic notification.

```javascript
import { toast } from "/42/ui/components/toasts.js"  

// Or  

const { toast } = sys42  

  

const myToast = toast({  

  message: "Hello, World!",  

  timeout: 3000  

})
```

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

### Creating a File

Source: https://docs.win93.xyz/docs/api/actions

Opens a name prompt to create an empty file at the specified path.

```javascript
const name = await actions.createFile("/desktop/")
```

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

### createFile(path, options?)

Source: https://docs.win93.xyz/docs/api/actions

Opens a name prompt and creates an empty file. Returns the created filename, or undefined if cancelled.

```APIDOC
## createFile(path, options?)

### Description
Opens a name prompt and creates an empty file. Returns the created filename, or undefined if cancelled.

### Parameters
- **path** (string) - Required - The directory path where the file will be created.
- **options** (object) - Optional - Configuration options for the creation process.
```

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

### Initialize Volume Control via Module

Source: https://docs.win93.xyz/docs/gui/volume

Use the volume function to programmatically create a volume control instance with custom bounds and an action callback.

```javascript
import { volume } from "/42/ui/control/volume.js"  

  

const myVolume = volume({  

  value: 0.8,  

  min: 0,  

  max: 1,  

  action(e, el) {  

    console.log(el.value)  

  },  

})  
```

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

### Handle JSON and JSON5 files

Source: https://docs.win93.xyz/docs/api/fs

Use these methods to read and write configuration files in JSON or JSON5 formats.

```javascript
await fs.writeJSON("~/config/app.json")  

const config = await fs.readJSON("~/config/app.json")  

  

await fs.writeJSON5("~/config/dev.json5")  

const dev = await fs.readJSON5("~/config/dev.json5")
```

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

### combobox(options)

Source: https://docs.win93.xyz/docs/gui/combobox

Initializes a new combobox instance using the modular import.

```APIDOC
## combobox(options)

### Description
Creates and returns a new combobox UI control instance.

### Parameters
- **value** (String) - Optional - The currently selected value.
- **options** (Array) - Optional - An array of objects containing { value, text } pairs.
- **placeholder** (String) - Optional - The placeholder text displayed when no value is selected.
- **action** (Function) - Optional - Callback function triggered on selection, receiving (event, element) as arguments.
```

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

### List of related boot files

Source: https://docs.win93.xyz/docs/internals/boot

A list of core files involved in the system boot process.

```text
/bios/bios.js  

/bios/boot.js  

/bios/splash.js  

/bios/fail.js  

/desktop.js  
```

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

### open(path, ...args)

Source: https://docs.win93.xyz/docs/api/fs

Opens a file handle or resource.

```APIDOC
## open(path, ...args)

### Description
Opens a file handle/resource. Return type is backend-specific.

### Signature
`open(path: FsPath, ...args: AnyArgs): Promise<unknown>`
```

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

### launchFolder(selection)

Source: https://docs.win93.xyz/docs/api/actions

Opens folders via the applications manager.

```APIDOC
## launchFolder(selection)

### Description
Opens folders via appsManager.open().

### Usage
```javascript
await actions.launchFolder("/documents/")
```
```

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

### Importing the FileSystem instance

Source: https://docs.win93.xyz/docs/api/fs

Use the provided fs instance for filesystem operations. Do not instantiate FileSystem directly.

```javascript
import { fs } from "/42/api/fs.js"  

// Or  

const { fs } = sys42  
```

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

### createTerminal(options)

Source: https://docs.win93.xyz/docs/gui/terminal

Initializes a new terminal instance with the specified configuration options.

```APIDOC
## createTerminal(options)

### Description
Creates and returns a new terminal emulator instance.

### Parameters
- **options** (Object) - Required
  - **fontSize** (Number) - Optional - Font size in pixels
  - **fontFamily** (String) - Optional - Font family
  - **cols** (Number) - Optional - Number of columns
  - **rows** (Number) - Optional - Number of rows

### Usage Example
```javascript
import { createTerminal } from "/42/ui/interface/terminal.js";

const term = await createTerminal({
  fontSize: 14,
  fontFamily: "monospace",
  cols: 80,
  rows: 24
});
```
```

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

### Initialize tabs using the modular approach

Source: https://docs.win93.xyz/docs/gui/tabs

Use the tabs function from the layout module to programmatically create a tabbed interface.

```javascript
import { tabs } from "/42/ui/layout/tabs.js"  

  

const myTabs = tabs({  

  content: [  

    { tag: "button", text: "Tab 1" },  

    { tag: "button", text: "Tab 2" },  

  ],  

})  
```

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

### Create directory

Source: https://docs.win93.xyz/docs/api/fs

Creates a new directory.

```typescript
writeDir(path: FsPath): Promise<void>
```

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

### code(options)

Source: https://docs.win93.xyz/docs/gui/code

Initializes a new code editor instance with the specified configuration options.

```APIDOC
## code(options)

### Description
Initializes a code editor control instance.

### Parameters
- **lang** (String) - Optional - The programming language for syntax highlighting.
- **theme** (String) - Optional - The visual theme for the editor.
- **src** (String) - Optional - The file path to load content from.
- **srcdoc** (String) - Optional - Inline content to load into the editor.
- **singleLine** (Boolean) - Optional - Enables single-line mode.
- **mode** (String) - Optional - The editor mode.
- **action** (Function) - Optional - Callback function triggered by editor events.

### Methods
- **getValue()** - Returns the current editor content as a string.
- **setValue(text)** - Sets the editor content to the provided text.
```

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

### model(options)

Source: https://docs.win93.xyz/docs/gui/model

Initializes and renders a 3D model component with the specified configuration.

```APIDOC
## model(options)

### Description
Initializes a 3D model component using the provided configuration object.

### Parameters
- **src** (String) - Required - URL to the 3D model file (GLTF/GLB).
- **interactive** (Boolean) - Optional - If true, enables orbit, pan, and zoom controls.
- **visualization** ("both" | "solid") - Optional - Toggles wireframe visualization mode.
```

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

### Initialize folder component

Source: https://docs.win93.xyz/docs/gui/folder

Use the modular import to instantiate a folder component with a specific directory path.

```javascript
import { folder } from "/42/ui/media/folder.js"  

  

const myFolder = folder({  

  value: "~/documents/",  

})  
```

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

### Modular Shader Usage

Source: https://docs.win93.xyz/docs/gui/shader

Import the shader component and initialize it with a path to a GLSL source file.

```javascript
import { shader } from "/42/ui/media/shader.js"  

  

const myShader = shader({  

  src: "/path/to/shader.glsl",  

})  
```

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

### knob(options)

Source: https://docs.win93.xyz/docs/gui/knob

Initializes a new knob control instance with the specified configuration.

```APIDOC
## knob(options)

### Description
Creates a new knob UI control. Users can interact with the knob by dragging vertically to change the value, or holding Shift for fine control.

### Parameters
- **value** (Number) - Optional - Current value of the knob.
- **min** (Number) - Optional - Minimum value.
- **max** (Number) - Optional - Maximum value.
- **step** (Number) - Optional - Step increment for value changes.
- **valueType** (String) - Optional - The type of value, defaults to "number".
- **action** (Function) - Optional - Callback function triggered on interaction, receiving the event and the element.

### Usage Example
```javascript
import { knob } from "/42/ui/control/knob.js";

const myKnob = knob({
  value: 0.5,
  min: 0,
  max: 1,
  step: 0.01,
  action(e, el) {
    console.log(el.value);
  },
});
```
```

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

### menu(options)

Source: https://docs.win93.xyz/docs/gui/menu

Initializes and displays a menu component.

```APIDOC
## menu(options)

### Description
Creates and displays a context or dropdown menu.

### Parameters
- **items** (Array) - Required - A list of menu item objects.
- **position** (Object) - Optional - Defines the menu positioning using 'my' and 'at' properties.

### Menu Item Properties
- **text** (String) - Label text for the item.
- **picto** (String) - Icon identifier.
- **action** (Function) - Callback executed when the item is clicked.
- **disabled** (Boolean) - If true, the item is greyed out.
- **separator** (Boolean) - If true, renders a divider line.
- **children** (Array) - Submenu items.

### Events
- **ui:menu.open** - Fired when the menu opens.
- **ui:menu.close** - Fired when the menu closes.
```

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

### Basic Menu Initialization

Source: https://docs.win93.xyz/docs/gui/menu

Create a standard menu by passing an items array to the menu function.

```javascript
const result = await menu({  

  items: [  

    { text: "Open", picto: "folder-open", action: () => {} },  

    { text: "Save", picto: "save", action: () => {} },  

    "-",  

    { text: "Delete", picto: "trash", action: () => {} },  

  ],  

})  
```

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

### Import HTTP client

Source: https://docs.win93.xyz/docs/api/http

Import the http client from the module path.

```javascript
import { http } from "/42/api/http.js"
```

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

### Methods

Source: https://docs.win93.xyz/docs/gui/folder

Methods available on the folder component instance.

```APIDOC
## Methods

- **refresh()** - Re-render the folder contents.
- **createFolder(options)** - Create a new folder and select it.
- **createFile(options)** - Create a new file and select it.
- **createShortcut(options)** - Create a shortcut and select it.
- **importFile(options)** - Import file(s) and select them.
- **selectAddedIcon(filenames)** - Select icons by their filenames after they are added.
- **displayContextMenu(e, addItems?)** - Show a context menu at the pointer position.
```

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

### importFile(path, options?)

Source: https://docs.win93.xyz/docs/api/actions

Opens a native file picker to import files.

```APIDOC
## importFile(path, options?)

### Description
Opens a native file picker and writes selected files to the virtual filesystem. Returns an array of imported paths.

### Usage
```javascript
const files = await actions.importFile("/desktop/", {
  multiple: true,
})
```
```

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

### Modular Menu Implementation

Source: https://docs.win93.xyz/docs/gui/menu

Import the menu function and initialize it with an array of item objects.

```javascript
import { menu } from "/42/ui/layout/menu.js"  

  

const myMenu = await menu({  

  items: [  

    { text: "Open", picto: "folder-open", action: () => {} },  

    { text: "Save", picto: "save", action: () => {} },  

    "-",  

    { text: "Delete", picto: "trash", action: () => {} },  

  ],  

})  
```

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

### Connect to Trollbox Server

Source: https://docs.win93.xyz/docs/tb

Initialize the Socket.IO connection using the specified port.

```javascript
const socket = io('https://v2.windows93.net:' + port);
```

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

### dialog(options)

Source: https://docs.win93.xyz/docs/gui/dialog

Creates a new dialog window with the specified configuration options.

```APIDOC
## dialog(options)

### Description
Creates and displays a new dialog window. The options object defines the appearance and behavior of the dialog.

### Parameters
- **options** (Object) - Required - Configuration object containing properties like x, y, width, height, label, and content.
```

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

### Configure Volume Control via Plan

Source: https://docs.win93.xyz/docs/gui/volume

Define the volume control using a configuration object with the ui-volume tag.

```json
{  

  tag: "ui-volume",  

  value: 0.8,  

  min: 0,  

  max: 1,  

  action(e, el) {  

    console.log(el.value)  

  },  

}  
```

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

### tabs(options)

Source: https://docs.win93.xyz/docs/gui/tabs

Initializes a new tabs component using the modular import.

```APIDOC
## tabs(options)

### Description
Creates a new tabbed interface instance.

### Parameters
- **content** (Array) - Required - An array of objects defining the tabs, where each object contains a `tag` and `text` property.

### Properties
- **closable** (Boolean) - Optional - Whether tabs can be closed.
- **displayPicto** (Boolean) - Optional - Whether to show tab icons.

### Events
- **ui:tabs.change** - Fired when the active tab changes.
```

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

### Basic rendering of a button

Source: https://docs.win93.xyz/docs/api/gui/render

Create a DOM element by passing a plan object with tag, text, class, and event listener properties.

```javascript
const el = render({  

  tag: "button",  

  text: "Click me",  

  class: "primary",  

  on: {  

    click() {  

      console.log("clicked")  

    },  

  },  

})
```

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

### scope()

Source: https://docs.win93.xyz/docs/gui/scope

Initializes the scope visualizer component.

```APIDOC
## scope()

### Description
Initializes a new oscilloscope/spectrum visualizer instance.

### Parameters
- **fill** (Boolean) - Optional - Whether to fill the container.
- **mode** (String) - Optional - Visualization mode. Supported values: "auto", "oscilloscope", "spectrum".
```

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

### folderPicker(path?, options?)

Source: https://docs.win93.xyz/docs/gui/explorer

Opens a folder-picker dialog. Returns a promise that resolves to an object containing the confirmation status, directory, and optionally file paths.

```APIDOC
## folderPicker(path?, options?)

### Description
Opens a folder-picker dialog for selecting directories.

### Parameters
- **path** (String) - Optional - The directory to start in. Default is the home directory.
- **options** (Object) - Optional - Additional options:
  - **agree** (String/Object) - Label or config for the confirm button.
  - **decline** (String/Object) - Label or config for the cancel button.
  - **returnPaths** (Boolean/Object) - If set, includes all file paths in the selected directory (recursive).
  - **signal** (AbortSignal) - Signal to abort the dialog.

### Returns
- **Promise<{ ok, directory, paths? }>**
  - **ok** (Boolean) - Whether the dialog was confirmed.
  - **directory** (String) - The selected directory path.
  - **paths** (Array) - Array of file paths (only if returnPaths is set).
```

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

### Define a knob using a configuration object

Source: https://docs.win93.xyz/docs/gui/knob

Use a plain object with the ui-knob tag to define the knob properties.

```json
{

  tag: "ui-knob",

  value: 0.5,

  min: 0,

  max: 1,

  step: 0.01,

  action(e, el) {

    console.log(el.value)

  },

}
```

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

### Plan Configuration

Source: https://docs.win93.xyz/docs/gui/combobox

Declarative configuration object for the combobox component.

```APIDOC
## Plan Configuration

### Description
Configuration object used to define the combobox structure and behavior.

### Properties
- **tag** (String) - Required - Must be set to "ui-combobox".
- **value** (String) - Optional - Currently selected value.
- **options** (Array) - Optional - Array of { value, text } items.
- **placeholder** (String) - Optional - Placeholder text.
- **action** (Function) - Optional - Callback function triggered on selection.
```

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

### render(plan)

Source: https://docs.win93.xyz/docs/api/gui/render

Creates a DOM element based on the provided plan object configuration.

```APIDOC
## render(plan)

### Description
Takes a plan object and produces a corresponding DOM element.

### Parameters
- **plan** (object) - Required - A configuration object defining the element tag, text, classes, and event listeners.

### Example
```javascript
import { render } from "/42/api/gui/render.js";

const el = render({
  tag: "button",
  text: "Click me",
  class: "primary",
  on: {
    click() {
      console.log("clicked");
    }
  }
});
```
```

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

### Initialize Code Control via Module

Source: https://docs.win93.xyz/docs/gui/code

Use the code function to programmatically create a code editor instance with specific language and theme settings.

```javascript
import { code } from "/42/ui/control/code.js"  

  

const myCode = code({  

  lang: "javascript",  

  theme: "monokai",  

  src: "/path/to/file.js",  

  action(e, el) {  

    console.log(el.value)  

  },  

})
```

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

### Keyboard shortcut alternatives

Source: https://docs.win93.xyz/docs/guide/events

Use '||' to define multiple valid shortcut paths for the same action.

```javascript
{
	on: {
		"Ctrl+S || Meta+S"(e) {
			// either branch triggers
		},
	},
}
```

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

### Import File Action

Source: https://docs.win93.xyz/docs/api/actions

Triggers a native file picker to import files into the virtual filesystem.

```javascript
const files = await actions.importFile("/desktop/", {  

  multiple: true,  

})
```

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

### Create Toast with Icon and Picto

Source: https://docs.win93.xyz/docs/gui/toast

Configures a toast notification to include an icon path and a picto element.

```javascript
const options = {  

  message: "File uploaded successfully!",  

  icon: "/path/to/icon.png",  

  picto: "checkmark"  

};  

toast(options);
```

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

### render(plan)

Source: https://docs.win93.xyz/docs/api/gui/component

Re-renders the component instance using a new plan configuration.

```APIDOC
## render(plan)

### Description
Updates the component's UI by applying a new plan.

### Parameters
- **plan** (Plan) - Required - The new plan configuration object to render.
```

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

### Initialize notif component

Source: https://docs.win93.xyz/docs/gui/notif

Shows how to import or access the notif function and trigger a notification anchored to a target element.

```javascript
import { notif } from "/42/ui/layout/notif.js"  

// Or  

const { notif } = sys42  

  

const myNotif = await notif(targetElement, "File saved!", {  

  picto: "check",  

  timeout: 3000,  

})  
```

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

### filePickerOpen(path?, options?)

Source: https://docs.win93.xyz/docs/gui/explorer

Opens a file-picker dialog for selecting files.

```APIDOC
## filePickerOpen(path?, options?)

### Description
Opens a file-picker dialog for opening files. Returns a Promise containing the selection result.

### Parameters
- **path** (String) - Optional - The directory to start in. Default is the home directory.
- **options** (Object) - Optional - Configuration options.
  - **types** (Array) - Optional - Array of file type filters.
  - **accept** (String) - Optional - Comma-separated MIME types or extensions.
  - **multiple** (Boolean) - Optional - Allow selecting multiple files. Default is false.
  - **returnFiles** (Boolean) - Optional - Return File objects in the result. Default is false.
  - **showDisabledFiles** (Boolean) - Optional - Show the "Show Disabled Files" toggle. Default is false.
  - **excludeAcceptAllOption** (Boolean) - Optional - Exclude the "All Files" option.
  - **agree** (String/Object) - Optional - Label or config for the confirm button.
  - **decline** (String/Object) - Optional - Label or config for the cancel button.
  - **signal** (AbortSignal) - Optional - Signal to abort the dialog.

### Response
- **ok** (Boolean) - Whether the dialog was confirmed.
- **directory** (String) - The directory the dialog was in when confirmed.
- **selection** (Array) - Array of selected file paths.
- **files** (Array) - Array of File objects (if returnFiles is true).
```

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

### Menu Configuration Object

Source: https://docs.win93.xyz/docs/gui/menu

Define menu structure using a configuration object with a tag and items array.

```json
{
  tag: "ui-menu",
  items: [
    { text: "Open", picto: "folder-open", action: () => {} },
    { text: "Save", picto: "save", action: () => {} },
    "-",
    { text: "Delete", picto: "trash", action: () => {} },
  ],
}
```

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

### explorer(path?, options?)

Source: https://docs.win93.xyz/docs/gui/explorer

Opens an explorer dialog to navigate directories.

```APIDOC
## explorer(path?, options?)

### Description
Opens an explorer dialog. Returns a Promise that resolves to an ExplorerComponent.

### Parameters
- **path** (String) - Optional - The directory to open. Default is "/".
- **options** (Object) - Optional - Additional configuration options.
  - **signal** (AbortSignal) - Optional - Signal to abort the dialog.
  - **picto** (String) - Optional - Dialog pictogram icon.
  - **isPicker** (Boolean) - Optional - Whether the explorer is in file-picker mode.
```

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

### Implement a Custom Backend Driver

Source: https://docs.win93.xyz/docs/internals/indexeddb

Skeleton for creating a new driver by extending BrowserDriver and defining the required store methods.

```javascript
import { BrowserDriver } from "../class/BrowserDriver.js"  

  

class MyBackendDriver extends BrowserDriver {  

  mask = 0x19  

  

  async init() {  

    // optional: feature detection or fallback  

    // if unsupported: return this.getDriver("indexeddb")  

  

    this.store = {  

      has: async (id) => {  

        // return true/false  

      },  

      get: async (id) => {  

        // return File/Blob or undefined  

      },  

      set: async (id, data) => {  

        // persist data  

      },  

      delete: async (id) => {  

        // remove entry  

      },  

    }  

  

    return super.init()  

  }  

}  

  

export const driver = (...args) => new MyBackendDriver(...args).init()
```

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

### Initialize Combobox via Modular Import

Source: https://docs.win93.xyz/docs/gui/combobox

Use the combobox function to programmatically create a dropdown with defined options and an action callback.

```javascript
import { combobox } from "/42/ui/control/combobox.js"  

  

const myCombobox = combobox({  

  value: "option1",  

  options: [  

    { value: "option1", text: "Option 1" },  

    { value: "option2", text: "Option 2" },  

    { value: "option3", text: "Option 3" },  

  ],  

  action(e, el) {  

    console.log(el.value)  

  },  

})  
```

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

### explorer(path)

Source: https://docs.win93.xyz/docs/gui/explorer

Creates and displays a file explorer dialog at the specified path.

```APIDOC
## explorer(path)

### Description
Creates a file explorer dialog. Wraps the folder component with a navigation bar, context menu, and dialog integration.

### Parameters
- **path** (String) - Required - The initial path to display in the explorer.
```

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

### Define folder component via plan

Source: https://docs.win93.xyz/docs/gui/folder

Define the folder component using a configuration object with the ui-folder tag.

```json
{

  tag: "ui-folder",

  value: "~/documents/",

}
```

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

### Importing the render function

Source: https://docs.win93.xyz/docs/api/gui/render

Import the render function from the API module to begin creating DOM elements from plan objects.

```javascript
import { render } from "/42/api/gui/render.js"
```

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

### Write data to file

Source: https://docs.win93.xyz/docs/api/persist

Write configuration data to a specified file path. Supported formats include .json, .json5, and .cbor.

```javascript
await persist.write("/config/app.json", { theme: "dark", fontSize: 14 })
```

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

### Initialize scope component modularly

Source: https://docs.win93.xyz/docs/gui/scope

Import the scope function and initialize it with configuration options.

```javascript
import { scope } from "/42/ui/media/scope.js"  

  

const myScope = scope({  

  fill: true,  

  mode: "auto",  

})  
```

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

### Initialize Terminal Component

Source: https://docs.win93.xyz/docs/gui/terminal

Use the createTerminal function to instantiate a new terminal instance with specific configuration options.

```javascript
import { createTerminal } from "/42/ui/interface/terminal.js"  

  

const term = await createTerminal({  

  fontSize: 14,  

  fontFamily: "monospace",  

  cols: 80,  

  rows: 24,  

})  
```

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

### exportFile(selection, options?)

Source: https://docs.win93.xyz/docs/api/actions

Exports files to the user's real filesystem.

```APIDOC
## exportFile(selection, options?)

### Description
Exports files to the user's real filesystem via a browser download/save dialog.

### Usage
```javascript
await actions.exportFile(["/docs/report.txt"])
```
```

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

### openContainingFolder(selection)

Source: https://docs.win93.xyz/docs/api/actions

Opens the parent directory of each selected item.

```APIDOC
## openContainingFolder(selection)

### Description
Opens the parent directory of each selected item in the file explorer.

### Usage
```javascript
await actions.openContainingFolder(["/docs/report.txt"])
```
```

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

### Define a picto configuration object

Source: https://docs.win93.xyz/docs/gui/picto

Define a picto using a plain object structure with tag, value, and size properties.

```json
{

  tag: "ui-picto",

  value: "folder",

  size: 16,

}
```

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

### Import persist module

Source: https://docs.win93.xyz/docs/api/persist

Import the persist module to access key-value storage functionality.

```javascript
import { persist } from "/42/api/persist.js"
```

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

### writeDir(path)

Source: https://docs.win93.xyz/docs/api/fs

Creates a directory.

```APIDOC
## writeDir(path)

### Description
Creates a directory.

### Signature
`writeDir(path: FsPath): Promise<void>`
```

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

### Plan-based Shader Configuration

Source: https://docs.win93.xyz/docs/gui/shader

Define a shader component using a plan object with the required tag and source path.

```json
{

  tag: "ui-shader",

  src: "/path/to/shader.glsl",

}  
```

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

### getURL(path, ...args)

Source: https://docs.win93.xyz/docs/api/fs

Resolves a usable URL for a filesystem path.

```APIDOC
## getURL(path, ...args)

### Description
Resolves a usable URL for a filesystem path. Accepts string or URL; external origins are returned unchanged, while local paths are resolved through the active driver.

### Signature
`getURL(path: FsPath | URL, ...args: AnyArgs): Promise<string | URL>`
```

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

### Export Folder Action

Source: https://docs.win93.xyz/docs/api/actions

Exports a folder as a .tar archive with a progress dialog.

```javascript
await actions.exportFolder(["/projects/my-app/"])
```

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

### copy(from, to, options)

Source: https://docs.win93.xyz/docs/api/fs

Copies a file or directory tree. If options.delete is true, it behaves as a move operation.

```APIDOC
## copy(from, to, options)

### Description
Copies a file or directory tree. File copy uses stream piping, and directory copy walks recursively.

### Parameters
- **from** (FsPath) - Required - Source path
- **to** (FsPath) - Required - Destination path
- **options** (Object) - Optional
  - **delete** (boolean) - Optional - If true, behaves as move
  - **silent** (boolean) - Optional - If true, suppresses events
  - **progress** (Function) - Optional - Transform stream for progress tracking
```

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

### Read data from file

Source: https://docs.win93.xyz/docs/api/persist

Read configuration data from a specified file path using an asynchronous call.

```javascript
const config = await persist.read("/config/app.json")
```

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

### Perform basic file operations

Source: https://docs.win93.xyz/docs/api/fs

Use these methods to write, read, and delete text files in the file system.

```javascript
await fs.writeText("~/notes/todo.txt", "hello")  

const text = await fs.readText("~/notes/todo.txt")  

await fs.delete("~/notes/todo.txt")
```

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

### Creating a custom control

Source: https://docs.win93.xyz/docs/api/gui/control

Define a new control by extending the Control class and using the static plan property to configure the tag and options.

```javascript
class MySlider extends Control {  

  static plan = {  

    tag: "ui-my-slider",  

    options: {  

      valueType: "number",  

    },  

  }  

}  

  

Control.define(MySlider)
```

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

### http(url, options)

Source: https://docs.win93.xyz/docs/api/http

The primary function for making network requests. It extends the native RequestInit interface with additional options for path encoding, cache bypassing, and filesystem fallback control.

```APIDOC
## http(url, options)

### Description
Performs a network request using the fetch-based client. It supports standard fetch options plus custom properties for request behavior.

### Parameters
#### Path Parameters
- **url** (string) - Required - The destination URL for the request.

#### Options
- **encodePath** (boolean) - Optional - Whether to encode the URL path.
- **fresh** (boolean) - Optional - Bypass cache.
- **ignoreFileSystem** (boolean) - Optional - Skip filesystem fallback.

### Request Example
```javascript
import { http } from "/42/api/http.js";
await http("https://api.example.com/data");
```

### Response
- **HTTPError** (object) - Thrown on network errors, containing the response status and message.
```

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

### Define tabs using a plan object

Source: https://docs.win93.xyz/docs/gui/tabs

Define the tab structure using a configuration object with the ui-tabs tag.

```json
{

  tag: "ui-tabs",

  content: [

    { tag: "button", text: "Tab 1" },

    { tag: "button", text: "Tab 2" },

  ],

}
```

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

### source(path, options)

Source: https://docs.win93.xyz/docs/api/fs

Returns a readable stream for file content.

```APIDOC
## source(path, options)

### Description
Returns a readable stream for file content. Source initialization is lazy (first `pull`). If the stream has no chunks, it emits a single empty `Uint8Array` before close.

### Signature
`source(path: FsPath, options?: { queuingStrategy?: QueuingStrategy<Uint8Array> } & Record<string, unknown>): ReadableStream<Uint8Array>`
```

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

### Keyboard shortcut sequences

Source: https://docs.win93.xyz/docs/guide/events

Define a chain of steps separated by spaces that must be performed in order.

```javascript
{
	on: {
		"Ctrl+K Ctrl+C"(e) {
			// step 1 then step 2 in order
		},
	},
}
```

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

### folderPicker(path)

Source: https://docs.win93.xyz/docs/gui/explorer

Opens a folder picker dialog to select a directory.

```APIDOC
## folderPicker(path)

### Description
Opens a folder picker dialog for selecting a directory.

### Parameters
- **path** (String) - Required - The starting directory path.

### Response
- **ok** (Boolean) - Whether the operation was confirmed.
- **directory** (String) - The selected directory.
```

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

### Event Dispatching

Source: https://docs.win93.xyz/docs/guide/events

How to manually trigger events within the system using the standard EventTarget API.

```APIDOC
## Event Dispatching

### Description
Use the standard `EventTarget.dispatchEvent` method to trigger custom events. This is the primary way to communicate system-wide actions like reboots.

### Usage
`window.dispatchEvent(new CustomEvent("eventName"))`

### Example
`window.dispatchEvent(new CustomEvent("ui:desktop.reboot"))`
```

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

### ui:desktop.reboot

Source: https://docs.win93.xyz/docs/guide/events

Event triggered to reboot the system.

```APIDOC
## ui:desktop.reboot

### Description
Reboots the system.
```

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

### Copy and move directories

Source: https://docs.win93.xyz/docs/api/fs

Use these methods to manage directory structures by copying or moving them to new locations.

```javascript
await fs.copy("~/projects/demo", "~/backup/demo")  

await fs.move("~/backup/demo", "~/archive/demo")
```

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

### exportFolder(selection, options?)

Source: https://docs.win93.xyz/docs/api/actions

Exports folders as .tar archives.

```APIDOC
## exportFolder(selection, options?)

### Description
Exports folders as .tar archives. Shows a progress dialog with a cancel option.

### Usage
```javascript
await actions.exportFolder(["/projects/my-app/"])
```
```

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

### moveToCenter(options)

Source: https://docs.win93.xyz/docs/gui/dialog

Centers the dialog window on the screen.

```APIDOC
## moveToCenter(options)

### Description
Centers the dialog window. Note: This method is currently reported as buggy.

### Parameters
- **options** (JSON) - Optional - Configuration object including 'animate' (Boolean) and 'fixOverlap' (Boolean).
```

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

### ui:explorer.navigate

Source: https://docs.win93.xyz/docs/guide/events

Event triggered when the explorer changes the active directory.

```APIDOC
## ui:explorer.navigate

### Description
Fires when explorer changes the active directory.
```

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

### Lifecycle Methods

Source: https://docs.win93.xyz/docs/api/gui/component

Standard lifecycle callbacks for custom components.

```APIDOC
## Lifecycle Methods

### connectedCallback()
Called automatically when the component is added to the DOM.

### disconnectedCallback()
Called automatically when the component is removed from the DOM.

### attributeChangedCallback(name, oldVal, newVal)
Called when an observed attribute changes.
- **name** (String) - The name of the attribute.
- **oldVal** (String) - The previous value.
- **newVal** (String) - The new value.
```

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

### Declarative Model Configuration

Source: https://docs.win93.xyz/docs/gui/model

Define a model using a plain object structure for use within the UI framework.

```json
{

  tag: "ui-model",

  src: "/models/object.glb",

  interactive: true,

  visualization: "both",

}
```

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

### move(from, to, options)

Source: https://docs.win93.xyz/docs/api/fs

Moves a file or directory tree. Throws an error if the destination is inside the source directory.

```APIDOC
## move(from, to, options)

### Description
Moves a file or directory tree. Throws if destination is inside source directory.

### Parameters
- **from** (FsPath) - Required - Source path
- **to** (FsPath) - Required - Destination path
- **options** (Object) - Optional
  - **silent** (boolean) - Optional - If true, suppresses events
  - **progress** (Function) - Optional - Transform stream for progress tracking
```

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

### Open file handle

Source: https://docs.win93.xyz/docs/api/fs

Opens a file handle or resource with backend-specific return types.

```typescript
open(path: FsPath, ...args: AnyArgs): Promise<unknown>
```

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

### link(path, ...args)

Source: https://docs.win93.xyz/docs/api/fs

Creates or updates a link entry.

```APIDOC
## link(path, ...args)

### Description
Creates or updates a link entry. Exact link semantics depend on the driver and args.

### Signature
`link(path: FsPath, ...args: AnyArgs): Promise<void>`
```

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

### Define Combobox via Plan Object

Source: https://docs.win93.xyz/docs/gui/combobox

Configure the combobox using a declarative plan object with the ui-combobox tag.

```json
{
  tag: "ui-combobox",
  value: "option1",
  options: [
    { value: "option1", text: "Option 1" },
    { value: "option2", text: "Option 2" },
    { value: "option3", text: "Option 3" },
  ],
  action(e, el) {
    console.log(el.value)
  },
}
```

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

### write(path, ...args)

Source: https://docs.win93.xyz/docs/api/fs

Writes content to a file.

```APIDOC
## write(path, ...args)

### Description
Writes content to a file. Concurrent writes to the same path are serialized.

### Signature
`write(path: FsPath, ...args: AnyArgs): Promise<void>`
```

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

### Modular Model Usage

Source: https://docs.win93.xyz/docs/gui/model

Import the model function to programmatically render a 3D asset with specific configuration options.

```javascript
import { model } from "/42/ui/media/model.js"  

  

const myModel = model({  

  src: "/models/object.glb",  

  interactive: true,  

  visualization: "both",  

})  
```

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

### Open a file picker dialog

Source: https://docs.win93.xyz/docs/gui/explorer

Opens a file picker for selecting text files with multiple selection enabled.

```javascript
const { ok, directory, selection, files } = await filePickerOpen("~/documents", {  

  types: [{ accept: { "text/plain": [".txt"] }, description: "Text Files" }],  

  multiple: true,  

})  
```

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

### copyLocation(selection, options?)

Source: https://docs.win93.xyz/docs/api/actions

Copies the path string(s) of the selected item(s) to the system clipboard. Shows a toast notification by default.

```APIDOC
## copyLocation(selection, options?)

### Description
Copies the path string(s) of the selected item(s) to the system clipboard. Shows a toast notification by default.

### Usage
```javascript
await actions.copyLocation(["/docs/report.txt"])
```
```

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

### Configure scope component via plan

Source: https://docs.win93.xyz/docs/gui/scope

Define the scope component using a configuration object with the ui-scope tag.

```json
{

  tag: "ui-scope",

  fill: true,

  mode: "auto",

}
```

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

### ui:menu.items

Source: https://docs.win93.xyz/docs/guide/events

Event triggered when a menu is opened, allowing for context menu extension.

```APIDOC
## ui:menu.items

### Description
Fires when a menu is opened (typically a context menu). This is useful for extending explorer and adding entries to the context menu. The "opener" is in `e.target.openerEl`.
```

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

### filePickerOpen(path)

Source: https://docs.win93.xyz/docs/gui/explorer

Opens a file picker dialog to select a file from the specified path.

```APIDOC
## filePickerOpen(path)

### Description
Opens a file picker dialog for selecting files.

### Parameters
- **path** (String) - Required - The starting directory path.

### Response
- **ok** (Boolean) - Whether the operation was confirmed.
- **directory** (String) - The selected directory.
- **selection** (Array) - The list of selected files.
```

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

### JSON and JSON5 Operations

Source: https://docs.win93.xyz/docs/api/fs

Methods for reading and writing JSON and JSON5 configuration files.

```APIDOC
## fs.writeJSON(path)
### Description
Writes data to a JSON file.

## fs.readJSON(path)
### Description
Reads and parses a JSON file.

## fs.writeJSON5(path)
### Description
Writes data to a JSON5 file.

## fs.readJSON5(path)
### Description
Reads and parses a JSON5 file.
```

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

### Export File Action

Source: https://docs.win93.xyz/docs/api/actions

Exports files to the local machine via a browser download dialog.

```javascript
await actions.exportFile(["/docs/report.txt"])
```