jj 2.5.0 → 2.7.2

package/lib/bundle.js

@@ -1,3 +1,12 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
 // node_modules/jty/lib/misc.js
 function isDef(x) {
   return x !== void 0;
@@ -76,10 +85,18 @@ function isStr(x) {
 var { hasOwnProperty: hasOwnProperty2 } = Object;
 var { isArray: isArray2 } = Array;
 
+// src/internal.ts
+function errMsg(varName, expected, received) {
+  return `Expected '${varName}' to be ${expected}. Got ${received} (${typeof received})`;
+}
+function typeErr(varName, expected, received) {
+  return new TypeError(errMsg(varName, expected, received));
+}
+
 // src/util.ts
 function fileExt(path) {
   if (!isStr(path)) {
-    throw new TypeError(`Expected a string file path. Got ${path} (${typeof path})`);
+    throw typeErr("path", "a string", path);
   }
   const lastDotIndex = path.lastIndexOf(".");
   if (lastDotIndex === -1) {
@@ -105,33 +122,30 @@ async function cssToStyle(css) {
 // src/case.ts
 function pas2keb(str) {
   if (!isStr(str)) {
-    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
+    throw typeErr("str", "a string", str);
   }
   if (/[^a-zA-Z0-9_]/.test(str)) {
-    throw new TypeError(`Invalid characters in string. Only alphanumeric and underscores are allowed. Got: ${str}`);
+    throw new SyntaxError(errMsg("str", "alphanumeric characters and underscores", str));
   }
   return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").replace(/_/g, "-").toLowerCase();
 }
 function keb2pas(str) {
   if (!isStr(str)) {
-    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
+    throw typeErr("str", "a string", str);
   }
   return str.split("-").filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("") || // Handle strings that were not kebab-case to begin with (e.g. 'single', 'camelCase')
   (str.length > 0 ? str.charAt(0).toUpperCase() + str.slice(1) : "");
 }
 function keb2cam(str) {
   if (!isStr(str)) {
-    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
+    throw typeErr("str", "a string", str);
   }
   return str.replace(/^-+|-+$/g, "").replace(/-+([a-z])/g, (g, c) => c.toUpperCase());
 }
 
-// src/JJET.ts
-var JJET = class _JJET {
-  static from(ref) {
-    return new _JJET(ref);
-  }
-  #ref;
+// src/wrappers/JJET.ts
+var _ref, _boundHandlers, _JJET_instances, getBoundHandler_fn;
+var _JJET = class _JJET {
   /**
    * Creates a JJET instance.
    *
@@ -139,23 +153,36 @@ var JJET = class _JJET {
    * @throws {TypeError} If `ref` is not an EventTarget.
    */
   constructor(ref) {
+    __privateAdd(this, _JJET_instances);
+    __privateAdd(this, _ref);
+    __privateAdd(this, _boundHandlers, /* @__PURE__ */ new WeakMap());
     if (!isA(ref, EventTarget)) {
       throw new TypeError(`JJET expects an EventTarget instance. Got ${ref} (${typeof ref}). `);
     }
-    this.#ref = ref;
+    __privateSet(this, _ref, ref);
+  }
+  static from(ref) {
+    return new _JJET(ref);
   }
   /**
    * Gets the underlying DOM object.
    */
   get ref() {
-    return this.#ref;
+    return __privateGet(this, _ref);
   }
   /**
    * Adds an event listener.
    *
-   *  * @example
+   * @remarks
+   * The handler is automatically bound to this JJET instance, so `this` inside the handler
+   * refers to the JJET instance, not the DOM element. To access the DOM element, use `this.ref`.
+   *
+   * @example
    * ```ts
-   * JJET.from(window).on('resize', () => console.log('resized'))
+   * JJET.from(window).on('resize', function() {
+   *   console.log(this) // JJET instance
+   *   console.log(this.ref) // window object
+   * })
    * ```
    * @param eventName - The name of the event.
    * @param handler - The event handler.
@@ -164,15 +191,21 @@ var JJET = class _JJET {
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener | EventTarget.addEventListener}
    */
   on(eventName, handler, options) {
-    this.ref.addEventListener(eventName, handler, options);
+    const boundHandler = __privateMethod(this, _JJET_instances, getBoundHandler_fn).call(this, handler);
+    this.ref.addEventListener(eventName, boundHandler, options);
     return this;
   }
   /**
    * Removes an event listener.
    *
-   *  * @example
+   * @remarks
+   * Pass the same handler reference that was used in `on()` to properly remove the listener.
+   *
+   * @example
    * ```ts
-   * JJET.from(window).off('resize', previouslyAttachedHandler)
+   * const handler = function() { console.log(this) }
+   * JJET.from(window).on('resize', handler)
+   * JJET.from(window).off('resize', handler)
    * ```
    * @param eventName - The name of the event.
    * @param handler - The event handler.
@@ -181,7 +214,8 @@ var JJET = class _JJET {
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener | EventTarget.removeEventListener}
    */
   off(eventName, handler, options) {
-    this.ref.removeEventListener(eventName, handler, options);
+    const boundHandler = __privateMethod(this, _JJET_instances, getBoundHandler_fn).call(this, handler);
+    this.ref.removeEventListener(eventName, boundHandler, options);
     return this;
   }
   /**
@@ -218,8 +252,35 @@ var JJET = class _JJET {
     return fn.call(this, ...args);
   }
 };
+_ref = new WeakMap();
+_boundHandlers = new WeakMap();
+_JJET_instances = new WeakSet();
+/**
+ * Gets or creates a bound version of the handler.
+ *
+ * @remarks
+ * Bound handlers are cached in a WeakMap to ensure `off()` can properly remove listeners.
+ * When the original handler is garbage collected, the bound version is automatically removed.
+ *
+ * @param handler - The event handler to bind.
+ * @returns The bound handler, or null if the input is null.
+ */
+getBoundHandler_fn = function(handler) {
+  if (handler === null) return null;
+  let bound = __privateGet(this, _boundHandlers).get(handler);
+  if (!bound) {
+    if (typeof handler === "function") {
+      bound = handler.bind(this);
+    } else {
+      bound = { handleEvent: handler.handleEvent.bind(this) };
+    }
+    __privateGet(this, _boundHandlers).set(handler, bound);
+  }
+  return bound;
+};
+var JJET = _JJET;
 
-// src/JJN.ts
+// src/wrappers/JJN-raw.ts
 var JJN = class _JJN extends JJET {
   /**
    * Creates a JJN instance from a Node reference.
@@ -376,15 +437,15 @@ var JJN = class _JJN extends JJET {
   }
 };
 
-// src/JJNx.ts
+// src/wrappers/JJNx.ts
 var JJNx = class extends JJN {
   /**
    * Finds the first element matching a selector within this Element.
    *
    * @example
    * ```ts
-   * const span = el.query('span')  // Returns null if not found
-   * const span = el.query('span', true)  // Throws if not found
+   * const span = el.find('span')  // Returns null if not found
+   * const span = el.find('span', true)  // Throws if not found
    * ```
    *
    * @param selector - The CSS selector.
@@ -393,15 +454,13 @@ var JJNx = class extends JJN {
    * @throws {TypeError} If selector is not a string or element not found and required is true.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector | Element.querySelector}
    */
-  query(selector, required = false) {
+  find(selector, required = false) {
     const queryResult = this.ref.querySelector(selector);
     if (queryResult) {
       return JJN.wrap(queryResult);
     }
     if (required) {
-      throw new TypeError(
-        `Element with selector "${selector}" not found. Did you mean to call .query("${selector}", false) to return null instead? `
-      );
+      throw new TypeError(`No element matched query "${selector}"`);
     }
     return null;
   }
@@ -410,7 +469,7 @@ var JJNx = class extends JJN {
    *
    * @example
    * ```ts
-   * const items = el.queryAll('li')
+   * const items = el.findAll('li')
    * ```
    *
    * @param selector - The CSS selector.
@@ -418,7 +477,7 @@ var JJNx = class extends JJN {
    * @throws {TypeError} If selector is not a string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll | Element.querySelectorAll}
    */
-  queryAll(selector) {
+  findAll(selector) {
     return JJN.wrapAll(this.ref.querySelectorAll(selector));
   }
   /**
@@ -426,7 +485,7 @@ var JJNx = class extends JJN {
    *
    * @example
    * ```ts
-   * el.append(h('span', null, 'hello'))
+   * el.addChild(h('span', null, 'hello'))
    * ```
    *
    * @remarks
@@ -436,7 +495,7 @@ var JJNx = class extends JJN {
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/append | Element.append}
    */
-  append(...children) {
+  addChild(...children) {
     const nodes = JJN.unwrapAll(children.filter(JJN.isWrapable));
     this.ref.append(...nodes);
     return this;
@@ -446,7 +505,7 @@ var JJNx = class extends JJN {
    *
    * @example
    * ```ts
-   * el.prepend(h('span', null, 'first'))
+   * el.preChild(h('span', null, 'first'))
    * ```
    *
    * @remarks
@@ -456,7 +515,7 @@ var JJNx = class extends JJN {
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend | Element.prepend}
    */
-  prepend(...children) {
+  preChild(...children) {
     const nodes = JJN.unwrapAll(children.filter(JJN.isWrapable));
     this.ref.prepend(...nodes);
     return this;
@@ -466,7 +525,7 @@ var JJNx = class extends JJN {
    *
    * @example
    * ```ts
-   * node.mapAppend(['a', 'b'], item => h('li', null, item))
+   * node.addChildMap(['a', 'b'], item => h('li', null, item))
    * ```
    *
    * @remarks
@@ -476,15 +535,15 @@ var JJNx = class extends JJN {
    * @param mapFn - The mapping function returning a Wrappable.
    * @returns This instance for chaining.
    */
-  mapAppend(array, mapFn) {
-    return this.append(...array.map(mapFn));
+  addChildMap(array, mapFn) {
+    return this.addChild(...array.map(mapFn));
   }
   /**
    * Maps an array to children and prepends them.
    *
    * @example
    * ```ts
-   * node.mapPrepend(['a', 'b'], item => JJHE.fromTag('li').setText(item))
+   * node.preChildMap(['a', 'b'], item => JJHE.create('li').setText(item))
    * ```
    *
    * @remarks
@@ -494,8 +553,8 @@ var JJNx = class extends JJN {
    * @param mapFn - The mapping function.
    * @returns This instance for chaining.
    */
-  mapPrepend(array, mapFn) {
-    return this.prepend(...array.map(mapFn));
+  preChildMap(array, mapFn) {
+    return this.preChild(...array.map(mapFn));
   }
   /**
    * Replaces the existing children of an Element with a specified new set of children.
@@ -534,15 +593,7 @@ var JJNx = class extends JJN {
   }
 };
 
-// src/internal.ts
-function errMsg(varName, expected, received) {
-  return `Expected '${varName}' to be ${expected}. Got ${received} (${typeof received})`;
-}
-function typeErr(varName, expected, received) {
-  return new TypeError(errMsg(varName, expected, received));
-}
-
-// src/JJDF.ts
+// src/wrappers/JJDF.ts
 var JJDF = class _JJDF extends JJNx {
   /**
    * Creates a JJDF instance from a DocumentFragment reference.
@@ -582,41 +633,13 @@ var JJDF = class _JJDF extends JJNx {
    */
   constructor(ref) {
     if (!isA(ref, DocumentFragment)) {
-      throw new TypeError(`Expected a DocumentFragment. Got ${ref} (${typeof ref})`);
+      throw typeErr("ref", "a DocumentFragment", ref);
     }
     super(ref);
   }
-  /**
-   * Finds an element by ID within this DocumentFragment.
-   *
-   * @example
-   * ```ts
-   * const el = frag.byId('header')  // Returns null if not found
-   * const el = frag.byId('header', true)  // Throws if not found
-   * ```
-   *
-   * @param id - The ID to search for.
-   * @param required - Whether to throw an error if not found. Defaults to false.
-   * @returns The wrapped element, or null if not found and required is false.
-   * @throws {TypeError} If id is not a string or element not found and required is true.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/getElementById | DocumentFragment.getElementById}
-   */
-  byId(id, required = false) {
-    if (!isStr(id)) {
-      throw typeErr("id", "a string", id);
-    }
-    const el = this.ref.getElementById(id);
-    if (el) {
-      return JJN.wrap(el);
-    }
-    if (required) {
-      throw new TypeError(`Element with id ${id} not found`);
-    }
-    return null;
-  }
 };
 
-// src/JJSR.ts
+// src/wrappers/JJSR.ts
 var JJSR = class _JJSR extends JJDF {
   /**
    * Creates a JJSR instance from a ShadowRoot reference.
@@ -660,16 +683,21 @@ var JJSR = class _JJSR extends JJDF {
    *
    * @example
    * ```ts
-   * shadow.setHTML('<p>Hello</p>', false)
+   * shadow.setHTML('<p>Hello</p>', true)
    * ```
    *
-   * @param value - The HTML string.
-   * @param unsafe - Reserved for future use (must be false).
+   * @param html - The HTML string to set, or null/undefined to clear.
+   * @param unsafe - explicit opt-in to set innerHTML. must be true if html is provided.
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML | Element.innerHTML}
    */
-  setHTML(value, unsafe) {
-    this.ref.innerHTML = value;
+  setHTML(html, unsafe) {
+    if (html && unsafe !== true) {
+      throw new Error(
+        `Setting innerHTML is unsafe. Pass true as the second argument to confirm you know what you are doing.`
+      );
+    }
+    this.ref.innerHTML = html ?? "";
     return this;
   }
   /**
@@ -692,7 +720,7 @@ var JJSR = class _JJSR extends JJDF {
   }
 };
 
-// src/JJE.ts
+// src/wrappers/JJE.ts
 var JJE = class _JJE extends JJNx {
   /**
    * Creates a JJE instance from an Element reference.
@@ -974,6 +1002,33 @@ var JJE = class _JJE extends JJNx {
     this.ref.classList.replace(oldClassName, newClassName);
     return this;
   }
+  /**
+   * Finds the closest ancestor (or self) that matches a CSS selector.
+   *
+   * @remarks
+   * Returns `null` when no matching ancestor is found.
+   *
+   * @example
+   * ```ts
+   * const button = JJE.from(document.querySelector('button'))
+   * const card = button.closest('.card')
+   * if (card) {
+   *     card.addClass('has-action')
+   * }
+   * ```
+   *
+   * @param selector - The CSS selector to search for.
+   * @returns A JJE wrapping the closest match, or null when none exists.
+   * @throws {TypeError} If `selector` is not a string.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/closest | Element.closest}
+   */
+  closest(selector) {
+    if (!isStr(selector)) {
+      throw typeErr("selector", "a string", selector);
+    }
+    const match = this.ref.closest(selector);
+    return match ? JJN.wrap(match) : null;
+  }
   /**
   
        * Hides the Element by setting the `hidden` attribute and `aria-hidden="true"`.
@@ -1031,10 +1086,16 @@ var JJE = class _JJE extends JJNx {
    * Pass an empty string, `null`, or `undefined` to clear the content.
    *
    * @param html - The HTML string to set, or null/undefined to clear.
+   * @param unsafe - explicit opt-in to set innerHTML. must be true if html is provided.
    * @returns This instance for chaining.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML | Element.innerHTML}
    */
-  setHTML(html) {
+  setHTML(html, unsafe) {
+    if (html && unsafe !== true) {
+      throw new Error(
+        `Setting innerHTML is unsafe. Pass true as the second argument to confirm you know what you are doing.`
+      );
+    }
     this.ref.innerHTML = html ?? "";
     return this;
   }
@@ -1058,7 +1119,11 @@ var JJE = class _JJE extends JJNx {
     if (isObj(config)) {
       const { template, styles } = config;
       if (template) {
-        shadowRoot.innerHTML = template;
+        if (isStr(template)) {
+          shadowRoot.innerHTML = template;
+        } else {
+          shadowRoot.appendChild(template);
+        }
       }
       if (isArr(styles) && styles.length) {
         shadowRoot.adoptedStyleSheets.push(...styles);
@@ -1076,7 +1141,7 @@ var JJE = class _JJE extends JJNx {
   }
 };
 
-// src/JJEx.ts
+// src/wrappers/JJEx.ts
 var JJEx = class extends JJE {
   /**
    * Gets a data attribute from the HTMLElement.
@@ -1155,7 +1220,7 @@ var JJEx = class extends JJE {
   }
 };
 
-// src/JJHE.ts
+// src/wrappers/JJHE.ts
 var JJHE = class _JJHE extends JJEx {
   /**
    * Creates a JJHE instance from an HTMLElement reference.
@@ -1172,11 +1237,9 @@ var JJHE = class _JJHE extends JJEx {
   static from(ref) {
     return new _JJHE(ref);
   }
-  static fromTag(tagName, options) {
+  static create(tagName, options) {
     if (!isStr(tagName)) {
-      throw new TypeError(
-        `JJHE.fromTag() expects tagName to be a string (e.g., 'div', 'button'). Got ${tagName} (${typeof tagName}). Did you mean to use a string literal like 'div'?`
-      );
+      throw typeErr("tagName", "a string like 'div' or 'button'", tagName);
     }
     return new _JJHE(document.createElement(tagName, options));
   }
@@ -1188,9 +1251,7 @@ var JJHE = class _JJHE extends JJEx {
    */
   constructor(ref) {
     if (!isA(ref, HTMLElement)) {
-      throw new TypeError(
-        `JJHE expects an HTMLElement. Got ${ref} (${typeof ref}). If you have a DOM node, use JJHE.from(element). If creating a new element, use JJHE.fromTag('div').`
-      );
+      throw typeErr("ref", "an HTMLElement", ref);
     }
     super(ref);
   }
@@ -1203,9 +1264,7 @@ var JJHE = class _JJHE extends JJEx {
    */
   getValue() {
     if (!hasProp(this.ref, "value")) {
-      throw new Error(
-        `Cannot get value from <${this.ref.tagName.toLowerCase()}>. The value property only exists on form elements (input, textarea, select). If you need text content, try .getText() instead.`
-      );
+      throw new ReferenceError(`${this.ref.tagName} has no value property.`);
     }
     return this.ref.value;
   }
@@ -1225,9 +1284,7 @@ var JJHE = class _JJHE extends JJEx {
    */
   setValue(value) {
     if (!hasProp(this.ref, "value")) {
-      throw new Error(
-        `Cannot set value on <${this.ref.tagName.toLowerCase()}>. The value property only exists on form elements (input, textarea, select). If you need to set text content, try .setText() instead.`
-      );
+      throw new ReferenceError(`${this.ref.tagName} has no value property.`);
     }
     this.ref.value = value;
     return this;
@@ -1282,7 +1339,7 @@ var JJHE = class _JJHE extends JJEx {
   }
 };
 
-// src/JJT.ts
+// src/wrappers/JJT.ts
 var JJT = class _JJT extends JJN {
   /**
    * Creates a JJT instance from a Text node.
@@ -1388,7 +1445,7 @@ var JJT = class _JJT extends JJN {
   }
 };
 
-// src/JJD.ts
+// src/wrappers/JJD.ts
 var JJD = class _JJD extends JJNx {
   /**
    * Creates a JJD instance from a Document reference.
@@ -1417,55 +1474,6 @@ var JJD = class _JJD extends JJNx {
     }
     super(ref);
   }
-  /**
-   * Finds an element by ID within this Document.
-   *
-   * @example
-   * ```ts
-   * const el = doc.byId('my-id')  // Returns null if not found
-   * const el = doc.byId('my-id', true)  // Throws if not found
-   * ```
-   *
-   * @param id - The ID to search for.
-   * @param required - Whether to throw an error if not found. Defaults to false.
-   * @returns The wrapped element, or null if not found and required is false.
-   * @throws {TypeError} If id is not a string or element not found and required is true.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById | Document.getElementById}
-   */
-  byId(id, required = false) {
-    if (!isStr(id)) {
-      throw typeErr("id", "a string", id);
-    }
-    const el = this.ref.getElementById(id);
-    if (el) {
-      return JJN.wrap(el);
-    }
-    if (required) {
-      throw new TypeError(
-        `Element with id "${id}" not found in the document. Did you mean to call .byId("${id}", false) to return null instead? `
-      );
-    }
-    return null;
-  }
-  /**
-   * Finds elements by class name in the Document.
-   *
-   * @example
-   * ```ts
-   * const items = byClass('list-item')
-   * ```
-   *
-   * @param className - The class name to search for.
-   * @returns An array of wrapped elements.
-   * @throws {TypeError} If className is not a string.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName | Document.getElementsByClassName}
-   */
-  byClass(className) {
-    if (!isStr(className)) {
-      throw typeErr("className", "a string", className);
-    }
-    return JJN.wrapAll(this.ref.getElementsByClassName(className));
-  }
   /**
    * Gets the `<head>` element of the document wrapped in a `JJHE` instance.
    *
@@ -1473,7 +1481,7 @@ var JJD = class _JJD extends JJNx {
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/head | Document.head}
    */
   get head() {
-    return JJN.wrap(this.ref.head);
+    return JJHE.from(this.ref.head);
   }
   /**
    * Gets the `<body>` element of the document wrapped in a `JJHE` instance.
@@ -1482,11 +1490,11 @@ var JJD = class _JJD extends JJNx {
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/body | Document.body}
    */
   get body() {
-    return JJN.wrap(this.ref.body);
+    return JJHE.from(this.ref.body);
   }
 };
 
-// src/JJSE.ts
+// src/wrappers/JJSE.ts
 var SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg";
 var JJSE = class _JJSE extends JJEx {
   /**
@@ -1512,7 +1520,7 @@ var JJSE = class _JJSE extends JJEx {
    *
    * @example
    * ```ts
-   * const circle = JJSE.fromTag('circle')
+   * const circle = JJSE.create('circle')
    * ```
    *
    * @param tagName - The tag name.
@@ -1521,11 +1529,9 @@ var JJSE = class _JJSE extends JJEx {
    * @throws {TypeError} If `tagName` is not a string.
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS | document.createElementNS}
    */
-  static fromTag(tagName, options) {
+  static create(tagName, options) {
     if (!isStr(tagName)) {
-      throw new TypeError(
-        `JJSE.fromTag() expects tagName to be a string (e.g., 'circle', 'path'). Got ${tagName} (${typeof tagName}). Did you mean to pass a string literal like 'circle'?`
-      );
+      throw typeErr("tagName", 'a string like "circle" or "path"', tagName);
     }
     const element = document.createElementNS(SVG_NAMESPACE_URI, tagName, options);
     return new _JJSE(element);
@@ -1538,9 +1544,7 @@ var JJSE = class _JJSE extends JJEx {
    */
   constructor(ref) {
     if (!isA(ref, SVGElement)) {
-      throw new TypeError(
-        `JJSE expects an SVGElement. Got ${ref} (${typeof ref}). Use JJSE.from(element) with an SVG element, or JJSE.fromTag('circle') to create one.`
-      );
+      throw typeErr("ref", "an SVGElement", ref);
     }
     super(ref);
   }
@@ -1584,21 +1588,6 @@ var JJSE = class _JJSE extends JJEx {
     this.ref.textContent = text ?? "";
     return this;
   }
-  /**
-   * Clears the text content of the SVGElement.
-   *
-   * @example
-   * ```ts
-   * svg.empty()
-   * ```
-   *
-   * @returns This instance for chaining.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent | Node.textContent}
-   */
-  empty() {
-    this.ref.textContent = "";
-    return this;
-  }
   /**
    * Sets the fill attribute.
    *
@@ -1694,13 +1683,13 @@ var JJSE = class _JJSE extends JJEx {
   }
 };
 
-// src/JJN-wrap.ts
+// src/wrappers/JJN.ts
 JJN.wrap = function wrap(raw) {
   if (isStr(raw)) {
     return JJT.fromStr(raw);
   }
   if (!isObj(raw)) {
-    throw new TypeError(`Expected an object to wrap. Got ${raw} (${typeof raw})`);
+    throw typeErr("raw", "an object", raw);
   }
   if (isA(raw, JJN)) {
     return raw;
@@ -1729,12 +1718,12 @@ JJN.wrap = function wrap(raw) {
   if (isA(raw, Node)) {
     return JJN.from(raw);
   }
-  throw new TypeError(`Expected a Node to wrap. Got ${raw} (${typeof raw})`);
+  throw typeErr("raw", "a Node", raw);
 };
 
 // src/helpers.ts
 function h(tagName, attributes, ...children) {
-  const ret = JJHE.fromTag(tagName).append(...children);
+  const ret = JJHE.create(tagName).addChild(...children);
   if (attributes) {
     ret.setAttr(attributes);
   }
@@ -1775,7 +1764,7 @@ function createLinkPre(href, rel, as) {
   if (!["fetch", "style", "script"].includes(as)) {
     throw new RangeError(errMsg("as", `'fetch', 'style', or 'script'`, as));
   }
-  return JJHE.fromTag("link").setAttr({
+  return JJHE.create("link").setAttr({
     href,
     rel,
     as
@@ -1788,7 +1777,7 @@ function addLinkPre(...args) {
 }
 async function fetchText(url, mime = "text/*") {
   if (!isStr(mime)) {
-    throw new TypeError(`Expected a string mime like 'text/html' or 'text/css'. Got ${mime} (${typeof mime})`);
+    throw typeErr("mime", "a string", mime);
   }
   const response = await fetch(url, { headers: { Accept: mime } });
   if (!response.ok) {
@@ -1807,8 +1796,35 @@ async function fetchStyle(url) {
 }
 
 // src/components.ts
+function attr2prop(instance, name, oldValue, newValue) {
+  if (!isA(instance, HTMLElement)) {
+    throw typeErr("instance", "an HTMLElement", instance);
+  }
+  if (oldValue !== newValue) {
+    const propName = keb2cam(name);
+    if (hasProp(instance, propName)) {
+      instance[propName] = newValue;
+      return true;
+    }
+  }
+  return false;
+}
+async function registerComponent(name, constructor, options) {
+  if (!isStr(name)) {
+    throw typeErr("name", "a string", name);
+  }
+  if (!isFn(constructor)) {
+    throw typeErr("constructor", "a function", constructor);
+  }
+  if (!customElements.get(name)) {
+    customElements.define(name, constructor, options);
+    await customElements.whenDefined(name);
+  }
+}
+
+// src/ShadowMaster.ts
 async function templatePromise(templateConfig) {
-  if (!isDef(templateConfig)) {
+  if (templateConfig === void 0) {
     return void 0;
   }
   if (isFn(templateConfig)) {
@@ -1818,13 +1834,22 @@ async function templatePromise(templateConfig) {
   if (isStr(templateConfig)) {
     return templateConfig;
   }
+  if (isA(templateConfig, JJDF)) {
+    return templateConfig.ref.cloneNode(true);
+  }
+  if (isA(templateConfig, DocumentFragment)) {
+    return templateConfig.cloneNode(true);
+  }
   if (isA(templateConfig, JJHE)) {
-    return templateConfig.getHTML();
+    if (templateConfig.ref instanceof HTMLTemplateElement) {
+      return templateConfig.ref.content.cloneNode(true);
+    }
+    return templateConfig.ref.outerHTML;
   }
   if (isA(templateConfig, HTMLElement)) {
-    return templateConfig.outerHTML;
+    return templateConfig instanceof HTMLTemplateElement ? templateConfig.content.cloneNode(true) : templateConfig.outerHTML;
   }
-  throw new TypeError(`Expected template to be a string, JJHE, or HTMLElement. Got ${typeof templateConfig}`);
+  throw typeErr("template", "a string, JJHE, JJDF, HTMLElement, or DocumentFragment", templateConfig);
 }
 async function stylePromise(styleConfig) {
   if (isFn(styleConfig)) {
@@ -1837,7 +1862,7 @@ async function stylePromise(styleConfig) {
   if (isStr(styleConfig)) {
     return await cssToStyle(styleConfig);
   }
-  throw new TypeError(`Expected style to be a CSS string or CSSStyleSheet. Got ${typeof styleConfig}`);
+  throw typeErr("style", "a CSS string or CSSStyleSheet", styleConfig);
 }
 function stylePromises(styleConfigs) {
   if (!isArr(styleConfigs)) {
@@ -1849,10 +1874,13 @@ async function resolveConfig(templateConfig, styleConfigs) {
   const [template, ...styles] = await Promise.all([templatePromise(templateConfig), ...stylePromises(styleConfigs)]);
   return { template, styles };
 }
-var ShadowMaster = class _ShadowMaster {
-  #templateConfig = void 0;
-  #stylesConfig = [];
-  #normalizedConfig = void 0;
+var _templateConfig, _stylesConfig, _normalizedConfig;
+var _ShadowMaster = class _ShadowMaster {
+  constructor() {
+    __privateAdd(this, _templateConfig);
+    __privateAdd(this, _stylesConfig, []);
+    __privateAdd(this, _normalizedConfig);
+  }
   /**
    * Creates a new instance of ShadowMaster.
    *
@@ -1861,8 +1889,6 @@ var ShadowMaster = class _ShadowMaster {
   static create() {
     return new _ShadowMaster();
   }
-  constructor() {
-  }
   /**
    * Sets the template configuration.
    *
@@ -1876,7 +1902,7 @@ var ShadowMaster = class _ShadowMaster {
    * ```
    */
   setTemplate(templateConfig) {
-    this.#templateConfig = templateConfig;
+    __privateSet(this, _templateConfig, templateConfig);
     return this;
   }
   /**
@@ -1895,7 +1921,7 @@ var ShadowMaster = class _ShadowMaster {
    * ```
    */
   addStyles(...stylesConfig) {
-    this.#stylesConfig.push(...stylesConfig);
+    __privateGet(this, _stylesConfig).push(...stylesConfig);
     return this;
   }
   /**
@@ -1908,43 +1934,19 @@ var ShadowMaster = class _ShadowMaster {
    * @returns A promise resolving to the ShadowConfig.
    */
   async getResolved() {
-    if (!this.#normalizedConfig) {
-      this.#normalizedConfig = resolveConfig(this.#templateConfig, this.#stylesConfig);
+    if (!__privateGet(this, _normalizedConfig)) {
+      __privateSet(this, _normalizedConfig, resolveConfig(__privateGet(this, _templateConfig), __privateGet(this, _stylesConfig)));
     }
-    return await this.#normalizedConfig;
+    return await __privateGet(this, _normalizedConfig);
   }
 };
-function attr2prop(instance, name, oldValue, newValue) {
-  if (!isA(instance, HTMLElement)) {
-    throw new TypeError(
-      `Expected an HTMLElement or a custom element instance. Got ${instance} (${typeof instance})`
-    );
-  }
-  if (oldValue !== newValue) {
-    const propName = keb2cam(name);
-    if (hasProp(instance, propName)) {
-      instance[propName] = newValue;
-      return true;
-    }
-  }
-  return false;
-}
-async function registerComponent(name, constructor, options) {
-  if (!isStr(name)) {
-    throw typeErr("name", "a string", name);
-  }
-  if (!isFn(constructor)) {
-    throw typeErr("constructor", "a function", constructor);
-  }
-  if (!customElements.get(name)) {
-    customElements.define(name, constructor, options);
-    await customElements.whenDefined(name);
-  }
-}
+_templateConfig = new WeakMap();
+_stylesConfig = new WeakMap();
+_normalizedConfig = new WeakMap();
+var ShadowMaster = _ShadowMaster;
 
 // src/index.ts
 var doc = JJD.from(document);
-var index_default = doc;
 export {
   JJD,
   JJDF,
@@ -1960,7 +1962,7 @@ export {
   attr2prop,
   createLinkPre,
   cssToStyle,
-  index_default as default,
+  doc,
   fetchCss,
   fetchHtml,
   fetchStyle,
@@ -1974,4 +1976,4 @@ export {
   registerComponent,
   sleep
 };
-//# sourceMappingURL=bundle.js.map
+//# sourceMappingURL=bundle.js.map