diff --git a/src/docs/src/UI/alert.md b/src/docs/src/UI/alert.md
index 47d9e7d67..c06c1181f 100755
--- a/src/docs/src/UI/alert.md
+++ b/src/docs/src/UI/alert.md
@@ -1,7 +1,7 @@
---
title: puter.ui.alert()
description: Displays an alert dialog by Puter.
-platforms: [apps]
+platforms: [ websites, apps]
---
Displays an alert dialog by Puter. Puter improves upon the traditional browser alerts by providing more flexibility. For example, you can customize the buttons displayed.
@@ -27,7 +27,7 @@ An array of objects that define the buttons to be displayed in the alert dialog.
A `Promise` that resolves to the value of the button pressed. If the `value` property of button is set it is returned, otherwise `label` property will be returned.
## Examples
-```html
+```html;ui-alert
diff --git a/src/docs/src/UI/contextMenu.md b/src/docs/src/UI/contextMenu.md
index 6fd1f4939..743192ab8 100644
--- a/src/docs/src/UI/contextMenu.md
+++ b/src/docs/src/UI/contextMenu.md
@@ -1,7 +1,7 @@
---
title: puter.ui.contextMenu()
description: Displays a context menu at the current cursor position.
-platforms: [apps]
+platforms: [ websites, apps]
---
Displays a context menu at the current cursor position. Context menus provide a convenient way to show contextual actions that users can perform.
@@ -31,11 +31,11 @@ This method does not return a value. The context menu is displayed immediately a
## Examples
-```html
+```html;ui-context-menu
-
+
Right-click me to show context menu
diff --git a/src/docs/src/UI/hideSpinner.md b/src/docs/src/UI/hideSpinner.md
index 12b06a7ca..bb6a94020 100644
--- a/src/docs/src/UI/hideSpinner.md
+++ b/src/docs/src/UI/hideSpinner.md
@@ -1,7 +1,7 @@
---
title: puter.ui.hideSpinner()
description: Hides the active spinner instance.
-platforms: [apps]
+platforms: [ websites, apps]
---
Hides the active spinner instance.
@@ -13,7 +13,7 @@ puter.ui.hideSpinner()
## Examples
-```html
+```html;ui-spinner
diff --git a/src/docs/src/UI/notify.md b/src/docs/src/UI/notify.md
index d5adef88c..c41778fd2 100644
--- a/src/docs/src/UI/notify.md
+++ b/src/docs/src/UI/notify.md
@@ -1,10 +1,10 @@
---
title: puter.ui.notify()
description: Displays a desktop notification in Puter.
-platforms: [apps]
+platforms: [ websites, apps]
---
-Displays a desktop notification in Puter. Use this to surface app events without interrupting the user.
+Displays a notification. Use this to surface events without interrupting the user.
## Syntax
```js
@@ -27,7 +27,7 @@ An object that configures the notification.
A `Promise` that resolves to the notification UID.
## Examples
-```html
+```html;ui-notify
diff --git a/src/docs/src/UI/setMenubar.md b/src/docs/src/UI/setMenubar.md
index 4736e7eaa..40875bf51 100755
--- a/src/docs/src/UI/setMenubar.md
+++ b/src/docs/src/UI/setMenubar.md
@@ -1,7 +1,7 @@
---
title: puter.ui.setMenubar()
description: Creates a menubar in the UI.
-platforms: [apps]
+platforms: [ websites, apps]
---
Creates a menubar in the UI. The menubar is a horizontal bar at the top of the window that contains menus.
@@ -32,7 +32,7 @@ An array of submenu items.
## Examples
-```html
+```html;ui-set-menubar
diff --git a/src/docs/src/UI/showColorPicker.md b/src/docs/src/UI/showColorPicker.md
index a1950e902..8f729bb35 100755
--- a/src/docs/src/UI/showColorPicker.md
+++ b/src/docs/src/UI/showColorPicker.md
@@ -1,7 +1,7 @@
---
title: puter.ui.showColorPicker()
description: Presents a color picker dialog for selecting a color.
-platforms: [apps]
+platforms: [ websites, apps]
---
Presents the user with a color picker dialog allowing them to select a color.
@@ -15,7 +15,7 @@ puter.ui.showColorPicker(options)
## Examples
-```html
+```html;ui-show-color-picker
diff --git a/src/docs/src/UI/showFontPicker.md b/src/docs/src/UI/showFontPicker.md
index dd242483f..437742b22 100755
--- a/src/docs/src/UI/showFontPicker.md
+++ b/src/docs/src/UI/showFontPicker.md
@@ -1,7 +1,7 @@
---
title: puter.ui.showFontPicker()
description: Presents a list of fonts for previewing and selecting.
-platforms: [apps]
+platforms: [ websites, apps]
---
Presents the user with a list of fonts allowing them to preview and select a font.
@@ -20,7 +20,7 @@ The default font to select when the font picker is opened.
## Examples
-```html
+```html;ui-show-font-picker
diff --git a/src/docs/src/UI/showSpinner.md b/src/docs/src/UI/showSpinner.md
index da133c775..c4930f848 100644
--- a/src/docs/src/UI/showSpinner.md
+++ b/src/docs/src/UI/showSpinner.md
@@ -1,7 +1,7 @@
---
title: puter.ui.showSpinner()
description: Shows an overlay with a spinner in the center of the screen.
-platforms: [apps]
+platforms: [websites, apps]
---
Shows an overlay with a spinner in the center of the screen. If multiple instances of `puter.ui.showSpinner()` are called, only one spinner will be shown until all instances are hidden.
@@ -12,7 +12,7 @@ puter.ui.showSpinner()
```
## Examples
-```html
+```html;ui-spinner
diff --git a/src/docs/src/examples.js b/src/docs/src/examples.js
index 55f7e6e18..017ed451e 100644
--- a/src/docs/src/examples.js
+++ b/src/docs/src/examples.js
@@ -632,6 +632,59 @@ const examples = [
},
],
},
+ {
+ title: 'UI',
+ children: [
+ {
+ title: 'Alert Dialog',
+ description: 'Display customizable alert dialogs with Puter.js UI API. Run and experiment with this example directly in the playground.',
+ slug: 'ui-alert',
+ source: '/playground/examples/ui-alert.html',
+ },
+ {
+ title: 'Prompt Dialog',
+ description: 'Display prompt dialogs to collect user input with Puter.js UI API. Run and experiment with this example directly in the playground.',
+ slug: 'ui-prompt',
+ source: '/playground/examples/ui-prompt.html',
+ },
+ {
+ title: 'Notification',
+ description: 'Display desktop notifications with Puter.js UI API. Run and experiment with this example directly in the playground.',
+ slug: 'ui-notify',
+ source: '/playground/examples/ui-notify.html',
+ },
+ {
+ title: 'Context Menu',
+ description: 'Display context menus with submenus and separators using Puter.js UI API. Run and experiment with this example directly in the playground.',
+ slug: 'ui-context-menu',
+ source: '/playground/examples/ui-context-menu.html',
+ },
+ {
+ title: 'Color Picker',
+ description: 'Present a color picker dialog with Puter.js UI API. Run and experiment with this example directly in the playground.',
+ slug: 'ui-show-color-picker',
+ source: '/playground/examples/ui-show-color-picker.html',
+ },
+ {
+ title: 'Font Picker',
+ description: 'Present a font picker dialog with Puter.js UI API. Run and experiment with this example directly in the playground.',
+ slug: 'ui-show-font-picker',
+ source: '/playground/examples/ui-show-font-picker.html',
+ },
+ {
+ title: 'Spinner (Show/Hide)',
+ description: 'Show and hide a loading spinner overlay with Puter.js UI API. Run and experiment with this example directly in the playground.',
+ slug: 'ui-spinner',
+ source: '/playground/examples/ui-spinner.html',
+ },
+ {
+ title: 'Menubar',
+ description: 'Create a menubar with nested menus using Puter.js UI API. Run and experiment with this example directly in the playground.',
+ slug: 'ui-set-menubar',
+ source: '/playground/examples/ui-set-menubar.html',
+ },
+ ],
+ },
{
title: 'Workers',
children: [
diff --git a/src/docs/src/playground/examples/ui-alert.html b/src/docs/src/playground/examples/ui-alert.html
new file mode 100644
index 000000000..3bb88058a
--- /dev/null
+++ b/src/docs/src/playground/examples/ui-alert.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/docs/src/playground/examples/ui-context-menu.html b/src/docs/src/playground/examples/ui-context-menu.html
new file mode 100644
index 000000000..f651c2c41
--- /dev/null
+++ b/src/docs/src/playground/examples/ui-context-menu.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+ Right-click me to show context menu
+
+
+
+
+
\ No newline at end of file
diff --git a/src/docs/src/playground/examples/ui-notify.html b/src/docs/src/playground/examples/ui-notify.html
new file mode 100644
index 000000000..012ff0e2f
--- /dev/null
+++ b/src/docs/src/playground/examples/ui-notify.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/docs/src/playground/examples/ui-prompt.html b/src/docs/src/playground/examples/ui-prompt.html
new file mode 100644
index 000000000..e244da019
--- /dev/null
+++ b/src/docs/src/playground/examples/ui-prompt.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/docs/src/playground/examples/ui-set-menubar.html b/src/docs/src/playground/examples/ui-set-menubar.html
new file mode 100644
index 000000000..38f29c5ea
--- /dev/null
+++ b/src/docs/src/playground/examples/ui-set-menubar.html
@@ -0,0 +1,51 @@
+
+
+
+
A menubar has been added to the top of this window. Try clicking the menu items.
+
+
+
\ No newline at end of file
diff --git a/src/docs/src/playground/examples/ui-show-color-picker.html b/src/docs/src/playground/examples/ui-show-color-picker.html
new file mode 100644
index 000000000..5712a007f
--- /dev/null
+++ b/src/docs/src/playground/examples/ui-show-color-picker.html
@@ -0,0 +1,15 @@
+
+
+
+
Click the button to pick a color. The background will change to the selected color.
+
+
+
+
\ No newline at end of file
diff --git a/src/docs/src/playground/examples/ui-show-font-picker.html b/src/docs/src/playground/examples/ui-show-font-picker.html
new file mode 100644
index 000000000..8411565f4
--- /dev/null
+++ b/src/docs/src/playground/examples/ui-show-font-picker.html
@@ -0,0 +1,15 @@
+
+
+
+
A cool Font Picker demo!
+
+
+
+
\ No newline at end of file
diff --git a/src/docs/src/playground/examples/ui-spinner.html b/src/docs/src/playground/examples/ui-spinner.html
new file mode 100644
index 000000000..45e69ccc8
--- /dev/null
+++ b/src/docs/src/playground/examples/ui-spinner.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
\ No newline at end of file