@lexingtonthemes/astro-image-inspector 0.1.0 → 0.2.1

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAExD,YAAY,EAAE,qBAAqB,EAAE,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,OAAO,GAAE,qBAA0B,GAClC,gBAAgB,CAmBlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAExD,YAAY,EAAE,qBAAqB,EAAE,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,OAAO,GAAE,qBAA0B,GAClC,gBAAgB,CAyBlB"}

package/dist/index.js

@@ -4,15 +4,20 @@ export default function imageInspector(options = {}) {
     return {
         name: "@lexingtonthemes/astro-image-inspector",
         hooks: {
-            "astro:config:setup"({ addDevToolbarApp, command }) {
+            "astro:config:setup"({ addDevToolbarApp, command, logger }) {
                 if (!enabled || command !== "dev")
                     return;
-                addDevToolbarApp({
-                    id: "astro-image-inspector",
-                    name: appName,
-                    icon: "image",
-                    entrypoint: new URL("./toolbar-app.js", import.meta.url),
-                });
+                try {
+                    addDevToolbarApp({
+                        id: "astro-image-inspector",
+                        name: appName,
+                        icon: "image",
+                        entrypoint: new URL("./toolbar-app.js", import.meta.url),
+                    });
+                }
+                catch (err) {
+                    logger.warn(`[astro-image-inspector] Could not add dev toolbar app: ${err instanceof Error ? err.message : String(err)}. Toolbar will show without Image Inspector.`);
+                }
             },
         },
     };

package/dist/toolbar-app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-app.d.ts","sourceRoot":"","sources":["../src/toolbar-app.ts"],"names":[],"mappings":";AAiKA,wBAuBG"}
+{"version":3,"file":"toolbar-app.d.ts","sourceRoot":"","sources":["../src/toolbar-app.ts"],"names":[],"mappings":";AAkSA,wBAA2B"}

package/dist/toolbar-app.js

@@ -1,12 +1,32 @@
 import { defineToolbarApp } from "astro/toolbar";
 const OVERLAY_ID = "astro-image-inspector-overlay";
 const PANEL_ID = "astro-image-inspector-panel";
+function gcd(a, b) {
+    a = Math.round(Math.abs(a));
+    b = Math.round(Math.abs(b));
+    if (b === 0)
+        return a;
+    return gcd(b, a % b);
+}
+function aspectRatioLabel(w, h) {
+    if (h <= 0)
+        return "—";
+    const d = gcd(w, h);
+    if (d === 0)
+        return "—";
+    return `${w / d}:${h / d}`;
+}
+function formatFromSrc(src) {
+    const match = src.match(/\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i);
+    return match ? match[1].toLowerCase() : "—";
+}
 function getImageInfo(img) {
     const rect = img.getBoundingClientRect();
     const nw = img.naturalWidth || 0;
     const nh = img.naturalHeight || 0;
     const rw = Math.round(rect.width);
     const rh = Math.round(rect.height);
+    const src = img.currentSrc || img.src || "";
     const warnings = [];
     if (nw > 0 && nh > 0) {
         if (rw > nw || rh > nh)
@@ -17,8 +37,10 @@ function getImageInfo(img) {
     if (!img.hasAttribute("width") && !img.hasAttribute("height")) {
         warnings.push("No width/height");
     }
+    const srcset = img.srcset || "";
+    const srcsetCount = srcset ? srcset.split(",").length : 0;
     return {
-        src: img.currentSrc || img.src || "",
+        src,
         naturalWidth: nw,
         naturalHeight: nh,
         renderedWidth: rw,
@@ -26,6 +48,15 @@ function getImageInfo(img) {
         loading: img.loading || "auto",
         decoding: img.decoding || "auto",
         warnings,
+        aspectIntrinsic: aspectRatioLabel(nw, nh),
+        aspectRendered: aspectRatioLabel(rw, rh),
+        format: formatFromSrc(src),
+        alt: img.alt !== undefined && img.alt !== "" ? img.alt : "(missing)",
+        fetchPriority: img.fetchPriority || "auto",
+        sizes: img.sizes?.trim() || "(none)",
+        srcsetCount,
+        attrWidth: img.getAttribute("width") ?? "—",
+        attrHeight: img.getAttribute("height") ?? "—",
     };
 }
 function ensureOverlay() {
@@ -80,41 +111,87 @@ function hidePanel() {
     if (el)
         el.style.display = "none";
 }
-function showOverlay(rect) {
+function showOverlay(rect, hasWarnings) {
     const el = ensureOverlay();
     el.style.display = "block";
     el.style.top = `${rect.top + window.scrollY}px`;
     el.style.left = `${rect.left + window.scrollX}px`;
     el.style.width = `${rect.width}px`;
     el.style.height = `${rect.height}px`;
-    el.style.borderColor = "rgba(139, 92, 246, 0.8)";
+    el.style.borderColor = hasWarnings
+        ? "rgba(251, 191, 36, 0.9)"
+        : "rgba(34, 197, 94, 0.8)";
 }
 function showPanel(info) {
     const el = ensurePanel();
     el.style.display = "block";
-    const srcShort = info.src.length > 50 ? info.src.slice(0, 47) + "…" : info.src;
+    const srcShort = info.src.length > 52 ? info.src.slice(0, 49) + "…" : info.src;
     const warnText = info.warnings.length > 0
         ? `<span style="color: #fbbf24;">${info.warnings.join(", ")}</span>`
         : "none";
+    const altShort = info.alt.length > 40 ? info.alt.slice(0, 37) + "…" : info.alt;
+    const sizesShort = info.sizes.length > 36 ? info.sizes.slice(0, 33) + "…" : info.sizes;
     el.innerHTML = `
-    <div><strong>src</strong> ${srcShort}</div>
-    <div><strong>natural</strong> ${info.naturalWidth}×${info.naturalHeight}</div>
-    <div><strong>rendered</strong> ${info.renderedWidth}×${info.renderedHeight}</div>
-    <div><strong>loading</strong> ${info.loading}</div>
-    <div><strong>warnings</strong> ${warnText}</div>
+    <div style="display: grid; gap: 6px;">
+      <div><strong>src</strong><br/><span style="word-break: break-all;">${srcShort}</span></div>
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+        <div><strong>natural</strong><br/>${info.naturalWidth}×${info.naturalHeight}</div>
+        <div><strong>rendered</strong><br/>${info.renderedWidth}×${info.renderedHeight}</div>
+      </div>
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+        <div><strong>aspect (int)</strong><br/>${info.aspectIntrinsic}</div>
+        <div><strong>aspect (out)</strong><br/>${info.aspectRendered}</div>
+      </div>
+      <div><strong>format</strong> ${info.format} · <strong>loading</strong> ${info.loading} · <strong>decoding</strong> ${info.decoding}</div>
+      ${info.fetchPriority !== "auto" ? `<div><strong>fetchpriority</strong> ${info.fetchPriority}</div>` : ""}
+      <div><strong>alt</strong><br/><span style="color: ${info.alt === "(missing)" ? "#f87171" : "inherit"}">${altShort}</span></div>
+      ${info.srcsetCount > 0 ? `<div><strong>srcset</strong> ${info.srcsetCount} source(s)</div>` : ""}
+      ${info.sizes !== "(none)" ? `<div><strong>sizes</strong><br/>${sizesShort}</div>` : ""}
+      <div><strong>width/height attrs</strong> ${info.attrWidth} × ${info.attrHeight}</div>
+      <div><strong>warnings</strong> ${warnText}</div>
+      <div style="display: flex; gap: 8px; margin-top: 6px;">
+        <button type="button" data-action="copy" style="padding: 4px 8px; font-size: 11px; cursor: pointer; border-radius: 4px; border: 1px solid #64748b; background: #334155; color: #e2e8f0;">Copy src</button>
+        <button type="button" data-action="open" style="padding: 4px 8px; font-size: 11px; cursor: pointer; border-radius: 4px; border: 1px solid #64748b; background: #334155; color: #e2e8f0;">Open in tab</button>
+      </div>
+    </div>
   `;
+    el.querySelectorAll("[data-action]").forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+            e.preventDefault();
+            if (btn.dataset.action === "copy") {
+                void navigator.clipboard.writeText(info.src);
+                btn.textContent = "Copied!";
+                setTimeout(() => (btn.textContent = "Copy src"), 1200);
+            }
+            else {
+                window.open(info.src, "_blank", "noopener");
+            }
+        });
+    });
 }
+const INSTRUCTION_TEXT = "Hover an image to inspect it.";
 function enableInspector(windowContent) {
-    windowContent.textContent = "Hover an image to inspect it.";
+    windowContent.textContent = INSTRUCTION_TEXT;
+    windowContent.style.display = "";
+    const showInstruction = () => {
+        windowContent.textContent = INSTRUCTION_TEXT;
+        windowContent.style.display = "";
+    };
+    const hideInstruction = () => {
+        windowContent.textContent = "";
+        windowContent.style.display = "none";
+    };
     const onMouseOver = (event) => {
         const target = event.target;
         if (!(target instanceof HTMLImageElement)) {
             hideOverlay();
             hidePanel();
+            showInstruction();
             return;
         }
+        hideInstruction();
         const info = getImageInfo(target);
-        showOverlay(target.getBoundingClientRect());
+        showOverlay(target.getBoundingClientRect(), info.warnings.length > 0);
         showPanel(info);
     };
     const onMouseOut = (event) => {
@@ -123,6 +200,7 @@ function enableInspector(windowContent) {
             return;
         hideOverlay();
         hidePanel();
+        showInstruction();
     };
     document.addEventListener("mouseover", onMouseOver, true);
     document.addEventListener("mouseout", onMouseOut, true);
@@ -133,25 +211,37 @@ function enableInspector(windowContent) {
         hidePanel();
     };
 }
-export default defineToolbarApp({
-    init(canvas, app) {
-        const windowEl = document.createElement("astro-dev-toolbar-window");
-        const content = document.createElement("div");
-        content.style.cssText = "padding: 12px; font-size: 14px;";
-        content.textContent = "Toggle on and hover an image to inspect it.";
-        windowEl.appendChild(content);
-        canvas.appendChild(windowEl);
-        let cleanup = null;
-        app.onToggled(({ state }) => {
-            if (cleanup) {
-                cleanup();
-                cleanup = null;
-            }
-            if (!state) {
+function createApp() {
+    return defineToolbarApp({
+        init(canvas, app) {
+            try {
+                const windowEl = document.createElement("astro-dev-toolbar-window");
+                const content = document.createElement("div");
+                content.style.cssText = "padding: 12px; font-size: 14px;";
                 content.textContent = "Toggle on and hover an image to inspect it.";
-                return;
+                windowEl.appendChild(content);
+                canvas.appendChild(windowEl);
+                let cleanup = null;
+                app.onToggled(({ state }) => {
+                    if (cleanup) {
+                        cleanup();
+                        cleanup = null;
+                    }
+                    if (!state) {
+                        content.textContent =
+                            "Toggle on and hover an image to inspect it.";
+                        return;
+                    }
+                    cleanup = enableInspector(content);
+                });
             }
-            cleanup = enableInspector(content);
-        });
-    },
-});
+            catch (err) {
+                const msg = document.createElement("div");
+                msg.style.cssText = "padding: 12px; font-size: 12px; color: #f87171;";
+                msg.textContent = `Image Inspector failed to load: ${err instanceof Error ? err.message : String(err)}`;
+                canvas.appendChild(msg);
+            }
+        },
+    });
+}
+export default createApp();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexingtonthemes/astro-image-inspector",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Astro Dev Toolbar app to inspect images on hover: actual size, render size, and warnings",
   "type": "module",
   "exports": {