From 306b55450a286cd9d850b18f3e3b80b3bc9faea7 Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Thu, 28 Mar 2024 15:01:52 +0800
Subject: [PATCH 01/13] feat(toolbar): add `placement` to settings

---
 .../astro/src/runtime/client/dev-toolbar/apps/settings.ts  | 2 +-
 packages/astro/src/runtime/client/dev-toolbar/settings.ts  | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
index d403fc191bdc..df90da828bb8 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
@@ -161,7 +161,7 @@ export default {
 					case 'checkbox': {
 						const astroToggle = document.createElement('astro-dev-toolbar-toggle');
 						astroToggle.input.addEventListener('change', setting.changeEvent);
-						astroToggle.input.checked = settings.config[setting.settingKey];
+						astroToggle.input.checked = settings.config[setting.settingKey] as boolean;
 						label.append(astroToggle);
 						break;
 					}
diff --git a/packages/astro/src/runtime/client/dev-toolbar/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/settings.ts
index d031b636da1d..f41a4f8897b6 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/settings.ts
@@ -1,11 +1,16 @@
+export const placements = ['bottom-left', 'bottom-center', 'bottom-right'] as const;
+export type Placement = (typeof placements)[number];
+
 export interface Settings {
 	disableAppNotification: boolean;
 	verbose: boolean;
+	placement: Placement;
 }
 
 export const defaultSettings = {
 	disableAppNotification: false,
 	verbose: false,
+	placement: 'bottom-center',
 } satisfies Settings;
 
 export const settings = getSettings();
@@ -25,7 +30,7 @@ function getSettings() {
 		_settings = { ..._settings, ...JSON.parse(toolbarSettings) };
 	}
 
-	function updateSetting(key: keyof Settings, value: Settings[typeof key]) {
+	function updateSetting<Key extends keyof Settings>(key: Key, value: Settings[Key]) {
 		_settings[key] = value;
 		localStorage.setItem('astro:dev-toolbar:settings', JSON.stringify(_settings));
 	}

From eca10516434929c19a1eb043558c1cc1990c4219 Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Thu, 28 Mar 2024 15:15:09 +0800
Subject: [PATCH 02/13] feat(toolbar): update `settings.placement` with
 `<select>`

---
 .../client/dev-toolbar/apps/settings.ts       | 58 ++++++++++++++++++-
 .../runtime/client/dev-toolbar/settings.ts    |  3 +
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
index df90da828bb8..e63578abce2c 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
@@ -1,5 +1,11 @@
 import type { DevToolbarApp } from '../../../../@types/astro.js';
-import { type Settings, settings } from '../settings.js';
+import {
+	type Placement,
+	type Settings,
+	isValidPlacement,
+	placements,
+	settings,
+} from '../settings.js';
 import { closeOnOutsideClick, createWindowElement } from './utils/window.js';
 
 interface SettingRow {
@@ -43,6 +49,21 @@ const settingsRows = [
 			}
 		},
 	},
+	{
+		name: 'Placement',
+		description: 'Adjust the placement of the dev toolbar.',
+		input: 'select',
+		settingKey: 'placement',
+		changeEvent: (evt: Event) => {
+			if (evt.currentTarget instanceof HTMLSelectElement) {
+				const placement = evt.currentTarget.value;
+				if (isValidPlacement(placement)) {
+					settings.updateSetting('placement', placement);
+					settings.logger.verboseLog(`Placement set to ${placement}`);
+				}
+			}
+		},
+	},
 ] satisfies SettingRow[];
 
 export default {
@@ -128,6 +149,27 @@ export default {
 					a:hover {
 						color: #f4ecfd;
 					}
+
+					select {
+						appearance: none;
+						text-align-last: center;
+						display: inline-block;
+						font-family: inherit;
+						font-size: 14px;
+						padding: 4px 24px 4px 8px;
+						border: 1px solid rgba(145, 152, 173, 1);
+						border-radius: 4px;
+						color: rgba(191, 193, 201, 1);
+						background-color: transparent;
+						background-image:
+							linear-gradient(45deg, transparent 50%, rgba(191, 193, 201, 1) 50%),
+							linear-gradient(135deg, rgba(191, 193, 201, 1) 50%, transparent 50%);
+						background-position:
+							calc(100% - 12px) calc(1em - 2px),
+							calc(100% - 8px) calc(1em - 2px);
+						background-size: 4px 4px;
+						background-repeat: no-repeat;
+					}
 				</style>
 				<header>
 					<h1><astro-dev-toolbar-icon icon="gear"></astro-dev-toolbar-icon> Settings</h1>
@@ -165,6 +207,20 @@ export default {
 						label.append(astroToggle);
 						break;
 					}
+					case 'select': {
+						const select = document.createElement('select');
+						placements.forEach((placement) => {
+							const option = document.createElement('option');
+							option.setAttribute('value', placement);
+							option.textContent =
+								`${placement.slice(0, 1).toUpperCase()}${placement.slice(1)}`.replace('-', ' ');
+							select.append(option);
+						});
+						select.value = settings.config[setting.settingKey] as Placement;
+						select.addEventListener('change', setting.changeEvent);
+						label.append(select);
+						break;
+					}
 					default:
 						break;
 				}
diff --git a/packages/astro/src/runtime/client/dev-toolbar/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/settings.ts
index f41a4f8897b6..b534ae43a4dc 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/settings.ts
@@ -1,5 +1,8 @@
 export const placements = ['bottom-left', 'bottom-center', 'bottom-right'] as const;
 export type Placement = (typeof placements)[number];
+export function isValidPlacement(value: string): value is Placement {
+	return placements.map(String).includes(value);
+}
 
 export interface Settings {
 	disableAppNotification: boolean;

From 7aed7ab0055e2d5ea5b4456f580ed0f06357a53b Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Thu, 28 Mar 2024 15:26:23 +0800
Subject: [PATCH 03/13] feat(toolbar): adjust position based on
 `settings.placement`

---
 .../client/dev-toolbar/apps/settings.ts       |  1 +
 .../client/dev-toolbar/apps/utils/window.ts   |  3 ++
 .../src/runtime/client/dev-toolbar/toolbar.ts | 28 +++++++++++++++----
 .../client/dev-toolbar/ui-library/window.ts   | 11 +++++++-
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
index e63578abce2c..21bf7b927d84 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
@@ -58,6 +58,7 @@ const settingsRows = [
 			if (evt.currentTarget instanceof HTMLSelectElement) {
 				const placement = evt.currentTarget.value;
 				if (isValidPlacement(placement)) {
+					document.querySelector('astro-dev-toolbar')?.setToolbarPlacement(placement);
 					settings.updateSetting('placement', placement);
 					settings.logger.verboseLog(`Placement set to ${placement}`);
 				}
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts
index 95882cf31198..a4ed79729c1e 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts
@@ -1,5 +1,8 @@
+import { settings } from '../../settings.js';
+
 export function createWindowElement(content: string) {
 	const windowElement = document.createElement('astro-dev-toolbar-window');
+	windowElement.setAttribute('data-placement', settings.config.placement);
 	windowElement.innerHTML = content;
 	return windowElement;
 }
diff --git a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
index 33142b8f61cd..a8434aa32046 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import type { DevToolbarApp as DevToolbarAppDefinition } from '../../../@types/astro.js';
-import { settings } from './settings.js';
+import { type Placement, settings } from './settings.js';
 import { type Icon, getIconElement, isDefinedIcon } from './ui-library/icons.js';
 
 export type DevToolbarApp = DevToolbarAppDefinition & {
@@ -57,8 +57,6 @@ export class AstroDevToolbar extends HTMLElement {
 			#dev-toolbar-root {
 				position: fixed;
 				bottom: 0px;
-				left: 50%;
-				transform: translate(-50%, 0%);
 				z-index: 2000000010;
 				display: flex;
 				flex-direction: column;
@@ -75,6 +73,17 @@ export class AstroDevToolbar extends HTMLElement {
 				opacity: 0.2;
 			}
 
+			#dev-toolbar-root[data-placement="bottom-left"] {
+				left: 16px;
+			}
+			#dev-toolbar-root[data-placement="bottom-center"] {
+				left: 50%;
+				transform: translateX(-50%);
+			}
+			#dev-toolbar-root[data-placement="bottom-right"] {
+				right: 16px;
+			}
+
 			#dev-bar-hitbox-above,
 			#dev-bar-hitbox-below {
 				width: 100%;
@@ -240,9 +249,7 @@ export class AstroDevToolbar extends HTMLElement {
 				width: 1px;
 			}
 		</style>
-		<div id="dev-toolbar-root" data-hidden ${
-			settings.config.disableAppNotification ? 'data-no-notification' : ''
-		}>
+		<div id="dev-toolbar-root" data-hidden ${settings.config.disableAppNotification ? 'data-no-notification' : ''} data-placement="${settings.config.placement}">
 			<div id="dev-bar-hitbox-above"></div>
 			<div id="dev-bar">
 				<div id="bar-container">
@@ -553,6 +560,15 @@ export class AstroDevToolbar extends HTMLElement {
 			?.querySelector('#dropdown')
 			?.toggleAttribute('data-no-notification', !newStatus);
 	}
+
+	setToolbarPlacement(newPlacement: Placement) {
+		this.devToolbarContainer?.setAttribute('data-placement', newPlacement);
+		this.apps.forEach((app) => {
+			this.getAppCanvasById(app.id)
+				?.shadowRoot?.querySelector('astro-dev-toolbar-window')
+				?.setAttribute('data-placement', newPlacement);
+		});
+	}
 }
 
 export class DevToolbarCanvas extends HTMLElement {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts
index f1032d2a9860..2a53650eff64 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts
@@ -24,9 +24,18 @@ export class DevToolbarWindow extends HTMLElement {
 					position: fixed;
 					z-index: 999999999;
 					bottom: 72px;
+					box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
+				}
+
+				:host([data-placement="bottom-left"]) {
+					left: 16px;
+				}
+				:host([data-placement="bottom-center"]) {
 					left: 50%;
 					transform: translateX(-50%);
-					box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
+				}
+				:host([data-placement="bottom-right"]) {
+					right: 16px;
 				}
 
 				@media (forced-colors: active) {

From 5050d1bfeb425eba5defb2258ef5c2e9358534b3 Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Thu, 28 Mar 2024 17:23:55 +0800
Subject: [PATCH 04/13] test(toolbar): add a test case for `settings.placement`

---
 packages/astro/e2e/dev-toolbar.test.js | 33 ++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/astro/e2e/dev-toolbar.test.js b/packages/astro/e2e/dev-toolbar.test.js
index ac8d7b4dff59..890a909e53b6 100644
--- a/packages/astro/e2e/dev-toolbar.test.js
+++ b/packages/astro/e2e/dev-toolbar.test.js
@@ -349,4 +349,37 @@ test.describe('Dev Toolbar', () => {
 			await expect(appButton).not.toHaveClass('active');
 		}
 	});
+
+	test('can adjust the placement', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/audit-no-warning'));
+
+		const toolbar = page.locator('astro-dev-toolbar');
+		const settingsAppButton = toolbar.locator('button[data-app-id="astro:settings"]');
+		await settingsAppButton.click();
+
+		const settingsAppCanvas = toolbar.locator(
+			'astro-dev-toolbar-app-canvas[data-app-id="astro:settings"]'
+		);
+		const settingsWindow = settingsAppCanvas.locator('astro-dev-toolbar-window');
+		await expect(settingsWindow).toBeVisible();
+
+		for (const placement of ['bottom-left', 'bottom-center', 'bottom-right']) {
+			const select = toolbar.getByLabel('Placement');
+			await expect(select).toBeVisible();
+			await select.selectOption(placement);
+
+			const toolbarRoot = toolbar.locator('#dev-toolbar-root');
+			await expect(toolbarRoot).toHaveAttribute('data-placement', placement);
+
+			for (const appId of ['astro:home', 'astro:xray', 'astro:settings']) {
+				const appButton = toolbar.locator(`button[data-app-id="${appId}"]`);
+				await appButton.click();
+
+				const appCanvas = toolbar.locator(`astro-dev-toolbar-app-canvas[data-app-id="${appId}"]`);
+				const appWindow = appCanvas.locator('astro-dev-toolbar-window');
+				await expect(appWindow).toBeVisible();
+				await expect(appWindow).toHaveAttribute('data-placement', placement);
+			}
+		}
+	});
 });

