astro 3.5.3 → 3.5.4

package/components/Code.astro

@@ -10,8 +10,7 @@ import type {
 	ThemeRegistration,
 	ThemeRegistrationRaw,
 } from 'shikiji';
-import { visit } from 'unist-util-visit';
-import { getCachedHighlighter, replaceCssVariables } from '../dist/core/shiki.js';
+import { getCachedHighlighter } from '../dist/core/shiki.js';
 
 interface Props {
 	/** The code to highlight. Required. */
@@ -94,60 +93,13 @@ if (typeof lang === 'object') {
 
 const highlighter = await getCachedHighlighter({
 	langs: [lang],
-	themes: Object.values(experimentalThemes).length ? Object.values(experimentalThemes) : [theme],
+	theme,
+	experimentalThemes,
+	wrap,
 });
 
-const themeOptions = Object.values(experimentalThemes).length
-	? { themes: experimentalThemes }
-	: { theme };
-const html = highlighter.codeToHtml(code, {
-	lang: typeof lang === 'string' ? lang : lang.name,
-	...themeOptions,
-	transforms: {
-		pre(node) {
-			// Swap to `code` tag if inline
-			if (inline) {
-				node.tagName = 'code';
-			}
-
-			// Cast to string as shikiji will always pass them as strings instead of any other types
-			const classValue = (node.properties.class as string) ?? '';
-			const styleValue = (node.properties.style as string) ?? '';
-
-			// Replace "shiki" class naming with "astro-code"
-			node.properties.class = classValue.replace(/shiki/g, 'astro-code');
-
-			// Handle code wrapping
-			// if wrap=null, do nothing.
-			if (wrap === false) {
-				node.properties.style = styleValue + '; overflow-x: auto;';
-			} else if (wrap === true) {
-				node.properties.style =
-					styleValue + '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
-			}
-		},
-		code(node) {
-			if (inline) {
-				return node.children[0] as typeof node;
-			}
-		},
-		root(node) {
-			if (Object.values(experimentalThemes).length) {
-				return;
-			}
-
-			// theme.id for shiki -> shikiji compat
-			const themeName = typeof theme === 'string' ? theme : theme.name;
-			if (themeName === 'css-variables') {
-				// Replace special color tokens to CSS variables
-				visit(node as any, 'element', (child) => {
-					if (child.properties?.style) {
-						child.properties.style = replaceCssVariables(child.properties.style);
-					}
-				});
-			}
-		},
-	},
+const html = highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, {
+	inline,
 });
 ---
 

package/components/ViewTransitions.astro

@@ -88,11 +88,14 @@ const { fallback = 'animate', handleForms } = Astro.props;
 				}
 
 				const form = el as HTMLFormElement;
+				const submitter = ev.submitter;
 				const formData = new FormData(form);
 				// Use the form action, if defined, otherwise fallback to current path.
-				let action = form.action ?? location.pathname;
+				let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
+				const method = submitter?.getAttribute('formmethod') ?? form.method;
+
 				const options: Options = {};
-				if (form.method === 'get') {
+				if (method === 'get') {
 					const params = new URLSearchParams(formData as any);
 					const url = new URL(action);
 					url.search = params.toString();

package/config.d.ts

@@ -16,12 +16,12 @@ export function getViteConfig(config: ViteUserConfig): ViteUserConfigFn;
 
 /**
  * Return the configuration needed to use the Sharp-based image service
- * See: https://docs.astro.build/en/guides/assets/#using-sharp
  */
 export function sharpImageService(): ImageServiceConfig;
 
 /**
  * Return the configuration needed to use the Squoosh-based image service
+ * See: https://docs.astro.build/en/guides/images/#configure-squoosh
  */
 export function squooshImageService(): ImageServiceConfig;
 
@@ -29,5 +29,6 @@ export function squooshImageService(): ImageServiceConfig;
  * Return the configuration needed to use the passthrough image service. This image services does not perform
  * any image transformations, and is mainly useful when your platform does not support other image services, or you are
  * not using Astro's built-in image processing.
+ * See: https://docs.astro.build/en/guides/images/#configure-no-op-passthrough-service
  */
 export function passthroughImageService(): ImageServiceConfig;

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

@@ -19,6 +19,7 @@ import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger
 import type { AstroDevOverlay, DevOverlayCanvas } from '../runtime/client/dev-overlay/overlay.js';
 import type { DevOverlayHighlight } from '../runtime/client/dev-overlay/ui-library/highlight.js';
 import type { Icon } from '../runtime/client/dev-overlay/ui-library/icons.js';
+import type { DevOverlayToggle } from '../runtime/client/dev-overlay/ui-library/toggle.js';
 import type { DevOverlayTooltip } from '../runtime/client/dev-overlay/ui-library/tooltip.js';
 import type { DevOverlayWindow } from '../runtime/client/dev-overlay/ui-library/window.js';
 import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server/index.js';
@@ -1393,7 +1394,7 @@ export interface AstroUserConfig {
              * The following example configures your content fallback strategy to redirect unavailable pages in `/pt-br/` to their `es` version, and unavailable pages in `/fr/` to their `en` version. Unavailable `/es/` pages will return a 404.
              *
              * ```js
-             * export defualt defineConfig({
+             * export default defineConfig({
              * 	experimental: {
              * 		i18n: {
              * 			defaultLocale: "en",
@@ -2299,5 +2300,6 @@ declare global {
         'astro-dev-overlay-plugin-canvas': DevOverlayCanvas;
         'astro-dev-overlay-tooltip': DevOverlayTooltip;
         'astro-dev-overlay-highlight': DevOverlayHighlight;
+        'astro-dev-overlay-toggle': DevOverlayToggle;
     }
 }

package/dist/assets/services/noop.js

@@ -1,5 +1,6 @@
 import { baseService } from "./service.js";
 const noopService = {
+  propertiesToHash: ["src"],
   validateOptions: baseService.validateOptions,
   getURL: baseService.getURL,
   parseURL: baseService.parseURL,

package/dist/core/app/index.js

@@ -130,7 +130,11 @@ class App {
     );
     let response;
     try {
-      let i18nMiddleware = createI18nMiddleware(this.#manifest.i18n, this.#manifest.base);
+      let i18nMiddleware = createI18nMiddleware(
+        this.#manifest.i18n,
+        this.#manifest.base,
+        this.#manifest.trailingSlash
+      );
       if (i18nMiddleware) {
         if (mod.onRequest) {
           this.#pipeline.setMiddlewareFunction(

package/dist/core/app/types.d.ts

@@ -30,6 +30,7 @@ export type SSRManifest = {
     routes: RouteInfo[];
     site?: string;
     base: string;
+    trailingSlash: 'always' | 'never' | 'ignore';
     compressHTML: boolean;
     assetsPrefix?: string;
     renderers: SSRLoadedRenderer[];

package/dist/core/build/generate.js

@@ -205,7 +205,8 @@ async function generatePage(pageData, ssrEntry, builtPaths, pipeline) {
   const onRequest = ssrEntry.onRequest;
   const i18nMiddleware = createI18nMiddleware(
     pipeline.getManifest().i18n,
-    pipeline.getManifest().base
+    pipeline.getManifest().base,
+    pipeline.getManifest().trailingSlash
   );
   if (config.experimental.i18n && i18nMiddleware) {
     if (onRequest) {
@@ -468,6 +469,7 @@ function createBuildManifest(settings, internals, renderers) {
     };
   }
   return {
+    trailingSlash: settings.config.trailingSlash,
     assets: /* @__PURE__ */ new Set(),
     entryModules: Object.fromEntries(internals.entrySpecifierToBundleMap.entries()),
     routes: [],

package/dist/core/build/plugins/plugin-manifest.js

@@ -196,6 +196,7 @@ function buildManifest(opts, internals, staticFiles) {
     routes,
     site: settings.config.site,
     base: settings.config.base,
+    trailingSlash: settings.config.trailingSlash,
     compressHTML: settings.config.compressHTML,
     assetsPrefix: settings.config.build.assetsPrefix,
     componentMetadata: Array.from(internals.componentMetadata),

package/dist/core/build/plugins/plugin-prerender.js

@@ -6,7 +6,10 @@ function vitePluginPrerender(opts, internals) {
     name: "astro:rollup-plugin-prerender",
     outputOptions(outputOptions) {
       extendManualChunks(outputOptions, {
-        before(id, meta) {
+        after(id, meta) {
+          if (id.includes("astro/dist/runtime")) {
+            return "astro";
+          }
           const pageInfo = internals.pagesByViteID.get(id);
           if (pageInfo) {
             if (getPrerenderMetadata(meta.getModuleInfo(id))) {

package/dist/core/constants.js

@@ -1,4 +1,4 @@
-const ASTRO_VERSION = "3.5.3";
+const ASTRO_VERSION = "3.5.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.5.3";
+  const currentVersion = "3.5.4";
   if (currentVersion.includes("-")) {
     logger.warn(null, msg.prerelease({ currentVersion }));
   }

package/dist/core/errors/dev/vite.js

@@ -1,7 +1,7 @@
+import { replaceCssVariables } from "@astrojs/markdown-remark";
 import * as fs from "node:fs";
 import { fileURLToPath } from "node:url";
 import { codeToHtml } from "shikiji";
-import { replaceCssVariables } from "../../shiki.js";
 import { FailedToLoadModuleSSR, InvalidGlob, MdxIntegrationMissingError } from "../errors-data.js";
 import { AstroError } from "../errors.js";
 import { createSafeError } from "../utils.js";

package/dist/core/logger/core.d.ts

@@ -33,7 +33,7 @@ export declare class Logger {
     info(label: string | null, message: string): void;
     warn(label: string | null, message: string): void;
     error(label: string | null, message: string): void;
-    debug(label: string | null, message: string, ...args: any[]): void;
+    debug(label: string | null, ...messages: any[]): void;
     level(): LoggerLevel;
     forkIntegrationLogger(label: string): AstroIntegrationLogger;
 }

package/dist/core/logger/core.js

@@ -89,8 +89,8 @@ class Logger {
   error(label, message) {
     error(this.options, label, message);
   }
-  debug(label, message, ...args) {
-    debug(this.options, label, message, args);
+  debug(label, ...messages) {
+    debug(label, ...messages);
   }
   level() {
     return this.options.level;
@@ -122,7 +122,7 @@ class AstroIntegrationLogger {
     error(this.options, this.label, message);
   }
   debug(message) {
-    debug(this.options, this.label, message);
+    debug(this.label, message);
   }
 }
 export {

package/dist/core/messages.js

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

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

@@ -17,7 +17,8 @@ function vitePluginAstroPreview(settings) {
           res.end(subpathNotUsedTemplate(base, req.url));
           return;
         }
-        const pathname = stripBase(req.url, base);
+        const strippedPathname = stripBase(req.url, base);
+        const pathname = new URL(strippedPathname, "https://a.b").pathname;
         const isRoot = pathname === "/";
         if (!isRoot) {
           const hasTrailingSlash = pathname.endsWith("/");

package/dist/core/shiki.d.ts

@@ -1,8 +1,2 @@
-import { getHighlighter, type Highlighter } from 'shikiji';
-type HighlighterOptions = NonNullable<Parameters<typeof getHighlighter>[0]>;
-/**
- * shiki -> shikiji compat as we need to manually replace it
- */
-export declare function replaceCssVariables(str: string): string;
-export declare function getCachedHighlighter(opts: HighlighterOptions): Promise<Highlighter>;
-export {};
+import { type ShikiConfig, type ShikiHighlighter } from '@astrojs/markdown-remark';
+export declare function getCachedHighlighter(opts: ShikiConfig): Promise<ShikiHighlighter>;

package/dist/core/shiki.js

@@ -1,35 +1,16 @@
-import { getHighlighter } from "shikiji";
-const ASTRO_COLOR_REPLACEMENTS = {
-  "#000001": "var(--astro-code-color-text)",
-  "#000002": "var(--astro-code-color-background)",
-  "#000004": "var(--astro-code-token-constant)",
-  "#000005": "var(--astro-code-token-string)",
-  "#000006": "var(--astro-code-token-comment)",
-  "#000007": "var(--astro-code-token-keyword)",
-  "#000008": "var(--astro-code-token-parameter)",
-  "#000009": "var(--astro-code-token-function)",
-  "#000010": "var(--astro-code-token-string-expression)",
-  "#000011": "var(--astro-code-token-punctuation)",
-  "#000012": "var(--astro-code-token-link)"
-};
-const COLOR_REPLACEMENT_REGEX = new RegExp(
-  `(${Object.keys(ASTRO_COLOR_REPLACEMENTS).join("|")})`,
-  "g"
-);
+import {
+  createShikiHighlighter
+} from "@astrojs/markdown-remark";
 const cachedHighlighters = /* @__PURE__ */ new Map();
-function replaceCssVariables(str) {
-  return str.replace(COLOR_REPLACEMENT_REGEX, (match) => ASTRO_COLOR_REPLACEMENTS[match] || match);
-}
 function getCachedHighlighter(opts) {
   const key = JSON.stringify(opts, Object.keys(opts).sort());
   if (cachedHighlighters.has(key)) {
     return cachedHighlighters.get(key);
   }
-  const highlighter = getHighlighter(opts);
+  const highlighter = createShikiHighlighter(opts);
   cachedHighlighters.set(key, highlighter);
   return highlighter;
 }
 export {
-  getCachedHighlighter,
-  replaceCssVariables
+  getCachedHighlighter
 };

package/dist/i18n/middleware.d.ts

@@ -1,2 +1,2 @@
 import type { MiddlewareEndpointHandler, SSRManifest } from '../@types/astro.js';
-export declare function createI18nMiddleware(i18n: SSRManifest['i18n'], base: SSRManifest['base']): MiddlewareEndpointHandler | undefined;
+export declare function createI18nMiddleware(i18n: SSRManifest['i18n'], base: SSRManifest['base'], trailingSlash: SSRManifest['trailingSlash']): MiddlewareEndpointHandler | undefined;

package/dist/i18n/middleware.js

@@ -1,4 +1,4 @@
-import { joinPaths } from "@astrojs/internal-helpers/path";
+import { appendForwardSlash, joinPaths } from "@astrojs/internal-helpers/path";
 function checkIsLocaleFree(pathname, locales) {
   for (const locale of locales) {
     if (pathname.includes(`/${locale}`)) {
@@ -7,7 +7,7 @@ function checkIsLocaleFree(pathname, locales) {
   }
   return true;
 }
-function createI18nMiddleware(i18n, base) {
+function createI18nMiddleware(i18n, base, trailingSlash) {
   if (!i18n) {
     return void 0;
   }
@@ -30,8 +30,12 @@ function createI18nMiddleware(i18n, base) {
           headers: response.headers
         });
       } else if (i18n.routingStrategy === "prefix-always") {
-        if (url.pathname === base || url.pathname === base + "/") {
-          return context.redirect(`${joinPaths(base, i18n.defaultLocale)}`);
+        if (url.pathname === base + "/" || url.pathname === base) {
+          if (trailingSlash === "always") {
+            return context.redirect(`${appendForwardSlash(joinPaths(base, i18n.defaultLocale))}`);
+          } else {
+            return context.redirect(`${joinPaths(base, i18n.defaultLocale)}`);
+          }
         } else if (isLocaleFree) {
           return new Response(null, {
             status: 404,

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

@@ -1,4 +1,5 @@
 import {} from "./overlay.js";
+import { settings } from "./settings.js";
 let overlay;
 document.addEventListener("DOMContentLoaded", async () => {
   const [
@@ -6,22 +7,26 @@ document.addEventListener("DOMContentLoaded", async () => {
     { default: astroDevToolPlugin },
     { default: astroAuditPlugin },
     { default: astroXrayPlugin },
+    { default: astroSettingsPlugin },
     { AstroDevOverlay, DevOverlayCanvas },
     { DevOverlayCard },
     { DevOverlayHighlight },
     { DevOverlayTooltip },
-    { DevOverlayWindow }
+    { DevOverlayWindow },
+    { DevOverlayToggle }
   ] = await Promise.all([
     // @ts-expect-error
     import("astro:dev-overlay"),
     import("./plugins/astro.js"),
     import("./plugins/audit.js"),
     import("./plugins/xray.js"),
+    import("./plugins/settings.js"),
     import("./overlay.js"),
     import("./ui-library/card.js"),
     import("./ui-library/highlight.js"),
     import("./ui-library/tooltip.js"),
-    import("./ui-library/window.js")
+    import("./ui-library/window.js"),
+    import("./ui-library/toggle.js")
   ]);
   customElements.define("astro-dev-overlay", AstroDevOverlay);
   customElements.define("astro-dev-overlay-window", DevOverlayWindow);
@@ -29,6 +34,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   customElements.define("astro-dev-overlay-tooltip", DevOverlayTooltip);
   customElements.define("astro-dev-overlay-highlight", DevOverlayHighlight);
   customElements.define("astro-dev-overlay-card", DevOverlayCard);
+  customElements.define("astro-dev-overlay-toggle", DevOverlayToggle);
   overlay = document.createElement("astro-dev-overlay");
   const preparePlugin = (pluginDefinition, builtIn) => {
     const eventTarget = new EventTarget();
@@ -47,7 +53,9 @@ document.addEventListener("DOMContentLoaded", async () => {
       if (evt instanceof CustomEvent) {
         newState = evt.detail.state ?? true;
       }
-      target.querySelector(".notification")?.toggleAttribute("data-active", newState);
+      if (settings.config.showPluginNotifications === false) {
+        target.querySelector(".notification")?.toggleAttribute("data-active", newState);
+      }
     });
     eventTarget.addEventListener("toggle-plugin", async (evt) => {
       let newState = void 0;
@@ -60,7 +68,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   };
   const customPluginsDefinitions = await loadDevOverlayPlugins();
   const plugins = [
-    ...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin].map(
+    ...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin, astroSettingsPlugin].map(
       (pluginDef) => preparePlugin(pluginDef, true)
     ),
     ...customPluginsDefinitions.map((pluginDef) => preparePlugin(pluginDef, false))

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

@@ -1,3 +1,4 @@
+import { settings } from "./settings.js";
 import { getIconElement, isDefinedIcon } from "./ui-library/icons.js";
 const WS_EVENT_NAME = "astro-dev-overlay";
 class AstroDevOverlay extends HTMLElement {
@@ -221,9 +222,12 @@ class AstroDevOverlay extends HTMLElement {
 		<div id="dev-overlay">
 			<div id="dev-bar">
 				<div id="bar-container">
-					${this.plugins.filter((plugin) => plugin.builtIn).map((plugin) => this.getPluginTemplate(plugin)).join("")}
+					${this.plugins.filter((plugin) => plugin.builtIn && plugin.id !== "astro:settings").map((plugin) => this.getPluginTemplate(plugin)).join("")}
+					${this.plugins.filter((plugin) => !plugin.builtIn).length > 0 ? `<div class="separator"></div>${this.plugins.filter((plugin) => !plugin.builtIn).map((plugin) => this.getPluginTemplate(plugin)).join("")}` : ""}
 					<div class="separator"></div>
-					${this.plugins.filter((plugin) => !plugin.builtIn).map((plugin) => this.getPluginTemplate(plugin)).join("")}
+					${this.getPluginTemplate(
+        this.plugins.find((plugin) => plugin.builtIn && plugin.id === "astro:settings")
+      )}
 				</div>
 			</div>
 			<button id="minimize-button">${getIconElement("arrow-down")?.outerHTML}</button>
@@ -233,7 +237,8 @@ class AstroDevOverlay extends HTMLElement {
     }
     this.plugins.forEach(async (plugin) => {
       if (!this.hasBeenInitialized) {
-        console.log(`Creating plugin canvas for ${plugin.id}`);
+        if (settings.config.verbose)
+          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);
@@ -287,7 +292,7 @@ class AstroDevOverlay extends HTMLElement {
           if (this.isHidden()) {
             this.hoverTimeout = window.setTimeout(() => {
               this.toggleOverlay(true);
-            }, this.HOVER_DELAY);
+            }, this.HOVER_DELAY + 200);
           } else {
             this.hoverTimeout = window.setTimeout(() => {
               this.toggleMinimizeButton(true);
@@ -329,7 +334,8 @@ class AstroDevOverlay extends HTMLElement {
       return;
     const shadowRoot = this.getPluginCanvasById(plugin.id).shadowRoot;
     try {
-      console.info(`Initializing plugin ${plugin.id}`);
+      if (settings.config.verbose)
+        console.info(`Initializing plugin ${plugin.id}`);
       await plugin.init?.(shadowRoot, plugin.eventTarget);
       plugin.status = "ready";
       if (import.meta.hot) {

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

@@ -1,3 +1,4 @@
+import { createWindowWithTransition, waitForTransition } from "./utils/window.js";
 var astro_default = {
   id: "astro",
   name: "Astro",
@@ -6,35 +7,10 @@ var astro_default = {
     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>
+      const window = createWindowWithTransition(
+        "Astro",
+        "astro:logo",
+        `<style>
 				#buttons-container {
 					display: flex;
 					gap: 16px;
@@ -84,16 +60,13 @@ var astro_default = {
 					<a href="https://astro.build" target="_blank">Visit the Astro website</a>
 				</footer>
 			</div>
-		`;
-      canvas.append(astroWindow);
+		`
+      );
+      canvas.append(window);
     }
   },
   async beforeTogglingOff(canvas) {
-    canvas.host?.removeAttribute("data-active");
-    await new Promise((resolve) => {
-      canvas.host.addEventListener("transitionend", resolve);
-    });
-    return true;
+    return await waitForTransition(canvas);
   }
 };
 export {

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    id: string;
+    name: string;
+    icon: "gear";
+    init(canvas: ShadowRoot): void;
+    beforeTogglingOff(canvas: ShadowRoot): Promise<boolean>;
+};
+export default _default;

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

@@ -0,0 +1,93 @@
+import { settings } from "../settings.js";
+import { createWindowWithTransition, waitForTransition } from "./utils/window.js";
+const settingsRows = [
+  {
+    name: "Disable notifications",
+    description: "Notification bubbles will not be shown when this is enabled.",
+    input: "checkbox",
+    settingKey: "showPluginNotifications",
+    changeEvent: (evt) => {
+      if (evt.currentTarget instanceof HTMLInputElement) {
+        settings.updateSetting("showPluginNotifications", evt.currentTarget.checked);
+      }
+    }
+  },
+  {
+    name: "Verbose logging",
+    description: "Log additional information to the console.",
+    input: "checkbox",
+    settingKey: "verbose",
+    changeEvent: (evt) => {
+      if (evt.currentTarget instanceof HTMLInputElement) {
+        settings.updateSetting("verbose", evt.currentTarget.checked);
+      }
+    }
+  }
+];
+var settings_default = {
+  id: "astro:settings",
+  name: "Overlay settings",
+  icon: "gear",
+  init(canvas) {
+    createSettingsWindow();
+    document.addEventListener("astro:after-swap", createSettingsWindow);
+    function createSettingsWindow() {
+      const window = createWindowWithTransition(
+        "Settings",
+        "gear",
+        `<style>
+					h2, h3 {
+						margin-top: 0;
+					}
+
+					.setting-row {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+					}
+
+					h3 {
+						font-size: 16px;
+						font-weight: 400;
+						color: white;
+						margin-bottom: 0;
+					}
+
+					label {
+						font-size: 15px;
+						line-height: 1.5rem;
+					}
+				</style>
+				<h2>General</h2>
+				`,
+        settingsRows.flatMap((setting) => [
+          getElementForSettingAsString(setting),
+          document.createElement("hr")
+        ])
+      );
+      canvas.append(window);
+      function getElementForSettingAsString(setting) {
+        const label = document.createElement("label");
+        label.classList.add("setting-row");
+        const section = document.createElement("section");
+        section.innerHTML = `<h3>${setting.name}</h3>${setting.description}`;
+        label.append(section);
+        switch (setting.input) {
+          case "checkbox": {
+            const astroToggle = document.createElement("astro-dev-overlay-toggle");
+            astroToggle.input.addEventListener("change", setting.changeEvent);
+            astroToggle.input.checked = settings.config[setting.settingKey];
+            label.append(astroToggle);
+          }
+        }
+        return label;
+      }
+    }
+  },
+  async beforeTogglingOff(canvas) {
+    return await waitForTransition(canvas);
+  }
+};
+export {
+  settings_default as default
+};

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

@@ -0,0 +1,3 @@
+import type { Icon } from '../../ui-library/icons.js';
+export declare function createWindowWithTransition(title: string, icon: Icon, windowContent: string, addedNodes?: Node[]): DocumentFragment;
+export declare function waitForTransition(canvas: ShadowRoot): Promise<boolean>;

package/dist/runtime/client/dev-overlay/plugins/utils/window.js

@@ -0,0 +1,45 @@
+function createWindowWithTransition(title, icon, windowContent, addedNodes = []) {
+  const fragment = document.createDocumentFragment();
+  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%);
+				}
+			}
+		`;
+  fragment.append(style);
+  const window = document.createElement("astro-dev-overlay-window");
+  window.windowTitle = title;
+  window.windowIcon = icon;
+  window.innerHTML = windowContent;
+  window.append(...addedNodes);
+  fragment.append(window);
+  return fragment;
+}
+async function waitForTransition(canvas) {
+  canvas.host?.removeAttribute("data-active");
+  await new Promise((resolve) => {
+    canvas.host.addEventListener("transitionend", resolve);
+  });
+  return true;
+}
+export {
+  createWindowWithTransition,
+  waitForTransition
+};

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

@@ -0,0 +1,12 @@
+export interface Settings {
+    showPluginNotifications: boolean;
+    verbose: boolean;
+}
+export declare const defaultSettings: {
+    showPluginNotifications: true;
+    verbose: false;
+};
+export declare const settings: {
+    readonly config: Settings;
+    updateSetting: (key: keyof Settings, value: boolean) => void;
+};

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

@@ -0,0 +1,26 @@
+const defaultSettings = {
+  showPluginNotifications: true,
+  verbose: false
+};
+const settings = getSettings();
+function getSettings() {
+  let _settings = { ...defaultSettings };
+  const overlaySettings = localStorage.getItem("astro:dev-overlay:settings");
+  if (overlaySettings) {
+    _settings = { ..._settings, ...JSON.parse(overlaySettings) };
+  }
+  function updateSetting(key, value) {
+    _settings[key] = value;
+    localStorage.setItem("astro:dev-overlay:settings", JSON.stringify(_settings));
+  }
+  return {
+    get config() {
+      return _settings;
+    },
+    updateSetting
+  };
+}
+export {
+  defaultSettings,
+  settings
+};

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

@@ -9,5 +9,6 @@ declare const icons: {
     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>";
+    readonly gear: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 22 22\"><path fill=\"#fff\" d=\"M11 6.12507c-.9642 0-1.90671.28592-2.7084.82159-.80169.53567-1.42653 1.29704-1.79551 2.18783-.36898.89081-.46552 1.87101-.27742 2.81661.18811.9457.6524 1.8143 1.33419 2.4961.68178.6818 1.55042 1.1461 2.49604 1.3342.9457.1881 1.9259.0916 2.8167-.2774s1.6521-.9938 2.1878-1.7955c.5357-.8017.8216-1.7442.8216-2.7084-.0015-1.2925-.5156-2.53161-1.4295-3.44553-.9139-.91392-2.153-1.42801-3.4455-1.4295Zm0 7.50003c-.5192 0-1.02669-.154-1.45837-.4424-.43168-.2885-.76813-.6984-.96681-1.1781-.19868-.4796-.25067-1.0074-.14938-1.5166.10129-.50924.35129-.97697.71841-1.34408.36711-.36712.83484-.61712 1.34405-.71841.5092-.10129 1.037-.0493 1.5166.14938.4797.19868.8897.53513 1.1781.96681.2884.43168.4424.9392.4424 1.4584 0 .6962-.2766 1.3638-.7688 1.8561-.4923.4923-1.16.7689-1.8562.7689Zm8.625-2.551v-.1481l1.3125-1.64155c.1102-.13755.1865-.29905.2228-.4715s.0316-.35102-.0137-.52131c-.2369-.89334-.5909-1.75142-1.0528-2.55188-.089-.15264-.2127-.28218-.3611-.37811-.1484-.09594-.3173-.15557-.493-.17408l-2.0888-.23437-.104-.10406-.2344-2.08969c-.0186-.17556-.0783-.34426-.1743-.49247-.0959-.1482-.2254-.27175-.3779-.36066-.8005-.46341-1.6589-.81869-2.5528-1.056559-.1704-.044683-.349-.048704-.5213-.01174-.1723.036965-.3335.113881-.4706.224549l-1.6415 1.3125h-.1482l-1.64152-1.3125C9.14683.9524 8.98532.87608 8.81288.839767c-.17245-.036314-.35102-.031606-.52132.013744-.89357.238319-1.75165.593909-2.55187 1.057499-.15205.08854-.28121.2115-.37712.35901-.0959.14752-.15586.31547-.17507.49037l-.23437 2.08875-.10407.10406-2.08968.23437c-.17556.01865-.34426.07835-.49247.17428-.14821.09593-.27176.22539-.36066.37791-.46211.80072-.81613 1.65912-1.052812 2.55281-.045195.17016-.049823.34855-.013512.52082.03631.17227.112546.33362.222574.47106L2.375 10.926v.1481l-1.3125 1.6416c-.110173.1375-.186492.299-.222806.4715-.036313.1724-.031605.351.013744.5213.238622.8936.594522 1.7517 1.058442 2.5519.08844.1519.21126.281.3586.3769.14734.0959.3151.1559.48983.1753l2.08875.2325.10407.104.23437 2.0916c.01865.1756.07835.3443.17428.4925.09592.1482.22538.2717.37791.3606.80052.4634 1.65893.8187 2.55281 1.0566.17045.0447.349.0487.52129.0117.17228-.0369.33347-.1139.47059-.2245l1.64152-1.3125h.1482l1.6415 1.3125c.1376.1101.2991.1865.4715.2228.1725.0363.351.0316.5213-.0138.8934-.2368 1.7514-.5908 2.5519-1.0528.1524-.0883.2819-.2112.3782-.3587.0962-.1475.1565-.3156.1759-.4907l.2325-2.0887.104-.1041 2.0897-.239c.1751-.0194.3432-.0797.4907-.1759.1475-.0963.2704-.2258.3587-.3782.4634-.8005.8187-1.6589 1.0566-2.5528.0448-.1699.0493-.3479.013-.5198-.0363-.172-.1124-.333-.2221-.4702l-1.3125-1.6416Zm-2.2612-.4584c.015.256.015.5127 0 .7687-.0168.2784.0704.553.2446.7707l1.2038 1.5047c-.1136.3363-.2492.6648-.406.9834l-1.9153.2128c-.2773.0317-.5329.1654-.7171.375-.1704.1919-.3519.3735-.5438.5438-.2096.1842-.3433.4398-.375.7171l-.2119 1.9144c-.3185.1574-.647.2936-.9834.4078l-1.5047-1.2047c-.1997-.1593-.4477-.2459-.7031-.2456h-.0675c-.2561.015-.5127.015-.7688 0-.2781-.0165-.5525.0703-.7706.2438l-1.50469 1.2047c-.33634-.1137-.66486-.2493-.98343-.406l-.21282-1.9153c-.0317-.2773-.16536-.5329-.375-.7172-.19187-.1703-.37344-.3519-.54375-.5437-.18426-.2097-.43988-.3433-.71718-.375l-1.91438-.2119c-.15734-.3185-.29357-.647-.40781-.9834l1.20375-1.5047c.17424-.2177.26144-.4923.24469-.7707-.01501-.256-.01501-.5127 0-.7687.01675-.2783-.07045-.553-.24469-.77063L3.18781 8.34038c.11364-.33634.24924-.66486.40594-.98343l1.91531-.21281c.27731-.03171.53292-.16537.71719-.375.17031-.19188.35188-.37345.54375-.54375.20964-.18427.3433-.43989.375-.71719l.21188-1.91438c.31852-.15734.64704-.29357.98343-.40781L9.845 4.3907c.2181.17343.4925.26023.7706.24375.2561-.015.5127-.015.7688 0 .2782.01701.5528-.06985.7706-.24375l1.5047-1.20469c.3364.11424.6649.25047.9834.40781l.2128 1.91532c.0317.2773.1654.53292.375.71718.1919.17031.3735.35188.5438.54375.1843.20964.4399.3433.7172.375l1.9143.21188c.1574.31852.2936.64704.4079.98343l-1.2038 1.50469c-.1749.21743-.2628.49203-.2465.77063Z\"/></svg>";
 };
 export {};

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

@@ -16,7 +16,8 @@ const icons = {
   "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>'
+  "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>',
+  gear: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22"><path fill="#fff" d="M11 6.12507c-.9642 0-1.90671.28592-2.7084.82159-.80169.53567-1.42653 1.29704-1.79551 2.18783-.36898.89081-.46552 1.87101-.27742 2.81661.18811.9457.6524 1.8143 1.33419 2.4961.68178.6818 1.55042 1.1461 2.49604 1.3342.9457.1881 1.9259.0916 2.8167-.2774s1.6521-.9938 2.1878-1.7955c.5357-.8017.8216-1.7442.8216-2.7084-.0015-1.2925-.5156-2.53161-1.4295-3.44553-.9139-.91392-2.153-1.42801-3.4455-1.4295Zm0 7.50003c-.5192 0-1.02669-.154-1.45837-.4424-.43168-.2885-.76813-.6984-.96681-1.1781-.19868-.4796-.25067-1.0074-.14938-1.5166.10129-.50924.35129-.97697.71841-1.34408.36711-.36712.83484-.61712 1.34405-.71841.5092-.10129 1.037-.0493 1.5166.14938.4797.19868.8897.53513 1.1781.96681.2884.43168.4424.9392.4424 1.4584 0 .6962-.2766 1.3638-.7688 1.8561-.4923.4923-1.16.7689-1.8562.7689Zm8.625-2.551v-.1481l1.3125-1.64155c.1102-.13755.1865-.29905.2228-.4715s.0316-.35102-.0137-.52131c-.2369-.89334-.5909-1.75142-1.0528-2.55188-.089-.15264-.2127-.28218-.3611-.37811-.1484-.09594-.3173-.15557-.493-.17408l-2.0888-.23437-.104-.10406-.2344-2.08969c-.0186-.17556-.0783-.34426-.1743-.49247-.0959-.1482-.2254-.27175-.3779-.36066-.8005-.46341-1.6589-.81869-2.5528-1.056559-.1704-.044683-.349-.048704-.5213-.01174-.1723.036965-.3335.113881-.4706.224549l-1.6415 1.3125h-.1482l-1.64152-1.3125C9.14683.9524 8.98532.87608 8.81288.839767c-.17245-.036314-.35102-.031606-.52132.013744-.89357.238319-1.75165.593909-2.55187 1.057499-.15205.08854-.28121.2115-.37712.35901-.0959.14752-.15586.31547-.17507.49037l-.23437 2.08875-.10407.10406-2.08968.23437c-.17556.01865-.34426.07835-.49247.17428-.14821.09593-.27176.22539-.36066.37791-.46211.80072-.81613 1.65912-1.052812 2.55281-.045195.17016-.049823.34855-.013512.52082.03631.17227.112546.33362.222574.47106L2.375 10.926v.1481l-1.3125 1.6416c-.110173.1375-.186492.299-.222806.4715-.036313.1724-.031605.351.013744.5213.238622.8936.594522 1.7517 1.058442 2.5519.08844.1519.21126.281.3586.3769.14734.0959.3151.1559.48983.1753l2.08875.2325.10407.104.23437 2.0916c.01865.1756.07835.3443.17428.4925.09592.1482.22538.2717.37791.3606.80052.4634 1.65893.8187 2.55281 1.0566.17045.0447.349.0487.52129.0117.17228-.0369.33347-.1139.47059-.2245l1.64152-1.3125h.1482l1.6415 1.3125c.1376.1101.2991.1865.4715.2228.1725.0363.351.0316.5213-.0138.8934-.2368 1.7514-.5908 2.5519-1.0528.1524-.0883.2819-.2112.3782-.3587.0962-.1475.1565-.3156.1759-.4907l.2325-2.0887.104-.1041 2.0897-.239c.1751-.0194.3432-.0797.4907-.1759.1475-.0963.2704-.2258.3587-.3782.4634-.8005.8187-1.6589 1.0566-2.5528.0448-.1699.0493-.3479.013-.5198-.0363-.172-.1124-.333-.2221-.4702l-1.3125-1.6416Zm-2.2612-.4584c.015.256.015.5127 0 .7687-.0168.2784.0704.553.2446.7707l1.2038 1.5047c-.1136.3363-.2492.6648-.406.9834l-1.9153.2128c-.2773.0317-.5329.1654-.7171.375-.1704.1919-.3519.3735-.5438.5438-.2096.1842-.3433.4398-.375.7171l-.2119 1.9144c-.3185.1574-.647.2936-.9834.4078l-1.5047-1.2047c-.1997-.1593-.4477-.2459-.7031-.2456h-.0675c-.2561.015-.5127.015-.7688 0-.2781-.0165-.5525.0703-.7706.2438l-1.50469 1.2047c-.33634-.1137-.66486-.2493-.98343-.406l-.21282-1.9153c-.0317-.2773-.16536-.5329-.375-.7172-.19187-.1703-.37344-.3519-.54375-.5437-.18426-.2097-.43988-.3433-.71718-.375l-1.91438-.2119c-.15734-.3185-.29357-.647-.40781-.9834l1.20375-1.5047c.17424-.2177.26144-.4923.24469-.7707-.01501-.256-.01501-.5127 0-.7687.01675-.2783-.07045-.553-.24469-.77063L3.18781 8.34038c.11364-.33634.24924-.66486.40594-.98343l1.91531-.21281c.27731-.03171.53292-.16537.71719-.375.17031-.19188.35188-.37345.54375-.54375.20964-.18427.3433-.43989.375-.71719l.21188-1.91438c.31852-.15734.64704-.29357.98343-.40781L9.845 4.3907c.2181.17343.4925.26023.7706.24375.2561-.015.5127-.015.7688 0 .2782.01701.5528-.06985.7706-.24375l1.5047-1.20469c.3364.11424.6649.25047.9834.40781l.2128 1.91532c.0317.2773.1654.53292.375.71718.1919.17031.3735.35188.5438.54375.1843.20964.4399.3433.7172.375l1.9143.21188c.1574.31852.2936.64704.4079.98343l-1.2038 1.50469c-.1749.21743-.2628.49203-.2465.77063Z"/></svg>'
 };
 export {
   getIconElement,

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

@@ -0,0 +1,6 @@
+export declare class DevOverlayToggle extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    input: HTMLInputElement;
+    constructor();
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,51 @@
+class DevOverlayToggle extends HTMLElement {
+  shadowRoot;
+  input;
+  constructor() {
+    super();
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+		<style>
+			input {
+				appearance: none;
+				width: 32px;
+				height: 20px;
+				border: 1px solid rgba(145, 152, 173, 1);
+				transition: background-color 0.2s ease, border-color 0.2s ease;
+				border-radius: 9999px;
+			}
+
+			input::after {
+				content: '';
+				width: 16px;
+				display: inline-block;
+				height: 16px;
+				background-color: rgba(145, 152, 173, 1);
+				border-radius: 9999px;
+				transition: transform 0.2s ease, background-color 0.2s ease;
+				top: 1px;
+				left: 1px;
+				position: relative;
+			}
+
+			input:checked {
+				border: 1px solid rgba(213, 249, 196, 1);
+				background-color: rgba(61, 125, 31, 1);
+			}
+
+			input:checked::after {
+				transform: translateX(12px);
+				background: rgba(213, 249, 196, 1);
+			}
+		</style>
+		`;
+    this.input = document.createElement("input");
+  }
+  connectedCallback() {
+    this.input.type = "checkbox";
+    this.shadowRoot.append(this.input);
+  }
+}
+export {
+  DevOverlayToggle
+};

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

