From 59f051c1bafeb1f03d5786463377e54f4d630ccd Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Mon, 1 Apr 2024 12:33:12 +0800
Subject: [PATCH 1/2] feat: mention that the user can change the placement of
 the dev toolbar

---
 src/content/docs/en/guides/dev-toolbar.mdx        |  9 ++++++++-
 .../en/reference/dev-toolbar-app-reference.mdx    | 15 +++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/dev-toolbar.mdx b/src/content/docs/en/guides/dev-toolbar.mdx
index 5fd57f0694f41..6801178362382 100644
--- a/src/content/docs/en/guides/dev-toolbar.mdx
+++ b/src/content/docs/en/guides/dev-toolbar.mdx
@@ -34,7 +34,14 @@ The dev toolbar aims to provide a quick and easy way to catch common issues duri
 
 ### Settings
 
-The Settings app allows you to toggle different settings for the development toolbar, such as verbose logging, and the ability to disable notifications.
+The Settings app allows you to tweak different settings for the development toolbar. For example:
+
+- Adjust the placement of the dev toolbar. Available options:
+  - Bottom left
+  - Bottom center (default)
+  - Bottom right
+- Turn on verbose logging
+- Disable notifications
 
 ## Extending the dev toolbar
 
diff --git a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
index f769cb1135cf5..8c3c98db5298f 100644
--- a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
+++ b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
@@ -144,6 +144,21 @@ This event is fired when the user clicks on the app icon in the Dev Toolbar.
   }
 ```
 
+### `placement-updated`
+
+This event is fired when the user changes the placement of the Dev Toolbar.
+
+```ts title="src/my-app.js" {4-6}
+  export default {
+    // ...
+    init(canvas, eventTarget) {
+      eventTarget.addEventListener('placement-updated', (event) => {
+        console.log(`Placement set to ${event.detail.placement}`);
+      })
+    }
+  }
+```
+
 #### `state: boolean`
 
 Indicates whether or not the app is enabled after the user's click.

From 8a9660652a6207f96949be9dab41786b54dba68e Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Thu, 4 Apr 2024 16:38:32 +0800
Subject: [PATCH 2/2] Apply suggestions from review

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 src/content/docs/en/guides/dev-toolbar.mdx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/content/docs/en/guides/dev-toolbar.mdx b/src/content/docs/en/guides/dev-toolbar.mdx
index 6801178362382..13933abafc7b7 100644
--- a/src/content/docs/en/guides/dev-toolbar.mdx
+++ b/src/content/docs/en/guides/dev-toolbar.mdx
@@ -34,14 +34,7 @@ The dev toolbar aims to provide a quick and easy way to catch common issues duri
 
 ### Settings
 
-The Settings app allows you to tweak different settings for the development toolbar. For example:
-
-- Adjust the placement of the dev toolbar. Available options:
-  - Bottom left
-  - Bottom center (default)
-  - Bottom right
-- Turn on verbose logging
-- Disable notifications
+The Settings app allows you to configure options for the development toolbar, such as verbose logging, disabling notifications, and adjusting its placement on your screen.
 
 ## Extending the dev toolbar