@altano/astro-opengraph 0.1.0-alpha.3 → 0.1.0

package/dist/toolbar/index.js

@@ -1,11 +1,10 @@
-// src/toolbar/index.tsx
-import { createRoot } from "react-dom/client";
+import { render } from "preact";
 import { defineToolbarApp } from "astro/toolbar";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 
-// src/toolbar/styles.tsx
-var styles = (
-  /* css */
-  `
+//#region src/toolbar/styles.tsx
+const styles = `
   :host astro-dev-toolbar-window {
     max-height: calc(100vh - 80px);
     overflow-y: auto;
@@ -34,439 +33,408 @@ var styles = (
   .image img {
     transition: max-width 0.1s;
   }
-`
-);
+`;
 
-// src/toolbar/components/ToolbarApp.tsx
-import { useState as useState4 } from "react";
-
-// src/toolbar/components/Summary.tsx
-import { jsx } from "react/jsx-runtime";
+//#endregion
+//#region src/toolbar/components/Summary.tsx
 function Summary({ children }) {
-  return /* @__PURE__ */ jsx(
-    "summary",
-    {
-      style: {
-        cursor: "pointer",
-        fontWeight: 700,
-        color: "white"
-      },
-      children
-    }
-  );
+	return /* @__PURE__ */ jsx("summary", {
+		style: {
+			cursor: "pointer",
+			fontWeight: 700,
+			color: "white"
+		},
+		children
+	});
 }
 
-// src/toolbar/components/ExternalLinkicon.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function ExternalLinkicon({
-  width = 27,
-  height = 27,
-  fill = "#020202"
-}) {
-  return /* @__PURE__ */ jsx2(
-    "span",
-    {
-      style: {
-        display: "inline-block",
-        width,
-        height
-      },
-      children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120", children: [
-        /* @__PURE__ */ jsx2("path", { d: "M120.09 16.696H60.256V.096L120.09.09z", fill }),
-        /* @__PURE__ */ jsx2(
-          "path",
-          {
-            d: "M57.99 48.64l42.573-42.574 13.475 13.475-42.574 42.58z",
-            fill
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "path",
-          {
-            d: "M119.98.107l.02 59.83-16.59.013-.02-59.846zM3 23.5h17v87H3zm83.49 52.56h17V113h-17z",
-            fill
-          }
-        ),
-        /* @__PURE__ */ jsx2("path", { d: "M3 16.692h40.655v17H3zM3 96h100.49v17H3z", fill })
-      ] })
-    }
-  );
+//#endregion
+//#region src/toolbar/components/ExternalLinkicon.tsx
+function ExternalLinkicon({ width = 27, height = 27, fill = "#020202" }) {
+	return /* @__PURE__ */ jsx("span", {
+		style: {
+			display: "inline-block",
+			width,
+			height
+		},
+		children: /* @__PURE__ */ jsxs("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 120 120",
+			children: [
+				/* @__PURE__ */ jsx("path", {
+					d: "M120.09 16.696H60.256V.096L120.09.09z",
+					fill
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M57.99 48.64l42.573-42.574 13.475 13.475-42.574 42.58z",
+					fill
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M119.98.107l.02 59.83-16.59.013-.02-59.846zM3 23.5h17v87H3zm83.49 52.56h17V113h-17z",
+					fill
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: "M3 16.692h40.655v17H3zM3 96h100.49v17H3z",
+					fill
+				})
+			]
+		})
+	});
 }
 
