@tempots/dom 26.10.0 → 27.0.0

package/index.js

@@ -5,8 +5,8 @@ var se = (s) => {
 var He = (s, e, t) => e in s ? Oe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
 var i = (s, e, t) => He(s, typeof e != "symbol" ? e + "" : e, t), re = (s, e, t) => e.has(s) || se("Cannot " + t);
 var X = (s, e, t) => (re(s, e, "read from private field"), t ? t.call(s) : e.get(s)), ne = (s, e, t) => e.has(s) ? se("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), ie = (s, e, t, r) => (re(s, e, "write to private field"), r ? r.call(s, t) : e.set(s, t), t);
-const Ne = (s, e, t) => s + (e - s) * t;
-const $e = (s, e, t) => {
+const $e = (s, e, t) => s + (e - s) * t;
+const ke = (s, e, t) => {
   const r = Math.max(s.length, e.length);
   let n = "";
   for (let o = 0; o < r; o++) {
@@ -16,7 +16,7 @@ const $e = (s, e, t) => {
     isNaN(c) && (c = 97), n += String.fromCharCode(l + (c - l) * t);
   }
   return n;
-}, ke = (s, e, t) => new Date(s.getTime() + (e.getTime() - s.getTime()) * t), Ie = (s, e) => e, Re = (s) => typeof s == "number" ? Ne : typeof s == "string" ? $e : s instanceof Date ? ke : Ie;
+}, Ne = (s, e, t) => new Date(s.getTime() + (e.getTime() - s.getTime()) * t), Ie = (s, e) => e, Re = (s) => typeof s == "number" ? $e : typeof s == "string" ? ke : s instanceof Date ? Ne : Ie;
 var D;
 class Y {
   /**
@@ -152,13 +152,54 @@ const O = class O {
       this._disposed || (this._disposed = !0, this._onDisposeListeners.forEach((e) => e()), this._onDisposeListeners.length = 0, this._derivatives.length = 0);
     });
     /**
-     * Returns a new Computed instance that applies the given mapping function to the value of this Signal.
-     * The mapping function is called whenever the value of this Signal changes.
+     * Creates a new computed signal by applying a transformation function to this signal's value.
      *
-     * @typeParam O - The type of the mapped value.
-     * @param fn - The mapping function to apply to the value of this Signal.
-     * @param equals - Optional equality function to determine if two mapped values are equal.
-     * @returns - A new Computed instance with the mapped 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
      */
     i(this, "map", (e, t = (r, n) => r === n) => {
       const r = new x(() => {
@@ -256,7 +297,7 @@ const O = class O {
      * @returns A property that holds the mapped value and can be observed for changes.
      */
     i(this, "mapAsync", (e, t, r, n = (o, l) => o === l) => {
-      const o = w(t, n);
+      const o = E(t, n);
       let l = 0, c = new AbortController();
       return o.onDispose(
         this.on(async (a) => {
@@ -306,7 +347,7 @@ const O = class O {
     i(this, "deriveProp", ({
       autoDisposeProp: e = !0,
       equals: t
-    } = {}) => this.feedProp(w(this.get(), t), e));
+    } = {}) => this.feedProp(E(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.
@@ -354,14 +395,45 @@ const O = class O {
   }
 };
 /**
- * Creates a Signal that holds the result of a Promise.
+ * Creates a Signal that holds the result of a Promise, with proper error handling.
  *
- * @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 - A function to recover from Promise rejection and provide an alternative value for the Signal.
- * @param equals - A function to compare two values of type O for equality. Defaults to strict equality (===).
- * @returns - A Signal that represents the result of the Promise.
+ * 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
  */
 i(O, "ofPromise", (e, t, r, n = (o, l) => o === l) => {
   const o = new O(t, n);
@@ -546,7 +618,7 @@ const z = (s, e, t = (r, n) => r === n) => {
     n.dispose(), t.abortSignal != null && t.abortSignal.removeEventListener("abort", o);
   };
   return t.abortSignal != null && t.abortSignal.addEventListener("abort", o), o;
-}, w = (s, e = (t, r) => t === r) => new I(s, e), U = (s, e = (t, r) => t === r) => new d(s, e), le = () => typeof window < "u" ? window : void 0, T = {
+}, E = (s, e = (t, r) => t === r) => new I(s, e), U = (s, e = (t, r) => t === r) => new d(s, e), le = () => typeof window < "u" ? window : void 0, T = {
   /**
    * 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.
@@ -616,7 +688,7 @@ const z = (s, e, t = (r, n) => r === n) => {
   deriveProp: (s, {
     autoDisposeProp: e = !0,
     equals: t
-  } = {}) => d.is(s) ? s.deriveProp({ autoDisposeProp: e, equals: t }) : w(s, t)
+  } = {}) => d.is(s) ? s.deriveProp({ autoDisposeProp: e, equals: t }) : E(s, t)
 }, qe = (...s) => (e, t) => {
   const r = s.filter((n) => d.is(n));
   return z(
@@ -624,12 +696,12 @@ const z = (s, e, t = (r, n) => r === n) => {
     r,
     t
   );
-}, Lt = (s) => {
+}, Pt = (s) => {
   const e = Object.keys(s);
   return qe(...Object.values(s))(
     (...t) => Object.fromEntries(e.map((r, n) => [r, t[n]]))
   );
-}, Pt = (...s) => (e, t = {}) => {
+}, Lt = (...s) => (e, t = {}) => {
   const r = s.filter((n) => d.is(n));
   return je(
     () => e(...s.map(T.get)),
@@ -689,9 +761,9 @@ function oe(s) {
   return typeof requestAnimationFrame == "function" ? requestAnimationFrame(s) : setTimeout(s, 0);
 }
 const Fe = (s, e, t, r) => {
-  const n = (r == null ? void 0 : r.duration) ?? 300, o = (r == null ? void 0 : r.easing) ?? ((S) => S), l = (r == null ? void 0 : r.equals) ?? ((S, $) => S === $);
+  const n = (r == null ? void 0 : r.duration) ?? 300, o = (r == null ? void 0 : r.easing) ?? ((S) => S), l = (r == null ? void 0 : r.equals) ?? ((S, k) => S === k);
   let c = r == null ? void 0 : r.interpolate, a = s, u = e(), h = performance.now(), g = null, y = !0;
-  const p = new x(e, l), m = w(s, l);
+  const p = new x(e, l), m = E(s, l);
   m.onDispose(() => {
     g !== null && cancelAnimationFrame(g);
   }), m.onDispose(p.dispose), t.forEach((S) => {
@@ -700,10 +772,10 @@ const Fe = (s, e, t, r) => {
   const C = (S) => {
     u = S, h = performance.now(), a = m.value, y && (y = !1, g = oe(ee));
   }, ee = () => {
-    const $ = (performance.now() - h) / T.get(n), Me = o($);
+    const k = (performance.now() - h) / T.get(n), Me = o(k);
     c == null && (c = Re(a));
     let te = c(a, u, Me);
-    $ >= 1 ? (y = !0, te = u) : g = oe(ee), m.set(te);
+    k >= 1 ? (y = !0, te = u) : g = oe(ee), m.set(te);
   };
   return p.on(C), m;
 }, Ot = (s, e) => {
@@ -754,7 +826,7 @@ class me extends Error {
     super(`Provider not found: ${e.description}`);
   }
 }
-class L {
+class P {
   /**
    * Constructs a new `DOMContext` instance.
    *
@@ -774,11 +846,26 @@ class L {
      */
     i(this, "createElement", (e, t) => t !== void 0 ? this.document.createElementNS(t, e) : this.document.createElement(e));
     /**
-     * Creates a new DOM element (eg: HTML or SVG) with the specified tag name and namespace and appends it to the current element.
+     * Creates a new child element and appends it to the current element, returning a new context.
      *
-     * @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.
+     * 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
      */
     i(this, "makeChildElement", (e, t) => {
       const r = this.createElement(e, t);
@@ -836,11 +923,50 @@ class L {
      * @param element - The DOM element to use in the new `DOMContext` instance.
      * @returns A new `DOMContext` instance with the provided `element`.
      */
-    i(this, "withElement", (e) => new L(this.document, e, void 0, this.providers));
+    i(this, "withElement", (e) => new P(this.document, e, void 0, this.providers));
     /**
-     * Creates a new `DOMContext` instance with a reference to a DOM element selected by the provided `selector`.
-     * @param selector - The CSS selector for the target DOM element.
-     * @returns A new `DOMContext` instance with a reference to the selected DOM element.
+     * 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
      */
     i(this, "makePortal", (e) => {
       const t = typeof e == "string" ? this.document.querySelector(e) : e;
@@ -854,7 +980,7 @@ class L {
      * @param reference - The optional `Text` node to use as the reference for the new `DOMContext`.
      * @returns A new `DOMContext` instance with the specified reference.
      */
-    i(this, "withReference", (e) => new L(this.document, this.element, e, this.providers));
+    i(this, "withReference", (e) => new P(this.document, this.element, e, this.providers));
     /**
      * Sets a provider for the given provider mark.
      *
@@ -862,7 +988,7 @@ class L {
      * @param value - The provider to set for the given mark.
      * @returns A new `DOMContext` instance with the specified provider.
      */
-    i(this, "setProvider", (e, t, r) => new L(this.document, this.element, this.reference, {
+    i(this, "setProvider", (e, t, r) => new P(this.document, this.element, this.reference, {
       ...this.providers,
       [e]: [t, r]
     }));
@@ -965,25 +1091,25 @@ class L {
    * @returns A new `DOMContext` instance.
    */
   static of(e, t, r) {
-    return new L(e.ownerDocument, e, t, r);
+    return new P(e.ownerDocument, e, t, r);
   }
 }
 const Je = (s) => Symbol(s), Q = (s, e) => {
   const t = s(e);
   return (r = !0) => t(r);
-}, Nt = (s, e, { doc: t, clear: r, disposeWithParent: n = !0, providers: o = {} } = {}) => {
+}, $t = (s, e, { doc: t, clear: r, disposeWithParent: n = !0, providers: o = {} } = {}) => {
   const l = typeof e == "string" ? (t ?? document).querySelector(e) : e;
   if (l === null)
     throw new Ge(
       `Cannot find element by selector for render: ${e}`
     );
   r !== !1 && (t ?? l.ownerDocument) != null && l.nodeType === 1 && (l.innerHTML = "");
-  const c = Ue(l), a = ge(l) ? void 0 : l, u = L.of(c, a, o), h = Q(s, u);
+  const c = Ue(l), a = ge(l) ? void 0 : l, u = P.of(c, a, o), h = Q(s, u);
   let g;
   return n && (g = new MutationObserver((y) => {
     var p;
     (p = y[0]) == null || p.removedNodes.forEach((m) => {
-      m === l && (g == null || g.disconnect(), h(l.nodeType !== Node.ELEMENT_NODE));
+      m === l && (g == null || g.disconnect(), h(l.nodeType !== 1));
     });
   }), g.observe(l.parentElement, {
     childList: !0,
@@ -992,14 +1118,14 @@ const Je = (s) => Symbol(s), Q = (s, e) => {
   })), () => {
     g == null || g.disconnect(), h(!0);
   };
-}, $t = (s, {
+}, kt = (s, {
   startUrl: e = "https://example.com",
   selector: t,
   providers: r = {}
 } = {
   selector: "body"
 }) => {
-  const n = T.toSignal(e).deriveProp(), o = new Se(t, void 0), l = new P(o, void 0, { currentURL: n }, r);
+  const n = T.toSignal(e).deriveProp(), o = new Se(t, void 0), l = new L(o, void 0, { currentURL: n }, r);
   return {
     clear: Q(s(), l),
     root: o,
@@ -1012,7 +1138,7 @@ class Ge extends Error {
   }
 }
 const ye = "data-tts-node", V = "data-tts-class", j = "data-tts-style", q = "data-tts-html", F = "data-tts-text", B = "data-tts-attrs";
-class kt {
+class Nt {
   constructor({
     select: e,
     getAttribute: t,
@@ -1210,7 +1336,7 @@ const Xe = () => {
   document.querySelectorAll(`[${B}]`).forEach((e) => rt(e));
 }, It = () => {
   Xe(), ze(), et(), Ze(), st(), nt();
-}, b = Symbol("class"), E = Symbol("style"), v = Symbol("handler"), be = () => Math.random().toString(36).substring(2, 15), it = (s) => s.replace(/<[^>]*>?/g, "");
+}, b = Symbol("class"), w = Symbol("style"), v = Symbol("handler"), be = () => Math.random().toString(36).substring(2, 15), it = (s) => s.replace(/<[^>]*>?/g, "");
 class Ae {
   constructor(e) {
     i(this, "id", be());
@@ -1240,7 +1366,7 @@ class Ae {
     i(this, "hasInnerText", () => this.properties.innerText != null);
     i(this, "hasChildren", () => this.children.length > 0);
     i(this, "hasClasses", () => this.properties[b] != null);
-    i(this, "hasStyles", () => this.properties[E] != null);
+    i(this, "hasStyles", () => this.properties[w] != null);
     i(this, "hasAttributes", () => Object.keys(this.properties).length > 0);
     i(this, "hasHandlers", () => this.properties[v] != null);
     i(this, "hasRenderableProperties", () => this.hasClasses() || this.hasAttributes() || this.hasStyles());
@@ -1295,18 +1421,18 @@ class Ae {
       ([e]) => !["innerText", "innerHTML"].includes(e)
     ));
     i(this, "getVisibleAttributes", () => Reflect.ownKeys(this.properties).flatMap(
-      (e) => e === b ? [["class", this.getClasses()]] : e === E ? [["style", this.getStyles()]] : typeof e == "string" ? [[e, String(this.properties[e])]] : []
+      (e) => e === b ? [["class", this.getClasses()]] : e === w ? [["style", this.getStyles()]] : typeof e == "string" ? [[e, String(this.properties[e])]] : []
     ));
     i(this, "setStyle", (e, t) => {
       var n;
-      const r = (n = this.properties)[E] ?? (n[E] = {});
-      r[e] = t, t === "" && (delete r[e], Object.keys(r).length === 0 && delete this.properties[E]);
+      const r = (n = this.properties)[w] ?? (n[w] = {});
+      r[e] = t, t === "" && (delete r[e], Object.keys(r).length === 0 && delete this.properties[w]);
     });
     i(this, "getStyle", (e) => {
       var t;
-      return ((t = this.properties[E]) == null ? void 0 : t[e]) ?? "";
+      return ((t = this.properties[w]) == null ? void 0 : t[e]) ?? "";
     });
-    i(this, "getStyles", () => this.properties[E] ?? {});
+    i(this, "getStyles", () => this.properties[w] ?? {});
     i(this, "makeAccessors", (e) => {
       const t = this.properties;
       return {
@@ -1350,7 +1476,7 @@ class at {
     this.text = e;
   }
 }
-class P {
+class L {
   constructor(e, t, r, n) {
     i(this, "appendOrInsert", (e) => {
       if (this.reference != null) {
@@ -1361,7 +1487,7 @@ class P {
     });
     i(this, "makeChildElement", (e, t) => {
       const r = new ct(e, t, this.element);
-      return this.appendOrInsert(r), new P(
+      return this.appendOrInsert(r), new L(
         r,
         void 0,
         this.container,
@@ -1370,7 +1496,7 @@ class P {
     });
     i(this, "makeChildText", (e) => {
       const t = new at(e);
-      return this.appendOrInsert(t), new P(
+      return this.appendOrInsert(t), new L(
         this.element,
         t,
         this.container,
@@ -1387,7 +1513,7 @@ class P {
     i(this, "makeRef", () => this.makeChildText(""));
     i(this, "makePortal", (e) => {
       const t = new Se(e, this.element);
-      return this.appendOrInsert(t), new P(
+      return this.appendOrInsert(t), new L(
         t,
         void 0,
         this.container,
@@ -1401,7 +1527,7 @@ class P {
      * @param value - The provider to set for the given mark.
      * @returns A new `DOMContext` instance with the specified provider.
      */
-    i(this, "setProvider", (e, t, r) => new P(this.element, this.reference, this.container, {
+    i(this, "setProvider", (e, t, r) => new L(this.element, this.reference, this.container, {
       ...this.providers,
       [e]: [t, r]
     }));
@@ -1435,12 +1561,12 @@ const ut = /* @__PURE__ */ new Set([
   "readonly",
   "required",
   "selected"
-]), ht = /* @__PURE__ */ new Set(["img", "br", "hr", "input", "link", "meta"]), _e = (s) => (e) => e.makeChildText(s).clear, Ee = (s) => (e) => {
+]), ht = /* @__PURE__ */ new Set(["img", "br", "hr", "input", "link", "meta"]), _e = (s) => (e) => e.makeChildText(s).clear, we = (s) => (e) => {
   const t = e.makeChildText(s.value), r = s.on(t.setText);
   return (n) => {
     r(), t.clear(n);
   };
-}, Rt = (s) => d.is(s) ? Ee(s) : _e(s), A = (...s) => (e) => {
+}, Rt = (s) => d.is(s) ? we(s) : _e(s), A = (...s) => (e) => {
   const t = s.map((r) => f(r)(e));
   return (r) => {
     t.forEach((n) => n(r));
@@ -1461,7 +1587,7 @@ const ut = /* @__PURE__ */ new Set([
   return n(e), (l) => {
     l && n(o);
   };
-}, N = (s, e) => (t) => {
+}, $ = (s, e) => (t) => {
   const { get: r, set: n } = t.makeAccessors(s), o = r(), l = e.on(n);
   return (c) => {
     l(), c && n(o);
@@ -1482,7 +1608,7 @@ const ut = /* @__PURE__ */ new Set([
      */
     get: (s, e) => e === "class" ? (t) => d.is(t) ? dt(t) : ft(
       (t ?? "").split(" ").filter((r) => r.length > 0)
-    ) : (t) => d.is(t) ? N(
+    ) : (t) => d.is(t) ? $(
       e,
       t
     ) : H(
@@ -1501,7 +1627,7 @@ const ut = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => d.is(t) ? N(
+    get: (s, e) => (t) => d.is(t) ? $(
       `data-${e}`,
       t
     ) : H(`data-${e}`, t)
@@ -1517,7 +1643,7 @@ const ut = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => d.is(t) ? N(
+    get: (s, e) => (t) => d.is(t) ? $(
       `aria-${e}`,
       t
     ) : H(
@@ -1536,7 +1662,7 @@ const ut = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => d.is(t) ? N(
+    get: (s, e) => (t) => d.is(t) ? $(
       e,
       t
     ) : H(
@@ -1554,7 +1680,7 @@ const ut = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => d.is(t) ? N(
+    get: (s, e) => (t) => d.is(t) ? $(
       e,
       t
     ) : H(
@@ -1570,11 +1696,11 @@ const ut = /* @__PURE__ */ new Set([
   if (typeof s == "string")
     return _e(s);
   if (d.is(s))
-    return Ee(s);
+    return we(s);
   if (typeof s == "function")
     return s;
   throw new Error(`Unknown type: '${typeof s}' for child: ${s}`);
-}, we = (s, ...e) => (t) => {
+}, Ee = (s, ...e) => (t) => {
   const r = t.makeChildElement(s, void 0), n = e.map((o) => f(o)(r));
   return (o) => {
     n.forEach((l) => l(!1)), r.clear(o);
@@ -1592,7 +1718,7 @@ const ut = /* @__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) => we(e, t.flatMap(f))
+    get: (s, e) => (...t) => Ee(e, t.flatMap(f))
   }
 ), Wt = new Proxy(
   {},
@@ -1602,7 +1728,7 @@ const ut = /* @__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) => we("input", M.type(e), ...t)
+    get: (s, e) => (...t) => Ee("input", M.type(e), ...t)
   }
 ), pt = "http://www.w3.org/2000/svg", Ut = new Proxy(
   {},
@@ -1744,14 +1870,14 @@ const ut = /* @__PURE__ */ new Set([
     };
   const t = Object.keys(s)[0];
   return f(e[t](U(s[t])));
-}, Le = (s, e, t) => G(
+}, Pe = (s, e, t) => G(
   T.map(s, (r) => ({ [r[e]]: r })),
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   t
-), is = (s, e) => Le(s, "kind", e), os = (s, e) => {
+), is = (s, e) => Pe(s, "kind", e), os = (s, e) => {
   const t = T.map(s, ([r, n]) => ({ [r]: n }));
   return G(t, e);
-}, ls = (s, e) => Le(s, "type", e), St = (s, e) => G(
+}, ls = (s, e) => Pe(s, "type", e), St = (s, e) => G(
   T.map(s, (t) => ({ [t]: !0 })),
   e
 ), cs = (s, e = {}) => (t) => {
@@ -1774,7 +1900,7 @@ const ut = /* @__PURE__ */ new Set([
       let l = () => {
       }, c = !1, a = null;
       const u = r.on((h) => {
-        h == null ? (l(!0), l = f((t == null ? void 0 : t()) ?? _)(o), c = !1, a == null || a.dispose(), a = null) : (a == null ? a = w(h) : a.value = h, c || (l(!0), l = f(e(a))(
+        h == null ? (l(!0), l = f((t == null ? void 0 : t()) ?? _)(o), c = !1, a == null || a.dispose(), a = null) : (a == null ? a = E(h) : a.value = h, c || (l(!0), l = f(e(a))(
           o
         ), c = !0));
       });
@@ -1802,10 +1928,10 @@ const ut = /* @__PURE__ */ new Set([
     (p) => d.is(p) ? p.value != null : p != null
   );
   let a = null;
-  const u = w(c.every((p) => p)), h = (p, m) => {
+  const u = E(c.every((p) => p)), h = (p, m) => {
     if (p.value != null) {
       if (l[m] == null) {
-        const C = w(p.value);
+        const C = E(p.value);
         l[m] = C;
       } else
         l[m].value = p.value;
@@ -1816,7 +1942,7 @@ const ut = /* @__PURE__ */ new Set([
   let g = s.length - 1;
   const y = s.map((p, m) => {
     if (!d.is(p)) {
-      const C = w(p);
+      const C = E(p);
       return l[m] = C, () => {
       };
     }
@@ -1829,11 +1955,11 @@ const ut = /* @__PURE__ */ new Set([
   }), (p) => {
     l.forEach((m) => m == null ? void 0 : m.dispose()), u.dispose(), y.forEach((m) => m()), a == null || a(p), n.clear(p);
   };
-}, Z = (...s) => (e) => (t) => s.forEach((r) => r(t, e)), Pe = (s, e, t) => _t(
+}, Z = (...s) => (e) => (t) => s.forEach((r) => r(t, e)), Le = (s, e, t) => _t(
   T.map(s, (r) => r ? !0 : null),
   e,
   t ?? void 0
-), hs = (s, e, t) => Pe(
+), hs = (s, e, t) => Le(
   T.map(s, (r) => !r),
   e,
   t
@@ -1845,7 +1971,7 @@ const ut = /* @__PURE__ */ new Set([
   return A(
     Z(n.dispose),
     f(e(r)),
-    Pe(
+    Le(
       r.isLast,
       () => _,
       () => t(n)
@@ -1913,27 +2039,27 @@ const ut = /* @__PURE__ */ new Set([
 ), gs = (s, e) => (t) => {
   const r = t.makePortal(s);
   return Q(f(e), r);
-}, k = /* @__PURE__ */ new Map(), Et = (s) => ({
+}, N = /* @__PURE__ */ new Map(), wt = (s) => ({
   mark: Je(`Probe(${s.description})`),
   create: ({ callback: e = () => {
   }, timeout: t = 10 } = {}) => {
     const r = (c) => {
-      clearTimeout(n), k.delete(s), e(c);
+      clearTimeout(n), N.delete(s), e(c);
     };
-    if (k.has(s))
+    if (N.has(s))
       throw new Error(`Probe already exists: ${s.description}`);
     const n = setTimeout(() => r("timeout"), t), o = { counter: 0, timeoutId: n };
-    return k.set(s, o), {
+    return N.set(s, o), {
       value: () => {
         clearTimeout(n);
-        const c = k.get(s);
+        const c = N.get(s);
         c != null && --c.counter === 0 && r("resolved");
       },
       dispose: () => r("disposed"),
       onUse: () => o.counter++
     };
   }
-}), ms = Et(Symbol("GlobalProbe")), wt = (s, e) => (t) => {
+}), ms = wt(Symbol("GlobalProbe")), Et = (s, e) => (t) => {
   const r = t.getStyle(s);
   return t.setStyle(s, e), (n) => {
     n && t.setStyle(s, r);
@@ -1954,7 +2080,7 @@ const ut = /* @__PURE__ */ new Set([
      * @returns The renderable component for the specified attribute.
      *
      */
-    get: (s, e) => (t) => d.is(t) ? Ct(e, t) : wt(e, t)
+    get: (s, e) => (t) => d.is(t) ? Ct(e, t) : Et(e, t)
   }
 ), vt = (s) => (e) => {
   if (e.isBrowser()) {
@@ -1999,7 +2125,7 @@ const ut = /* @__PURE__ */ new Set([
     f(l),
     Z(() => o.forEach((c) => c()))
   )(r());
-}, Ss = (s, e, t) => K(({ set: r }) => (r(s, e), t())), _s = (s, e) => K(({ use: t }) => e(t(s))), Es = (...s) => (e) => K(({ use: t }) => {
+}, Ss = (s, e, t) => K(({ set: r }) => (r(s, e), t())), _s = (s, e) => K(({ use: t }) => e(t(s))), ws = (...s) => (e) => K(({ use: t }) => {
   const r = s.map(t);
   return e(...r);
 });
@@ -2010,12 +2136,12 @@ export {
   ts as BindDateTime,
   ss as BindNumber,
   rs as BindText,
-  L as BrowserContext,
+  P as BrowserContext,
   V as CLASS_PLACEHOLDER_ATTR,
   x as Computed,
   cs as Conjunction,
   as as DOMNode,
-  we as El,
+  Ee as El,
   Ce as ElNS,
   Y as ElementPosition,
   _ as Empty,
@@ -2024,8 +2150,8 @@ export {
   fs as ForEach,
   A as Fragment,
   ms as GlobalProbe,
-  kt as HeadlessAdapter,
-  P as HeadlessContext,
+  Nt as HeadlessAdapter,
+  L as HeadlessContext,
   ct as HeadlessElement,
   Se as HeadlessPortal,
   at as HeadlessText,
@@ -2035,7 +2161,7 @@ export {
   mt as OnChecked,
   Z as OnDispose,
   G as OneOf,
-  Le as OneOfField,
+  Pe as OneOfField,
   is as OneOfKind,
   os as OneOfTuple,
   ls as OneOfType,
@@ -2051,9 +2177,9 @@ export {
   Rt as TextNode,
   hs as Unless,
   _s as Use,
-  Es as UseMany,
+  ws as UseMany,
   T as Value,
-  Pe as When,
+  Le as When,
   vt as WithBrowserCtx,
   Ts as WithCtx,
   bs as WithElement,
@@ -2065,7 +2191,7 @@ export {
   We as _makeGetter,
   Be as _makeSetter,
   R as _removeDOMNode,
-  Ee as _signalText,
+  we as _signalText,
   _e as _staticText,
   Ot as animateSignal,
   Fe as animateSignals,
@@ -2076,7 +2202,7 @@ export {
   Ht as computedRecord,
   Vt as dataAttr,
   je as effect,
-  Pt as effectOf,
+  Lt as effectOf,
   zt as emitChecked,
   Qt as emitPreventDefault,
   Kt as emitStopImmediatePropagation,
@@ -2092,22 +2218,22 @@ export {
   Re as guessInterpolate,
   Bt as html,
   Wt as input,
-  ke as interpolateDate,
-  Ne as interpolateNumber,
-  $e as interpolateString,
-  Lt as joinSignals,
+  Ne as interpolateDate,
+  $e as interpolateNumber,
+  ke as interpolateString,
+  Pt as joinSignals,
   Dt as localStorageProp,
-  Et as makeProbe,
+  wt as makeProbe,
   Je as makeProviderMark,
   Jt as math,
   Ft as mathAttr,
   J as on,
-  w as prop,
-  Nt as render,
+  E as prop,
+  $t as render,
   Q as renderWithContext,
   f as renderableOfTNode,
   It as restoreTempoPlaceholders,
-  $t as runHeadless,
+  kt as runHeadless,
   Mt as sessionStorageProp,
   U as signal,
   ae as storedProp,