npm - @tempots/dom - Versions diffs - 24.0.0-next.1 → 24.0.0-next.10 - Mend

@tempots/dom 24.0.0-next.1 → 24.0.0-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/index.js CHANGED Viewed

@@ -1,24 +1,24 @@
-var Pe = Object.defineProperty;
-var Q = (s) => {
+var Ie = Object.defineProperty;
+var te = (s) => {
   throw TypeError(s);
 };
-var Ee = (s, e, t) => e in s ? Pe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var i = (s, e, t) => Ee(s, typeof e != "symbol" ? e + "" : e, t), X = (s, e, t) => e.has(s) || Q("Cannot " + t);
-var A = (s, e, t) => (X(s, e, "read from private field"), t ? t.call(s) : e.get(s)), Y = (s, e, t) => e.has(s) ? Q("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), B = (s, e, t, r) => (X(s, e, "write to private field"), r ? r.call(s, t) : e.set(s, t), t);
-const De = (s, e, t) => s + (e - s) * t;
-const Oe = (s, e, t) => {
+var ke = (s, e, t) => e in s ? Ie(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var o = (s, e, t) => ke(s, typeof e != "symbol" ? e + "" : e, t), se = (s, e, t) => e.has(s) || te("Cannot " + t);
+var O = (s, e, t) => (se(s, e, "read from private field"), t ? t.call(s) : e.get(s)), re = (s, e, t) => e.has(s) ? te("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), Y = (s, e, t, r) => (se(s, e, "write to private field"), r ? r.call(s, t) : e.set(s, t), t);
+const Ne = (s, e, t) => s + (e - s) * t;
+const Re = (s, e, t) => {
   const r = Math.max(s.length, e.length);
   let n = "";
-  for (let o = 0; o < r; o++) {
-    let l = s.charCodeAt(o);
+  for (let i = 0; i < r; i++) {
+    let l = s.charCodeAt(i);
     isNaN(l) && (l = 97);
-    let c = e.charCodeAt(o);
+    let c = e.charCodeAt(i);
     isNaN(c) && (c = 97), n += String.fromCharCode(l + (c - l) * t);
   }
   return n;
-}, Ae = (s, e, t) => new Date(s.getTime() + (e.getTime() - s.getTime()) * t), Me = (s, e) => e, be = (s) => typeof s == "number" ? De : typeof s == "string" ? Oe : s instanceof Date ? Ae : Me;
-var w;
-class M {
+}, je = (s, e, t) => new Date(s.getTime() + (e.getTime() - s.getTime()) * t), qe = (s, e) => e, Ve = (s) => typeof s == "number" ? Ne : typeof s == "string" ? Re : s instanceof Date ? je : qe;
+var b;
+class D {
   /**
    * Creates a new instance of `ElementPosition`.
    * @param index - The index of the element.
@@ -28,25 +28,25 @@ class M {
     /**
      * The counter of the element starting from 1.
      */
-    i(this, "counter");
+    o(this, "counter");
     /**
      * Checks if the element is the first element in the collection.
      * @returns `true` if the element is the first element, `false` otherwise.
      */
-    i(this, "isFirst");
+    o(this, "isFirst");
     /**
      * Checks if the counter of the element is even.
      * @returns `true` if the counter is even, `false` otherwise.
      */
-    i(this, "isEven");
+    o(this, "isEven");
     /**
      * Checks if the counter of the element is odd.
      * @returns `true` if the counter is odd, `false` otherwise.
      */
-    i(this, "isOdd");
-    Y(this, w);
-    i(this, "dispose", () => {
-      A(this, w) != null && (A(this, w).dispose(), B(this, w, void 0));
+    o(this, "isOdd");
+    re(this, b);
+    o(this, "dispose", () => {
+      O(this, b) != null && (O(this, b).dispose(), Y(this, b, void 0));
     });
     this.index = e, this.total = t, this.counter = e + 1, this.isFirst = e === 0, this.isEven = e % 2 === 1, this.isOdd = e % 2 === 0;
   }
@@ -55,11 +55,11 @@ class M {
    * @returns `true` if the element is the last element, `false` otherwise.
    */
   get isLast() {
-    return A(this, w) == null && B(this, w, this.total.map((e) => this.counter === e)), A(this, w);
+    return O(this, b) == null && Y(this, b, this.total.map((e) => this.counter === e)), O(this, b);
   }
 }
-w = new WeakMap();
-const b = class b {
+b = new WeakMap();
+const M = class M {
   /**
    * Represents a signal with a value of type T.
    *
@@ -71,71 +71,83 @@ const b = class b {
     /**
      * @internal
      */
-    i(this, "$__signal__", !0);
+    o(this, "$__signal__", !0);
     /**
      * @internal
      */
-    i(this, "_value");
+    o(this, "_value");
     /**
      * @internal
      */
-    i(this, "_derivatives", []);
+    o(this, "_derivatives", []);
     /**
      * @internal
      */
-    i(this, "_onValueListeners", []);
+    o(this, "_onValueListeners", []);
     /**
      * @internal
      */
-    i(this, "_onDisposeListeners", []);
+    o(this, "_onDisposeListeners", []);
     /**
      * Gets the current value of the signal.
      * @returns The current value of the signal.
      */
-    i(this, "get", () => this._value);
+    o(this, "get", () => this._value);
     /**
      * Checks if the signal has any registered listeners.
      * @returns `true` if the signal has listeners, `false` otherwise.
      */
-    i(this, "hasListeners", () => this._onValueListeners.length > 0);
+    o(this, "hasListeners", () => this._onValueListeners.length > 0);
     /**
      * Registers a listener function to be called whenever the value of the signal changes.
      * The listener function will be immediately called with the current value of the signal.
      * Returns a function that can be called to unregister the listener.
      *
      * @param listener - The listener function to be called when the value of the signal changes.
-     */
-    i(this, "on", (e) => (e(this.get()), this._onValueListeners.push(e), () => {
-      this._onValueListeners.splice(this._onValueListeners.indexOf(e), 1);
-    }));
+     * @param options - Options for the listener.
+     */
+    o(this, "on", (e, t = {}) => {
+      t.skipInitial || e(this.get());
+      const r = t.once ? (i) => {
+        n(), e(i);
+      } : e;
+      this._onValueListeners.push(r);
+      const n = () => {
+        this._onValueListeners.splice(
+          this._onValueListeners.indexOf(r),
+          1
+        ), t.abortSignal != null && t.abortSignal.removeEventListener("abort", n);
+      };
+      return t.abortSignal != null && t.abortSignal.addEventListener("abort", n), n;
+    });
     /**
      * @internal
      */
-    i(this, "_setAndNotify", (e, t) => {
+    o(this, "_setAndNotify", (e, t) => {
       const r = this.equals(this._value, e);
       r || (this._value = e), (t || !r) && this._onValueListeners.forEach((n) => n(e));
     });
     /**
      * @internal
      */
-    i(this, "_disposed", !1);
+    o(this, "_disposed", !1);
     /**
      * Checks whether the signal is disposed.
      * @returns True if the signal is disposed, false otherwise.
      */
-    i(this, "isDisposed", () => this._disposed);
+    o(this, "isDisposed", () => this._disposed);
     /**
      * Adds a listener function to be called when the object is disposed.
      * @param listener - The listener function to be called when the object is disposed.
      * @returns A function that can be called to remove the listener.
      */
-    i(this, "onDispose", (e) => {
+    o(this, "onDispose", (e) => {
       this._onDisposeListeners.push(e);
     });
     /**
      * Disposes the signal, releasing any resources associated with it.
      */
-    i(this, "dispose", () => {
+    o(this, "dispose", () => {
       this._disposed || (this._disposed = !0, this._onDisposeListeners.forEach((e) => e()), this._onDisposeListeners.length = 0, this._derivatives.length = 0);
     });
     /**
@@ -147,8 +159,8 @@ const b = class b {
      * @param equals - Optional equality function to determine if two mapped values are equal.
      * @returns - A new Computed instance with the mapped value.
      */
-    i(this, "map", (e, t = (r, n) => r === n) => {
-      const r = new T(() => {
+    o(this, "map", (e, t = (r, n) => r === n) => {
+      const r = new C(() => {
         try {
           return e(this.get());
         } catch (n) {
@@ -167,8 +179,8 @@ const b = class b {
      *               Defaults to a strict equality check (===).
      * @returns A new Signal that emits the values of the resulting Signal.
      */
-    i(this, "flatMap", (e, t = (r, n) => r === n) => {
-      const r = new T(() => {
+    o(this, "flatMap", (e, t = (r, n) => r === n) => {
+      const r = new C(() => {
         try {
           return e(this.get()).get();
         } catch (n) {
@@ -183,26 +195,26 @@ const b = class b {
      * @param fn - The callback function to be invoked with the current value of the signal.
      * @returns A new signal that emits the same value as the original signal and invokes the callback function.
      */
-    i(this, "tap", (e) => this.map((t) => (e(t), t)));
+    o(this, "tap", (e) => this.map((t) => (e(t), t)));
     /**
      * Returns a new Signal that emits the value at the specified key of the current value.
      *
      * @param key - The key of the value to retrieve.
      * @returns A new Signal that emits the value at the specified key.
      */
-    i(this, "at", (e) => this.map((t) => t[e]));
+    o(this, "at", (e) => this.map((t) => t[e]));
     /**
      * @internal
      */
-    i(this, "_$");
-    i(this, "filter", (e, t) => {
+    o(this, "_$");
+    o(this, "filter", (e, t) => {
       let r = t ?? this.get();
-      const n = new T(() => {
+      const n = new C(() => {
         try {
-          const o = this.get();
-          return r = e(o) ? o : r;
-        } catch (o) {
-          throw console.error("Error in Signal.filter:", o), o;
+          const i = this.get();
+          return r = e(i) ? i : r;
+        } catch (i) {
+          throw console.error("Error in Signal.filter:", i), i;
         }
       }, this.equals);
       return this.setDerivative(n), n;
@@ -217,9 +229,9 @@ const b = class b {
      * @param equals - Optional equality function to determine if two values are equal.
      * @returns - A new Computed object with the mapped and filtered values.
      */
-    i(this, "filterMap", (e, t, r = (n, o) => n === o) => {
+    o(this, "filterMap", (e, t, r = (n, i) => n === i) => {
       let n = t;
-      const o = new T(() => {
+      const i = new C(() => {
         try {
           const l = this.get(), c = e(l);
           return n = c ?? n;
@@ -227,7 +239,7 @@ const b = class b {
           throw console.error("Error in Signal.filterMap:", l), l;
         }
       }, r);
-      return this.setDerivative(o), o;
+      return this.setDerivative(i), i;
     });
     /**
      * Maps the values emitted by the signal to a new value asynchronously using the provided function.
@@ -242,25 +254,25 @@ const b = class b {
      * @param equals - The equality function to compare the mapped values for equality.
      * @returns A property that holds the mapped value and can be observed for changes.
      */
-    i(this, "mapAsync", (e, t, r, n = (o, l) => o === l) => {
-      const o = H(t, n);
+    o(this, "mapAsync", (e, t, r, n = (i, l) => i === l) => {
+      const i = N(t, n);
       let l = 0, c = new AbortController();
-      return o.onDispose(
+      return i.onDispose(
         this.on(async (a) => {
-          const f = ++l;
+          const u = ++l;
           c.abort(), c = new AbortController();
           try {
             const h = await e(a, { abortSignal: c.signal });
-            f === l && o.set(h);
+            u === l && i.set(h);
           } catch (h) {
-            if (f === l)
+            if (u === l)
               if (r != null)
-                o.set(r(h));
+                i.set(r(h));
               else
                 throw h;
           }
         })
-      ), o;
+      ), i;
     });
     /**
      * Maps the values of the signal using the provided function `fn`, and returns a new signal
@@ -272,14 +284,14 @@ const b = class b {
      * @param alt - The alternative value to use when the mapped value is `undefined` or `null`.
      * @returns A new signal containing the mapped values.
      */
-    i(this, "mapMaybe", (e, t) => this.map((r) => e(r) ?? t));
+    o(this, "mapMaybe", (e, t) => this.map((r) => e(r) ?? t));
     /**
      * Feeds a property into the signal and sets up disposal behavior.
      * @param prop - The property to feed into the signal.
      * @param autoDisposeProp - Determines whether the property should be automatically disposed when the signal is disposed.
      * @returns The input property.
      */
-    i(this, "feedProp", (e, t = !1) => {
+    o(this, "feedProp", (e, t = !1) => {
       const r = this.on(e.set);
       return e.onDispose(r), t ? this.onDispose(e.dispose) : this.onDispose(r), e;
     });
@@ -288,12 +300,12 @@ const b = class b {
      * @param autoDisposeProp - Determines whether the derived property should be automatically disposed.
      * @returns The derived property.
      */
-    i(this, "deriveProp", (e = !0) => this.feedProp(H(this.get()), e));
+    o(this, "deriveProp", (e = !0) => this.feedProp(N(this.get()), e));
     /**
      * Returns a signal that emits the count of values received so far.
      * @returns A signal that emits the count of values received so far.
      */
-    i(this, "count", () => {
+    o(this, "count", () => {
       let e = 0;
       return this.map(() => ++e);
     });
@@ -303,7 +315,7 @@ const b = class b {
      * Additionally, when the computed value is disposed, it sets the signal as dirty.
      * @param computed - The computed value to add as a derivative.
      */
-    i(this, "setDerivative", (e) => {
+    o(this, "setDerivative", (e) => {
       this._derivatives.push(e), e.onDispose(() => {
         this._derivatives.splice(
           this._derivatives.indexOf(e),
@@ -340,27 +352,27 @@ const b = class b {
  * @param equals - A function to compare two values of type O for equality. Defaults to strict equality (===).
  * @returns - A Signal that represents the result of the Promise.
  */
-i(b, "ofPromise", (e, t, r, n = (o, l) => o === l) => {
-  const o = new b(t, n);
-  return e.then((l) => o._setAndNotify(l, !1)).catch((l) => {
-    r != null ? o._setAndNotify(r(l), !1) : console.error(
+o(M, "ofPromise", (e, t, r, n = (i, l) => i === l) => {
+  const i = new M(t, n);
+  return e.then((l) => i._setAndNotify(l, !1)).catch((l) => {
+    r != null ? i._setAndNotify(r(l), !1) : console.error(
       "Unhandled promise rejection in Signal.ofPromise:",
       l
     );
-  }), o;
+  }), i;
 }), /**
  * Checks if a value is a Signal.
  *
  * @param value - The value to check.
  * @returns `true` if the value is a Signal, `false` otherwise.
  */
-i(b, "is", (e) => (
+o(M, "is", (e) => (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   e != null && e.$__signal__ === !0
 ));
-let d = b;
-const ke = typeof queueMicrotask == "function" ? queueMicrotask : (s) => Promise.resolve().then(s);
-class T extends d {
+let d = M;
+const Be = typeof queueMicrotask == "function" ? queueMicrotask : (s) => Promise.resolve().then(s);
+class C extends d {
   /**
    * Represents a Signal object.
    * @param _fn - The function that returns the value of the signal.
@@ -371,36 +383,36 @@ class T extends d {
     /**
      * @internal
      */
-    i(this, "$__computed__", !0);
+    o(this, "$__computed__", !0);
     /**
      * @internal
      */
-    i(this, "_isDirty", !1);
+    o(this, "_isDirty", !1);
     /**
      * Marks the signal as dirty, indicating that its value has changed and needs to be recalculated.
      * If the signal is already dirty or disposed, this method does nothing.
      * It also marks all dependent signals as dirty and schedules a notification to update their values.
      */
-    i(this, "setDirty", () => {
+    o(this, "setDirty", () => {
       this._isDirty || this._disposed || (this._isDirty = !0, this._derivatives.forEach((t) => t.setDirty()), this._scheduleNotify());
     });
     /**
      * @internal
      */
-    i(this, "_scheduleCount", 0);
+    o(this, "_scheduleCount", 0);
     /**
      * Schedules a notification to be executed asynchronously.
      * If the signal is dirty, it will be updated and notified.
      * @internal
      */
-    i(this, "_scheduleNotify", () => {
+    o(this, "_scheduleNotify", () => {
       const t = ++this._scheduleCount;
-      ke(() => {
+      Be(() => {
         this._scheduleCount !== t || this._disposed !== !1 || this._isDirty && (this._isDirty = !1, this._setAndNotify(this._fn(), !1));
       });
     });
     /** {@inheritDoc Signal.get} */
-    i(this, "get", () => (this._isDirty && (this._isDirty = !1, this._value = this._fn(), this._setAndNotify(this._value, !0)), this._value));
+    o(this, "get", () => (this._isDirty && (this._isDirty = !1, this._value = this._fn(), this._setAndNotify(this._value, !0)), this._value));
     this._fn = t, this.setDirty();
   }
   /**
@@ -417,26 +429,26 @@ class T extends d {
     return this.get();
   }
 }
-const I = class I extends d {
+const W = class W extends d {
   constructor() {
     super(...arguments);
     /**
      * @internal
      */
-    i(this, "$__prop__", !0);
+    o(this, "$__prop__", !0);
     /**
      * Changes the value of the property and notifies its listeners.
      *
      * @param value - The new value of the property.
      */
-    i(this, "set", (t) => {
+    o(this, "set", (t) => {
       this._setAndNotify(t, !1);
     });
     /**
      * Updates the value of the signal by applying the provided function to the current value.
      * @param fn - The function to apply to the current value.
      */
-    i(this, "update", (t) => {
+    o(this, "update", (t) => {
       this._setAndNotify(t(this.get()), !1);
     });
     /**
@@ -445,16 +457,16 @@ const I = class I extends d {
      * @param effects - An array of effects to be executed after the state is updated.
      * @returns A dispatch function that can be used to update the state and trigger the effects.
      */
-    i(this, "reducer", (t, ...r) => {
+    o(this, "reducer", (t, ...r) => {
       const n = this;
-      return function o(l) {
+      return function i(l) {
         const c = n.value;
         n.update((a) => t(a, l)), !n.equals(c, n.value) && r.forEach(
           (a) => a({
             previousState: c,
             state: n.value,
             action: l,
-            dispatch: o
+            dispatch: i
           })
         );
       };
@@ -470,9 +482,9 @@ const I = class I extends d {
      *                Defaults to a strict equality check (===).
      * @returns A Prop object representing the isomorphism.
      */
-    i(this, "iso", (t, r, n = (o, l) => o === l) => {
-      const o = new I(t(this.get()), n);
-      return o.onDispose(this.on((l) => o.set(t(l)))), o.on((l) => this._setAndNotify(r(l), !1)), o;
+    o(this, "iso", (t, r, n = (i, l) => i === l) => {
+      const i = new W(t(this.get()), n);
+      return i.onDispose(this.on((l) => i.set(t(l)))), i.on((l) => this._setAndNotify(r(l), !1)), i;
     });
     /**
      * Returns a `Prop` that represents the value at the specified key of the current value.
@@ -480,7 +492,7 @@ const I = class I extends d {
      * @param key - The key of the value to access.
      * @returns A `Prop` that represents the value at the specified key.
      */
-    i(this, "atProp", (t) => this.iso(
+    o(this, "atProp", (t) => this.iso(
       (r) => r[t],
       (r) => ({ ...this.value, [t]: r })
     ));
@@ -500,15 +512,29 @@ const I = class I extends d {
  * @param value - The value to check.
  * @returns `true` if the value is a Prop, `false` otherwise.
  */
-i(I, "is", (t) => (
+o(W, "is", (t) => (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   t != null && t.$__prop__ === !0
 ));
-let N = I;
-const W = (s, e, t = (r, n) => r === n) => {
-  const r = new T(s, t);
+let k = W;
+const Q = (s, e, t = (r, n) => r === n) => {
+  const r = new C(s, t);
   return e.forEach((n) => n.setDerivative(r)), r;
-}, Le = (s, e) => W(s, e).dispose, H = (s, e = (t, r) => t === r) => new N(s, e), V = (s, e = (t, r) => t === r) => new d(s, e), K = () => typeof window < "u" ? window : void 0, p = {
+}, Fe = (s, e, t = {}) => {
+  let r = t.once ? () => {
+    i(), s();
+  } : s;
+  if (t.skipInitial) {
+    let l = !1;
+    r = () => {
+      l || (l = !0, r());
+    };
+  }
+  const n = Q(r, e), i = () => {
+    n.dispose(), t.abortSignal != null && t.abortSignal.removeEventListener("abort", i);
+  };
+  return t.abortSignal != null && t.abortSignal.addEventListener("abort", i), i;
+}, N = (s, e = (t, r) => t === r) => new k(s, e), J = (s, e = (t, r) => t === r) => new d(s, e), ie = () => typeof window < "u" ? window : void 0, p = {
   /**
    * Maps a value or a Signal to a new value.
    * If the value is a Signal, it returns a new Signal with the mapped value.
@@ -531,7 +557,7 @@ const W = (s, e, t = (r, n) => r === n) => {
    * @param equals - A function that determines if two values are equal. Defaults to strict equality (===).
    * @returns A Signal instance.
    */
-  toSignal: (s, e) => d.is(s) ? s : V(s, e),
+  toSignal: (s, e) => d.is(s) ? s : J(s, e),
   /**
    * Wraps a value in a `Signal` if it is not already a `Signal`.
    * If the value is `null` or `undefined`, it returns `null` or `undefined` respectively.
@@ -565,106 +591,110 @@ const W = (s, e, t = (r, n) => r === n) => {
   dispose: (s) => {
     d.is(s) && s.dispose();
   }
-}, at = (...s) => (e, t) => {
+}, It = (...s) => (e, t) => {
   const r = s.filter((n) => d.is(n));
-  return W(
+  return Q(
     () => e(...s.map((n) => p.get(n))),
     r,
     t
   );
-}, ut = (...s) => (e) => {
-  const t = s.filter((r) => d.is(r));
-  Le(() => e(...s.map(p.get)), t);
+}, kt = (...s) => (e, t = {}) => {
+  const r = s.filter((n) => d.is(n));
+  return Fe(
+    () => e(...s.map(p.get)),
+    r,
+    t
+  );
 };
-class ee {
+class oe {
   constructor() {
-    i(this, "_store", /* @__PURE__ */ new Map());
+    o(this, "_store", /* @__PURE__ */ new Map());
     /**
      * Retrieves the value associated with the specified key from the memory store.
      * @param key - The key to retrieve the value for.
      * @returns The value associated with the key, or `null` if the key is not found.
      */
-    i(this, "getItem", (e) => this._store.get(e) ?? null);
+    o(this, "getItem", (e) => this._store.get(e) ?? null);
     /**
      * Sets the value associated with the specified key in the memory store.
      * @param key - The key to set the value for.
      * @param value - The value to set.
      */
-    i(this, "setItem", (e, t) => {
+    o(this, "setItem", (e, t) => {
       this._store.set(e, t);
     });
   }
 }
-const te = ({
+const le = ({
   key: s,
   defaultValue: e,
   store: t,
   serialize: r = JSON.stringify,
   deserialize: n = JSON.parse,
-  equals: o = (c, a) => c === a,
+  equals: i = (c, a) => c === a,
   onLoad: l = (c) => c
 }) => {
-  const c = t.getItem(s), a = new N(
+  const c = t.getItem(s), a = new k(
     c != null ? l(n(c)) : typeof e == "function" ? e() : e,
-    o
+    i
   );
-  return a.on((f) => {
-    t.setItem(s, r(f));
+  return a.on((u) => {
+    t.setItem(s, r(u));
   }), a;
-}, ht = (s) => {
+}, Nt = (s) => {
   var e;
-  return te({
+  return le({
     ...s,
-    store: ((e = K()) == null ? void 0 : e.localStorage) ?? new ee()
+    store: ((e = ie()) == null ? void 0 : e.localStorage) ?? new oe()
   });
-}, ft = (s) => {
+}, Rt = (s) => {
   var e;
-  return te({
+  return le({
     ...s,
-    store: ((e = K()) == null ? void 0 : e.sessionStorage) ?? new ee()
+    store: ((e = ie()) == null ? void 0 : e.sessionStorage) ?? new oe()
   });
 };
-function Z(s) {
+function ne(s) {
   return typeof requestAnimationFrame == "function" ? requestAnimationFrame(s) : setTimeout(s, 0);
 }
-const $e = (s, e, t, r) => {
-  const n = (r == null ? void 0 : r.duration) ?? 300, o = (r == null ? void 0 : r.easing) ?? ((y) => y), l = (r == null ? void 0 : r.equals) ?? ((y, $) => y === $);
-  let c = r == null ? void 0 : r.interpolate, a = s, f = e(), h = performance.now(), S = null, O = !0;
-  const q = new T(e, l), C = H(s, l);
-  C.onDispose(() => {
-    S !== null && cancelAnimationFrame(S);
-  }), C.onDispose(q.dispose), t.forEach((y) => {
-    y.setDerivative(q), y.onDispose(C.dispose);
+const Ue = (s, e, t, r) => {
+  const n = (r == null ? void 0 : r.duration) ?? 300, i = (r == null ? void 0 : r.easing) ?? ((T) => T), l = (r == null ? void 0 : r.equals) ?? ((T, I) => T === I);
+  let c = r == null ? void 0 : r.interpolate, a = s, u = e(), h = performance.now(), m = null, w = !0;
+  const X = new C(e, l), A = N(s, l);
+  A.onDispose(() => {
+    m !== null && cancelAnimationFrame(m);
+  }), A.onDispose(X.dispose), t.forEach((T) => {
+    T.setDerivative(X), T.onDispose(A.dispose);
   });
-  const xe = (y) => {
-    f = y, h = performance.now(), a = C.value, O && (O = !1, S = Z(G));
-  }, G = () => {
-    const $ = (performance.now() - h) / p.get(n), Te = o($);
-    c == null && (c = be(a));
-    let J = c(a, f, Te);
-    $ >= 1 ? (O = !0, J = f) : S = Z(G), C.set(J);
+  const He = (T) => {
+    u = T, h = performance.now(), a = A.value, w && (w = !1, m = ne(K));
+  }, K = () => {
+    const I = (performance.now() - h) / p.get(n), $e = i(I);
+    c == null && (c = Ve(a));
+    let ee = c(a, u, $e);
+    I >= 1 ? (w = !0, ee = u) : m = ne(K), A.set(ee);
   };
-  return q.on(xe), C;
-}, dt = (s, e) => {
+  return X.on(He), A;
+}, jt = (s, e) => {
   const { initialValue: t, ...r } = e ?? {};
-  return $e(
+  return Ue(
     t ?? s.get(),
     s.get,
     [s],
     r
   );
-}, pt = (s, e) => {
+}, qt = (s, e) => {
   const { signals: t, literals: r } = Object.entries(s).reduce(
-    ({ signals: o, literals: l }, [c, a]) => (d.is(a) ? o.push([c, a]) : l[c] = a, { signals: o, literals: l }),
+    ({ signals: i, literals: l }, [c, a]) => (d.is(a) ? i.push([c, a]) : l[c] = a, { signals: i, literals: l }),
     { signals: [], literals: {} }
-  ), n = t.map(([, o]) => o);
-  return W(() => (t.forEach(([o, l]) => r[o] = l.value), e(r)), n);
-}, se = /* @__PURE__ */ new Set(["checked", "disabled", "hidden", "selected"]), re = /* @__PURE__ */ new Set([
+  ), n = t.map(([, i]) => i);
+  return Q(() => (t.forEach(([i, l]) => r[i] = l.value), e(r)), n);
+}, ce = /* @__PURE__ */ new Set(["checked", "disabled", "hidden", "selected"]), ae = /* @__PURE__ */ new Set([
   "rowSpan",
   "colSpan",
   "tabIndex",
   "valueAsNumber"
-]), ne = /* @__PURE__ */ new Set(["valueAsDate"]), ie = /* @__PURE__ */ new Set([
+]), ue = /* @__PURE__ */ new Set(["valueAsDate"]), he = /* @__PURE__ */ new Set([
   "value",
   "textContent",
   "innerText",
@@ -672,21 +702,21 @@ const $e = (s, e, t, r) => {
   "outerHTML",
   "className",
   "classList"
-]), Ne = (s, e) => se.has(s) ? (t) => {
+]), We = (s, e) => ce.has(s) ? (t) => {
   t == null ? e[s] = null : e[s] = !!t;
-} : re.has(s) ? (t) => {
+} : ae.has(s) ? (t) => {
   t == null ? e[s] = null : e[s] = Number(t);
-} : ne.has(s) ? (t) => {
+} : ue.has(s) ? (t) => {
   t == null ? e[s] = null : e[s] = t;
-} : ie.has(s) ? (t) => {
+} : he.has(s) ? (t) => {
   t == null ? e[s] = null : e[s] = String(t);
 } : (t) => {
   t == null ? e.removeAttribute(s) : e.setAttribute(s, t);
-}, He = (s, e) => se.has(s) ? () => !!e[s] : re.has(s) ? () => Number(e[s]) : ne.has(s) ? () => e[s] : ie.has(s) ? () => String(e[s]) : () => e.getAttribute(s), F = (s) => {
+}, Je = (s, e) => ce.has(s) ? () => !!e[s] : ae.has(s) ? () => Number(e[s]) : ue.has(s) ? () => e[s] : he.has(s) ? () => String(e[s]) : () => e.getAttribute(s), R = (s) => {
   const e = s;
   e && e.onblur && (e.onblur = null), !(!s || s.ownerDocument === void 0) && s.parentElement && s.parentElement.removeChild(s);
-}, Ie = (s) => oe(s) ? s : s.parentElement, oe = (s) => s.nodeType === 1;
-class le extends Error {
+}, Ge = (s) => fe(s) ? s : s.parentElement, fe = (s) => s.nodeType === 1;
+class de extends Error {
   constructor(e) {
     super(`Provider not found: ${e.description}`);
   }
@@ -709,7 +739,7 @@ class P {
      * @param namespace - The namespace URI to create the element in, or `undefined` to create a standard HTML element.
      * @returns The newly created element.
      */
-    i(this, "createElement", (e, t) => t !== void 0 ? this.document.createElementNS(t, e) : this.document.createElement(e));
+    o(this, "createElement", (e, t) => t !== void 0 ? this.document.createElementNS(t, e) : this.document.createElement(e));
     /**
      * Creates a new DOM element (eg: HTML or SVG) with the specified tag name and namespace and appends it to the current element.
      *
@@ -717,7 +747,7 @@ class P {
      * @param namespace - The namespace URI to create the element in, or `undefined` to create a standard HTML element.
      * @returns The newly created element.
      */
-    i(this, "makeChildElement", (e, t) => {
+    o(this, "makeChildElement", (e, t) => {
       const r = this.createElement(e, t);
       return this.appendOrInsert(r), this.withElement(r);
     });
@@ -726,13 +756,13 @@ class P {
      * @param text - The text content for the new text node.
      * @returns A new `Text` node with the specified text content.
      */
-    i(this, "createText", (e) => this.document.createTextNode(e));
+    o(this, "createText", (e) => this.document.createTextNode(e));
     /**
      * Creates a new text node with the specified text content and appends it to the current element.
      * @param text - The text content for the new text node.
      * @returns A new `DOMContext` with a reference to the new text node.
      */
-    i(this, "makeChildText", (e) => {
+    o(this, "makeChildText", (e) => {
       const t = this.createText(e);
       return this.appendOrInsert(t), this.withReference(t);
     });
@@ -740,14 +770,14 @@ class P {
      * Sets the text content of the current element.
      * @param text - The text content to set.
      */
-    i(this, "setText", (e) => {
+    o(this, "setText", (e) => {
       this.reference.nodeValue = e;
     });
     /**
      * Gets the text content of the current element or text node.
      * @returns The text content of the current element or text node.
      */
-    i(this, "getText", () => {
+    o(this, "getText", () => {
       var e;
       return ((e = this.reference) == null ? void 0 : e.nodeValue) ?? this.element.textContent ?? "";
     });
@@ -756,7 +786,7 @@ class P {
      * The text node is appended or inserted to the current `DOMContext`.
      * The new `DOMContext` with the reference is returned.
      */
-    i(this, "makeRef", () => {
+    o(this, "makeRef", () => {
       const e = this.createText("");
       return this.appendOrInsert(e), this.withReference(e);
     });
@@ -765,7 +795,7 @@ class P {
      *
      * @param child - The child node to append or insert.
      */
-    i(this, "appendOrInsert", (e) => {
+    o(this, "appendOrInsert", (e) => {
       this.reference === void 0 ? this.element.appendChild(e) : this.element.insertBefore(e, this.reference);
     });
     /**
@@ -773,13 +803,13 @@ class P {
      * @param element - The DOM element to use in the new `DOMContext` instance.
      * @returns A new `DOMContext` instance with the provided `element`.
      */
-    i(this, "withElement", (e) => new P(this.document, e, void 0, this.providers));
+    o(this, "withElement", (e) => new P(this.document, e, void 0, this.providers));
     /**
      * Creates a new `DOMContext` instance with a reference to a DOM element selected by the provided `selector`.
      * @param selector - The CSS selector for the target DOM element.
      * @returns A new `DOMContext` instance with a reference to the selected DOM element.
      */
-    i(this, "makePortal", (e) => {
+    o(this, "makePortal", (e) => {
       const t = this.document.querySelector(e);
       if (t == null)
         throw new Error(`Cannot find element by selector for portal: ${e}`);
@@ -791,7 +821,7 @@ class P {
      * @param reference - The optional `Text` node to use as the reference for the new `DOMContext`.
      * @returns A new `DOMContext` instance with the specified reference.
      */
-    i(this, "withReference", (e) => new P(this.document, this.element, e, this.providers));
+    o(this, "withReference", (e) => new P(this.document, this.element, e, this.providers));
     /**
      * Returns a new HTMLDOMContext instance with the specified providers merged into
      * the existing providers.
@@ -799,7 +829,7 @@ class P {
      * @param providers - An object containing the providers to be merged into the existing providers.
      * @returns A new HTMLDOMContext instance with the merged providers.
      */
-    i(this, "withProviders", (e) => new P(this.document, this.element, this.reference, {
+    o(this, "withProviders", (e) => new P(this.document, this.element, this.reference, {
       ...this.providers,
       ...e
     }));
@@ -810,58 +840,63 @@ class P {
      * @returns The provider for the given mark.
      * @throws Throws `ProviderNotFoundError` if the provider for the given mark is not found.
      */
-    i(this, "getProvider", (e) => {
+    o(this, "getProvider", (e) => {
       if (this.providers[e] === void 0)
-        throw new le(e);
+        throw new de(e);
       return this.providers[e];
     });
-    i(this, "clear", (e) => {
-      e && (this.reference !== void 0 ? F(this.reference) : F(this.element));
+    o(this, "clear", (e) => {
+      e && (this.reference !== void 0 ? R(this.reference) : R(this.element));
     });
     /**
      * Adds classes to the element.
      * @param tokens - The class names to add.
      */
-    i(this, "addClasses", (e) => {
+    o(this, "addClasses", (e) => {
       this.element.classList.add(...e);
     });
     /**
      * Removes classes from the element.
      * @param tokens - The class names to remove.
      */
-    i(this, "removeClasses", (e) => {
+    o(this, "removeClasses", (e) => {
       this.element.classList.remove(...e);
     });
     /**
      * Gets the classes of the element.
      * @returns The classes of the element.
      */
-    i(this, "getClasses", () => Array.from(this.element.classList));
+    o(this, "getClasses", () => Array.from(this.element.classList));
     /**
      * Adds an event listener to the element.
      * @param event - The event to listen for.
      * @param listener - The listener to call when the event occurs.
+     * @param options - The options for the event listener.
      * @returns A function to remove the event listener.
      */
-    i(this, "on", (e, t) => (this.element.addEventListener(e, t), (r) => {
-      r && this.element.removeEventListener(e, t);
+    o(this, "on", (e, t, r) => (this.element.addEventListener(e, t, r), (n) => {
+      n && this.element.removeEventListener(
+        e,
+        t,
+        r
+      );
     }));
     /**
      * Returns `true` if the context is a browser DOM context.
      * @returns `true` if the context is a browser DOM context.
      */
-    i(this, "isBrowserDOM", () => !0);
+    o(this, "isBrowserDOM", () => !0);
     /**
      * Returns `true` if the context is a headless DOM context.
      * @returns `true` if the context is a headless DOM context.
      */
-    i(this, "isHeadlessDOM", () => !1);
+    o(this, "isHeadlessDOM", () => !1);
     /**
      * Sets the style of the element.
      * @param name - The name of the style to set.
      * @param value - The value of the style to set.
      */
-    i(this, "setStyle", (e, t) => {
+    o(this, "setStyle", (e, t) => {
       this.element.style.setProperty(e, t);
     });
     /**
@@ -869,10 +904,10 @@ class P {
      * @param name - The name of the style to get.
      * @returns The value of the style.
      */
-    i(this, "getStyle", (e) => this.element.style.getPropertyValue(e));
-    i(this, "makeAccessors", (e) => ({
-      get: He(e, this.element),
-      set: Ne(e, this.element)
+    o(this, "getStyle", (e) => this.element.style.getPropertyValue(e));
+    o(this, "makeAccessors", (e) => ({
+      get: Je(e, this.element),
+      set: We(e, this.element)
     }));
     this.document = e, this.element = t, this.reference = r, this.providers = n;
   }
@@ -887,41 +922,267 @@ class P {
     return new P(e.ownerDocument, e, t, {});
   }
 }
-const g = Symbol("class"), _ = Symbol("style"), x = Symbol("handler"), ce = () => Math.random().toString(36).substring(2, 15), Ve = (s) => s.replace(/<[^>]*>?/g, "");
-class ae {
+const Z = (s, e) => {
+  const t = s(e);
+  return () => t(!0);
+}, Vt = (s, e, { doc: t, clear: r } = {}) => {
+  const n = typeof e == "string" ? (t ?? document).querySelector(e) : e;
+  if (n === null)
+    throw new ze(
+      `Cannot find element by selector for render: ${e}`
+    );
+  r !== !1 && (t ?? n.ownerDocument) != null && n.nodeType === 1 && (n.innerHTML = "");
+  const i = Ge(n), l = fe(n) ? void 0 : n, c = P.of(i, l);
+  return Z(s, c);
+}, Bt = (s, {
+  startUrl: e = "https://example.com",
+  selector: t = ":root"
+} = {}) => {
+  const r = p.toSignal(e).deriveProp(), n = new Te(t, void 0), i = new x(n, void 0, { currentURL: r }, {});
+  return {
+    clear: Z(s(), i),
+    root: n,
+    currentURL: r
+  };
+};
+class ze extends Error {
   constructor(e) {
-    i(this, "id", ce());
-    i(this, "properties", {});
-    i(this, "children", []);
-    i(this, "isElement", () => !0);
-    i(this, "isText", () => !1);
-    i(this, "getText", () => this.properties.innerText != null ? this.properties.innerText : this.properties.innerHTML != null ? Ve(this.properties.innerHTML) : this.children.map((e) => e.getText()).join(""));
-    i(this, "removeChild", (e) => {
+    super(e);
+  }
+}
+const pe = "data-tts-node", j = "data-tts-class", q = "data-tts-style", V = "data-tts-html", B = "data-tts-text", F = "data-tts-attrs";
+class Ft {
+  constructor({
+    select: e,
+    getAttribute: t,
+    setAttribute: r,
+    getClass: n,
+    setClass: i,
+    getStyles: l,
+    setStyles: c,
+    appendHTML: a,
+    getInnerHTML: u,
+    setInnerHTML: h,
+    getInnerText: m,
+    setInnerText: w
+  }) {
+    /**
+     * Selects elements from the headless environment.
+     * @param selector - The selector to select elements from. The supported selectors are CSS selectors whose complexity depends on the adapter implementation.
+     * @returns An array of elements.
+     */
+    o(this, "select");
+    /**
+     * Gets the value of an attribute from an element.
+     * @param el - The element to get the attribute from.
+     * @param attr - The attribute to get the value from.
+     * @returns The value of the attribute or null if the attribute is not set.
+     */
+    o(this, "getAttribute");
+    /**
+     * Sets the value of an attribute on an element.
+     * @param el - The element to set the attribute on.
+     * @param attr - The attribute to set the value of.
+     * @param value - The value to set the attribute to.
+     */
+    o(this, "setAttribute");
+    /**
+     * Gets the class of an element.
+     * @param el - The element to get the class from.
+     * @returns The class of the element or an empty string if the class is not set.
+     */
+    o(this, "getClass");
+    /**
+     * Sets the class of an element.
+     * @param el - The element to set the class on.
+     * @param cls - The class to set.
+     */
+    o(this, "setClass");
+    /**
+     * Gets the styles of an element.
+     * @param el - The element to get the styles from.
+     * @returns The styles of the element.
+     */
+    o(this, "getStyles");
+    /**
+     * Sets the styles of an element.
+     * @param el - The element to set the styles on.
+     */
+    o(this, "setStyles");
+    /**
+     * Appends HTML to an element.
+     * @param el - The element to append the HTML to.
+     * @param html - The HTML to append.
+     */
+    o(this, "appendHTML");
+    /**
+     * Gets the inner HTML of an element.
+     * @param el - The element to get the inner HTML from.
+     * @returns The inner HTML of the element or an empty string if the inner HTML is not set.
+     */
+    o(this, "getInnerHTML");
+    /**
+     * Sets the inner HTML of an element.
+     * @param el - The element to set the inner HTML on.
+     * @param html - The inner HTML to set.
+     */
+    o(this, "setInnerHTML");
+    /**
+     * Gets the inner text of an element.
+     * @param el - The element to get the inner text from.
+     * @returns The inner text of the element or an empty string if the inner text is not set.
+     */
+    o(this, "getInnerText");
+    /**
+     * Sets the inner text of an element.
+     * @param el - The element to set the inner text on.
+     * @param text - The inner text to set.
+     */
+    o(this, "setInnerText");
+    /**
+     * Sets the content of the root element from a HeadlessPortal. Generally this will be the same instance that is
+     * returned by `runHeadless`.
+     *
+     * @param root - The HeadlessPortal containing the content to set.
+     * @param setPlaceholders - Whether to set placeholders for the content. This allows you to restore the original content
+     * when you render on the server and then hydrate on the client.
+     */
+    o(this, "setFromRoot", (e, t) => {
+      e.getPortals().forEach((n) => {
+        for (const i of this.select(n.selector)) {
+          if (i == null)
+            throw new Error(
+              `Cannot find element by selector for render: ${n.selector}`
+            );
+          if (n.hasChildren() && this.appendHTML(i, n.contentToHTML(t)), n.hasInnerHTML()) {
+            if (t) {
+              const l = this.getInnerHTML(i);
+              l != null && this.setAttribute(i, V, l);
+            }
+            this.setInnerHTML(i, n.getInnerHTML());
+          }
+          if (n.hasInnerText()) {
+            if (t) {
+              const l = this.getInnerText(i);
+              l != null && this.setAttribute(i, B, l);
+            }
+            this.setInnerText(i, n.getInnerText());
+          }
+          if (n.hasClasses()) {
+            if (t) {
+              const l = this.getClass(i);
+              l != null && this.setAttribute(i, j, l);
+            }
+            this.setClass(i, n.getClasses().join(" "));
+          }
+          if (n.hasStyles()) {
+            if (t) {
+              const l = this.getStyles(i);
+              Object.keys(l).length > 0 && this.setAttribute(
+                i,
+                q,
+                JSON.stringify(l)
+              );
+            }
+            this.setStyles(i, n.getStyles());
+          }
+          if (n.hasAttributes()) {
+            const l = n.getAttributes();
+            if (t) {
+              const c = [];
+              l.forEach(([a]) => {
+                const u = this.getAttribute(i, a);
+                u != null && c.push([a, u]);
+              }), c.length > 0 && this.setAttribute(
+                i,
+                F,
+                JSON.stringify(Object.fromEntries(c))
+              );
+            }
+            l.forEach(([c, a]) => {
+              this.setAttribute(i, c, a);
+            });
+          }
+        }
+      });
+    });
+    this.select = e, this.getAttribute = t, this.setAttribute = r, this.getClass = n, this.setClass = i, this.getStyles = l, this.setStyles = c, this.appendHTML = a, this.getInnerHTML = u, this.setInnerHTML = h, this.getInnerText = m, this.setInnerText = w;
+  }
+}
+const Xe = () => {
+  document.querySelectorAll(`[${pe}]`).forEach(R);
+}, Ye = (s) => {
+  const e = s.getAttribute(j);
+  s.removeAttribute(j), e != null && s.setAttribute("class", e);
+}, Qe = () => {
+  document.querySelectorAll(`[${j}]`).forEach((e) => Ye(e));
+}, Ze = (s) => {
+  const e = s.getAttribute(V);
+  s.removeAttribute(V), e != null && (s.innerHTML = e);
+}, Ke = () => {
+  document.querySelectorAll(`[${V}]`).forEach((e) => Ze(e));
+}, et = (s) => {
+  const e = s.getAttribute(B);
+  s.removeAttribute(B), e != null && (s.innerText = e);
+}, tt = () => {
+  document.querySelectorAll(`[${B}]`).forEach((e) => et(e));
+}, ge = (s) => JSON.parse(s.replace(/&quot;/g, '"')), st = (s) => {
+  const e = s.getAttribute(q);
+  if (s.removeAttribute(q), e != null) {
+    const t = ge(e);
+    Object.entries(t).forEach(([r, n]) => {
+      s.style.setProperty(r, n);
+    });
+  }
+}, rt = () => {
+  document.querySelectorAll(`[${q}]`).forEach((e) => st(e));
+}, nt = (s) => {
+  const e = s.getAttribute(F);
+  if (s.removeAttribute(F), e != null) {
+    const t = ge(e);
+    Object.entries(t).forEach(([r, n]) => {
+      n == null ? s.removeAttribute(r) : s.setAttribute(r, n);
+    });
+  }
+}, it = () => {
+  document.querySelectorAll(`[${F}]`).forEach((e) => nt(e));
+}, Ut = () => {
+  Xe(), Qe(), tt(), Ke(), rt(), it();
+}, y = Symbol("class"), S = Symbol("style"), v = Symbol("handler"), me = () => Math.random().toString(36).substring(2, 15), ot = (s) => s.replace(/<[^>]*>?/g, "");
+class ye {
+  constructor(e) {
+    o(this, "id", me());
+    o(this, "properties", {});
+    o(this, "children", []);
+    o(this, "isElement", () => !0);
+    o(this, "isText", () => !1);
+    o(this, "getText", () => this.properties.innerText != null ? this.properties.innerText : this.properties.innerHTML != null ? ot(this.properties.innerHTML) : this.children.map((e) => e.getText()).join(""));
+    o(this, "removeChild", (e) => {
       const t = this.children.indexOf(e);
       t !== -1 && this.children.splice(t, 1);
     });
-    i(this, "remove", () => {
+    o(this, "remove", () => {
       if (this.parent != null)
         this.parent.removeChild(this);
       else
         throw new Error("Parent is undefined");
     });
-    i(this, "getPortals", () => {
+    o(this, "getPortals", () => {
       const e = this.elements().flatMap((t) => t.isPortal() ? [t, ...t.getPortals()] : t.getPortals());
       return this.isPortal() && e.unshift(this), e;
     });
-    i(this, "elements", () => this.children.filter((e) => e.isElement()));
-    i(this, "hasInnerHTML", () => this.properties.innerHTML != null);
-    i(this, "getInnerHTML", () => this.properties.innerHTML ?? "");
-    i(this, "getInnerText", () => this.properties.innerText ?? "");
-    i(this, "hasInnerText", () => this.properties.innerText != null);
-    i(this, "hasChildren", () => this.children.length > 0);
-    i(this, "hasClasses", () => this.properties[g] != null);
-    i(this, "hasStyles", () => this.properties[_] != null);
-    i(this, "hasAttributes", () => Object.keys(this.properties).length > 0);
-    i(this, "hasHandlers", () => this.properties[x] != null);
-    i(this, "hasRenderableProperties", () => this.hasClasses() || this.hasAttributes() || this.hasStyles());
-    i(this, "getById", (e) => {
+    o(this, "elements", () => this.children.filter((e) => e.isElement()));
+    o(this, "hasInnerHTML", () => this.properties.innerHTML != null);
+    o(this, "getInnerHTML", () => this.properties.innerHTML ?? "");
+    o(this, "getInnerText", () => this.properties.innerText ?? "");
+    o(this, "hasInnerText", () => this.properties.innerText != null);
+    o(this, "hasChildren", () => this.children.length > 0);
+    o(this, "hasClasses", () => this.properties[y] != null);
+    o(this, "hasStyles", () => this.properties[S] != null);
+    o(this, "hasAttributes", () => Object.keys(this.properties).length > 0);
+    o(this, "hasHandlers", () => this.properties[v] != null);
+    o(this, "hasRenderableProperties", () => this.hasClasses() || this.hasAttributes() || this.hasStyles());
+    o(this, "getById", (e) => {
       if (this.properties.id === e)
         return this;
       for (const t of this.elements()) {
@@ -930,57 +1191,61 @@ class ae {
           return r;
       }
     });
-    i(this, "trigger", (e, t) => {
-      ((this.properties[x] ?? {})[e] ?? []).forEach((n) => n(t));
+    o(this, "trigger", (e, t) => {
+      ((this.properties[v] ?? {})[e] ?? []).forEach((n) => n(t));
     });
-    i(this, "click", () => {
+    o(this, "click", () => {
       this.trigger("click", {});
     });
-    i(this, "on", (e, t) => {
-      var o;
-      const r = (o = this.properties)[x] ?? (o[x] = {}), n = t;
-      return r[e] = [...r[e] ?? [], n], () => {
-        const l = r[e] ?? [], c = l.indexOf(n);
-        c !== -1 && (l.splice(c, 1), l.length === 0 ? (delete r[e], Object.keys(r).length === 0 && delete this.properties[x]) : r[e] = l);
+    o(this, "on", (e, t, r) => {
+      var c;
+      const n = (c = this.properties)[v] ?? (c[v] = {}), i = r != null && r.once ? (a) => {
+        l(), t(a);
+      } : (a) => t(a);
+      n[e] = [...n[e] ?? [], i];
+      const l = () => {
+        const a = n[e] ?? [], u = a.indexOf(i);
+        u !== -1 && (a.splice(u, 1), a.length === 0 ? (delete n[e], Object.keys(n).length === 0 && delete this.properties[v]) : n[e] = a, (r == null ? void 0 : r.signal) != null && r.signal.removeEventListener("abort", l));
       };
+      return (r == null ? void 0 : r.signal) != null && r.signal.addEventListener("abort", l), l;
     });
-    i(this, "addClasses", (e) => {
+    o(this, "addClasses", (e) => {
       var r;
       if (e.length === 0)
         return;
-      const t = (r = this.properties)[g] ?? (r[g] = []);
+      const t = (r = this.properties)[y] ?? (r[y] = []);
       e.forEach((n) => {
         t.includes(n) || t.push(n);
       });
     });
-    i(this, "removeClasses", (e) => {
+    o(this, "removeClasses", (e) => {
       var r;
       if (e.length === 0)
         return;
-      const t = (r = this.properties)[g] ?? (r[g] = []);
+      const t = (r = this.properties)[y] ?? (r[y] = []);
       e.forEach((n) => {
-        const o = t.indexOf(n);
-        o !== -1 && t.splice(o, 1);
-      }), t.length === 0 && delete this.properties[g];
+        const i = t.indexOf(n);
+        i !== -1 && t.splice(i, 1);
+      }), t.length === 0 && delete this.properties[y];
     });
-    i(this, "getClasses", () => this.properties[g] ?? []);
-    i(this, "getAttributes", () => Object.entries(this.properties).filter(
+    o(this, "getClasses", () => this.properties[y] ?? []);
+    o(this, "getAttributes", () => Object.entries(this.properties).filter(
       ([e]) => !["innerText", "innerHTML"].includes(e)
     ));
-    i(this, "getVisibleAttributes", () => Reflect.ownKeys(this.properties).flatMap(
-      (e) => e === g ? [["class", this.getClasses()]] : e === _ ? [["style", this.getStyles()]] : typeof e == "string" ? [[e, String(this.properties[e])]] : []
+    o(this, "getVisibleAttributes", () => Reflect.ownKeys(this.properties).flatMap(
+      (e) => e === y ? [["class", this.getClasses()]] : e === S ? [["style", this.getStyles()]] : typeof e == "string" ? [[e, String(this.properties[e])]] : []
     ));
-    i(this, "setStyle", (e, t) => {
+    o(this, "setStyle", (e, t) => {
       var n;
-      const r = (n = this.properties)[_] ?? (n[_] = {});
-      r[e] = t, t === "" && (delete r[e], Object.keys(r).length === 0 && delete this.properties[_]);
+      const r = (n = this.properties)[S] ?? (n[S] = {});
+      r[e] = t, t === "" && (delete r[e], Object.keys(r).length === 0 && delete this.properties[S]);
     });
-    i(this, "getStyle", (e) => {
+    o(this, "getStyle", (e) => {
       var t;
-      return ((t = this.properties[_]) == null ? void 0 : t[e]) ?? "";
+      return ((t = this.properties[S]) == null ? void 0 : t[e]) ?? "";
     });
-    i(this, "getStyles", () => this.properties[_] ?? {});
-    i(this, "makeAccessors", (e) => {
+    o(this, "getStyles", () => this.properties[S] ?? {});
+    o(this, "makeAccessors", (e) => {
       const t = this.properties;
       return {
         get: () => t[e],
@@ -990,149 +1255,149 @@ class ae {
     this.parent = e;
   }
 }
-const Re = (s) => s.replace(/"/g, "&quot;"), je = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-class qe extends ae {
+const lt = (s) => s.replace(/"/g, "&quot;"), ct = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+class at extends ye {
   constructor(t, r, n) {
     super(n);
-    i(this, "isPortal", () => !1);
-    i(this, "toHTML", () => {
-      const t = this.children.map((l) => l.toHTML()).join(""), r = this.namespace ? ` xmlns="${this.namespace}"` : "";
-      let n = null;
-      const o = this.getVisibleAttributes().map(([l, c]) => l === "class" ? ` class="${c.join(" ")}"` : l === "style" ? typeof c == "string" ? ` style="${c}"` : ` style="${Object.entries(c).map(([a, f]) => `${a}: ${f};`).join(" ")}"` : Fe.has(l) ? ` ${l}` : l === "innerHTML" ? (n = c, "") : l === "innerText" ? (n = je(c), "") : ` ${l}="${Re(c)}"`).join("");
-      return Ue.has(this.tagName) && t === "" ? `<${this.tagName}${r}${o} />` : `<${this.tagName}${r}${o}>${n ?? t}</${this.tagName}>`;
+    o(this, "isPortal", () => !1);
+    o(this, "toHTML", (t = !1) => {
+      const r = this.children.map((a) => a.toHTML()).join(""), n = this.namespace ? ` xmlns="${this.namespace}"` : "";
+      let i = null;
+      const l = this.getVisibleAttributes().map(([a, u]) => a === "class" ? ` class="${u.join(" ")}"` : a === "style" ? typeof u == "string" ? ` style="${u}"` : ` style="${Object.entries(u).map(([h, m]) => `${h}: ${m};`).join(" ")}"` : ht.has(a) ? ` ${a}` : a === "innerHTML" ? (i = u, "") : a === "innerText" ? (i = ct(u), "") : ` ${a}="${lt(u)}"`).join(""), c = t ? ` ${pe}` : "";
+      return ft.has(this.tagName) && r === "" ? `<${this.tagName}${n}${l}${c} />` : `<${this.tagName}${n}${l}${c}>${i ?? r}</${this.tagName}>`;
     });
     this.tagName = t, this.namespace = r;
   }
 }
-class ue extends ae {
+class Te extends ye {
   constructor(t, r) {
     super(r);
-    i(this, "isPortal", () => !0);
-    i(this, "toHTML", () => "");
-    i(this, "contentToHTML", () => this.children.map((t) => t.toHTML()).join(""));
+    o(this, "isPortal", () => !0);
+    o(this, "toHTML", () => "");
+    o(this, "contentToHTML", (t = !1) => this.children.map((r) => r.toHTML(t)).join(""));
     this.selector = t;
   }
 }
-class Be {
+class ut {
   constructor(e) {
-    i(this, "id", ce());
-    i(this, "isElement", () => !1);
-    i(this, "isText", () => !0);
-    i(this, "getText", () => this.text);
-    i(this, "toHTML", () => this.text);
+    o(this, "id", me());
+    o(this, "isElement", () => !1);
+    o(this, "isText", () => !0);
+    o(this, "getText", () => this.text);
+    o(this, "toHTML", () => this.text);
     this.text = e;
   }
 }
-class E {
+class x {
   constructor(e, t, r, n) {
-    i(this, "appendOrInsert", (e) => {
+    o(this, "appendOrInsert", (e) => {
       if (this.reference != null) {
         const t = this.element.children.indexOf(this.reference);
         this.element.children.splice(t, 0, e);
       } else
         this.element.children.push(e);
     });
-    i(this, "makeChildElement", (e, t) => {
-      const r = new qe(e, t, this.element);
-      return this.appendOrInsert(r), new E(
+    o(this, "makeChildElement", (e, t) => {
+      const r = new at(e, t, this.element);
+      return this.appendOrInsert(r), new x(
         r,
         void 0,
         this.container,
         this.providers
       );
     });
-    i(this, "makeChildText", (e) => {
-      const t = new Be(e);
-      return this.appendOrInsert(t), new E(
+    o(this, "makeChildText", (e) => {
+      const t = new ut(e);
+      return this.appendOrInsert(t), new x(
         this.element,
         t,
         this.container,
         this.providers
       );
     });
-    i(this, "setText", (e) => {
+    o(this, "setText", (e) => {
       this.reference && this.reference.isText() && (this.reference.text = e);
     });
-    i(this, "getText", () => {
+    o(this, "getText", () => {
       var e;
       return ((e = this.reference) == null ? void 0 : e.getText()) ?? this.element.getText();
     });
-    i(this, "makeRef", () => this.makeChildText(""));
-    i(this, "makePortal", (e) => {
-      const t = new ue(e, this.element);
-      return this.appendOrInsert(t), new E(
+    o(this, "makeRef", () => this.makeChildText(""));
+    o(this, "makePortal", (e) => {
+      const t = new Te(e, this.element);
+      return this.appendOrInsert(t), new x(
         t,
         void 0,
         this.container,
         this.providers
       );
     });
-    i(this, "withProviders", (e) => new E(this.element, this.reference, this.container, {
+    o(this, "withProviders", (e) => new x(this.element, this.reference, this.container, {
       ...this.providers,
       ...e
     }));
-    i(this, "getProvider", (e) => {
+    o(this, "getProvider", (e) => {
       if (this.providers[e] === void 0)
-        throw new le(e);
+        throw new de(e);
       return this.providers[e];
     });
-    i(this, "clear", (e) => {
+    o(this, "clear", (e) => {
       e && (this.reference !== void 0 ? this.element.removeChild(this.reference) : this.element.remove());
     });
-    i(this, "on", (e, t) => this.element.on(e, t));
-    i(this, "addClasses", (e) => this.element.addClasses(e));
-    i(this, "removeClasses", (e) => this.element.removeClasses(e));
-    i(this, "getClasses", () => this.element.getClasses());
-    i(this, "isBrowserDOM", () => !1);
-    i(this, "isHeadlessDOM", () => !0);
-    i(this, "setStyle", (e, t) => this.element.setStyle(e, t));
-    i(this, "getStyle", (e) => this.element.getStyle(e));
-    i(this, "makeAccessors", (e) => this.element.makeAccessors(e));
+    o(this, "on", (e, t) => this.element.on(e, t));
+    o(this, "addClasses", (e) => this.element.addClasses(e));
+    o(this, "removeClasses", (e) => this.element.removeClasses(e));
+    o(this, "getClasses", () => this.element.getClasses());
+    o(this, "isBrowserDOM", () => !1);
+    o(this, "isHeadlessDOM", () => !0);
+    o(this, "setStyle", (e, t) => this.element.setStyle(e, t));
+    o(this, "getStyle", (e) => this.element.getStyle(e));
+    o(this, "makeAccessors", (e) => this.element.makeAccessors(e));
     this.element = e, this.reference = t, this.container = r, this.providers = n;
   }
 }
-const Fe = /* @__PURE__ */ new Set([
+const ht = /* @__PURE__ */ new Set([
   "checked",
   "disabled",
   "multiple",
   "readonly",
   "required",
   "selected"
-]), Ue = /* @__PURE__ */ new Set(["img", "br", "hr", "input", "link", "meta"]), he = (s) => (e) => {
+]), ft = /* @__PURE__ */ new Set(["img", "br", "hr", "input", "link", "meta"]), be = (s) => (e) => {
   const t = e.makeChildText(s);
   return (r) => t.clear(r);
-}, fe = (s) => (e) => {
+}, Se = (s) => (e) => {
   const t = e.makeChildText(s.value), r = s.on((n) => t.setText(n));
   return (n) => {
     r(), t.clear(n);
   };
-}, gt = (s) => d.is(s) ? fe(s) : he(s), m = (...s) => (e) => {
-  const t = s.map((r) => u(r)(e));
+}, Wt = (s) => d.is(s) ? Se(s) : be(s), g = (...s) => (e) => {
+  const t = s.map((r) => f(r)(e));
   return (r) => {
     t.forEach((n) => n(r));
   };
-}, v = () => () => {
-}, We = (s) => (e) => (e.addClasses(s), (t) => {
+}, _ = () => () => {
+}, dt = (s) => (e) => (e.addClasses(s), (t) => {
   t && e.removeClasses(s);
-}), ze = (s) => (e) => {
+}), pt = (s) => (e) => {
   let t = [];
   const r = s.on((n) => {
-    e.removeClasses(t), t = (n ?? "").split(" ").filter((o) => o.length > 0), e.addClasses(t);
+    e.removeClasses(t), t = (n ?? "").split(" ").filter((i) => i.length > 0), e.addClasses(t);
   });
   return (n) => {
     r(), n && e.removeClasses(t), t.length = 0;
   };
-}, k = (s, e) => (t) => {
-  const { get: r, set: n } = t.makeAccessors(s), o = r();
+}, H = (s, e) => (t) => {
+  const { get: r, set: n } = t.makeAccessors(s), i = r();
   return n(e), (l) => {
-    l && n(o);
+    l && n(i);
   };
-}, L = (s, e) => (t) => {
-  const { get: r, set: n } = t.makeAccessors(s), o = r(), l = e.on(n);
+}, $ = (s, e) => (t) => {
+  const { get: r, set: n } = t.makeAccessors(s), i = r(), l = e.on(n);
   return (c) => {
-    l(), c && n(o);
+    l(), c && n(i);
   };
-}, D = new Proxy(
+}, L = new Proxy(
   {},
   {
     /**
@@ -1146,17 +1411,17 @@ const Fe = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => e === "class" ? (t) => d.is(t) ? ze(t) : We(
+    get: (s, e) => e === "class" ? (t) => d.is(t) ? pt(t) : dt(
       (t ?? "").split(" ").filter((r) => r.length > 0)
-    ) : (t) => d.is(t) ? L(
+    ) : (t) => d.is(t) ? $(
       e,
       t
-    ) : k(
+    ) : H(
       e,
       t
     )
   }
-), mt = new Proxy(
+), Jt = new Proxy(
   {},
   {
     /**
@@ -1167,12 +1432,12 @@ const Fe = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => d.is(t) ? L(
+    get: (s, e) => (t) => d.is(t) ? $(
       `data-${e}`,
       t
-    ) : k(`data-${e}`, t)
+    ) : H(`data-${e}`, t)
   }
-), yt = new Proxy(
+), Gt = new Proxy(
   {},
   {
     /**
@@ -1183,15 +1448,15 @@ const Fe = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => d.is(t) ? L(
+    get: (s, e) => (t) => d.is(t) ? $(
       `aria-${e}`,
       t
-    ) : k(
+    ) : H(
       `aria-${e}`,
       t
     )
   }
-), wt = new Proxy(
+), zt = new Proxy(
   {},
   {
     /**
@@ -1202,15 +1467,15 @@ const Fe = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => d.is(t) ? L(
+    get: (s, e) => (t) => d.is(t) ? $(
       e,
       t
-    ) : k(
+    ) : H(
       e,
       t
     )
   }
-), _t = new Proxy(
+), Xt = new Proxy(
   {},
   {
     /**
@@ -1220,37 +1485,37 @@ const Fe = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => d.is(t) ? L(
+    get: (s, e) => (t) => d.is(t) ? $(
       e,
       t
-    ) : k(
+    ) : H(
       e,
       t
     )
   }
-), u = (s) => {
+), f = (s) => {
   if (s == null)
-    return v;
+    return _;
   if (Array.isArray(s))
-    return m(...s.map(u));
+    return g(...s.map(f));
   if (typeof s == "string")
-    return he(s);
+    return be(s);
   if (d.is(s))
-    return fe(s);
+    return Se(s);
   if (typeof s == "function")
     return s;
   throw new Error(`Unknown type: '${typeof s}' for child: ${s}`);
-}, de = (s, ...e) => (t) => {
-  const r = t.makeChildElement(s, void 0), n = e.map((o) => u(o)(r));
-  return (o) => {
-    n.forEach((l) => l(!1)), r.clear(o);
+}, _e = (s, ...e) => (t) => {
+  const r = t.makeChildElement(s, void 0), n = e.map((i) => f(i)(r));
+  return (i) => {
+    n.forEach((l) => l(!1)), r.clear(i);
   };
-}, pe = (s, e, ...t) => (r) => {
-  const n = r.makeChildElement(s, e), o = t.map((l) => u(l)(n));
+}, we = (s, e, ...t) => (r) => {
+  const n = r.makeChildElement(s, e), i = t.map((l) => f(l)(n));
   return (l) => {
-    o.forEach((c) => c(!1)), n.clear(l);
+    i.forEach((c) => c(!1)), n.clear(l);
   };
-}, vt = new Proxy(
+}, Yt = new Proxy(
   {},
   {
     /**
@@ -1258,9 +1523,9 @@ const Fe = /* @__PURE__ */ new Set([
      * @param tagName - The HTML tag name.
      * @returns A renderable function that creates and appends the HTML element to the DOM.
      */
-    get: (s, e) => (...t) => de(e, t.flatMap(u))
+    get: (s, e) => (...t) => _e(e, t.flatMap(f))
   }
-), St = new Proxy(
+), Qt = new Proxy(
   {},
   {
     /**
@@ -1268,9 +1533,9 @@ const Fe = /* @__PURE__ */ new Set([
      * @param type - The input type name.
      * @returns A renderable function that creates and appends the HTMLInput element to the DOM.
      */
-    get: (s, e) => (...t) => de("input", D.type(e), ...t)
+    get: (s, e) => (...t) => _e("input", L.type(e), ...t)
   }
-), Ge = "http://www.w3.org/2000/svg", Ct = new Proxy(
+), gt = "http://www.w3.org/2000/svg", Zt = new Proxy(
   {},
   {
     /**
@@ -1278,9 +1543,9 @@ const Fe = /* @__PURE__ */ new Set([
      * @param tagName - The SVG tag name.
      * @returns A renderable function that creates and appends the SVG element to the DOM.
      */
-    get: (s, e) => (...t) => pe(e, Ge, t.flatMap(u))
+    get: (s, e) => (...t) => we(e, gt, t.flatMap(f))
   }
-), Je = "http://www.w3.org/1998/Math/MathML", xt = new Proxy(
+), mt = "http://www.w3.org/1998/Math/MathML", Kt = new Proxy(
   {},
   {
     /**
@@ -1288,35 +1553,35 @@ const Fe = /* @__PURE__ */ new Set([
      * @param tagName - The Math tag name.
      * @returns A renderable function that creates and appends the Math element to the DOM.
      */
-    get: (s, e) => (...t) => pe(e, Je, t.flatMap(u))
+    get: (s, e) => (...t) => we(e, mt, t.flatMap(f))
   }
-), ge = (s, e) => {
+), Ae = (s, e) => {
   if (typeof e == "function")
-    return ge(s, { then: e });
-  const t = e.pending != null ? u(e.pending) : v, r = e.then, n = e.error != null ? (o) => u(e.error(o)) : () => v;
-  return (o) => {
+    return Ae(s, { then: e });
+  const t = e.pending != null ? f(e.pending) : _, r = e.then, n = e.error != null ? (i) => f(e.error(i)) : () => _;
+  return (i) => {
     let l = !0;
-    const c = s(), a = o.makeRef();
-    let f = u(t)(a);
+    const c = s(), a = i.makeRef();
+    let u = f(t)(a);
     return c.then(
       (h) => {
-        l && (f(!0), f = u(r(h))(a));
+        l && (u(!0), u = f(r(h))(a));
       },
       (h) => {
-        l && (f(!0), f = u(n(h))(a));
+        l && (u(!0), u = f(n(h))(a));
       }
     ), (h) => {
-      l = !1, f(h), a.clear(h);
+      l = !1, u(h), a.clear(h);
     };
   };
-}, Tt = (s, e) => ge(() => s, e), me = (s, e) => (t) => t.on(s, e), Qe = (s) => me("click", (e) => {
+}, es = (s, e) => Ae(() => s, e), ve = (s, e, t) => (r) => r.on(s, e, t), yt = (s) => ve("click", (e) => {
   e.preventDefault();
   const t = e.target;
   setTimeout(() => {
     const r = t.ownerDocument != null ? t == null ? void 0 : t.checked : void 0;
     r != null && s(!r);
   }, 0);
-}), R = new Proxy(
+}), G = new Proxy(
   {},
   {
     /**
@@ -1324,15 +1589,15 @@ const Fe = /* @__PURE__ */ new Set([
      * @param fn - The function to call when the event is triggered.
      * @returns A `Renderable` function that adds the event listener to the element.
      */
-    get: (s, e) => (t) => me(e, t)
+    get: (s, e) => (t) => ve(e, t)
   }
-), Xe = (s) => (e) => {
+), Tt = (s) => (e) => {
   const t = e.target;
   s(t.value);
-}, Ye = (s) => (e) => {
+}, bt = (s) => (e) => {
   const t = e.target;
   s(t.valueAsNumber);
-}, Ze = (s) => (e) => {
+}, St = (s) => (e) => {
   const t = e.target;
   if (t.value === "")
     return;
@@ -1342,211 +1607,211 @@ const Fe = /* @__PURE__ */ new Set([
     Number(r[2].substring(0, 2))
   );
   s(n);
-}, Ke = (s) => (e) => {
+}, _t = (s) => (e) => {
   const t = e.target;
   if (t.value === "")
     return;
-  const r = t.value.split("T"), n = r[0].split("-"), o = new Date(
+  const r = t.value.split("T"), n = r[0].split("-"), i = new Date(
     Number(n[0]),
     Number(n[1]) - 1,
     Number(n[2])
   ), l = r[1].split(":");
-  o.setHours(Number(l[0])), o.setMinutes(Number(l[1])), o.setSeconds(Number(l[2])), s(o);
-}, Pt = (s) => (e) => {
+  i.setHours(Number(l[0])), i.setMinutes(Number(l[1])), i.setSeconds(Number(l[2])), s(i);
+}, ts = (s) => (e) => {
   const t = e.target;
   s(t.checked);
-}, Et = (s) => (e) => {
+}, ss = (s) => (e) => {
   e.preventDefault(), s();
-}, Dt = (s) => (e) => {
+}, rs = (s) => (e) => {
   e.stopPropagation(), s();
-}, Ot = (s) => (e) => {
+}, ns = (s) => (e) => {
   e.stopImmediatePropagation(), s();
-}, At = (s, e = "input") => m(
-  D.valueAsDate(s),
-  R[e](Ze(s.set))
-), Mt = (s, e = "input") => m(
-  D.valueAsDate(s),
-  R[e](Ke(s.set))
-), bt = (s, e = "input") => m(
-  D.valueAsNumber(s),
-  R[e](Ye(s.set))
-), kt = (s, e = "input") => m(D.value(s), R[e](Xe(s.set))), Lt = (s) => m(D.checked(s), Qe(s.set)), j = (s, e) => {
+}, is = (s, e = "input") => g(
+  L.valueAsDate(s),
+  G[e](St(s.set))
+), os = (s, e = "input") => g(
+  L.valueAsDate(s),
+  G[e](_t(s.set))
+), ls = (s, e = "input") => g(
+  L.valueAsNumber(s),
+  G[e](bt(s.set))
+), cs = (s, e = "input") => g(L.value(s), G[e](Tt(s.set))), as = (s) => g(L.checked(s), yt(s.set)), z = (s, e) => {
   if (d.is(s))
     return (r) => {
       const n = r.makeRef();
-      let o, l;
+      let i, l;
       const c = s.map((h) => Object.keys(h)[0]);
       let a;
-      const f = c.on((h) => {
+      const u = c.on((h) => {
         if (h !== a) {
-          l == null || l.dispose(), o == null || o(!0), l = s.map((O) => O[h]);
-          const S = e[h](l);
-          o = u(S)(n), a = h;
+          l == null || l.dispose(), i == null || i(!0), l = s.map((w) => w[h]);
+          const m = e[h](l);
+          i = f(m)(n), a = h;
         }
       });
       return (h) => {
-        f(), n.clear(h), o == null || o(h);
+        u(), n.clear(h), i == null || i(h);
       };
     };
   const t = Object.keys(s)[0];
-  return u(e[t](V(s[t])));
-}, ye = (s, e, t) => j(
+  return f(e[t](J(s[t])));
+}, Ee = (s, e, t) => z(
   p.map(s, (r) => ({ [r[e]]: r })),
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   t
-), $t = (s, e) => ye(s, "kind", e), Nt = (s, e) => {
+), us = (s, e) => Ee(s, "kind", e), hs = (s, e) => {
   const t = p.map(s, ([r, n]) => ({ [r]: n }));
-  return j(t, e);
-}, Ht = (s, e) => ye(s, "type", e), et = (s, e) => j(
+  return z(t, e);
+}, fs = (s, e) => Ee(s, "type", e), wt = (s, e) => z(
   p.map(s, (t) => ({ [t]: !0 })),
   e
-), It = (s, e = {}) => (t) => {
+), ds = (s, e = {}) => (t) => {
   const r = (e == null ? void 0 : e.firstSeparator) ?? s, n = (e == null ? void 0 : e.lastSeparator) ?? s;
-  return et(
-    t.map((o) => o.isFirst ? "first" : o.isLast ? "last" : "other"),
+  return wt(
+    t.map((i) => i.isFirst ? "first" : i.isLast ? "last" : "other"),
     {
       first: () => r,
       last: () => n,
       other: () => s
     }
   );
-}, we = (s, e) => (t) => {
-  const r = Object.values(s).reduce((n, o) => {
-    const l = t.getProvider(o);
-    return n[o] = l, n;
+}, Ce = (s, e) => (t) => {
+  const r = Object.values(s).reduce((n, i) => {
+    const l = t.getProvider(i);
+    return n[i] = l, n;
   }, {});
-  return u(e(r))(t);
-}, Vt = (s, e) => (t) => {
+  return f(e(r))(t);
+}, ps = (s, e) => (t) => {
   const r = [], n = Object.entries(s).reduce(
-    (o, [l, c]) => (r.push(
-      c((a) => (Reflect.set(o, l, a), null))(t)
-    ), o),
+    (i, [l, c]) => (r.push(
+      c((a) => (Reflect.set(i, l, a), null))(t)
+    ), i),
     {}
   );
-  return r.push(e(n)(t)), (o) => {
-    r.forEach((l) => l(o));
+  return r.push(e(n)(t)), (i) => {
+    r.forEach((l) => l(i));
   };
-}, Rt = (s, e) => we([s], (t) => u(e(t[s]))), jt = (s, e) => we(s, (t) => u(e(t))), qt = (s) => (e) => s(e) ?? (() => {
-}), Bt = (s) => (e) => (e.appendOrInsert(s), (t) => {
-  t && F(s);
-}), tt = (s, e, t) => {
+}, At = (s, e) => Ce([s], (t) => f(e(t[s]))), gs = (s, e) => Ce(s, (t) => f(e(t))), ms = (s) => (e) => s(e) ?? (() => {
+}), ys = (s) => (e) => (e.appendOrInsert(s), (t) => {
+  t && R(s);
+}), vt = (s, e, t) => {
   if (d.is(s)) {
     const r = s;
     return (n) => {
-      const o = n.makeRef();
+      const i = n.makeRef();
       let l = null, c = !1;
-      const a = H(null), f = r.on((h) => {
-        h == null ? (l == null || l(!0), l = u((t == null ? void 0 : t()) ?? v)(o), c = !1) : (a.value = h, c || (l == null || l(!0), l = u(e(a))(
-          o
+      const a = N(null), u = r.on((h) => {
+        h == null ? (l == null || l(!0), l = f((t == null ? void 0 : t()) ?? _)(i), c = !1) : (a.value = h, c || (l == null || l(!0), l = f(e(a))(
+          i
         ), c = !0));
       });
       return (h) => {
-        f(), l == null || l(h), o.clear(h);
+        u(), l == null || l(h), i.clear(h);
       };
     };
   } else {
     const r = s;
     if (r == null) {
       const n = t == null ? void 0 : t();
-      return n != null ? u(n) : v;
+      return n != null ? f(n) : _;
     }
-    return u(e(V(r)));
+    return f(e(J(r)));
   }
-}, U = (s) => (e) => (t) => s(t, e), _e = (s, e, t) => ve(
+}, U = (s) => (e) => (t) => s(t, e), Pe = (s, e, t) => xe(
   s,
   () => e,
   () => t
-), ve = (s, e, t) => tt(
+), xe = (s, e, t) => vt(
   p.map(s, (r) => r ? !0 : null),
   e,
   t ?? void 0
-), Ft = (s, e, t) => st(
+), Ts = (s, e, t) => Et(
   s,
   () => e,
   () => t
-), st = (s, e, t) => ve(
+), Et = (s, e, t) => xe(
   p.map(s, (r) => !r),
   e,
   t
-), Se = (s, e, t) => t != null ? Se(s, (r) => {
-  const n = new M(
+), Le = (s, e, t) => t != null ? Le(s, (r) => {
+  const n = new D(
     r.index,
-    r.total.map((o) => o - 1)
+    r.total.map((i) => i - 1)
   );
-  return m(
+  return g(
     U(n.dispose),
-    u(e(r)),
-    _e(r.isLast, v, t(n))
+    f(e(r)),
+    Pe(r.isLast, _, t(n))
   );
 }) : d.is(s) ? (r) => {
-  const n = r.makeRef(), o = Array.from(
+  const n = r.makeRef(), i = Array.from(
     { length: s.value },
-    (a, f) => f
-  ).map((a) => new M(a, s)), l = o.map(
-    (a) => u(e(a))(n)
+    (a, u) => u
+  ).map((a) => new D(a, s)), l = i.map(
+    (a) => f(e(a))(n)
   ), c = s.on((a) => {
     for (; a < l.length; )
-      o.pop().dispose(), l.pop()(!0);
-    for (let f = 0; f < a; f++)
-      if (o[f] == null) {
-        o[f] = new M(f, s);
-        const h = u(e(o[f]));
-        l[f] = h(n);
+      i.pop().dispose(), l.pop()(!0);
+    for (let u = 0; u < a; u++)
+      if (i[u] == null) {
+        i[u] = new D(u, s);
+        const h = f(e(i[u]));
+        l[u] = h(n);
       }
   });
   return (a) => {
     c(), n.clear(a);
   };
-} : m(
+} : g(
   ...Array.from({ length: s }, (r, n) => n).map(
-    (r) => u(e(new M(r, V(s))))
+    (r) => f(e(new D(r, J(s))))
   )
-), rt = (s, e, t) => {
+), Ct = (s, e, t) => {
   if (t != null)
-    return rt(s, (r, n) => {
-      const o = new M(
+    return Ct(s, (r, n) => {
+      const i = new D(
         n.index,
         n.total.map((l) => l - 1)
       );
-      return m([
-        U(o.dispose),
-        u(e(r, n)),
-        _e(n.isLast, v, t(o))
+      return g([
+        U(i.dispose),
+        f(e(r, n)),
+        Pe(n.isLast, _, t(i))
       ]);
     });
   {
-    const r = p.map(s, (o) => o.length), n = p.toSignal(s);
-    return Se(r, (o) => {
-      const l = n.map((c) => c[o.index]);
-      return m(
+    const r = p.map(s, (i) => i.length), n = p.toSignal(s);
+    return Le(r, (i) => {
+      const l = n.map((c) => c[i.index]);
+      return g(
         U(l.dispose),
-        u(e(l, o))
+        f(e(l, i))
       );
     });
   }
-}, nt = (s) => (e) => e.isBrowserDOM() ? s(e) ?? (() => {
+}, Pt = (s) => (e) => e.isBrowserDOM() ? s(e) ?? (() => {
 }) : () => {
-}, Ut = (s) => (e) => e.isHeadlessDOM() ? s(e) ?? (() => {
+}, bs = (s) => (e) => e.isHeadlessDOM() ? s(e) ?? (() => {
 }) : () => {
-}, Wt = (s) => nt((e) => s(e.element) ?? (() => {
-})), zt = (s, e) => {
+}, Ss = (s) => Pt((e) => s(e.element) ?? (() => {
+})), _s = (s, e) => {
   if (d.is(s)) {
     const t = s;
     return (r) => {
       r = r.makeRef();
-      const n = t.map((c) => u(e(c)));
-      let o = () => {
+      const n = t.map((c) => f(e(c)));
+      let i = () => {
       };
       const l = n.on((c) => {
-        o(!0), o = c(r);
+        i(!0), i = c(r);
       });
       return (c) => {
-        l(), o(c);
+        l(), i(c);
       };
     };
   }
-  return u(e(s));
-}, Gt = (s, e, t = () => v) => j(
+  return f(e(s));
+}, ws = (s, e, t = () => _) => z(
   p.map(
     s,
     (r) => r.length > 0 ? { notEmpty: r } : { whenEmpty: null }
@@ -1555,48 +1820,52 @@ const Fe = /* @__PURE__ */ new Set([
     notEmpty: (r) => e(r),
     whenEmpty: () => t()
   }
-), z = (s, e) => {
-  const t = s(e);
-  return () => t(!0);
-}, Jt = (s, e, { doc: t, clear: r } = {}) => {
-  const n = typeof e == "string" ? (t ?? document).querySelector(e) : e;
-  if (n === null)
-    throw new it(
-      `Cannot find element by selector for render: ${e}`
-    );
-  r !== !1 && (t ?? n.ownerDocument) != null && n.nodeType === 1 && (n.innerHTML = "");
-  const o = Ie(n), l = oe(n) ? void 0 : n, c = P.of(o, l);
-  return z(s, c);
-}, Qt = (s, {
-  startUrl: e = "https://example.com",
-  selector: t = ":root"
-} = {}) => {
-  const r = p.toSignal(e).deriveProp(), n = new ue(t, void 0), o = new E(n, void 0, { currentURL: r }, {});
-  return {
-    clear: z(s(), o),
-    root: n,
-    currentURL: r
-  };
-};
-class it extends Error {
-  constructor(e) {
-    super(e);
-  }
-}
-const Xt = (s, e) => (t) => {
+), As = (s, e) => (t) => {
   const r = t.makePortal(s);
-  return z(u(e), r);
-}, Yt = (s) => Symbol(s), Ce = (s, e) => (t) => u(e)(t.withProviders(s)), Zt = (...s) => s.length > 0 ? s.reduceRight((e, t) => (r) => e(t(r))) : u, Kt = (s, e, t) => Ce({ [s]: e }, u(t)), es = (s, e) => Ce(s, u(e)), ot = (s, e) => (t) => {
+  return Z(f(e), r);
+}, xt = (s) => Symbol(s), Oe = (s, e) => (t) => f(e)(t.withProviders(s)), vs = (...s) => s.length > 0 ? s.reduceRight((e, t) => (r) => e(t(r))) : f, Lt = (s, e, t) => Oe({ [s]: e }, f(t)), Es = (s, e) => Oe(s, f(e)), De = xt("Probe"), E = /* @__PURE__ */ new Map(), Ot = ({
+  identifier: s,
+  callback: e = () => {
+  },
+  child: t,
+  timeout: r = 10
+}) => {
+  if (E.has(s))
+    throw new Error(`Probe already exists: ${s.description}`);
+  const n = setTimeout(() => e("timeout"), r);
+  E.set(s, {
+    counter: 0,
+    timeoutId: n
+  });
+  const i = (l) => {
+    clearTimeout(n);
+    const c = E.get(l);
+    if (c == null)
+      throw new Error(`Probe not found: ${l.description}`);
+    --c.counter === 0 ? (e("resolved"), E.delete(l)) : E.set(l, c);
+  };
+  return g(
+    U(() => clearTimeout(n)),
+    Lt(De, i, t)
+  );
+}, Dt = (s, e) => At(De, (t) => {
+  const r = E.get(s);
+  return r == null ? e(() => {
+  }) : (clearTimeout(r.timeoutId), r.counter++, e(() => t(s)));
+}), Me = Symbol("globalProbe"), Cs = ({
+  callback: s,
+  timeout: e
+}, t) => Ot({ identifier: Me, callback: s, child: t, timeout: e }), Ps = (s) => Dt(Me, s), Mt = (s, e) => (t) => {
   const r = t.getStyle(s);
   return t.setStyle(s, e), (n) => {
     n && t.setStyle(s, r);
   };
-}, lt = (s, e) => (t) => {
+}, Ht = (s, e) => (t) => {
   const r = t.getStyle(s);
   return e.on((n) => t.setStyle(s, n)), (n) => {
     n && t.setStyle(s, r);
   };
-}, ts = new Proxy(
+}, xs = new Proxy(
   {},
   {
     /**
@@ -1607,112 +1876,121 @@ const Xt = (s, e) => (t) => {
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => d.is(t) ? lt(e, t) : ot(e, t)
+    get: (s, e) => (t) => d.is(t) ? Ht(e, t) : Mt(e, t)
   }
 );
 export {
-  Tt as Async,
-  Lt as BindChecked,
-  At as BindDate,
-  Mt as BindDateTime,
-  bt as BindNumber,
-  kt as BindText,
+  es as Async,
+  as as BindChecked,
+  is as BindDate,
+  os as BindDateTime,
+  ls as BindNumber,
+  cs as BindText,
   P as BrowserContext,
-  T as Computed,
-  It as Conjunction,
-  Bt as DOMNode,
-  de as El,
-  pe as ElNS,
-  M as ElementPosition,
-  v as Empty,
-  tt as Ensure,
-  rt as ForEach,
-  m as Fragment,
-  E as HeadlessContext,
-  qe as HeadlessElement,
-  ue as HeadlessPortal,
-  Be as HeadlessText,
-  st as LazyUnless,
-  ve as LazyWhen,
-  zt as MapSignal,
-  ee as MemoryStore,
-  Gt as NotEmpty,
-  nt as OnBrowserCtx,
-  Qe as OnChecked,
-  qt as OnCtx,
+  j as CLASS_PLACEHOLDER_ATTR,
+  C as Computed,
+  ds as Conjunction,
+  ys as DOMNode,
+  _e as El,
+  we as ElNS,
+  D as ElementPosition,
+  _ as Empty,
+  vt as Ensure,
+  Ct as ForEach,
+  g as Fragment,
+  Ft as HeadlessAdapter,
+  x as HeadlessContext,
+  at as HeadlessElement,
+  Te as HeadlessPortal,
+  ut as HeadlessText,
+  Et as LazyUnless,
+  xe as LazyWhen,
+  _s as MapSignal,
+  oe as MemoryStore,
+  ws as NotEmpty,
+  Pt as OnBrowserCtx,
+  yt as OnChecked,
+  ms as OnCtx,
   U as OnDispose,
-  Wt as OnElement,
-  Ut as OnHeadlessCtx,
-  j as OneOf,
-  ye as OneOfField,
-  $t as OneOfKind,
-  Nt as OneOfTuple,
-  Ht as OneOfType,
-  et as OneOfValue,
-  Xt as Portal,
-  N as Prop,
-  Zt as Provide,
-  le as ProviderNotFoundError,
-  it as RenderingError,
-  Se as Repeat,
+  Ss as OnElement,
+  bs as OnHeadlessCtx,
+  z as OneOf,
+  Ee as OneOfField,
+  us as OneOfKind,
+  hs as OneOfTuple,
+  fs as OneOfType,
+  wt as OneOfValue,
+  As as Portal,
+  k as Prop,
+  vs as Provide,
+  Cs as ProvideGlobalProbe,
+  Ot as ProvideProbe,
+  de as ProviderNotFoundError,
+  ze as RenderingError,
+  Le as Repeat,
   d as Signal,
-  ge as Task,
-  gt as TextNode,
-  Ft as Unless,
-  Vt as Use,
-  Rt as UseProvider,
-  jt as UseProviders,
+  Ae as Task,
+  Wt as TextNode,
+  Ts as Unless,
+  ps as Use,
+  Ps as UseGlobalProbe,
+  Dt as UseProbe,
+  At as UseProvider,
+  gs as UseProviders,
   p as Value,
-  _e as When,
-  Kt as WithProvider,
-  es as WithProviders,
-  Ie as _getSelfOrParentElement,
-  oe as _isElement,
-  He as _makeGetter,
-  Ne as _makeSetter,
-  F as _removeDOMNode,
-  fe as _signalText,
-  he as _staticText,
-  dt as animateSignal,
-  $e as animateSignals,
-  yt as aria,
-  D as attr,
-  mt as dataAttr,
-  Pt as emitChecked,
-  Et as emitPreventDefault,
-  Ot as emitStopImmediatePropagation,
-  Dt as emitStopPropagation,
-  Xe as emitValue,
-  Ze as emitValueAsDate,
-  Ke as emitValueAsDateTime,
-  Ye as emitValueAsNumber,
-  Me as endInterpolate,
-  K as getWindow,
-  be as guessInterpolate,
-  vt as html,
-  St as input,
-  Ae as interpolateDate,
-  De as interpolateNumber,
-  Oe as interpolateString,
-  ht as localStorageProp,
-  W as makeComputed,
-  at as makeComputedOf,
-  pt as makeComputedRecord,
-  Le as makeEffect,
-  ut as makeEffectOf,
-  H as makeProp,
-  Yt as makeProviderMark,
-  V as makeSignal,
-  xt as math,
-  _t as mathAttr,
-  R as on,
-  Jt as render,
-  z as renderWithContext,
-  u as renderableOfTNode,
-  Qt as runHeadless,
-  ft as sessionStorageProp,
-  te as storedProp,
-  ts as style,
-  Ct as svg,
-  wt as svgAttr
+  Pe as When,
+  Lt as WithProvider,
+  Es as WithProviders,
+  pe as _NODE_PLACEHOLDER_ATTR,
+  Ge as _getSelfOrParentElement,
+  fe as _isElement,
+  Je as _makeGetter,
+  We as _makeSetter,
+  R as _removeDOMNode,
+  Se as _signalText,
+  be as _staticText,
+  jt as animateSignal,
+  Ue as animateSignals,
+  Gt as aria,
+  L as attr,
+  Jt as dataAttr,
+  ts as emitChecked,
+  ss as emitPreventDefault,
+  ns as emitStopImmediatePropagation,
+  rs as emitStopPropagation,
+  Tt as emitValue,
+  St as emitValueAsDate,
+  _t as emitValueAsDateTime,
+  bt as emitValueAsNumber,
+  qe as endInterpolate,
+  ie as getWindow,
+  Ve as guessInterpolate,
+  Yt as html,
+  Qt as input,
+  je as interpolateDate,
+  Ne as interpolateNumber,
+  Re as interpolateString,
+  Nt as localStorageProp,
+  Q as makeComputed,
+  It as makeComputedOf,
+  qt as makeComputedRecord,
+  Fe as makeEffect,
+  kt as makeEffectOf,
+  N as makeProp,
+  xt as makeProviderMark,
+  J as makeSignal,
+  Kt as math,
+  Xt as mathAttr,
+  G as on,
+  De as probeMarker,
+  Vt as render,
+  Z as renderWithContext,
+  f as renderableOfTNode,
+  Ut as restoreTempoPlaceholders,
+  Bt as runHeadless,
+  Rt as sessionStorageProp,
+  le as storedProp,
+  xs as style,
+  Zt as svg,
+  zt as svgAttr
 };