-// src/toolbar/components/LinkOrText.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function LinkOrText({
-  maybeLinkText
-}) {
-  let parsedMaybeLink = null;
-  try {
-    if (maybeLinkText != null) {
-      const url = new URL(maybeLinkText);
-      parsedMaybeLink = /* @__PURE__ */ jsxs2("a", { href: url.toString(), target: "_blank", children: [
-        maybeLinkText,
-        " ",
-        /* @__PURE__ */ jsx3(ExternalLinkicon, { width: 10, height: 10, fill: "white" })
-      ] });
-    }
-  } catch (_) {
-    parsedMaybeLink = maybeLinkText;
-  }
-  return parsedMaybeLink;
+//#endregion
+//#region src/toolbar/components/LinkOrText.tsx
+function LinkOrText({ maybeLinkText }) {
+	let parsedMaybeLink = null;
+	try {
+		if (maybeLinkText != null) {
+			const url = new URL(maybeLinkText);
+			parsedMaybeLink = /* @__PURE__ */ jsxs("a", {
+				href: url.toString(),
+				target: "_blank",
+				children: [
+					maybeLinkText,
+					" ",
+					/* @__PURE__ */ jsx(ExternalLinkicon, {
+						width: 10,
+						height: 10,
+						fill: "white"
+					})
+				]
+			});
+		}
+	} catch (_) {
+		parsedMaybeLink = maybeLinkText;
+	}
+	return parsedMaybeLink;
 }
 
-// src/toolbar/hooks/useMetaTagInfo.tsx
+//#endregion
+//#region src/toolbar/hooks/useMetaTagInfo.tsx
+const useHeadObserver = () => {
+	const [_generation, setGeneration] = useState(0);
+	const forceRerender = () => setGeneration((old) => ++old);
+	const headRef = useRef(document.querySelector("head"));
+	useEffect(() => {
+		if (headRef.current == null) return;
+		const observer = new MutationObserver(forceRerender);
+		observer.observe(headRef.current, {
+			attributes: true,
+			characterData: true,
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, []);
+	return headRef;
+};
 function useMetaTagInfo() {
-  return Array.from(document.querySelectorAll("meta[property^='og:']")).map(
-    (tag) => [
-      tag.getAttribute("content"),
-      tag.getAttribute("property")
-    ]
-  );
+	const headRef = useHeadObserver();
+	const opengraphMetaTags = headRef?.current?.querySelectorAll("meta[property^='og:']") ?? [];
+	return Array.from(opengraphMetaTags).map((tag) => [tag.getAttribute("content"), tag.getAttribute("property")]);
 }
 
-// src/toolbar/components/MetaTags.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+//#endregion
+//#region src/toolbar/components/MetaTags.tsx
 function MetaTags() {
-  const tags = useMetaTagInfo();
-  return /* @__PURE__ */ jsx4(
-    "dl",
-    {
-      "data-testid": "astro-opengraph-toolbar",
-      style: {
-        margin: 0,
-        display: "grid",
-        gridTemplateColumns: "max-content 1fr",
-        gap: 7,
-        columnGap: 13
-      },
-      children: tags.map((tag) => /* @__PURE__ */ jsx4(MetaTagContent, { tag }, tag[1]))
-    }
-  );
+	const tags = useMetaTagInfo();
+	return /* @__PURE__ */ jsx("dl", {
+		"data-testid": "astro-opengraph-toolbar",
+		style: {
+			margin: 0,
+			display: "grid",
+			gridTemplateColumns: "max-content 1fr",
+			gap: 7,
+			columnGap: 13
+		},
+		children: tags.map((tag) => /* @__PURE__ */ jsx(MetaTagContent, { tag }, tag[1]))
+	});
 }
 function MetaTagContent({ tag }) {
-  const [content, property] = tag;
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
-      "dt",
-      {
-        style: {
-          color: "white",
-          textAlign: "right",
-          fontWeight: 500
-        },
-        children: property
-      }
-    ),
-    /* @__PURE__ */ jsx4("dd", { style: { margin: 0 }, children: /* @__PURE__ */ jsx4(LinkOrText, { maybeLinkText: content }) })
-  ] });
+	const [content, property] = tag;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+		style: {
+			color: "white",
+			textAlign: "right",
+			fontWeight: 500
+		},
+		children: property
+	}), /* @__PURE__ */ jsx("dd", {
+		style: { margin: 0 },
+		children: /* @__PURE__ */ jsx(LinkOrText, { maybeLinkText: content })
+	})] });
 }
 
-// src/toolbar/hooks/useHoverState.tsx
-import { useRef, useEffect } from "react";
+//#endregion
+//#region src/toolbar/hooks/useHoverState.tsx
 function useHoverState(setHoverState) {
-  const ref = useRef(null);
-  useEffect(() => {
-    const controller = new AbortController();
-    const { signal } = controller;
-    ref.current?.addEventListener("mouseenter", () => setHoverState(true), {
-      signal
-    });
-    ref.current?.addEventListener("mouseleave", () => setHoverState(false), {
-      signal
-    });
-    return () => controller.abort();
-  }, [setHoverState]);
-  return ref;
+	const ref = useRef(null);
+	useEffect(() => {
+		const controller = new AbortController();
+		const { signal } = controller;
+		ref.current?.addEventListener("mouseenter", () => setHoverState(true), { signal });
+		ref.current?.addEventListener("mouseleave", () => setHoverState(false), { signal });
+		return () => controller.abort();
+	}, [setHoverState]);
+	return ref;
 }
 
