bee-ladybug 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bee-ladybug",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Universal telemetry and visual inspection overlay for Canvas, DOM, Python and AI flows.",
   "type": "module",
   "main": "src/index.js",

package/src/adapters/CSSAdapter.js

@@ -219,9 +219,9 @@ export class CSSAdapter {
             const findings = [];
             pushNegativeMargins(el, findings);
             pushInvisible(el, findings);
-            pushBlockers(el, findings);
+            pushBlockers(el, findings, true);
             pushImage(el, findings);
-            pushStacking(el, findings);
+            pushStacking(el, findings, true);
             pushImportant(el, built.rules, findings);
             for (let j = 0; j < findings.length; j++) {
                 rows.push({ el, selector: cssPath(el), ...findings[j] });
@@ -755,7 +755,7 @@ function pushInvisible(el, findings) {
     }
 }
 
-function pushBlockers(el, findings) {
+function pushBlockers(el, findings, skipNoise = false) {
     if (!el.getBoundingClientRect || typeof document.elementFromPoint !== 'function') return;
     const rect = el.getBoundingClientRect();
     const x = rect.left + rect.width / 2;
@@ -768,6 +768,7 @@ function pushBlockers(el, findings) {
     const hit = document.elementFromPoint(x, y);
     if (!hit || isBeeChrome(hit) || hit === el || el.contains(hit)) return;
     if (pseudo && (hit === document.documentElement || hit === document.body)) return;
+    if (skipNoise && isReportNoise(hit)) return;
     findings.push(issue(`click blocked by ${cssPath(hit)}`, ISSUE_RANK.blocker, 40));
 }
 
@@ -950,7 +951,7 @@ function willChangeHint(value) {
     return hit.join(', ');
 }
 
-function pushStacking(el, findings) {
+function pushStacking(el, findings, skipNoise = false) {
     if (!el || typeof getComputedStyle !== 'function' || !el.parentElement) return;
     const own = getComputedStyle(el);
     const ownZ = own.zIndex || own.getPropertyValue?.('z-index') || 'auto';
@@ -958,6 +959,7 @@ function pushStacking(el, findings) {
     let node = el.parentElement;
     while (node && node.nodeType === 1) {
         if (isBeeChrome(node)) return;
+        if (skipNoise && isReportNoise(node)) return;
         const found = stackingReasons(getComputedStyle(node));
         const ancestor = cssPath(node);
         if (found.bugs.length) {

package/src/adapters/CanvasAdapter.js

@@ -70,6 +70,8 @@ export class CanvasAdapter {
         this.#fps = 0;
         this.#fpsSamples = [];
         this.#wasColliding = new Set();
+        this.#names = new Map();
+        this.#overlayStyle = null;
         this.#onResize = () => this.#syncOverlay();
         this.#onTick = () => {
             this.#rafId = requestAnimationFrame(this.#onTick);
@@ -93,6 +95,10 @@ export class CanvasAdapter {
     #fps;
     #fpsSamples;
     #wasColliding;
+    /** id -> display name, refreshed on every pump. */
+    #names;
+    /** Last style values written to the overlay. */
+    #overlayStyle;
     #onResize;
     #onTick;
 
@@ -126,6 +132,12 @@ export class CanvasAdapter {
             source: this.source,
             message: `CanvasAdapter attached (${this.entities.length} entities).`
         });
+        if (this.overlayEnabled && !this.canvas) {
+            this.core?.sendData('warn', {
+                source: this.source,
+                message: 'no canvas: hitboxes are not drawn. Pass { canvas } or call setCanvas().'
+            });
+        }
         this.core?.sendData('state', {
             source: this.source,
             key: 'adapter',
@@ -146,6 +158,11 @@ export class CanvasAdapter {
             window.removeEventListener('resize', this.#onResize);
             window.removeEventListener('scroll', this.#onResize, true);
         }
+        this.#wasColliding = new Set();
+        this.#names = new Map();
+        this.#lastPump = 0;
+        this.#fps = 0;
+        this.#fpsSamples = [];
         return this;
     }
 
@@ -163,10 +180,26 @@ export class CanvasAdapter {
         return this;
     }
 
+    /**
+     * Stop the internal loop and make a manual `pump()` valid again.
+     * Mirror of `startAutoPump()`.
+     */
+    stopAutoPump() {
+        this.autoPump = false;
+        this.#stopAutoPumpLoop();
+        return this;
+    }
+
     /** @param {HTMLCanvasElement | null} canvas */
     setCanvas(canvas) {
         this.canvas = canvas;
-        this.#syncOverlay();
+        if (!this.#attached) return this;
+        if (!canvas) {
+            this.#unmountOverlay();
+        } else if (this.overlayEnabled) {
+            if (this.#overlay) this.#syncOverlay();
+            else this.#mountOverlay();
+        }
         return this;
     }
 
@@ -190,7 +223,7 @@ export class CanvasAdapter {
             severity: box.hit ? 'warn' : 'ok',
             selector: box.name,
             rule: 'hitbox',
-            value: `${box.x},${box.y} ${box.w}x${box.h}${box.hit ? ' colliding' : ''}`,
+            value: `${round1(box.x)},${round1(box.y)} ${round1(box.w)}x${round1(box.h)}${box.hit ? ' colliding' : ''}`,
             source: this.source
         }));
         const fps = this.#fpsItem();
@@ -327,7 +360,9 @@ export class CanvasAdapter {
 
     #emitCollisionEdges(boxes) {
         const now = new Set();
+        const names = new Map();
         for (let i = 0; i < boxes.length; i++) {
+            names.set(boxes[i].id, boxes[i].name);
             if (!boxes[i].hit) continue;
             now.add(boxes[i].id);
             if (!this.#wasColliding.has(boxes[i].id)) {
@@ -339,13 +374,14 @@ export class CanvasAdapter {
         }
         for (const id of this.#wasColliding) {
             if (now.has(id)) continue;
-            const name = idFromKey(id);
+            const name = names.get(id) ?? this.#names.get(id) ?? id;
             this.core.sendData('log', {
                 source: this.source,
                 message: `${name} left collision`
             });
         }
         this.#wasColliding = now;
+        this.#names = names;
     }
 
     #drawHitboxes(boxes, hostCtx) {
@@ -386,7 +422,7 @@ export class CanvasAdapter {
     }
 
     #mountOverlay() {
-        if (typeof document === 'undefined' || this.#overlay) return;
+        if (typeof document === 'undefined' || this.#overlay || !this.canvas) return;
         const canvas = document.createElement('canvas');
         canvas.setAttribute('data-bee-ladybug-canvas', '');
         canvas.style.pointerEvents = 'none';
@@ -395,12 +431,14 @@ export class CanvasAdapter {
         canvas.style.margin = '0';
         document.body.appendChild(canvas);
         this.#overlay = canvas;
+        this.#overlayStyle = null;
         this.#syncOverlay();
     }
 
     #unmountOverlay() {
         if (this.#overlay?.parentNode) this.#overlay.parentNode.removeChild(this.#overlay);
         this.#overlay = null;
+        this.#overlayStyle = null;
     }
 
     #syncOverlay() {
@@ -408,14 +446,22 @@ export class CanvasAdapter {
         const overlay = this.#overlay;
         if (!host || !overlay) return;
         const rect = host.getBoundingClientRect();
-        overlay.width = host.width;
-        overlay.height = host.height;
-        overlay.style.left = `${rect.left}px`;
-        overlay.style.top = `${rect.top}px`;
-        overlay.style.width = `${rect.width}px`;
-        overlay.style.height = `${rect.height}px`;
+        // Assigning width/height clears and reallocates the bitmap: only when they change.
+        if (overlay.width !== host.width) overlay.width = host.width;
+        if (overlay.height !== host.height) overlay.height = host.height;
         const hidden = !this.#reporting || (this.core && this.core.visible === false);
-        overlay.style.display = hidden ? 'none' : 'block';
+        const next = {
+            left: `${rect.left}px`,
+            top: `${rect.top}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+            display: hidden ? 'none' : 'block'
+        };
+        const prev = this.#overlayStyle;
+        for (const key of Object.keys(next)) {
+            if (!prev || prev[key] !== next[key]) overlay.style[key] = next[key];
+        }
+        this.#overlayStyle = next;
     }
 
     #enable() {
@@ -487,11 +533,6 @@ function isPrimary(entity) {
     return key === 'player' || key === 'hero' || entity.primary === true;
 }
 
-function idFromKey(id) {
-    const parts = String(id).split(':');
-    return parts[parts.length - 1] || id;
-}
-
 function round1(value) {
     return Math.round(Number(value) * 10) / 10;
 }

package/src/core/BeeLadybugCore.js

@@ -10,7 +10,7 @@ import { UIOverlay } from './UIOverlay.js';
 import { buildAssistantSnapshot, normalizeAssistant } from './AiAssistant.js';
 import { exportReport as writeReport } from './ReportExporter.js';
 
-export const BEE_LADYBUG_VERSION = '0.6.0';
+export const BEE_LADYBUG_VERSION = '0.6.2';
 
 export const CORE_DEFAULTS = Object.freeze({
     toggleKey: 'F2',

package/src/core/ReportExporter.js

@@ -74,11 +74,19 @@ export function isReportNoise(node) {
     while (current && typeof current === 'object') {
         if (seen.has(current)) break;
         seen.add(current);
-        if (current.id === 'wpadminbar') return true;
-        if (hasAbClass(current.className)) return true;
+        if (current.id === 'wpadminbar' || elementId(current) === 'wpadminbar') return true;
+        if (hasAbClass(classText(current))) return true;
         if (current.tagName === 'BEE-LADYBUG-OVERLAY') return true;
         if (hasBeeAttribute(current)) return true;
-        current = current.parentElement || null;
+        if (typeof current.closest === 'function') {
+            try {
+                const bar = current.closest('#wpadminbar');
+                if (bar) return true;
+            } catch {
+                /* closest is optional */
+            }
+        }
+        current = current.parentElement || (current.parentNode && current.parentNode.nodeType === 1 ? current.parentNode : null);
     }
 
     const style = readStyle(el);
@@ -103,7 +111,7 @@ function buildReport(core) {
     const series = readSeries(core);
     const latest = readLatest(core);
     const adapters = readAdapters(core);
-    const summary = countFindings(adapters);
+    const summary = countFindings(adapters, logs);
 
     return {
         version: state.version,
@@ -219,7 +227,7 @@ function readAdapters(core) {
         const list = result && Array.isArray(result.items) ? result.items : [];
         sections.push({
             name,
-            items: list.filter((row) => row && typeof row === 'object').map((row) => makeItem(row, name))
+            items: groupIdentical(list.filter((row) => row && typeof row === 'object').map((row) => makeItem(row, name)))
         });
     }
     return sections;
@@ -240,14 +248,45 @@ function makeItem(row, fallbackSource = '') {
     };
 }
 
+/**
+ * Identical selector + rule + value collapse to one row. The count is part of the value.
+ * @param {ReportItem[]} items
+ * @returns {ReportItem[]}
+ */
+function groupIdentical(items) {
+    const order = [];
+    const map = new Map();
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const key = `${item.selector}\0${item.rule}\0${item.value}`;
+        const prev = map.get(key);
+        if (!prev) {
+            const row = { ...item, count: 1 };
+            map.set(key, row);
+            order.push(row);
+            continue;
+        }
+        prev.count += 1;
+    }
+    return order.map((row) => ({
+        severity: row.severity,
+        selector: row.selector,
+        rule: row.rule,
+        value: row.count > 1 ? `${row.value} ×${row.count}` : row.value,
+        source: row.source
+    }));
+}
+
 /**
  * @param {Array<{ items: ReportItem[] }>} adapters
+ * @param {Array<{ type: string, level: string | null }>} logs
  */
-function countFindings(adapters) {
+function countFindings(adapters, logs) {
     const summary = { error: 0, warn: 0, ok: 0 };
     for (const section of adapters) {
         for (const item of section.items) summary[item.severity] += 1;
     }
+    for (let i = 0; i < logs.length; i++) summary[logSeverity(logs[i])] += 1;
     return summary;
 }
 
@@ -267,7 +306,7 @@ function normalizeFormat(format) {
 function normalizeSeverity(value) {
     const text = String(value || '').toLowerCase();
     if (text === 'error') return 'error';
-    if (text === 'warn' || text === 'warning') return 'warn';
+    if (text === 'warn' || text === 'warning' || text === 'warm') return 'warn';
     return 'ok';
 }
 
@@ -332,8 +371,10 @@ function csvCell(value) {
  * @returns {ReportSeverity}
  */
 function logSeverity(log) {
-    if (log.level === 'error' || log.type === 'error') return 'error';
-    if (log.level === 'warn' || log.type === 'warn') return 'warn';
+    const level = String(log.level || '').toLowerCase();
+    if (level === 'warn' || level === 'warning' || level === 'warm') return 'warn';
+    if (level === 'error' || log.type === 'error') return 'error';
+    if (log.type === 'warn') return 'warn';
     return 'ok';
 }
 
@@ -490,11 +531,22 @@ function saveIfMounted(core, report, ext, mime, text) {
     if (typeof document === 'undefined' || !document.body) return;
     if (typeof URL === 'undefined' || typeof URL.createObjectURL !== 'function' || typeof Blob === 'undefined') return;
 
-    const blob = new Blob([text], { type: `${mime};charset=utf-8` });
+    const filename = `report-${report.fileStamp}.${ext}`;
+    const type = `${mime};charset=utf-8`;
+    let blob;
+    try {
+        blob = typeof File === 'function'
+            ? new File([text], filename, { type })
+            : new Blob([text], { type });
+    } catch {
+        if (typeof Blob !== 'function') return;
+        blob = new Blob([text], { type });
+    }
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
     link.href = url;
-    link.download = `report-${report.fileStamp}.${ext}`;
+    link.download = filename;
+    link.setAttribute('download', filename);
     link.rel = 'noopener';
     document.body.appendChild(link);
     link.click();
@@ -580,6 +632,34 @@ function escapeHtml(value) {
         .replace(/"/g, '&quot;');
 }
 
+function classText(node) {
+    if (!node || typeof node !== 'object') return '';
+    const parts = [];
+    if (typeof node.className === 'string' && node.className) parts.push(node.className);
+    else if (node.className && typeof node.className === 'object' && 'baseVal' in node.className && node.className.baseVal) {
+        parts.push(String(node.className.baseVal));
+    }
+    if (node.classList && typeof node.classList.length === 'number') {
+        try {
+            parts.push([...node.classList].join(' '));
+        } catch {
+            /* classList may not be iterable */
+        }
+    }
+    if (typeof node.getAttribute === 'function') {
+        const attr = node.getAttribute('class');
+        if (attr) parts.push(attr);
+    }
+    return parts.join(' ');
+}
+
+function elementId(node) {
+    if (!node || typeof node !== 'object') return '';
+    if (typeof node.id === 'string' && node.id) return node.id;
+    if (typeof node.getAttribute === 'function') return node.getAttribute('id') || '';
+    return '';
+}
+
 /**
  * @param {unknown} className
  */

package/src/index.d.ts

@@ -334,6 +334,7 @@ export class CanvasAdapter {
     attach(): this;
     detach(): this;
     startAutoPump(): this;
+    stopAutoPump(): this;
     setCanvas(canvas: HTMLCanvasElement | null): this;
     setEntities(entities: CanvasEntity[]): this;
     pump(ctx?: CanvasRenderingContext2D): this;