abledom 0.1.1 → 0.3.0

package/dist/index.js

@@ -96,7 +96,7 @@ var ValidationRule = class {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/ui.css
-var ui_default = "#abledom-report {\n  bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  left: 10px;\n  max-height: 80%;\n  max-width: 60%;\n  padding: 4px 8px;\n  position: absolute;\n  z-index: 100500;\n}\n\n#abledom-report :focus-visible {\n  outline: 3px solid red;\n  mix-blend-mode: difference;\n}\n\n#abledom-report.abledom-align-left {\n  left: 10px;\n  right: auto;\n}\n\n#abledom-report.abledom-align-right {\n  left: auto;\n  right: 10px;\n}\n\n#abledom-report.abledom-align-bottom {\n  bottom: 20px;\n  top: auto;\n}\n\n#abledom-report.abledom-align-top {\n  /* flex-direction: column-reverse; */\n  bottom: auto;\n  top: 10px;\n}\n\n.abledom-menu-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-block;\n  margin: 2px auto 2px 0;\n}\n\n#abledom-report.abledom-align-right .abledom-menu-container {\n  margin: 2px 0 2px auto;\n}\n\n.abledom-menu {\n  background-color: rgba(140, 10, 121, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n\n.abledom-menu .notifications-count {\n  margin: 0 8px;\n  display: inline-block;\n}\n\n.abledom-menu .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-menu .align-button {\n  border-right-color: rgba(0, 0, 0, 0.4);\n  border-radius: 0;\n  margin: 0;\n}\n\n.abledom-menu .align-button:active,\n#abledom-report .pressed {\n  background: linear-gradient(\n    180deg,\n    rgba(130, 130, 130, 1) 0%,\n    rgba(180, 180, 180, 1) 100%\n  );\n}\n\n.abledom-menu .align-button-first {\n  border-top-left-radius: 6px;\n  border-bottom-left-radius: 6px;\n  margin-left: 8px;\n}\n.abledom-menu .align-button-last {\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  border-right-color: rgba(255, 255, 255, 0.4);\n}\n\n.abledom-notifications-container {\n  overflow: scroll;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-notifications-container {\n  text-align: right;\n}\n\n.abledom-notification-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-flex;\n  margin: 2px 0;\n}\n\n.abledom-notification {\n  background-color: rgba(164, 2, 2, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n.abledom-notification_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-notification_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-notification .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-notification .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-notification .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n\n.abledom-highlight {\n  background-color: yellow;\n  border: 1px solid red;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: absolute;\n  z-index: 100499;\n}\n";
+var ui_default = "#abledom-report {\n  bottom: 20px;\n  display: flex;\n  flex-direction: column;\n  left: 10px;\n  max-height: 80%;\n  max-width: 60%;\n  padding: 4px 8px;\n  position: fixed;\n  z-index: 100500;\n}\n\n#abledom-report :focus-visible {\n  outline: 3px solid red;\n  mix-blend-mode: difference;\n}\n\n#abledom-report.abledom-align-left {\n  left: 10px;\n  right: auto;\n}\n\n#abledom-report.abledom-align-right {\n  left: auto;\n  right: 10px;\n}\n\n#abledom-report.abledom-align-bottom {\n  bottom: 20px;\n  top: auto;\n}\n\n#abledom-report.abledom-align-top {\n  /* flex-direction: column-reverse; */\n  bottom: auto;\n  top: 10px;\n}\n\n.abledom-menu-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-block;\n  margin: 2px auto 2px 0;\n}\n\n#abledom-report.abledom-align-right .abledom-menu-container {\n  margin: 2px 0 2px auto;\n}\n\n.abledom-menu {\n  background-color: rgba(140, 10, 121, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n\n.abledom-menu .notifications-count {\n  margin: 0 8px;\n  display: inline-block;\n}\n\n.abledom-menu .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-menu .align-button {\n  border-right-color: rgba(0, 0, 0, 0.4);\n  border-radius: 0;\n  margin: 0;\n}\n\n.abledom-menu .align-button:active,\n#abledom-report .pressed {\n  background: linear-gradient(\n    180deg,\n    rgba(130, 130, 130, 1) 0%,\n    rgba(180, 180, 180, 1) 100%\n  );\n}\n\n.abledom-menu .align-button-first {\n  border-top-left-radius: 6px;\n  border-bottom-left-radius: 6px;\n  margin-left: 8px;\n}\n.abledom-menu .align-button-last {\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n  border-right-color: rgba(255, 255, 255, 0.4);\n}\n\n.abledom-notifications-container {\n  overflow: scroll;\n  max-height: calc(100vh - 100px);\n}\n\n#abledom-report.abledom-align-right .abledom-notifications-container {\n  text-align: right;\n}\n\n.abledom-notification-container {\n  backdrop-filter: blur(3px);\n  border-radius: 8px;\n  box-shadow: 0px 0px 4px rgba(127, 127, 127, 0.5);\n  display: inline-flex;\n  margin: 2px 0;\n}\n\n.abledom-notification {\n  background-color: rgba(164, 2, 2, 0.7);\n  border-radius: 8px;\n  color: white;\n  display: inline flex;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  line-height: 26px;\n  padding: 4px;\n}\n.abledom-notification_warning {\n  background-color: rgba(163, 82, 1, 0.7);\n}\n.abledom-notification_info {\n  background-color: rgba(0, 0, 255, 0.7);\n}\n\n.abledom-notification .button {\n  all: unset;\n  color: #000;\n  cursor: pointer;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(200, 200, 200, 1) 100%\n  );\n  border-radius: 6px;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n  box-sizing: border-box;\n  line-height: 0px;\n  margin-right: 4px;\n  max-height: 26px;\n  padding: 2px;\n  text-decoration: none;\n}\n\n.abledom-notification .button:hover {\n  opacity: 0.7;\n}\n\n.abledom-notification .button.close {\n  background: none;\n  border-color: transparent;\n  color: #fff;\n  margin: 0;\n}\n\n.abledom-highlight {\n  background-color: yellow;\n  box-sizing: border-box;\n  display: none;\n  opacity: 0.6;\n  position: fixed;\n  z-index: 100499;\n}\n\n.abledom-highlight-border1 {\n  border-top: 2px solid red;\n  border-bottom: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  top: -2px;\n  width: calc(100% + 20px);\n  height: calc(100% + 4px);\n  margin: 0 -10px;\n}\n\n.abledom-highlight-border2 {\n  border-left: 2px solid red;\n  border-right: 2px solid red;\n  box-sizing: border-box;\n  position: absolute;\n  width: calc(100% + 4px);\n  left: -2px;\n  height: calc(100% + 20px);\n  margin: -10px 0;\n}\n";
 
 // src/ui/domBuilder.ts
 var DOMBuilder = class {
@@ -111,6 +111,7 @@ var DOMBuilder = class {
     const parent = this._stack[0];
     const element = namespace ? (_a = this._doc) == null ? void 0 : _a.createElementNS(namespace, tagName) : (_b = this._doc) == null ? void 0 : _b.createElement(tagName);
     if (parent && element) {
+      element.__abledomui = true;
       if (attributes) {
         for (const [key, value] of Object.entries(attributes)) {
           if (key === "class") {
@@ -138,8 +139,12 @@ var DOMBuilder = class {
     return this;
   }
   text(text) {
-    var _a;
-    (_a = this._stack[0]) == null ? void 0 : _a.appendChild(document.createTextNode(text));
+    var _a, _b;
+    const textNode = (_a = this._doc) == null ? void 0 : _a.createTextNode(text);
+    if (textNode) {
+      textNode.__abledomui = true;
+      (_b = this._stack[0]) == null ? void 0 : _b.appendChild(textNode);
+    }
     return this;
   }
   element(callback) {
@@ -206,8 +211,36 @@ var reveal_default = function buildSVG4(parent) {
   return parent.firstElementChild;
 };
 
+// inline-file:/Users/marata/Documents/Work/abledom/src/ui/bug.svg
+var bug_default = function buildSVG5(parent) {
+  const builder = new DOMBuilder(parent);
+  builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
+  builder.openTag("ellipse", { "cx": "10", "cy": "12", "rx": "4", "ry": "5", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("circle", { "cx": "10", "cy": "5.5", "r": "2", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "6.5", "y1": "10", "x2": "3.5", "y2": "7", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "13.5", "y1": "10", "x2": "16.5", "y2": "7", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "6", "y1": "13", "x2": "3.5", "y2": "13", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "14", "y1": "13", "x2": "16.5", "y2": "13", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "6.5", "y1": "16", "x2": "3.5", "y2": "19", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "13.5", "y1": "16", "x2": "16.5", "y2": "19", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "9", "y1": "3.5", "x2": "7.5", "y2": "2", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "11", "y1": "3.5", "x2": "12.5", "y2": "2", "stroke-width": "1.2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+};
+
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/hideall.svg
-var hideall_default = function buildSVG5(parent) {
+var hideall_default = function buildSVG6(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("path", { "d": "M11.44 17.5a1.67 1.67 0 0 1-2.89 0", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
@@ -221,7 +254,7 @@ var hideall_default = function buildSVG5(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/muteall.svg
-var muteall_default = function buildSVG6(parent) {
+var muteall_default = function buildSVG7(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("path", { "d": "M11.44 17.5a1.67 1.67 0 0 1-2.89 0", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
@@ -237,7 +270,7 @@ var muteall_default = function buildSVG6(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/showall.svg
-var showall_default = function buildSVG7(parent) {
+var showall_default = function buildSVG8(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("path", { "d": "M11.44 17.5a1.67 1.67 0 0 1-2.89 0", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
@@ -249,7 +282,7 @@ var showall_default = function buildSVG7(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopleft.svg
-var aligntopleft_default = function buildSVG8(parent) {
+var aligntopleft_default = function buildSVG9(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("rect", { "x": "3", "y": "3", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
@@ -259,7 +292,7 @@ var aligntopleft_default = function buildSVG8(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopright.svg
-var aligntopright_default = function buildSVG9(parent) {
+var aligntopright_default = function buildSVG10(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("rect", { "x": "11", "y": "3", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
@@ -269,7 +302,7 @@ var aligntopright_default = function buildSVG9(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/alignbottomright.svg
-var alignbottomright_default = function buildSVG10(parent) {
+var alignbottomright_default = function buildSVG11(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("rect", { "x": "11", "y": "11", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
@@ -279,7 +312,7 @@ var alignbottomright_default = function buildSVG10(parent) {
 };
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/alignbottomleft.svg
-var alignbottomleft_default = function buildSVG11(parent) {
+var alignbottomleft_default = function buildSVG12(parent) {
   const builder = new DOMBuilder(parent);
   builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 20 20", "fill": "none", "stroke": "currentColor" }, void 0, "http://www.w3.org/2000/svg");
   builder.openTag("rect", { "x": "3", "y": "11", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
@@ -290,25 +323,21 @@ var alignbottomleft_default = function buildSVG11(parent) {
 
 // src/ui/ui.ts
 var pressedClass = "pressed";
-var _NotificationUI = class _NotificationUI {
-  constructor(win, rule) {
-    __publicField(this, "_win");
+var NotificationUI = class {
+  constructor(win, core, rule, notificationsUI) {
+    __publicField(this, "_core");
+    __publicField(this, "_notificationsUI");
     __publicField(this, "_wrapper");
     __publicField(this, "_rule");
     __publicField(this, "_onToggle");
     __publicField(this, "isHidden", false);
-    this._win = win;
+    this._core = core;
     this._rule = rule;
-    if (!_NotificationUI._notificationsUI) {
-      _NotificationUI._notificationsUI = new NotificationsUI(this._win);
-    }
+    this._notificationsUI = notificationsUI;
     this._wrapper = win.document.createElement(
       "div"
     );
-    if (!_NotificationUI._highlight) {
-      _NotificationUI._highlight = new ElementHighlighter(win);
-    }
-    _NotificationUI._notificationsUI.addNotification(this);
+    notificationsUI.addNotification(this);
   }
   static setOnToggle(instance, onToggle) {
     instance._onToggle = onToggle;
@@ -317,7 +346,6 @@ var _NotificationUI = class _NotificationUI {
     return instance._wrapper;
   }
   update(notification) {
-    const win = this._win;
     const rule = this._rule;
     const wrapper = this._wrapper;
     const element = notification.element;
@@ -329,11 +357,11 @@ var _NotificationUI = class _NotificationUI {
       (container) => {
         container.onmouseover = () => {
           var _a;
-          element && ((_a = _NotificationUI._highlight) == null ? void 0 : _a.highlight(element));
+          element && ((_a = this._notificationsUI) == null ? void 0 : _a.highlight(element));
         };
         container.onmouseout = () => {
           var _a;
-          (_a = _NotificationUI._highlight) == null ? void 0 : _a.hide();
+          (_a = this._notificationsUI) == null ? void 0 : _a.highlight(null);
         };
       }
     ).openTag("div", {
@@ -346,15 +374,18 @@ var _NotificationUI = class _NotificationUI {
       },
       (logButton) => {
         logButton.onclick = () => {
-          console.error(
+          const { id, message, element: element2, rel, help, ...extra } = notification;
+          this._core.log(
             "AbleDOM: ",
+            "\nid:",
+            id,
             "\nmessage:",
-            notification.message,
+            message,
             "\nelement:",
-            element,
-            ...notification.rel ? ["\nrelative:", notification.rel] : [],
-            "\nnotification:",
-            notification
+            element2,
+            ...rel ? ["\nrelative:", rel] : [],
+            ...help ? ["\nhelp:", help] : [],
+            ...Object.keys(extra).length > 0 ? ["\nextra:", extra] : []
           );
         };
       }
@@ -362,27 +393,43 @@ var _NotificationUI = class _NotificationUI {
       "button",
       {
         class: "button",
-        title: "Reveal in Elements panel"
+        // title: "Reveal in Elements panel",
+        title: "Scroll element into view"
       },
       (revealButton) => {
-        var _a;
-        const hasDevTools = !!((_a = win.__ableDOMDevtools) == null ? void 0 : _a.revealElement) && false;
-        if (hasDevTools && element && win.document.body.contains(element)) {
+        const element2 = notification.element;
+        if (element2) {
           revealButton.onclick = () => {
-            var _a2;
-            const revealElement = (_a2 = win.__ableDOMDevtools) == null ? void 0 : _a2.revealElement;
-            if (revealElement && win.document.body.contains(element)) {
-              revealElement(element).then((revealed) => {
-                if (!revealed) {
-                }
-              });
-            }
+            var _a;
+            element2.scrollIntoView();
+            (_a = this._notificationsUI) == null ? void 0 : _a.highlight(element2);
           };
         } else {
           revealButton.style.display = "none";
         }
       }
-    ).element(reveal_default).closeTag().text(notification.message).openTag(
+    ).element(reveal_default).closeTag().openTag(
+      "button",
+      {
+        class: "button",
+        title: "Report bug"
+      },
+      (bugReportButton) => {
+        var _a, _b;
+        const bugReport = (_a = this._notificationsUI) == null ? void 0 : _a.bugReport;
+        if (bugReport == null ? void 0 : bugReport.isVisible(notification)) {
+          const title = (_b = bugReport.getTitle) == null ? void 0 : _b.call(bugReport, notification);
+          if (title) {
+            bugReportButton.title = title;
+          }
+          bugReportButton.onclick = () => {
+            bugReport.onClick(notification);
+          };
+        } else {
+          bugReportButton.style.display = "none";
+        }
+      }
+    ).element(bug_default).closeTag().text(notification.message).openTag(
       "a",
       {
         class: "button close",
@@ -405,7 +452,7 @@ var _NotificationUI = class _NotificationUI {
         closeButton.onclick = () => {
           var _a;
           this.toggle(false);
-          (_a = _NotificationUI._highlight) == null ? void 0 : _a.hide();
+          (_a = this._notificationsUI) == null ? void 0 : _a.highlight(null);
         };
       }
     ).element(close_default).closeTag().closeTag().closeTag();
@@ -424,14 +471,12 @@ var _NotificationUI = class _NotificationUI {
   dispose() {
     var _a;
     this._wrapper.remove();
-    (_a = _NotificationUI._notificationsUI) == null ? void 0 : _a.removeNotification(this);
+    (_a = this._notificationsUI) == null ? void 0 : _a.removeNotification(this);
+    delete this._notificationsUI;
   }
 };
-__publicField(_NotificationUI, "_notificationsUI");
-__publicField(_NotificationUI, "_highlight");
-var NotificationUI = _NotificationUI;
 var NotificationsUI = class {
-  constructor(win) {
+  constructor(win, props) {
     __publicField(this, "_container");
     __publicField(this, "_notificationsContainer");
     __publicField(this, "_menuElement");
@@ -444,17 +489,23 @@ var NotificationsUI = class {
     __publicField(this, "_alignBottomRightButton");
     __publicField(this, "_isMuted", false);
     __publicField(this, "_notifications", /* @__PURE__ */ new Set());
-    const container = this._container = win.document.createElement("div");
+    __publicField(this, "_highlighter");
+    __publicField(this, "bugReport");
+    this.bugReport = props.bugReport;
+    const doc = win.document;
+    const container = this._container = doc.createElement("div");
     container.__abledomui = true;
     container.id = "abledom-report";
-    const style = document.createElement("style");
+    const style = doc.createElement("style");
     style.type = "text/css";
-    style.appendChild(document.createTextNode(ui_default));
+    style.appendChild(doc.createTextNode(ui_default));
     container.appendChild(style);
-    const notificationsContainer = this._notificationsContainer = win.document.createElement("div");
+    const notificationsContainer = this._notificationsContainer = doc.createElement("div");
+    notificationsContainer.__abledomui = true;
     notificationsContainer.className = "abledom-notifications-container";
     container.appendChild(notificationsContainer);
-    const menuElement = this._menuElement = win.document.createElement("div");
+    const menuElement = this._menuElement = doc.createElement("div");
+    menuElement.__abledomui = true;
     menuElement.className = "abledom-menu-container";
     container.appendChild(menuElement);
     new DOMBuilder(menuElement).openTag("div", { class: "abledom-menu" }).openTag(
@@ -561,10 +612,14 @@ var NotificationsUI = class {
         };
       }
     ).element(alignbottomright_default).closeTag().closeTag();
-    win.document.body.appendChild(container);
+    doc.body.appendChild(container);
+    this._highlighter = new ElementHighlighter(win);
   }
   setUIAlignment(alignment) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!this._container || !this._notificationsContainer || !this._menuElement) {
+      return;
+    }
     (_a = this._alignBottomLeftButton) == null ? void 0 : _a.classList.remove(pressedClass);
     (_b = this._alignBottomRightButton) == null ? void 0 : _b.classList.remove(pressedClass);
     (_c = this._alignTopLeftButton) == null ? void 0 : _c.classList.remove(pressedClass);
@@ -604,6 +659,9 @@ var NotificationsUI = class {
     );
   }
   _setNotificationsCount(count) {
+    if (!this._menuElement) {
+      return;
+    }
     const countElement = this._notificationCountElement;
     if (countElement && count > 0) {
       countElement.textContent = "";
@@ -635,6 +693,9 @@ var NotificationsUI = class {
     showAllButton.style.display = allVisible ? "none" : "block";
   }
   addNotification(notification) {
+    if (!this._notificationsContainer) {
+      throw new Error("NotificationsUI is not initialized");
+    }
     if (this._notifications.has(notification)) {
       return;
     }
@@ -658,6 +719,7 @@ var NotificationsUI = class {
     this._notifications.delete(notification);
     this._setNotificationsCount(this._notifications.size);
     this._setShowHideButtonsVisibility();
+    this.highlight(null);
   }
   hideAll() {
     this._notifications.forEach((notification) => {
@@ -671,35 +733,104 @@ var NotificationsUI = class {
     });
     this._setShowHideButtonsVisibility();
   }
+  highlight(element) {
+    var _a;
+    (_a = this._highlighter) == null ? void 0 : _a.highlight(element);
+  }
+  dispose() {
+    var _a, _b;
+    (_a = this._highlighter) == null ? void 0 : _a.dispose();
+    (_b = this._container) == null ? void 0 : _b.remove();
+    delete this._highlighter;
+    delete this._container;
+    delete this._notificationsContainer;
+    delete this._menuElement;
+    delete this._notificationCountElement;
+    delete this._showAllButton;
+    delete this._hideAllButton;
+    delete this._alignBottomLeftButton;
+    delete this._alignTopLeftButton;
+    delete this._alignTopRightButton;
+    delete this._alignBottomRightButton;
+  }
 };
 var ElementHighlighter = class {
   constructor(win) {
     __publicField(this, "_window");
     __publicField(this, "_container");
+    __publicField(this, "_element");
+    __publicField(this, "_cancelScrollTimer");
+    __publicField(this, "_intersectionObserver");
+    __publicField(this, "_onScroll", () => {
+      var _a;
+      (_a = this._cancelScrollTimer) == null ? void 0 : _a.call(this);
+      this._hide();
+      const win = this._window;
+      if (win) {
+        const scrollTimer = win.setTimeout(() => {
+          delete this._cancelScrollTimer;
+          this.highlight(this._element || null);
+        }, 100);
+        this._cancelScrollTimer = () => {
+          delete this._cancelScrollTimer;
+          win.clearTimeout(scrollTimer);
+        };
+      }
+    });
     this._window = win;
     const container = this._container = win.document.createElement("div");
     container.__abledomui = true;
     container.className = "abledom-highlight";
+    new DOMBuilder(container).openTag("div", { class: "abledom-highlight-border1" }).closeTag().openTag("div", { class: "abledom-highlight-border2" }).closeTag();
+    win.addEventListener("scroll", this._onScroll, true);
   }
   highlight(element) {
-    const rect = element.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) {
+    if (!element) {
+      delete this._element;
+      this._unobserve();
+      this._hide();
       return;
     }
     const win = this._window;
     const container = this._container;
-    const style = container.style;
-    if (container.parentElement !== win.document.body) {
-      win.document.body.appendChild(container);
+    if (!win || !container) {
+      return;
     }
-    style.width = `${rect.width}px`;
-    style.height = `${rect.height}px`;
-    style.top = `${rect.top}px`;
-    style.left = `${rect.left}px`;
-    container.style.display = "block";
+    this._element = element;
+    this._intersectionObserver = new IntersectionObserver(([entry]) => {
+      if (entry) {
+        const rect = entry.boundingClientRect;
+        const body = win.document.body;
+        const style = container.style;
+        if (container.parentElement !== body) {
+          body.appendChild(container);
+        }
+        style.width = `${rect.width}px`;
+        style.height = `${rect.height}px`;
+        style.top = `${rect.top}px`;
+        style.left = `${rect.left}px`;
+        container.style.display = "block";
+      }
+    });
+    this._intersectionObserver.observe(element);
   }
-  hide() {
-    this._container.style.display = "none";
+  dispose() {
+    var _a, _b, _c;
+    this._unobserve();
+    (_a = this._cancelScrollTimer) == null ? void 0 : _a.call(this);
+    (_b = this._window) == null ? void 0 : _b.removeEventListener("scroll", this._onScroll, true);
+    (_c = this._container) == null ? void 0 : _c.remove();
+    delete this._element;
+    delete this._container;
+    delete this._window;
+  }
+  _hide() {
+    this._container && (this._container.style.display = "none");
+  }
+  _unobserve() {
+    var _a;
+    (_a = this._intersectionObserver) == null ? void 0 : _a.disconnect();
+    delete this._intersectionObserver;
   }
 };
 function isAbleDOMUIElement(element) {
@@ -894,8 +1025,9 @@ function getStackTrace() {
 
 // src/core.ts
 var AbleDOM = class {
-  constructor(win) {
+  constructor(win, props = {}) {
     __publicField(this, "_win");
+    __publicField(this, "_props");
     __publicField(this, "_observer");
     __publicField(this, "_clearValidationTimeout");
     __publicField(this, "_elementsWithNotifications", /* @__PURE__ */ new Set());
@@ -906,6 +1038,7 @@ var AbleDOM = class {
     __publicField(this, "_rules", []);
     __publicField(this, "_startFunc");
     __publicField(this, "_isStarted", false);
+    __publicField(this, "_notificationsUI");
     __publicField(this, "_onFocusIn", (event) => {
       var _a;
       const target = event.target;
@@ -935,11 +1068,18 @@ var AbleDOM = class {
     __publicField(this, "_notifyAsync", (rule, notification) => {
       this._addNotification(rule, notification);
     });
+    __publicField(this, "log", (...args) => {
+      var _a, _b, _c, _d;
+      return (_d = ((_a = this._props) == null ? void 0 : _a.log) || // In a multi-window application, just `console.error` could belong to a different window.
+      ((_c = (_b = this._win) == null ? void 0 : _b.console) == null ? void 0 : _c.error)) == null ? void 0 : _d.apply(null, args);
+    });
     this._win = win;
+    this._props = props;
     const _elementsToValidate = /* @__PURE__ */ new Set();
     const _elementsToRemove = /* @__PURE__ */ new Set();
-    win.document.addEventListener("focusin", this._onFocusIn, true);
-    win.document.addEventListener("focusout", this._onFocusOut, true);
+    const doc = win.document;
+    doc.addEventListener("focusin", this._onFocusIn, true);
+    doc.addEventListener("focusout", this._onFocusOut, true);
     this._observer = new MutationObserver((mutations) => {
       var _a;
       for (let mutation of mutations) {
@@ -977,12 +1117,13 @@ var AbleDOM = class {
     });
     this._startFunc = () => {
       delete this._startFunc;
-      this._observer.observe(win.document, {
+      this._observer.observe(doc, {
         childList: true,
         subtree: true,
-        attributes: true
+        attributes: true,
+        characterData: true
       });
-      findTargets(win.document.body, false);
+      findTargets(doc.body, false);
       this._validate(_elementsToValidate);
       _elementsToValidate.clear();
     };
@@ -1012,7 +1153,7 @@ var AbleDOM = class {
         return;
       }
       addTarget(node, removed);
-      const walker = win.document.createTreeWalker(
+      const walker = doc.createTreeWalker(
         node,
         NodeFilter.SHOW_ELEMENT,
         (node2) => {
@@ -1063,6 +1204,12 @@ var AbleDOM = class {
     }
   }
   _addNotification(rule, notification) {
+    var _a;
+    if (!this._notificationsUI) {
+      this._notificationsUI = new NotificationsUI(this._win, {
+        bugReport: (_a = this._props) == null ? void 0 : _a.bugReport
+      });
+    }
     const element = notification == null ? void 0 : notification.element;
     if (!notification) {
       this._removeNotification(element || this._win.document.body, rule);
@@ -1080,12 +1227,22 @@ var AbleDOM = class {
       }
       notificationUI = notifications.get(rule);
       if (!notificationUI) {
-        notificationUI = new NotificationUI(this._win, rule);
+        notificationUI = new NotificationUI(
+          this._win,
+          this,
+          rule,
+          this._notificationsUI
+        );
         notifications.set(rule, notificationUI);
       }
       this._elementsWithNotifications.add(element);
     } else {
-      notificationUI = new NotificationUI(this._win, rule);
+      notificationUI = new NotificationUI(
+        this._win,
+        this,
+        rule,
+        this._notificationsUI
+      );
     }
     notificationUI.update(notification);
   }
@@ -1219,17 +1376,20 @@ var AbleDOM = class {
     (_b = this._startFunc) == null ? void 0 : _b.call(this);
   }
   dispose() {
-    var _a, _b;
-    this._win.document.addEventListener("focusin", this._onFocusIn, true);
-    this._win.document.addEventListener("focusout", this._onFocusOut, true);
+    var _a, _b, _c;
+    const doc = this._win.document;
+    doc.addEventListener("focusin", this._onFocusIn, true);
+    doc.addEventListener("focusout", this._onFocusOut, true);
     this._remove(this._elementsWithNotifications);
     this._elementsWithNotifications.clear();
     this._dependantIdsByElement.clear();
     this._elementsDependingOnId.clear();
     this._idByElement.clear();
-    (_a = this._clearValidationTimeout) == null ? void 0 : _a.call(this);
+    (_a = this._notificationsUI) == null ? void 0 : _a.dispose();
+    delete this._notificationsUI;
+    (_b = this._clearValidationTimeout) == null ? void 0 : _b.call(this);
     for (const rule of this._rules) {
-      (_b = rule.stop) == null ? void 0 : _b.call(rule);
+      (_c = rule.stop) == null ? void 0 : _c.call(rule);
       ValidationRule.dispose(rule);
     }
     this._rules = [];
@@ -1253,7 +1413,7 @@ var AtomicRule = class extends ValidationRule {
     return matchesSelector(element, focusableElementSelector);
   }
   validate(element) {
-    const parentAtomic = document.evaluate(
+    const parentAtomic = element.ownerDocument.evaluate(
       `ancestor::*[
           @role = 'button' or 
           @role = 'checkbox' or 
@@ -1314,7 +1474,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
     __publicField(this, "anchored", true);
   }
   _isAriaHidden(element) {
-    return document.evaluate(
+    return element.ownerDocument.evaluate(
       `ancestor-or-self::*[@aria-hidden = 'true' or @hidden]`,
       element,
       null,
@@ -1341,7 +1501,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
     if ((_a = element.textContent) == null ? void 0 : _a.trim()) {
       return true;
     }
-    const labelNodes = document.evaluate(
+    const labelNodes = element.ownerDocument.evaluate(
       `(
       .//@aria-label | 
       .//text() | 
@@ -1368,6 +1528,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
   }
   validate(element) {
     var _a, _b;
+    const doc = element.ownerDocument;
     if (element.tagName === "INPUT") {
       const type = element.type;
       if (type === "hidden") {
@@ -1393,7 +1554,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
     if (this._hasLabel(element)) {
       return null;
     }
-    const labelledByNodes = document.evaluate(
+    const labelledByNodes = doc.evaluate(
       `.//@aria-labelledby[not(ancestor-or-self::*[@aria-hidden = 'true' or @hidden])]`,
       element,
       null,
@@ -1408,7 +1569,7 @@ var FocusableElementLabelRule = class extends ValidationRule {
       }
     }
     for (const id of labelledByValues) {
-      const labelElement = document.getElementById(id);
+      const labelElement = doc.getElementById(id);
       if (labelElement && this._hasLabel(labelElement)) {
         return {
           dependsOnIds: new Set(labelledByValues)
@@ -1449,7 +1610,7 @@ var ExistingIdRule = class extends ValidationRule {
       return null;
     }
     for (const id of ids) {
-      if (document.getElementById(id)) {
+      if (element.ownerDocument.getElementById(id)) {
         return {
           dependsOnIds: new Set(ids)
         };
@@ -1514,13 +1675,14 @@ var FocusLostRule = class extends ValidationRule {
     if (!target || !win || event.relatedTarget || this._mouseEventTimer) {
       return null;
     }
+    const doc = win.document;
     const targetPosition = this._focusedElement === target ? this._focusedElementPosition : void 0;
     this._lastBlurStack = getStackTrace();
     this._focusedElement = void 0;
     this._focusedElementPosition = void 0;
     const focusLostTimer = win.setTimeout(() => {
       delete this._clearScheduledFocusLost;
-      if (win.document.body && (!win.document.activeElement || win.document.activeElement === win.document.body) && (!win.document.body.contains(target) || !isElementVisible(target))) {
+      if (doc.body && (!doc.activeElement || doc.activeElement === doc.body) && (!doc.body.contains(target) || !isElementVisible(target))) {
         this.notify({
           element: target,
           id: "focus-lost",
@@ -1595,15 +1757,16 @@ var BadFocusRule = class extends ValidationRule {
     if (!win) {
       return null;
     }
+    const doc = win.document;
     this._lastBlurStack = getStackTrace();
     (_a = this._clearCheckTimer) == null ? void 0 : _a.call(this);
     const checkTimer = win.setTimeout(() => {
       delete this._clearCheckTimer;
-      if (document.activeElement && !isElementVisible(document.activeElement)) {
+      if (doc.activeElement && !isElementVisible(doc.activeElement)) {
         this.notify({
           id: "bad-focus",
           message: "Focused stolen by invisible element.",
-          element: document.activeElement,
+          element: doc.activeElement,
           stack: this._lastBlurStack,
           relStack: this._lastFocusStack
         });