astro 3.3.3 → 3.4.0

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

@@ -0,0 +1,75 @@
+import { attachTooltipToHighlight, createHighlight, positionHighlight } from "./utils/highlight.js";
+const icon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 16"><path fill="#fff" d="M.6 2A1.1 1.1 0 0 1 1.7.9h16.6a1.1 1.1 0 1 1 0 2.2H1.6A1.1 1.1 0 0 1 .8 2Zm1.1 7.1h6a1.1 1.1 0 0 0 0-2.2h-6a1.1 1.1 0 0 0 0 2.2ZM9.3 13H1.8a1.1 1.1 0 1 0 0 2.2h7.5a1.1 1.1 0 1 0 0-2.2Zm11.3 1.9a1.1 1.1 0 0 1-1.5 0l-1.7-1.7a4.1 4.1 0 1 1 1.6-1.6l1.6 1.7a1.1 1.1 0 0 1 0 1.6Zm-5.3-3.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Z"/></svg>';
+const selectorBasedRules = [
+  {
+    title: "Missing `alt` tag",
+    message: "The alt attribute is important for accessibility.",
+    selector: "img:not([alt])"
+  }
+];
+var audit_default = {
+  id: "astro:audit",
+  name: "Audit",
+  icon,
+  init(canvas, eventTarget) {
+    let audits = [];
+    selectorBasedRules.forEach((rule) => {
+      document.querySelectorAll(rule.selector).forEach((el) => {
+        createAuditProblem(rule, el);
+      });
+    });
+    if (audits.length > 0) {
+      eventTarget.dispatchEvent(
+        new CustomEvent("plugin-notification", {
+          detail: {
+            state: true
+          }
+        })
+      );
+    }
+    function createAuditProblem(rule, originalElement) {
+      const computedStyle = window.getComputedStyle(originalElement);
+      const targetedElement = originalElement.children[0] || originalElement;
+      if (targetedElement.offsetParent === null || computedStyle.display === "none") {
+        return;
+      }
+      const rect = originalElement.getBoundingClientRect();
+      const highlight = createHighlight(rect, "warning");
+      const tooltip = buildAuditTooltip(rule);
+      attachTooltipToHighlight(highlight, tooltip, originalElement);
+      canvas.append(highlight);
+      audits.push({ highlightElement: highlight, auditedElement: originalElement });
+      ["scroll", "resize"].forEach((event) => {
+        window.addEventListener(event, () => {
+          audits.forEach(({ highlightElement, auditedElement }) => {
+            const newRect = auditedElement.getBoundingClientRect();
+            positionHighlight(highlightElement, newRect);
+          });
+        });
+      });
+    }
+    function buildAuditTooltip(rule) {
+      const tooltip = document.createElement("astro-overlay-tooltip");
+      tooltip.sections = [
+        {
+          icon: "warning",
+          title: rule.title
+        },
+        {
+          content: rule.message
+        }
+        // TODO: Add a link to the file
+        // Needs https://github.com/withastro/compiler/pull/375
+        // {
+        // 	content: '/src/somewhere/component.astro',
+        // 	clickDescription: 'Click to go to file',
+        // 	clickAction() {},
+        // },
+      ];
+      return tooltip;
+    }
+  }
+};
+export {
+  audit_default as default
+};

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

@@ -0,0 +1,5 @@
+import type { DevOverlayHighlight } from '../../ui-library/highlight.js';
+import type { Icon } from '../../ui-library/icons.js';
+export declare function createHighlight(rect: DOMRect, icon?: Icon): DevOverlayHighlight;
+export declare function positionHighlight(highlight: DevOverlayHighlight, rect: DOMRect): void;
+export declare function attachTooltipToHighlight(highlight: DevOverlayHighlight, tooltip: HTMLElement, originalElement: Element): void;

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

