astro 3.5.4 → 3.5.6

package/dist/core/endpoint/index.d.ts

@@ -8,16 +8,18 @@ type CreateAPIContext = {
     props: Record<string, any>;
     adapterName?: string;
     locales: string[] | undefined;
+    routingStrategy: 'prefix-always' | 'prefix-other-locales' | undefined;
+    defaultLocale: string | undefined;
 };
 /**
  * Creates a context that holds all the information needed to handle an Astro endpoint.
  *
  * @param {CreateAPIContext} payload
  */
-export declare function createAPIContext({ request, params, site, props, adapterName, locales, }: CreateAPIContext): APIContext;
+export declare function createAPIContext({ request, params, site, props, adapterName, locales, routingStrategy, defaultLocale, }: CreateAPIContext): APIContext;
 type ResponseParameters = ConstructorParameters<typeof Response>;
 export declare class ResponseWithEncoding extends Response {
     constructor(body: ResponseParameters[0], init: ResponseParameters[1], encoding?: BufferEncoding);
 }
-export declare function callEndpoint<MiddlewareResult = Response | EndpointOutput>(mod: EndpointHandler, env: Environment, ctx: RenderContext, onRequest: MiddlewareHandler<MiddlewareResult> | undefined, locales: undefined | string[]): Promise<Response>;
+export declare function callEndpoint<MiddlewareResult = Response | EndpointOutput>(mod: EndpointHandler, env: Environment, ctx: RenderContext, onRequest: MiddlewareHandler<MiddlewareResult> | undefined): Promise<Response>;
 export {};

package/dist/core/endpoint/index.js

@@ -4,7 +4,11 @@ import { ASTRO_VERSION } from "../constants.js";
 import { AstroCookies, attachCookiesToResponse } from "../cookies/index.js";
 import { AstroError, AstroErrorData } from "../errors/index.js";
 import { callMiddleware } from "../middleware/callMiddleware.js";
-import { computePreferredLocale, computePreferredLocaleList } from "../render/context.js";
+import {
+  computeCurrentLocale,
+  computePreferredLocale,
+  computePreferredLocaleList
+} from "../render/context.js";
 import {} from "../render/index.js";
 const encoder = new TextEncoder();
 const clientAddressSymbol = Symbol.for("astro.clientAddress");
