@tempots/dom 31.6.0 → 32.0.0

package/index.js

@@ -1,66 +1,33 @@
-var We = Object.defineProperty;
-var me = (s) => {
-  throw TypeError(s);
-};
-var Ue = (s, e, t) => e in s ? We(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var o = (s, e, t) => Ue(s, typeof e != "symbol" ? e + "" : e, t), ge = (s, e, t) => e.has(s) || me("Cannot " + t);
-var U = (s, e, t) => (ge(s, e, "read from private field"), t ? t.call(s) : e.get(s)), ye = (s, e, t) => e.has(s) ? me("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), le = (s, e, t, r) => (ge(s, e, "write to private field"), r ? r.call(s, t) : e.set(s, t), t);
-const Je = (s, e, t) => s + (e - s) * t;
-const Ge = (s, e, t) => {
-  const r = Math.max(s.length, e.length);
-  let n = "";
-  for (let i = 0; i < r; i++) {
-    let l = s.charCodeAt(i);
-    isNaN(l) && (l = 97);
-    let c = e.charCodeAt(i);
-    isNaN(c) && (c = 97), n += String.fromCharCode(l + (c - l) * t);
+const _ = [], qe = (t) => {
+  _.push(t);
+}, Fe = () => {
+  if (_.length === 0)
+    throw new Error("Cannot pop from empty scope stack");
+  _.pop();
+}, ge = () => _[_.length - 1] ?? null, Bt = () => _, Wt = () => _[_.length - 2] ?? null, L = (t, e) => {
+  qe(t);
+  try {
+    return e();
+  } finally {
+    Fe();
   }
-  return n;
-}, Xe = (s, e, t) => new Date(s.getTime() + (e.getTime() - s.getTime()) * t), Ye = (s, e) => e, Qe = (s) => typeof s == "number" ? Je : typeof s == "string" ? Ge : s instanceof Date ? Xe : Ye;
-var M;
-class ce {
-  /**
-   * Creates a new instance of `ElementPosition`.
-   * @param index - The index of the element.
-   * @param total - The total number of elements in the collection.
-   */
-  constructor(e, t) {
-    /**
-     * The counter of the element starting from 1.
-     */
-    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.
-     */
-    o(this, "isFirst");
-    /**
-     * Checks if the counter of the element is even.
-     * @returns `true` if the counter is even, `false` otherwise.
-     */
-    o(this, "isEven");
-    /**
-     * Checks if the counter of the element is odd.
-     * @returns `true` if the counter is odd, `false` otherwise.
-     */
-    o(this, "isOdd");
-    ye(this, M);
-    o(this, "dispose", () => {
-      var e;
-      (e = U(this, M)) == null || e.dispose(), le(this, M, 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;
+}, Ut = (t) => {
+  const e = new q();
+  try {
+    return L(e, () => t(e));
+  } finally {
+    e.dispose();
   }
-  /**
-   * Checks if the element is the last element in the collection.
-   * @returns `true` if the element is the last element, `false` otherwise.
-   */
-  get isLast() {
-    return U(this, M) == null && le(this, M, this.total.map((e) => this.counter === e)), U(this, M);
+}, oe = (t) => {
+  const e = _.slice();
+  _.length = 0;
+  try {
+    return t();
+  } finally {
+    _.length = 0, _.push(...e);
   }
-}
-M = new WeakMap();
-const B = class B {
+};
+class g {
   /**
    * Represents a signal with a value of type T.
    *
@@ -68,316 +35,94 @@ const B = class B {
    * @param equals - A function that determines whether two values of type T are equal.
    * @public
    */
-  constructor(e, t) {
-    /**
-     * @internal
-     */
-    o(this, "$__signal__", !0);
-    /**
-     * @internal
-     */
-    o(this, "_value");
-    /**
-     * @internal
-     */
-    o(this, "_derivatives", []);
-    /**
-     * @internal
-     */
-    o(this, "_onValueListeners", []);
-    /**
-     * @internal
-     */
-    o(this, "_onDisposeListeners", []);
-    /**
-     * Gets the current value of the signal.
-     * @returns The current value of the signal.
-     */
-    o(this, "get", () => this._value);
-    /**
-     * Checks if the signal has any registered listeners.
-     * @returns `true` if the signal has listeners, `false` otherwise.
-     */
-    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.
-     * @param options - Options for the listener.
-     */
-    o(this, "on", (e, t = {}) => {
-      t.skipInitial || e(this.get(), void 0);
-      const r = t.once ? (i, l) => {
-        n(), e(i, l);
-      } : 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
-     */
-    o(this, "_setAndNotify", (e) => {
-      if (this._disposed) return;
-      const t = this._value;
-      this.equals(t, e) || (this._value = e, this._onValueListeners.forEach((n) => n(e, t)));
-    });
-    /**
-     * @internal
-     */
-    o(this, "_disposed", !1);
-    /**
-     * Checks whether the signal is disposed.
-     * @returns True if the signal is disposed, false otherwise.
-     */
-    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.
-     */
-    o(this, "onDispose", (e) => {
-      this._onDisposeListeners.push(e);
-    });
-    /**
-     * Disposes the signal, releasing any resources associated with it.
-     */
-    o(this, "dispose", () => {
-      this._disposed || (this._disposed = !0, this._onDisposeListeners.forEach((e) => e()), this._onDisposeListeners.length = 0, this._derivatives.length = 0);
-    });
-    /**
-     * Creates a new computed signal by applying a transformation function to this signal's value.
-     *
-     * The `map` method is one of the most commonly used signal operations. It creates a new
-     * computed signal that automatically updates whenever the source signal changes. The
-     * transformation function is called with the current value and should return the new value.
-     *
-     * @example
-     * ```typescript
-     * const count = prop(5)
-     *
-     * // Transform to different types
-     * const doubled = count.map(n => n * 2)
-     * const message = count.map(n => `Count is ${n}`)
-     * const isEven = count.map(n => n % 2 === 0)
-     *
-     * // Use in UI
-     * html.div(
-     *   html.div('Original: ', count.map(String)),
-     *   html.div('Doubled: ', doubled.map(String)),
-     *   html.div('Message: ', message),
-     *   html.div('Is even: ', isEven.map(String))
-     * )
-     * ```
-     *
-     * @example
-     * ```typescript
-     * // Chain multiple transformations
-     * const user = prop({ name: 'John', age: 30 })
-     * const greeting = user
-     *   .map(u => u.name)
-     *   .map(name => name.toUpperCase())
-     *   .map(name => `Hello, ${name}!`)
-     * ```
-     *
-     * @example
-     * ```typescript
-     * // With custom equality function for objects
-     * const items = prop([{ id: 1, name: 'Item 1' }])
-     * const itemNames = items.map(
-     *   items => items.map(item => item.name),
-     *   (a, b) => JSON.stringify(a) === JSON.stringify(b) // deep equality
-     * )
-     * ```
-     *
-     * @typeParam O - The type of the transformed value
-     * @param fn - Function that transforms the signal's value to a new value
-     * @param equals - Optional function to determine if two transformed values are equal (defaults to strict equality)
-     * @returns A new computed signal with the transformed value
-     */
-    o(this, "map", (e, t = (r, n) => r === n) => {
-      const r = new N(() => {
-        try {
-          return e(this.get());
-        } catch (n) {
-          throw console.error("Error in Signal.map:", n), n;
-        }
-      }, t);
-      return this.setDerivative(r), r;
-    });
-    /**
-     * Returns a new Signal that applies the given function to the value of the current Signal,
-     * and then flattens the resulting Signal.
-     *
-     * @typeParam O - The type of the value emitted by the resulting Signal.
-     * @param fn - The function to apply to the value of the current Signal.
-     * @param equals - A function that determines whether two values of type O are equal.
-     *               Defaults to a strict equality check (===).
-     * @returns A new Signal that emits the values of the resulting Signal.
-     */
-    o(this, "flatMap", (e, t = (r, n) => r === n) => {
-      const r = new N(() => {
-        try {
-          return e(this.get()).get();
-        } catch (n) {
-          throw console.error("Error in Signal.flatMap:", n), n;
-        }
-      }, t);
-      return this.setDerivative(r), r;
-    });
-    /**
-     * Invokes a callback function with the current value of the signal, without modifying the signal.
-     *
-     * @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.
-     */
-    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.
-     */
-    o(this, "at", (e) => this.map((t) => t[e]));
-    /**
-     * @internal
-     */
-    o(this, "_$");
-    o(this, "filter", (e, t) => {
-      let r = t ?? this.get();
-      const n = new N(() => {
-        try {
-          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;
-    });
-    /**
-     * Returns a new Computed object that applies the provided mapping function to the value of this Signal,
-     * and filters out values that are `undefined` or `null`.
-     *
-     * @typeParam O - The type of the mapped value.
-     * @param fn - The mapping function to apply to the value of this Signal.
-     * @param startValue - The initial value for the Computed object.
-     * @param equals - Optional equality function to determine if two values are equal.
-     * @returns - A new Computed object with the mapped and filtered values.
-     */
-    o(this, "filterMap", (e, t, r = (n, i) => n === i) => {
-      let n = t;
-      const i = new N(() => {
-        try {
-          const l = this.get(), c = e(l);
-          return n = c ?? n;
-        } catch (l) {
-          throw console.error("Error in Signal.filterMap:", l), l;
-        }
-      }, r);
-      return this.setDerivative(i), i;
-    });
-    /**
-     * Maps the values emitted by the signal to a new value asynchronously using the provided function.
-     * If the function throws an error, it will be caught and logged.
-     * If a recovery function is provided, it will be called with the error and its return value will be used as the mapped value.
-     * If no recovery function is provided, the error will be logged as an unhandled promise rejection.
-     *
-     * @typeParam O - The type of the mapped value.
-     * @param fn - The function to map the values emitted by the signal. The second argument to this function allows to cancel the previously running mapping function if it has not completed by the time a new value is emitted.
-     * @param alt - The alternate value to use if the signal is disposed or the mapping function throws an error.
-     * @param recover - The recovery function to handle errors thrown by the mapping function.
-     * @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.
-     */
-    o(this, "mapAsync", (e, t, r, n = (i, l) => i === l) => {
-      const i = w(t, n);
-      let l = 0, c = new AbortController();
-      return i.onDispose(
-        this.on(async (a) => {
-          const u = ++l;
-          c.abort(), c = new AbortController();
-          try {
-            const h = await e(a, { abortSignal: c.signal });
-            u === l && i.set(h);
-          } catch (h) {
-            if (u === l)
-              if (r != null)
-                i.set(r(h));
-              else
-                throw h;
-          }
-        })
-      ), i;
-    });
-    /**
-     * Maps the values of the signal using the provided function `fn`, and returns a new signal
-     * containing the mapped values. If the mapped value is `undefined` or `null`, it is replaced
-     * with the provided `alt` value.
-     *
-     * @typeParam O - The type of the mapped value.
-     * @param fn - The function used to map the values of the signal.
-     * @param alt - The alternative value to use when the mapped value is `undefined` or `null`.
-     * @returns A new signal containing the mapped values.
-     */
-    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.
-     */
-    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;
-    });
-    /**
-     * Derives a new property from the current signal.
-     * @param options - The options for the derived property.
-     * @param options.autoDisposeProp - Determines whether the derived property should be automatically disposed.
-     * @param options.equals - A function that determines if two values are equal.
-     * @returns The derived property.
-     */
-    o(this, "deriveProp", ({
-      autoDisposeProp: e = !0,
-      equals: t
-    } = {}) => this.feedProp(w(this.get(), t), e));
-    /**
-     * Derives a new signal from the current signal. Useful to create a new signal that emits the same values as the current signal but can be disposed independently.
-     * @returns A new signal that emits the same values as the current signal.
-     */
-    o(this, "derive", () => this.map((e) => 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.
-     */
-    o(this, "count", () => {
-      let e = 0;
-      return this.map(() => ++e);
-    });
-    /**
-     * Adds a computed value as a derivative of the signal.
-     * When the computed value is disposed, it is automatically removed from the derivatives list.
-     * Additionally, when the computed value is disposed, it sets the signal as dirty.
-     * @param computed - The computed value to add as a derivative.
-     */
-    o(this, "setDerivative", (e) => {
-      this._derivatives.push(e), e.onDispose(() => {
-        this._derivatives.splice(
-          this._derivatives.indexOf(e),
-          1
-        );
-      }), e.onDispose(this.on(e.setDirty)), this.onDispose(e.dispose);
-    });
-    this.equals = t, this._value = e;
+  constructor(e, s) {
+    this.equals = s, this._value = e;
   }
+  /**
+   * Creates a Signal that holds the result of a Promise, with proper error handling.
+   *
+   * This static method creates a signal that starts with an initial value and updates
+   * when the promise resolves. If the promise rejects, an optional recovery function
+   * can provide a fallback value.
+   *
+   * @example
+   * ```typescript
+   * // Basic usage with API call
+   * const userData = Signal.ofPromise(
+   *   fetch('/api/user').then(r => r.json()),
+   *   { loading: true }, // initial state
+   *   error => ({ error: error.message, loading: false }) // error recovery
+   * )
+   *
+   * // Use in UI
+   * Ensure(userData,
+   *   (user) => html.div('Welcome, ', user.map(u => u.name)),
+   *   () => html.div('Loading...')
+   * )
+   * ```
+   *
+   * @example
+   * ```typescript
+   * // With custom equality function
+   * const config = Signal.ofPromise(
+   *   loadConfig(),
+   *   {},
+   *   () => ({}),
+   *   (a, b) => JSON.stringify(a) === JSON.stringify(b) // deep equality
+   * )
+   * ```
+   *
+   * @typeParam O - The type of the value returned by the Promise
+   * @param promise - The Promise to use to feed the Signal
+   * @param init - The initial value of the Signal before the Promise resolves
+   * @param recover - Optional function to recover from Promise rejection and provide an alternative value
+   * @param equals - Function to compare two values for equality (defaults to strict equality)
+   * @returns A Signal that represents the result of the Promise
+   */
+  static ofPromise = (e, s, r, n = (i, o) => i === o) => {
+    const i = new g(s, n);
+    return e.then((o) => i._setAndNotify(o)).catch((o) => {
+      r != null ? i._setAndNotify(r(o)) : console.error(
+        "Unhandled promise rejection in Signal.ofPromise:",
+        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.
+   */
+  static is = (e) => (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    e != null && e.$__signal__ === !0
+  );
+  /**
+   * @internal
+   */
+  $__signal__ = !0;
+  /**
+   * @internal
+   */
+  _value;
+  /**
+   * @internal
+   */
+  _derivatives = [];
+  /**
+   * @internal
+   */
+  _onValueListeners = [];
+  /**
+   * @internal
+   */
+  _onDisposeListeners = [];
+  /**
+   * Gets the current value of the signal.
+   * @returns The current value of the signal.
+   */
+  get = () => this._value;
   /**
    * Gets the value of the signal.
    * @returns The current value of the signal.
@@ -385,119 +130,355 @@ const B = class B {
   get value() {
     return this._value;
   }
+  /**
+   * Checks if the signal has any registered listeners.
+   * @returns `true` if the signal has listeners, `false` otherwise.
+   */
+  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.
+   * @param options - Options for the listener.
+   */
+  on = (e, s = {}) => {
+    s.skipInitial || e(this.get(), void 0);
+    const r = s.once ? (i, o) => {
+      n(), e(i, o);
+    } : e;
+    this._onValueListeners.push(r);
+    const n = () => {
+      this._onValueListeners.splice(
+        this._onValueListeners.indexOf(r),
+        1
+      ), s.abortSignal != null && s.abortSignal.removeEventListener("abort", n);
+    };
+    return s.abortSignal != null && s.abortSignal.addEventListener("abort", n), n;
+  };
+  /**
+   * Registers a listener function to be called whenever the value of the signal changes.
+   * The listener function will not be 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.
+   * @param options - Options for the listener.
+   */
+  onChange = (e, s = {}) => {
+    let r = 0;
+    const n = (i, o) => {
+      r++ > 0 && e(i, o);
+    };
+    return this.on(n, s);
+  };
+  /**
+   * @internal
+   */
+  _setAndNotify = (e) => {
+    if (this._disposed) return;
+    const s = this._value;
+    this.equals(s, e) || (this._value = e, this._onValueListeners.forEach((n) => n(e, s)));
+  };
+  /**
+   * @internal
+   */
+  _disposed = !1;
+  /**
+   * Checks whether the signal is disposed.
+   * @returns True if the signal is disposed, false otherwise.
+   */
+  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.
+   */
+  onDispose = (e) => {
+    this._onDisposeListeners.push(e);
+  };
+  /**
+   * Disposes the signal, releasing any resources associated with it.
+   */
+  dispose = () => {
+    this._disposed || (this._disposed = !0, this._onDisposeListeners.forEach((e) => e()), this._onDisposeListeners.length = 0, this._derivatives.length = 0);
+  };
+  /**
+   * Creates a new computed signal by applying a transformation function to this signal's value.
+   *
+   * The `map` method is one of the most commonly used signal operations. It creates a new
+   * computed signal that automatically updates whenever the source signal changes. The
+   * transformation function is called with the current value and should return the new value.
+   *
+   * @example
+   * ```typescript
+   * const count = prop(5)
+   *
+   * // Transform to different types
+   * const doubled = count.map(n => n * 2)
+   * const message = count.map(n => `Count is ${n}`)
+   * const isEven = count.map(n => n % 2 === 0)
+   *
+   * // Use in UI
+   * html.div(
+   *   html.div('Original: ', count.map(String)),
+   *   html.div('Doubled: ', doubled.map(String)),
+   *   html.div('Message: ', message),
+   *   html.div('Is even: ', isEven.map(String))
+   * )
+   * ```
+   *
+   * @example
+   * ```typescript
+   * // Chain multiple transformations
+   * const user = prop({ name: 'John', age: 30 })
+   * const greeting = user
+   *   .map(u => u.name)
+   *   .map(name => name.toUpperCase())
+   *   .map(name => `Hello, ${name}!`)
+   * ```
+   *
+   * @example
+   * ```typescript
+   * // With custom equality function for objects
+   * const items = prop([{ id: 1, name: 'Item 1' }])
+   * const itemNames = items.map(
+   *   items => items.map(item => item.name),
+   *   (a, b) => JSON.stringify(a) === JSON.stringify(b) // deep equality
+   * )
+   * ```
+   *
+   * **Auto-Disposal:** The returned computed signal is automatically registered with the current
+   * disposal scope (if one exists). When used within a renderable or `WithScope()`, the signal
+   * will be automatically disposed when the component unmounts. No manual `OnDispose()` needed!
+   *
+   * ```typescript
+   * const MyComponent: Renderable = (ctx) => {
+   *   const count = prop(0);
+   *   const doubled = count.map(x => x * 2);  // ✅ Auto-disposed
+   *   return html.div(doubled);
+   * };
+   * ```
+   *
+   * @typeParam O - The type of the transformed value
+   * @param fn - Function that transforms the signal's value to a new value
+   * @param equals - Optional function to determine if two transformed values are equal (defaults to strict equality)
+   * @returns A new computed signal with the transformed value (auto-registered with current scope)
+   */
+  map = (e, s = (r, n) => r === n) => {
+    const r = new $(() => {
+      try {
+        return e(this.get());
+      } catch (n) {
+        throw console.error("Error in Signal.map:", n), n;
+      }
+    }, s);
+    return this.setDerivative(r), r;
+  };
+  /**
+   * Returns a new Signal that applies the given function to the value of the current Signal,
+   * and then flattens the resulting Signal.
+   *
+   * @typeParam O - The type of the value emitted by the resulting Signal.
+   * @param fn - The function to apply to the value of the current Signal.
+   * @param equals - A function that determines whether two values of type O are equal.
+   *               Defaults to a strict equality check (===).
+   * @returns A new Signal that emits the values of the resulting Signal.
+   */
+  flatMap = (e, s = (r, n) => r === n) => {
+    const r = new $(() => {
+      try {
+        return e(this.get()).get();
+      } catch (n) {
+        throw console.error("Error in Signal.flatMap:", n), n;
+      }
+    }, s);
+    return this.setDerivative(r), r;
+  };
+  /**
+   * Invokes a callback function with the current value of the signal, without modifying the signal.
+   *
+   * @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.
+   */
+  tap = (e) => this.map((s) => (e(s), s));
+  /**
+   * 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.
+   */
+  at = (e) => this.map((s) => s[e]);
+  /**
+   * @internal
+   */
+  _$;
   /**
    * Represents a collection of signals mapping to each key/field in the wrapped value.
    * @typeParam T - The type of the signals.
    */
   get $() {
     return this._$ !== void 0 ? this._$ : this._$ = new Proxy(this, {
-      get: (e, t) => this.at(t)
+      get: (e, s) => this.at(s)
     });
   }
-};
-/**
- * Creates a Signal that holds the result of a Promise, with proper error handling.
- *
- * This static method creates a signal that starts with an initial value and updates
- * when the promise resolves. If the promise rejects, an optional recovery function
- * can provide a fallback value.
- *
- * @example
- * ```typescript
- * // Basic usage with API call
- * const userData = Signal.ofPromise(
- *   fetch('/api/user').then(r => r.json()),
- *   { loading: true }, // initial state
- *   error => ({ error: error.message, loading: false }) // error recovery
- * )
- *
- * // Use in UI
- * Ensure(userData,
- *   (user) => html.div('Welcome, ', user.map(u => u.name)),
- *   () => html.div('Loading...')
- * )
- * ```
- *
- * @example
- * ```typescript
- * // With custom equality function
- * const config = Signal.ofPromise(
- *   loadConfig(),
- *   {},
- *   () => ({}),
- *   (a, b) => JSON.stringify(a) === JSON.stringify(b) // deep equality
- * )
- * ```
- *
- * @typeParam O - The type of the value returned by the Promise
- * @param promise - The Promise to use to feed the Signal
- * @param init - The initial value of the Signal before the Promise resolves
- * @param recover - Optional function to recover from Promise rejection and provide an alternative value
- * @param equals - Function to compare two values for equality (defaults to strict equality)
- * @returns A Signal that represents the result of the Promise
- */
-o(B, "ofPromise", (e, t, r, n = (i, l) => i === l) => {
-  const i = new B(t, n);
-  return e.then((l) => i._setAndNotify(l)).catch((l) => {
-    r != null ? i._setAndNotify(r(l)) : console.error(
-      "Unhandled promise rejection in Signal.ofPromise:",
-      l
-    );
-  }), i;
-}), /**
- * Checks if a value is a Signal.
- *
- * @param value - The value to check.
- * @returns `true` if the value is a Signal, `false` otherwise.
- */
-o(B, "is", (e) => (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  e != null && e.$__signal__ === !0
-));
-let y = B;
-const Ze = typeof queueMicrotask == "function" ? queueMicrotask : (s) => Promise.resolve().then(s);
-class N extends y {
-  /**
-   * Represents a Signal object.
-   * @param _fn - The function that returns the value of the signal.
+  filter = (e, s) => {
+    let r = s ?? this.get();
+    const n = new $(() => {
+      try {
+        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;
+  };
+  /**
+   * Returns a new Computed object that applies the provided mapping function to the value of this Signal,
+   * and filters out values that are `undefined` or `null`.
+   *
+   * @typeParam O - The type of the mapped value.
+   * @param fn - The mapping function to apply to the value of this Signal.
+   * @param startValue - The initial value for the Computed object.
+   * @param equals - Optional equality function to determine if two values are equal.
+   * @returns - A new Computed object with the mapped and filtered values.
+   */
+  filterMap = (e, s, r = (n, i) => n === i) => {
+    let n = s;
+    const i = new $(() => {
+      try {
+        const o = this.get(), l = e(o);
+        return n = l ?? n;
+      } catch (o) {
+        throw console.error("Error in Signal.filterMap:", o), o;
+      }
+    }, r);
+    return this.setDerivative(i), i;
+  };
+  /**
+   * Maps the values emitted by the signal to a new value asynchronously using the provided function.
+   * If the function throws an error, it will be caught and logged.
+   * If a recovery function is provided, it will be called with the error and its return value will be used as the mapped value.
+   * If no recovery function is provided, the error will be logged as an unhandled promise rejection.
+   *
+   * @typeParam O - The type of the mapped value.
+   * @param fn - The function to map the values emitted by the signal. The second argument to this function allows to cancel the previously running mapping function if it has not completed by the time a new value is emitted.
+   * @param alt - The alternate value to use if the signal is disposed or the mapping function throws an error.
+   * @param recover - The recovery function to handle errors thrown by the mapping function.
+   * @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.
+   */
+  mapAsync = (e, s, r, n = (i, o) => i === o) => {
+    const i = T(s, n);
+    let o = 0, l = new AbortController();
+    return i.onDispose(
+      this.on(async (c) => {
+        const a = ++o;
+        l.abort(), l = new AbortController();
+        try {
+          const u = await e(c, { abortSignal: l.signal });
+          a === o && i.set(u);
+        } catch (u) {
+          if (a === o)
+            if (r != null)
+              i.set(r(u));
+            else
+              throw u;
+        }
+      })
+    ), i;
+  };
+  /**
+   * Maps the values of the signal using the provided function `fn`, and returns a new signal
+   * containing the mapped values. If the mapped value is `undefined` or `null`, it is replaced
+   * with the provided `alt` value.
+   *
+   * @typeParam O - The type of the mapped value.
+   * @param fn - The function used to map the values of the signal.
+   * @param alt - The alternative value to use when the mapped value is `undefined` or `null`.
+   * @returns A new signal containing the mapped values.
+   */
+  mapMaybe = (e, s) => this.map((r) => e(r) ?? s);
+  /**
+   * 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.
+   */
+  feedProp = (e, s = !1) => {
+    const r = this.on(e.set);
+    return e.onDispose(r), s ? this.onDispose(e.dispose) : this.onDispose(r), e;
+  };
+  /**
+   * Derives a new property from the current signal.
+   * @param options - The options for the derived property.
+   * @param options.autoDisposeProp - Determines whether the derived property should be automatically disposed.
+   * @param options.equals - A function that determines if two values are equal.
+   * @returns The derived property.
+   */
+  deriveProp = ({
+    autoDisposeProp: e = !0,
+    equals: s
+  } = {}) => this.feedProp(T(this.get(), s), e);
+  /**
+   * Derives a new signal from the current signal. Useful to create a new signal that emits the same values as the current signal but can be disposed independently.
+   * @returns A new signal that emits the same values as the current signal.
+   */
+  derive = () => this.map((e) => 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.
+   */
+  count = () => {
+    let e = 0;
+    return this.map(() => ++e);
+  };
+  /**
+   * Adds a computed value as a derivative of the signal.
+   * When the computed value is disposed, it is automatically removed from the derivatives list.
+   * Additionally, when the computed value is disposed, it sets the signal as dirty.
+   * @param computed - The computed value to add as a derivative.
+   */
+  setDerivative = (e) => {
+    this._derivatives.push(e), e.onDispose(() => {
+      this._derivatives.splice(
+        this._derivatives.indexOf(e),
+        1
+      );
+    }), e.onDispose(this.on(e.setDirty)), this.onDispose(e.dispose);
+  };
+}
+const Be = typeof queueMicrotask == "function" ? queueMicrotask : (t) => Promise.resolve().then(t);
+class $ extends g {
+  /**
+   * Creates a new Computed signal.
+   *
+   * **Auto-Registration:** This constructor automatically registers the signal with the current
+   * disposal scope (if one exists). This ensures that computed signals created by methods like
+   * `.map()`, `.flatMap()`, `.filter()`, etc. are automatically tracked and disposed.
+   *
+   * When a computed signal is created within a renderable or `WithScope()`, it will be
+   * automatically disposed when the component unmounts or the scope is disposed.
+   *
+   * To create a computed signal that outlives the current scope, use `untracked()`:
+   * ```typescript
+   * const globalSignal = untracked(() => mySignal.map(x => x * 2));
+   * // Remember to dispose manually: globalSignal.dispose()
+   * ```
+   *
+   * @param _fn - The function that computes the value of the signal.
    * @param equals - The function used to compare two values of type T for equality.
+   *
+   * @see {@link computed} - Factory function for creating computed signals with explicit dependencies
+   * @see {@link Signal.map} - Creates a computed signal by transforming values
+   * @see {@link getCurrentScope} - Get the current disposal scope
+   * @see {@link untracked} - Create signals outside of scope tracking
    */
-  constructor(t, r) {
-    super(void 0, r);
-    /**
-     * @internal
-     */
-    o(this, "$__computed__", !0);
-    /**
-     * @internal
-     */
-    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.
-     */
-    o(this, "setDirty", () => {
-      this._isDirty || this._disposed || (this._isDirty = !0, this._derivatives.forEach((t) => t.setDirty()), this._scheduleNotify());
-    });
-    /**
-     * @internal
-     */
-    o(this, "_scheduleCount", 0);
-    /**
-     * Schedules a notification to be executed asynchronously.
-     * If the signal is dirty, it will be updated and notified.
-     * @internal
-     */
-    o(this, "_scheduleNotify", () => {
-      const t = ++this._scheduleCount;
-      Ze(() => {
-        this._scheduleCount !== t || this._disposed || this._isDirty && (this._isDirty = !1, this._setAndNotify(this._fn()));
-      });
-    });
-    /** {@inheritDoc Signal.get} */
-    o(this, "get", () => (this._isDirty && (this._isDirty = !1, this._setAndNotify(this._fn())), this._value));
-    this._fn = t, this.setDirty();
+  constructor(e, s) {
+    super(void 0, s), this._fn = e, this.setDirty();
+    const r = ge();
+    r?.track(this);
   }
   /**
    * Checks if a value is an instance of `Computed`.
@@ -505,137 +486,174 @@ class N extends y {
    * @param value - The value to check.
    * @returns `true` if the value is an instance of `Computed`, `false` otherwise.
    */
-  static is(t) {
-    return t != null && t.$__computed__ === !0;
-  }
+  static is(e) {
+    return e != null && e.$__computed__ === !0;
+  }
+  /**
+   * @internal
+   */
+  $__computed__ = !0;
+  /**
+   * @internal
+   */
+  _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.
+   */
+  setDirty = () => {
+    this._isDirty || this._disposed || (this._isDirty = !0, this._derivatives.forEach((e) => e.setDirty()), this._scheduleNotify());
+  };
+  /**
+   * @internal
+   */
+  _scheduleCount = 0;
+  /**
+   * Schedules a notification to be executed asynchronously.
+   * If the signal is dirty, it will be updated and notified.
+   * @internal
+   */
+  _scheduleNotify = () => {
+    const e = ++this._scheduleCount;
+    Be(() => {
+      this._scheduleCount !== e || this._disposed || this._isDirty && (this._isDirty = !1, this._setAndNotify(this._fn()));
+    });
+  };
+  /** {@inheritDoc Signal.get} */
+  get = () => (this._isDirty && (this._isDirty = !1, this._setAndNotify(this._fn())), this._value);
   /** {@inheritDoc Signal.value} */
   get value() {
     return this.get();
   }
+  /**
+   * Disposes the computed signal and cancels any pending recomputations.
+   * This override increments the schedule count to invalidate all pending
+   * microtasks before disposing the signal.
+   */
+  dispose = () => {
+    this._disposed || (this._scheduleCount++, this._disposed = !0, this._onDisposeListeners.forEach((e) => e()), this._onDisposeListeners.length = 0, this._derivatives.length = 0);
+  };
 }
-const ee = class ee extends y {
-  constructor() {
-    super(...arguments);
-    /**
-     * @internal
-     */
-    o(this, "$__prop__", !0);
-    /**
-     * Changes the value of the property and notifies its listeners.
-     *
-     * @param value - The new value of the property.
-     */
-    o(this, "set", (t) => {
-      this._setAndNotify(t);
-    });
-    /**
-     * 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.
-     */
-    o(this, "update", (t) => {
-      this._setAndNotify(t(this.get()));
-    });
-    /**
-     * Creates a reducer function that combines the provided reducer function and effects.
-     * @param fn - The reducer function that takes the current state and an action, and returns the new state.
-     * @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.
-     */
-    o(this, "reducer", (t, ...r) => {
-      const n = this;
-      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: i
-          })
-        );
-      };
-    });
-    /**
-     * Creates an isomorphism for the Signal.
-     * An isomorphism is a pair of functions that convert values between two types,
-     * along with an equality function to compare values of the second type.
-     *
-     * @param to - A function that converts values from type T to type O.
-     * @param from - A function that converts values from type O to type T.
-     * @param equals - An optional function that compares values of type O for equality.
-     *                Defaults to a strict equality check (===).
-     * @returns A Prop object representing the isomorphism.
-     */
-    o(this, "iso", (t, r, n = (i, l) => i === l) => {
-      const i = new ee(t(this.get()), n);
-      return i.onDispose(this.on((l) => i.set(t(l)))), i.on((l) => this._setAndNotify(r(l))), i;
-    });
-    /**
-     * Returns a `Prop` that represents the value at the specified key of the current value.
-     *
-     * @param key - The key of the value to access.
-     * @returns A `Prop` that represents the value at the specified key.
-     */
-    o(this, "atProp", (t) => this.iso(
-      (r) => r[t],
-      (r) => ({ ...this.value, [t]: r })
-    ));
-  }
+class Z extends g {
+  /**
+   * Checks if a value is a Prop.
+   * @param value - The value to check.
+   * @returns `true` if the value is a Prop, `false` otherwise.
+   */
+  static is = (e) => (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    e != null && e.$__prop__ === !0
+  );
+  /**
+   * @internal
+   */
+  $__prop__ = !0;
+  /**
+   * Changes the value of the property and notifies its listeners.
+   *
+   * @param value - The new value of the property.
+   */
+  set = (e) => {
+    this._setAndNotify(e);
+  };
+  /**
+   * 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.
+   */
+  update = (e) => {
+    this._setAndNotify(e(this.get()));
+  };
+  /**
+   * Creates a reducer function that combines the provided reducer function and effects.
+   * @param fn - The reducer function that takes the current state and an action, and returns the new state.
+   * @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.
+   */
+  reducer = (e, ...s) => {
+    const r = this;
+    return function n(i) {
+      const o = r.value;
+      r.update((l) => e(l, i)), !r.equals(o, r.value) && s.forEach(
+        (l) => l({
+          previousState: o,
+          state: r.value,
+          action: i,
+          dispatch: n
+        })
+      );
+    };
+  };
+  /**
+   * Creates an isomorphism for the Signal.
+   * An isomorphism is a pair of functions that convert values between two types,
+   * along with an equality function to compare values of the second type.
+   *
+   * @param to - A function that converts values from type T to type O.
+   * @param from - A function that converts values from type O to type T.
+   * @param equals - An optional function that compares values of type O for equality.
+   *                Defaults to a strict equality check (===).
+   * @returns A Prop object representing the isomorphism.
+   */
+  iso = (e, s, r = (n, i) => n === i) => {
+    const n = new Z(e(this.get()), r);
+    return n.onDispose(this.on((i) => n.set(e(i)))), n.on((i) => this._setAndNotify(s(i))), n;
+  };
+  /**
+   * Returns a `Prop` that represents the value at the specified key of the current value.
+   *
+   * @param key - The key of the value to access.
+   * @returns A `Prop` that represents the value at the specified key.
+   */
+  atProp = (e) => this.iso(
+    (s) => s[e],
+    (s) => ({ ...this.value, [e]: s })
+  );
   /**
    *  Access for the current value of the property.
    */
   get value() {
     return this.get();
   }
-  set value(t) {
-    this._setAndNotify(t);
+  set value(e) {
+    this._setAndNotify(e);
   }
-};
-/**
- * Checks if a value is a Prop.
- * @param value - The value to check.
- * @returns `true` if the value is a Prop, `false` otherwise.
- */
-o(ee, "is", (t) => (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  t != null && t.$__prop__ === !0
-));
-let G = ee;
-const ae = (s, e, t = (r, n) => r === n) => {
-  const r = new N(s, t);
+}
+const z = (t, e, s = (r, n) => r === n) => {
+  const r = new $(t, s);
   return e.forEach((n) => n.setDerivative(r)), r;
-}, ze = (s, e, t = {}) => {
-  let r = t.once ? () => {
-    i(), s();
-  } : s;
-  if (t.skipInitial) {
-    let l = !1;
-    const c = r;
+}, me = (t, e, s = {}) => {
+  let r = s.once ? () => {
+    i(), t();
+  } : t;
+  if (s.skipInitial) {
+    let o = !1;
+    const l = r;
     r = () => {
-      l ? c() : l = !0;
+      o ? l() : o = !0;
     };
   }
-  const n = ae(r, e), i = () => {
-    n.dispose(), t.abortSignal != null && t.abortSignal.removeEventListener("abort", i);
+  const n = z(r, e), i = () => {
+    n.dispose(), s.abortSignal != null && s.abortSignal.removeEventListener("abort", i);
   };
-  return t.abortSignal != null && t.abortSignal.addEventListener("abort", i), i;
-}, w = (s, e = (t, r) => t === r) => new G(s, e), te = (s, e = (t, r) => t === r) => new y(s, e), ue = () => (
-  /* c8 ignore next */
-  typeof window < "u" ? window : void 0
-);
-function Se(s) {
-  return s != null && s !== !1 && s !== 0 && s !== "";
+  return s.abortSignal != null && s.abortSignal.addEventListener("abort", i), i;
+}, T = (t, e = (s, r) => s === r) => {
+  const s = new Z(t, e), r = ge();
+  return r?.track(s), s;
+}, K = (t, e = (s, r) => s === r) => new g(t, e);
+function ye(t) {
+  return t != null && t !== !1 && t !== 0 && t !== "";
 }
-function Ke(s) {
-  return !Se(s);
+function We(t) {
+  return !ye(t);
 }
-function et(s) {
-  return s == null;
+function Ue(t) {
+  return t == null;
 }
-function tt(s) {
-  return s != null;
+function Je(t) {
+  return t != null;
 }
-const b = {
+const y = {
   /**
    * 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.
@@ -647,7 +665,7 @@ const b = {
    * @param fn - The function to map the value.
    * @returns The mapped value.
    */
-  map: (s, e) => y.is(s) ? s.map(e) : e(s),
+  map: (t, e) => g.is(t) ? t.map(e) : e(t),
   /**
    * Wraps a value or a Signal instance into a Signal.
    * If the value is already a Signal, it returns the value itself.
@@ -658,30 +676,30 @@ const b = {
    * @param equals - A function that determines if two values are equal. Defaults to strict equality (===).
    * @returns A Signal instance.
    */
-  toSignal: (s, e) => y.is(s) ? s : te(s, e),
+  toSignal: (t, e) => g.is(t) ? t.derive() : K(t, 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.
    * @param value - The value to wrap or check.
    * @returns The wrapped value if it is not `null` or `undefined`, otherwise `null` or `undefined`.
    */
-  maybeToSignal: (s, e) => {
-    if (s != null)
-      return b.toSignal(s, e);
+  maybeToSignal: (t, e) => {
+    if (t != null)
+      return y.toSignal(t, e);
   },
   /**
    * Gets the value from a `Signal` or the value itself if it is not a `Signal`.
    * @param value - The value or Signal instance to get the value from.
    * @returns The value.
    */
-  get: (s) => y.is(s) ? s.get() : s,
+  get: (t) => g.is(t) ? t.get() : t,
   /**
    * Adds a listener to a `Signal` or calls the listener immediately if it is not a `Signal`.
    * @param value - The value or Signal instance to add the listener to.
    * @param listener - The listener to call when the value changes.
    * @returns A function to remove the listener.
    */
-  on: (s, e) => y.is(s) ? s.on(e) : (e(s), () => {
+  on: (t, e) => g.is(t) ? t.on(e) : (e(t), () => {
   }),
   /**
    * Disposes of a value or a Signal.
@@ -689,9 +707,17 @@ const b = {
    * If the value is not a Signal, it does nothing.
    * @param value - The value or Signal instance to dispose of.
    */
-  dispose: (s) => {
-    y.is(s) && s.dispose();
+  dispose: (t) => {
+    g.is(t) && t.dispose();
   },
+  /**
+   * Returns a function that disposes of a value or a Signal.
+   * If the value is a Signal, it returns a function that disposes of the Signal.
+   * If the value is not a Signal, it returns a function that does nothing.
+   * @param value - The value or Signal instance to dispose of.
+   * @returns A function to dispose of the value or Signal.
+   */
+  disposeFn: (t) => () => y.dispose(t),
   /**
    * Derives a Prop from a Signal.
    * If the value is a Signal, it returns a new Prop with the derived value.
@@ -702,522 +728,463 @@ const b = {
    * @param options.equals - A function that determines if two values are equal.
    * @returns A Prop instance.
    */
-  deriveProp: (s, {
+  deriveProp: (t, {
     autoDisposeProp: e = !0,
-    equals: t
-  } = {}) => y.is(s) ? s.deriveProp({ autoDisposeProp: e, equals: t }) : w(s, t),
+    equals: s
+  } = {}) => g.is(t) ? t.deriveProp({ autoDisposeProp: e, equals: s }) : T(t, s),
   /**
    * Creates a new signal that emits `true` if the value is truthy, `false` otherwise.
    * @param value - The value or signal to check.
    * @returns A signal that emits `true` if the value is truthy, `false` otherwise.
    */
-  truthy: (s) => b.map(s, Se),
+  truthy: (t) => y.map(t, ye),
   /**
    * Creates a new signal that emits `true` if the value is falsy, `false` otherwise.
    * @param value - The value or signal to check.
    * @returns A signal that emits `true` if the value is falsy, `false` otherwise.
    */
-  falsy: (s) => b.map(s, Ke),
+  falsy: (t) => y.map(t, We),
   /**
    * Creates a new signal that emits `true` if the value is null or undefined, `false` otherwise.
    * @param value - The value or signal to check.
    * @returns A signal that emits `true` if the value is null or undefined, `false` otherwise.
    */
-  nil: (s) => b.map(s, et),
+  nil: (t) => y.map(t, Ue),
   /**
    * Creates a new signal that emits `true` if the value is not null or undefined, `false` otherwise.
    * @param value - The value or signal to check.
    * @returns A signal that emits `true` if the value is not null or undefined, `false` otherwise.
    */
-  defined: (s) => b.map(s, tt)
-}, he = (...s) => (e, t) => {
-  if (s.length === 1)
-    return b.toSignal(s[0]).map(e);
-  const r = s.filter((n) => y.is(n));
-  return ae(
-    () => e(...s.map((n) => b.get(n))),
+  defined: (t) => y.map(t, Je)
+}, ee = (...t) => (e, s) => {
+  if (t.length === 1)
+    return y.toSignal(t[0]).map(e);
+  const r = t.filter((n) => g.is(n));
+  return z(
+    () => e(...t.map((n) => y.get(n))),
     r,
-    t
+    s
   );
-}, Jt = (s) => {
-  const e = Object.keys(s);
-  return he(...Object.values(s))(
-    (...t) => Object.fromEntries(e.map((r, n) => [r, t[n]]))
+}, Jt = (t) => {
+  const e = Object.keys(t);
+  return ee(...Object.values(t))(
+    (...s) => Object.fromEntries(e.map((r, n) => [r, s[n]]))
   );
-}, Gt = (...s) => (e, t = {}) => {
-  const r = s.filter((n) => y.is(n));
-  return ze(
-    () => e(...s.map(b.get)),
+}, Ge = (...t) => (e, s = {}) => {
+  const r = t.filter((n) => g.is(n));
+  return me(
+    () => e(...t.map(y.get)),
     r,
-    t
+    s
   );
 };
-class ve {
-  constructor() {
-    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.
-     */
-    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.
-     */
-    o(this, "setItem", (e, t) => {
-      this._store.set(e, t);
-    });
+class q {
+  _signals = /* @__PURE__ */ new Set();
+  _callbacks = [];
+  _disposed = !1;
+  /**
+   * Register a signal with this scope for automatic disposal.
+   *
+   * @param signal - The signal to track
+   * @throws Error if the scope has already been disposed
+   * @throws Error if the signal has already been disposed
+   * @public
+   */
+  track(e) {
+    if (this._disposed)
+      throw new Error("Cannot track signal in disposed scope");
+    if (e.isDisposed())
+      throw new Error("Cannot track already disposed signal");
+    this._signals.add(e);
+  }
+  /**
+   * Register a disposal callback to be called when this scope is disposed.
+   * Callbacks are called before signals are disposed.
+   * Use this for cleanup that doesn't need the `removeTree` parameter.
+   *
+   * @param callback - The callback to call on disposal
+   * @throws Error if the scope has already been disposed
+   * @public
+   */
+  onDispose(e) {
+    if (this._disposed)
+      throw new Error("Cannot register callback in disposed scope");
+    this._callbacks.push(e);
+  }
+  /**
+   * Dispose all signals tracked by this scope.
+   * This method is idempotent - calling it multiple times is safe.
+   *
+   * @public
+   */
+  dispose() {
+    if (!this._disposed) {
+      this._disposed = !0;
+      for (const e of this._callbacks)
+        try {
+          e();
+        } catch (s) {
+          console.error("Error in disposal callback:", s);
+        }
+      this._callbacks.length = 0;
+      for (const e of this._signals)
+        e.dispose();
+      this._signals.clear();
+    }
+  }
+  /**
+   * Check if this scope has been disposed.
+   *
+   * @returns true if the scope has been disposed
+   * @public
+   */
+  get disposed() {
+    return this._disposed;
+  }
+  /**
+   * Creates a prop signal and tracks it in this scope.
+   * Use this method in async contexts where automatic tracking doesn't work.
+   *
+   * @param value - The initial value
+   * @param equals - Optional equality function
+   * @returns A tracked Prop signal
+   * @public
+   */
+  prop(e, s) {
+    const r = oe(() => T(e, s));
+    return this.track(r), r;
+  }
+  /**
+   * Creates a computed signal and tracks it in this scope.
+   * Use this method in async contexts where automatic tracking doesn't work.
+   *
+   * @param fn - The computation function
+   * @param dependencies - Array of signals this computed depends on
+   * @param equals - Optional equality function
+   * @returns A tracked Computed signal
+   * @public
+   */
+  computed(e, s, r) {
+    const n = oe(() => z(e, s, r));
+    return this.track(n), n;
+  }
+  /**
+   * Creates an effect and tracks it in this scope.
+   * Use this method in async contexts where automatic tracking doesn't work.
+   *
+   * @param fn - The effect function
+   * @param signals - Array of signals to listen to
+   * @param options - Optional listener options
+   * @returns A clear function (the effect itself is tracked in the scope)
+   * @public
+   */
+  effect(e, s, r) {
+    return L(this, () => me(e, s, r));
+  }
+  /**
+   * Creates a computed signal with curried signature and tracks it in this scope.
+   * Use this method in async contexts where automatic tracking doesn't work.
+   *
+   * @param args - Values or signals to compute from
+   * @returns A function that takes the computation function and returns a tracked Computed signal
+   * @public
+   */
+  computedOf(...e) {
+    return (s, r) => {
+      const n = oe(() => ee(...e)(s, r));
+      return this.track(n), n;
+    };
+  }
+  /**
+   * Creates an effect with curried signature and tracks it in this scope.
+   * Use this method in async contexts where automatic tracking doesn't work.
+   *
+   * @param args - Values or signals to listen to
+   * @returns A function that takes the effect function and returns a clear function
+   * @public
+   */
+  effectOf(...e) {
+    return (s, r) => L(this, () => Ge(...e)(s, r));
+  }
+}
+const Xe = (t, e, s) => t + (e - t) * s, de = 97, Ye = (t, e, s) => {
+  const r = Math.max(t.length, e.length);
+  let n = "";
+  for (let i = 0; i < r; i++) {
+    let o = t.charCodeAt(i);
+    isNaN(o) && (o = de);
+    let l = e.charCodeAt(i);
+    isNaN(l) && (l = de), n += String.fromCharCode(o + (l - o) * s);
+  }
+  return n;
+}, Qe = (t, e, s) => new Date(t.getTime() + (e.getTime() - t.getTime()) * s), Ze = (t, e) => e, ze = (t) => typeof t == "number" ? Xe : typeof t == "string" ? Ye : t instanceof Date ? Qe : Ze;
+class le {
+  /**
+   * Creates a new instance of `ElementPosition`.
+   * @param index - The index of the element.
+   * @param total - The total number of elements in the collection.
+   */
+  constructor(e, s) {
+    this.index = e, this.total = s, this.counter = e + 1, this.isFirst = e === 0, this.isEven = e % 2 === 1, this.isOdd = e % 2 === 0;
+  }
+  /**
+   * The counter of the element starting from 1.
+   */
+  counter;
+  /**
+   * Checks if the element is the first element in the collection.
+   * @returns `true` if the element is the first element, `false` otherwise.
+   */
+  isFirst;
+  /**
+   * Checks if the counter of the element is even.
+   * @returns `true` if the counter is even, `false` otherwise.
+   */
+  isEven;
+  /**
+   * Checks if the counter of the element is odd.
+   * @returns `true` if the counter is odd, `false` otherwise.
+   */
+  isOdd;
+  #e;
+  /**
+   * Checks if the element is the last element in the collection.
+   * @returns `true` if the element is the last element, `false` otherwise.
+   */
+  get isLast() {
+    return this.#e == null && (this.#e = this.total.map((e) => this.counter === e)), this.#e;
   }
+  /**
+   * Disposes the internal signal created by `isLast`.
+   *
+   * **Note:** With automatic signal disposal, this method is now a no-op when used within
+   * a disposal scope (e.g., inside a renderable). The signal created by `isLast` is
+   * automatically tracked and disposed when the scope ends. This method is kept for
+   * backward compatibility and for cases where ElementPosition is used outside a scope.
+   */
+  dispose = () => {
+    this.#e?.dispose(), this.#e = void 0;
+  };
+}
+const ce = () => (
+  /* c8 ignore next */
+  typeof window < "u" ? window : void 0
+);
+class be {
+  _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.
+   */
+  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.
+   */
+  setItem = (e, s) => {
+    this._store.set(e, s);
+  };
 }
-const Ae = ({
-  key: s,
+const Se = ({
+  key: t,
   defaultValue: e,
-  store: t,
+  store: s,
   serialize: r = JSON.stringify,
   deserialize: n = JSON.parse,
-  equals: i = (u, h) => u === h,
-  onLoad: l = (u) => u,
-  syncTabs: c = !0,
-  onKeyChange: a = "load"
+  equals: i = (a, u) => a === u,
+  onLoad: o = (a) => a,
+  syncTabs: l = !0,
+  onKeyChange: c = "load"
 }) => {
-  let u = b.get(s);
-  const h = t.getItem(u), d = new G(
-    h != null ? l(n(h)) : typeof e == "function" ? e() : e,
+  let a = y.get(t);
+  const u = s.getItem(a), h = new Z(
+    u != null ? o(n(u)) : typeof e == "function" ? e() : e,
     i
-  ), p = ue(), m = c && typeof (p == null ? void 0 : p.BroadcastChannel) == "function";
-  let g = !1, S = null, P = null;
-  const A = (T) => {
-    if (!m) return null;
-    const H = `tempo:storedProp:${T}`, v = new p.BroadcastChannel(H), k = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`, O = (W) => {
-      const E = W.data;
-      if (!(E == null || typeof E != "object" || E.key !== T || typeof E.value != "string" || E.sourceId != null && E.sourceId === k))
+  ), p = ce(), f = l && typeof p?.BroadcastChannel == "function";
+  let m = !1, S = null, D = null;
+  const w = (b) => {
+    if (!f) return null;
+    const k = `tempo:storedProp:${b}`, A = new p.BroadcastChannel(k), M = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`, x = (F) => {
+      const v = F.data;
+      if (!(v == null || typeof v != "object" || v.key !== b || typeof v.value != "string" || v.sourceId != null && v.sourceId === M))
         try {
-          g = !0;
-          const oe = l(n(E.value));
-          d.set(oe);
-        } catch (oe) {
+          m = !0;
+          const ie = o(n(v.value));
+          h.set(ie);
+        } catch (ie) {
           console.warn(
-            `Failed to sync storedProp for key "${T}" via BroadcastChannel`,
-            oe
+            `Failed to sync storedProp for key "${b}" via BroadcastChannel`,
+            ie
           );
         } finally {
-          g = !1;
+          m = !1;
         }
     };
-    return v.addEventListener("message", O), d.onDispose(() => {
-      v == null || v.removeEventListener("message", O), v == null || v.close();
-    }), { channel: v, instanceId: k, handleMessage: O };
-  }, L = A(u);
-  L && (S = L.channel, P = L.instanceId);
-  const ie = (T) => {
-    const H = u;
-    if (H === T) return;
-    const v = d.get(), k = r(v);
-    if (t.setItem(H, k), S != null && (S.close(), S = null, P = null), u = T, a === "load") {
-      const W = t.getItem(T);
-      if (W != null)
+    return A.addEventListener("message", x), h.onDispose(() => {
+      A?.removeEventListener("message", x), A?.close();
+    }), { channel: A, instanceId: M, handleMessage: x };
+  }, P = w(a);
+  P && (S = P.channel, D = P.instanceId);
+  const ne = (b) => {
+    const k = a;
+    if (k === b) return;
+    const A = h.get(), M = r(A);
+    if (s.setItem(k, M), S != null && (S.close(), S = null, D = null), a = b, c === "load") {
+      const F = s.getItem(b);
+      if (F != null)
         try {
-          const E = l(n(W));
-          d.set(E);
-        } catch (E) {
+          const v = o(n(F));
+          h.set(v);
+        } catch (v) {
           console.warn(
-            `Failed to load storedProp from new key "${T}"`,
-            E
+            `Failed to load storedProp from new key "${b}"`,
+            v
           );
         }
       else
-        t.setItem(T, k);
-    } else a === "migrate" && t.setItem(T, k);
-    const O = A(T);
-    O && (S = O.channel, P = O.instanceId);
-  };
-  return y.is(s) && d.onDispose(s.on(ie)), d.on((T, H) => {
-    const v = r(T);
-    t.setItem(u, v), S != null && !g && H !== void 0 && P != null && S.postMessage({
-      key: u,
-      value: v,
-      sourceId: P
+        s.setItem(b, M);
+    } else c === "migrate" && s.setItem(b, M);
+    const x = w(b);
+    x && (S = x.channel, D = x.instanceId);
+  };
+  return g.is(t) && h.onDispose(t.on(ne)), h.on((b, k) => {
+    const A = r(b);
+    s.setItem(a, A), S != null && !m && k !== void 0 && D != null && S.postMessage({
+      key: a,
+      value: A,
+      sourceId: D
     });
-  }), d;
-}, Xt = (s) => {
-  var e;
-  return Ae({
-    ...s,
-    /* c8 ignore next 3 */
-    store: ((e = ue()) == null ? void 0 : e.localStorage) ?? new ve()
-  });
-}, Yt = (s) => {
-  var e;
-  return Ae({
-    ...s,
-    /* c8 ignore next 3 */
-    store: ((e = ue()) == null ? void 0 : e.sessionStorage) ?? new ve()
-  });
-};
-function be(s) {
-  return typeof requestAnimationFrame == "function" ? requestAnimationFrame(s) : setTimeout(s, 0);
+  }), h;
+}, Gt = (t) => Se({
+  ...t,
+  /* c8 ignore next 3 */
+  store: ce()?.localStorage ?? new be()
+}), Xt = (t) => Se({
+  ...t,
+  /* c8 ignore next 3 */
+  store: ce()?.sessionStorage ?? new be()
+});
+function fe(t) {
+  return typeof requestAnimationFrame == "function" ? requestAnimationFrame(t) : setTimeout(t, 0);
 }
-const st = (s, e, t, r) => {
-  const n = (r == null ? void 0 : r.duration) ?? 300, i = (r == null ? void 0 : r.easing) ?? ((A) => A), l = (r == null ? void 0 : r.equals) ?? ((A, L) => A === L);
-  let c = r == null ? void 0 : r.interpolate, a = s, u = e(), h = performance.now(), d = null, p = !0;
-  const m = new N(e, l), g = w(s, l);
-  g.onDispose(() => {
-    d !== null && cancelAnimationFrame(d);
-  }), g.onDispose(m.dispose), t.forEach((A) => {
-    A.setDerivative(m), A.onDispose(g.dispose);
+const Ke = (t, e, s, r) => {
+  const n = r?.duration ?? 300, i = r?.easing ?? ((w) => w), o = r?.equals ?? ((w, P) => w === P);
+  let l = r?.interpolate, c = t, a = e(), u = performance.now(), h = null, p = !0;
+  const f = new $(e, o), m = T(t, o);
+  m.onDispose(() => {
+    h !== null && cancelAnimationFrame(h);
+  }), m.onDispose(f.dispose), s.forEach((w) => {
+    w.setDerivative(f), w.onDispose(m.dispose);
   });
-  const S = (A) => {
-    u = A, h = performance.now(), a = g.value, p && (p = !1, d = be(P));
-  }, P = () => {
-    const L = (performance.now() - h) / b.get(n), ie = i(L);
-    c == null && (c = Qe(a));
-    let T = c(a, u, ie);
-    L >= 1 ? (p = !0, T = u) : d = be(P), g.set(T);
-  };
-  return m.on(S), g;
-}, Qt = (s, e) => {
-  const { initialValue: t, ...r } = e ?? {};
-  return st(
+  const S = (w) => {
+    a = w, u = performance.now(), c = m.value, p && (p = !1, h = fe(D));
+  }, D = () => {
+    const P = (performance.now() - u) / y.get(n), ne = i(P);
+    l == null && (l = ze(c));
+    let b = l(c, a, ne);
+    P >= 1 ? (p = !0, b = a) : h = fe(D), m.set(b);
+  };
+  return f.on(S), m;
+}, Yt = (t, e) => {
+  const { initialValue: s, ...r } = e ?? {};
+  return Ke(
     /* c8 ignore next 2 */
-    t ?? s.get(),
-    s.get,
-    [s],
+    s ?? t.get(),
+    t.get,
+    [t],
     r
   );
-}, rt = (s, e) => {
-  const t = Object.values(s).filter(y.is), r = Object.keys(s);
-  return ae(() => {
+}, et = (t, e) => {
+  const s = Object.values(t).filter(g.is), r = Object.keys(t);
+  return z(() => {
     const n = {};
     for (const i of r)
-      n[i] = b.get(s[i]);
+      n[i] = y.get(t[i]);
     return e(n);
-  }, t);
-}, Zt = (s) => rt(s, (e) => e), zt = (s, e) => {
-  const t = w(s.get());
+  }, s);
+}, Qt = (t) => et(t, (e) => e), Zt = (t, e) => {
+  const s = T(t.get());
   let r = null;
-  const n = s.on((i) => {
+  const n = t.on((i) => {
     r != null && clearTimeout(r), r = setTimeout(
       () => {
-        r = null, t.set(i);
+        r = null, s.set(i);
       },
       typeof e == "function" ? e(i) : e
     );
   });
-  return t.onDispose(() => {
+  return s.onDispose(() => {
     n(), r != null && clearTimeout(r);
-  }), t;
-}, Kt = (s) => {
+  }), s;
+}, zt = (t) => {
   let e;
-  return s.map((t) => {
+  return t.map((s) => {
     const r = e;
-    return e = t, r;
+    return e = s, r;
   });
-}, es = ({
-  size: s = void 0,
+}, Kt = ({
+  size: t = void 0,
   signal: e
 }) => {
-  const t = [];
-  return e.map((r) => (t.push(r), s != null && t.length > s && t.shift(), t.slice()));
-}, ts = (s) => (...e) => he(
-  s,
+  const s = [];
+  return e.map((r) => (s.push(r), t != null && s.length > t && s.shift(), s.slice()));
+}, es = (t) => (...e) => ee(
+  t,
   ...e
-)((t, ...r) => t(...r));
-function ss(...s) {
-  return he(...s)((...e) => {
-    for (const t of e) if (t != null) return t;
+)((s, ...r) => s(...r));
+function ts(...t) {
+  return ee(...t)((...e) => {
+    for (const s of e) if (s != null) return s;
   });
 }
-const _e = /* @__PURE__ */ new Set(["checked", "disabled", "hidden"]), Ee = /* @__PURE__ */ new Set(["selected"]), Ce = /* @__PURE__ */ new Set([
+const we = /* @__PURE__ */ new Set(["checked", "disabled", "hidden"]), _e = /* @__PURE__ */ new Set(["selected"]), ve = /* @__PURE__ */ new Set([
   "rowSpan",
   "colSpan",
   "tabIndex",
   "valueAsNumber"
-]), we = /* @__PURE__ */ new Set(["valueAsDate"]), xe = /* @__PURE__ */ new Set([
+]), Te = /* @__PURE__ */ new Set(["valueAsDate"]), Ae = /* @__PURE__ */ new Set([
   "value",
   "textContent",
   "innerText",
   "innerHTML",
-  "outerHTML",
-  "className",
-  "classList"
-]), nt = (s, e) => Ee.has(s) ? (t) => {
-  t == null || t !== !0 ? e.removeAttribute(s) : e.setAttribute(s, "");
-} : _e.has(s) ? (t) => {
-  t == null ? e[s] = null : e[s] = !!t;
-} : Ce.has(s) ? (t) => {
-  t == null ? e[s] = null : e[s] = Number(t);
-} : we.has(s) ? (t) => {
-  t == null ? e[s] = null : e[s] = t;
-} : xe.has(s) ? (t) => {
-  t == null ? e[s] = null : e[s] = String(t);
-} : (t) => {
-  t == null ? e.removeAttribute(s) : e.setAttribute(s, t);
-}, it = (s, e) => Ee.has(s) ? () => e.hasAttribute(s) : _e.has(s) ? () => !!e[s] : Ce.has(s) ? () => Number(e[s]) : we.has(s) ? () => e[s] : xe.has(s) ? () => String(e[s]) : () => e.getAttribute(s), X = (s) => {
-  const e = s;
-  e && e.onblur && (e.onblur = null), !(!s || s.ownerDocument === void 0) && s.parentElement && s.parentElement.removeChild(s);
-}, ot = (s) => Pe(s) ? s : s.parentElement, Pe = (s) => s.nodeType === 1;
-class Le extends Error {
-  constructor(e) {
-    super(`Provider not found: ${e.description}`);
-  }
-}
-class R {
-  /**
-   * Constructs a new `DOMContext` instance.
-   *
-   * @param document - The `Document` instance associated with this context.
-   * @param element - The `Element` instance associated with this context.
-   * @param reference - An optional `Node` instance that serves as a reference for this context.
-   * @param providers - The `Providers` instance associated with this context.
-   * @param isFirstLevel - A boolean value indicating whether this context is at the first level, meaning the outermost node in the generated DOM.
-   */
-  constructor(e, t, r, n) {
-    /**
-     * Creates a new DOM element (eg: HTML or SVG) with the specified tag name and namespace.
-     *
-     * @param tagName - The tag name of the element to create.
-     * @param namespace - The namespace URI to create the element in, or `undefined` to create a standard HTML element.
-     * @returns The newly created element.
-     */
-    o(this, "createElement", (e, t) => t !== void 0 ? this.document.createElementNS(t, e) : this.document.createElement(e));
-    /**
-     * Creates a new child element and appends it to the current element, returning a new context.
-     *
-     * This method creates a new DOM element with the specified tag name and namespace,
-     * appends it to the current element, and returns a new DOMContext focused on the
-     * newly created child element. This is the primary method for building DOM trees.
-     *
-     * @example
-     * ```typescript
-     * // Create HTML elements
-     * const divCtx = ctx.makeChildElement('div', undefined)
-     * const spanCtx = divCtx.makeChildElement('span', undefined)
-     *
-     * // Create SVG elements
-     * const svgCtx = ctx.makeChildElement('svg', 'http://www.w3.org/2000/svg')
-     * const circleCtx = svgCtx.makeChildElement('circle', 'http://www.w3.org/2000/svg')
-     * ```
-     *
-     * @param tagName - The tag name of the element to create (e.g., 'div', 'span', 'svg')
-     * @param namespace - The namespace URI for the element, or undefined for HTML elements
-     * @returns A new DOMContext focused on the newly created child element
-     */
-    o(this, "makeChildElement", (e, t) => {
-      const r = this.createElement(e, t);
-      return this.appendOrInsert(r), this.withElement(r);
-    });
-    /**
-     * Creates a new text node with the specified text content.
-     * @param text - The text content for the new text node.
-     * @returns A new `Text` node with the specified text content.
-     */
-    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.
-     */
-    o(this, "makeChildText", (e) => {
-      const t = this.createText(e);
-      return this.appendOrInsert(t), this.withReference(t);
-    });
-    /**
-     * Sets the text content of the current element.
-     * @param text - The text content to set.
-     */
-    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.
-     */
-    o(this, "getText", () => {
-      var e;
-      return ((e = this.reference) == null ? void 0 : e.nodeValue) ?? this.element.textContent ?? "";
-    });
-    /**
-     * Creates a new `DOMContext` with a reference to a newly created text node.
-     * The text node is appended or inserted to the current `DOMContext`.
-     * The new `DOMContext` with the reference is returned.
-     */
-    o(this, "makeRef", () => {
-      const e = this.createText("");
-      return this.appendOrInsert(e), this.withReference(e);
-    });
-    /**
-     * Appends or inserts a child node to the element, depending on whether a reference node is provided.
-     *
-     * @param child - The child node to append or insert.
-     */
-    o(this, "appendOrInsert", (e) => {
-      this.reference === void 0 ? this.element.appendChild(e) : this.element.insertBefore(e, this.reference);
-    });
-    /**
-     * Creates a new `DOMContext` instance with the provided `element`.
-     * @param element - The DOM element to use in the new `DOMContext` instance.
-     * @returns A new `DOMContext` instance with the provided `element`.
-     */
-    o(this, "withElement", (e) => new R(this.document, e, void 0, this.providers));
-    /**
-     * Creates a portal to render content in a different part of the DOM tree.
-     *
-     * Portals allow you to render child components into a DOM node that exists outside
-     * the parent component's DOM hierarchy. This is useful for modals, tooltips,
-     * dropdowns, and other UI elements that need to break out of their container's
-     * styling or z-index context.
-     *
-     * @example
-     * ```typescript
-     * // Portal to a modal container
-     * const modalCtx = ctx.makePortal('#modal-root')
-     * const modal = modalCtx.makeChildElement('div', undefined)
-     *
-     * // Add modal content
-     * modal.makeChildText('This renders in #modal-root')
-     * ```
-     *
-     * @example
-     * ```typescript
-     * // Portal to an existing element reference
-     * const tooltipContainer = document.getElementById('tooltip-container')!
-     * const tooltipCtx = ctx.makePortal(tooltipContainer)
-     *
-     * // Render tooltip content
-     * const tooltip = tooltipCtx.makeChildElement('div', undefined)
-     * tooltip.addClasses(['tooltip', 'tooltip-top'])
-     * ```
-     *
-     * @example
-     * ```typescript
-     * // Portal for dropdown menu
-     * const dropdownCtx = ctx.makePortal('body') // Render at body level
-     * const dropdown = dropdownCtx.makeChildElement('div', undefined)
-     * dropdown.addClasses(['dropdown-menu'])
-     * dropdown.setStyle('position', 'absolute')
-     * dropdown.setStyle('top', '100px')
-     * dropdown.setStyle('left', '50px')
-     * ```
-     *
-     * @param selector - CSS selector string or HTMLElement reference for the portal target
-     * @returns A new DOMContext focused on the portal target element
-     * @throws {Error} When the selector doesn't match any element in the document
-     */
-    o(this, "makePortal", (e) => {
-      const t = typeof e == "string" ? this.document.querySelector(e) : e;
-      if (t == null)
-        throw new Error(`Cannot find element by selector for portal: ${e}`);
-      return this.withElement(t);
-    });
-    /**
-     * Creates a new `DOMContext` instance with the specified reference.
-     *
-     * @param reference - The optional `Text` node to use as the reference for the new `DOMContext`.
-     * @returns A new `DOMContext` instance with the specified reference.
-     */
-    o(this, "withReference", (e) => new R(this.document, this.element, e, this.providers));
-    /**
-     * Sets a provider for the given provider mark.
-     *
-     * @param mark - The provider mark to set the provider for.
-     * @param value - The provider to set for the given mark.
-     * @returns A new `DOMContext` instance with the specified provider.
-     */
-    o(this, "setProvider", (e, t, r) => new R(this.document, this.element, this.reference, {
-      ...this.providers,
-      [e]: [t, r]
-    }));
-    /**
-     * Retrieves a provider for the given provider mark.
-     *
-     * @param mark - The provider mark to retrieve the provider for.
-     * @returns The provider for the given mark.
-     * @throws Throws `ProviderNotFoundError` if the provider for the given mark is not found.
-     */
-    o(this, "getProvider", (e) => {
-      if (this.providers[e] === void 0)
-        throw new Le(e);
-      const [t, r] = this.providers[e];
-      return { value: t, onUse: r };
-    });
-    o(this, "clear", (e) => {
-      e && (this.reference !== void 0 ? X(this.reference) : X(this.element));
-    });
-    /**
-     * Adds classes to the element.
-     * @param tokens - The class names to add.
-     */
-    o(this, "addClasses", (e) => {
-      this.element.classList.add(...e);
-    });
-    /**
-     * Removes classes from the element.
-     * @param tokens - The class names to remove.
-     */
-    o(this, "removeClasses", (e) => {
-      this.element.classList.remove(...e);
-    });
-    /**
-     * Gets the classes of the element.
-     * @returns The classes of the element.
-     */
-    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.
-     */
-    o(this, "on", (e, t, r) => {
-      const n = (i) => t(i, this);
-      return this.element.addEventListener(e, n, r), (i) => {
-        i && this.element.removeEventListener(e, n, r);
-      };
-    });
-    /**
-     * Returns `true` if the context is a browser DOM context.
-     * @returns `true` if the context is a browser DOM context.
-     * @deprecated Use `isBrowser()` instead.
-     */
-    o(this, "isBrowserDOM", () => !0);
-    /**
-     * Returns `true` if the context is a browser context.
-     * @returns `true` if the context is a browser context.
-     */
-    o(this, "isBrowser", () => !0);
-    /**
-     * Returns `true` if the context is a headless DOM context.
-     * @returns `true` if the context is a headless DOM context.
-     */
-    o(this, "isHeadlessDOM", () => !1);
-    /**
-     * Returns `true` if the context is a headless context.
-     * @returns `true` if the context is a headless context.
-     */
-    o(this, "isHeadless", () => !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.
-     */
-    o(this, "setStyle", (e, t) => {
-      this.element.style[e] = t;
-    });
-    /**
-     * Gets the style of the element.
-     * @param name - The name of the style to get.
-     * @returns The value of the style.
-     */
-    o(this, "getStyle", (e) => this.element.style[e]);
-    o(this, "makeAccessors", (e) => ({
-      get: it(e, this.element),
-      set: nt(e, this.element)
-    }));
-    o(this, "getWindow", () => this.document.defaultView);
-    this.document = e, this.element = t, this.reference = r, this.providers = n;
+  "outerHTML",
+  "className",
+  "classList"
+]), tt = (t, e) => _e.has(t) ? (s) => {
+  s == null || s !== !0 ? e.removeAttribute(t) : e.setAttribute(t, "");
+} : we.has(t) ? (s) => {
+  s == null ? e[t] = null : e[t] = !!s;
+} : ve.has(t) ? (s) => {
+  s == null ? e[t] = null : e[t] = Number(s);
+} : Te.has(t) ? (s) => {
+  s == null ? e[t] = null : e[t] = s;
+} : Ae.has(t) ? (s) => {
+  s == null ? e[t] = null : e[t] = String(s);
+} : (s) => {
+  s == null ? e.removeAttribute(t) : e.setAttribute(t, s);
+}, st = (t, e) => _e.has(t) ? () => e.hasAttribute(t) : we.has(t) ? () => !!e[t] : ve.has(t) ? () => Number(e[t]) : Te.has(t) ? () => e[t] : Ae.has(t) ? () => String(e[t]) : () => e.getAttribute(t), U = (t) => {
+  const e = t;
+  e && e.onblur && (e.onblur = null), !(!t || t.ownerDocument === void 0) && t.parentElement && t.parentElement.removeChild(t);
+}, rt = (t) => Ee(t) ? t : t.parentElement, Ee = (t) => t.nodeType === 1;
+class Ce extends Error {
+  constructor(e) {
+    super(`Provider not found: ${e.description}`);
+  }
+}
+class N {
+  /**
+   * Constructs a new `DOMContext` instance.
+   *
+   * @param document - The `Document` instance associated with this context.
+   * @param element - The `Element` instance associated with this context.
+   * @param reference - An optional `Node` instance that serves as a reference for this context.
+   * @param providers - The `Providers` instance associated with this context.
+   * @param isFirstLevel - A boolean value indicating whether this context is at the first level, meaning the outermost node in the generated DOM.
+   */
+  constructor(e, s, r, n) {
+    this.document = e, this.element = s, this.reference = r, this.providers = n;
   }
   /**
    * Creates a new `DOMContext` instance for the given `Element` and optional reference `Node`.
@@ -1227,512 +1194,741 @@ class R {
    * @param providers - The providers to associate with the `DOMContext`.
    * @returns A new `DOMContext` instance.
    */
-  static of(e, t, r) {
-    return new R(e.ownerDocument, e, t, r);
+  static of(e, s, r) {
+    return new N(e.ownerDocument, e, s, r);
   }
+  /**
+   * Creates a new DOM element (eg: HTML or SVG) with the specified tag name and namespace.
+   *
+   * @param tagName - The tag name of the element to create.
+   * @param namespace - The namespace URI to create the element in, or `undefined` to create a standard HTML element.
+   * @returns The newly created element.
+   */
+  createElement = (e, s) => s !== void 0 ? this.document.createElementNS(s, e) : this.document.createElement(e);
+  /**
+   * Creates a new child element and appends it to the current element, returning a new context.
+   *
+   * This method creates a new DOM element with the specified tag name and namespace,
+   * appends it to the current element, and returns a new DOMContext focused on the
+   * newly created child element. This is the primary method for building DOM trees.
+   *
+   * @example
+   * ```typescript
+   * // Create HTML elements
+   * const divCtx = ctx.makeChildElement('div', undefined)
+   * const spanCtx = divCtx.makeChildElement('span', undefined)
+   *
+   * // Create SVG elements
+   * const svgCtx = ctx.makeChildElement('svg', 'http://www.w3.org/2000/svg')
+   * const circleCtx = svgCtx.makeChildElement('circle', 'http://www.w3.org/2000/svg')
+   * ```
+   *
+   * @param tagName - The tag name of the element to create (e.g., 'div', 'span', 'svg')
+   * @param namespace - The namespace URI for the element, or undefined for HTML elements
+   * @returns A new DOMContext focused on the newly created child element
+   */
+  makeChildElement = (e, s) => {
+    const r = this.createElement(e, s);
+    return this.appendOrInsert(r), this.withElement(r);
+  };
+  /**
+   * Creates a new text node with the specified text content.
+   * @param text - The text content for the new text node.
+   * @returns A new `Text` node with the specified text content.
+   */
+  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.
+   */
+  makeChildText = (e) => {
+    const s = this.createText(e);
+    return this.appendOrInsert(s), this.withReference(s);
+  };
+  /**
+   * Sets the text content of the current element.
+   * @param text - The text content to set.
+   */
+  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.
+   */
+  getText = () => this.reference?.nodeValue ?? this.element.textContent ?? "";
+  /**
+   * Creates a new `DOMContext` with a reference to a newly created text node.
+   * The text node is appended or inserted to the current `DOMContext`.
+   * The new `DOMContext` with the reference is returned.
+   */
+  makeRef = () => {
+    const e = this.createText("");
+    return this.appendOrInsert(e), this.withReference(e);
+  };
+  /**
+   * Appends or inserts a child node to the element, depending on whether a reference node is provided.
+   *
+   * @param child - The child node to append or insert.
+   */
+  appendOrInsert = (e) => {
+    this.reference === void 0 ? this.element.appendChild(e) : this.element.insertBefore(e, this.reference);
+  };
+  /**
+   * Creates a new `DOMContext` instance with the provided `element`.
+   * @param element - The DOM element to use in the new `DOMContext` instance.
+   * @returns A new `DOMContext` instance with the provided `element`.
+   */
+  withElement = (e) => new N(this.document, e, void 0, this.providers);
+  /**
+   * Creates a portal to render content in a different part of the DOM tree.
+   *
+   * Portals allow you to render child components into a DOM node that exists outside
+   * the parent component's DOM hierarchy. This is useful for modals, tooltips,
+   * dropdowns, and other UI elements that need to break out of their container's
+   * styling or z-index context.
+   *
+   * @example
+   * ```typescript
+   * // Portal to a modal container
+   * const modalCtx = ctx.makePortal('#modal-root')
+   * const modal = modalCtx.makeChildElement('div', undefined)
+   *
+   * // Add modal content
+   * modal.makeChildText('This renders in #modal-root')
+   * ```
+   *
+   * @example
+   * ```typescript
+   * // Portal to an existing element reference
+   * const tooltipContainer = document.getElementById('tooltip-container')!
+   * const tooltipCtx = ctx.makePortal(tooltipContainer)
+   *
+   * // Render tooltip content
+   * const tooltip = tooltipCtx.makeChildElement('div', undefined)
+   * tooltip.addClasses(['tooltip', 'tooltip-top'])
+   * ```
+   *
+   * @example
+   * ```typescript
+   * // Portal for dropdown menu
+   * const dropdownCtx = ctx.makePortal('body') // Render at body level
+   * const dropdown = dropdownCtx.makeChildElement('div', undefined)
+   * dropdown.addClasses(['dropdown-menu'])
+   * dropdown.setStyle('position', 'absolute')
+   * dropdown.setStyle('top', '100px')
+   * dropdown.setStyle('left', '50px')
+   * ```
+   *
+   * @param selector - CSS selector string or HTMLElement reference for the portal target
+   * @returns A new DOMContext focused on the portal target element
+   * @throws {Error} When the selector doesn't match any element in the document
+   */
+  makePortal = (e) => {
+    const s = typeof e == "string" ? this.document.querySelector(e) : e;
+    if (s == null)
+      throw new Error(`Cannot find element by selector for portal: ${e}`);
+    return this.withElement(s);
+  };
+  /**
+   * Creates a new `DOMContext` instance with the specified reference.
+   *
+   * @param reference - The optional `Text` node to use as the reference for the new `DOMContext`.
+   * @returns A new `DOMContext` instance with the specified reference.
+   */
+  withReference = (e) => new N(this.document, this.element, e, this.providers);
+  /**
+   * Sets a provider for the given provider mark.
+   *
+   * @param mark - The provider mark to set the provider for.
+   * @param value - The provider to set for the given mark.
+   * @returns A new `DOMContext` instance with the specified provider.
+   */
+  setProvider = (e, s, r) => new N(this.document, this.element, this.reference, {
+    ...this.providers,
+    [e]: [s, r]
+  });
+  /**
+   * Retrieves a provider for the given provider mark.
+   *
+   * @param mark - The provider mark to retrieve the provider for.
+   * @returns The provider for the given mark.
+   * @throws Throws `ProviderNotFoundError` if the provider for the given mark is not found.
+   */
+  getProvider = (e) => {
+    if (this.providers[e] === void 0)
+      throw new Ce(e);
+    const [s, r] = this.providers[e];
+    return { value: s, onUse: r };
+  };
+  clear = (e) => {
+    e && (this.reference !== void 0 ? U(this.reference) : U(this.element));
+  };
+  /**
+   * Adds classes to the element.
+   * @param tokens - The class names to add.
+   */
+  addClasses = (e) => {
+    this.element.classList.add(...e);
+  };
+  /**
+   * Removes classes from the element.
+   * @param tokens - The class names to remove.
+   */
+  removeClasses = (e) => {
+    this.element.classList.remove(...e);
+  };
+  /**
+   * Gets the classes of the element.
+   * @returns The classes of the element.
+   */
+  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.
+   */
+  on = (e, s, r) => {
+    const n = (i) => s(i, this);
+    return this.element.addEventListener(e, n, r), (i) => {
+      i && this.element.removeEventListener(e, n, r);
+    };
+  };
+  /**
+   * Returns `true` if the context is a browser DOM context.
+   * @returns `true` if the context is a browser DOM context.
+   * @deprecated Use `isBrowser()` instead.
+   */
+  isBrowserDOM = () => !0;
+  /**
+   * Returns `true` if the context is a browser context.
+   * @returns `true` if the context is a browser context.
+   */
+  isBrowser = () => !0;
+  /**
+   * Returns `true` if the context is a headless DOM context.
+   * @returns `true` if the context is a headless DOM context.
+   */
+  isHeadlessDOM = () => !1;
+  /**
+   * Returns `true` if the context is a headless context.
+   * @returns `true` if the context is a headless context.
+   */
+  isHeadless = () => !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.
+   */
+  setStyle = (e, s) => {
+    this.element.style[e] = s;
+  };
+  /**
+   * Gets the style of the element.
+   * @param name - The name of the style to get.
+   * @returns The value of the style.
+   */
+  getStyle = (e) => this.element.style[e];
+  makeAccessors = (e) => ({
+    get: st(e, this.element),
+    set: tt(e, this.element)
+  });
+  getWindow = () => this.document.defaultView;
 }
-const lt = (s) => Symbol(s), fe = (s, e) => {
-  const t = s(e);
-  return (r = !0) => t(r);
-}, rs = (s, e, { doc: t, clear: r, disposeWithParent: n = !0, providers: i = {} } = {}) => {
-  const l = typeof e == "string" ? (t ?? document).querySelector(e) : e;
-  if (l === null)
-    throw new ct(
+const nt = (t) => Symbol(t), ae = (t, e) => {
+  const s = new q(), r = L(s, () => t(e));
+  return (n = !0) => {
+    s.dispose(), r(n);
+  };
+}, ss = (t, e, { doc: s, clear: r, disposeWithParent: n = !0, providers: i = {} } = {}) => {
+  const o = typeof e == "string" ? (s ?? document).querySelector(e) : e;
+  if (o === null)
+    throw new it(
       `Cannot find element by selector for render: ${e}`
     );
-  r !== !1 && (t ?? l.ownerDocument) != null && l.nodeType === 1 && (l.innerHTML = "");
-  const c = ot(l), a = Pe(l) ? void 0 : l, u = R.of(c, a, i), h = fe(s, u);
-  let d;
-  return n && (d = new MutationObserver((p) => {
-    var m;
-    (m = p[0]) == null || m.removedNodes.forEach((g) => {
-      g === l && (d == null || d.disconnect(), h(l.nodeType !== 1));
+  r !== !1 && (s ?? o.ownerDocument) != null && o.nodeType === 1 && (o.innerHTML = "");
+  const l = rt(o), c = Ee(o) ? void 0 : o, a = N.of(l, c, i), u = ae(t, a);
+  let h;
+  return n && (h = new MutationObserver((p) => {
+    p[0]?.removedNodes.forEach((f) => {
+      f === o && (h?.disconnect(), u(o.nodeType !== 1));
     });
-  }), d.observe(l.parentElement, {
+  }), h.observe(o.parentElement, {
     childList: !0,
     subtree: !1,
     attributes: !1
   })), () => {
-    d == null || d.disconnect(), h(!0);
+    h?.disconnect(), u(!0);
   };
-}, ns = (s, {
+}, rs = (t, {
   startUrl: e = "https://example.com",
-  selector: t,
+  selector: s,
   providers: r = {}
 } = {
   selector: "body"
 }) => {
-  const n = b.toSignal(e).deriveProp(), i = new He(t, void 0), l = new V(i, void 0, { currentURL: n }, r);
+  const n = y.toSignal(e).deriveProp(), i = new Oe(s, void 0), o = new R(i, void 0, { currentURL: n }, r);
   return {
-    clear: fe(s(), l),
+    clear: ae(t(), o),
     root: i,
     currentURL: n
   };
 };
-class ct extends Error {
+class it extends Error {
   constructor(e) {
     super(e);
   }
 }
-const De = "data-tts-node", Y = "data-tts-class", Q = "data-tts-style", Z = "data-tts-html", z = "data-tts-text", K = "data-tts-attrs";
-class is {
+const De = "data-tts-node", J = "data-tts-class", G = "data-tts-style", X = "data-tts-html", Y = "data-tts-text", Q = "data-tts-attrs";
+class ns {
+  /**
+   * 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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  getClass;
+  /**
+   * Sets the class of an element.
+   * @param el - The element to set the class on.
+   * @param cls - The class to set.
+   */
+  setClass;
+  /**
+   * Gets the styles of an element.
+   * @param el - The element to get the styles from.
+   * @returns The styles of the element.
+   */
+  getStyles;
+  /**
+   * Sets the styles of an element.
+   * @param el - The element to set the styles on.
+   */
+  setStyles;
+  /**
+   * Appends HTML to an element.
+   * @param el - The element to append the HTML to.
+   * @param html - The HTML to append.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  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.
+   */
+  setInnerText;
   constructor({
     select: e,
-    getAttribute: t,
+    getAttribute: s,
     setAttribute: r,
     getClass: n,
     setClass: i,
-    getStyles: l,
-    setStyles: c,
-    appendHTML: a,
-    getInnerHTML: u,
-    setInnerHTML: h,
-    getInnerText: d,
+    getStyles: o,
+    setStyles: l,
+    appendHTML: c,
+    getInnerHTML: a,
+    setInnerHTML: u,
+    getInnerText: h,
     setInnerText: p
   }) {
-    /**
-     * 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) => {
-        const i = typeof n.selector == "string" ? this.select(n.selector) : [n.selector];
-        for (const l of i) {
-          if (l == null)
-            throw new Error(
-              `Cannot find element by selector for render: ${n.selector}`
-            );
-          if (n.hasChildren() && this.appendHTML(l, n.contentToHTML(t)), n.hasInnerHTML()) {
-            if (t) {
-              const c = this.getInnerHTML(l);
-              c != null && this.setAttribute(l, Z, c);
-            }
-            this.setInnerHTML(l, n.getInnerHTML());
+    this.select = e, this.getAttribute = s, this.setAttribute = r, this.getClass = n, this.setClass = i, this.getStyles = o, this.setStyles = l, this.appendHTML = c, this.getInnerHTML = a, this.setInnerHTML = u, this.getInnerText = h, this.setInnerText = p;
+  }
+  /**
+   * 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.
+   */
+  setFromRoot = (e, s) => {
+    e.getPortals().forEach((n) => {
+      const i = typeof n.selector == "string" ? this.select(n.selector) : [n.selector];
+      for (const o of i) {
+        if (o == null)
+          throw new Error(
+            `Cannot find element by selector for render: ${n.selector}`
+          );
+        if (n.hasChildren() && this.appendHTML(o, n.contentToHTML(s)), n.hasInnerHTML()) {
+          if (s) {
+            const l = this.getInnerHTML(o);
+            l != null && this.setAttribute(o, X, l);
           }
-          if (n.hasInnerText()) {
-            if (t) {
-              const c = this.getInnerText(l);
-              c != null && this.setAttribute(l, z, c);
-            }
-            this.setInnerText(l, n.getInnerText());
+          this.setInnerHTML(o, n.getInnerHTML());
+        }
+        if (n.hasInnerText()) {
+          if (s) {
+            const l = this.getInnerText(o);
+            l != null && this.setAttribute(o, Y, l);
           }
-          if (n.hasClasses()) {
-            if (t) {
-              const c = this.getClass(l);
-              c != null && this.setAttribute(l, Y, c);
-            }
-            this.setClass(l, n.getClasses().join(" "));
+          this.setInnerText(o, n.getInnerText());
+        }
+        if (n.hasClasses()) {
+          if (s) {
+            const l = this.getClass(o);
+            l != null && this.setAttribute(o, J, l);
           }
-          if (n.hasStyles()) {
-            if (t) {
-              const c = this.getStyles(l);
-              Object.keys(c).length > 0 && this.setAttribute(
-                l,
-                Q,
-                JSON.stringify(c)
-              );
-            }
-            this.setStyles(l, n.getStyles());
+          this.setClass(o, n.getClasses().join(" "));
+        }
+        if (n.hasStyles()) {
+          if (s) {
+            const l = this.getStyles(o);
+            Object.keys(l).length > 0 && this.setAttribute(
+              o,
+              G,
+              JSON.stringify(l)
+            );
           }
-          if (n.hasAttributes()) {
-            const c = n.getAttributes();
-            if (t) {
-              const a = [];
-              c.forEach(([u]) => {
-                const h = this.getAttribute(l, u);
-                h != null && a.push([u, h]);
-              }), a.length > 0 && this.setAttribute(
-                l,
-                K,
-                JSON.stringify(Object.fromEntries(a))
-              );
-            }
-            c.forEach(([a, u]) => {
-              this.setAttribute(l, a, u);
-            });
+          this.setStyles(o, n.getStyles());
+        }
+        if (n.hasAttributes()) {
+          const l = n.getAttributes();
+          if (s) {
+            const c = [];
+            l.forEach(([a]) => {
+              const u = this.getAttribute(o, a);
+              u != null && c.push([a, u]);
+            }), c.length > 0 && this.setAttribute(
+              o,
+              Q,
+              JSON.stringify(Object.fromEntries(c))
+            );
           }
+          l.forEach(([c, a]) => {
+            this.setAttribute(o, 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 = d, this.setInnerText = p;
-  }
+  };
 }
-const at = () => {
-  document.querySelectorAll(`[${De}]`).forEach(X);
-}, ut = (s) => {
-  const e = s.getAttribute(Y);
-  s.removeAttribute(Y), e != null && s.setAttribute("class", e);
-}, ht = () => {
-  document.querySelectorAll(`[${Y}]`).forEach((e) => ut(e));
-}, ft = (s) => {
-  const e = s.getAttribute(Z);
-  s.removeAttribute(Z), e != null && (s.innerHTML = e);
+const ot = () => {
+  document.querySelectorAll(`[${De}]`).forEach(U);
+}, lt = (t) => {
+  const e = t.getAttribute(J);
+  t.removeAttribute(J), e != null && t.setAttribute("class", e);
+}, ct = () => {
+  document.querySelectorAll(`[${J}]`).forEach((e) => lt(e));
+}, at = (t) => {
+  const e = t.getAttribute(X);
+  t.removeAttribute(X), e != null && (t.innerHTML = e);
+}, ut = () => {
+  document.querySelectorAll(`[${X}]`).forEach((e) => at(e));
+}, ht = (t) => {
+  const e = t.getAttribute(Y);
+  t.removeAttribute(Y), e != null && (t.innerText = e);
 }, dt = () => {
-  document.querySelectorAll(`[${Z}]`).forEach((e) => ft(e));
-}, pt = (s) => {
-  const e = s.getAttribute(z);
-  s.removeAttribute(z), e != null && (s.innerText = e);
-}, mt = () => {
-  document.querySelectorAll(`[${z}]`).forEach((e) => pt(e));
-}, Me = (s) => JSON.parse(s.replace(/&quot;/g, '"')), gt = (s) => {
-  const e = s.getAttribute(Q);
-  if (s.removeAttribute(Q), e != null) {
-    const t = Me(e);
-    Object.entries(t).forEach(([r, n]) => {
-      s.style.setProperty(r, n);
+  document.querySelectorAll(`[${Y}]`).forEach((e) => ht(e));
+}, Pe = (t) => JSON.parse(t.replace(/&quot;/g, '"')), ft = (t) => {
+  const e = t.getAttribute(G);
+  if (t.removeAttribute(G), e != null) {
+    const s = Pe(e);
+    Object.entries(s).forEach(([r, n]) => {
+      t.style.setProperty(r, n);
     });
   }
-}, yt = () => {
-  document.querySelectorAll(`[${Q}]`).forEach((e) => gt(e));
-}, bt = (s) => {
-  const e = s.getAttribute(K);
-  if (s.removeAttribute(K), e != null) {
-    const t = Me(e);
-    Object.entries(t).forEach(([r, n]) => {
-      n == null ? s.removeAttribute(r) : s.setAttribute(r, n);
+}, pt = () => {
+  document.querySelectorAll(`[${G}]`).forEach((e) => ft(e));
+}, gt = (t) => {
+  const e = t.getAttribute(Q);
+  if (t.removeAttribute(Q), e != null) {
+    const s = Pe(e);
+    Object.entries(s).forEach(([r, n]) => {
+      n == null ? t.removeAttribute(r) : t.setAttribute(r, n);
     });
   }
-}, Tt = () => {
-  document.querySelectorAll(`[${K}]`).forEach((e) => bt(e));
-}, os = () => {
-  at(), ht(), mt(), dt(), yt(), Tt();
-}, C = Symbol("class"), D = Symbol("style"), $ = Symbol("handler"), Oe = () => Math.random().toString(36).substring(2, 15), St = (s) => s.replace(/<[^>]*>?/g, "");
-class Ie {
+}, mt = () => {
+  document.querySelectorAll(`[${Q}]`).forEach((e) => gt(e));
+}, is = () => {
+  ot(), ct(), dt(), ut(), pt(), mt();
+}, I = Symbol("class"), H = Symbol("style"), B = Symbol("handler"), xe = () => Math.random().toString(36).substring(2, 15), yt = (t) => t.replace(/<[^>]*>?/g, "");
+class Le {
   constructor(e) {
-    o(this, "id", Oe());
-    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 ? St(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);
-    });
-    o(this, "remove", () => {
-      if (this.parent != null)
-        this.parent.removeChild(this);
-      else
-        throw new Error("Parent is undefined");
-    });
-    o(this, "getPortals", () => {
-      const e = this.elements().flatMap((t) => t.isPortal() ? [t, ...t.getPortals()] : t.getPortals());
-      return this.isPortal() && e.unshift(this), 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[C] != null);
-    o(this, "hasStyles", () => this.properties[D] != null);
-    o(this, "hasAttributes", () => Object.keys(this.properties).length > 0);
-    o(this, "hasHandlers", () => this.properties[$] != 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()) {
-        const r = t.getById(e);
-        if (r != null)
-          return r;
-      }
-    });
-    o(this, "trigger", (e, t) => {
-      ((this.properties[$] ?? {})[e] ?? []).forEach((n) => n(t));
-    });
-    o(this, "click", () => {
-      this.trigger("click", {});
-    });
-    o(this, "on", (e, t, r, n) => {
-      var a;
-      const i = (a = this.properties)[$] ?? (a[$] = {}), l = n != null && n.once ? (u) => {
-        c(), t(u, r);
-      } : (u) => t(u, r);
-      i[e] = [...i[e] ?? [], l];
-      const c = () => {
-        const u = i[e] ?? [], h = u.indexOf(l);
-        h !== -1 && (u.splice(h, 1), u.length === 0 ? (delete i[e], Object.keys(i).length === 0 && delete this.properties[$]) : i[e] = u, (n == null ? void 0 : n.signal) != null && n.signal.removeEventListener("abort", c));
-      };
-      return (n == null ? void 0 : n.signal) != null && n.signal.addEventListener("abort", c), c;
-    });
-    o(this, "addClasses", (e) => {
-      var r;
-      if (e.length === 0)
-        return;
-      const t = (r = this.properties)[C] ?? (r[C] = []);
-      e.forEach((n) => {
-        t.includes(n) || t.push(n);
-      });
-    });
-    o(this, "removeClasses", (e) => {
-      var r;
-      if (e.length === 0)
-        return;
-      const t = (r = this.properties)[C] ?? (r[C] = []);
-      e.forEach((n) => {
-        const i = t.indexOf(n);
-        i !== -1 && t.splice(i, 1);
-      }), t.length === 0 && delete this.properties[C];
-    });
-    o(this, "getClasses", () => this.properties[C] ?? []);
-    o(this, "getAttributes", () => Object.entries(this.properties).filter(
-      ([e]) => !["innerText", "innerHTML"].includes(e)
-    ));
-    o(this, "getVisibleAttributes", () => Reflect.ownKeys(this.properties).flatMap(
-      (e) => e === C ? [["class", this.getClasses()]] : e === D ? [["style", this.getStyles()]] : typeof e == "string" ? [[e, String(this.properties[e])]] : []
-    ));
-    o(this, "setStyle", (e, t) => {
-      var n;
-      const r = (n = this.properties)[D] ?? (n[D] = {});
-      r[e] = t, t === "" && (delete r[e], Object.keys(r).length === 0 && delete this.properties[D]);
-    });
-    o(this, "getStyle", (e) => {
-      var t;
-      return ((t = this.properties[D]) == null ? void 0 : t[e]) ?? "";
-    });
-    o(this, "getStyles", () => this.properties[D] ?? {});
-    o(this, "makeAccessors", (e) => {
-      const t = this.properties;
-      return {
-        get: () => t[e],
-        set: (r) => t[e] = r
-      };
-    });
     this.parent = e;
   }
-}
-const vt = (s) => s.replace(/"/g, "&quot;"), At = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-class _t extends Ie {
-  constructor(t, r, n) {
-    super(n);
-    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, d]) => `${h}: ${d};`).join(" ")}"` : Ct.has(a) ? ` ${a}` : a === "innerHTML" ? (i = u, "") : a === "innerText" ? (i = At(u), "") : ` ${a}="${vt(u)}"`).join(""), c = t ? ` ${De}` : "";
-      return wt.has(this.tagName) && r === "" ? `<${this.tagName}${n}${l}${c} />` : `<${this.tagName}${n}${l}${c}>${i ?? r}</${this.tagName}>`;
+  id = xe();
+  properties = {};
+  children = [];
+  isElement = () => !0;
+  isText = () => !1;
+  getText = () => this.properties.innerText != null ? this.properties.innerText : this.properties.innerHTML != null ? yt(this.properties.innerHTML) : this.children.map((e) => e.getText()).join("");
+  removeChild = (e) => {
+    const s = this.children.indexOf(e);
+    s !== -1 && this.children.splice(s, 1);
+  };
+  remove = () => {
+    if (this.parent != null)
+      this.parent.removeChild(this);
+    else
+      throw new Error("Parent is undefined");
+  };
+  getPortals = () => {
+    const e = this.elements().flatMap((s) => s.isPortal() ? [s, ...s.getPortals()] : s.getPortals());
+    return this.isPortal() && e.unshift(this), e;
+  };
+  elements = () => this.children.filter((e) => e.isElement());
+  hasInnerHTML = () => this.properties.innerHTML != null;
+  getInnerHTML = () => this.properties.innerHTML ?? "";
+  getInnerText = () => this.properties.innerText ?? "";
+  hasInnerText = () => this.properties.innerText != null;
+  hasChildren = () => this.children.length > 0;
+  hasClasses = () => this.properties[I] != null;
+  hasStyles = () => this.properties[H] != null;
+  hasAttributes = () => Object.keys(this.properties).length > 0;
+  hasHandlers = () => this.properties[B] != null;
+  hasRenderableProperties = () => this.hasClasses() || this.hasAttributes() || this.hasStyles();
+  getById = (e) => {
+    if (this.properties.id === e)
+      return this;
+    for (const s of this.elements()) {
+      const r = s.getById(e);
+      if (r != null)
+        return r;
+    }
+  };
+  trigger = (e, s) => {
+    ((this.properties[B] ?? {})[e] ?? []).forEach((n) => n(s));
+  };
+  click = () => {
+    this.trigger("click", {});
+  };
+  on = (e, s, r, n) => {
+    const i = this.properties[B] ??= {}, o = n?.once ? (c) => {
+      l(), s(c, r);
+    } : (c) => s(c, r);
+    i[e] = [...i[e] ?? [], o];
+    const l = () => {
+      const c = i[e] ?? [], a = c.indexOf(o);
+      a !== -1 && (c.splice(a, 1), c.length === 0 ? (delete i[e], Object.keys(i).length === 0 && delete this.properties[B]) : i[e] = c, n?.signal != null && n.signal.removeEventListener("abort", l));
+    };
+    return n?.signal != null && n.signal.addEventListener("abort", l), l;
+  };
+  addClasses = (e) => {
+    if (e.length === 0)
+      return;
+    const s = this.properties[I] ??= [];
+    e.forEach((r) => {
+      s.includes(r) || s.push(r);
     });
-    this.tagName = t, this.namespace = r;
+  };
+  removeClasses = (e) => {
+    if (e.length === 0)
+      return;
+    const s = this.properties[I] ??= [];
+    e.forEach((r) => {
+      const n = s.indexOf(r);
+      n !== -1 && s.splice(n, 1);
+    }), s.length === 0 && delete this.properties[I];
+  };
+  getClasses = () => this.properties[I] ?? [];
+  getAttributes = () => Object.entries(this.properties).filter(
+    ([e]) => !["innerText", "innerHTML"].includes(e)
+  );
+  getVisibleAttributes = () => Reflect.ownKeys(this.properties).flatMap(
+    (e) => e === I ? [["class", this.getClasses()]] : e === H ? [["style", this.getStyles()]] : typeof e == "string" ? [[e, String(this.properties[e])]] : []
+  );
+  setStyle = (e, s) => {
+    const r = this.properties[H] ??= {};
+    r[e] = s, s === "" && (delete r[e], Object.keys(r).length === 0 && delete this.properties[H]);
+  };
+  getStyle = (e) => this.properties[H]?.[e] ?? "";
+  getStyles = () => this.properties[H] ?? {};
+  makeAccessors = (e) => {
+    const s = this.properties;
+    return {
+      get: () => s[e],
+      set: (r) => s[e] = r
+    };
+  };
+}
+const bt = (t) => t.replace(/"/g, "&quot;"), St = (t) => t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+class wt extends Le {
+  constructor(e, s, r) {
+    super(r), this.tagName = e, this.namespace = s;
   }
+  isPortal = () => !1;
+  toHTML = (e = !1) => {
+    const s = this.children.map((l) => l.toHTML()).join(""), r = this.namespace ? ` xmlns="${this.namespace}"` : "";
+    let n = null;
+    const i = this.getVisibleAttributes().map(([l, c]) => l === "class" ? ` class="${c.join(" ")}"` : l === "style" ? typeof c == "string" ? ` style="${c}"` : ` style="${Object.entries(c).map(([a, u]) => `${a}: ${u};`).join(" ")}"` : vt.has(l) ? ` ${l}` : l === "innerHTML" ? (n = c, "") : l === "innerText" ? (n = St(c), "") : ` ${l}="${bt(c)}"`).join(""), o = e ? ` ${De}` : "";
+    return Tt.has(this.tagName) && s === "" ? `<${this.tagName}${r}${i}${o} />` : `<${this.tagName}${r}${i}${o}>${n ?? s}</${this.tagName}>`;
+  };
 }
-class He extends Ie {
-  constructor(t, r) {
-    super(r);
-    o(this, "isPortal", () => !0);
-    o(this, "toHTML", () => "");
-    o(this, "contentToHTML", (t = !1) => this.children.map((r) => r.toHTML(t)).join(""));
-    this.selector = t;
+class Oe extends Le {
+  constructor(e, s) {
+    super(s), this.selector = e;
   }
+  isPortal = () => !0;
+  toHTML = () => "";
+  contentToHTML = (e = !1) => this.children.map((s) => s.toHTML(e)).join("");
 }
-class Et {
+class _t {
   constructor(e) {
-    o(this, "id", Oe());
-    o(this, "isElement", () => !1);
-    o(this, "isText", () => !0);
-    o(this, "getText", () => this.text);
-    o(this, "toHTML", () => this.text);
     this.text = e;
   }
+  id = xe();
+  isElement = () => !1;
+  isText = () => !0;
+  getText = () => this.text;
+  toHTML = () => this.text;
 }
-class V {
-  constructor(e, t, r, n) {
-    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);
-    });
-    o(this, "makeChildElement", (e, t) => {
-      const r = new _t(e, t, this.element);
-      return this.appendOrInsert(r), new V(
-        r,
-        void 0,
-        this.container,
-        this.providers
-      );
-    });
-    o(this, "makeChildText", (e) => {
-      const t = new Et(e);
-      return this.appendOrInsert(t), new V(
-        this.element,
-        t,
-        this.container,
-        this.providers
-      );
-    });
-    o(this, "setText", (e) => {
-      this.reference && this.reference.isText() && (this.reference.text = e);
-    });
-    o(this, "getText", () => {
-      var e;
-      return ((e = this.reference) == null ? void 0 : e.getText()) ?? this.element.getText();
-    });
-    o(this, "makeRef", () => this.makeChildText(""));
-    o(this, "makePortal", (e) => {
-      const t = new He(e, this.element);
-      return this.appendOrInsert(t), new V(
-        t,
-        void 0,
-        this.container,
-        this.providers
-      );
-    });
-    /**
-     * Sets a provider for the given provider mark.
-     *
-     * @param mark - The provider mark to set the provider for.
-     * @param value - The provider to set for the given mark.
-     * @returns A new `DOMContext` instance with the specified provider.
-     */
-    o(this, "setProvider", (e, t, r) => new V(this.element, this.reference, this.container, {
-      ...this.providers,
-      [e]: [t, r]
-    }));
-    o(this, "getProvider", (e) => {
-      if (this.providers[e] === void 0)
-        throw new Le(e);
-      const [t, r] = this.providers[e];
-      return { value: t, onUse: r };
-    });
-    o(this, "clear", (e) => {
-      e && (this.reference !== void 0 ? this.element.removeChild(this.reference) : this.element.remove());
-    });
-    o(this, "on", (e, t) => this.element.on(e, t, this));
-    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, "isBrowser", () => !1);
-    o(this, "isHeadlessDOM", () => !0);
-    o(this, "isHeadless", () => !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;
+class R {
+  constructor(e, s, r, n) {
+    this.element = e, this.reference = s, this.container = r, this.providers = n;
   }
+  appendOrInsert = (e) => {
+    if (this.reference != null) {
+      const s = this.element.children.indexOf(this.reference);
+      this.element.children.splice(s, 0, e);
+    } else
+      this.element.children.push(e);
+  };
+  makeChildElement = (e, s) => {
+    const r = new wt(e, s, this.element);
+    return this.appendOrInsert(r), new R(
+      r,
+      void 0,
+      this.container,
+      this.providers
+    );
+  };
+  makeChildText = (e) => {
+    const s = new _t(e);
+    return this.appendOrInsert(s), new R(
+      this.element,
+      s,
+      this.container,
+      this.providers
+    );
+  };
+  setText = (e) => {
+    this.reference && this.reference.isText() && (this.reference.text = e);
+  };
+  getText = () => this.reference?.getText() ?? this.element.getText();
+  makeRef = () => this.makeChildText("");
+  makePortal = (e) => {
+    const s = new Oe(e, this.element);
+    return this.appendOrInsert(s), new R(
+      s,
+      void 0,
+      this.container,
+      this.providers
+    );
+  };
+  /**
+   * Sets a provider for the given provider mark.
+   *
+   * @param mark - The provider mark to set the provider for.
+   * @param value - The provider to set for the given mark.
+   * @returns A new `DOMContext` instance with the specified provider.
+   */
+  setProvider = (e, s, r) => new R(this.element, this.reference, this.container, {
+    ...this.providers,
+    [e]: [s, r]
+  });
+  getProvider = (e) => {
+    if (this.providers[e] === void 0)
+      throw new Ce(e);
+    const [s, r] = this.providers[e];
+    return { value: s, onUse: r };
+  };
+  clear = (e) => {
+    e && (this.reference !== void 0 ? this.element.removeChild(this.reference) : this.element.remove());
+  };
+  on = (e, s) => this.element.on(e, s, this);
+  addClasses = (e) => this.element.addClasses(e);
+  removeClasses = (e) => this.element.removeClasses(e);
+  getClasses = () => this.element.getClasses();
+  isBrowserDOM = () => !1;
+  isBrowser = () => !1;
+  isHeadlessDOM = () => !0;
+  isHeadless = () => !0;
+  setStyle = (e, s) => this.element.setStyle(e, s);
+  getStyle = (e) => this.element.getStyle(e);
+  makeAccessors = (e) => this.element.makeAccessors(e);
 }
-const Ct = /* @__PURE__ */ new Set([
+const vt = /* @__PURE__ */ new Set([
   "checked",
   "disabled",
   "multiple",
   "readonly",
   "required",
   "selected"
-]), wt = /* @__PURE__ */ new Set(["img", "br", "hr", "input", "link", "meta"]), ke = (s) => (e) => e.makeChildText(s).clear, $e = (s) => (e) => {
-  const t = e.makeChildText(s.value), r = s.on(t.setText);
+]), Tt = /* @__PURE__ */ new Set(["img", "br", "hr", "input", "link", "meta"]), ke = (t) => (e) => e.makeChildText(t).clear, Me = (t) => (e) => {
+  const s = e.makeChildText(t.value), r = t.on(s.setText);
   return (n) => {
-    r(), t.clear(n);
+    r(), s.clear(n);
   };
-}, ls = (s) => y.is(s) ? $e(s) : ke(s), _ = (...s) => (e) => {
-  const t = s.map((r) => f(r)(e));
+}, os = (t) => g.is(t) ? Me(t) : ke(t), E = (...t) => (e) => {
+  const s = t.map((r) => d(r)(e));
   return (r) => {
-    t.forEach((n) => n(r));
-  };
-}, x = () => () => {
-}, xt = (s) => (e) => (e.addClasses(s), (t) => {
-  t && e.removeClasses(s);
-}), Pt = (s) => (e) => {
-  let t = [];
-  const r = s.on((n) => {
-    e.removeClasses(t), t = (n ?? "").split(" ").filter((i) => i.length > 0), e.addClasses(t);
+    s.forEach((n) => n(r));
+  };
+}, C = () => () => {
+}, At = (t) => (e) => (e.addClasses(t), (s) => {
+  s && e.removeClasses(t);
+}), Et = (t) => (e) => {
+  let s = [];
+  const r = t.on((n) => {
+    e.removeClasses(s), s = (n ?? "").split(" ").filter((i) => i.length > 0), e.addClasses(s);
   });
   return (n) => {
-    r(), n && e.removeClasses(t), t.length = 0;
-  };
-}, Lt = (s, e) => (t) => {
-  const { get: r, set: n } = t.makeAccessors(s), i = r();
-  return n(e), (l) => {
-    l && n(i);
-  };
-}, Dt = (s, e) => (t) => {
-  const { get: r, set: n } = t.makeAccessors(s), i = r(), l = e.on(n);
-  return (c) => {
-    l(), c && n(i);
-  };
-}, j = (s, e) => y.is(e) ? Dt(s, e) : Lt(s, e), se = (s = "") => (e, t) => {
-  const r = s ? `${s}${e}` : e;
-  return j(r, t);
-}, q = new Proxy(
+    r(), n && e.removeClasses(s), s.length = 0;
+  };
+}, Ct = (t, e) => (s) => {
+  const { get: r, set: n } = s.makeAccessors(t), i = r();
+  return n(e), (o) => {
+    o && n(i);
+  };
+}, Dt = (t, e) => (s) => {
+  const { get: r, set: n } = s.makeAccessors(t), i = r(), o = e.on(n);
+  return (l) => {
+    o(), l && n(i);
+  };
+}, V = (t, e) => g.is(e) ? Dt(t, e) : Ct(t, e), te = (t = "") => (e, s) => {
+  const r = t ? `${t}${e}` : e;
+  return V(r, s);
+}, j = new Proxy(
   {},
   {
     /**
@@ -1746,12 +1942,12 @@ const Ct = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => e === "class" ? (t) => y.is(t) ? Pt(t) : xt(
+    get: (t, e) => e === "class" ? (s) => g.is(s) ? Et(s) : At(
       /* c8 ignore next */
-      (t ?? "").split(" ").filter((r) => r.length > 0)
-    ) : e === "set" ? se() : (t) => j(e, t)
+      (s ?? "").split(" ").filter((r) => r.length > 0)
+    ) : e === "set" ? te() : (s) => V(e, s)
   }
-), cs = new Proxy(
+), ls = new Proxy(
   {},
   {
     /**
@@ -1762,9 +1958,9 @@ const Ct = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => e === "set" ? se("data-") : (t) => j(`data-${e}`, t)
+    get: (t, e) => e === "set" ? te("data-") : (s) => V(`data-${e}`, s)
   }
-), as = new Proxy(
+), cs = new Proxy(
   {},
   {
     /**
@@ -1775,9 +1971,9 @@ const Ct = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => e === "set" ? se("aria-") : (t) => j(`aria-${e}`, t)
+    get: (t, e) => e === "set" ? te("aria-") : (s) => V(`aria-${e}`, s)
   }
-), us = new Proxy(
+), as = new Proxy(
   {},
   {
     /**
@@ -1788,9 +1984,9 @@ const Ct = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => e === "set" ? se() : (t) => j(e, t)
+    get: (t, e) => e === "set" ? te() : (s) => V(e, s)
   }
-), hs = new Proxy(
+), us = new Proxy(
   {},
   {
     /**
@@ -1800,31 +1996,31 @@ const Ct = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => j(e, t)
+    get: (t, e) => (s) => V(e, s)
   }
-), f = (s) => {
-  if (s == null)
-    return x;
-  if (Array.isArray(s))
-    return _(...s.map(f));
-  if (typeof s == "string")
-    return ke(s);
-  if (y.is(s))
-    return $e(s);
-  if (typeof s == "function")
-    return s;
-  throw new Error(`Unknown type: '${typeof s}' for child: ${s}`);
-}, Ne = (s, ...e) => (t) => {
-  const r = t.makeChildElement(s, void 0), n = e.map((i) => f(i)(r));
+), d = (t) => {
+  if (t == null)
+    return C;
+  if (Array.isArray(t))
+    return E(...t.map(d));
+  if (typeof t == "string")
+    return ke(t);
+  if (g.is(t))
+    return Me(t);
+  if (typeof t == "function")
+    return t;
+  throw new Error(`Unknown type: '${typeof t}' for child: ${t}`);
+}, Ie = (t, ...e) => (s) => {
+  const r = s.makeChildElement(t, void 0), n = e.map((i) => d(i)(r));
   return (i) => {
-    n.forEach((l) => l(!1)), r.clear(i);
+    n.forEach((o) => o(!1)), r.clear(i);
   };
-}, Re = (s, e, ...t) => (r) => {
-  const n = r.makeChildElement(s, e), i = t.map((l) => f(l)(n));
-  return (l) => {
-    i.forEach((c) => c(!1)), n.clear(l);
+}, He = (t, e, ...s) => (r) => {
+  const n = r.makeChildElement(t, e), i = s.map((o) => d(o)(n));
+  return (o) => {
+    i.forEach((l) => l(!1)), n.clear(o);
   };
-}, fs = new Proxy(
+}, hs = new Proxy(
   {},
   {
     /**
@@ -1832,7 +2028,7 @@ const Ct = /* @__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) => Ne(e, t.flatMap(f))
+    get: (t, e) => (...s) => Ie(e, s.flatMap(d))
   }
 ), ds = new Proxy(
   {},
@@ -1842,9 +2038,9 @@ const Ct = /* @__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) => Ne("input", q.type(e), ...t)
+    get: (t, e) => (...s) => Ie("input", j.type(e), ...s)
   }
-), Mt = "http://www.w3.org/2000/svg", ps = new Proxy(
+), Pt = "http://www.w3.org/2000/svg", fs = new Proxy(
   {},
   {
     /**
@@ -1852,9 +2048,9 @@ const Ct = /* @__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) => Re(e, Mt, t.flatMap(f))
+    get: (t, e) => (...s) => He(e, Pt, s.flatMap(d))
   }
-), Ot = "http://www.w3.org/1998/Math/MathML", ms = new Proxy(
+), xt = "http://www.w3.org/1998/Math/MathML", ps = new Proxy(
   {},
   {
     /**
@@ -1862,35 +2058,35 @@ const Ct = /* @__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) => Re(e, Ot, t.flatMap(f))
+    get: (t, e) => (...s) => He(e, xt, s.flatMap(d))
   }
-), Ve = (s, e) => {
+), $e = (t, e) => {
   if (typeof e == "function")
-    return Ve(s, { then: e });
-  const t = e.pending != null ? f(e.pending()) : x, r = e.then, n = e.error != null ? (i) => f(e.error(i)) : () => x;
+    return $e(t, { then: e });
+  const s = e.pending != null ? d(e.pending()) : C, r = e.then, n = e.error != null ? (i) => d(e.error(i)) : () => C;
   return (i) => {
-    let l = !0;
-    const c = s(), a = i.makeRef();
-    let u = f(t)(a);
-    return c.then(
-      (h) => {
-        l && (u(!0), u = f(r(h))(a));
+    let o = !0;
+    const l = t(), c = i.makeRef();
+    let a = d(s)(c);
+    return l.then(
+      (u) => {
+        o && (a(!0), a = d(r(u))(c));
       },
-      (h) => {
-        l && (u(!0), u = f(n(h))(a));
+      (u) => {
+        o && (a(!0), a = d(n(u))(c));
       }
-    ), (h) => {
-      l = !1, u(h), a.clear(h);
+    ), (u) => {
+      o = !1, a(u), c.clear(u);
     };
   };
-}, gs = (s, e) => Ve(() => s, e), je = (s, e, t) => (r) => r.on(s, e, t), It = (s) => je("click", (e, t) => {
+}, gs = (t, e) => $e(() => t, e), Ne = (t, e, s) => (r) => r.on(t, e, s), Lt = (t) => Ne("click", (e, s) => {
   e.preventDefault();
   const r = e.target;
   setTimeout(() => {
-    const n = r.ownerDocument != null ? r == null ? void 0 : r.checked : void 0;
-    n != null && s(!n, t);
+    const n = r.ownerDocument != null ? r?.checked : void 0;
+    n != null && t(!n, s);
   }, 0);
-}), re = new Proxy(
+}), se = new Proxy(
   {},
   {
     /**
@@ -1898,332 +2094,331 @@ const Ct = /* @__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) => je(e, t)
+    get: (t, e) => (s) => Ne(e, s)
   }
-), Ht = (s, e) => (t) => {
-  (e == null ? void 0 : e.preventDefault) === !0 && t.preventDefault(), (e == null ? void 0 : e.stopPropagation) === !0 && t.stopPropagation(), (e == null ? void 0 : e.stopImmediatePropagation) === !0 && t.stopImmediatePropagation(), s(t);
-}, I = (s, e) => Ht((t) => {
-  const r = t.target;
-  s(r, t);
-}, e), kt = (s, e) => I(
-  (t, r) => s(t.value, r),
+), Ot = (t, e) => (s) => {
+  e?.preventDefault === !0 && s.preventDefault(), e?.stopPropagation === !0 && s.stopPropagation(), e?.stopImmediatePropagation === !0 && s.stopImmediatePropagation(), t(s);
+}, O = (t, e) => Ot((s) => {
+  const r = s.target;
+  t(r, s);
+}, e), kt = (t, e) => O(
+  (s, r) => t(s.value, r),
   e
-), $t = (s, e) => I(
-  (t, r) => s(t.valueAsNumber, r),
+), Mt = (t, e) => O(
+  (s, r) => t(s.valueAsNumber, r),
   e
-), Nt = (s, e) => I((t, r) => {
-  if (t.value === "")
+), It = (t, e) => O((s, r) => {
+  if (s.value === "")
     return;
-  const n = t.value.split("-"), i = new Date(
+  const n = s.value.split("-"), i = new Date(
     Number(n[0]),
     Number(n[1]) - 1,
     Number(n[2].substring(0, 2))
   );
-  s(i, r);
-}, e), ys = (s, e) => I((t, r) => {
-  if (t.value === "") {
-    s(null, r);
+  t(i, r);
+}, e), ms = (t, e) => O((s, r) => {
+  if (s.value === "") {
+    t(null, r);
     return;
   }
-  const n = t.value.split("-"), i = new Date(
+  const n = s.value.split("-"), i = new Date(
     Number(n[0]),
     Number(n[1]) - 1,
     Number(n[2].substring(0, 2))
   );
-  s(i, r);
-}, e), Rt = (s, e) => I((t, r) => {
-  if (t.value === "")
+  t(i, r);
+}, e), Ht = (t, e) => O((s, r) => {
+  if (s.value === "")
     return;
-  const n = t.value.split("T"), i = n[0].split("-"), l = new Date(
+  const n = s.value.split("T"), i = n[0].split("-"), o = new Date(
     Number(i[0]),
     Number(i[1]) - 1,
     Number(i[2])
-  ), c = n[1].split(":");
-  l.setHours(Number(c[0])), l.setMinutes(Number(c[1])), l.setSeconds(Number(c[2])), s(l, r);
-}, e), bs = (s, e) => I((t, r) => {
-  if (t.value === "") {
-    s(null, r);
+  ), l = n[1].split(":");
+  o.setHours(Number(l[0])), o.setMinutes(Number(l[1])), o.setSeconds(Number(l[2])), t(o, r);
+}, e), ys = (t, e) => O((s, r) => {
+  if (s.value === "") {
+    t(null, r);
     return;
   }
-  const n = t.value.split("T");
+  const n = s.value.split("T");
   if (n.length !== 2) {
-    s(null, r);
+    t(null, r);
     return;
   }
-  const i = n[0].split("-"), l = new Date(
+  const i = n[0].split("-"), o = new Date(
     Number(i[0]),
     Number(i[1]) - 1,
     Number(i[2])
-  ), c = n[1].split(":");
-  l.setHours(Number(c[0] ?? 0)), l.setMinutes(Number(c[1] ?? 0)), l.setSeconds(Number(c[2] ?? 0)), s(l, r);
-}, e), Ts = (s, e) => I((t, r) => {
-  s(t.checked, r);
-}, e), Ss = (s, e = "input") => _(q.valueAsDate(s), re[e](Nt(s.set))), vs = (s, e = "input") => _(q.valueAsDate(s), re[e](Rt(s.set))), As = (s, e = "input") => _(q.valueAsNumber(s), re[e]($t(s.set))), _s = (s, e = "input") => _(q.value(s), re[e](kt(s.set))), Es = (s) => _(q.checked(s), It(s.set)), de = (s, e, t) => y.is(s) ? e(s) : t(s), Vt = (s, e, t) => {
-  const r = s.makeRef();
+  ), l = n[1].split(":");
+  o.setHours(Number(l[0] ?? 0)), o.setMinutes(Number(l[1] ?? 0)), o.setSeconds(Number(l[2] ?? 0)), t(o, r);
+}, e), bs = (t, e) => O((s, r) => {
+  t(s.checked, r);
+}, e), Ss = (t, e = "input") => E(j.valueAsDate(t), se[e](It(t.set))), ws = (t, e = "input") => E(j.valueAsDate(t), se[e](Ht(t.set))), _s = (t, e = "input") => E(j.valueAsNumber(t), se[e](Mt(t.set))), vs = (t, e = "input") => E(j.value(t), se[e](kt(t.set))), Ts = (t) => E(j.checked(t), Lt(t.set)), ue = (t, e, s) => g.is(t) ? e(t) : s(t), $t = (t, e, s) => {
+  const r = t.makeRef();
   let n = () => {
-  };
-  const i = e.on((l) => {
-    n(!0), n = f(t(l))(r);
+  }, i = null;
+  const o = e.on((l) => {
+    i?.dispose(), n(!0), i = new q(), n = L(
+      i,
+      () => d(s(l))(r)
+    );
   });
   return (l) => {
-    n(l), i(), r.clear(l);
+    i?.dispose(), n(l), o(), r.clear(l);
   };
-}, ne = (s, e) => {
-  function t(n) {
+}, re = (t, e) => {
+  function s(n) {
     return (i) => {
-      const l = i.makeRef();
-      let c, a;
-      const u = n.map((p) => Object.keys(p)[0]);
-      let h;
-      const d = u.on((p) => {
-        if (p !== h) {
-          h = p, a == null || a.dispose(), c == null || c(!0), a = n.map((g) => g[p]);
-          const m = e[p](a);
-          c = f(m)(l);
+      const o = i.makeRef();
+      let l, c;
+      const a = n.map((p) => Object.keys(p)[0]);
+      let u;
+      const h = a.on((p) => {
+        if (p !== u) {
+          u = p, c?.dispose(), l?.(!0), c = n.map((m) => m[p]);
+          const f = e[p](c);
+          l = d(f)(o);
         }
       });
       return (p) => {
-        a == null || a.dispose(), d(), l.clear(p), c == null || c(p);
+        c?.dispose(), h(), o.clear(p), l?.(p);
       };
     };
   }
   function r(n) {
     const i = Object.keys(n)[0];
-    return f(e[i](te(n[i])));
+    return d(e[i](K(n[i])));
   }
-  return de(s, t, r);
-}, qe = (s, e, t) => ne(
-  b.map(s, (r) => ({ [r[e]]: r })),
+  return ue(t, s, r);
+}, Re = (t, e, s) => re(
+  y.map(t, (r) => ({ [r[e]]: r })),
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  t
-), Cs = (s, e) => qe(s, "kind", e), ws = (s, e) => {
-  const t = b.map(s, ([r, n]) => ({ [r]: n }));
-  return ne(t, e);
-}, xs = (s, e) => qe(s, "type", e), jt = (s, e) => ne(
-  b.map(s, (t) => ({ [t]: !0 })),
+  s
+), As = (t, e) => Re(t, "kind", e), Es = (t, e) => {
+  const s = y.map(t, ([r, n]) => ({ [r]: n }));
+  return re(s, e);
+}, Cs = (t, e) => Re(t, "type", e), Nt = (t, e) => re(
+  y.map(t, (s) => ({ [s]: !0 })),
   e
-), Ps = (s, e = {}) => (t) => {
-  const r = (e == null ? void 0 : e.firstSeparator) ?? s, n = (e == null ? void 0 : e.lastSeparator) ?? s;
-  return jt(
-    t.map((i) => i.isFirst ? "first" : i.isLast ? "last" : "other"),
+), Ds = (t, e = {}) => (s) => {
+  const r = e?.firstSeparator ?? t, n = e?.lastSeparator ?? t;
+  return Nt(
+    s.map((i) => i.isFirst ? "first" : i.isLast ? "last" : "other"),
     {
       first: r,
       last: n,
-      other: s
+      other: t
     }
   );
-}, Ls = (s) => (e) => (e.appendOrInsert(s), (t) => {
-  t && X(s);
-}), Ds = (s, e, t) => {
+}, Ps = (t) => (e) => (e.appendOrInsert(t), (s) => {
+  s && U(t);
+}), xs = (t, e, s) => {
   function r(i) {
-    return (l) => {
-      const c = l.makeRef();
-      let a = () => {
-      }, u = !1, h = null;
-      const d = i.on((p) => {
-        p == null ? (a(!0), a = f(t == null ? void 0 : t())(c), u = !1, h == null || h.dispose(), h = null) : u ? h.set(p) : (h = w(p), a(!0), a = f(e(h))(
-          c
-        ), u = !0);
+    return (o) => {
+      const l = o.makeRef();
+      let c = () => {
+      }, a = !1, u = null;
+      const h = i.on((p) => {
+        p == null ? (c(!0), c = d(s?.())(l), a = !1, u?.dispose(), u = null) : a ? u.set(p) : (u = T(p), c(!0), c = d(e(u))(
+          l
+        ), a = !0);
       });
       return (p) => {
-        h == null || h.dispose(), d(), a == null || a(p), c.clear(p);
+        u?.dispose(), h(), c?.(p), l.clear(p);
       };
     };
   }
   function n(i) {
     if (i == null) {
-      const l = t == null ? void 0 : t();
-      return l != null ? f(l) : x;
+      const o = s?.();
+      return o != null ? d(o) : C;
     }
-    return f(e(te(i)));
+    return d(e(K(i)));
   }
-  return de(
-    s,
+  return ue(
+    t,
     r,
     n
   );
-}, Ms = (...s) => (e, t) => (r) => {
+}, Ls = (...t) => (e, s) => (r) => {
   const n = r.makeRef();
-  if (s.some(
-    (m) => !y.is(m) && m == null
+  if (t.some(
+    (f) => !g.is(f) && f == null
   ))
-    return (t != null ? f(t == null ? void 0 : t()) : x)(
+    return (s != null ? d(s?.()) : C)(
       n
     );
-  const l = s.map(() => null), c = s.map(
-    (m) => y.is(m) ? m.value != null : m != null
+  const o = t.map(() => null), l = t.map(
+    (f) => g.is(f) ? f.value != null : f != null
   );
-  let a = null;
-  const u = w(c.every((m) => m)), h = (m, g) => {
-    if (m.value != null) {
-      if (l[g] == null) {
-        const S = w(m.value);
-        l[g] = S;
+  let c = null;
+  const a = T(l.every((f) => f)), u = (f, m) => {
+    if (f.value != null) {
+      if (o[m] == null) {
+        const S = T(f.value);
+        o[m] = S;
       } else
-        l[g].value = m.value;
-      c[g] = !0;
+        o[m].value = f.value;
+      l[m] = !0;
     } else
-      c[g] = !1;
+      l[m] = !1;
   };
-  let d = s.length - 1;
-  const p = s.map((m, g) => {
-    if (!y.is(m)) {
-      const S = w(m);
-      return l[g] = S, () => {
+  let h = t.length - 1;
+  const p = t.map((f, m) => {
+    if (!g.is(f)) {
+      const S = T(f);
+      return o[m] = S, () => {
       };
     }
-    return m.on(() => {
-      h(m, g), d === 0 ? u.value = c.every((S) => S) : d--;
+    return f.on(() => {
+      u(f, m), h === 0 ? a.value = l.every((S) => S) : h--;
     });
   });
-  return u.on((m) => {
-    a == null || a(!0), a = null, m ? a = f(e(...l))(n) : a = f((t == null ? void 0 : t()) ?? x)(n);
-  }), (m) => {
-    l.forEach((g) => g == null ? void 0 : g.dispose()), u.dispose(), p.forEach((g) => g()), a == null || a(m), n.clear(m);
-  };
-}, F = (...s) => (e) => (t) => s.forEach((r) => r(t, e)), Fe = (s, e, t) => de(
-  s,
-  (r) => (n) => Vt(
+  return a.on((f) => {
+    c?.(!0), c = null, f ? c = d(e(...o))(n) : c = d(s?.() ?? C)(n);
+  }), (f) => {
+    o.forEach((m) => m?.dispose()), a.dispose(), p.forEach((m) => m()), c?.(f), n.clear(f);
+  };
+}, Ve = (t, e, s) => ue(
+  t,
+  (r) => (n) => $t(
     n,
     r,
-    (i) => i ? e() : t == null ? void 0 : t()
+    (i) => i ? e() : s?.()
   ),
   (r) => {
     if (r) {
       const n = e();
-      return n != null ? f(n) : x;
+      return n != null ? d(n) : C;
     }
-    return f(t == null ? void 0 : t());
+    return d(s?.());
   }
-), Os = (s, e, t) => Fe(
-  b.map(s, (r) => !r),
+), Os = (t, e, s) => Ve(
+  y.map(t, (r) => !r),
   e,
-  t
-), Be = (s, e, t) => {
-  if (t != null)
-    return Be(s, (r) => {
-      const n = new ce(
+  s
+), je = (t, e, s) => {
+  if (s != null)
+    return je(t, (r) => {
+      const n = new le(
         r.index,
         r.total.map((i) => i - 1)
       );
-      return _(
-        F(n.dispose),
-        f(e(r)),
-        Fe(
+      return E(
+        d(e(r)),
+        Ve(
           r.isLast,
-          () => x,
-          () => t(n)
+          () => C,
+          () => s(n)
         )
       );
     });
-  if (y.is(s))
+  if (g.is(t))
     return (r) => {
-      const n = s.derive(), i = r.makeRef(), l = [];
+      const n = t.derive(), i = r.makeRef(), o = [], l = [];
       return n.on((c) => {
-        const a = l.splice(c);
-        for (const u of a)
-          u(!0);
-        for (let u = l.length; u < c; u++) {
-          const h = new ce(u, n);
-          l.push(
-            _(
-              F(h.dispose),
-              f(e(h))
-            )(i)
+        const a = o.splice(c), u = l.splice(c);
+        for (const h of u)
+          h.dispose();
+        for (const h of a)
+          h(!0);
+        for (let h = o.length; h < c; h++) {
+          const p = new le(h, n), f = new q();
+          l.push(f), o.push(
+            L(f, () => d(e(p))(i))
           );
         }
       }), (c) => {
-        n.dispose();
         for (const a of l)
+          a.dispose();
+        l.length = 0, n.dispose();
+        for (const a of o)
           a(c);
-        l.length = 0, i.clear(c);
+        o.length = 0, i.clear(c);
       };
     };
   {
-    const r = te(s);
-    return _(
-      ...Array.from({ length: s }, (n, i) => i).map((n) => {
-        const i = new ce(n, r);
-        return _(
-          F(i.dispose),
-          f(e(i))
-        );
+    const r = K(t);
+    return E(
+      ...Array.from({ length: t }, (n, i) => i).map((n) => {
+        const i = new le(n, r);
+        return d(e(i));
       })
     );
   }
-}, Is = (s, e, t) => {
-  const r = b.map(s, (i) => i.length), n = b.toSignal(s);
-  return Be(
+}, ks = (t, e, s) => {
+  const r = y.map(t, (i) => i.length), n = y.toSignal(t);
+  return je(
     r,
     (i) => {
-      const l = n.map((c) => c[i.index]);
-      return _(
-        F(l.dispose),
-        f(e(l, i))
-      );
+      const o = n.map((l) => l[i.index]);
+      return d(e(o, i));
     },
-    t
+    s
   );
-}, Hs = (s, e) => {
-  if (y.is(s)) {
-    const t = s;
+}, Rt = (...t) => (e) => (s) => t.forEach((r) => {
+  typeof r == "function" ? r(s, e) : r.dispose(s, e);
+}), Ms = (t, e) => {
+  if (g.is(t)) {
+    const s = t;
     return (r) => {
       r = r.makeRef();
-      const n = t.map((c) => f(e(c)));
+      const n = s.map((l) => d(e(l)));
       let i = () => {
       };
-      const l = n.on((c) => {
-        i(!0), i = c(r);
+      const o = n.on((l) => {
+        i(!0), i = l(r);
       });
-      return (c) => {
-        l(), i(c);
+      return (l) => {
+        o(), i(l);
       };
     };
   }
-  return f(e(s));
-}, ks = (s, e, t = () => x) => ne(
-  b.map(
-    s,
+  return d(e(t));
+}, Is = (t, e, s = () => C) => re(
+  y.map(
+    t,
     (r) => r.length > 0 ? { notEmpty: r } : { whenEmpty: null }
   ),
   {
     notEmpty: (r) => e(r),
-    whenEmpty: () => t()
+    whenEmpty: () => s()
   }
-), $s = (s, e) => (t) => {
-  const r = t.makePortal(s), n = fe(f(e), r);
+), Hs = (t, e) => (s) => {
+  const r = s.makePortal(t), n = ae(d(e), r);
   return () => n(!0);
-}, J = /* @__PURE__ */ new Map(), qt = (s) => ({
-  mark: lt(`Probe(${s.description})`),
+}, W = /* @__PURE__ */ new Map(), Vt = (t) => ({
+  mark: nt(`Probe(${t.description})`),
   create: ({ callback: e = () => {
-  }, timeout: t = 10 } = {}) => {
-    const r = (c) => {
-      clearTimeout(n), J.delete(s), e(c);
+  }, timeout: s = 10 } = {}) => {
+    const r = (l) => {
+      clearTimeout(n), W.delete(t), e(l);
     };
-    if (J.has(s))
-      throw new Error(`Probe already exists: ${s.description}`);
-    const n = setTimeout(() => r("timeout"), t), i = { counter: 0, timeoutId: n };
-    return J.set(s, i), {
+    if (W.has(t))
+      throw new Error(`Probe already exists: ${t.description}`);
+    const n = setTimeout(() => r("timeout"), s), i = { counter: 0, timeoutId: n };
+    return W.set(t, i), {
       value: () => {
         clearTimeout(n);
-        const c = J.get(s);
-        c != null && --c.counter === 0 && r("resolved");
+        const l = W.get(t);
+        l != null && --l.counter === 0 && r("resolved");
       },
       dispose: () => r("disposed"),
       onUse: () => i.counter++
     };
   }
-}), Ns = qt(Symbol("GlobalProbe")), Ft = (s, e) => (t) => {
-  const r = t.getStyle(s);
-  return t.setStyle(s, e), (n) => {
-    n && t.setStyle(s, r);
+}), $s = Vt(Symbol("GlobalProbe")), jt = (t, e) => (s) => {
+  const r = s.getStyle(t);
+  return s.setStyle(t, e), (n) => {
+    n && s.setStyle(t, r);
   };
-}, Bt = (s, e) => (t) => {
-  const r = t.getStyle(s), n = e.on((i) => t.setStyle(s, i));
+}, qt = (t, e) => (s) => {
+  const r = s.getStyle(t), n = e.on((i) => s.setStyle(t, i));
   return (i) => {
-    n(), i && t.setStyle(s, r);
+    n(), i && s.setStyle(t, r);
   };
-}, Te = (s, e) => y.is(e) ? Bt(s, e) : Ft(s, e), Rs = new Proxy({}, {
+}, pe = (t, e) => g.is(e) ? qt(t, e) : jt(t, e), Ns = new Proxy({}, {
   /**
    * Creates a renderable component for the specified `style` property.
    *
@@ -2232,168 +2427,184 @@ const Ct = /* @__PURE__ */ new Set([
    * @returns The renderable component for the specified attribute.
    *
    */
-  get: (s, e) => e === "variable" ? (t, r) => Te(t, r) : (t) => Te(e, t)
-}), Wt = (s) => (e) => {
+  get: (t, e) => e === "variable" ? (s, r) => pe(s, r) : (s) => pe(e, s)
+}), Ft = (t) => (e) => {
   if (e.isBrowser()) {
-    const t = s(e);
-    if (t != null)
-      return f(t)(e);
+    const s = t(e);
+    if (s != null)
+      return d(s)(e);
   }
   return () => {
   };
-}, Vs = (s) => (e) => {
-  const t = s(e);
-  return t == null ? () => {
-  } : f(t)(e);
-}, js = (s) => Wt((e) => s(e.element)), qs = (s) => (e) => {
+}, Rs = (t) => (e) => {
+  const s = t(e);
+  return s == null ? () => {
+  } : d(s)(e);
+}, Vs = (t) => Ft((e) => t(e.element)), js = (t) => (e) => {
   if (e.isHeadlessDOM()) {
-    const t = s(e);
-    if (t)
-      return f(t)(e);
+    const s = t(e);
+    if (s)
+      return d(s)(e);
   }
   return () => {
   };
-}, pe = (s) => (e) => {
-  let t = e;
+}, qs = (t) => (e) => {
+  const s = new q(), r = L(s, () => d(t(s))(e));
+  return (n) => {
+    s.dispose(), r(n);
+  };
+}, he = (t) => (e) => {
+  let s = e;
   function r() {
-    return t;
+    return s;
   }
-  function n(c) {
-    t = c;
+  function n(l) {
+    s = l;
   }
-  const i = [], l = s({
-    use: ({ mark: c }) => {
-      const { value: a, onUse: u } = r().getProvider(c);
-      return u == null || u(), a;
+  const i = [], o = t({
+    use: ({ mark: l }) => {
+      const { value: c, onUse: a } = r().getProvider(l);
+      return a?.(), c;
     },
-    set: ({ mark: c, create: a }, u) => {
-      const { value: h, dispose: d, onUse: p } = a(u, r());
-      i.push(d), n(r().setProvider(c, h, p));
+    set: ({ mark: l, create: c }, a) => {
+      const { value: u, dispose: h, onUse: p } = c(a, r());
+      i.push(h), n(r().setProvider(l, u, p));
     }
   });
-  return l == null ? () => {
-  } : _(
-    f(l),
-    F(() => i.forEach((c) => c()))
+  return o == null ? () => {
+  } : E(
+    d(o),
+    Rt(() => i.forEach((l) => l()))
   )(r());
-}, Fs = (s, e, t) => pe(({ set: r }) => (r(s, e), t())), Bs = (s, e) => pe(({ use: t }) => e(t(s))), Ws = (...s) => (e) => pe(({ use: t }) => {
-  const r = s.map(t);
+}, Fs = (t, e, s) => he(({ set: r }) => (r(t, e), s())), Bs = (t, e) => he(({ use: s }) => e(s(t))), Ws = (...t) => (e) => he(({ use: s }) => {
+  const r = t.map(s);
   return e(...r);
 });
 export {
   gs as Async,
-  Es as BindChecked,
+  Ts as BindChecked,
   Ss as BindDate,
-  vs as BindDateTime,
-  As as BindNumber,
-  _s as BindText,
-  R as BrowserContext,
-  Y as CLASS_PLACEHOLDER_ATTR,
-  N as Computed,
-  Ps as Conjunction,
-  Ls as DOMNode,
-  Ne as El,
-  Re as ElNS,
-  ce as ElementPosition,
-  x as Empty,
-  Ds as Ensure,
-  Ms as EnsureAll,
-  Is as ForEach,
-  _ as Fragment,
-  Ns as GlobalProbe,
-  is as HeadlessAdapter,
-  V as HeadlessContext,
-  _t as HeadlessElement,
-  He as HeadlessPortal,
-  Et as HeadlessText,
-  Hs as MapSignal,
-  ve as MemoryStore,
-  ks as NotEmpty,
-  It as OnChecked,
-  F as OnDispose,
-  ne as OneOf,
-  qe as OneOfField,
-  Cs as OneOfKind,
-  ws as OneOfTuple,
-  xs as OneOfType,
-  jt as OneOfValue,
-  $s as Portal,
-  G as Prop,
+  ws as BindDateTime,
+  _s as BindNumber,
+  vs as BindText,
+  N as BrowserContext,
+  J as CLASS_PLACEHOLDER_ATTR,
+  $ as Computed,
+  Ds as Conjunction,
+  Ps as DOMNode,
+  q as DisposalScope,
+  Ie as El,
+  He as ElNS,
+  le as ElementPosition,
+  C as Empty,
+  xs as Ensure,
+  Ls as EnsureAll,
+  ks as ForEach,
+  E as Fragment,
+  $s as GlobalProbe,
+  ns as HeadlessAdapter,
+  R as HeadlessContext,
+  wt as HeadlessElement,
+  Oe as HeadlessPortal,
+  _t as HeadlessText,
+  Ms as MapSignal,
+  be as MemoryStore,
+  Is as NotEmpty,
+  Lt as OnChecked,
+  Rt as OnDispose,
+  re as OneOf,
+  Re as OneOfField,
+  As as OneOfKind,
+  Es as OneOfTuple,
+  Cs as OneOfType,
+  Nt as OneOfValue,
+  Hs as Portal,
+  Z as Prop,
   Fs as Provide,
-  Le as ProviderNotFoundError,
-  ct as RenderingError,
-  Be as Repeat,
-  y as Signal,
-  Ve as Task,
-  ls as TextNode,
+  Ce as ProviderNotFoundError,
+  it as RenderingError,
+  je as Repeat,
+  g as Signal,
+  $e as Task,
+  os as TextNode,
   Os as Unless,
   Bs as Use,
   Ws as UseMany,
-  b as Value,
-  Fe as When,
-  Wt as WithBrowserCtx,
-  Vs as WithCtx,
-  js as WithElement,
-  qs as WithHeadlessCtx,
-  pe as WithProvider,
+  y as Value,
+  Ve as When,
+  Ft as WithBrowserCtx,
+  Rs as WithCtx,
+  Vs as WithElement,
+  js as WithHeadlessCtx,
+  he as WithProvider,
+  qs as WithScope,
   De as _NODE_PLACEHOLDER_ATTR,
-  ot as _getSelfOrParentElement,
-  Pe as _isElement,
-  it as _makeGetter,
-  nt as _makeSetter,
-  X as _removeDOMNode,
-  $e as _signalText,
+  rt as _getSelfOrParentElement,
+  Ee as _isElement,
+  st as _makeGetter,
+  tt as _makeSetter,
+  U as _removeDOMNode,
+  Me as _signalText,
   ke as _staticText,
-  Qt as animateSignal,
-  st as animateSignals,
-  as as aria,
-  q as attr,
-  ts as bind,
-  ss as coalesce,
-  ae as computed,
-  he as computedOf,
-  rt as computedRecord,
-  cs as dataAttr,
-  zt as delaySignal,
-  ze as effect,
-  Gt as effectOf,
-  Ht as emit,
-  Ts as emitChecked,
-  I as emitTarget,
+  Yt as animateSignal,
+  Ke as animateSignals,
+  cs as aria,
+  j as attr,
+  es as bind,
+  ts as coalesce,
+  z as computed,
+  ee as computedOf,
+  et as computedRecord,
+  ls as dataAttr,
+  Zt as delaySignal,
+  me as effect,
+  Ge as effectOf,
+  Ot as emit,
+  bs as emitChecked,
+  O as emitTarget,
   kt as emitValue,
-  Nt as emitValueAsDate,
-  Rt as emitValueAsDateTime,
-  ys as emitValueAsNullableDate,
-  bs as emitValueAsNullableDateTime,
-  $t as emitValueAsNumber,
-  Ye as endInterpolate,
-  ue as getWindow,
-  Qe as guessInterpolate,
-  fs as html,
+  It as emitValueAsDate,
+  Ht as emitValueAsDateTime,
+  ms as emitValueAsNullableDate,
+  ys as emitValueAsNullableDateTime,
+  Mt as emitValueAsNumber,
+  Ze as endInterpolate,
+  ge as getCurrentScope,
+  Wt as getParentScope,
+  Bt as getScopeStack,
+  ce as getWindow,
+  ze as guessInterpolate,
+  hs as html,
   ds as input,
-  Xe as interpolateDate,
-  Je as interpolateNumber,
-  Ge as interpolateString,
+  Qe as interpolateDate,
+  Xe as interpolateNumber,
+  Ye as interpolateString,
   Jt as joinSignals,
-  Xt as localStorageProp,
-  qt as makeProbe,
-  lt as makeProviderMark,
-  ms as math,
-  hs as mathAttr,
-  Zt as merge,
-  re as on,
-  Kt as previousSignal,
-  w as prop,
-  rs as render,
-  fe as renderWithContext,
-  f as renderableOfTNode,
-  os as restoreTempoPlaceholders,
-  ns as runHeadless,
-  Yt as sessionStorageProp,
-  te as signal,
-  es as slidingWindowSignal,
-  Ae as storedProp,
-  Rs as style,
-  ps as svg,
-  us as svgAttr
+  Gt as localStorageProp,
+  Vt as makeProbe,
+  nt as makeProviderMark,
+  ps as math,
+  us as mathAttr,
+  Qt as merge,
+  se as on,
+  Fe as popScope,
+  zt as previousSignal,
+  T as prop,
+  qe as pushScope,
+  ss as render,
+  ae as renderWithContext,
+  d as renderableOfTNode,
+  is as restoreTempoPlaceholders,
+  rs as runHeadless,
+  _ as scopeStack,
+  Ut as scoped,
+  Xt as sessionStorageProp,
+  K as signal,
+  Kt as slidingWindowSignal,
+  Se as storedProp,
+  Ns as style,
+  fs as svg,
+  as as svgAttr,
+  oe as untracked,
+  L as withScope
 };