Refactor routing in App component to enhance navigation and improve error handling by integrating dynamic routes and updating the NotFound route.

node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/highlight.d.ts

@@ -0,0 +1,8 @@
+import type { DevToolbarHighlight } from '../../ui-library/highlight.js';
+import type { Icon } from '../../ui-library/icons.js';
+export declare function createHighlight(rect: DOMRect, icon?: Icon, additionalAttributes?: Record<string, string>): DevToolbarHighlight;
+export declare function getElementsPositionInDocument(el: Element): {
+    isFixed: boolean;
+};
+export declare function positionHighlight(highlight: DevToolbarHighlight, rect: DOMRect): void;
+export declare function attachTooltipToHighlight(highlight: DevToolbarHighlight, tooltip: HTMLElement, originalElement: Element): void;

node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/highlight.js

@@ -0,0 +1,69 @@
+function createHighlight(rect, icon, additionalAttributes) {
+  const highlight = document.createElement("astro-dev-toolbar-highlight");
+  if (icon) highlight.icon = icon;
+  if (additionalAttributes) {
+    for (const [key, value] of Object.entries(additionalAttributes)) {
+      highlight.setAttribute(key, value);
+    }
+  }
+  highlight.tabIndex = 0;
+  if (rect.width === 0 || rect.height === 0) {
+    highlight.style.display = "none";
+  } else {
+    positionHighlight(highlight, rect);
+  }
+  return highlight;
+}
+function getElementsPositionInDocument(el) {
+  let isFixed = false;
+  let current = el;
+  while (current instanceof Element) {
+    let style = getComputedStyle(current);
+    if (style.position === "fixed") {
+      isFixed = true;
+    }
+    current = current.parentNode;
+  }
+  return {
+    isFixed
+  };
+}
+function positionHighlight(highlight, rect) {
+  highlight.style.display = "block";
+  const scrollY = highlight.style.position === "fixed" ? 0 : window.scrollY;
+  highlight.style.top = `${Math.max(rect.top + 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`;
+      }
+      if (dialogRect.right > document.documentElement.clientWidth) {
+        tooltip.style.right = "0px";
+      } else if (dialogRect.left < 0) {
+        tooltip.style.left = "0px";
+      }
+    });
+  });
+  ["mouseout", "blur"].forEach((event) => {
+    highlight.addEventListener(event, () => {
+      tooltip.dataset.show = "false";
+    });
+  });
+}
+export {
+  attachTooltipToHighlight,
+  createHighlight,
+  getElementsPositionInDocument,
+  positionHighlight
+};

node_modules/astro/dist/runtime/client/dev-toolbar/apps/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;

node_modules/astro/dist/runtime/client/dev-toolbar/apps/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
+};

node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/window.d.ts

@@ -0,0 +1,3 @@
+export declare function createWindowElement(content: string, placement?: "bottom-left" | "bottom-center" | "bottom-right"): import("../../ui-library/window.js").DevToolbarWindow;
+export declare function closeOnOutsideClick(eventTarget: EventTarget, additionalCheck?: (target: Element) => boolean): void;
+export declare function synchronizePlacementOnUpdate(eventTarget: EventTarget, canvas: ShadowRoot): void;

node_modules/astro/dist/runtime/client/dev-toolbar/apps/utils/window.js

@@ -0,0 +1,48 @@
+import { settings } from "../../settings.js";
+function createWindowElement(content, placement = settings.config.placement) {
+  const windowElement = document.createElement("astro-dev-toolbar-window");
+  windowElement.innerHTML = content;
+  windowElement.placement = placement;
+  return windowElement;
+}
+function closeOnOutsideClick(eventTarget, additionalCheck) {
+  function onPageClick(event) {
+    const target = event.target;
+    if (!target) return;
+    if (!target.closest) return;
+    if (target.closest("astro-dev-toolbar")) return;
+    if (additionalCheck && additionalCheck(target)) return;
+    eventTarget.dispatchEvent(
+      new CustomEvent("toggle-app", {
+        detail: {
+          state: false
+        }
+      })
+    );
+  }
+  eventTarget.addEventListener("app-toggled", (event) => {
+    if (event.detail.state === true) {
+      document.addEventListener("click", onPageClick, true);
+    } else {
+      document.removeEventListener("click", onPageClick, true);
+    }
+  });
+}
+function synchronizePlacementOnUpdate(eventTarget, canvas) {
+  eventTarget.addEventListener("placement-updated", (evt) => {
+    if (!(evt instanceof CustomEvent)) {
+      return;
+    }
+    const windowElement = canvas.querySelector("astro-dev-toolbar-window");
+    if (!windowElement) {
+      return;
+    }
+    const event = evt;
+    windowElement.placement = event.detail.placement;
+  });
+}
+export {
+  closeOnOutsideClick,
+  createWindowElement,
+  synchronizePlacementOnUpdate
+};