abledom 0.0.2 → 0.0.4

package/dist/esm/index.js

@@ -60,38 +60,198 @@ 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";
 
+// src/ui/domBuilder.ts
+var DOMBuilder = class {
+  // static fromString(parent: HTMLElement | DocumentFragment, html: string): void {
+  //   // const builder = new DOMBuilder(parent);
+  // }
+  constructor(parent) {
+    __publicField(this, "_doc");
+    __publicField(this, "_stack");
+    this._doc = parent.ownerDocument;
+    this._stack = [parent];
+  }
+  openTag(tagName, attributes, callback, namespace) {
+    var _a, _b;
+    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) {
+      if (attributes) {
+        for (const [key, value] of Object.entries(attributes)) {
+          if (key === "class") {
+            element.className = value;
+          } else if (key === "style") {
+            element.style.cssText = value;
+          } else {
+            element.setAttribute(key, value);
+          }
+        }
+      }
+      if (callback) {
+        callback(element);
+      }
+      parent.appendChild(element);
+      this._stack.unshift(element);
+    }
+    return this;
+  }
+  closeTag() {
+    if (this._stack.length <= 1) {
+      throw new Error("Nothing to close");
+    }
+    this._stack.shift();
+    return this;
+  }
+  text(text) {
+    var _a;
+    (_a = this._stack[0]) == null ? void 0 : _a.appendChild(document.createTextNode(text));
+    return this;
+  }
+  builder(buildDOM) {
+    buildDOM(this._stack[0]);
+    return this;
+  }
+};
+
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/close.svg
-var close_default = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"\n    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"\n    xmlns="http://www.w3.org/2000/svg">\n    <circle cx="12" cy="12" r="10"/>\n    <line x1="15" y1="9" x2="9" y2="15"/>\n    <line x1="9" y1="9" x2="15" y2="15"/>\n</svg>\n';
+var close_default = function buildSVG(parent) {
+  const builder = new DOMBuilder(parent);
+  builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
+  builder.openTag("circle", { "cx": "12", "cy": "12", "r": "10" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "15", "y1": "9", "x2": "9", "y2": "15" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "9", "y1": "9", "x2": "15", "y2": "15" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+};
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/help.svg
-var help_default = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none"\n    stroke="currentColor" stroke-width="2" stroke-linecap="round"\n    stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">\n  <circle cx="12" cy="12" r="10"/>\n  <path d="M9.09 9a3 3 0 1 1 5.83 1c-.28 1.02-1.22 1.5-2.01 2.1-.76.58-1 1.1-1 2"/>\n  <circle cx="12" cy="17" r="0.5"/>\n</svg>';
+var help_default = function buildSVG2(parent) {
+  const builder = new DOMBuilder(parent);
+  builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
+  builder.openTag("circle", { "cx": "12", "cy": "12", "r": "10" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("path", { "d": "M9.09 9a3 3 0 1 1 5.83 1c-.28 1.02-1.22 1.5-2.01 2.1-.76.58-1 1.1-1 2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("circle", { "cx": "12", "cy": "17", "r": "0.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+};
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/log.svg
-var log_default = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"\n    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"\n    xmlns="http://www.w3.org/2000/svg">\n  <polyline points="4 7 9 12 4 17"/>\n  <line x1="11" y1="19" x2="20" y2="19"/>\n</svg>';
+var log_default = function buildSVG3(parent) {
+  const builder = new DOMBuilder(parent);
+  builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
+  builder.openTag("polyline", { "points": "4 7 9 12 4 17" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "11", "y1": "19", "x2": "20", "y2": "19" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+};
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/reveal.svg
-var reveal_default = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"\n    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"\n    xmlns="http://www.w3.org/2000/svg">\n  <circle cx="12" cy="12" r="10"/>\n  <line x1="12" y1="2" x2="12" y2="6"/>\n  <line x1="12" y1="18" x2="12" y2="22"/>\n  <line x1="2" y1="12" x2="6" y2="12"/>\n  <line x1="18" y1="12" x2="22" y2="12"/>\n</svg>';
+var reveal_default = function buildSVG4(parent) {
+  const builder = new DOMBuilder(parent);
+  builder.openTag("svg", { "width": "20", "height": "20", "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "xmlns": "http://www.w3.org/2000/svg" }, void 0, "http://www.w3.org/2000/svg");
+  builder.openTag("circle", { "cx": "12", "cy": "12", "r": "10" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "12", "y1": "2", "x2": "12", "y2": "6" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "12", "y1": "18", "x2": "12", "y2": "22" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "2", "y1": "12", "x2": "6", "y2": "12" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "18", "y1": "12", "x2": "22", "y2": "12" }, 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 = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <path d="M11.44 17.5a1.67 1.67 0 0 1-2.89 0" stroke-width="1.5"/>\n  <path d="M15 6.67a5 5 0 0 0-10 0v4.17a1.67 1.67 0 0 1-.83 1.44L3.33 14.17h13.34l-0.83-1.89a1.67 1.67 0 0 1-.83-1.44V6.67z" stroke-width="1.5"/>\n  <line x1="1.67" y1="1.67" x2="18.33" y2="18.33" stroke-width="1.5"/>\n</svg>\n';
+var hideall_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("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");
+  builder.closeTag();
+  builder.openTag("path", { "d": "M15 6.67a5 5 0 0 0-10 0v4.17a1.67 1.67 0 0 1-.83 1.44L3.33 14.17h13.34l-0.83-1.89a1.67 1.67 0 0 1-.83-1.44V6.67z", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "1.67", "y1": "1.67", "x2": "18.33", "y2": "18.33", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+};
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/muteall.svg
-var muteall_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <path d="M11.44 17.5a1.67 1.67 0 0 1-2.89 0" stroke-width="1.5"/>\n  <path d="M15 6.67a5 5 0 0 0-10 0v4.17a1.67 1.67 0 0 1-.83 1.44L3.33 14.17h13.34l-0.83-1.89a1.67 1.67 0 0 1-.83-1.44V6.67z" stroke-width="1.5"/>\n  <line x1="1.67" y1="1.67" x2="18.33" y2="18.33" stroke-width="1.5"/>\n  <line x1="18.33" y1="1.67" x2="1.67" y2="18.33" stroke-width="1.5"/>\n</svg>\n';
+var muteall_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");
+  builder.closeTag();
+  builder.openTag("path", { "d": "M15 6.67a5 5 0 0 0-10 0v4.17a1.67 1.67 0 0 1-.83 1.44L3.33 14.17h13.34l-0.83-1.89a1.67 1.67 0 0 1-.83-1.44V6.67z", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "1.67", "y1": "1.67", "x2": "18.33", "y2": "18.33", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.openTag("line", { "x1": "18.33", "y1": "1.67", "x2": "1.67", "y2": "18.33", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+};
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/showall.svg
-var showall_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <path d="M11.44 17.5a1.67 1.67 0 0 1-2.89 0" stroke-width="1.5"/>\n  <path d="M15 6.67a5 5 0 0 0-10 0v4.17a1.67 1.67 0 0 1-.83 1.44L3.33 14.17h13.34l-0.83-1.89a1.67 1.67 0 0 1-.83-1.44V6.67z" stroke-width="1.5"/>\n</svg>\n';
+var showall_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");
+  builder.closeTag();
+  builder.openTag("path", { "d": "M15 6.67a5 5 0 0 0-10 0v4.17a1.67 1.67 0 0 1-.83 1.44L3.33 14.17h13.34l-0.83-1.89a1.67 1.67 0 0 1-.83-1.44V6.67z", "stroke-width": "1.5" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+};
 
 // inline-file:/Users/marata/Documents/Work/abledom/src/ui/aligntopleft.svg
-var aligntopleft_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <rect x="3" y="3" width="6" height="6" stroke-width="2"/>\n</svg>\n';
+var aligntopleft_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("rect", { "x": "3", "y": "3", "width": "6", "height": "6", "stroke-width": "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/aligntopright.svg
-var aligntopright_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <rect x="11" y="3" width="6" height="6" stroke-width="2"/>\n</svg>\n';
+var aligntopright_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": "11", "y": "3", "width": "6", "height": "6", "stroke-width": "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/alignbottomright.svg
-var alignbottomright_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <rect x="11" y="11" width="6" height="6" stroke-width="2"/>\n</svg>\n';
+var alignbottomright_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": "11", "width": "6", "height": "6", "stroke-width": "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/alignbottomleft.svg
-var alignbottomleft_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">\n  <rect x="3" y="11" width="6" height="6" stroke-width="2"/>\n</svg>\n';
+var alignbottomleft_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": "3", "y": "11", "width": "6", "height": "6", "stroke-width": "2" }, void 0, "http://www.w3.org/2000/svg");
+  builder.closeTag();
+  builder.closeTag();
+  return parent.firstElementChild;
+};
 
 // src/ui/ui.ts
 var pressedClass = "pressed";
@@ -122,65 +282,90 @@ var _NotificationUI = class _NotificationUI {
     return instance._wrapper;
   }
   update(notification) {
-    var _a;
     const win = this._win;
     const rule = this._rule;
     const wrapper = this._wrapper;
     const element = notification.element;
     wrapper.__abledomui = true;
-    wrapper.innerHTML = `
-      <div class="abledom-notification-container"><div class="abledom-notification${rule.type === 2 /* Warning */ ? " abledom-notification_warning" : rule.type === 3 /* Info */ ? " abledom-notification_info" : ""}">
-        <button class="button" title="Log to Console">${log_default}</button>
-        <button class="button" title="Reveal in Elements panel">${reveal_default}</button>
-        ${notification.message}
-        <a href class="button close" href="/" title="Open help" target="_blank">${help_default}</a>
-        <button class="button close" class="close" title="Hide">${close_default}</button>
-      </div></div>`;
-    const container = wrapper.firstElementChild;
-    const buttons = wrapper.querySelectorAll("button");
-    const logButton = buttons[0];
-    const revealButton = buttons[1];
-    const closeButton = buttons[2];
-    logButton.onclick = () => {
-      console.error(
-        "AbleDOM: ",
-        "\nmessage:",
-        notification.message,
-        "\nelement:",
-        element,
-        ...notification.rel ? ["\nrelative:", notification.rel] : [],
-        "\nnotification:",
-        notification
-      );
-    };
-    const hasDevTools = !!((_a = win.__ableDOMDevtools) == null ? void 0 : _a.revealElement) && false;
-    if (hasDevTools && element && win.document.body.contains(element)) {
-      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) {
+    wrapper.textContent = "";
+    new DOMBuilder(wrapper).openTag(
+      "div",
+      { class: "abledom-notification-container" },
+      (container) => {
+        container.onmouseover = () => {
+          var _a;
+          element && ((_a = _NotificationUI._highlight) == null ? void 0 : _a.highlight(element));
+        };
+        container.onmouseout = () => {
+          var _a;
+          (_a = _NotificationUI._highlight) == null ? void 0 : _a.hide();
+        };
+      }
+    ).openTag("div", {
+      class: `abledom-notification${rule.type === 2 /* Warning */ ? " abledom-notification_warning" : rule.type === 3 /* Info */ ? " abledom-notification_info" : ""}`
+    }).openTag(
+      "button",
+      {
+        class: "button",
+        title: "Log to Console"
+      },
+      (logButton) => {
+        logButton.onclick = () => {
+          console.error(
+            "AbleDOM: ",
+            "\nmessage:",
+            notification.message,
+            "\nelement:",
+            element,
+            ...notification.rel ? ["\nrelative:", notification.rel] : [],
+            "\nnotification:",
+            notification
+          );
+        };
+      }
+    ).builder(log_default).closeTag().openTag(
+      "button",
+      {
+        class: "button",
+        title: "Reveal in Elements panel"
+      },
+      (revealButton) => {
+        var _a;
+        const hasDevTools = !!((_a = win.__ableDOMDevtools) == null ? void 0 : _a.revealElement) && false;
+        if (hasDevTools && element && win.document.body.contains(element)) {
+          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) {
+                }
+              });
             }
-          });
+          };
+        } else {
+          revealButton.style.display = "none";
         }
-      };
-    } else {
-      revealButton.style.display = "none";
-    }
-    closeButton.onclick = () => {
-      var _a2;
-      this.toggle(false);
-      (_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.hide();
-    };
-    container.onmouseover = () => {
-      var _a2;
-      element && ((_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.highlight(element));
-    };
-    container.onmouseout = () => {
-      var _a2;
-      (_a2 = _NotificationUI._highlight) == null ? void 0 : _a2.hide();
-    };
+      }
+    ).builder(reveal_default).closeTag().text(notification.message).openTag("a", {
+      class: "button close",
+      href: "/",
+      title: "Open help",
+      target: "_blank"
+    }).builder(help_default).closeTag().openTag(
+      "button",
+      {
+        class: "button close",
+        title: "Hide"
+      },
+      (closeButton) => {
+        closeButton.onclick = () => {
+          var _a;
+          this.toggle(false);
+          (_a = _NotificationUI._highlight) == null ? void 0 : _a.hide();
+        };
+      }
+    ).builder(close_default).closeTag().closeTag().closeTag();
   }
   toggle(show, initial = false) {
     var _a;
@@ -220,21 +405,40 @@ var NotificationsUI = class {
     const container = this._container = win.document.createElement("div");
     container.__abledomui = true;
     container.id = "abledom-report";
-    container.innerHTML = `<style>${ui_default}</style>`;
+    const style = document.createElement("style");
+    style.type = "text/css";
+    style.appendChild(document.createTextNode(ui_default));
+    container.appendChild(style);
     const notificationsContainer = this._notificationsContainer = win.document.createElement("div");
     notificationsContainer.className = "abledom-notifications-container";
     container.appendChild(notificationsContainer);
     const menuElement = this._menuElement = win.document.createElement("div");
     menuElement.className = "abledom-menu-container";
-    menuElement.innerHTML = `<div class="abledom-menu"><span class="notifications-count"></span
-      ><button class="button" title="Show all notifications">${showall_default}</button
-      ><button class="button" title="Hide all notifications">${hideall_default}</button
-      ><button class="button" title="Mute newly appearing notifications">${muteall_default}</button
-      ><button class="button align-button align-button-first pressed" title="Attach notifications to bottom left">${alignbottomleft_default}</button
-      ><button class="button align-button" title="Attach notifications to top left">${aligntopleft_default}</button
-      ><button class="button align-button" title="Attach notifications to top right">${aligntopright_default}</button
-      ><button class="button align-button align-button-last" title="Attach notifications to bottom right">${alignbottomright_default}</button
-      ></div>`;
+    new DOMBuilder(menuElement).openTag("div", { class: "abledom-menu" }).openTag("span", {
+      class: "notifications-count",
+      title: "Number of notifications"
+    }).closeTag().openTag("button", {
+      class: "button",
+      title: "Show all notifications"
+    }).builder(showall_default).closeTag().openTag("button", {
+      class: "button",
+      title: "Hide all notifications"
+    }).builder(hideall_default).closeTag().openTag("button", {
+      class: "button",
+      title: "Mute newly appearing notifications"
+    }).builder(muteall_default).closeTag().openTag("button", {
+      class: "button align-button align-button-first pressed",
+      title: "Attach notifications to bottom left"
+    }).builder(alignbottomleft_default).closeTag().openTag("button", {
+      class: "button align-button",
+      title: "Attach notifications to top left"
+    }).builder(aligntopleft_default).closeTag().openTag("button", {
+      class: "button align-button",
+      title: "Attach notifications to top right"
+    }).builder(aligntopright_default).closeTag().openTag("button", {
+      class: "button align-button align-button-last",
+      title: "Attach notifications to bottom right"
+    }).builder(alignbottomright_default).closeTag().closeTag();
     const [
       notificationCountElement,
       showAllButton,
@@ -332,7 +536,8 @@ var NotificationsUI = class {
   _setNotificationsCount(count) {
     const countElement = this._notificationCountElement;
     if (countElement && count > 0) {
-      countElement.innerHTML = `<strong>${count}</strong> notification${count > 1 ? "s" : ""}`;
+      countElement.textContent = "";
+      new DOMBuilder(countElement).openTag("strong").text(`${count}`).closeTag().text(` notification${count > 1 ? "s" : ""}`);
       this._menuElement.style.display = "block";
     } else {
       this._menuElement.style.display = "none";