@abbox/inspector 0.4.20 → 0.4.22

package/dist/runtime/overlay.d.ts

@@ -12,10 +12,24 @@ export declare function hideHighlight(highlight: HTMLDivElement): void;
 export declare function hideSelectedHighlight(selectedHighlight: HTMLDivElement): void;
 export declare function rectForElement(el: Element): ElementRect;
 export declare function renderChangeMarkers(layer: HTMLDivElement, markers: ChangeMarker[], resolveElement: (refId: string) => Element | null, onSelect?: (changeId: string) => void): void;
+type PlacedBadge = {
+    node: HTMLElement;
+    left: number;
+    top: number;
+    focused: boolean;
+};
+/**
+ * Keeps labelled badges readable: each stays inside the page, and one that
+ * would cover another moves up a row, keeping its left edge at its own element
+ * so it still reads as belonging there. The focused badge is placed first, so
+ * it stays exactly on its element.
+ */
+export declare function arrangeBadges(badges: PlacedBadge[], viewportWidth?: number): void;
 /**
  * A badge sits just above its element and moves with it. With no room above
  * (the element starts at the top of the screen) it tucks inside the element's
  * top edge instead, and scrolls away with the element rather than sticking.
  */
 export declare function badgeTop(elementTop: number): number;
+export {};
 //# sourceMappingURL=overlay.d.ts.map

package/dist/runtime/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/runtime/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMhE,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,WAAW,EAAE,cAAc,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,cAAc,CAgD5D;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,WAAW,GAChB,IAAI,CAQN;AAED,wBAAgB,yBAAyB,CACvC,iBAAiB,EAAE,cAAc,EACjC,IAAI,EAAE,WAAW,GAChB,IAAI,CAQN;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAE7D;AAED,wBAAgB,qBAAqB,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI,CAE7E;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,OAAO,GAAG,WAAW,CAQvD;AAOD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,YAAY,EAAE,EACvB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,EACjD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GACpC,IAAI,CAyFN;AAID;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAGnD"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/runtime/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMhE,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,WAAW,EAAE,cAAc,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,cAAc,CAgD5D;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,WAAW,GAChB,IAAI,CAQN;AAED,wBAAgB,yBAAyB,CACvC,iBAAiB,EAAE,cAAc,EACjC,IAAI,EAAE,WAAW,GAChB,IAAI,CAQN;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAE7D;AAED,wBAAgB,qBAAqB,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI,CAE7E;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,OAAO,GAAG,WAAW,CAQvD;AAOD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,YAAY,EAAE,EACvB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,EACjD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GACpC,IAAI,CAqGN;AAED,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAKF;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,aAAa,CAAC,EAAE,MAAM,QAkC1E;AAID;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAGnD"}

package/dist/runtime/overlay.js

@@ -92,6 +92,7 @@ export function renderChangeMarkers(layer, markers, resolveElement, onSelect) {
             markerNodes.delete(id);
         }
     }
+    const badges = [];
     for (const marker of markers) {
         const el = resolveElement(marker.elementRefId);
         const rect = el?.getBoundingClientRect();
@@ -147,11 +148,12 @@ export function renderChangeMarkers(layer, markers, resolveElement, onSelect) {
             event.stopPropagation();
             onSelect?.(marker.elementRefId);
         };
+        // A labelled pill is far wider than a dot, so it needs much less movement.
         dot.style.animation = marker.pulse
-            ? "abbox-inspector-pulse 1.4s ease-in-out infinite"
+            ? `abbox-inspector-pulse${marker.badge ? "-soft" : ""} 1.4s ease-in-out infinite`
             : "";
         dot.style.boxShadow = marker.pulse
-            ? "0 0 0 4px rgba(255,255,255,0.35)"
+            ? `0 0 0 ${marker.badge ? 2 : 4}px rgba(255,255,255,0.35)`
             : "0 0 0 1px rgba(0,0,0,0.2)";
         if (marker.pulse)
             ensurePulseStyle(layer.ownerDocument);
@@ -165,6 +167,48 @@ export function renderChangeMarkers(layer, markers, resolveElement, onSelect) {
         dot.style.display = onScreen ? "" : "none";
         dot.style.left = `${rect.x - 6}px`;
         dot.style.top = `${marker.badge ? badgeTop(rect.top) : rect.top - 6}px`;
+        dot.style.zIndex = marker.pulse ? "1" : "";
+        if (marker.badge && onScreen) {
+            badges.push({
+                node: dot,
+                left: rect.x - 6,
+                top: badgeTop(rect.top),
+                focused: Boolean(marker.pulse),
+            });
+        }
+    }
+    arrangeBadges(badges, layer.ownerDocument.defaultView?.innerWidth);
+}
+const BADGE_GAP = 2;
+const EDGE_MARGIN = 4;
+/**
+ * Keeps labelled badges readable: each stays inside the page, and one that
+ * would cover another moves up a row, keeping its left edge at its own element
+ * so it still reads as belonging there. The focused badge is placed first, so
+ * it stays exactly on its element.
+ */
+export function arrangeBadges(badges, viewportWidth) {
+    const taken = [];
+    const ordered = [...badges].sort((a, b) => Number(b.focused) - Number(a.focused) || a.top - b.top || a.left - b.left);
+    for (const badge of ordered) {
+        const width = badge.node.offsetWidth;
+        const height = badge.node.offsetHeight;
+        const maxLeft = (viewportWidth ?? Number.POSITIVE_INFINITY) - width - EDGE_MARGIN;
+        const left = Math.max(EDGE_MARGIN, Math.min(badge.left, maxLeft));
+        const collides = (top) => taken.some((other) => left < other.right &&
+            left + width > other.left &&
+            top < other.bottom &&
+            top + height > other.top);
+        const step = height + BADGE_GAP;
+        let top = badge.top;
+        while (collides(top) && top - step >= 0)
+            top -= step;
+        // Out of room above: go below the row instead.
+        while (collides(top))
+            top += step;
+        taken.push({ left, top, right: left + width, bottom: top + height });
+        badge.node.style.left = `${left}px`;
+        badge.node.style.top = `${top}px`;
     }
 }
 const BADGE_HEIGHT = 18;
@@ -208,6 +252,10 @@ function ensurePulseStyle(doc) {
     style.textContent = `@keyframes abbox-inspector-pulse {
     0%, 100% { transform: scale(1); opacity: 1; }
     50% { transform: scale(1.35); opacity: 0.75; }
+  }
+  @keyframes abbox-inspector-pulse-soft {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.04); opacity: 0.9; }
   }`;
     doc.head.append(style);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abbox/inspector",
-  "version": "0.4.20",
+  "version": "0.4.22",
   "publishConfig": {
     "access": "public"
   },