astro 3.4.3 → 3.4.4

package/components/Code.astro

@@ -1,4 +1,7 @@
 ---
+import path from 'node:path';
+import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
 import type {
 	BuiltinLanguage,
 	BuiltinTheme,
@@ -56,8 +59,25 @@ const {
 
 // shiki -> shikiji compat
 if (typeof lang === 'object') {
-	// `id` renamed to `name
-	if ((lang as any).id && !lang.name) {
+	// shikiji does not support `path`
+	// https://github.com/shikijs/shiki/blob/facb6ff37996129626f8066a5dccb4608e45f649/packages/shiki/src/loader.ts#L98
+	const langPath = (lang as any).path;
+	if (langPath) {
+		// shiki resolves path from within its package directory :shrug:
+		const astroRoot = fileURLToPath(new URL('../', import.meta.url));
+		const normalizedPath = path.isAbsolute(langPath) ? langPath : path.resolve(astroRoot, langPath);
+		try {
+			const content = fs.readFileSync(normalizedPath, 'utf-8');
+			const parsed = JSON.parse(content);
+			Object.assign(lang, parsed);
+		} catch (e) {
+			throw new Error(`Unable to find language file at ${normalizedPath}`, {
+				cause: e,
+			});
+		}
+	}
+	// `id` renamed to `name` (always override)
+	if ((lang as any).id) {
 		lang.name = (lang as any).id;
 	}
 	// `grammar` flattened to lang itself

package/components/Image.astro

@@ -1,6 +1,7 @@
 ---
 import { getImage, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
+import type { HTMLAttributes } from '../types';
 
 // The TypeScript diagnostic for JSX props uses the last member of the union to suggest props, so it would be better for
 // LocalImageProps to be last. Unfortunately, when we do this the error messages that remote images get are complete nonsense
@@ -24,8 +25,7 @@ if (typeof props.height === 'string') {
 
 const image = await getImage(props);
 
-const additionalAttributes: Record<string, any> = {};
-
+const additionalAttributes: HTMLAttributes<'img'> = {};
 if (image.srcSet.values.length > 0) {
 	additionalAttributes.srcset = image.srcSet.attribute;
 }

package/components/Picture.astro

@@ -49,9 +49,16 @@ const fallbackImage = await getImage({
 	densities: props.densities,
 });
 
-const additionalAttributes: Record<string, any> = {};
+const imgAdditionalAttributes: HTMLAttributes<'img'> = {};
+const sourceAdditionaAttributes: HTMLAttributes<'source'> = {};
+
+// Propagate the `sizes` attribute to the `source` elements
+if (props.sizes) {
+	sourceAdditionaAttributes.sizes = props.sizes;
+}
+
 if (fallbackImage.srcSet.values.length > 0) {
-	additionalAttributes.srcset = fallbackImage.srcSet.attribute;
+	imgAdditionalAttributes.srcset = fallbackImage.srcSet.attribute;
 }
 ---
 
@@ -62,8 +69,14 @@ if (fallbackImage.srcSet.values.length > 0) {
 				props.densities || (!props.densities && !props.widths)
 					? `${image.src}${image.srcSet.values.length > 0 ? ', ' + image.srcSet.attribute : ''}`
 					: image.srcSet.attribute;
-			return <source srcset={srcsetAttribute} type={'image/' + image.options.format} />;
+			return (
+				<source
+					srcset={srcsetAttribute}
+					type={'image/' + image.options.format}
+					{...sourceAdditionaAttributes}
+				/>
+			);
 		})
 	}
-	<img src={fallbackImage.src} {...additionalAttributes} {...fallbackImage.attributes} />
+	<img src={fallbackImage.src} {...imgAdditionalAttributes} {...fallbackImage.attributes} />
 </picture>

package/dist/@types/astro.d.ts

@@ -2058,6 +2058,7 @@ export interface DevOverlayPlugin {
     name: string;
     icon: Icon;
     init?(canvas: ShadowRoot, eventTarget: EventTarget): void | Promise<void>;
+    beforeTogglingOff?(canvas: ShadowRoot): boolean | Promise<boolean>;
 }
 export type DevOverlayMetadata = Window & typeof globalThis & {
     __astro_dev_overlay__: {

package/dist/assets/internal.js

@@ -60,6 +60,7 @@ async function getImage(options, imageConfig) {
   let imageURL = await service.getURL(validatedOptions, imageConfig);
   let srcSets = await Promise.all(
     srcSetTransforms.map(async (srcSet) => ({
+      transform: srcSet.transform,
       url: await service.getURL(srcSet.transform, imageConfig),
       descriptor: srcSet.descriptor,
       attributes: srcSet.attributes
@@ -68,6 +69,7 @@ async function getImage(options, imageConfig) {
   if (isLocalService(service) && globalThis.astroAsset.addStaticImage && !(isRemoteImage(validatedOptions.src) && imageURL === validatedOptions.src)) {
     imageURL = globalThis.astroAsset.addStaticImage(validatedOptions);
     srcSets = srcSetTransforms.map((srcSet) => ({
+      transform: srcSet.transform,
       url: globalThis.astroAsset.addStaticImage(srcSet.transform),
       descriptor: srcSet.descriptor,
       attributes: srcSet.attributes

package/dist/assets/services/service.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" resolution-mode="require"/>
 import type { AstroConfig } from '../../@types/astro.js';
-import type { ImageOutputFormat, ImageTransform } from '../types.js';
+import type { ImageOutputFormat, ImageTransform, UnresolvedSrcSetValue } from '../types.js';
 export type ImageService = LocalImageService | ExternalImageService;
 export declare function isLocalService(service: ImageService | undefined): service is LocalImageService;
 export declare function parseQuality(quality: string): string | number;
@@ -10,11 +10,6 @@ type ImageConfig<T> = Omit<AstroConfig['image'], 'service'> & {
         config: T;
     };
 };
-type SrcSetValue = {
-    transform: ImageTransform;
-    descriptor?: string;
-    attributes?: Record<string, any>;
-};
 interface SharedServiceProps<T extends Record<string, any> = Record<string, any>> {
     /**
      * Return the URL to the endpoint or URL your images are generated from.
@@ -31,7 +26,7 @@ interface SharedServiceProps<T extends Record<string, any> = Record<string, any>
      * While in most cases this is exclusively used for `srcset`, it can also be used in a more generic way to generate
      * multiple variants of the same image. For instance, you can use this to generate multiple aspect ratios or multiple formats.
      */
-    getSrcSet?: (options: ImageTransform, imageConfig: ImageConfig<T>) => SrcSetValue[] | Promise<SrcSetValue[]>;
+    getSrcSet?: (options: ImageTransform, imageConfig: ImageConfig<T>) => UnresolvedSrcSetValue[] | Promise<UnresolvedSrcSetValue[]>;
     /**
      * Return any additional HTML attributes separate from `src` that your service requires to show the image properly.
      *

package/dist/assets/types.d.ts

@@ -26,11 +26,17 @@ export interface ImageMetadata {
     format: ImageInputFormat;
     orientation?: number;
 }
-export interface SrcSetValue {
-    url: string;
+/**
+ * A yet to be completed with an url `SrcSetValue`. Other hooks will only see a resolved value, where the URL of the image has been added.
+ */
+export type UnresolvedSrcSetValue = {
+    transform: ImageTransform;
     descriptor?: string;
-    attributes?: Record<string, string>;
-}
+    attributes?: Record<string, any>;
+};
+export type SrcSetValue = UnresolvedSrcSetValue & {
+    url: string;
+};
 /**
  * A yet to be resolved image transform. Used by `getImage`
  */

package/dist/core/config/schema.js

@@ -1,7 +1,8 @@
 import { markdownConfigDefaults } from "@astrojs/markdown-remark";
 import { bundledThemes } from "shikiji";
+import fs from "node:fs";
 import path from "node:path";
-import { pathToFileURL } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import { z } from "zod";
 import { appendForwardSlash, prependForwardSlash, removeTrailingForwardSlash } from "../path.js";
 import "mdast-util-to-hast";
@@ -150,7 +151,21 @@ const AstroConfigSchema = z.object({
       langs: z.custom().array().transform((langs) => {
         for (const lang of langs) {
           if (typeof lang === "object") {
-            if (lang.id && !lang.name) {
+            const langPath = lang.path;
+            if (langPath) {
+              const astroRoot = fileURLToPath(new URL("../../../", import.meta.url));
+              const normalizedPath = path.isAbsolute(langPath) ? langPath : path.resolve(astroRoot, langPath);
+              try {
+                const content = fs.readFileSync(normalizedPath, "utf-8");
+                const parsed = JSON.parse(content);
+                Object.assign(lang, parsed);
+              } catch (e) {
+                throw new Error(`Unable to find language file at ${normalizedPath}`, {
+                  cause: e
+                });
+              }
+            }
+            if (lang.id) {
               lang.name = lang.id;
             }
             if (lang.grammar) {

package/dist/core/constants.js

@@ -1,4 +1,4 @@
-const ASTRO_VERSION = "3.4.3";
+const ASTRO_VERSION = "3.4.4";
 const SUPPORTED_MARKDOWN_FILE_EXTENSIONS = [
   ".markdown",
   ".mdown",

package/dist/core/dev/dev.js

@@ -20,7 +20,7 @@ async function dev(inlineConfig) {
       base: restart.container.settings.config.base
     })
   );
-  const currentVersion = "3.4.3";
+  const currentVersion = "3.4.4";
   if (currentVersion.includes("-")) {
     logger.warn(null, msg.prerelease({ currentVersion }));
   }

package/dist/core/messages.js

@@ -50,7 +50,7 @@ function serverStart({
   base,
   isRestart = false
 }) {
-  const version = "3.4.3";
+  const version = "3.4.4";
   const localPrefix = `${dim("\u2503")} Local    `;
   const networkPrefix = `${dim("\u2503")} Network  `;
   const emptyPrefix = " ".repeat(11);
@@ -235,7 +235,7 @@ function printHelp({
     message.push(
       linebreak(),
       `  ${bgGreen(black(` ${commandName} `))} ${green(
-        `v${"3.4.3"}`
+        `v${"3.4.4"}`
       )} ${headline}`
     );
   }

package/dist/core/preview/static-preview-server.js

@@ -35,7 +35,7 @@ async function createStaticPreviewServer(settings, logger) {
     null,
     msg.serverStart({
       startupTime: performance.now() - startServerTime,
-      resolvedUrls: previewServer.resolvedUrls,
+      resolvedUrls: previewServer.resolvedUrls ?? { local: [], network: [] },
       host: settings.config.server.host,
       base: settings.config.base
     })
@@ -50,6 +50,8 @@ async function createStaticPreviewServer(settings, logger) {
     host: getResolvedHostForHttpServer(settings.config.server.host),
     port: settings.config.server.port,
     closed,
+    // In Vite 5, `httpServer` may be a `Http2SecureServer`, but we know we are only starting a HTTP server
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     server: previewServer.httpServer,
     stop: async () => {
       await new Promise((resolve, reject) => {

package/dist/core/preview/vite-plugin-astro-preview.js

@@ -1,8 +1,10 @@
 import fs from "node:fs";
 import { fileURLToPath } from "node:url";
+import { version } from "vite";
 import { notFoundTemplate, subpathNotUsedTemplate } from "../../template/4xx.js";
 import { stripBase } from "./util.js";
 const HAS_FILE_EXTENSION_REGEXP = /^.*\.[^\\]+$/;
+const IS_VITE_5 = version.startsWith("5.");
 function vitePluginAstroPreview(settings) {
   const { base, outDir, trailingSlash } = settings.config;
   return {
@@ -33,7 +35,7 @@ function vitePluginAstroPreview(settings) {
         next();
       });
       return () => {
-        server.middlewares.use((req, res) => {
+        const fourOhFourMiddleware = (req, res) => {
           const errorPagePath = fileURLToPath(outDir + "/404.html");
           if (fs.existsSync(errorPagePath)) {
             res.statusCode = 404;
@@ -44,7 +46,16 @@ function vitePluginAstroPreview(settings) {
             res.statusCode = 404;
             res.end(notFoundTemplate(pathname, "Not Found"));
           }
-        });
+        };
+        if (IS_VITE_5) {
+          for (const middleware of server.middlewares.stack) {
+            if (middleware.handle.name === "vite404Middleware") {
+              middleware.handle = fourOhFourMiddleware;
+            }
+          }
+        } else {
+          server.middlewares.use(fourOhFourMiddleware);
+        }
       };
     }
   };

package/dist/runtime/client/dev-overlay/entrypoint.js

@@ -49,12 +49,12 @@ document.addEventListener("DOMContentLoaded", async () => {
       }
       target.querySelector(".notification")?.toggleAttribute("data-active", newState);
     });
-    eventTarget.addEventListener("toggle-plugin", (evt) => {
+    eventTarget.addEventListener("toggle-plugin", async (evt) => {
       let newState = void 0;
       if (evt instanceof CustomEvent) {
         newState = evt.detail.state ?? true;
       }
-      overlay.togglePluginStatus(plugin, newState);
+      await overlay.togglePluginStatus(plugin, newState);
     });
     return plugin;
   };

package/dist/runtime/client/dev-overlay/overlay.d.ts

@@ -22,12 +22,20 @@ export declare class AstroDevOverlay extends HTMLElement {
     getPluginTemplate(plugin: DevOverlayPlugin): string;
     getPluginIcon(icon: Icon): string | undefined;
     getPluginById(id: string): DevOverlayPlugin | undefined;
-    getPluginCanvasById(id: string): Element | null;
-    togglePluginStatus(plugin: DevOverlayPlugin, status?: boolean): void;
+    getPluginCanvasById(id: string): HTMLElement | null;
+    /**
+     * @param plugin The plugin to toggle the status of
+     * @param newStatus Optionally, force the plugin into a specific state
+     */
+    togglePluginStatus(plugin: DevOverlayPlugin, newStatus?: boolean): Promise<void>;
+    /**
+     * @param newStatus Optionally, force the minimize button into a specific state
+     */
     toggleMinimizeButton(newStatus?: boolean): void;
     toggleOverlay(newStatus?: boolean): void;
 }
 export declare class DevOverlayCanvas extends HTMLElement {
     shadowRoot: ShadowRoot;
     constructor();
+    connectedCallback(): void;
 }

package/dist/runtime/client/dev-overlay/overlay.js

@@ -38,7 +38,7 @@ class AstroDevOverlay extends HTMLElement {
 				display: flex;
 				gap: 8px;
 				align-items: center;
-				transition: bottom 0.2s ease-in-out;
+				transition: bottom 0.35s cubic-bezier(0.485, -0.050, 0.285, 1.505);
 				pointer-events: none;
 			}
 
@@ -59,11 +59,10 @@ class AstroDevOverlay extends HTMLElement {
 				height: 56px;
 				overflow: hidden;
 				pointer-events: auto;
-
 				background: linear-gradient(180deg, #13151A 0%, rgba(19, 21, 26, 0.88) 100%);
-				box-shadow: 0px 0px 0px 0px #13151A4D;
 				border: 1px solid #343841;
 				border-radius: 9999px;
+				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);
 			}
 
 			#dev-bar .item {
@@ -174,16 +173,6 @@ class AstroDevOverlay extends HTMLElement {
 				width: 1px;
 			}
 
-			astro-dev-overlay-plugin-canvas {
-				position: absolute;
-				top: 0;
-				left: 0;
-			}
-
-			astro-dev-overlay-plugin-canvas:not([data-active]) {
-				display: none;
-			}
-
 			#minimize-button {
 				width: 32px;
 				height: 32px;
@@ -242,14 +231,14 @@ class AstroDevOverlay extends HTMLElement {
       this.devOverlay = this.shadowRoot.querySelector("#dev-overlay");
       this.attachEvents();
     }
-    this.plugins.forEach((plugin) => {
+    this.plugins.forEach(async (plugin) => {
       if (!this.hasBeenInitialized) {
         console.log(`Creating plugin canvas for ${plugin.id}`);
         const pluginCanvas = document.createElement("astro-dev-overlay-plugin-canvas");
         pluginCanvas.dataset.pluginId = plugin.id;
         this.shadowRoot?.append(pluginCanvas);
       }
-      this.togglePluginStatus(plugin, plugin.active);
+      await this.togglePluginStatus(plugin, plugin.active);
     });
     if ("requestIdleCallback" in window) {
       window.requestIdleCallback(async () => {
@@ -278,7 +267,7 @@ class AstroDevOverlay extends HTMLElement {
         if (plugin.status === "loading") {
           await this.initPlugin(plugin);
         }
-        this.togglePluginStatus(plugin);
+        await this.togglePluginStatus(plugin);
       });
     });
     const minimizeButton = this.shadowRoot.querySelector("#minimize-button");
@@ -367,27 +356,47 @@ class AstroDevOverlay extends HTMLElement {
     return this.plugins.find((plugin) => plugin.id === id);
   }
   getPluginCanvasById(id) {
-    return this.shadowRoot.querySelector(`astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`);
+    return this.shadowRoot.querySelector(
+      `astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`
+    );
   }
-  togglePluginStatus(plugin, status) {
-    plugin.active = status ?? !plugin.active;
+  /**
+   * @param plugin The plugin to toggle the status of
+   * @param newStatus Optionally, force the plugin into a specific state
+   */
+  async togglePluginStatus(plugin, newStatus) {
+    const pluginCanvas = this.getPluginCanvasById(plugin.id);
+    if (!pluginCanvas)
+      return;
+    if (plugin.active && !newStatus && plugin.beforeTogglingOff) {
+      const shouldToggleOff = await plugin.beforeTogglingOff(pluginCanvas.shadowRoot);
+      if (!shouldToggleOff)
+        return;
+    }
+    plugin.active = newStatus ?? !plugin.active;
     const target = this.shadowRoot.querySelector(`[data-plugin-id="${plugin.id}"]`);
     if (!target)
       return;
     target.classList.toggle("active", plugin.active);
-    this.getPluginCanvasById(plugin.id)?.toggleAttribute("data-active", plugin.active);
-    plugin.eventTarget.dispatchEvent(
-      new CustomEvent("plugin-toggled", {
-        detail: {
-          state: plugin.active,
-          plugin
-        }
-      })
-    );
+    pluginCanvas.style.display = plugin.active ? "block" : "none";
+    window.requestAnimationFrame(() => {
+      pluginCanvas.toggleAttribute("data-active", plugin.active);
+      plugin.eventTarget.dispatchEvent(
+        new CustomEvent("plugin-toggled", {
+          detail: {
+            state: plugin.active,
+            plugin
+          }
+        })
+      );
+    });
     if (import.meta.hot) {
       import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggled`, { state: plugin.active });
     }
   }
+  /**
+   * @param newStatus Optionally, force the minimize button into a specific state
+   */
   toggleMinimizeButton(newStatus) {
     const minimizeButton = this.shadowRoot.querySelector("#minimize-button");
     if (!minimizeButton)
@@ -435,6 +444,16 @@ class DevOverlayCanvas extends HTMLElement {
     super();
     this.shadowRoot = this.attachShadow({ mode: "open" });
   }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+		<style>
+			:host {
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+		</style>`;
+  }
 }
 export {
   AstroDevOverlay,

package/dist/runtime/client/dev-overlay/plugins/astro.d.ts

@@ -3,5 +3,6 @@ declare const _default: {
     name: string;
     icon: "astro:logo";
     init(canvas: ShadowRoot): void;
+    beforeTogglingOff(canvas: ShadowRoot): Promise<boolean>;
 };
 export default _default;

package/dist/runtime/client/dev-overlay/plugins/astro.js

@@ -3,10 +3,37 @@ var astro_default = {
   name: "Astro",
   icon: "astro:logo",
   init(canvas) {
-    const astroWindow = document.createElement("astro-dev-overlay-window");
-    astroWindow.windowTitle = "Astro";
-    astroWindow.windowIcon = "astro:logo";
-    astroWindow.innerHTML = `
+    createWindow();
+    document.addEventListener("astro:after-swap", createWindow);
+    function createWindow() {
+      const style = document.createElement("style");
+      style.textContent = `
+			:host {
+				opacity: 0;
+				transition: opacity 0.15s ease-in-out;
+			}
+
+			:host([data-active]) {
+				opacity: 1;
+			}
+
+			@media screen and (prefers-reduced-motion: no-preference) {
+				:host astro-dev-overlay-window {
+					transform: translateY(55px) translate(-50%, -50%);
+					transition: transform 0.15s ease-in-out;
+					transform-origin: center bottom;
+				}
+
+				:host([data-active]) astro-dev-overlay-window {
+					transform: translateY(0) translate(-50%, -50%);
+				}
+			}
+		`;
+      canvas.append(style);
+      const astroWindow = document.createElement("astro-dev-overlay-window");
+      astroWindow.windowTitle = "Astro";
+      astroWindow.windowIcon = "astro:logo";
+      astroWindow.innerHTML = `
 			<style>
 				#buttons-container {
 					display: flex;
@@ -48,17 +75,25 @@ var astro_default = {
 				<div>
 					<p>Welcome to Astro!</p>
 					<div id="buttons-container">
-						<astro-dev-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card>
-						<astro-dev-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card>
+						<astro-dev-overlay-card icon="bug" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card>
+						<astro-dev-overlay-card icon="file-search" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card>
 					</div>
 				</div>
 				<footer>
-					<a href="https://discord.gg/astro" target="_blank">Join the Astro Discord</a>
-					<a href="https://astro.build" target="_blank">Visit Astro.build</a>
+					<a href="https://astro.build/chat" target="_blank">Join us on Discord</a>
+					<a href="https://astro.build" target="_blank">Visit the Astro website</a>
 				</footer>
 			</div>
 		`;
-    canvas.append(astroWindow);
+      canvas.append(astroWindow);
+    }
+  },
+  async beforeTogglingOff(canvas) {
+    canvas.host?.removeAttribute("data-active");
+    await new Promise((resolve) => {
+      canvas.host.addEventListener("transitionend", resolve);
+    });
+    return true;
   }
 };
 export {

package/dist/runtime/client/dev-overlay/plugins/audit.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     id: string;
     name: string;
     icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 16\"><path fill=\"#fff\" d=\"M.6 2A1.1 1.1 0 0 1 1.7.9h16.6a1.1 1.1 0 1 1 0 2.2H1.6A1.1 1.1 0 0 1 .8 2Zm1.1 7.1h6a1.1 1.1 0 0 0 0-2.2h-6a1.1 1.1 0 0 0 0 2.2ZM9.3 13H1.8a1.1 1.1 0 1 0 0 2.2h7.5a1.1 1.1 0 1 0 0-2.2Zm11.3 1.9a1.1 1.1 0 0 1-1.5 0l-1.7-1.7a4.1 4.1 0 1 1 1.6-1.6l1.6 1.7a1.1 1.1 0 0 1 0 1.6Zm-5.3-3.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Z\"/></svg>";
-    init(canvas: ShadowRoot, eventTarget: EventTarget): void;
+    init(canvas: ShadowRoot, eventTarget: EventTarget): Promise<void>;
+    beforeTogglingOff(canvas: ShadowRoot): Promise<boolean>;
 };
 export default _default;

package/dist/runtime/client/dev-overlay/plugins/audit.js

@@ -1,3 +1,4 @@
+import { getIconElement } from "../ui-library/icons.js";
 import { attachTooltipToHighlight, createHighlight, positionHighlight } from "./utils/highlight.js";
 const icon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 16"><path fill="#fff" d="M.6 2A1.1 1.1 0 0 1 1.7.9h16.6a1.1 1.1 0 1 1 0 2.2H1.6A1.1 1.1 0 0 1 .8 2Zm1.1 7.1h6a1.1 1.1 0 0 0 0-2.2h-6a1.1 1.1 0 0 0 0 2.2ZM9.3 13H1.8a1.1 1.1 0 1 0 0 2.2h7.5a1.1 1.1 0 1 0 0-2.2Zm11.3 1.9a1.1 1.1 0 0 1-1.5 0l-1.7-1.7a4.1 4.1 0 1 1 1.6-1.6l1.6 1.7a1.1 1.1 0 0 1 0 1.6Zm-5.3-3.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Z"/></svg>';
 const selectorBasedRules = [
@@ -11,52 +12,82 @@ var audit_default = {
   id: "astro:audit",
   name: "Audit",
   icon,
-  init(canvas, eventTarget) {
+  async init(canvas, eventTarget) {
     let audits = [];
-    lint();
-    document.addEventListener("astro:after-swap", lint);
-    document.addEventListener("astro:page-load", refreshLintPositions);
-    function lint() {
+    await lint();
+    document.addEventListener("astro:after-swap", async () => lint());
+    document.addEventListener("astro:page-load", async () => refreshLintPositions);
+    async function lint() {
+      initStyle();
       audits.forEach(({ highlightElement }) => {
         highlightElement.remove();
       });
       audits = [];
-      selectorBasedRules.forEach((rule) => {
-        document.querySelectorAll(rule.selector).forEach((el) => {
-          createAuditProblem(rule, el);
-        });
-      });
+      canvas.getElementById("no-audit")?.remove();
+      for (const rule of selectorBasedRules) {
+        const elements = document.querySelectorAll(rule.selector);
+        for (const element of elements) {
+          await createAuditProblem(rule, element);
+        }
+      }
       if (audits.length > 0) {
         eventTarget.dispatchEvent(
-          new CustomEvent("plugin-notification", {
+          new CustomEvent("toggle-notification", {
             detail: {
               state: true
             }
           })
         );
+      } else {
+        eventTarget.dispatchEvent(
+          new CustomEvent("toggle-notification", {
+            detail: {
+              state: false
+            }
+          })
+        );
+        const noAuditBlock = document.createElement("div");
+        noAuditBlock.id = "no-audit";
+        const noAuditIcon = getIconElement("check-circle");
+        const text = document.createElement("div");
+        text.textContent = "No issues found!";
+        if (noAuditIcon) {
+          noAuditIcon.style.width = "24px";
+          noAuditBlock.append(noAuditIcon);
+        }
+        noAuditBlock.append(text);
+        canvas.append(noAuditBlock);
       }
+      ["scroll", "resize"].forEach((event) => {
+        window.addEventListener(event, refreshLintPositions);
+      });
     }
     function refreshLintPositions() {
+      const noAuditBlock = canvas.getElementById("no-audit");
+      if (noAuditBlock) {
+        const devOverlayRect = document.querySelector("astro-dev-overlay")?.shadowRoot.querySelector("#dev-overlay")?.getBoundingClientRect();
+        noAuditBlock.style.top = `${(devOverlayRect?.top ?? 0) - (devOverlayRect?.height ?? 0) - 16}px`;
+      }
       audits.forEach(({ highlightElement, auditedElement }) => {
         const rect = auditedElement.getBoundingClientRect();
         positionHighlight(highlightElement, rect);
       });
     }
-    function createAuditProblem(rule, originalElement) {
+    async function createAuditProblem(rule, originalElement) {
       const computedStyle = window.getComputedStyle(originalElement);
       const targetedElement = originalElement.children[0] || originalElement;
       if (targetedElement.offsetParent === null || computedStyle.display === "none") {
         return;
       }
+      if (originalElement.nodeName === "IMG" && !originalElement.complete) {
+        await originalElement.decode();
+      }
       const rect = originalElement.getBoundingClientRect();
       const highlight = createHighlight(rect, "warning");
       const tooltip = buildAuditTooltip(rule);
       attachTooltipToHighlight(highlight, tooltip, originalElement);
       canvas.append(highlight);
       audits.push({ highlightElement: highlight, auditedElement: originalElement });
-      ["scroll", "resize"].forEach((event) => {
-        window.addEventListener(event, refreshLintPositions);
-      });
     }
     function buildAuditTooltip(rule) {
       const tooltip = document.createElement("astro-dev-overlay-tooltip");
@@ -78,6 +109,44 @@ var audit_default = {
       ];
       return tooltip;
     }
+    function initStyle() {
+      const devOverlayRect = document.querySelector("astro-dev-overlay")?.shadowRoot.querySelector("#dev-overlay")?.getBoundingClientRect();
+      const style = document.createElement("style");
+      style.textContent = `
+			:host {
+				opacity: 0;
+				transition: opacity 0.1s ease-in-out;
+			}
+
+			:host([data-active]) {
+				opacity: 1;
+			}
+
+			#no-audit {
+				border: 1px solid rgba(113, 24, 226, 1);
+				background-color: #310A65;
+				box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01);
+				color: white;
+				text-align: center;
+				border-radius: 4px;
+				padding: 8px;
+				font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+				position: fixed;
+				transform: translate(-50%, 0);
+				top: ${(devOverlayRect?.top ?? 0) - (devOverlayRect?.height ?? 0) - 16}px;
+				left: calc(50% + 12px);
+				width: 200px;
+			}
+		`;
+      canvas.append(style);
+    }
+  },
+  async beforeTogglingOff(canvas) {
+    canvas.host?.removeAttribute("data-active");
+    await new Promise((resolve) => {
+      canvas.host.addEventListener("transitionend", resolve);
+    });
+    return true;
   }
 };
 export {

package/dist/runtime/client/dev-overlay/plugins/xray.d.ts

@@ -3,5 +3,6 @@ declare const _default: {
     name: string;
     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>";
     init(canvas: ShadowRoot): void;
+    beforeTogglingOff(canvas: ShadowRoot): Promise<boolean>;
 };
 export default _default;

package/dist/runtime/client/dev-overlay/plugins/xray.js

@@ -10,6 +10,7 @@ var xray_default = {
     document.addEventListener("astro:after-swap", addIslandsOverlay);
     document.addEventListener("astro:page-load", refreshIslandsOverlayPositions);
     function addIslandsOverlay() {
+      initStyle();
       islandsOverlays.forEach(({ highlightElement }) => {
         highlightElement.remove();
       });
@@ -75,6 +76,27 @@ var xray_default = {
       const [_, value] = prop;
       return JSON.stringify(value, null, 2);
     }
+    function initStyle() {
+      const style = document.createElement("style");
+      style.textContent = `
+			:host {
+				opacity: 0;
+				transition: opacity 0.1s ease-in-out;
+			}
+
+			:host([data-active]) {
+				opacity: 1;
+			}
+		`;
+      canvas.append(style);
+    }
+  },
+  async beforeTogglingOff(canvas) {
+    canvas.host?.removeAttribute("data-active");
+    await new Promise((resolve) => {
+      canvas.host.addEventListener("transitionend", resolve);
+    });
+    return true;
   }
 };
 export {

package/dist/runtime/client/dev-overlay/ui-library/card.js

@@ -23,6 +23,8 @@ class DevOverlayCard extends HTMLElement {
 					font-weight: 600;
 					line-height: 19px;
 					text-decoration: none;
+					background-color: #13151A;
+					box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.09), 0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 17px 7px 0px rgba(0, 0, 0, 0.01), 0px 26px 7px 0px rgba(0, 0, 0, 0.00);
 				}
 
 				a:hover, button:hover {

package/dist/runtime/client/dev-overlay/ui-library/icons.d.ts

@@ -6,5 +6,8 @@ declare const icons: {
     readonly 'astro:logo': "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 85 107\"><path fill=\"#fff\" d=\"M27.6 91.1c-4.8-4.4-6.3-13.7-4.2-20.4 3.5 4.2 8.3 5.6 13.3 6.3 7.7 1.2 15.3.8 22.5-2.8l2.5-1.4c.7 2 .9 3.9.6 5.9-.6 4.9-3 8.7-6.9 11.5-1.5 1.2-3.2 2.2-4.8 3.3-4.9 3.3-6.2 7.2-4.4 12.9l.2.6a13 13 0 0 1-5.7-5 13.8 13.8 0 0 1-2.2-7.4c0-1.3 0-2.7-.2-4-.5-3.1-2-4.6-4.8-4.7a5.5 5.5 0 0 0-5.7 4.6l-.2.6Z\"/><path fill=\"url(#a)\" d=\"M27.6 91.1c-4.8-4.4-6.3-13.7-4.2-20.4 3.5 4.2 8.3 5.6 13.3 6.3 7.7 1.2 15.3.8 22.5-2.8l2.5-1.4c.7 2 .9 3.9.6 5.9-.6 4.9-3 8.7-6.9 11.5-1.5 1.2-3.2 2.2-4.8 3.3-4.9 3.3-6.2 7.2-4.4 12.9l.2.6a13 13 0 0 1-5.7-5 13.8 13.8 0 0 1-2.2-7.4c0-1.3 0-2.7-.2-4-.5-3.1-2-4.6-4.8-4.7a5.5 5.5 0 0 0-5.7 4.6l-.2.6Z\"/><path fill=\"#fff\" d=\"M0 69.6s14.3-7 28.7-7l10.8-33.5c.4-1.6 1.6-2.7 3-2.7 1.2 0 2.4 1.1 2.8 2.7l10.9 33.5c17 0 28.6 7 28.6 7L60.5 3.2c-.7-2-2-3.2-3.5-3.2H27.8c-1.6 0-2.7 1.3-3.4 3.2L0 69.6Z\"/><defs><linearGradient id=\"a\" x1=\"22.5\" x2=\"69.1\" y1=\"107\" y2=\"84.9\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#D83333\"/><stop offset=\"1\" stop-color=\"#F041FF\"/></linearGradient></defs></svg>";
     readonly warning: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"#fff\" d=\"M8 .40625c-1.5019 0-2.97007.445366-4.21886 1.27978C2.53236 2.52044 1.55905 3.70642.984293 5.094.40954 6.48157.259159 8.00842.552165 9.48147.845172 10.9545 1.56841 12.3076 2.63041 13.3696c1.06201 1.062 2.41508 1.7852 3.88813 2.0782 1.47304.293 2.99989.1427 4.38746-.4321 1.3876-.5747 2.5736-1.5481 3.408-2.7968.8344-1.2488 1.2798-2.717 1.2798-4.2189-.0023-2.0133-.8031-3.9435-2.2267-5.36713C11.9435 1.20925 10.0133.408483 8 .40625ZM8 13.9062c-1.16814 0-2.31006-.3463-3.28133-.9953-.97128-.649-1.7283-1.5715-2.17533-2.6507-.44703-1.0792-.56399-2.26675-.3361-3.41245.22789-1.1457.79041-2.1981 1.61641-3.0241.82601-.826 1.8784-1.38852 3.0241-1.61641 1.1457-.2279 2.33325-.11093 3.41245.3361 1.0793.44703 2.0017 1.20405 2.6507 2.17532.649.97128.9954 2.11319.9954 3.28134-.0017 1.56592-.6245 3.0672-1.7318 4.1745S9.56592 13.9046 8 13.9062Zm-.84375-5.62495V4.625c0-.22378.0889-.43839.24713-.59662.15824-.15824.37285-.24713.59662-.24713.22378 0 .43839.08889.59662.24713.15824.15823.24713.37284.24713.59662v3.65625c0 .22378-.08889.43839-.24713.59662C8.43839 9.03611 8.22378 9.125 8 9.125c-.22377 0-.43838-.08889-.59662-.24713-.15823-.15823-.24713-.37284-.24713-.59662ZM9.125 11.0938c0 .2225-.06598.44-.18959.625-.12362.185-.29932.3292-.50489.4143-.20556.0852-.43176.1074-.64999.064-.21823-.0434-.41869-.1505-.57602-.3079-.15734-.1573-.26448-.3577-.30789-.576-.04341-.2182-.02113-.4444.06402-.65.08515-.2055.22934-.3812.41435-.5049.185-.1236.40251-.18955.62501-.18955.29837 0 .58452.11855.7955.32955.21098.2109.3295.4971.3295.7955Z\"/></svg>";
     readonly 'arrow-down': "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 14\"><path fill=\"#13151A\" d=\"m11.0306 8.53063-4.5 4.49997c-.06968.0699-.15247.1254-.24364.1633-.09116.0378-.1889.0573-.28761.0573-.09871 0-.19645-.0195-.28762-.0573-.09116-.0379-.17395-.0934-.24363-.1633L.968098 8.53063c-.140896-.1409-.220051-.332-.220051-.53125 0-.19926.079155-.39036.220051-.53125.140892-.1409.331992-.22006.531252-.22006.19926 0 .39035.07916.53125.22006l3.21937 3.21937V1.5c0-.19891.07902-.38968.21967-.53033C5.61029.829018 5.80106.75 5.99997.75c.19891 0 .38968.079018.53033.21967.14065.14065.21967.33142.21967.53033v9.1875l3.21938-3.22c.14085-.1409.33195-.22005.53125-.22005.1993 0 .3904.07915.5312.22005.1409.1409.2201.33199.2201.53125s-.0792.39035-.2201.53125l-.0012.00063Z\"/></svg>";
+    readonly bug: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 25 24\"><path fill=\"#CCCED8\" d=\"M13.7916 8.25006c0-.29667.088-.58668.2528-.83335.1648-.24668.3991-.43893.6732-.55247.2741-.11353.5757-.14323.8667-.08536.2909.05788.5582.20074.768.41052s.3526.47706.4105.76803c.0579.29097.0282.59257-.0854.86666-.1135.27409-.3057.50836-.5524.67318-.2467.16482-.5367.25279-.8334.25279-.3978 0-.7793-.15803-1.0606-.43934-.2813-.2813-.4394-.66283-.4394-1.06066Zm-3.75-1.5c-.29665 0-.58666.08798-.83333.2528-.24667.16482-.43893.39909-.55246.67318-.11354.27409-.14324.57569-.08536.86666.05788.29097.20074.55824.41052.76802.20977.20978.47705.35264.76802.41052.29101.05788.59261.02817.86671-.08536.274-.11353.5083-.30579.6731-.55246.1649-.24668.2528-.53668.2528-.83336 0-.39782-.158-.77935-.4393-1.06066-.2813-.2813-.6628-.43934-1.0607-.43934Zm11.25 6.75004c.0003.6512-.0733 1.3003-.2193 1.935l1.7953.7837c.1354.0592.2578.1445.3603.2511.1024.1065.1829.2322.2368.3698.0539.1377.0801.2846.0772.4323-.0028.1478-.0348.2936-.094.429-.0592.1354-.1446.2579-.2511.3603-.1065.1025-.2322.1829-.3698.2368-.1377.0539-.2846.0802-.4323.0773-.1478-.0029-.2936-.0349-.429-.0941l-1.6875-.7359c-.7348 1.3818-1.8317 2.5377-3.1732 3.3437s-2.8771 1.2319-4.4421 1.2319c-1.5651 0-3.10061-.4259-4.44213-1.2319-1.34151-.806-2.43843-1.9619-3.17321-3.3437l-1.6875.7359c-.13542.0592-.28119.0912-.42896.0941-.14778.0029-.29468-.0234-.43232-.0773-.13763-.0539-.2633-.1343-.36984-.2368-.10653-.1024-.19185-.2249-.25106-.3603-.05922-.1354-.09119-.2812-.09407-.429-.00289-.1477.02336-.2946.07725-.4323.05389-.1376.13436-.2633.23681-.3698.10246-.1066.22489-.1919.36032-.2511l1.79531-.7837c-.14354-.635-.21462-1.2841-.21187-1.935v-.375h-1.875c-.29837 0-.58452-.1186-.7955-.3295-.21098-.211-.3295-.4972-.3295-.7955 0-.2984.11852-.5846.3295-.7955.21098-.211.49713-.3295.7955-.3295h1.875v-.375c-.00029-.65126.0733-1.30041.21937-1.93504l-1.79531-.78375c-.27351-.11959-.4883-.34294-.59713-.6209-.10883-.27797-.10278-.58778.01682-.86128.11959-.27351.34294-.4883.6209-.59713.27797-.10883.58778-.10278.86128.01681l1.6875.73594c.73478-1.38183 1.8317-2.53769 3.17321-3.34373 1.34152-.80604 2.87703-1.23187 4.44213-1.23187 1.565 0 3.1006.42583 4.4421 1.23187 1.3415.80604 2.4384 1.9619 3.1732 3.34373l1.6875-.73594c.1354-.05921.2812-.09118.429-.09406.1477-.00289.2946.02336.4323.07725.1376.05389.2633.13435.3698.23681.1065.10245.1919.22489.2511.36032.0592.13542.0912.28118.094.42896.0029.14778-.0233.29468-.0772.43232-.0539.13763-.1344.2633-.2368.36984-.1025.10653-.2249.19185-.3603.25106l-1.7953.78375c.1435.63492.2146 1.28407.2118 1.93504v.375h1.875c.2984 0 .5845.1185.7955.3295.211.2109.3295.4971.3295.7955 0 .2983-.1185.5845-.3295.7955-.211.2109-.4971.3295-.7955.3295h-1.875v.375Zm-14.99997-2.625H19.0416v-.375c0-1.69079-.6716-3.3123-1.8672-4.50784-1.1955-1.19555-2.817-1.8672-4.5078-1.8672-1.6907 0-3.31224.67165-4.50778 1.8672C6.96328 7.1878 6.29163 8.80931 6.29163 10.5001v.375Zm5.24997 8.8987v-6.6487H6.29163v.375c.00211 1.4949.52876 2.9417 1.48816 4.0882.95939 1.1464 2.29071 1.9199 3.76181 2.1855Zm7.5-6.2737v-.375h-5.25v6.6487c1.4712-.2656 2.8025-1.0391 3.7619-2.1855.9594-1.1465 1.486-2.5933 1.4881-4.0882Z\"/></svg>";
+    readonly 'file-search': "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 25 24\"><path fill=\"#CCCED8\" d=\"m20.6293 7.455-5.25-5.25c-.1045-.10461-.2285-.1876-.3651-.24422-.1366-.05662-.283-.08577-.4308-.08578H5.58337c-.49728 0-.97419.19754-1.32582.54917-.35163.35164-.54918.82855-.54918 1.32583v16.5c0 .4973.19755.9742.54918 1.3258.35163.3517.82854.5492 1.32582.5492H19.0834c.4973 0 .9742-.1975 1.3258-.5492.3516-.3516.5492-.8285.5492-1.3258v-12c0-.29813-.1184-.58407-.3291-.795Zm-3.1397.045h-2.1562V5.34375L17.4896 7.5ZM5.95837 19.875V4.125h7.12503v4.5c0 .29837.1185.58452.3295.7955.211.21097.4971.3295.7955.3295h4.5v10.125H5.95837Zm9.04503-4.5459c.3426-.7185.4202-1.5349.2192-2.3051-.2011-.7702-.6679-1.4445-1.3179-1.9038-.65-.4594-1.4415-.6742-2.2346-.6066-.7931.0677-1.5368.4135-2.0996.9763-.56283.5629-.90863 1.3065-.9763 2.0996-.06766.7931.14716 1.5846.60651 2.2346.45936.6501 1.13369 1.1169 1.90389 1.3179.7701.201 1.5866.1234 2.305-.2192l1.125 1.125c.2114.2114.498.3301.7969.3301.2989 0 .5855-.1187.7969-.3301.2113-.2113.3301-.498.3301-.7969 0-.2988-.1188-.5855-.3301-.7968l-1.125-1.125Zm-4.17-1.4541c0-.2225.066-.44.1896-.625.1236-.185.2993-.3292.5049-.4144.2055-.0851.4317-.1074.65-.064.2182.0434.4186.1506.576.3079.1573.1573.2644.3578.3079.576.0434.2183.0211.4445-.0641.65-.0851.2056-.2293.3813-.4143.5049-.185.1236-.4025.1896-.625.1896-.2984 0-.5845-.1185-.7955-.3295-.211-.211-.3295-.4971-.3295-.7955Z\"/></svg>";
+    readonly 'check-circle': "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\"><path fill=\"#fff\" d=\"M10.0306 4.96938c.0699.06967.1254.15247.1633.24363.0378.09116.0573.1889.0573.28762 0 .09871-.0195.19645-.0573.28761-.0379.09116-.0934.17396-.1633.24364L6.53063 9.53187c-.06968.06992-.15247.1254-.24364.16326-.09116.03785-.1889.05734-.28761.05734-.09871 0-.19645-.01949-.28762-.05734-.09116-.03786-.17395-.09334-.24363-.16326l-1.5-1.5c-.06977-.06976-.12511-.15258-.16286-.24373-.03776-.09116-.05719-.18885-.05719-.28752 0-.09866.01943-.19635.05719-.28751.03775-.09115.09309-.17397.16286-.24373.06976-.06977.15259-.12511.24374-.16287.09115-.03775.18885-.05719.28751-.05719s.19636.01944.28751.05719c.09115.03776.17397.0931.24374.16287L6 7.9375l2.96938-2.97c.06978-.06961.15259-.12478.24371-.16237.09111-.03758.18874-.05683.2873-.05666.09856.00018.19612.01978.28711.05768.09098.0379.1736.09337.2431.16323ZM13.75 7c0 1.33502-.3959 2.64007-1.1376 3.7501-.7417 1.11-1.7959 1.9752-3.02928 2.4861-1.23341.5109-2.5906.6446-3.89998.3841-1.30937-.2605-2.5121-.9033-3.45611-1.8473-.944-.944-1.586877-2.14677-1.847328-3.45614-.26045-1.30937-.126777-2.66657.384114-3.89997C1.27471 3.18349 2.13987 2.12928 3.2499 1.38758 4.35994.645881 5.66498.25 7 .25c1.78961.001985 3.5053.713781 4.7708 1.97922C13.0362 3.49466 13.748 5.2104 13.75 7Zm-1.5 0c0-1.03835-.3079-2.05339-.8848-2.91674-.5769-.86336-1.3968-1.53627-2.35611-1.93363-.95931-.39736-2.01491-.50133-3.03331-.29875-1.0184.20257-1.95386.70258-2.68809 1.43681-.73422.73422-1.23424 1.66969-1.43681 2.68809-.20257 1.0184-.0986 2.074.29876 3.03331.39736.95931 1.07026 1.77921 1.93362 2.35611.86336.5769 1.87839.8848 2.91674.8848 1.39193-.0015 2.72643-.5551 3.7107-1.5393C11.6949 9.72642 12.2485 8.39193 12.25 7Z\"/></svg>";
 };
 export {};

package/dist/runtime/client/dev-overlay/ui-library/icons.js

@@ -13,7 +13,10 @@ function getIconElement(name) {
 const icons = {
   "astro:logo": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 85 107"><path fill="#fff" d="M27.6 91.1c-4.8-4.4-6.3-13.7-4.2-20.4 3.5 4.2 8.3 5.6 13.3 6.3 7.7 1.2 15.3.8 22.5-2.8l2.5-1.4c.7 2 .9 3.9.6 5.9-.6 4.9-3 8.7-6.9 11.5-1.5 1.2-3.2 2.2-4.8 3.3-4.9 3.3-6.2 7.2-4.4 12.9l.2.6a13 13 0 0 1-5.7-5 13.8 13.8 0 0 1-2.2-7.4c0-1.3 0-2.7-.2-4-.5-3.1-2-4.6-4.8-4.7a5.5 5.5 0 0 0-5.7 4.6l-.2.6Z"/><path fill="url(#a)" d="M27.6 91.1c-4.8-4.4-6.3-13.7-4.2-20.4 3.5 4.2 8.3 5.6 13.3 6.3 7.7 1.2 15.3.8 22.5-2.8l2.5-1.4c.7 2 .9 3.9.6 5.9-.6 4.9-3 8.7-6.9 11.5-1.5 1.2-3.2 2.2-4.8 3.3-4.9 3.3-6.2 7.2-4.4 12.9l.2.6a13 13 0 0 1-5.7-5 13.8 13.8 0 0 1-2.2-7.4c0-1.3 0-2.7-.2-4-.5-3.1-2-4.6-4.8-4.7a5.5 5.5 0 0 0-5.7 4.6l-.2.6Z"/><path fill="#fff" d="M0 69.6s14.3-7 28.7-7l10.8-33.5c.4-1.6 1.6-2.7 3-2.7 1.2 0 2.4 1.1 2.8 2.7l10.9 33.5c17 0 28.6 7 28.6 7L60.5 3.2c-.7-2-2-3.2-3.5-3.2H27.8c-1.6 0-2.7 1.3-3.4 3.2L0 69.6Z"/><defs><linearGradient id="a" x1="22.5" x2="69.1" y1="107" y2="84.9" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>`,
   warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M8 .40625c-1.5019 0-2.97007.445366-4.21886 1.27978C2.53236 2.52044 1.55905 3.70642.984293 5.094.40954 6.48157.259159 8.00842.552165 9.48147.845172 10.9545 1.56841 12.3076 2.63041 13.3696c1.06201 1.062 2.41508 1.7852 3.88813 2.0782 1.47304.293 2.99989.1427 4.38746-.4321 1.3876-.5747 2.5736-1.5481 3.408-2.7968.8344-1.2488 1.2798-2.717 1.2798-4.2189-.0023-2.0133-.8031-3.9435-2.2267-5.36713C11.9435 1.20925 10.0133.408483 8 .40625ZM8 13.9062c-1.16814 0-2.31006-.3463-3.28133-.9953-.97128-.649-1.7283-1.5715-2.17533-2.6507-.44703-1.0792-.56399-2.26675-.3361-3.41245.22789-1.1457.79041-2.1981 1.61641-3.0241.82601-.826 1.8784-1.38852 3.0241-1.61641 1.1457-.2279 2.33325-.11093 3.41245.3361 1.0793.44703 2.0017 1.20405 2.6507 2.17532.649.97128.9954 2.11319.9954 3.28134-.0017 1.56592-.6245 3.0672-1.7318 4.1745S9.56592 13.9046 8 13.9062Zm-.84375-5.62495V4.625c0-.22378.0889-.43839.24713-.59662.15824-.15824.37285-.24713.59662-.24713.22378 0 .43839.08889.59662.24713.15824.15823.24713.37284.24713.59662v3.65625c0 .22378-.08889.43839-.24713.59662C8.43839 9.03611 8.22378 9.125 8 9.125c-.22377 0-.43838-.08889-.59662-.24713-.15823-.15823-.24713-.37284-.24713-.59662ZM9.125 11.0938c0 .2225-.06598.44-.18959.625-.12362.185-.29932.3292-.50489.4143-.20556.0852-.43176.1074-.64999.064-.21823-.0434-.41869-.1505-.57602-.3079-.15734-.1573-.26448-.3577-.30789-.576-.04341-.2182-.02113-.4444.06402-.65.08515-.2055.22934-.3812.41435-.5049.185-.1236.40251-.18955.62501-.18955.29837 0 .58452.11855.7955.32955.21098.2109.3295.4971.3295.7955Z"/></svg>`,
-  "arrow-down": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 14"><path fill="#13151A" d="m11.0306 8.53063-4.5 4.49997c-.06968.0699-.15247.1254-.24364.1633-.09116.0378-.1889.0573-.28761.0573-.09871 0-.19645-.0195-.28762-.0573-.09116-.0379-.17395-.0934-.24363-.1633L.968098 8.53063c-.140896-.1409-.220051-.332-.220051-.53125 0-.19926.079155-.39036.220051-.53125.140892-.1409.331992-.22006.531252-.22006.19926 0 .39035.07916.53125.22006l3.21937 3.21937V1.5c0-.19891.07902-.38968.21967-.53033C5.61029.829018 5.80106.75 5.99997.75c.19891 0 .38968.079018.53033.21967.14065.14065.21967.33142.21967.53033v9.1875l3.21938-3.22c.14085-.1409.33195-.22005.53125-.22005.1993 0 .3904.07915.5312.22005.1409.1409.2201.33199.2201.53125s-.0792.39035-.2201.53125l-.0012.00063Z"/></svg>'
+  "arrow-down": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 14"><path fill="#13151A" d="m11.0306 8.53063-4.5 4.49997c-.06968.0699-.15247.1254-.24364.1633-.09116.0378-.1889.0573-.28761.0573-.09871 0-.19645-.0195-.28762-.0573-.09116-.0379-.17395-.0934-.24363-.1633L.968098 8.53063c-.140896-.1409-.220051-.332-.220051-.53125 0-.19926.079155-.39036.220051-.53125.140892-.1409.331992-.22006.531252-.22006.19926 0 .39035.07916.53125.22006l3.21937 3.21937V1.5c0-.19891.07902-.38968.21967-.53033C5.61029.829018 5.80106.75 5.99997.75c.19891 0 .38968.079018.53033.21967.14065.14065.21967.33142.21967.53033v9.1875l3.21938-3.22c.14085-.1409.33195-.22005.53125-.22005.1993 0 .3904.07915.5312.22005.1409.1409.2201.33199.2201.53125s-.0792.39035-.2201.53125l-.0012.00063Z"/></svg>',
+  bug: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path fill="#CCCED8" d="M13.7916 8.25006c0-.29667.088-.58668.2528-.83335.1648-.24668.3991-.43893.6732-.55247.2741-.11353.5757-.14323.8667-.08536.2909.05788.5582.20074.768.41052s.3526.47706.4105.76803c.0579.29097.0282.59257-.0854.86666-.1135.27409-.3057.50836-.5524.67318-.2467.16482-.5367.25279-.8334.25279-.3978 0-.7793-.15803-1.0606-.43934-.2813-.2813-.4394-.66283-.4394-1.06066Zm-3.75-1.5c-.29665 0-.58666.08798-.83333.2528-.24667.16482-.43893.39909-.55246.67318-.11354.27409-.14324.57569-.08536.86666.05788.29097.20074.55824.41052.76802.20977.20978.47705.35264.76802.41052.29101.05788.59261.02817.86671-.08536.274-.11353.5083-.30579.6731-.55246.1649-.24668.2528-.53668.2528-.83336 0-.39782-.158-.77935-.4393-1.06066-.2813-.2813-.6628-.43934-1.0607-.43934Zm11.25 6.75004c.0003.6512-.0733 1.3003-.2193 1.935l1.7953.7837c.1354.0592.2578.1445.3603.2511.1024.1065.1829.2322.2368.3698.0539.1377.0801.2846.0772.4323-.0028.1478-.0348.2936-.094.429-.0592.1354-.1446.2579-.2511.3603-.1065.1025-.2322.1829-.3698.2368-.1377.0539-.2846.0802-.4323.0773-.1478-.0029-.2936-.0349-.429-.0941l-1.6875-.7359c-.7348 1.3818-1.8317 2.5377-3.1732 3.3437s-2.8771 1.2319-4.4421 1.2319c-1.5651 0-3.10061-.4259-4.44213-1.2319-1.34151-.806-2.43843-1.9619-3.17321-3.3437l-1.6875.7359c-.13542.0592-.28119.0912-.42896.0941-.14778.0029-.29468-.0234-.43232-.0773-.13763-.0539-.2633-.1343-.36984-.2368-.10653-.1024-.19185-.2249-.25106-.3603-.05922-.1354-.09119-.2812-.09407-.429-.00289-.1477.02336-.2946.07725-.4323.05389-.1376.13436-.2633.23681-.3698.10246-.1066.22489-.1919.36032-.2511l1.79531-.7837c-.14354-.635-.21462-1.2841-.21187-1.935v-.375h-1.875c-.29837 0-.58452-.1186-.7955-.3295-.21098-.211-.3295-.4972-.3295-.7955 0-.2984.11852-.5846.3295-.7955.21098-.211.49713-.3295.7955-.3295h1.875v-.375c-.00029-.65126.0733-1.30041.21937-1.93504l-1.79531-.78375c-.27351-.11959-.4883-.34294-.59713-.6209-.10883-.27797-.10278-.58778.01682-.86128.11959-.27351.34294-.4883.6209-.59713.27797-.10883.58778-.10278.86128.01681l1.6875.73594c.73478-1.38183 1.8317-2.53769 3.17321-3.34373 1.34152-.80604 2.87703-1.23187 4.44213-1.23187 1.565 0 3.1006.42583 4.4421 1.23187 1.3415.80604 2.4384 1.9619 3.1732 3.34373l1.6875-.73594c.1354-.05921.2812-.09118.429-.09406.1477-.00289.2946.02336.4323.07725.1376.05389.2633.13435.3698.23681.1065.10245.1919.22489.2511.36032.0592.13542.0912.28118.094.42896.0029.14778-.0233.29468-.0772.43232-.0539.13763-.1344.2633-.2368.36984-.1025.10653-.2249.19185-.3603.25106l-1.7953.78375c.1435.63492.2146 1.28407.2118 1.93504v.375h1.875c.2984 0 .5845.1185.7955.3295.211.2109.3295.4971.3295.7955 0 .2983-.1185.5845-.3295.7955-.211.2109-.4971.3295-.7955.3295h-1.875v.375Zm-14.99997-2.625H19.0416v-.375c0-1.69079-.6716-3.3123-1.8672-4.50784-1.1955-1.19555-2.817-1.8672-4.5078-1.8672-1.6907 0-3.31224.67165-4.50778 1.8672C6.96328 7.1878 6.29163 8.80931 6.29163 10.5001v.375Zm5.24997 8.8987v-6.6487H6.29163v.375c.00211 1.4949.52876 2.9417 1.48816 4.0882.95939 1.1464 2.29071 1.9199 3.76181 2.1855Zm7.5-6.2737v-.375h-5.25v6.6487c1.4712-.2656 2.8025-1.0391 3.7619-2.1855.9594-1.1465 1.486-2.5933 1.4881-4.0882Z"/></svg>',
+  "file-search": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path fill="#CCCED8" d="m20.6293 7.455-5.25-5.25c-.1045-.10461-.2285-.1876-.3651-.24422-.1366-.05662-.283-.08577-.4308-.08578H5.58337c-.49728 0-.97419.19754-1.32582.54917-.35163.35164-.54918.82855-.54918 1.32583v16.5c0 .4973.19755.9742.54918 1.3258.35163.3517.82854.5492 1.32582.5492H19.0834c.4973 0 .9742-.1975 1.3258-.5492.3516-.3516.5492-.8285.5492-1.3258v-12c0-.29813-.1184-.58407-.3291-.795Zm-3.1397.045h-2.1562V5.34375L17.4896 7.5ZM5.95837 19.875V4.125h7.12503v4.5c0 .29837.1185.58452.3295.7955.211.21097.4971.3295.7955.3295h4.5v10.125H5.95837Zm9.04503-4.5459c.3426-.7185.4202-1.5349.2192-2.3051-.2011-.7702-.6679-1.4445-1.3179-1.9038-.65-.4594-1.4415-.6742-2.2346-.6066-.7931.0677-1.5368.4135-2.0996.9763-.56283.5629-.90863 1.3065-.9763 2.0996-.06766.7931.14716 1.5846.60651 2.2346.45936.6501 1.13369 1.1169 1.90389 1.3179.7701.201 1.5866.1234 2.305-.2192l1.125 1.125c.2114.2114.498.3301.7969.3301.2989 0 .5855-.1187.7969-.3301.2113-.2113.3301-.498.3301-.7969 0-.2988-.1188-.5855-.3301-.7968l-1.125-1.125Zm-4.17-1.4541c0-.2225.066-.44.1896-.625.1236-.185.2993-.3292.5049-.4144.2055-.0851.4317-.1074.65-.064.2182.0434.4186.1506.576.3079.1573.1573.2644.3578.3079.576.0434.2183.0211.4445-.0641.65-.0851.2056-.2293.3813-.4143.5049-.185.1236-.4025.1896-.625.1896-.2984 0-.5845-.1185-.7955-.3295-.211-.211-.3295-.4971-.3295-.7955Z"/></svg>',
+  "check-circle": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="#fff" d="M10.0306 4.96938c.0699.06967.1254.15247.1633.24363.0378.09116.0573.1889.0573.28762 0 .09871-.0195.19645-.0573.28761-.0379.09116-.0934.17396-.1633.24364L6.53063 9.53187c-.06968.06992-.15247.1254-.24364.16326-.09116.03785-.1889.05734-.28761.05734-.09871 0-.19645-.01949-.28762-.05734-.09116-.03786-.17395-.09334-.24363-.16326l-1.5-1.5c-.06977-.06976-.12511-.15258-.16286-.24373-.03776-.09116-.05719-.18885-.05719-.28752 0-.09866.01943-.19635.05719-.28751.03775-.09115.09309-.17397.16286-.24373.06976-.06977.15259-.12511.24374-.16287.09115-.03775.18885-.05719.28751-.05719s.19636.01944.28751.05719c.09115.03776.17397.0931.24374.16287L6 7.9375l2.96938-2.97c.06978-.06961.15259-.12478.24371-.16237.09111-.03758.18874-.05683.2873-.05666.09856.00018.19612.01978.28711.05768.09098.0379.1736.09337.2431.16323ZM13.75 7c0 1.33502-.3959 2.64007-1.1376 3.7501-.7417 1.11-1.7959 1.9752-3.02928 2.4861-1.23341.5109-2.5906.6446-3.89998.3841-1.30937-.2605-2.5121-.9033-3.45611-1.8473-.944-.944-1.586877-2.14677-1.847328-3.45614-.26045-1.30937-.126777-2.66657.384114-3.89997C1.27471 3.18349 2.13987 2.12928 3.2499 1.38758 4.35994.645881 5.66498.25 7 .25c1.78961.001985 3.5053.713781 4.7708 1.97922C13.0362 3.49466 13.748 5.2104 13.75 7Zm-1.5 0c0-1.03835-.3079-2.05339-.8848-2.91674-.5769-.86336-1.3968-1.53627-2.35611-1.93363-.95931-.39736-2.01491-.50133-3.03331-.29875-1.0184.20257-1.95386.70258-2.68809 1.43681-.73422.73422-1.23424 1.66969-1.43681 2.68809-.20257 1.0184-.0986 2.074.29876 3.03331.39736.95931 1.07026 1.77921 1.93362 2.35611.86336.5769 1.87839.8848 2.91674.8848 1.39193-.0015 2.72643-.5551 3.7107-1.5393C11.6949 9.72642 12.2485 8.39193 12.25 7Z"/></svg>'
 };
 export {
   getIconElement,

package/dist/runtime/client/dev-overlay/ui-library/tooltip.js

@@ -24,6 +24,7 @@ class DevOverlayTooltip extends HTMLElement {
 				max-width: 45ch;
 				width: fit-content;
 				min-width: 27ch;
+				box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01);
 			}
 
 			:host([data-show="true"]) {

package/dist/runtime/client/dev-overlay/ui-library/window.js

@@ -28,6 +28,7 @@ class DevOverlayWindow extends HTMLElement {
 					top: 55%;
 					left: 50%;
 					transform: translate(-50%, -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);
 				}
 
 				h1 {

package/dist/transitions/router.js

@@ -359,7 +359,7 @@ if (inBrowser) {
 async function prepareForClientOnlyComponents(newDocument, toLocation) {
   if (newDocument.body.querySelector(`astro-island[client='only']`)) {
     const nextPage = document.createElement("iframe");
-    nextPage.srcdoc = (newDocument.doctype ? "<!DOCTYPE html>" : "") + newDocument.documentElement.outerHTML;
+    nextPage.src = toLocation.href;
     nextPage.style.display = "none";
     document.body.append(nextPage);
     nextPage.contentWindow.console = Object.keys(console).reduce((acc, key) => {

package/dist/vite-plugin-scripts/index.js

@@ -29,7 +29,8 @@ function astroScriptsPlugin({ settings }) {
     },
     buildStart() {
       const hasHydrationScripts = settings.scripts.some((s) => s.stage === "before-hydration");
-      if (hasHydrationScripts && env?.command === "build" && !env?.ssrBuild) {
+      const isSsrBuild = env?.ssrBuild || env?.isSsrBuild;
+      if (hasHydrationScripts && env?.command === "build" && !isSsrBuild) {
         this.emitFile({
           type: "chunk",
           id: BEFORE_HYDRATION_SCRIPT_ID,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "3.4.3",
+  "version": "3.4.4",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",