@@ -0,0 +1,39 @@
+function createHighlight(rect, icon) {
+  const highlight = document.createElement("astro-overlay-highlight");
+  if (icon)
+    highlight.icon = icon;
+  highlight.tabIndex = 0;
+  positionHighlight(highlight, rect);
+  return highlight;
+}
+function positionHighlight(highlight, rect) {
+  highlight.style.top = `${Math.max(rect.top + window.scrollY - 10, 0)}px`;
+  highlight.style.left = `${Math.max(rect.left + window.scrollX - 10, 0)}px`;
+  highlight.style.width = `${rect.width + 15}px`;
+  highlight.style.height = `${rect.height + 15}px`;
+}
+function attachTooltipToHighlight(highlight, tooltip, originalElement) {
+  highlight.shadowRoot.append(tooltip);
+  ["mouseover", "focus"].forEach((event) => {
+    highlight.addEventListener(event, () => {
+      tooltip.dataset.show = "true";
+      const originalRect = originalElement.getBoundingClientRect();
+      const dialogRect = tooltip.getBoundingClientRect();
+      if (originalRect.top < dialogRect.height) {
+        tooltip.style.top = `${originalRect.height + 15}px`;
+      } else {
+        tooltip.style.top = `-${tooltip.offsetHeight}px`;
+      }
+    });
+  });
+  ["mouseout", "blur"].forEach((event) => {
+    highlight.addEventListener(event, () => {
+      tooltip.dataset.show = "false";
+    });
+  });
+}
+export {
+  attachTooltipToHighlight,
+  createHighlight,
+  positionHighlight
+};

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    id: string;
+    name: string;
+    icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#fff\" d=\"M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z\"/></svg>";
+    init(canvas: ShadowRoot): void;
+};
+export default _default;

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

@@ -0,0 +1,75 @@
+import { attachTooltipToHighlight, createHighlight, positionHighlight } from "./utils/highlight.js";
+const icon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z"/></svg>';
+var xray_default = {
+  id: "astro:xray",
+  name: "Xray",
+  icon,
+  init(canvas) {
+    let islandsOverlays = [];
+    addIslandsOverlay();
+    function addIslandsOverlay() {
+      const islands = document.querySelectorAll("astro-island");
+      islands.forEach((island) => {
+        const computedStyle = window.getComputedStyle(island);
+        const islandElement = island.children[0] || island;
+        if (islandElement.offsetParent === null || computedStyle.display === "none") {
+          return;
+        }
+        const rect = islandElement.getBoundingClientRect();
+        const highlight = createHighlight(rect);
+        const tooltip = buildIslandTooltip(island);
+        attachTooltipToHighlight(highlight, tooltip, islandElement);
+        canvas.append(highlight);
+        islandsOverlays.push({ highlightElement: highlight, island: islandElement });
+      });
+      ["scroll", "resize"].forEach((event) => {
+        window.addEventListener(event, () => {
+          islandsOverlays.forEach(({ highlightElement, island: islandElement }) => {
+            const newRect = islandElement.getBoundingClientRect();
+            positionHighlight(highlightElement, newRect);
+          });
+        });
+      });
+    }
+    function buildIslandTooltip(island) {
+      const tooltip = document.createElement("astro-overlay-tooltip");
+      tooltip.sections = [];
+      const islandProps = island.getAttribute("props") ? JSON.parse(island.getAttribute("props")) : {};
+      const islandClientDirective = island.getAttribute("client");
+      if (islandClientDirective) {
+        tooltip.sections.push({
+          title: "Client directive",
+          inlineTitle: `<code>client:${islandClientDirective}</code>`
+        });
+      }
+      if (Object.keys(islandProps).length > 0) {
+        tooltip.sections.push({
+          title: "Props",
+          content: `${Object.entries(islandProps).map((prop) => `<code>${prop[0]}=${getPropValue(prop[1])}</code>`).join(", ")}`
+        });
+      }
+      const islandComponentPath = island.getAttribute("component-url");
+      if (islandComponentPath) {
+        tooltip.sections.push({
+          content: islandComponentPath,
+          clickDescription: "Click to go to file",
+          async clickAction() {
+            await fetch(
+              "/__open-in-editor?file=" + encodeURIComponent(
+                window.__astro_dev_overlay__.root + islandComponentPath.slice(1)
+              )
+            );
+          }
+        });
+      }
+      return tooltip;
+    }
+    function getPropValue(prop) {
+      const [_, value] = prop;
+      return JSON.stringify(value, null, 2);
+    }
+  }
+};
+export {
+  xray_default as default
+};

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

