astro 3.6.2 → 4.0.0-beta.1

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

@@ -1,15 +1,61 @@
+import { isDefinedIcon } from "../ui-library/icons.js";
+import { colorForIntegration, iconForIntegration } from "./utils/icons.js";
 import { createWindowWithTransition, waitForTransition } 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",
   name: "Astro",
   icon: "astro:logo",
-  init(canvas) {
+  async init(canvas, eventTarget) {
     createWindow();
     document.addEventListener("astro:after-swap", createWindow);
+    eventTarget.addEventListener("plugin-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();
+          });
+      }
+    });
     function createWindow() {
-      const window = createWindowWithTransition(
-        "Astro",
-        "astro:logo",
+      const links = [
+        {
+          icon: "bug",
+          name: "Report a bug",
+          link: "https://github.com/withastro/astro/issues/new/choose"
+        },
+        {
+          icon: "lightbulb",
+          name: "Suggestions",
+          link: "https://github.com/withastro/roadmap/discussions/new/choose"
+        },
+        {
+          icon: "file-search",
+          name: "Docs",
+          link: "https://docs.astro.build"
+        },
+        {
+          icon: "star",
+          name: "Star on GitHub",
+          link: "https://github.com/withastro/astro"
+        },
+        {
+          icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14"><path fill="currentColor" d="M14.3451 1.9072c-1.0375-.47613-2.1323-.81595-3.257-1.010998-.0102-.001716-.0207-.000234-.03.004243s-.017.011728-.022.020757c-.141.249998-.297.576998-.406.832998-1.2124-.18399-2.44561-.18399-3.658 0-.12159-.28518-.25914-.56328-.412-.832998-.00513-.00893-.01285-.016098-.02213-.02056-.00928-.004462-.0197-.00601-.02987-.00444-1.125.193998-2.22.533998-3.257 1.010998-.00888.00339-.0163.00975-.021.018-2.074 3.099-2.643004 6.122-2.364004 9.107.001.014.01.028.021.037 1.207724.8946 2.558594 1.5777 3.995004 2.02.01014.0032.02103.0031.03111-.0003.01007-.0034.01878-.01.02489-.0187.308-.42.582-.863.818-1.329.00491-.0096.0066-.0205.0048-.0312-.00181-.0106-.007-.0204-.0148-.0278-.00517-.0049-.0113-.0086-.018-.011-.43084-.1656-.84811-.3645-1.248-.595-.01117-.0063-.01948-.0167-.0232-.029-.00373-.0123-.00258-.0255.0032-.037.0034-.0074.00854-.014.015-.019.084-.063.168-.129.248-.195.00706-.0057.01554-.0093.02453-.0106.00898-.0012.01813 0 .02647.0036 2.619 1.196 5.454 1.196 8.041 0 .0086-.0037.0181-.0051.0275-.0038.0093.0012.0181.0049.0255.0108.08.066.164.132.248.195.0068.005.0123.0116.0159.0192.0036.0076.0053.016.0049.0244-.0003.0084-.0028.0166-.0072.0238-.0043.0072-.0104.0133-.0176.0176-.399.2326-.8168.4313-1.249.594-.0069.0025-.0132.0065-.0183.0117-.0052.0051-.0092.0114-.0117.0183-.0023.0067-.0032.0138-.0027.0208.0005.0071.0024.0139.0057.0202.24.465.515.909.817 1.329.0061.0087.0148.0153.0249.0187.0101.0034.021.0035.0311.0003 1.4388-.441 2.7919-1.1241 4.001-2.02.0061-.0042.0111-.0097.0147-.0161.0037-.0064.0058-.0135.0063-.0209.334-3.451-.559-6.449-2.366-9.106-.0018-.00439-.0045-.00834-.008-.01162-.0034-.00327-.0075-.00578-.012-.00738Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/></svg>',
+          name: "Our Discord",
+          link: "https://astro.build/chat"
+        }
+      ];
+      const windowComponent = createWindowWithTransition(
         `<style>
 				#buttons-container {
 					display: flex;
@@ -38,31 +84,296 @@ var astro_default = {
 				#main-container {
 					display: flex;
 					flex-direction: column;
-					justify-content: space-between;
 					height: 100%;
+					gap: 24px;
 				}
 
 				p {
 					margin-top: 0;
 				}
+
+				header {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+				}
+
+				header section {
+					display: flex;
+					gap: 0.8em;
+				}
+
+				h2 {
+					color: white;
+					margin: 0;
+					font-size: 18px;
+				}
+
+				a {
+					color: rgba(224, 204, 250, 1);
+				}
+
+				a:hover {
+					color: #f4ecfd;
+				}
+
+				#integration-list-wrapper {
+					position: relative;
+					--offset: 24px;
+					overflow-x: auto;
+					overflow-y: hidden;
+					margin-left: calc(var(--offset) * -1);
+					margin-right: calc(var(--offset) * -1);
+					padding-left: var(--offset);
+					padding-right: var(--offset);
+					padding-bottom: 1em;
+					height: 210px;
+				}
+
+				/* Pseudo-elements to fade cards as they scroll out of viewport */
+				#integration-list-wrapper::before,
+				#integration-list-wrapper::after {
+					content: '';
+					height: 192px;
+					display: block;
+					position: fixed;
+					width: var(--offset);
+					top: 106px;
+					background: red;
+				}
+
+				#integration-list-wrapper::before {
+					left: -1px;
+					border-left: 1px solid rgba(52, 56, 65, 1);
+					background: linear-gradient(to right, rgba(19, 21, 26, 1), rgba(19, 21, 26, 0));
+				}
+
+				#integration-list-wrapper::after {
+					right: -1px;
+					border-right: 1px solid rgba(52, 56, 65, 1);
+					background: linear-gradient(to left, rgba(19, 21, 26, 1), rgba(19, 21, 26, 0));
+				}
+
+				#integration-list-wrapper::-webkit-scrollbar {
+					width: 5px;
+					height: 8px;
+					background-color: rgba(255, 255, 255, 0.08); /* or add it to the track */
+					border-radius: 4px;
+				}
+
+				/* This is wild but gives us a gap on either side of the container */
+				#integration-list-wrapper::-webkit-scrollbar-button:start:decrement,
+				#integration-list-wrapper::-webkit-scrollbar-button:end:increment {
+					display: block;
+					width: 24px;
+					background-color: #13151A;
+				}
+
+				/* Removes arrows on both sides */
+				#integration-list-wrapper::-webkit-scrollbar-button:horizontal:start:increment,
+				#integration-list-wrapper::-webkit-scrollbar-button:horizontal:end:decrement {
+					display: none;
+				}
+
+				#integration-list-wrapper::-webkit-scrollbar-track-piece {
+					border-radius: 4px;
+				}
+
+				#integration-list-wrapper::-webkit-scrollbar-thumb {
+					background-color: rgba(255, 255, 255, 0.3);
+					border-radius: 4px;
+				}
+
+				#integration-list {
+					margin-top: 1em;
+					display: flex;
+					gap: 16px;
+					padding-bottom: 1em;
+				}
+
+				#integration-list::after {
+					content: " ";
+					display: inline-block;
+					white-space: pre;
+					width: 1px;
+					height: 1px;
+				}
+
+				#integration-list astro-dev-overlay-card, .integration-skeleton {
+					min-width: 240px;
+					height: 160px;
+				}
+
+				.integration-skeleton {
+					animation: pulse 2s calc(var(--i, 0) * 250ms) cubic-bezier(0.4, 0, 0.6, 1) infinite;
+					background-color: rgba(35, 38, 45, 1);
+					border-radius: 8px;
+				}
+
+				@keyframes pulse {
+					0%, 100% {
+						opacity: 1;
+					}
+					50% {
+						opacity: .5;
+					}
+				}
+
+				#integration-list astro-dev-overlay-card .integration-image {
+					width: 40px;
+					height: 40px;
+					background-color: var(--integration-image-background, white);
+					border-radius: 9999px;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					margin-bottom: 8px;
+				}
+
+				#integration-list astro-dev-overlay-card img {
+					width: 24px;
+					height: 24px;
+				}
+
+				#integration-list astro-dev-overlay-card astro-dev-overlay-icon {
+					width: 24px;
+					height: 24px;
+					color: #fff;
+				}
+
+				#links {
+					margin: auto 0;
+					display: flex;
+					justify-content: center;
+					gap: 24px;
+				}
+
+				#links a {
+					text-decoration: none;
+					align-items: center;
+					display: flex;
+					flex-direction: column;
+					gap: 0.7em;
+					flex: 1;
+					white-space: nowrap;
+					font-weight: 600;
+					color: white;
+				}
+
+				#links a:hover {
+					color: rgba(145, 152, 173, 1);
+				}
+
+				#links astro-dev-overlay-icon {
+					width: 1.5em;
+					height: 1.5em;
+					display: block;
+				}
+
+				#integration-list astro-dev-overlay-card svg {
+					width: 24px;
+					height: 24px;
+					vertical-align: bottom;
+				}
+
+				#integration-list astro-dev-overlay-card h3 {
+					margin: 0;
+					margin-bottom: 8px;
+    			color: white;
+					white-space: nowrap;
+				}
+
+				#integration-list astro-dev-overlay-card p {
+					font-size: 14px;
+				}
 			</style>
 
+			<header>
+				<section>
+				${astroLogo}
+				<astro-dev-overlay-badge badge-style="gray" size="large">Version ${window.__astro_dev_overlay__.version}</astro-dev-overlay-badge>
+				</section>
+				<astro-dev-overlay-button id="copy-debug-button">Get debug info <astro-dev-overlay-icon icon="copy" /></astro-dev-overlay-button>
+			</header>
+			<hr />
+
 			<div id="main-container">
 				<div>
-					<p>Welcome to Astro!</p>
-					<div id="buttons-container">
-						<astro-dev-overlay-card icon="bug" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card>
-						<astro-dev-overlay-card icon="file-search" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card>
-					</div>
+					<header><h2>Top integrations</h2><a href="https://astro.build/integrations/">View all</a></header>
+						<div id="integration-list-wrapper">
+							<section id="integration-list">
+								<div class="integration-skeleton" style="--i:0;"></div>
+								<div class="integration-skeleton" style="--i:1;"></div>
+								<div class="integration-skeleton" style="--i:2;"></div>
+								<div class="integration-skeleton" style="--i:3;"></div>
+								<div class="integration-skeleton" style="--i:4;"></div>
+							</section>
+						</div>
 				</div>
-				<footer>
-					<a href="https://astro.build/chat" target="_blank">Join us on Discord</a>
-					<a href="https://astro.build" target="_blank">Visit the Astro website</a>
-				</footer>
+				<section id="links">
+				${links.map(
+          (link) => `<a href="${link.link}"><astro-dev-overlay-icon ${isDefinedIcon(link.icon) ? `icon="${link.icon}">` : `>${link.icon}`}</astro-dev-overlay-icon>${link.name}</a>`
+        ).join("")}
+				</section>
 			</div>
 		`
       );
-      canvas.append(window);
+      const copyDebugButton = windowComponent.querySelector("#copy-debug-button");
+      copyDebugButton?.addEventListener("click", () => {
+        navigator.clipboard.writeText(
+          "```\n" + window.__astro_dev_overlay__.debugInfo + "\n```"
+        );
+        copyDebugButton.textContent = "Copied to clipboard";
+      });
+      canvas.append(windowComponent);
+    }
+    function resetDebugButton() {
+      const copyDebugButton = canvas.querySelector("#copy-debug-button");
+      if (!copyDebugButton)
+        return;
+      copyDebugButton.innerHTML = 'Get debug info <astro-dev-overlay-icon icon="copy" />';
+    }
+    function refreshIntegrationList() {
+      const integrationList = canvas.querySelector("#integration-list");
+      if (!integrationList)
+        return;
+      integrationList.innerHTML = "";
+      const fragment = document.createDocumentFragment();
+      for (const integration of integrationData.data) {
+        const integrationComponent = document.createElement("astro-dev-overlay-card");
+        integrationComponent.link = integration.homepageUrl;
+        const integrationContainer = document.createElement("div");
+        integrationContainer.className = "integration-container";
+        const integrationImage = document.createElement("div");
+        integrationImage.className = "integration-image";
+        if (integration.image) {
+          const img = document.createElement("img");
+          img.src = integration.image;
+          img.alt = integration.title;
+          integrationImage.append(img);
+        } else {
+          const icon = document.createElement("astro-dev-overlay-icon");
+          icon.icon = iconForIntegration(integration);
+          integrationImage.append(icon);
+          integrationImage.style.setProperty(
+            "--integration-image-background",
+            colorForIntegration()
+          );
+        }
+        integrationContainer.append(integrationImage);
+        let integrationTitle = document.createElement("h3");
+        integrationTitle.textContent = integration.title;
+        if (integration.official || integration.categories.includes("official")) {
+          integrationTitle.innerHTML += ' <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 20"><rect width="19" height="19" x="1.16602" y=".5" fill="url(#paint0_linear_917_1096)" fill-opacity=".33" rx="9.5"/><path fill="#fff" d="M15.139 6.80657c-.062-.06248-.1357-.11208-.217-.14592-.0812-.03385-.1683-.05127-.2563-.05127-.0881 0-.1752.01742-.2564.05127-.0813.03384-.155.08344-.217.14592L9.22566 11.7799 7.13899 9.68657c-.06435-.06216-.14031-.11103-.22355-.14383-.08323-.03281-.17211-.04889-.26157-.04735-.08945.00155-.17773.0207-.25978.05637a.68120694.68120694 0 0 0-.21843.15148c-.06216.06435-.11104.14031-.14384.22355-.0328.08321-.04889.17211-.04734.26161.00154.0894.0207.1777.05636.2597.03566.0821.08714.1563.15148.2185l2.56 2.56c.06198.0625.13571.1121.21695.1459s.16838.0513.25639.0513c.088 0 .17514-.0175.25638-.0513s.15497-.0834.21695-.1459L15.139 7.78657c.0677-.06242.1217-.13819.1586-.22253.0369-.08433.056-.1754.056-.26747 0-.09206-.0191-.18313-.056-.26747-.0369-.08433-.0909-.1601-.1586-.22253Z"/><rect width="19" height="19" x="1.16602" y=".5" stroke="url(#paint1_linear_917_1096)" rx="9.5"/><defs><linearGradient id="paint0_linear_917_1096" x1="20.666" x2="-3.47548" y1=".00000136" y2="10.1345" gradientUnits="userSpaceOnUse"><stop stop-color="#4AF2C8"/><stop offset="1" stop-color="#2F4CB3"/></linearGradient><linearGradient id="paint1_linear_917_1096" x1="20.666" x2="-3.47548" y1=".00000136" y2="10.1345" gradientUnits="userSpaceOnUse"><stop stop-color="#4AF2C8"/><stop offset="1" stop-color="#2F4CB3"/></linearGradient></defs></svg>';
+        }
+        integrationContainer.append(integrationTitle);
+        const integrationDescription = document.createElement("p");
+        integrationDescription.textContent = integration.description.length > 90 ? integration.description.slice(0, 90) + "\u2026" : integration.description;
+        integrationContainer.append(integrationDescription);
+        integrationComponent.append(integrationContainer);
+        fragment.append(integrationComponent);
+      }
+      integrationList.append(fragment);
     }
   },
   async beforeTogglingOff(canvas) {

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

@@ -33,9 +33,11 @@ var settings_default = {
     document.addEventListener("astro:after-swap", createSettingsWindow);
     function createSettingsWindow() {
       const window = createWindowWithTransition(
-        "Settings",
-        "gear",
         `<style>
+					header {
+						display: flex;
+					}
+
 					h2, h3 {
 						margin-top: 0;
 					}
@@ -57,7 +59,29 @@ var settings_default = {
 						font-size: 15px;
 						line-height: 1.5rem;
 					}
+
+					h1 {
+						display: flex;
+						align-items: center;
+						gap: 8px;
+						font-weight: 600;
+						color: #fff;
+						margin: 0;
+						font-size: 22px;
+					}
+
+					astro-dev-overlay-icon {
+						width: 1em;
+   					height: 1em;
+    				display: block;
+					}
 				</style>
+				<header>
+					<h1><astro-dev-overlay-icon icon="gear"></astro-dev-overlay-icon> Settings</h1>
+				</header>
+
+				<hr />
+
 				<h2>General</h2>
 				`,
         settingsRows.flatMap((setting) => [

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

@@ -0,0 +1,3 @@
+import type { Integration } from '../astro.js';
+export declare function iconForIntegration(integration: Integration): string;
+export declare function colorForIntegration(): string;

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

@@ -0,0 +1,37 @@
+function randomFromArray(list) {
+  return list[Math.floor(Math.random() * list.length)];
+}
+const categoryIcons = new Map(
+  Object.entries({
+    frameworks: ["puzzle", "grid"],
+    adapters: ["puzzle", "grid", "compress"],
+    "css+ui": ["compress", "grid", "image", "resizeImage", "puzzle"],
+    "performance+seo": ["approveUser", "checkCircle", "compress", "robot", "searchFile", "sitemap"],
+    analytics: ["checkCircle", "compress", "searchFile"],
+    accessibility: ["approveUser", "checkCircle"],
+    other: ["checkCircle", "grid", "puzzle", "sitemap"]
+  })
+);
+function iconForIntegration(integration) {
+  const icons = integration.categories.filter((category) => categoryIcons.has(category)).map((category) => categoryIcons.get(category)).flat();
+  return randomFromArray(icons);
+}
+const iconColors = [
+  "#BC52EE",
+  "#6D6AF0",
+  "#52EEBD",
+  "#52B7EE",
+  "#52EE55",
+  "#B7EE52",
+  "#EEBD52",
+  "#EE5552",
+  "#EE52B7",
+  "#858B98"
+];
+function colorForIntegration() {
+  return randomFromArray(iconColors);
+}
+export {
+  colorForIntegration,
+  iconForIntegration
+};

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

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

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

@@ -1,36 +1,32 @@
-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;
-			}
+function createWindowWithTransition(windowContent, addedNodes = []) {
+  const windowElement = document.createElement("astro-dev-overlay-window");
+  windowElement.innerHTML = `
+				<style>
+					:host {
+						opacity: 0;
+						transition: opacity 0.15s ease-in-out;
+					}
 
-			:host([data-active]) {
-				opacity: 1;
-			}
+					: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;
-				}
+					@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%);
-				}
-			}
+						:host([data-active]) astro-dev-overlay-window {
+							transform: translateY(0) translate(-50%, -50%);
+						}
+					}
+				</style>
+				${windowContent}
 		`;
-  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;
+  windowElement.append(...addedNodes);
+  return windowElement;
 }
 async function waitForTransition(canvas) {
   canvas.host?.removeAttribute("data-active");

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

@@ -0,0 +1,9 @@
+type BadgeSize = 'small' | 'large';
+type BadgeStyle = 'purple' | 'gray' | 'red' | 'green' | 'yellow';
+export declare class DevOverlayBadge extends HTMLElement {
+    size: BadgeSize;
+    badgeStyle: BadgeStyle;
+    shadowRoot: ShadowRoot;
+    constructor();
+}
+export {};

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

@@ -0,0 +1,67 @@
+class DevOverlayBadge extends HTMLElement {
+  size = "small";
+  badgeStyle = "purple";
+  shadowRoot;
+  constructor() {
+    super();
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+    if (this.hasAttribute("size"))
+      this.size = this.getAttribute("size");
+    if (this.hasAttribute("badge-style"))
+      this.badgeStyle = this.getAttribute("badge-style");
+    const classes = [`badge--${this.size}`, `badge--${this.badgeStyle}`];
+    this.shadowRoot.innerHTML = `
+			<style>
+				.badge {
+					box-sizing: border-box;
+					border-radius: 4px;
+					border: 1px solid transparent;
+					padding: 8px;
+					font-size: 12px;
+					color: #fff;
+					height: 20px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+				}
+
+				.badge--large {
+					height: 24px;
+				}
+
+				.badge--gray {
+					color: rgba(233, 234, 238, 1);
+					border-color: rgba(145, 152, 173, 1);
+				}
+
+				.badge--purple {
+					color: rgba(224, 204, 250, 1);
+					border-color: rgba(113, 24, 226, 1);
+				}
+
+				.badge--red {
+					color: rgba(249, 196, 215, 1);
+					border-color: rgba(179, 62, 102, 1);
+				}
+
+				.badge--green {
+					color: rgba(213, 249, 196, 1);
+					border-color: rgba(61, 125, 31, 1);
+				}
+
+				.badge--yellow {
+					color: rgba(249, 233, 196, 1);
+					border-color: rgba(181, 138, 45, 1);
+				}
+			</style>
+
+			<div class="badge ${classes.join(" ")}">
+				<slot></slot>
+			</div>
+			`;
+  }
+}
+export {
+  DevOverlayBadge
+};

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

@@ -0,0 +1,9 @@
+type ButtonSize = 'small' | 'medium' | 'large';
+type ButtonStyle = 'ghost' | 'outline' | 'purple' | 'gray' | 'red';
+export declare class DevOverlayButton extends HTMLElement {
+    size: ButtonSize;
+    buttonStyle: ButtonStyle;
+    shadowRoot: ShadowRoot;
+    constructor();
+}
+export {};