@@ -13,11 +13,12 @@ class DevOverlayWindow extends HTMLElement {
     this.shadowRoot.innerHTML = `
 			<style>
 				:host {
+					box-sizing: border-box;
 					display: flex;
 					flex-direction: column;
 					background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841);
 					border: 1px solid rgba(52, 56, 65, 1);
-					width: 640px;
+					width: min(640px, 100%);
 					height: 480px;
 					border-radius: 12px;
 					padding: 24px;
@@ -31,24 +32,52 @@ class DevOverlayWindow extends HTMLElement {
 					box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
 				}
 
-				h1 {
-					margin: 0;
+				::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4), ::slotted(h5) {
 					font-weight: 600;
 					color: #fff;
 				}
 
-				h1 svg {
-					vertical-align: text-bottom;
+				#window-title {
+					display: flex;
+					align-items: center;
+					font-weight: 600;
+					color: #fff;
+					margin: 0;
+					font-size: 22px;
+				}
+
+				::slotted(h1) {
+					font-size: 22px;
+				}
+
+				::slotted(h2) {
+					font-size: 20px;
+				}
+
+				::slotted(h3) {
+					font-size: 18px;
+				}
+
+				::slotted(h4) {
+					font-size: 16px;
+				}
+
+				::slotted(h5) {
+					font-size: 14px;
+				}
+
+				#window-title svg {
 					margin-right: 8px;
+					height: 1em;
 				}
 
-				hr {
+				hr, ::slotted(hr) {
 					border: 1px solid rgba(27, 30, 36, 1);
 					margin: 1em 0;
 				}
 			</style>
 
-			<h1>${this.windowIcon ? this.getElementForIcon(this.windowIcon) : ""}${this.windowTitle ?? ""}</h1>
+			<h1 id="window-title">${this.windowIcon ? this.getElementForIcon(this.windowIcon) : ""}${this.windowTitle ?? ""}</h1>
 			<hr />
 			<slot />
 		`;

package/dist/transitions/router.js

@@ -299,7 +299,7 @@ function navigate(href, options) {
   if (inBrowser === false) {
     if (!navigateOnServerWarned) {
       const warning = new Error(
-        "The view transtions client API was called during a server side render. This may be unintentional as the navigate() function is expected to be called in response to user interactions. Please make sure that your usage is correct."
+        "The view transitions client API was called during a server side render. This may be unintentional as the navigate() function is expected to be called in response to user interactions. Please make sure that your usage is correct."
       );
       warning.name = "Warning";
       console.warn(warning);

package/dist/vite-plugin-astro-server/plugin.js

@@ -69,6 +69,7 @@ function createDevelopmentManifest(settings) {
     };
   }
   return {
+    trailingSlash: settings.config.trailingSlash,
     compressHTML: settings.config.compressHTML,
     assets: /* @__PURE__ */ new Set(),
     entryModules: {},

package/dist/vite-plugin-astro-server/route.js

@@ -202,7 +202,11 @@ async function handleRoute({
   }
   const onRequest = middleware?.onRequest;
   if (config.experimental.i18n) {
-    const i18Middleware = createI18nMiddleware(config.experimental.i18n, config.base);
+    const i18Middleware = createI18nMiddleware(
+      config.experimental.i18n,
+      config.base,
+      config.trailingSlash
+    );
     if (i18Middleware) {
       if (onRequest) {
         pipeline.setMiddlewareFunction(sequence(i18Middleware, onRequest));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",
@@ -165,15 +165,15 @@
     "yargs-parser": "^21.1.1",
     "zod": "^3.22.4",
     "@astrojs/internal-helpers": "0.2.1",
-    "@astrojs/telemetry": "3.0.4",
-    "@astrojs/markdown-remark": "3.4.0"
+    "@astrojs/markdown-remark": "3.5.0",
+    "@astrojs/telemetry": "3.0.4"
   },
   "optionalDependencies": {
     "sharp": "^0.32.5"
   },
   "devDependencies": {
     "@astrojs/check": "^0.1.0",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "1.40.0-alpha-nov-13-2023",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.20.1",
     "@types/chai": "^4.3.5",