@@ -0,0 +1,9 @@
+import { type Icon } from './icons.js';
+export declare class DevOverlayCard extends HTMLElement {
+    icon?: Icon;
+    link?: string | undefined | null;
+    shadowRoot: ShadowRoot;
+    constructor();
+    connectedCallback(): void;
+    getElementForIcon(icon: Icon): string;
+}

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

@@ -0,0 +1,67 @@
+import { getIconElement, isDefinedIcon } from "./icons.js";
+class DevOverlayCard extends HTMLElement {
+  icon;
+  link;
+  shadowRoot;
+  constructor() {
+    super();
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+    this.link = this.getAttribute("link");
+    this.icon = this.hasAttribute("icon") ? this.getAttribute("icon") : void 0;
+  }
+  connectedCallback() {
+    const element = this.link ? "a" : "button";
+    this.shadowRoot.innerHTML = `
+			<style>
+				a, button {
+					display: block;
+					padding: 40px 16px;
+					border-radius: 8px;
+					border: 1px solid rgba(35, 38, 45, 1);
+					color: #fff;
+					font-size: 16px;
+					font-weight: 600;
+					line-height: 19px;
+					text-decoration: none;
+				}
+
+				a:hover, button:hover {
+					background: rgba(136, 58, 234, 0.33);
+					border: 1px solid rgba(113, 24, 226, 1)
+				}
+
+				svg {
+					display: block;
+					margin: 0 auto;
+				}
+
+				span {
+					margin-top: 8px;
+					display: block;
+					text-align: center;
+				}
+			</style>
+
+			<${element}${this.link ? ` href="${this.link}" target="_blank"` : ``}>
+				${this.icon ? this.getElementForIcon(this.icon) : ""}
+				<span><slot /></span>
+			</${element}>
+		`;
+  }
+  getElementForIcon(icon) {
+    let iconElement;
+    if (isDefinedIcon(icon)) {
+      iconElement = getIconElement(icon);
+    } else {
+      iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      iconElement.setAttribute("viewBox", "0 0 16 16");
+      iconElement.innerHTML = icon;
+    }
+    iconElement?.style.setProperty("height", "24px");
+    iconElement?.style.setProperty("width", "24px");
+    return iconElement?.outerHTML ?? "";
+  }
+}
+export {
+  DevOverlayCard
+};

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