-// src/toolbar/hooks/useImageURL.tsx
-import { useState } from "react";
+//#endregion
+//#region src/toolbar/hooks/useImageURL.tsx
 function useImageURL() {
-  const imageUrl = useImageURLIfAvailable();
-  if (imageUrl == null) {
-    throw new Error(
-      `Shouldn't be rendering this component without an image URL`
-    );
-  }
-  return imageUrl;
+	const imageUrl = useImageURLIfAvailable();
+	if (imageUrl == null) throw new Error(`Shouldn't be rendering this component without an image URL`);
+	return imageUrl;
 }
 function useImageURLIfAvailable() {
-  const [imageUrlRef] = useState(() => {
-    const meta = document.querySelector('meta[property="og:image"]');
-    return meta?.getAttribute("content") ?? null;
-  });
-  return imageUrlRef;
+	const [imageUrlRef] = useState(() => {
+		const meta = document.querySelector("meta[property=\"og:image\"]");
+		return meta?.getAttribute("content") ?? null;
+	});
+	return imageUrlRef;
 }
 
-// src/toolbar/components/Image.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function Image({ imageSize }) {
-  const imageUrl = useImageURL();
-  return /* @__PURE__ */ jsx5("div", { className: "image", children: /* @__PURE__ */ jsx5("a", { href: imageUrl, target: "_blank", title: "Open image in new tab", children: /* @__PURE__ */ jsx5(
-    "img",
-    {
-      alt: "Open Graph",
-      src: imageUrl,
-      style: {
-        maxHeight: "100%",
-        maxWidth: `${imageSize}%`
-      }
-    }
-  ) }) });
+//#endregion
+//#region src/toolbar/components/Image.tsx
+function Image({ imageSize, handleLoadError }) {
+	const imageUrl = useImageURL();
+	return /* @__PURE__ */ jsx("div", {
+		className: "image",
+		children: /* @__PURE__ */ jsx("a", {
+			href: imageUrl,
+			target: "_blank",
+			title: "Open image in new tab",
+			children: /* @__PURE__ */ jsx("img", {
+				onError: handleLoadError,
+				alt: "Open Graph",
+				src: imageUrl,
+				style: {
+					maxHeight: "100%",
+					maxWidth: `${imageSize}%`
+				}
+			})
+		})
+	});
 }
 
-// src/toolbar/components/ZoomLabel.tsx
+//#endregion
+//#region src/toolbar/components/ZoomLabel.tsx
 function ZoomLabel({ imageSize }) {
-  const formattedNumber = (imageSize / 100).toLocaleString(void 0, {
-    minimumFractionDigits: 2
-  });
-  return `${formattedNumber}x`;
+	const formattedNumber = (imageSize / 100).toLocaleString(void 0, { minimumFractionDigits: 2 });
+	return `${formattedNumber}x`;
 }
 
-// src/toolbar/components/ZoomButton.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function ZoomButton({
-  value,
-  imageSize,
-  setImageSize
-}) {
-  const isSelected = value === imageSize;
-  return /* @__PURE__ */ jsx6(
-    "astro-dev-toolbar-button",
-    {
-      size: "small",
-      style: { padding: 0, margin: 0 },
-      buttonStyle: isSelected ? "gray" : "ghost",
-      className: "zoom-button",
-      role: "radio",
-      onClick: () => setImageSize(value),
-      children: /* @__PURE__ */ jsx6(ZoomLabel, { imageSize: value })
-    }
-  );
+//#endregion
+//#region src/toolbar/components/ZoomButton.tsx
+function ZoomButton({ value, imageSize, setImageSize }) {
+	const isSelected = value === imageSize;
+	return /* @__PURE__ */ jsx("astro-dev-toolbar-button", {
+		size: "small",
+		style: {
+			padding: 0,
+			margin: 0
+		},
+		buttonStyle: isSelected ? "gray" : "ghost",
+		className: "zoom-button",
+		role: "radio",
+		onClick: () => setImageSize(value),
+		children: /* @__PURE__ */ jsx(ZoomLabel, { imageSize: value })
+	});
 }
 
-// src/toolbar/components/ToolbarSection.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function ToolbarSection({
-  icon,
-  children
-}) {
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      style: {
-        fontSize: 12,
-        display: "flex",
-        alignItems: "center",
-        columnGap: 5
-      },
-      children: [
-        /* @__PURE__ */ jsx7(
-          "div",
-          {
-            style: {
-              display: "inline-block",
-              width: 12,
-              height: 12
-            },
-            children: icon
-          }
-        ),
-        children
-      ]
-    }
-  );
+//#endregion
+//#region src/toolbar/components/ToolbarSection.tsx
+function ToolbarSection({ icon, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			fontSize: 12,
+			display: "flex",
+			alignItems: "center",
+			columnGap: 5
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				display: "inline-block",
+				width: 12,
+				height: 12
+			},
+			children: icon
+		}), children]
+	});
 }
 
