astro 4.3.7 → 4.4.1

package/dist/i18n/middleware.js

@@ -1,8 +1,7 @@
 import { appendForwardSlash, joinPaths } from "@astrojs/internal-helpers/path";
 import { getPathByLocale, normalizeTheLocale } from "./index.js";
 import { shouldAppendForwardSlash } from "../core/build/util.js";
-import { ROUTE_DATA_SYMBOL } from "../core/constants.js";
-const routeDataSymbol = Symbol.for(ROUTE_DATA_SYMBOL);
+import { ROUTE_TYPE_HEADER } from "../core/constants.js";
 function pathnameHasLocale(pathname, locales) {
   const segments = pathname.split("/");
   for (const segment of segments) {
@@ -65,99 +64,93 @@ function createI18nMiddleware(i18n, base, trailingSlash, buildFormat) {
     return void 0;
   };
   return async (context, next) => {
-    const routeData = Reflect.get(context.request, routeDataSymbol);
-    if (routeData?.type !== "page" && routeData?.type !== "fallback") {
-      return await next();
+    const response = await next();
+    const type = response.headers.get(ROUTE_TYPE_HEADER);
+    if (type !== "page" && type !== "fallback") {
+      return response;
     }
-    const currentLocale = context.currentLocale;
-    const url = context.url;
+    const { url, currentLocale } = context;
     const { locales, defaultLocale, fallback, routing } = i18n;
-    const response = await next();
-    if (response instanceof Response) {
-      switch (i18n.routing) {
-        case "domains-prefix-other-locales": {
-          if (localeHasntDomain(i18n, currentLocale)) {
-            const result = prefixOtherLocales(url, response);
-            if (result) {
-              return result;
-            }
-          }
-          break;
-        }
-        case "pathname-prefix-other-locales": {
+    switch (i18n.routing) {
+      case "domains-prefix-other-locales": {
+        if (localeHasntDomain(i18n, currentLocale)) {
           const result = prefixOtherLocales(url, response);
           if (result) {
             return result;
           }
-          break;
         }
-        case "domains-prefix-always-no-redirect": {
-          if (localeHasntDomain(i18n, currentLocale)) {
-            const result = prefixAlwaysNoRedirect(url, response);
-            if (result) {
-              return result;
-            }
-          }
-          break;
+        break;
+      }
+      case "pathname-prefix-other-locales": {
+        const result = prefixOtherLocales(url, response);
+        if (result) {
+          return result;
         }
-        case "pathname-prefix-always-no-redirect": {
+        break;
+      }
+      case "domains-prefix-always-no-redirect": {
+        if (localeHasntDomain(i18n, currentLocale)) {
           const result = prefixAlwaysNoRedirect(url, response);
           if (result) {
             return result;
           }
-          break;
         }
-        case "pathname-prefix-always": {
+        break;
+      }
+      case "pathname-prefix-always-no-redirect": {
+        const result = prefixAlwaysNoRedirect(url, response);
+        if (result) {
+          return result;
+        }
+        break;
+      }
+      case "pathname-prefix-always": {
+        const result = prefixAlways(url, response, context);
+        if (result) {
+          return result;
+        }
+        break;
+      }
+      case "domains-prefix-always": {
+        if (localeHasntDomain(i18n, currentLocale)) {
           const result = prefixAlways(url, response, context);
           if (result) {
             return result;
           }
-          break;
-        }
-        case "domains-prefix-always": {
-          if (localeHasntDomain(i18n, currentLocale)) {
-            const result = prefixAlways(url, response, context);
-            if (result) {
-              return result;
-            }
-          }
-          break;
         }
+        break;
       }
-      if (response.status >= 300 && fallback) {
-        const fallbackKeys = i18n.fallback ? Object.keys(i18n.fallback) : [];
-        const segments = url.pathname.split("/");
-        const urlLocale = segments.find((segment) => {
-          for (const locale of locales) {
-            if (typeof locale === "string") {
-              if (locale === segment) {
-                return true;
-              }
-            } else if (locale.path === segment) {
+    }
+    if (response.status >= 300 && fallback) {
+      const fallbackKeys = i18n.fallback ? Object.keys(i18n.fallback) : [];
+      const segments = url.pathname.split("/");
+      const urlLocale = segments.find((segment) => {
+        for (const locale of locales) {
+          if (typeof locale === "string") {
+            if (locale === segment) {
               return true;
             }
+          } else if (locale.path === segment) {
+            return true;
           }
-          return false;
-        });
-        if (urlLocale && fallbackKeys.includes(urlLocale)) {
-          const fallbackLocale = fallback[urlLocale];
-          const pathFallbackLocale = getPathByLocale(fallbackLocale, locales);
-          let newPathname;
-          if (pathFallbackLocale === defaultLocale && routing === "pathname-prefix-other-locales") {
-            newPathname = url.pathname.replace(`/${urlLocale}`, ``);
-          } else {
-            newPathname = url.pathname.replace(`/${urlLocale}`, `/${pathFallbackLocale}`);
-          }
-          return context.redirect(newPathname);
         }
+        return false;
+      });
+      if (urlLocale && fallbackKeys.includes(urlLocale)) {
+        const fallbackLocale = fallback[urlLocale];
+        const pathFallbackLocale = getPathByLocale(fallbackLocale, locales);
+        let newPathname;
+        if (pathFallbackLocale === defaultLocale && routing === "pathname-prefix-other-locales") {
+          newPathname = url.pathname.replace(`/${urlLocale}`, ``);
+        } else {
+          newPathname = url.pathname.replace(`/${urlLocale}`, `/${pathFallbackLocale}`);
+        }
+        return context.redirect(newPathname);
       }
     }
     return response;
   };
 }
-const i18nPipelineHook = (ctx) => {
-  Reflect.set(ctx.request, routeDataSymbol, ctx.route);
-};
 function localeHasntDomain(i18n, currentLocale) {
   for (const domainLocale of Object.values(i18n.domainLookupTable)) {
     if (domainLocale === currentLocale) {
@@ -167,6 +160,5 @@ function localeHasntDomain(i18n, currentLocale) {
   return true;
 }
 export {
-  createI18nMiddleware,
-  i18nPipelineHook
+  createI18nMiddleware
 };

package/dist/i18n/utils.d.ts

@@ -0,0 +1,25 @@
+import type { Locales } from '../@types/astro.js';
+import type { RoutingStrategies } from '../core/config/schema.js';
+type BrowserLocale = {
+    locale: string;
+    qualityValue: number | undefined;
+};
+/**
+ * Parses the value of the `Accept-Header` language:
+ *
+ * More info: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language
+ *
+ * Complex example: `fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5`
+ *
+ */
+export declare function parseLocale(header: string): BrowserLocale[];
+/**
+ * Set the current locale by parsing the value passed from the `Accept-Header`.
+ *
+ * If multiple locales are present in the header, they are sorted by their quality value and the highest is selected as current locale.
+ *
+ */
+export declare function computePreferredLocale(request: Request, locales: Locales): string | undefined;
+export declare function computePreferredLocaleList(request: Request, locales: Locales): string[];
+export declare function computeCurrentLocale(pathname: string, locales: Locales, routingStrategy: RoutingStrategies | undefined, defaultLocale: string | undefined): undefined | string;
+export {};

package/dist/{core/render/context.js → i18n/utils.js}

@@ -1,44 +1,4 @@
-import { normalizeTheLocale, toCodes } from "../../i18n/index.js";
-import { AstroError, AstroErrorData } from "../errors/index.js";
-import { getParamsAndProps } from "./params-and-props.js";
-import { ROUTE_DATA_SYMBOL } from "../constants.js";
-const clientLocalsSymbol = Symbol.for("astro.locals");
-const routeDataSymbol = Symbol.for(ROUTE_DATA_SYMBOL);
-async function createRenderContext(options) {
-  const request = options.request;
-  const pathname = options.pathname ?? new URL(request.url).pathname;
-  const [params, props] = await getParamsAndProps({
-    mod: options.mod,
-    route: options.route,
-    routeCache: options.env.routeCache,
-    pathname,
-    logger: options.env.logger,
-    ssr: options.env.ssr
-  });
-  const context = {
-    ...options,
-    pathname,
-    params,
-    props,
-    locales: options.locales,
-    routing: options.routing,
-    defaultLocale: options.defaultLocale
-  };
-  Object.defineProperty(context, "locals", {
-    enumerable: true,
-    get() {
-      return Reflect.get(request, clientLocalsSymbol);
-    },
-    set(val) {
-      if (typeof val !== "object") {
-        throw new AstroError(AstroErrorData.LocalsNotAnObject);
-      } else {
-        Reflect.set(request, clientLocalsSymbol, val);
-      }
-    }
-  });
-  return context;
-}
+import { normalizeTheLocale, toCodes } from "./index.js";
 function parseLocale(header) {
   if (header === "*") {
     return [{ locale: header, qualityValue: void 0 }];
@@ -149,13 +109,8 @@ function computePreferredLocaleList(request, locales) {
   }
   return result;
 }
-function computeCurrentLocale(request, locales, routingStrategy, defaultLocale) {
-  const routeData = Reflect.get(request, routeDataSymbol);
-  if (!routeData) {
-    return defaultLocale;
-  }
-  const pathname = routeData.pathname ?? new URL(request.url).pathname;
-  for (const segment of pathname.split("/").filter(Boolean)) {
+function computeCurrentLocale(pathname, locales, routingStrategy, defaultLocale) {
+  for (const segment of pathname.split("/")) {
     for (const locale of locales) {
       if (typeof locale === "string") {
         if (!segment.includes(locale))
@@ -185,6 +140,5 @@ export {
   computeCurrentLocale,
   computePreferredLocale,
   computePreferredLocaleList,
-  createRenderContext,
   parseLocale
 };

package/dist/prerender/routing.d.ts

@@ -1,5 +1,5 @@
 import type { AstroSettings, ComponentInstance, RouteData } from '../@types/astro.js';
-import type DevPipeline from '../vite-plugin-astro-server/devPipeline.js';
+import type { DevPipeline } from '../vite-plugin-astro-server/pipeline.js';
 type GetSortedPreloadedMatchesParams = {
     pipeline: DevPipeline;
     matches: RouteData[];

package/dist/prerender/routing.js

@@ -1,5 +1,4 @@
 import { RedirectComponentInstance, routeIsRedirect } from "../core/redirects/index.js";
-import { preload } from "../vite-plugin-astro-server/index.js";
 import { getPrerenderStatus } from "./metadata.js";
 async function getSortedPreloadedMatches({
   pipeline,
@@ -17,27 +16,27 @@ async function preloadAndSetPrerenderStatus({
   matches,
   settings
 }) {
-  const preloaded = await Promise.all(
-    matches.map(async (route) => {
-      const filePath = new URL(`./${route.component}`, settings.config.root);
-      if (routeIsRedirect(route)) {
-        return {
-          preloadedComponent: RedirectComponentInstance,
-          route,
-          filePath
-        };
-      }
-      const preloadedComponent = await preload({ pipeline, filePath });
-      const prerenderStatus = getPrerenderStatus({
-        filePath,
-        loader: pipeline.getModuleLoader()
+  const preloaded = new Array();
+  for (const route of matches) {
+    const filePath = new URL(`./${route.component}`, settings.config.root);
+    if (routeIsRedirect(route)) {
+      preloaded.push({
+        preloadedComponent: RedirectComponentInstance,
+        route,
+        filePath
       });
-      if (prerenderStatus !== void 0) {
-        route.prerender = prerenderStatus;
-      }
-      return { preloadedComponent, route, filePath };
-    })
-  );
+      continue;
+    }
+    const preloadedComponent = await pipeline.preload(filePath);
+    const prerenderStatus = getPrerenderStatus({
+      filePath,
+      loader: pipeline.loader
+    });
+    if (prerenderStatus !== void 0) {
+      route.prerender = prerenderStatus;
+    }
+    preloaded.push({ preloadedComponent, route, filePath });
+  }
   return preloaded;
 }
 function prioritizePrerenderedMatchesComparator(a, b) {

package/dist/runtime/client/dev-toolbar/apps/astro.js

@@ -4,29 +4,33 @@ import { createWindowElement } 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>';
 let integrationData;
 var astro_default = {
-  id: "astro",
+  id: "astro:home",
   name: "Menu",
   icon: "astro:logo",
   async init(canvas, eventTarget) {
     createCanvas();
     document.addEventListener("astro:after-swap", createCanvas);
+    document.addEventListener("astro:after-swap", fetchIntegrationData);
     eventTarget.addEventListener("app-toggled", async (event) => {
       resetDebugButton();
       if (!(event instanceof CustomEvent))
         return;
       if (event.detail.state === true) {
         if (!integrationData)
-          fetch("https://astro.build/api/v1/dev-overlay/", {
-            cache: "no-cache"
-          }).then((res) => res.json()).then((data) => {
-            integrationData = data;
-            integrationData.data = integrationData.data.map((integration) => {
-              return integration;
-            });
-            refreshIntegrationList();
-          });
+          fetchIntegrationData();
       }
     });
+    function fetchIntegrationData() {
+      fetch("https://astro.build/api/v1/dev-overlay/", {
+        cache: "no-cache"
+      }).then((res) => res.json()).then((data) => {
+        integrationData = data;
+        integrationData.data = integrationData.data.map((integration) => {
+          return integration;
+        });
+        refreshIntegrationList();
+      });
+    }
     function createCanvas() {
       const links = [
         {

package/dist/runtime/client/dev-toolbar/apps/audit/a11y.js

@@ -307,8 +307,8 @@ const a11y = [
     message: "Headings and anchors must have an accessible name, which can come from: inner text, aria-label, aria-labelledby, an img with alt property, or an svg with a tag <title></title>.",
     selector: a11y_required_content.join(","),
     match(element) {
-      const innerText = element.innerText.trim();
-      if (innerText !== "")
+      const innerText = element.innerText?.trim();
+      if (innerText && innerText !== "")
         return false;
       const ariaLabel = element.getAttribute("aria-label")?.trim();
       if (ariaLabel && ariaLabel !== "")

package/dist/runtime/client/dev-toolbar/apps/audit/index.d.ts

@@ -11,7 +11,7 @@ export interface ResolvedAuditRule {
 }
 export interface AuditRuleWithSelector extends AuditRule {
     selector: string;
-    match?: (element: Element) => boolean | null | undefined | void;
+    match?: (element: Element) => boolean | null | undefined | void | Promise<boolean> | Promise<void> | Promise<null> | Promise<undefined>;
 }
 declare const _default: {
     id: string;

package/dist/runtime/client/dev-toolbar/apps/audit/index.js

@@ -6,8 +6,10 @@ import {
 } from "../utils/highlight.js";
 import { createWindowElement } from "../utils/window.js";
 import { a11y } from "./a11y.js";
+import { finder } from "@medv/finder";
+import { perf } from "./perf.js";
 const icon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 1 20 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 rules = [...a11y];
+const rules = [...a11y, ...perf];
 const dynamicAuditRuleKeys = ["title", "message"];
 function resolveAuditRule(rule, element) {
   let resolved = { ...rule };
@@ -65,12 +67,14 @@ var audit_default = {
           matches = Array.from(elements);
         } else {
           for (const element of elements) {
-            if (rule.match(element)) {
+            if (await rule.match(element)) {
               matches.push(element);
             }
           }
         }
         for (const element of matches) {
+          if (audits.some((audit) => audit.auditedElement === element))
+            continue;
           await createAuditProblem(rule, element);
         }
       }
@@ -82,6 +86,107 @@ var audit_default = {
             }
           })
         );
+        const auditListWindow = createWindowElement(
+          `
+					<style>
+						astro-dev-toolbar-window {
+  	          left: initial;
+              top: 8px;
+              right: 8px;
+              transform: none;
+              width: 320px;
+              max-height: 320px;
+              padding: 0;
+              overflow: hidden;
+						}
+
+						hr {
+						  margin: 0;
+						}
+
+						header {
+						  display: flex;
+							justify-content: space-between;
+							align-items: center;
+						  padding: 18px;
+						}
+
+						h1 {
+						  font-size: 22px;
+  						font-weight: 600;
+  						color: #fff;
+						}
+
+						ul, li {
+						  margin: 0;
+							padding: 0;
+							list-style: none;
+						}
+
+						h1, h2 {
+						  margin: 0;
+						}
+
+						h3 {
+      		    margin: 0;
+              margin-bottom: 8px;
+              color: white;
+              white-space: nowrap;
+						}
+
+						.audit-title {
+						  font-weight: bold;
+							color: white;
+							margin-right: 1ch;
+						}
+
+						#audit-list {
+  						display: flex;
+              flex-direction: column;
+              overflow: auto;
+						}
+					</style>
+
+					<header>
+					  <h1>Audits</h1>
+						<astro-dev-toolbar-badge size="large">${audits.length} problem${audits.length > 1 ? "s" : ""} found</astro-dev-toolbar-badge>
+					</header>
+					<hr />`
+        );
+        const auditListUl = document.createElement("ul");
+        auditListUl.id = "audit-list";
+        audits.forEach((audit, index) => {
+          const resolvedRule = resolveAuditRule(audit.rule, audit.auditedElement);
+          const card = document.createElement("astro-dev-toolbar-card");
+          card.shadowRoot.innerHTML = `
+					<style>
+					 :host>button {
+						  text-align: left;
+							box-shadow: none !important;
+							${index + 1 < audits.length ? "border-radius: 0 !important;" : "border-radius: 0 0 8px 8px !important;"}
+						}
+
+						:host>button:hover {
+						  cursor: pointer;
+						}
+					</style>`;
+          card.clickAction = () => {
+            audit.highlightElement.scrollIntoView();
+            audit.highlightElement.focus();
+          };
+          const h3 = document.createElement("h3");
+          h3.innerText = finder(audit.auditedElement);
+          card.appendChild(h3);
+          const div = document.createElement("div");
+          const title = document.createElement("span");
+          title.classList.add("audit-title");
+          title.innerHTML = resolvedRule.title;
+          div.appendChild(title);
+          card.appendChild(div);
+          auditListUl.appendChild(card);
+        });
+        auditListWindow.appendChild(auditListUl);
+        canvas.append(auditListWindow);
       } else {
         eventTarget.dispatchEvent(
           new CustomEvent("toggle-notification", {
@@ -116,10 +221,10 @@ var audit_default = {
 						}
 					</style>
 					<header>
-						<h1><astro-dev-toolbar-icon icon="check-circle"></astro-dev-toolbar-icon>No accessibility issues detected.</h1>
+						<h1><astro-dev-toolbar-icon icon="check-circle"></astro-dev-toolbar-icon>No accessibility or performance issues detected.</h1>
 					</header>
 					<p>
-						Nice work! This app scans the page and highlights common accessibility issues for you, like a missing "alt" attribute on an image.
+						Nice work! This app scans the page and highlights common accessibility and performance issues for you, like a missing "alt" attribute on an image, or a image not using performant attributes.
 					</p>
 					`
         );
@@ -150,7 +255,7 @@ var audit_default = {
         return;
       }
       const rect = originalElement.getBoundingClientRect();
-      const highlight = createHighlight(rect, "warning");
+      const highlight = createHighlight(rect, "warning", { "data-audit-code": rule.code });
       const tooltip = buildAuditTooltip(rule, originalElement);
       const { isFixed } = getElementsPositionInDocument(originalElement);
       if (isFixed) {
@@ -158,7 +263,11 @@ var audit_default = {
       }
       attachTooltipToHighlight(highlight, tooltip, originalElement);
       canvas.append(highlight);
-      audits.push({ highlightElement: highlight, auditedElement: originalElement });
+      audits.push({
+        highlightElement: highlight,
+        auditedElement: originalElement,
+        rule
+      });
     }
     function buildAuditTooltip(rule, element) {
       const tooltip = document.createElement("astro-dev-toolbar-tooltip");

package/dist/runtime/client/dev-toolbar/apps/audit/perf.d.ts

@@ -0,0 +1,2 @@
+import type { AuditRuleWithSelector } from './index.js';
+export declare const perf: AuditRuleWithSelector[];