@@ -0,0 +1,7 @@
+import { type Icon } from './icons.js';
+export declare class DevOverlayHighlight extends HTMLElement {
+    icon?: Icon | undefined | null;
+    shadowRoot: ShadowRoot;
+    constructor();
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,60 @@
+import { getIconElement, isDefinedIcon } from "./icons.js";
+class DevOverlayHighlight extends HTMLElement {
+  icon;
+  shadowRoot;
+  constructor() {
+    super();
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+    this.icon = this.hasAttribute("icon") ? this.getAttribute("icon") : void 0;
+    this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+					background: linear-gradient(180deg, rgba(224, 204, 250, 0.33) 0%, rgba(224, 204, 250, 0.0825) 100%);
+					border: 1px solid rgba(113, 24, 226, 1);
+					border-radius: 4px;
+					display: block;
+					width: 100%;
+					height: 100%;
+					position: absolute;
+				}
+
+				.icon {
+					width: 24px;
+					height: 24px;
+					background: linear-gradient(0deg, #B33E66, #B33E66), linear-gradient(0deg, #351722, #351722);
+					border: 1px solid rgba(53, 23, 34, 1);
+					border-radius: 9999px;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					position: absolute;
+					top: -15px;
+					right: -15px;
+				}
+			</style>
+		`;
+  }
+  connectedCallback() {
+    if (this.icon) {
+      let iconContainer = document.createElement("div");
+      iconContainer.classList.add("icon");
+      let iconElement;
+      if (isDefinedIcon(this.icon)) {
+        iconElement = getIconElement(this.icon);
+      } else {
+        iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        iconElement.setAttribute("viewBox", "0 0 16 16");
+        iconElement.innerHTML = this.icon;
+      }
+      if (iconElement) {
+        iconElement?.style.setProperty("width", "16px");
+        iconElement?.style.setProperty("height", "16px");
+        iconContainer.append(iconElement);
+        this.shadowRoot.append(iconContainer);
+      }
+    }
+  }
+}
+export {
+  DevOverlayHighlight
+};

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

@@ -0,0 +1,10 @@
+export type DefinedIcon = keyof typeof icons;
+export type Icon = DefinedIcon | (string & NonNullable<unknown>);
+export declare function isDefinedIcon(icon: Icon): icon is DefinedIcon;
+export declare function getIconElement(name: keyof typeof icons | (string & NonNullable<unknown>)): SVGElement | undefined;
+declare const icons: {
+    readonly 'astro:logo': "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 85 107\"><path fill=\"#fff\" d=\"M27.6 91.1c-4.8-4.4-6.3-13.7-4.2-20.4 3.5 4.2 8.3 5.6 13.3 6.3 7.7 1.2 15.3.8 22.5-2.8l2.5-1.4c.7 2 .9 3.9.6 5.9-.6 4.9-3 8.7-6.9 11.5-1.5 1.2-3.2 2.2-4.8 3.3-4.9 3.3-6.2 7.2-4.4 12.9l.2.6a13 13 0 0 1-5.7-5 13.8 13.8 0 0 1-2.2-7.4c0-1.3 0-2.7-.2-4-.5-3.1-2-4.6-4.8-4.7a5.5 5.5 0 0 0-5.7 4.6l-.2.6Z\"/><path fill=\"url(#a)\" d=\"M27.6 91.1c-4.8-4.4-6.3-13.7-4.2-20.4 3.5 4.2 8.3 5.6 13.3 6.3 7.7 1.2 15.3.8 22.5-2.8l2.5-1.4c.7 2 .9 3.9.6 5.9-.6 4.9-3 8.7-6.9 11.5-1.5 1.2-3.2 2.2-4.8 3.3-4.9 3.3-6.2 7.2-4.4 12.9l.2.6a13 13 0 0 1-5.7-5 13.8 13.8 0 0 1-2.2-7.4c0-1.3 0-2.7-.2-4-.5-3.1-2-4.6-4.8-4.7a5.5 5.5 0 0 0-5.7 4.6l-.2.6Z\"/><path fill=\"#fff\" d=\"M0 69.6s14.3-7 28.7-7l10.8-33.5c.4-1.6 1.6-2.7 3-2.7 1.2 0 2.4 1.1 2.8 2.7l10.9 33.5c17 0 28.6 7 28.6 7L60.5 3.2c-.7-2-2-3.2-3.5-3.2H27.8c-1.6 0-2.7 1.3-3.4 3.2L0 69.6Z\"/><defs><linearGradient id=\"a\" x1=\"22.5\" x2=\"69.1\" y1=\"107\" y2=\"84.9\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#D83333\"/><stop offset=\"1\" stop-color=\"#F041FF\"/></linearGradient></defs></svg>";
+    readonly warning: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"#fff\" d=\"M8 .40625c-1.5019 0-2.97007.445366-4.21886 1.27978C2.53236 2.52044 1.55905 3.70642.984293 5.094.40954 6.48157.259159 8.00842.552165 9.48147.845172 10.9545 1.56841 12.3076 2.63041 13.3696c1.06201 1.062 2.41508 1.7852 3.88813 2.0782 1.47304.293 2.99989.1427 4.38746-.4321 1.3876-.5747 2.5736-1.5481 3.408-2.7968.8344-1.2488 1.2798-2.717 1.2798-4.2189-.0023-2.0133-.8031-3.9435-2.2267-5.36713C11.9435 1.20925 10.0133.408483 8 .40625ZM8 13.9062c-1.16814 0-2.31006-.3463-3.28133-.9953-.97128-.649-1.7283-1.5715-2.17533-2.6507-.44703-1.0792-.56399-2.26675-.3361-3.41245.22789-1.1457.79041-2.1981 1.61641-3.0241.82601-.826 1.8784-1.38852 3.0241-1.61641 1.1457-.2279 2.33325-.11093 3.41245.3361 1.0793.44703 2.0017 1.20405 2.6507 2.17532.649.97128.9954 2.11319.9954 3.28134-.0017 1.56592-.6245 3.0672-1.7318 4.1745S9.56592 13.9046 8 13.9062Zm-.84375-5.62495V4.625c0-.22378.0889-.43839.24713-.59662.15824-.15824.37285-.24713.59662-.24713.22378 0 .43839.08889.59662.24713.15824.15823.24713.37284.24713.59662v3.65625c0 .22378-.08889.43839-.24713.59662C8.43839 9.03611 8.22378 9.125 8 9.125c-.22377 0-.43838-.08889-.59662-.24713-.15823-.15823-.24713-.37284-.24713-.59662ZM9.125 11.0938c0 .2225-.06598.44-.18959.625-.12362.185-.29932.3292-.50489.4143-.20556.0852-.43176.1074-.64999.064-.21823-.0434-.41869-.1505-.57602-.3079-.15734-.1573-.26448-.3577-.30789-.576-.04341-.2182-.02113-.4444.06402-.65.08515-.2055.22934-.3812.41435-.5049.185-.1236.40251-.18955.62501-.18955.29837 0 .58452.11855.7955.32955.21098.2109.3295.4971.3295.7955Z\"/></svg>";
+    readonly 'arrow-down': "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 14\"><path fill=\"#13151A\" d=\"m11.0306 8.53063-4.5 4.49997c-.06968.0699-.15247.1254-.24364.1633-.09116.0378-.1889.0573-.28761.0573-.09871 0-.19645-.0195-.28762-.0573-.09116-.0379-.17395-.0934-.24363-.1633L.968098 8.53063c-.140896-.1409-.220051-.332-.220051-.53125 0-.19926.079155-.39036.220051-.53125.140892-.1409.331992-.22006.531252-.22006.19926 0 .39035.07916.53125.22006l3.21937 3.21937V1.5c0-.19891.07902-.38968.21967-.53033C5.61029.829018 5.80106.75 5.99997.75c.19891 0 .38968.079018.53033.21967.14065.14065.21967.33142.21967.53033v9.1875l3.21938-3.22c.14085-.1409.33195-.22005.53125-.22005.1993 0 .3904.07915.5312.22005.1409.1409.2201.33199.2201.53125s-.0792.39035-.2201.53125l-.0012.00063Z\"/></svg>";
+};
+export {};

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

@@ -0,0 +1,21 @@
+function isDefinedIcon(icon) {
+  return icon in icons;
+}
+function getIconElement(name) {
+  const icon = icons[name];
+  if (!icon) {
+    return void 0;
+  }
+  const svgFragment = new DocumentFragment();
+  svgFragment.append(document.createRange().createContextualFragment(icon));
+  return svgFragment.firstElementChild;
+}
+const icons = {
+  "astro:logo": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 85 107"><path fill="#fff" d="M27.6 91.1c-4.8-4.4-6.3-13.7-4.2-20.4 3.5 4.2 8.3 5.6 13.3 6.3 7.7 1.2 15.3.8 22.5-2.8l2.5-1.4c.7 2 .9 3.9.6 5.9-.6 4.9-3 8.7-6.9 11.5-1.5 1.2-3.2 2.2-4.8 3.3-4.9 3.3-6.2 7.2-4.4 12.9l.2.6a13 13 0 0 1-5.7-5 13.8 13.8 0 0 1-2.2-7.4c0-1.3 0-2.7-.2-4-.5-3.1-2-4.6-4.8-4.7a5.5 5.5 0 0 0-5.7 4.6l-.2.6Z"/><path fill="url(#a)" d="M27.6 91.1c-4.8-4.4-6.3-13.7-4.2-20.4 3.5 4.2 8.3 5.6 13.3 6.3 7.7 1.2 15.3.8 22.5-2.8l2.5-1.4c.7 2 .9 3.9.6 5.9-.6 4.9-3 8.7-6.9 11.5-1.5 1.2-3.2 2.2-4.8 3.3-4.9 3.3-6.2 7.2-4.4 12.9l.2.6a13 13 0 0 1-5.7-5 13.8 13.8 0 0 1-2.2-7.4c0-1.3 0-2.7-.2-4-.5-3.1-2-4.6-4.8-4.7a5.5 5.5 0 0 0-5.7 4.6l-.2.6Z"/><path fill="#fff" d="M0 69.6s14.3-7 28.7-7l10.8-33.5c.4-1.6 1.6-2.7 3-2.7 1.2 0 2.4 1.1 2.8 2.7l10.9 33.5c17 0 28.6 7 28.6 7L60.5 3.2c-.7-2-2-3.2-3.5-3.2H27.8c-1.6 0-2.7 1.3-3.4 3.2L0 69.6Z"/><defs><linearGradient id="a" x1="22.5" x2="69.1" y1="107" y2="84.9" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>`,
+  warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M8 .40625c-1.5019 0-2.97007.445366-4.21886 1.27978C2.53236 2.52044 1.55905 3.70642.984293 5.094.40954 6.48157.259159 8.00842.552165 9.48147.845172 10.9545 1.56841 12.3076 2.63041 13.3696c1.06201 1.062 2.41508 1.7852 3.88813 2.0782 1.47304.293 2.99989.1427 4.38746-.4321 1.3876-.5747 2.5736-1.5481 3.408-2.7968.8344-1.2488 1.2798-2.717 1.2798-4.2189-.0023-2.0133-.8031-3.9435-2.2267-5.36713C11.9435 1.20925 10.0133.408483 8 .40625ZM8 13.9062c-1.16814 0-2.31006-.3463-3.28133-.9953-.97128-.649-1.7283-1.5715-2.17533-2.6507-.44703-1.0792-.56399-2.26675-.3361-3.41245.22789-1.1457.79041-2.1981 1.61641-3.0241.82601-.826 1.8784-1.38852 3.0241-1.61641 1.1457-.2279 2.33325-.11093 3.41245.3361 1.0793.44703 2.0017 1.20405 2.6507 2.17532.649.97128.9954 2.11319.9954 3.28134-.0017 1.56592-.6245 3.0672-1.7318 4.1745S9.56592 13.9046 8 13.9062Zm-.84375-5.62495V4.625c0-.22378.0889-.43839.24713-.59662.15824-.15824.37285-.24713.59662-.24713.22378 0 .43839.08889.59662.24713.15824.15823.24713.37284.24713.59662v3.65625c0 .22378-.08889.43839-.24713.59662C8.43839 9.03611 8.22378 9.125 8 9.125c-.22377 0-.43838-.08889-.59662-.24713-.15823-.15823-.24713-.37284-.24713-.59662ZM9.125 11.0938c0 .2225-.06598.44-.18959.625-.12362.185-.29932.3292-.50489.4143-.20556.0852-.43176.1074-.64999.064-.21823-.0434-.41869-.1505-.57602-.3079-.15734-.1573-.26448-.3577-.30789-.576-.04341-.2182-.02113-.4444.06402-.65.08515-.2055.22934-.3812.41435-.5049.185-.1236.40251-.18955.62501-.18955.29837 0 .58452.11855.7955.32955.21098.2109.3295.4971.3295.7955Z"/></svg>`,
+  "arrow-down": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 14"><path fill="#13151A" d="m11.0306 8.53063-4.5 4.49997c-.06968.0699-.15247.1254-.24364.1633-.09116.0378-.1889.0573-.28761.0573-.09871 0-.19645-.0195-.28762-.0573-.09116-.0379-.17395-.0934-.24363-.1633L.968098 8.53063c-.140896-.1409-.220051-.332-.220051-.53125 0-.19926.079155-.39036.220051-.53125.140892-.1409.331992-.22006.531252-.22006.19926 0 .39035.07916.53125.22006l3.21937 3.21937V1.5c0-.19891.07902-.38968.21967-.53033C5.61029.829018 5.80106.75 5.99997.75c.19891 0 .38968.079018.53033.21967.14065.14065.21967.33142.21967.53033v9.1875l3.21938-3.22c.14085-.1409.33195-.22005.53125-.22005.1993 0 .3904.07915.5312.22005.1409.1409.2201.33199.2201.53125s-.0792.39035-.2201.53125l-.0012.00063Z"/></svg>'
+};
+export {
+  getIconElement,
+  isDefinedIcon
+};

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

@@ -0,0 +1,16 @@
+import { type Icon } from './icons.js';
+export interface DevOverlayTooltipSection {
+    title?: string;
+    inlineTitle?: string;
+    icon?: Icon;
+    content?: string;
+    clickAction?: () => void | Promise<void>;
+    clickDescription?: string;
+}
+export declare class DevOverlayTooltip extends HTMLElement {
+    sections: DevOverlayTooltipSection[];
+    shadowRoot: ShadowRoot;
+    constructor();
+    connectedCallback(): void;
+    getElementForIcon(icon: Icon | (string & NonNullable<unknown>)): string;
+}

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

@@ -0,0 +1,132 @@
+import { getIconElement, isDefinedIcon } from "./icons.js";
+class DevOverlayTooltip extends HTMLElement {
+  sections = [];
+  shadowRoot;
+  constructor() {
+    super();
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+			<style>
+			:host {
+				position: absolute;
+				display: none;
+				color: white;
+				background: linear-gradient(0deg, #310A65, #310A65), linear-gradient(0deg, #7118E2, #7118E2);
+				border: 1px solid rgba(113, 24, 226, 1);
+				border-radius: 4px;
+				padding: 0;
+				font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+				font-size: 14px;
+				margin: 0;
+				z-index: 9999999;
+				max-width: 45ch;
+				width: fit-content;
+				min-width: 27ch;
+			}
+
+			:host([data-show="true"]) {
+				display: block;
+			}
+
+			svg {
+				vertical-align: bottom;
+				margin-right: 4px;
+			}
+
+			hr {
+				border: 1px solid rgba(136, 58, 234, 0.33);
+				padding: 0;
+				margin: 0;
+			}
+
+			section {
+				padding: 8px;
+			}
+
+			.modal-title {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+
+			.modal-main-title {
+				font-weight: bold;
+			}
+
+			.modal-title + div {
+				margin-top: 8px;
+			}
+
+			.modal-cta {
+				display: block;
+				font-weight: bold;
+				font-size: 0.9em;
+			}
+
+			.clickable-section {
+				background: rgba(113, 24, 226, 1);
+				padding: 8px;
+				border: 0;
+				color: white;
+				font-family: system-ui, sans-serif;
+				text-align: left;
+				line-height: 1.2;
+				white-space: nowrap;
+				text-decoration: none;
+				margin: 0;
+				width: 100%;
+			}
+
+			.clickable-section:hover {
+				cursor: pointer;
+			}
+
+			code {
+				background: rgba(136, 58, 234, 0.33);
+				font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+				border-radius: 2px;
+				font-size: 14px;
+				padding: 2px;
+			}
+			`;
+    const fragment = new DocumentFragment();
+    this.sections.forEach((section, index) => {
+      const sectionElement = section.clickAction ? document.createElement("button") : document.createElement("section");
+      if (section.clickAction) {
+        sectionElement.classList.add("clickable-section");
+        sectionElement.addEventListener("click", async () => {
+          await section.clickAction();
+        });
+      }
+      sectionElement.innerHTML = `
+				${section.title ? `<div class="modal-title"><span class="modal-main-title">
+						${section.icon ? this.getElementForIcon(section.icon) : ""}${section.title}</span>${section.inlineTitle ?? ""}</div>` : ""}
+				${section.content ? `<div>${section.content}</div>` : ""}
+				${section.clickDescription ? `<span class="modal-cta">${section.clickDescription}</span>` : ""}
+			`;
+      fragment.append(sectionElement);
+      if (index < this.sections.length - 1) {
+        fragment.append(document.createElement("hr"));
+      }
+    });
+    this.shadowRoot.append(fragment);
+  }
+  getElementForIcon(icon) {
+    let iconElement;
+    if (isDefinedIcon(icon)) {
+      iconElement = getIconElement(icon);
+    } else {
+      iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      iconElement.setAttribute("viewBox", "0 0 16 16");
+      iconElement.innerHTML = icon;
+    }
+    iconElement?.style.setProperty("width", "16px");
+    iconElement?.style.setProperty("height", "16px");
+    return iconElement?.outerHTML ?? "";
+  }
+}
+export {
+  DevOverlayTooltip
+};

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

@@ -0,0 +1,9 @@
+import { type Icon } from './icons.js';
+export declare class DevOverlayWindow extends HTMLElement {
+    windowTitle?: string | undefined | null;
+    windowIcon?: Icon | undefined | null;
+    shadowRoot: ShadowRoot;
+    constructor();
+    connectedCallback(): Promise<void>;
+    getElementForIcon(icon: Icon): string | undefined;
+}

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

@@ -0,0 +1,70 @@
+import { getIconElement, isDefinedIcon } from "./icons.js";
+class DevOverlayWindow extends HTMLElement {
+  windowTitle;
+  windowIcon;
+  shadowRoot;
+  constructor() {
+    super();
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+    this.windowTitle = this.getAttribute("window-title");
+    this.windowIcon = this.hasAttribute("window-icon") ? this.getAttribute("window-icon") : void 0;
+  }
+  async connectedCallback() {
+    this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+					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;
+					height: 480px;
+					border-radius: 12px;
+					padding: 24px;
+					font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+					color: rgba(204, 206, 216, 1);
+					position: fixed;
+					z-index: 9999999999;
+					top: 55%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+				}
+
+				h1 {
+					margin: 0;
+					font-weight: 600;
+					color: #fff;
+				}
+
+				h1 svg {
+					vertical-align: text-bottom;
+					margin-right: 8px;
+				}
+
+				hr {
+					border: 1px solid rgba(27, 30, 36, 1);
+					margin: 1em 0;
+				}
+			</style>
+
+			<h1>${this.windowIcon ? this.getElementForIcon(this.windowIcon) : ""}${this.windowTitle ?? ""}</h1>
+			<hr />
+			<slot />
+		`;
+  }
+  getElementForIcon(icon) {
+    if (isDefinedIcon(icon)) {
+      const iconElement = getIconElement(icon);
+      iconElement?.style.setProperty("height", "1em");
+      return iconElement?.outerHTML;
+    } else {
+      const iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      iconElement.setAttribute("viewBox", "0 0 16 16");
+      iconElement.innerHTML = icon;
+      return iconElement.outerHTML;
+    }
+  }
+}
+export {
+  DevOverlayWindow
+};

package/dist/runtime/server/render/astro/render.js

@@ -18,7 +18,7 @@ async function renderToString(result, componentFactory, props, children, isPage
     write(chunk) {
       if (isPage && !renderedFirstPageChunk) {
         renderedFirstPageChunk = true;
-        if (!/<!doctype html/i.test(String(chunk))) {
+        if (!result.partial && !/<!doctype html/i.test(String(chunk))) {
           const doctype = result.compressHTML ? "<!DOCTYPE html>" : "<!DOCTYPE html>\n";
           str += doctype;
         }
@@ -51,7 +51,7 @@ async function renderToReadableStream(result, componentFactory, props, children,
         write(chunk) {
           if (isPage && !renderedFirstPageChunk) {
             renderedFirstPageChunk = true;
-            if (!/<!doctype html/i.test(String(chunk))) {
+            if (!result.partial && !/<!doctype html/i.test(String(chunk))) {
               const doctype = result.compressHTML ? "<!DOCTYPE html>" : "<!DOCTYPE html>\n";
               controller.enqueue(encoder.encode(doctype));
             }

package/dist/runtime/server/render/common.js

@@ -28,13 +28,13 @@ function stringifyChunk(result, chunk) {
         }
       }
       case "head": {
-        if (result._metadata.hasRenderedHead) {
+        if (result._metadata.hasRenderedHead || result.partial) {
           return "";
         }
         return renderAllHeadContent(result);
       }
       case "maybe-head": {
-        if (result._metadata.hasRenderedHead || result._metadata.headInTree) {
+        if (result._metadata.hasRenderedHead || result._metadata.headInTree || result.partial) {
           return "";
         }
         return renderAllHeadContent(result);