@lexingtonthemes/astro-image-inspector 0.2.2 → 0.2.3

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

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

package/dist/toolbar-app.js

@@ -122,7 +122,8 @@ function showOverlay(rect, hasWarnings) {
         ? "rgba(251, 191, 36, 0.9)"
         : "rgba(34, 197, 94, 0.8)";
 }
-function showPanel(info) {
+function showPanel(info, options = {}) {
+    const { pinned = false, onClose } = options;
     const el = ensurePanel();
     el.style.display = "block";
     const srcShort = info.src.length > 52 ? info.src.slice(0, 49) + "…" : info.src;
@@ -131,8 +132,12 @@ function showPanel(info) {
         : "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;
+    const closeButton = pinned
+        ? `<button type="button" data-action="close" style="padding: 4px 8px; font-size: 11px; cursor: pointer; border-radius: 4px; border: 1px solid #64748b; background: #334155; color: #e2e8f0;">Close</button>`
+        : "";
     el.innerHTML = `
     <div style="display: grid; gap: 6px;">
+      ${pinned ? `<div style="font-size: 11px; color: #94a3b8; margin-bottom: 2px;">Pinned — click another image or Close</div>` : ""}
       <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>
@@ -149,7 +154,8 @@ function showPanel(info) {
       ${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;">
+      <div style="display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap;">
+        ${closeButton}
         <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>
@@ -158,21 +164,28 @@ function showPanel(info) {
     el.querySelectorAll("[data-action]").forEach((btn) => {
         btn.addEventListener("click", (e) => {
             e.preventDefault();
-            if (btn.dataset.action === "copy") {
+            e.stopPropagation();
+            const action = btn.dataset.action;
+            if (action === "close" && onClose) {
+                onClose();
+                return;
+            }
+            if (action === "copy") {
                 void navigator.clipboard.writeText(info.src);
                 btn.textContent = "Copied!";
                 setTimeout(() => (btn.textContent = "Copy src"), 1200);
             }
-            else {
+            else if (action === "open") {
                 window.open(info.src, "_blank", "noopener");
             }
         });
     });
 }
-const INSTRUCTION_TEXT = "Hover an image to inspect it.";
+const INSTRUCTION_TEXT = "Hover an image to inspect it. Click to pin the info card.";
 function enableInspector(windowContent) {
     windowContent.textContent = INSTRUCTION_TEXT;
     windowContent.style.display = "";
+    let pinnedImage = null;
     const showInstruction = () => {
         windowContent.textContent = INSTRUCTION_TEXT;
         windowContent.style.display = "";
@@ -181,32 +194,64 @@ function enableInspector(windowContent) {
         windowContent.textContent = "";
         windowContent.style.display = "none";
     };
+    const unpin = () => {
+        pinnedImage = null;
+        hideOverlay();
+        hidePanel();
+        showInstruction();
+    };
     const onMouseOver = (event) => {
         const target = event.target;
         if (!(target instanceof HTMLImageElement)) {
-            hideOverlay();
-            hidePanel();
-            showInstruction();
+            if (!pinnedImage) {
+                hideOverlay();
+                hidePanel();
+                showInstruction();
+            }
+            else {
+                hideOverlay();
+            }
             return;
         }
         hideInstruction();
         const info = getImageInfo(target);
         showOverlay(target.getBoundingClientRect(), info.warnings.length > 0);
-        showPanel(info);
+        if (!pinnedImage) {
+            showPanel(info);
+        }
     };
     const onMouseOut = (event) => {
         const related = event.relatedTarget;
+        if (pinnedImage) {
+            if (related && document.body.contains(related))
+                return;
+            hideOverlay();
+            return;
+        }
         if (related && document.body.contains(related))
             return;
         hideOverlay();
         hidePanel();
         showInstruction();
     };
+    const onClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLImageElement))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        pinnedImage = target;
+        const info = getImageInfo(target);
+        showOverlay(target.getBoundingClientRect(), info.warnings.length > 0);
+        showPanel(info, { pinned: true, onClose: unpin });
+    };
     document.addEventListener("mouseover", onMouseOver, true);
     document.addEventListener("mouseout", onMouseOut, true);
+    document.addEventListener("click", onClick, true);
     return () => {
         document.removeEventListener("mouseover", onMouseOver, true);
         document.removeEventListener("mouseout", onMouseOut, true);
+        document.removeEventListener("click", onClick, true);
         hideOverlay();
         hidePanel();
     };

package/package.json

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