@@ -15,10 +19,13 @@ function createAPIContext({
   site,
   props,
   adapterName,
-  locales
+  locales,
+  routingStrategy,
+  defaultLocale
 }) {
   let preferredLocale = void 0;
   let preferredLocaleList = void 0;
+  let currentLocale = void 0;
   const context = {
     cookies: new AstroCookies(request),
     request,
@@ -55,6 +62,15 @@ function createAPIContext({
       }
       return void 0;
     },
+    get currentLocale() {
+      if (currentLocale) {
+        return currentLocale;
+      }
+      if (locales) {
+        currentLocale = computeCurrentLocale(request, locales, routingStrategy, defaultLocale);
+      }
+      return currentLocale;
+    },
     url: new URL(request.url),
     get clientAddress() {
       if (clientAddressSymbol in request) {
@@ -106,14 +122,16 @@ class ResponseWithEncoding extends Response {
     }
   }
 }
-async function callEndpoint(mod, env, ctx, onRequest, locales) {
+async function callEndpoint(mod, env, ctx, onRequest) {
   const context = createAPIContext({
     request: ctx.request,
     params: ctx.params,
     props: ctx.props,
     site: env.site,
     adapterName: env.adapterName,
-    locales
+    routingStrategy: ctx.routingStrategy,
+    defaultLocale: ctx.defaultLocale,
+    locales: ctx.locales
   });
   let response;
   if (onRequest) {

package/dist/core/messages.js

@@ -50,7 +50,7 @@ function serverStart({
   base,
   isRestart = false
 }) {
-  const version = "3.5.4";
+  const version = "3.5.6";
   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.5.4"}`
+        `v${"3.5.6"}`
       )} ${headline}`
     );
   }

package/dist/core/middleware/index.js

@@ -9,7 +9,9 @@ function createContext({ request, params, userDefinedLocales = [] }) {
     params: params ?? {},
     props: {},
     site: void 0,
-    locales: userDefinedLocales
+    locales: userDefinedLocales,
+    defaultLocale: void 0,
+    routingStrategy: void 0
   });
 }
 function isLocalsSerializable(value) {

package/dist/core/pipeline.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentInstance, MiddlewareEndpointHandler } from '../@types/astro.js';
 import { type Environment, type RenderContext } from './render/index.js';
 type EndpointResultHandler = (originalRequest: Request, result: Response) => Promise<Response> | Response;
+export type PipelineHookFunction = (ctx: RenderContext, mod: ComponentInstance | undefined) => void;
 /**
  * This is the basic class of a pipeline.
  *
@@ -37,5 +38,10 @@ export declare class Pipeline {
      * The main function of the pipeline. Use this function to render any route known to Astro;
      */
     renderRoute(renderContext: RenderContext, componentInstance: ComponentInstance | undefined): Promise<Response>;
+    /**
+     * Store a function that will be called before starting the rendering phase.
+     * @param fn
+     */
+    onBeforeRenderRoute(fn: PipelineHookFunction): void;
 }
 export {};

package/dist/core/pipeline.js

@@ -5,6 +5,9 @@ import {} from "./render/index.js";
 class Pipeline {
   env;
   #onRequest;
+  #hooks = {
+    before: []
+  };
   /**
    * The handler accepts the *original* `Request` and result returned by the endpoint.
    * It must return a `Response`.
@@ -49,6 +52,9 @@ class Pipeline {
    * The main function of the pipeline. Use this function to render any route known to Astro;
    */
   async renderRoute(renderContext, componentInstance) {
+    for (const hook of this.#hooks.before) {
+      hook(renderContext, componentInstance);
+    }
     const result = await this.#tryRenderRoute(
       renderContext,
       this.env,
@@ -83,7 +89,9 @@ class Pipeline {
       props: renderContext.props,
       site: env.site,
       adapterName: env.adapterName,
-      locales: renderContext.locales
+      locales: renderContext.locales,
+      routingStrategy: renderContext.routingStrategy,
+      defaultLocale: renderContext.defaultLocale
     });
     switch (renderContext.route.type) {
       case "page":
@@ -113,18 +121,19 @@ class Pipeline {
         }
       }
       case "endpoint": {
-        return await callEndpoint(
-          mod,
-          env,
-          renderContext,
-          onRequest,
-          renderContext.locales
-        );
+        return await callEndpoint(mod, env, renderContext, onRequest);
       }
       default:
         throw new Error(`Couldn't find route of type [${renderContext.route.type}]`);
     }
   }
+  /**
+   * Store a function that will be called before starting the rendering phase.
+   * @param fn
+   */
+  onBeforeRenderRoute(fn) {
+    this.#hooks.before.push(fn);
+  }
 }
 export {
   Pipeline

package/dist/core/render/context.d.ts

@@ -16,6 +16,8 @@ export interface RenderContext {
     props: Props;
     locals?: object;
     locales: string[] | undefined;
+    defaultLocale: string | undefined;
+    routingStrategy: 'prefix-always' | 'prefix-other-locales' | undefined;
 }
 export type CreateRenderContextArgs = Partial<Omit<RenderContext, 'params' | 'props' | 'locals'>> & {
     route: RouteData;
@@ -45,4 +47,5 @@ export declare function parseLocale(header: string): BrowserLocale[];
  */
 export declare function computePreferredLocale(request: Request, locales: string[]): string | undefined;
 export declare function computePreferredLocaleList(request: Request, locales: string[]): string[];
+export declare function computeCurrentLocale(request: Request, locales: string[], routingStrategy: 'prefix-always' | 'prefix-other-locales' | undefined, defaultLocale: string | undefined): undefined | string;
 export {};

package/dist/core/render/context.js

@@ -18,7 +18,9 @@ async function createRenderContext(options) {
     pathname,
     params,
     props,
-    locales: options.locales
+    locales: options.locales,
+    routingStrategy: options.routingStrategy,
+    defaultLocale: options.defaultLocale
   };
   Object.defineProperty(context, "locals", {
     enumerable: true,
@@ -124,7 +126,22 @@ function computePreferredLocaleList(request, locales) {
   }
   return result;
 }
+function computeCurrentLocale(request, locales, routingStrategy, defaultLocale) {
+  const requestUrl = new URL(request.url);
+  for (const segment of requestUrl.pathname.split("/")) {
+    for (const locale of locales) {
+      if (normalizeTheLocale(locale) === normalizeTheLocale(segment)) {
+        return locale;
+      }
+    }
+  }
+  if (routingStrategy === "prefix-other-locales") {
+    return defaultLocale;
+  }
+  return void 0;
+}
 export {
+  computeCurrentLocale,
   computePreferredLocale,
   computePreferredLocaleList,
   createRenderContext,

package/dist/core/render/core.js

@@ -43,7 +43,9 @@ async function renderPage({ mod, renderContext, env, cookies }) {
     status: renderContext.status ?? 200,
     cookies,
     locals: renderContext.locals ?? {},
-    locales: renderContext.locales
+    locales: renderContext.locales,
+    defaultLocale: renderContext.defaultLocale,
+    routingStrategy: renderContext.routingStrategy
   });
   if (mod.frontmatter && typeof mod.frontmatter === "object" && "draft" in mod.frontmatter) {
     env.logger.warn(

package/dist/core/render/result.d.ts

@@ -31,5 +31,7 @@ export interface CreateResultArgs {
     locals: App.Locals;
     cookies?: AstroCookies;
     locales: string[] | undefined;
+    defaultLocale: string | undefined;
+    routingStrategy: 'prefix-always' | 'prefix-other-locales' | undefined;
 }
 export declare function createResult(args: CreateResultArgs): SSRResult;

package/dist/core/render/result.js

@@ -3,7 +3,11 @@ import { renderJSX } from "../../runtime/server/jsx.js";
 import { chunkToString } from "../../runtime/server/render/index.js";
 import { AstroCookies } from "../cookies/index.js";
 import { AstroError, AstroErrorData } from "../errors/index.js";
-import { computePreferredLocale, computePreferredLocaleList } from "./context.js";
+import {
+  computeCurrentLocale,
+  computePreferredLocale,
+  computePreferredLocaleList
+} from "./context.js";
 const clientAddressSymbol = Symbol.for("astro.clientAddress");
 const responseSentSymbol = Symbol.for("astro.responseSent");
 function getFunctionExpression(slot) {
@@ -91,6 +95,7 @@ function createResult(args) {
   let cookies = args.cookies;
   let preferredLocale = void 0;
   let preferredLocaleList = void 0;
+  let currentLocale = void 0;
   const result = {
     styles: args.styles ?? /* @__PURE__ */ new Set(),
     scripts: args.scripts ?? /* @__PURE__ */ new Set(),
@@ -149,6 +154,23 @@ function createResult(args) {
           }
           return void 0;
         },
+        get currentLocale() {
+          if (currentLocale) {
+            return currentLocale;
+          }
+          if (args.locales) {
+            currentLocale = computeCurrentLocale(
+              request,
+              args.locales,
+              args.routingStrategy,
+              args.defaultLocale
+            );
+            if (currentLocale) {
+              return currentLocale;
+            }
+          }
+          return void 0;
+        },
         params,
         props,
         locals,

package/dist/core/routing/manifest/create.js

@@ -236,7 +236,8 @@ function createRouteManifest({ settings, cwd, fsMod }, logger) {
           component,
           generate,
           pathname: pathname || void 0,
-          prerender
+          prerender,
+          fallbackRoutes: []
         });
       }
     });
@@ -290,7 +291,8 @@ This route collides with: "${collision.component}".`
       component,
       generate,
       pathname: pathname || void 0,
-      prerender: prerenderInjected ?? prerender
+      prerender: prerenderInjected ?? prerender,
+      fallbackRoutes: []
     });
   });
   Object.entries(settings.config.redirects).forEach(([from, to]) => {
@@ -315,7 +317,8 @@ This route collides with: "${collision.component}".`
       pathname: pathname || void 0,
       prerender: false,
       redirect: to,
-      redirectRoute: routes.find((r) => r.route === to)
+      redirectRoute: routes.find((r) => r.route === to),
+      fallbackRoutes: []
     };
     const lastSegmentIsDynamic = (r) => !!r.segments.at(-1)?.at(-1)?.dynamic;
     const redirBase = path.posix.dirname(route);
@@ -414,33 +417,35 @@ This route collides with: "${collision.component}".`
             if (!hasRoute) {
               let pathname;
               let route;
-              if (fallbackToLocale === i18n.defaultLocale) {
+              if (fallbackToLocale === i18n.defaultLocale && i18n.routingStrategy === "prefix-other-locales") {
                 if (fallbackToRoute.pathname) {
                   pathname = `/${fallbackFromLocale}${fallbackToRoute.pathname}`;
                 }
                 route = `/${fallbackFromLocale}${fallbackToRoute.route}`;
               } else {
-                pathname = fallbackToRoute.pathname?.replace(
-                  `/${fallbackToLocale}`,
-                  `/${fallbackFromLocale}`
-                );
-                route = fallbackToRoute.route.replace(
-                  `/${fallbackToLocale}`,
-                  `/${fallbackFromLocale}`
-                );
+                pathname = fallbackToRoute.pathname?.replace(`/${fallbackToLocale}/`, `/${fallbackFromLocale}/`).replace(`/${fallbackToLocale}`, `/${fallbackFromLocale}`);
+                route = fallbackToRoute.route.replace(`/${fallbackToLocale}`, `/${fallbackFromLocale}`).replace(`/${fallbackToLocale}/`, `/${fallbackFromLocale}/`);
               }
               const segments = removeLeadingForwardSlash(route).split(path.posix.sep).filter(Boolean).map((s) => {
                 validateSegment(s);
                 return getParts(s, route);
               });
-              routes.push({
-                ...fallbackToRoute,
-                pathname,
-                route,
-                segments,
-                pattern: getPattern(segments, config, config.trailingSlash),
-                type: "fallback"
-              });
+              const generate = getRouteGenerator(segments, config.trailingSlash);
+              const index = routes.findIndex((r) => r === fallbackToRoute);
+              if (index) {
+                const fallbackRoute = {
+                  ...fallbackToRoute,
+                  pathname,
+                  route,
+                  segments,
+                  generate,
+                  pattern: getPattern(segments, config, config.trailingSlash),
+                  type: "fallback",
+                  fallbackRoutes: []
+                };
+                const routeData = routes[index];
+                routeData.fallbackRoutes.push(fallbackRoute);
+              }
             }
           }
         }

package/dist/core/routing/manifest/serialization.js

@@ -5,6 +5,9 @@ function serializeRouteData(routeData, trailingSlash) {
     generate: void 0,
     pattern: routeData.pattern.source,
     redirectRoute: routeData.redirectRoute ? serializeRouteData(routeData.redirectRoute, trailingSlash) : void 0,
+    fallbackRoutes: routeData.fallbackRoutes.map((fallbackRoute) => {
+      return serializeRouteData(fallbackRoute, trailingSlash);
+    }),
     _meta: { trailingSlash }
   };
 }
@@ -20,7 +23,10 @@ function deserializeRouteData(rawRouteData) {
     segments: rawRouteData.segments,
     prerender: rawRouteData.prerender,
     redirect: rawRouteData.redirect,
-    redirectRoute: rawRouteData.redirectRoute ? deserializeRouteData(rawRouteData.redirectRoute) : void 0
+    redirectRoute: rawRouteData.redirectRoute ? deserializeRouteData(rawRouteData.redirectRoute) : void 0,
+    fallbackRoutes: rawRouteData.fallbackRoutes.map((fallback) => {
+      return deserializeRouteData(fallback);
+    })
   };
 }
 export {

package/dist/core/routing/match.js

@@ -1,5 +1,8 @@
 function matchRoute(pathname, manifest) {
-  return manifest.routes.find((route) => route.pattern.test(decodeURI(pathname)));
+  const decodedPathname = decodeURI(pathname);
+  return manifest.routes.find((route) => {
+    return route.pattern.test(decodedPathname) || route.fallbackRoutes.some((fallbackRoute) => fallbackRoute.pattern.test(decodedPathname));
+  });
 }
 function matchAllRoutes(pathname, manifest) {
   return manifest.routes.filter((route) => route.pattern.test(pathname));

package/dist/core/routing/params.js

@@ -16,7 +16,7 @@ function getParams(array) {
 }
 function stringifyParams(params, route) {
   const validatedParams = Object.entries(params).reduce((acc, next) => {
-    validateGetStaticPathsParameter(next, route.component);
+    validateGetStaticPathsParameter(next, route.route);
     const [key, value] = next;
     if (value !== void 0) {
       acc[key] = typeof value === "string" ? trimSlashes(value) : value.toString();

package/dist/i18n/middleware.d.ts

@@ -1,2 +1,7 @@
 import type { MiddlewareEndpointHandler, SSRManifest } from '../@types/astro.js';
+import type { PipelineHookFunction } from '../core/pipeline.js';
 export declare function createI18nMiddleware(i18n: SSRManifest['i18n'], base: SSRManifest['base'], trailingSlash: SSRManifest['trailingSlash']): MiddlewareEndpointHandler | undefined;
+/**
+ * This pipeline hook attaches a `RouteData` object to the `Request`
+ */
+export declare const i18nPipelineHook: PipelineHookFunction;

package/dist/i18n/middleware.js

@@ -1,4 +1,5 @@
 import { appendForwardSlash, joinPaths } from "@astrojs/internal-helpers/path";
+const routeDataSymbol = Symbol.for("astro.routeData");
 function checkIsLocaleFree(pathname, locales) {
   for (const locale of locales) {
     if (pathname.includes(`/${locale}`)) {
@@ -15,8 +16,14 @@ function createI18nMiddleware(i18n, base, trailingSlash) {
     if (!i18n) {
       return await next();
     }
-    const { locales, defaultLocale, fallback } = i18n;
+    const routeData = Reflect.get(context.request, routeDataSymbol);
+    if (routeData) {
+      if (routeData.type !== "page" && routeData.type !== "fallback") {
+        return await next();
+      }
+    }
     const url = context.url;
+    const { locales, defaultLocale, fallback, routingStrategy } = i18n;
     const response = await next();
     if (response instanceof Response) {
       const separators = url.pathname.split("/");
@@ -49,7 +56,7 @@ function createI18nMiddleware(i18n, base, trailingSlash) {
         if (urlLocale && fallbackKeys.includes(urlLocale)) {
           const fallbackLocale = fallback[urlLocale];
           let newPathname;
-          if (fallbackLocale === defaultLocale) {
+          if (fallbackLocale === defaultLocale && routingStrategy === "prefix-other-locales") {
             newPathname = url.pathname.replace(`/${urlLocale}`, ``);
           } else {
             newPathname = url.pathname.replace(`/${urlLocale}`, `/${fallbackLocale}`);
@@ -61,6 +68,10 @@ function createI18nMiddleware(i18n, base, trailingSlash) {
     return response;
   };
 }
+const i18nPipelineHook = (ctx) => {
+  Reflect.set(ctx.request, routeDataSymbol, ctx.route);
+};
 export {
-  createI18nMiddleware
+  createI18nMiddleware,
+  i18nPipelineHook
 };

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

@@ -13,7 +13,8 @@ document.addEventListener("DOMContentLoaded", async () => {
     { DevOverlayHighlight },
     { DevOverlayTooltip },
     { DevOverlayWindow },
-    { DevOverlayToggle }
+    { DevOverlayToggle },
+    { getIconElement, isDefinedIcon }
   ] = await Promise.all([
     // @ts-expect-error
     import("astro:dev-overlay"),
@@ -26,7 +27,8 @@ document.addEventListener("DOMContentLoaded", async () => {
     import("./ui-library/highlight.js"),
     import("./ui-library/tooltip.js"),
     import("./ui-library/window.js"),
-    import("./ui-library/toggle.js")
+    import("./ui-library/toggle.js"),
+    import("./ui-library/icons.js")
   ]);
   customElements.define("astro-dev-overlay", AstroDevOverlay);
   customElements.define("astro-dev-overlay-window", DevOverlayWindow);
@@ -43,6 +45,7 @@ document.addEventListener("DOMContentLoaded", async () => {
       builtIn,
       active: false,
       status: "loading",
+      notification: { state: false },
       eventTarget
     };
     eventTarget.addEventListener("toggle-notification", (evt) => {
@@ -53,7 +56,8 @@ document.addEventListener("DOMContentLoaded", async () => {
       if (evt instanceof CustomEvent) {
         newState = evt.detail.state ?? true;
       }
-      if (settings.config.showPluginNotifications === false) {
+      plugin.notification.state = newState;
+      if (settings.config.disablePluginNotification === false) {
         target.querySelector(".notification")?.toggleAttribute("data-active", newState);
       }
     });
@@ -66,11 +70,148 @@ document.addEventListener("DOMContentLoaded", async () => {
     });
     return plugin;
   };
+  const astromorePlugin = {
+    id: "astro:more",
+    name: "More",
+    icon: "dots-three",
+    init(canvas, eventTarget) {
+      const hiddenPlugins = plugins.filter((p) => !p.builtIn).slice(overlay.customPluginsToShow);
+      createDropdown();
+      document.addEventListener("astro:after-swap", createDropdown);
+      function createDropdown() {
+        const style = document.createElement("style");
+        style.innerHTML = `
+					#dropdown {
+						background: rgba(19, 21, 26, 1);
+						border: 1px solid rgba(52, 56, 65, 1);
+						border-radius: 12px;
+						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);
+						width: 180px;
+						padding: 8px;
+						z-index: 9999999999;
+					}
+
+					.notification {
+						display: none;
+						position: absolute;
+						top: -4px;
+						right: -6px;
+						width: 8px;
+						height: 8px;
+						border-radius: 9999px;
+						border: 1px solid rgba(19, 21, 26, 1);
+						background: #B33E66;
+					}
+
+					.notification[data-active] {
+						display: block;
+					}
+
+					#dropdown button {
+						border: 0;
+						background: transparent;
+						color: white;
+						font-family: system-ui, sans-serif;
+						font-size: 16px;
+						line-height: 1.2;
+						white-space: nowrap;
+						text-decoration: none;
+						margin: 0;
+						display: flex;
+    				align-items: center;
+						width: 100%;
+						padding: 8px;
+						border-radius: 8px;
+					}
+
+					#dropdown button:hover, #dropdown button:focus-visible {
+						background: rgba(27, 30, 36, 1);
+						cursor: pointer;
+					}
+
+					#dropdown button.active {
+						background: rgba(71, 78, 94, 1);
+					}
+
+					#dropdown .icon {
+						position: relative;
+						height: 24px;
+						width: 24px;
+						margin-right: 0.5em;
+					}
+
+					#dropdown .icon svg {
+						max-height: 100%;
+						max-width: 100%;
+					}
+				`;
+        canvas.append(style);
+        const dropdown = document.createElement("div");
+        dropdown.id = "dropdown";
+        for (const plugin of hiddenPlugins) {
+          const buttonContainer = document.createElement("div");
+          buttonContainer.classList.add("item");
+          const button = document.createElement("button");
+          button.setAttribute("data-plugin-id", plugin.id);
+          const iconContainer = document.createElement("div");
+          const iconElement = getPluginIcon(plugin.icon);
+          iconContainer.append(iconElement);
+          const notification = document.createElement("div");
+          notification.classList.add("notification");
+          iconContainer.append(notification);
+          iconContainer.classList.add("icon");
+          button.append(iconContainer);
+          button.append(document.createTextNode(plugin.name));
+          button.addEventListener("click", () => {
+            overlay.togglePluginStatus(plugin);
+          });
+          buttonContainer.append(button);
+          dropdown.append(buttonContainer);
+          eventTarget.addEventListener("plugin-toggled", positionDropdown);
+          window.addEventListener("resize", positionDropdown);
+          plugin.eventTarget.addEventListener("toggle-notification", (evt) => {
+            if (!(evt instanceof CustomEvent))
+              return;
+            if (settings.config.disablePluginNotification === false) {
+              notification.toggleAttribute("data-active", evt.detail.state ?? true);
+            }
+            eventTarget.dispatchEvent(
+              new CustomEvent("toggle-notification", {
+                detail: {
+                  state: hiddenPlugins.some((p) => p.notification.state === true)
+                }
+              })
+            );
+          });
+        }
+        canvas.append(dropdown);
+        function getPluginIcon(icon) {
+          if (isDefinedIcon(icon)) {
+            return getIconElement(icon);
+          }
+          return icon;
+        }
+        function positionDropdown() {
+          const moreButtonRect = overlay.shadowRoot.querySelector('[data-plugin-id="astro:more"]')?.getBoundingClientRect();
+          const dropdownRect = dropdown.getBoundingClientRect();
+          if (moreButtonRect && dropdownRect) {
+            dropdown.style.position = "absolute";
+            dropdown.style.top = `${moreButtonRect.top - dropdownRect.height - 12}px`;
+            dropdown.style.left = `${moreButtonRect.left + moreButtonRect.width - dropdownRect.width}px`;
+          }
+        }
+      }
+    }
+  };
   const customPluginsDefinitions = await loadDevOverlayPlugins();
   const plugins = [
-    ...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin, astroSettingsPlugin].map(
-      (pluginDef) => preparePlugin(pluginDef, true)
-    ),
+    ...[
+      astroDevToolPlugin,
+      astroXrayPlugin,
+      astroAuditPlugin,
+      astroSettingsPlugin,
+      astromorePlugin
+    ].map((pluginDef) => preparePlugin(pluginDef, true)),
     ...customPluginsDefinitions.map((pluginDef) => preparePlugin(pluginDef, false))
   ];
   overlay.plugins = plugins;