-// src/toolbar/components/ImageZoomToolbar.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function ImageZoomToolbar({
-  isHovered,
-  imageSize,
-  setImageSize
-}) {
-  return /* @__PURE__ */ jsx8(ToolbarSection, { icon: /* @__PURE__ */ jsx8("astro-dev-toolbar-icon", { icon: "gear" }), children: !isHovered ? /* @__PURE__ */ jsx8(
-    ZoomButton,
-    {
-      value: imageSize,
-      imageSize,
-      setImageSize
-    }
-  ) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx8(
-      ZoomButton,
-      {
-        value: 25,
-        imageSize,
-        setImageSize
-      }
-    ),
-    /* @__PURE__ */ jsx8(
-      ZoomButton,
-      {
-        value: 50,
-        imageSize,
-        setImageSize
-      }
-    ),
-    /* @__PURE__ */ jsx8(
-      ZoomButton,
-      {
-        value: 75,
-        imageSize,
-        setImageSize
-      }
-    ),
-    /* @__PURE__ */ jsx8(
-      ZoomButton,
-      {
-        value: 100,
-        imageSize,
-        setImageSize
-      }
-    )
-  ] }) });
+//#endregion
+//#region src/toolbar/components/ImageZoomToolbar.tsx
+function ImageZoomToolbar({ isHovered, imageSize, setImageSize }) {
+	return /* @__PURE__ */ jsx(ToolbarSection, {
+		icon: /* @__PURE__ */ jsx("astro-dev-toolbar-icon", { icon: "gear" }),
+		children: !isHovered ? /* @__PURE__ */ jsx(ZoomButton, {
+			value: imageSize,
+			imageSize,
+			setImageSize
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(ZoomButton, {
+				value: 25,
+				imageSize,
+				setImageSize
+			}),
+			/* @__PURE__ */ jsx(ZoomButton, {
+				value: 50,
+				imageSize,
+				setImageSize
+			}),
+			/* @__PURE__ */ jsx(ZoomButton, {
+				value: 75,
+				imageSize,
+				setImageSize
+			}),
+			/* @__PURE__ */ jsx(ZoomButton, {
+				value: 100,
+				imageSize,
+				setImageSize
+			})
+		] })
+	});
 }
 