From 7efe653ae7ef4602e70a34ea9bbbcf3d125e1fcc Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Fri, 29 Mar 2024 21:27:32 +0800
Subject: [PATCH 05/13] refactor(toolbar): extract select element from settings
 app

---
 packages/astro/src/@types/astro.ts            |  2 +
 .../client/dev-toolbar/apps/settings.ts       | 41 +++------------
 .../runtime/client/dev-toolbar/entrypoint.ts  |  2 +
 .../client/dev-toolbar/ui-library/index.ts    |  1 +
 .../client/dev-toolbar/ui-library/select.ts   | 52 +++++++++++++++++++
 5 files changed, 65 insertions(+), 33 deletions(-)
 create mode 100644 packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts

diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
index dbf929320af0..de699df3116c 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -29,6 +29,7 @@ import type {
 	DevToolbarCard,
 	DevToolbarHighlight,
 	DevToolbarIcon,
+	DevToolbarSelect,
 	DevToolbarToggle,
 	DevToolbarTooltip,
 	DevToolbarWindow,
@@ -2903,6 +2904,7 @@ declare global {
 		'astro-dev-toolbar-button': DevToolbarButton;
 		'astro-dev-toolbar-icon': DevToolbarIcon;
 		'astro-dev-toolbar-card': DevToolbarCard;
+		'astro-dev-toolbar-select': DevToolbarSelect;
 
 		// Deprecated names
 		// TODO: Remove in Astro 5.0
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
index 21bf7b927d84..d9b0f5bd8b79 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
@@ -1,11 +1,5 @@
 import type { DevToolbarApp } from '../../../../@types/astro.js';
-import {
-	type Placement,
-	type Settings,
-	isValidPlacement,
-	placements,
-	settings,
-} from '../settings.js';
+import { type Settings, isValidPlacement, placements, settings } from '../settings.js';
 import { closeOnOutsideClick, createWindowElement } from './utils/window.js';
 
 interface SettingRow {
@@ -150,27 +144,6 @@ export default {
 					a:hover {
 						color: #f4ecfd;
 					}
-
-					select {
-						appearance: none;
-						text-align-last: center;
-						display: inline-block;
-						font-family: inherit;
-						font-size: 14px;
-						padding: 4px 24px 4px 8px;
-						border: 1px solid rgba(145, 152, 173, 1);
-						border-radius: 4px;
-						color: rgba(191, 193, 201, 1);
-						background-color: transparent;
-						background-image:
-							linear-gradient(45deg, transparent 50%, rgba(191, 193, 201, 1) 50%),
-							linear-gradient(135deg, rgba(191, 193, 201, 1) 50%, transparent 50%);
-						background-position:
-							calc(100% - 12px) calc(1em - 2px),
-							calc(100% - 8px) calc(1em - 2px);
-						background-size: 4px 4px;
-						background-repeat: no-repeat;
-					}
 				</style>
 				<header>
 					<h1><astro-dev-toolbar-icon icon="gear"></astro-dev-toolbar-icon> Settings</h1>
@@ -209,17 +182,19 @@ export default {
 						break;
 					}
 					case 'select': {
-						const select = document.createElement('select');
+						const astroSelect = document.createElement('astro-dev-toolbar-select');
 						placements.forEach((placement) => {
 							const option = document.createElement('option');
 							option.setAttribute('value', placement);
+							if (placement === settings.config[setting.settingKey]) {
+								option.selected = true;
+							}
 							option.textContent =
 								`${placement.slice(0, 1).toUpperCase()}${placement.slice(1)}`.replace('-', ' ');
-							select.append(option);
+							astroSelect.append(option);
 						});
-						select.value = settings.config[setting.settingKey] as Placement;
-						select.addEventListener('change', setting.changeEvent);
-						label.append(select);
+						astroSelect.element.addEventListener('change', setting.changeEvent);
+						label.append(astroSelect);
 						break;
 					}
 					default:
diff --git a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
index f115decf0676..bbc5cf85d466 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
@@ -23,6 +23,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 			DevToolbarButton,
 			DevToolbarBadge,
 			DevToolbarIcon,
+			DevToolbarSelect,
 		},
 	] = await Promise.all([
 		loadDevToolbarApps() as DevToolbarAppDefinition[],
@@ -45,6 +46,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 	customElements.define('astro-dev-toolbar-button', DevToolbarButton);
 	customElements.define('astro-dev-toolbar-badge', DevToolbarBadge);
 	customElements.define('astro-dev-toolbar-icon', DevToolbarIcon);
+	customElements.define('astro-dev-toolbar-select', DevToolbarSelect);
 
 	// Add deprecated names
 	// TODO: Remove in Astro 5.0
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts
index c515dccfc721..7b1197ab70c2 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts
@@ -3,6 +3,7 @@ export { DevToolbarButton } from './button.js';
 export { DevToolbarCard } from './card.js';
 export { DevToolbarHighlight } from './highlight.js';
 export { DevToolbarIcon } from './icon.js';
+export { DevToolbarSelect } from './select.js';
 export { DevToolbarToggle } from './toggle.js';
 export { DevToolbarTooltip } from './tooltip.js';
 export { DevToolbarWindow } from './window.js';
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts
new file mode 100644
index 000000000000..9f9609cf64d8
--- /dev/null
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts
@@ -0,0 +1,52 @@
+export class DevToolbarSelect extends HTMLElement {
+	shadowRoot: ShadowRoot;
+	element: HTMLSelectElement;
+
+	constructor() {
+		super();
+		this.shadowRoot = this.attachShadow({ mode: 'open' });
+		this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          --gray-text: rgba(191, 193, 201, 1);
+          --gray-border: rgba(145, 152, 173, 1);
+
+          --text-color: var(--gray-text);
+          --border-color: var(--gray-border);
+        }
+        select {
+          appearance: none;
+          text-align-last: center;
+          display: inline-block;
+          font-family: system-ui, sans-serif;
+          font-size: 14px;
+          padding: 4px 24px 4px 8px;
+          border: 1px solid var(--border-color);
+          border-radius: 4px;
+          color: var(--text-color);
+          background-color: transparent;
+          background-image:
+            linear-gradient(45deg, transparent 50%, var(--text-color) 50%),
+            linear-gradient(135deg, var(--text-color) 50%, transparent 50%);
+          background-position:
+            calc(100% - 12px) calc(1em - 2px),
+            calc(100% - 8px) calc(1em - 2px);
+          background-size: 4px 4px;
+          background-repeat: no-repeat;
+        }
+      </style>
+      <slot></slot>
+    `;
+		this.element = document.createElement('select');
+		this.shadowRoot.addEventListener('slotchange', (event) => {
+			if (event.target instanceof HTMLSlotElement) {
+				// Manually add slotted elements to <select> because it only accepts <option> as children and escapes other elements including <slot>
+				this.element.append(...event.target.assignedNodes());
+			}
+		});
+	}
+
+	connectedCallback() {
+		this.shadowRoot.append(this.element);
+	}
+}

From c84bdd79f2d7294f988a9a96e4818638b28b5213 Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Sat, 30 Mar 2024 00:22:30 +0800
Subject: [PATCH 06/13] feat(toolbar): allow select element to have colors

---
 .../client/dev-toolbar/ui-library/select.ts   | 58 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts
index 9f9609cf64d8..ee56f3cb0796 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/select.ts
@@ -1,6 +1,27 @@
+import { settings } from '../settings.js';
+
+const styles = ['purple', 'gray', 'red', 'green', 'yellow', 'blue'] as const;
+
+type SelectStyle = (typeof styles)[number];
+
 export class DevToolbarSelect extends HTMLElement {
 	shadowRoot: ShadowRoot;
 	element: HTMLSelectElement;
+	_selectStyle: SelectStyle = 'gray';
+
+	get selectStyle() {
+		return this._selectStyle;
+	}
+	set selectStyle(value) {
+		if (!styles.includes(value)) {
+			settings.logger.error(`Invalid style: ${value}, expected one of ${styles.join(', ')}.`);
+			return;
+		}
+		this._selectStyle = value;
+		this.updateStyle();
+	}
+
+	static observedAttributes = ['select-style'];
 
 	constructor() {
 		super();
@@ -8,8 +29,23 @@ export class DevToolbarSelect extends HTMLElement {
 		this.shadowRoot.innerHTML = `
       <style>
         :host {
+          --purple-text: rgba(224, 204, 250, 1);
+					--purple-border: rgba(113, 24, 226, 1);
+
           --gray-text: rgba(191, 193, 201, 1);
-          --gray-border: rgba(145, 152, 173, 1);
+					--gray-border:rgba(191, 193, 201, 1);
+
+					--red-text: rgba(249, 196, 215, 1);
+					--red-border: rgba(179, 62, 102, 1);
+
+					--green-text: rgba(213, 249, 196, 1);
+					--green-border: rgba(61, 125, 31, 1);
+
+					--yellow-text: rgba(249, 233, 196, 1);
+					--yellow-border: rgba(181, 138, 45, 1);
+
+					--blue-text: rgba(189, 195, 255, 1);
+					--blue-border: rgba(54, 69, 217, 1);
 
           --text-color: var(--gray-text);
           --border-color: var(--gray-border);
@@ -35,6 +71,7 @@ export class DevToolbarSelect extends HTMLElement {
           background-repeat: no-repeat;
         }
       </style>
+      <style id="selected-style"></style>
       <slot></slot>
     `;
 		this.element = document.createElement('select');
@@ -48,5 +85,24 @@ export class DevToolbarSelect extends HTMLElement {
 
 	connectedCallback() {
 		this.shadowRoot.append(this.element);
+		this.updateStyle();
+	}
+
+	attributeChangedCallback() {
+		if (this.hasAttribute('select-style')) {
+			this.selectStyle = this.getAttribute('select-style') as SelectStyle;
+		}
+	}
+
+	updateStyle() {
+		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
+		if (style) {
+			style.innerHTML = `
+        :host {
+          --text-color: var(--${this.selectStyle}-text);
+          --border-color: var(--${this.selectStyle}-border);
+        }
+      `;
+		}
 	}
 }

From 3684d526d51afa759fa4616d7e7cb806f023bf7a Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Sat, 30 Mar 2024 00:24:48 +0800
Subject: [PATCH 07/13] test(toolbar): fix failed test case

---
 packages/astro/e2e/dev-toolbar.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/e2e/dev-toolbar.test.js b/packages/astro/e2e/dev-toolbar.test.js
index 890a909e53b6..e53e8ebe0258 100644
--- a/packages/astro/e2e/dev-toolbar.test.js
+++ b/packages/astro/e2e/dev-toolbar.test.js
@@ -364,7 +364,7 @@ test.describe('Dev Toolbar', () => {
 		await expect(settingsWindow).toBeVisible();
 
 		for (const placement of ['bottom-left', 'bottom-center', 'bottom-right']) {
-			const select = toolbar.getByLabel('Placement');
+			const select = toolbar.getByRole('combobox');
 			await expect(select).toBeVisible();
 			await select.selectOption(placement);
 

From 25ef09147507979dd91cfd6e716787d6c1e40cb8 Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Sat, 30 Mar 2024 23:54:44 +0800
Subject: [PATCH 08/13] refactor(toolbar): add `placement` property to window
 element

---
 .../client/dev-toolbar/apps/settings.ts       |  3 +-
 .../client/dev-toolbar/apps/utils/window.ts   |  4 +-
 .../runtime/client/dev-toolbar/settings.ts    |  6 +-
 .../src/runtime/client/dev-toolbar/toolbar.ts |  5 +-
 .../client/dev-toolbar/ui-library/window.ts   | 71 ++++++++++++++++---
 5 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
index d9b0f5bd8b79..8b58c2413e18 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
@@ -1,5 +1,6 @@
 import type { DevToolbarApp } from '../../../../@types/astro.js';
-import { type Settings, isValidPlacement, placements, settings } from '../settings.js';
+import { type Settings, settings } from '../settings.js';
+import { isValidPlacement, placements } from '../ui-library/window.js';
 import { closeOnOutsideClick, createWindowElement } from './utils/window.js';
 
 interface SettingRow {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts
index a4ed79729c1e..a4a8ff65cf96 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts
@@ -1,9 +1,9 @@
 import { settings } from '../../settings.js';
 
-export function createWindowElement(content: string) {
+export function createWindowElement(content: string, placement = settings.config.placement) {
 	const windowElement = document.createElement('astro-dev-toolbar-window');
-	windowElement.setAttribute('data-placement', settings.config.placement);
 	windowElement.innerHTML = content;
+	windowElement.placement = placement;
 	return windowElement;
 }
 
diff --git a/packages/astro/src/runtime/client/dev-toolbar/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/settings.ts
index b534ae43a4dc..34ab7b5c0526 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/settings.ts
@@ -1,8 +1,4 @@
-export const placements = ['bottom-left', 'bottom-center', 'bottom-right'] as const;
-export type Placement = (typeof placements)[number];
-export function isValidPlacement(value: string): value is Placement {
-	return placements.map(String).includes(value);
-}
+import type { Placement } from './ui-library/window.js';
 
 export interface Settings {
 	disableAppNotification: boolean;
diff --git a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
index a8434aa32046..1b1a3037111b 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
@@ -1,7 +1,8 @@
 /* eslint-disable no-console */
 import type { DevToolbarApp as DevToolbarAppDefinition } from '../../../@types/astro.js';
-import { type Placement, settings } from './settings.js';
+import { settings } from './settings.js';
 import { type Icon, getIconElement, isDefinedIcon } from './ui-library/icons.js';
+import { type Placement } from './ui-library/window.js';
 
 export type DevToolbarApp = DevToolbarAppDefinition & {
 	builtIn: boolean;
@@ -566,7 +567,7 @@ export class AstroDevToolbar extends HTMLElement {
 		this.apps.forEach((app) => {
 			this.getAppCanvasById(app.id)
 				?.shadowRoot?.querySelector('astro-dev-toolbar-window')
-				?.setAttribute('data-placement', newPlacement);
+				?.setAttribute('placement', newPlacement);
 		});
 	}
 }
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts
index 2a53650eff64..35cd0aa6779d 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/window.ts
@@ -1,5 +1,32 @@
+import { defaultSettings, settings } from '../settings.js';
+
+export const placements = ['bottom-left', 'bottom-center', 'bottom-right'] as const;
+
+export type Placement = (typeof placements)[number];
+
+export function isValidPlacement(value: string): value is Placement {
+	return placements.map(String).includes(value);
+}
+
 export class DevToolbarWindow extends HTMLElement {
 	shadowRoot: ShadowRoot;
+	_placement: Placement = defaultSettings.placement;
+
+	get placement() {
+		return this._placement;
+	}
+	set placement(value) {
+		if (!isValidPlacement(value)) {
+			settings.logger.error(
+				`Invalid placement: ${value}, expected one of ${placements.join(', ')}, got ${value}.`
+			);
+			return;
+		}
+		this._placement = value;
+		this.updateStyle();
+	}
+
+	static observedAttributes = ['placement'];
 
 	constructor() {
 		super();
@@ -27,17 +54,6 @@ export class DevToolbarWindow extends HTMLElement {
 					box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
 				}
 
-				:host([data-placement="bottom-left"]) {
-					left: 16px;
-				}
-				:host([data-placement="bottom-center"]) {
-					left: 50%;
-					transform: translateX(-50%);
-				}
-				:host([data-placement="bottom-right"]) {
-					right: 16px;
-				}
-
 				@media (forced-colors: active) {
 					:host {
 						background: white;
@@ -84,8 +100,41 @@ export class DevToolbarWindow extends HTMLElement {
 					line-height: 1.5em;
 				}
 			</style>
+			<style id="selected-style"></style>
 
 			<slot />
 		`;
+
+		this.updateStyle();
+	}
+
+	attributeChangedCallback() {
+		if (this.hasAttribute('placement'))
+			this.placement = this.getAttribute('placement') as Placement;
+	}
+
+	updateStyle() {
+		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
+		if (style) {
+			const styleMap: Record<Placement, string> = {
+				'bottom-left': `
+					:host {
+						left: 16px;
+					}
+				`,
+				'bottom-center': `
+					:host {
+						left: 50%;
+						transform: translateX(-50%);
+					}
+				`,
+				'bottom-right': `
+					:host {
+						right: 16px;
+					}
+				`,
+			};
+			style.innerHTML = styleMap[this.placement];
+		}
 	}
 }

From a714cb10331b951b678769f2bdfca447dfeb6559 Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Mon, 1 Apr 2024 11:21:56 +0800
Subject: [PATCH 09/13] refactor(toolbar): notify apps when placement changes

---
 .../src/runtime/client/dev-toolbar/apps/astro.ts    | 12 ++++++++++++
 .../src/runtime/client/dev-toolbar/apps/settings.ts | 13 ++++++++++++-
 .../src/runtime/client/dev-toolbar/apps/xray.ts     | 12 ++++++++++++
 .../astro/src/runtime/client/dev-toolbar/toolbar.ts | 10 +++++++---
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
index 430da8ea70ab..f91514ba5174 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
@@ -1,5 +1,6 @@
 import type { DevToolbarApp, DevToolbarMetadata } from '../../../../@types/astro.js';
 import { type Icon, isDefinedIcon } from '../ui-library/icons.js';
+import type { Placement } from '../ui-library/window.js';
 import { colorForIntegration, iconForIntegration } from './utils/icons.js';
 import { closeOnOutsideClick, createWindowElement } from './utils/window.js';
 
@@ -43,6 +44,17 @@ export default {
 				if (!integrationData) fetchIntegrationData();
 			}
 		});
+		eventTarget.addEventListener('placement-updated', (evt) => {
+			if (!(evt instanceof CustomEvent)) {
+				return;
+			}
+			const windowElement = canvas.querySelector('astro-dev-toolbar-window');
+			if (!windowElement) {
+				return;
+			}
+			const event: CustomEvent<{ placement: Placement }> = evt;
+			windowElement.placement = event.detail.placement;
+		});
 
 		closeOnOutsideClick(eventTarget);
 
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
index 8b58c2413e18..811c0c3475c0 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
@@ -1,6 +1,6 @@
 import type { DevToolbarApp } from '../../../../@types/astro.js';
 import { type Settings, settings } from '../settings.js';
-import { isValidPlacement, placements } from '../ui-library/window.js';
+import { type Placement, isValidPlacement, placements } from '../ui-library/window.js';
 import { closeOnOutsideClick, createWindowElement } from './utils/window.js';
 
 interface SettingRow {
@@ -71,6 +71,17 @@ export default {
 
 		document.addEventListener('astro:after-swap', createSettingsWindow);
 
+		eventTarget.addEventListener('placement-updated', (evt) => {
+			if (!(evt instanceof CustomEvent)) {
+				return;
+			}
+			const windowElement = canvas.querySelector('astro-dev-toolbar-window');
+			if (!windowElement) {
+				return;
+			}
+			const event: CustomEvent<{ placement: Placement }> = evt;
+			windowElement.placement = event.detail.placement;
+		});
 		closeOnOutsideClick(eventTarget);
 
 		function createSettingsWindow() {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts
index 893f6f6b46fb..eeb0080f9beb 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts
@@ -1,6 +1,7 @@
 import { escape as escapeHTML } from 'html-escaper';
 import type { DevToolbarApp, DevToolbarMetadata } from '../../../../@types/astro.js';
 import type { DevToolbarHighlight } from '../ui-library/highlight.js';
+import type { Placement } from '../ui-library/window.js';
 import {
 	attachTooltipToHighlight,
 	createHighlight,
@@ -24,6 +25,17 @@ export default {
 		document.addEventListener('astro:after-swap', addIslandsOverlay);
 		document.addEventListener('astro:page-load', refreshIslandsOverlayPositions);
 
+		eventTarget.addEventListener('placement-updated', (evt) => {
+			if (!(evt instanceof CustomEvent)) {
+				return;
+			}
+			const windowElement = canvas.querySelector('astro-dev-toolbar-window');
+			if (!windowElement) {
+				return;
+			}
+			const event: CustomEvent<{ placement: Placement }> = evt;
+			windowElement.placement = event.detail.placement;
+		});
 		closeOnOutsideClick(eventTarget);
 
 		function addIslandsOverlay() {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
index 1b1a3037111b..d2a6afc32d63 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
@@ -565,9 +565,13 @@ export class AstroDevToolbar extends HTMLElement {
 	setToolbarPlacement(newPlacement: Placement) {
 		this.devToolbarContainer?.setAttribute('data-placement', newPlacement);
 		this.apps.forEach((app) => {
-			this.getAppCanvasById(app.id)
-				?.shadowRoot?.querySelector('astro-dev-toolbar-window')
-				?.setAttribute('placement', newPlacement);
+			app.eventTarget.dispatchEvent(
+				new CustomEvent('placement-updated', {
+					detail: {
+						placement: newPlacement,
+					},
+				})
+			);
 		});
 	}
 }

From 0049994505a9a04522dd36c05f90a8bf96944d02 Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Mon, 1 Apr 2024 12:12:42 +0800
Subject: [PATCH 10/13] test(toolbar): fix failed test case

---
 packages/astro/e2e/dev-toolbar.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/e2e/dev-toolbar.test.js b/packages/astro/e2e/dev-toolbar.test.js
index e53e8ebe0258..e7989b78befb 100644
--- a/packages/astro/e2e/dev-toolbar.test.js
+++ b/packages/astro/e2e/dev-toolbar.test.js
@@ -378,7 +378,7 @@ test.describe('Dev Toolbar', () => {
 				const appCanvas = toolbar.locator(`astro-dev-toolbar-app-canvas[data-app-id="${appId}"]`);
 				const appWindow = appCanvas.locator('astro-dev-toolbar-window');
 				await expect(appWindow).toBeVisible();
-				await expect(appWindow).toHaveAttribute('data-placement', placement);
+				await expect(appWindow).toHaveJSProperty('placement', placement);
 			}
 		}
 	});

From be69fc40bb6601fa0d26bb8dcf31f80330d3a520 Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Wed, 3 Apr 2024 21:52:10 +0800
Subject: [PATCH 11/13] refactor(toolbar): extract
 `synchronizePlacementOnUpdate` function

---
 .../runtime/client/dev-toolbar/apps/astro.ts  | 19 ++++++------------
 .../client/dev-toolbar/apps/settings.ts       | 20 +++++++------------
 .../client/dev-toolbar/apps/utils/window.ts   | 15 ++++++++++++++
 .../runtime/client/dev-toolbar/apps/xray.ts   | 19 ++++++------------
 4 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
index f91514ba5174..11e093234290 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
@@ -1,8 +1,11 @@
 import type { DevToolbarApp, DevToolbarMetadata } from '../../../../@types/astro.js';
 import { type Icon, isDefinedIcon } from '../ui-library/icons.js';
-import type { Placement } from '../ui-library/window.js';
 import { colorForIntegration, iconForIntegration } from './utils/icons.js';
-import { closeOnOutsideClick, createWindowElement } from './utils/window.js';
+import {
+	closeOnOutsideClick,
+	createWindowElement,
+	synchronizePlacementOnUpdate,
+} from './utils/window.js';
 
 const astroLogo =
 	'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 99 26" width="100"><path fill="#fff" d="M6.70402 22.1453c-1.17459-1.0737-1.51748-3.3297-1.02811-4.9641.84853 1.0304 2.02424 1.3569 3.24204 1.5411 1.88005.2844 3.72635.178 5.47285-.6813.1998-.0984.3844-.2292.6027-.3617.1639.4755.2065.9554.1493 1.4439-.1392 1.1898-.7313 2.1088-1.673 2.8054-.3765.2787-.775.5278-1.1639.7905-1.1948.8075-1.518 1.7544-1.0691 3.1318.0107.0336.0202.0671.0444.149-.6101-.273-1.0557-.6705-1.39518-1.1931-.3586-.5517-.52921-1.1619-.53819-1.8221-.00449-.3213-.00449-.6455-.0477-.9623-.10551-.7722-.46804-1.118-1.15102-1.1379-.70094-.0205-1.2554.4129-1.40244 1.0953-.01122.0523-.02749.1041-.04377.1649l.00112.0006Z"/><path fill="url(#paint0_linear_386_2739)" d="M6.70402 22.1453c-1.17459-1.0737-1.51748-3.3297-1.02811-4.9641.84853 1.0304 2.02424 1.3569 3.24204 1.5411 1.88005.2844 3.72635.178 5.47285-.6813.1998-.0984.3844-.2292.6027-.3617.1639.4755.2065.9554.1493 1.4439-.1392 1.1898-.7313 2.1088-1.673 2.8054-.3765.2787-.775.5278-1.1639.7905-1.1948.8075-1.518 1.7544-1.0691 3.1318.0107.0336.0202.0671.0444.149-.6101-.273-1.0557-.6705-1.39518-1.1931-.3586-.5517-.52921-1.1619-.53819-1.8221-.00449-.3213-.00449-.6455-.0477-.9623-.10551-.7722-.46804-1.118-1.15102-1.1379-.70094-.0205-1.2554.4129-1.40244 1.0953-.01122.0523-.02749.1041-.04377.1649l.00112.0006Z"/><path fill="#fff" d="M0 16.909s3.47815-1.6944 6.96603-1.6944l2.62973-8.13858c.09846-.39359.38592-.66106.71044-.66106.3246 0 .612.26747.7105.66106l2.6297 8.13858c4.1309 0 6.966 1.6944 6.966 1.6944S14.7045.814589 14.693.782298C14.5234.306461 14.2371 0 13.8512 0H6.76183c-.38593 0-.66063.306461-.84174.782298C5.90733.81398 0 16.909 0 16.909ZM36.671 11.7318c0 1.4262-1.7739 2.2779-4.2302 2.2779-1.5985 0-2.1638-.3962-2.1638-1.2281 0-.8715.7018-1.2875 2.3003-1.2875 1.4426 0 2.6707.0198 4.0937.1981v.0396Zm.0195-1.7629c-.8772-.19808-2.2028-.31693-3.7818-.31693-4.6006 0-6.7644 1.08943-6.7644 3.62483 0 2.6344 1.4815 3.6446 4.9125 3.6446 2.9046 0 4.8735-.7328 5.5947-2.5354h.117c-.0195.4358-.039.8716-.039 1.2083 0 .931.156 1.0102.9162 1.0102h3.5869c-.1949-.5546-.3119-2.1194-.3119-3.4663 0-1.446.0585-2.5355.0585-4.00123 0-2.99098-1.7934-4.89253-7.4077-4.89253-2.4173 0-5.1074.41596-7.1543 1.03.1949.81213.4679 2.45617.6043 3.5258 1.774-.83193 4.2887-1.18847 6.2381-1.18847 2.6902 0 3.4309.61404 3.4309 1.86193v.4952ZM46.5325 12.5637c-.4874.0594-1.1502.0594-1.8325.0594-.7213 0-1.3841-.0198-1.8324-.0792 0 .1585-.0195.3367-.0195.4952 0 2.476 1.618 3.922 7.3102 3.922 5.3609 0 7.0958-1.4262 7.0958-3.9418 0-2.3769-1.1501-3.5456-6.238-3.8031-3.9573-.17827-4.3082-.61404-4.3082-1.10924 0-.57442.5068-.87154 3.158-.87154 2.7487 0 3.4894.37635 3.4894 1.16866v.17827c.3899-.01981 1.0917-.03961 1.813-.03961.6823 0 1.423.0198 1.8519.05942 0-.17827.0195-.33674.0195-.47539 0-2.91175-2.4172-3.86252-7.0958-3.86252-5.2634 0-7.0373 1.2875-7.0373 3.8031 0 2.25805 1.423 3.66445 6.472 3.88235 3.7233.1188 4.1327.5348 4.1327 1.1092 0 .6141-.6043.8914-3.2165.8914-3.0021 0-3.7623-.416-3.7623-1.2677v-.1189ZM63.6883 2.125c-1.423 1.32712-3.9768 2.65425-5.3998 3.01079.0195.73289.0195 2.07982.0195 2.81271l1.3061.01981c-.0195 1.40635-.039 3.10979-.039 4.23889 0 2.6344 1.3841 4.6152 5.6922 4.6152 1.813 0 3.0216-.1981 4.5226-.515-.1559-.9706-.3314-2.4562-.3898-3.5852-.8968.2971-2.0274.4556-3.275.4556-1.735 0-2.4368-.4754-2.4368-1.8422 0-1.1884 0-2.29767.0195-3.32768 2.2223.01981 4.4446.05943 5.7507.09904-.0195-1.03.0195-2.51559.078-3.50598-1.8909.03961-4.0157.05942-5.7702.05942.0195-.87154.039-1.70347.0585-2.5354h-.1365ZM75.3313 7.35427c.0195-1.03001.039-1.90156.0585-2.75329h-3.9183c.0585 1.70347.0585 3.44656.0585 6.00172 0 2.5553-.0195 4.3182-.0585 6.0018h4.4836c-.078-1.1885-.0975-3.189-.0975-4.8925 0-2.69388 1.0917-3.46638 3.5674-3.46638 1.1502 0 1.9689.13865 2.6902.39615.0195-1.01019.2144-2.97117.3314-3.84271-.7408-.21789-1.5595-.35655-2.5537-.35655-2.1249-.0198-3.6844.85174-4.4056 2.93156l-.156-.0198ZM94.8501 10.5235c0 2.1591-1.5595 3.1693-4.0157 3.1693-2.4368 0-3.9963-.9508-3.9963-3.1693 0-2.21846 1.579-3.05039 3.9963-3.05039 2.4367 0 4.0157.89135 4.0157 3.05039Zm4.0743-.099c0-4.29832-3.353-6.21968-8.09-6.21968-4.7566 0-7.9926 1.92136-7.9926 6.21968 0 4.2785 3.0216 6.5762 7.9731 6.5762 4.9904 0 8.1095-2.2977 8.1095-6.5762Z"/><defs><linearGradient id="paint0_linear_386_2739" x1="5.46011" x2="16.8017" y1="25.9999" y2="20.6412" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>';
@@ -44,19 +47,9 @@ export default {
 				if (!integrationData) fetchIntegrationData();
 			}
 		});
-		eventTarget.addEventListener('placement-updated', (evt) => {
-			if (!(evt instanceof CustomEvent)) {
-				return;
-			}
-			const windowElement = canvas.querySelector('astro-dev-toolbar-window');
-			if (!windowElement) {
-				return;
-			}
-			const event: CustomEvent<{ placement: Placement }> = evt;
-			windowElement.placement = event.detail.placement;
-		});
 
 		closeOnOutsideClick(eventTarget);
+		synchronizePlacementOnUpdate(eventTarget, canvas);
 
 		function fetchIntegrationData() {
 			fetch('https://astro.build/api/v1/dev-overlay/', {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
index 811c0c3475c0..4f7dc14ce696 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
@@ -1,7 +1,11 @@
 import type { DevToolbarApp } from '../../../../@types/astro.js';
 import { type Settings, settings } from '../settings.js';
-import { type Placement, isValidPlacement, placements } from '../ui-library/window.js';
-import { closeOnOutsideClick, createWindowElement } from './utils/window.js';
+import { isValidPlacement, placements } from '../ui-library/window.js';
+import {
+	closeOnOutsideClick,
+	createWindowElement,
+	synchronizePlacementOnUpdate,
+} from './utils/window.js';
 
 interface SettingRow {
 	name: string;
@@ -71,18 +75,8 @@ export default {
 
 		document.addEventListener('astro:after-swap', createSettingsWindow);
 
-		eventTarget.addEventListener('placement-updated', (evt) => {
-			if (!(evt instanceof CustomEvent)) {
-				return;
-			}
-			const windowElement = canvas.querySelector('astro-dev-toolbar-window');
-			if (!windowElement) {
-				return;
-			}
-			const event: CustomEvent<{ placement: Placement }> = evt;
-			windowElement.placement = event.detail.placement;
-		});
 		closeOnOutsideClick(eventTarget);
+		synchronizePlacementOnUpdate(eventTarget, canvas);
 
 		function createSettingsWindow() {
 			const windowElement = createWindowElement(
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts
index a4a8ff65cf96..fb76c2a9ac5f 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts
@@ -1,4 +1,5 @@
 import { settings } from '../../settings.js';
+import type { Placement } from '../../ui-library/window.js';
 
 export function createWindowElement(content: string, placement = settings.config.placement) {
 	const windowElement = document.createElement('astro-dev-toolbar-window');
@@ -33,3 +34,17 @@ export function closeOnOutsideClick(
 		}
 	});
 }
+
+export function synchronizePlacementOnUpdate(eventTarget: EventTarget, canvas: ShadowRoot) {
+	eventTarget.addEventListener('placement-updated', (evt) => {
+		if (!(evt instanceof CustomEvent)) {
+			return;
+		}
+		const windowElement = canvas.querySelector('astro-dev-toolbar-window');
+		if (!windowElement) {
+			return;
+		}
+		const event: CustomEvent<{ placement: Placement }> = evt;
+		windowElement.placement = event.detail.placement;
+	});
+}
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts
index eeb0080f9beb..6dae6f6cacf6 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts
@@ -1,14 +1,17 @@
 import { escape as escapeHTML } from 'html-escaper';
 import type { DevToolbarApp, DevToolbarMetadata } from '../../../../@types/astro.js';
 import type { DevToolbarHighlight } from '../ui-library/highlight.js';
-import type { Placement } from '../ui-library/window.js';
 import {
 	attachTooltipToHighlight,
 	createHighlight,
 	getElementsPositionInDocument,
 	positionHighlight,
 } from './utils/highlight.js';
-import { closeOnOutsideClick, createWindowElement } from './utils/window.js';
+import {
+	closeOnOutsideClick,
+	createWindowElement,
+	synchronizePlacementOnUpdate,
+} from './utils/window.js';
 
 const icon =
 	'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z"/></svg>';
@@ -25,18 +28,8 @@ export default {
 		document.addEventListener('astro:after-swap', addIslandsOverlay);
 		document.addEventListener('astro:page-load', refreshIslandsOverlayPositions);
 
-		eventTarget.addEventListener('placement-updated', (evt) => {
-			if (!(evt instanceof CustomEvent)) {
-				return;
-			}
-			const windowElement = canvas.querySelector('astro-dev-toolbar-window');
-			if (!windowElement) {
-				return;
-			}
-			const event: CustomEvent<{ placement: Placement }> = evt;
-			windowElement.placement = event.detail.placement;
-		});
 		closeOnOutsideClick(eventTarget);
+		synchronizePlacementOnUpdate(eventTarget, canvas);
 
 		function addIslandsOverlay() {
 			islandsOverlays.forEach(({ highlightElement }) => {

From 9cceda97ef445abbb0298e00940c1ff0c8ee1679 Mon Sep 17 00:00:00 2001
From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com>
Date: Thu, 4 Apr 2024 21:45:30 +0800
Subject: [PATCH 12/13] chore: add changeset

---
 .changeset/dry-eels-yell.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dry-eels-yell.md

diff --git a/.changeset/dry-eels-yell.md b/.changeset/dry-eels-yell.md
new file mode 100644
index 000000000000..7cb37deca9ed
--- /dev/null
+++ b/.changeset/dry-eels-yell.md
@@ -0,0 +1,5 @@
+---
+"astro": minor
+---
+
+Allows the user to change the placement of the dev toolbar.

From ee1db274539afbb51eb335a36655b74ec5ca6747 Mon Sep 17 00:00:00 2001
From: mingjun <40516784+mingjunlu@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:28:21 +0800
Subject: [PATCH 13/13] chore: update changeset

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 .changeset/dry-eels-yell.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/dry-eels-yell.md b/.changeset/dry-eels-yell.md
index 7cb37deca9ed..3b7a20f3a1d3 100644
--- a/.changeset/dry-eels-yell.md
+++ b/.changeset/dry-eels-yell.md
@@ -2,4 +2,4 @@
 "astro": minor
 ---
 
-Allows the user to change the placement of the dev toolbar.
+Adds a new dev toolbar settings option to change the horizontal placement of the dev toolbar on your screen: bottom left, bottom center, or bottom right.