-// src/toolbar/components/CopyImageUrlButton.tsx
-import React2, {
-  useState as useState2,
-  useRef as useRef2,
-  useEffect as useEffect2
-} from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+//#endregion
+//#region src/toolbar/components/CopyImageUrlButton.tsx
 function CopyImageUrlButton() {
-  const imageUrl = useImageURL();
-  const [wasRecentlyClicked, setWasRecentlyClicked] = useState2(false);
-  const checkTimer = useRef2(null);
-  useEffect2(() => {
-    if (wasRecentlyClicked && checkTimer.current == null) {
-      checkTimer.current = setTimeout(() => {
-        setWasRecentlyClicked(false);
-        checkTimer.current = null;
-      }, 3e3);
-    }
-  }, [wasRecentlyClicked]);
-  const handleClick = React2.useCallback(
-    (evt) => {
-      void navigator.clipboard.writeText(imageUrl);
-      setWasRecentlyClicked(true);
-      evt.stopPropagation();
-      evt.preventDefault();
-    },
-    [imageUrl]
-  );
-  return /* @__PURE__ */ jsx9(ToolbarSection, { icon: /* @__PURE__ */ jsx9("astro-dev-toolbar-icon", { icon: "copy" }), children: /* @__PURE__ */ jsx9("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx9(
-    "astro-dev-toolbar-button",
-    {
-      size: "small",
-      buttonStyle: "gray",
-      onClick: handleClick,
-      children: wasRecentlyClicked ? "Copied to clipboard" : "Copy image URL"
-    }
-  ) }) });
+	const imageUrl = useImageURL();
+	const [wasRecentlyClicked, setWasRecentlyClicked] = useState(false);
+	const checkTimer = useRef(null);
+	useEffect(() => {
+		if (wasRecentlyClicked && checkTimer.current == null) checkTimer.current = setTimeout(() => {
+			setWasRecentlyClicked(false);
+			checkTimer.current = null;
+		}, 3e3);
+	}, [wasRecentlyClicked]);
+	const handleClick = useCallback((evt) => {
+		navigator.clipboard.writeText(imageUrl);
+		setWasRecentlyClicked(true);
+		evt.stopPropagation();
+		evt.preventDefault();
+	}, [imageUrl]);
+	return /* @__PURE__ */ jsx(ToolbarSection, {
+		icon: /* @__PURE__ */ jsx("astro-dev-toolbar-icon", { icon: "copy" }),
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				alignItems: "center"
+			},
+			children: /* @__PURE__ */ jsx("astro-dev-toolbar-button", {
+				size: "small",
+				buttonStyle: "gray",
+				onClick: handleClick,
+				children: wasRecentlyClicked ? "Copied to clipboard" : "Copy image URL"
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/toolbar/components/ImageSection.tsx
+function ImageSection({ isHovered, handleLoadError }) {
+	const [imageSize, setImageSize] = useState(100);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Image, {
+		imageSize,
+		handleLoadError
+	}), /* @__PURE__ */ jsxs("div", {
+		"data-testid": "image-section-toolbar",
+		style: {
+			display: "flex",
+			flexDirection: "row",
+			alignItems: "center",
+			columnGap: 15
+		},
+		children: [/* @__PURE__ */ jsx(CopyImageUrlButton, {}), /* @__PURE__ */ jsx(ImageZoomToolbar, {
+			isHovered,
+			imageSize,
+			setImageSize
+		})]
+	})] });
 }
 
-// src/toolbar/components/ImageSection.tsx
-import { useState as useState3 } from "react";
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-function ImageSection({
-  isHovered
-}) {
-  const [imageSize, setImageSize] = useState3(100);
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx10(Image, { imageSize }),
-    /* @__PURE__ */ jsxs6(
-      "div",
-      {
-        "data-testid": "image-section-toolbar",
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          columnGap: 15
-        },
-        children: [
-          /* @__PURE__ */ jsx10(CopyImageUrlButton, {}),
-          /* @__PURE__ */ jsx10(
-            ImageZoomToolbar,
-            {
-              isHovered,
-              imageSize,
-              setImageSize
-            }
-          )
-        ]
-      }
-    )
-  ] });
+//#endregion
+//#region src/toolbar/components/Error.tsx
+function Error$1({ message, icon }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			gap: 10,
+			alignItems: "center"
+		},
+		children: [
+			/* @__PURE__ */ jsx("astro-dev-toolbar-icon", {
+				style: {
+					width: 24,
+					height: 24
+				},
+				icon
+			}),
+			" ",
+			message
+		]
+	});
 }
 
-// src/toolbar/components/ToolbarApp.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+//#endregion
+//#region src/toolbar/components/getRelativeUrl.tsx
+function getRelativeUrl(absoluteUrl) {
+	const url = new URL(absoluteUrl);
+	return url.pathname;
+}
+
+//#endregion
+//#region src/toolbar/components/ToolbarApp.tsx
 function ToolbarApp() {
-  const [isImageDetailsHovered, setIsImageDetailsHovered] = useState4(false);
-  const imageDetailsRef = useHoverState(
-    setIsImageDetailsHovered
-  );
-  const imageUrl = useImageURLIfAvailable();
-  if (imageUrl == null) {
-    return /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx11(
-        "astro-dev-toolbar-icon",
-        {
-          style: { width: 24, height: 24 },
-          icon: "warning"
-        }
-      ),
-      " ",
-      "No Open Graph image found on this page"
-    ] });
-  }
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsxs7("details", { open: true, className: "image", ref: imageDetailsRef, children: [
-      /* @__PURE__ */ jsx11(Summary, { children: "Image" }),
-      /* @__PURE__ */ jsx11(ImageSection, { isHovered: isImageDetailsHovered })
-    ] }),
-    /* @__PURE__ */ jsxs7("details", { children: [
-      /* @__PURE__ */ jsx11(Summary, { children: "Meta Tags" }),
-      /* @__PURE__ */ jsx11(MetaTags, {})
-    ] })
-  ] });
+	const [isImageDetailsHovered, setIsImageDetailsHovered] = useState(false);
+	const imageDetailsRef = useHoverState(setIsImageDetailsHovered);
+	const imageUrl = useImageURLIfAvailable();
+	const [imageLoadStatus, setImageLoadStatus] = useState("pending");
+	if (imageUrl == null) return /* @__PURE__ */ jsx(Error$1, {
+		icon: "warning",
+		message: "No Open Graph image found on this page"
+	});
+	else if (imageLoadStatus === "error") return /* @__PURE__ */ jsx(Error$1, {
+		icon: "bug",
+		message: `Error loading image at ${getRelativeUrl(imageUrl)}`
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("details", {
+		open: true,
+		className: "image",
+		ref: imageDetailsRef,
+		children: [/* @__PURE__ */ jsx(Summary, { children: "Image" }), /* @__PURE__ */ jsx(ImageSection, {
+			isHovered: isImageDetailsHovered,
+			handleLoadError: () => setImageLoadStatus("error")
+		})]
+	}), /* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsx(Summary, { children: "Meta Tags" }), /* @__PURE__ */ jsx(MetaTags, {})] })] });
 }
 
-// src/toolbar/components/ToolbarAppWindow.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+//#endregion
+//#region src/toolbar/components/ToolbarAppWindow.tsx
 function ToolbarAppWindow() {
-  return /* @__PURE__ */ jsxs8("astro-dev-toolbar-window", { children: [
-    /* @__PURE__ */ jsx12("style", { children: styles }),
-    /* @__PURE__ */ jsx12(ToolbarApp, {})
-  ] });
+	return /* @__PURE__ */ jsxs("astro-dev-toolbar-window", { children: [/* @__PURE__ */ jsx("style", { children: styles }), /* @__PURE__ */ jsx(ToolbarApp, {})] });
 }
 
-// src/toolbar/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var SESSION_KEY_OPEN = "@altano/astro-opengraph/toolbar:is-open";
-var toolbar_default = defineToolbarApp({
-  init(canvas, app) {
-    const root = createRoot(canvas);
-    app.onToggled((event) => {
-      if (event.state) {
-        sessionStorage.setItem(SESSION_KEY_OPEN, "true");
-        root.render(/* @__PURE__ */ jsx13(ToolbarAppWindow, {}));
-      } else {
-        sessionStorage.removeItem(SESSION_KEY_OPEN);
-      }
-    });
-    app.toggleNotification({
-      state: document.querySelector('meta[property="og:image"]') != null,
-      level: "info"
-    });
-    if (sessionStorage.getItem(SESSION_KEY_OPEN) != null) {
-      app.toggleState({ state: true });
-    }
-  }
-});
-export {
-  toolbar_default as default
-};
+//#endregion
+//#region src/toolbar/index.tsx
+const SESSION_KEY_OPEN = "@altano/astro-opengraph/toolbar:is-open";
+const app = defineToolbarApp({ init(canvas, app$1) {
+	app$1.onToggled((event) => {
+		if (event.state) {
+			sessionStorage.setItem(SESSION_KEY_OPEN, "true");
+			render(/* @__PURE__ */ jsx(ToolbarAppWindow, {}), canvas);
+		} else sessionStorage.removeItem(SESSION_KEY_OPEN);
+	});
+	app$1.toggleNotification({
+		state: document.querySelector("meta[property=\"og:image\"]") != null,
+		level: "info"
+	});
+	if (sessionStorage.getItem(SESSION_KEY_OPEN) != null) app$1.toggleState({ state: true });
+} });
+var toolbar_default = app;
+
+//#endregion
+export { toolbar_default as default };
+//# sourceMappingURL=index.js.map