@brandup/ui 1.0.44 → 2.0.1

package/dist/mjs/index.js

@@ -1,4 +1,11 @@
 let ListenCounter = 1;
+/**
+ * Minimal event emitter with support for one-off listeners and cross-emitter listening.
+ *
+ * The optional `TEvents` type parameter is an event map (`{ eventName: (args) => void }`)
+ * that gives subclasses strongly-typed event names, callback signatures and `trigger` arguments.
+ * When omitted it defaults to a loose map, so untyped usage keeps working.
+ */
 class EventEmitter {
     _events;
     _listenId;
@@ -45,49 +52,98 @@ class EventEmitter {
         }
         return this;
     }
+    /**
+     * Listen to an event on another emitter, tracking the subscription so it can be released via `stopListening`.
+     * @param source Emitter to subscribe to.
+     * @param eventName Event name to listen for.
+     * @param callback Handler invoked when the event is triggered.
+     */
     listenTo(source, eventName, callback) {
-        this._addListeningTo(source, eventName);
+        this._addListeningTo(source, eventName, callback, callback);
         source.on(eventName, callback, this);
         return this;
     }
+    /**
+     * Listen once to an event on another emitter; the subscription is tracked and auto-removed after it fires.
+     * @param source Emitter to subscribe to.
+     * @param eventName Event name to listen for.
+     * @param callback Handler invoked once when the event is triggered.
+     */
     listenToOnce(source, eventName, callback) {
-        this._addListeningTo(source, eventName);
-        source.once(eventName, callback, this);
+        // Use our own one-shot wrapper instead of source.once so that, when it fires,
+        // we can drop this exact subscription from BOTH sides — the source and our
+        // own _listeningTo registry — keeping the two in sync (no dangling tracking).
+        const wrapper = (...args) => {
+            source.off(eventName, wrapper, this);
+            this._removeListeningSubscription(source, eventName, wrapper);
+            callback.apply(this, args);
+        };
+        this._addListeningTo(source, eventName, wrapper, callback);
+        source.on(eventName, wrapper, this);
         return this;
     }
+    /**
+     * Release subscriptions previously established with `listenTo`/`listenToOnce`.
+     * Omitted arguments broaden the match (e.g. no `source` releases all tracked emitters).
+     * @param source Limit to a specific emitter, or omit for all.
+     * @param eventName Limit to a specific event, or omit for all.
+     * @param callback Limit to a specific handler, or omit for all.
+     */
     stopListening(source, eventName, callback) {
         if (!this._listeningTo)
             return this;
-        let sourceListening;
-        if (source) {
-            if (!source._listenId)
-                throw new Error("Emmiter is not set id.");
-            sourceListening = this._listeningTo[source._listenId];
-        }
-        const sources = sourceListening ? [sourceListening] : Object.values(this._listeningTo);
-        sources.forEach(source => {
-            const removeEventNames = eventName ? [eventName] : source.events;
-            removeEventNames.forEach(eventName => {
-                source.emmiter.off(eventName, callback, this);
-                const index = source.events.indexOf(eventName);
+        // A source we never listened to has no tracked subscriptions — nothing to do.
+        const listenings = source
+            ? (source._listenId && this._listeningTo[source._listenId] ? [this._listeningTo[source._listenId]] : [])
+            : Object.values(this._listeningTo);
+        const targetEvent = eventName ? eventName.toLowerCase() : undefined;
+        listenings.forEach(listening => {
+            // snapshot: the loop splices listening.subscriptions
+            listening.subscriptions.slice().forEach(sub => {
+                if (targetEvent && sub.eventName !== targetEvent)
+                    return;
+                // match the user-supplied callback against both the registered
+                // callback and the original (so a listenToOnce can be stopped by
+                // the callback the caller passed, not the internal wrapper)
+                if (callback && sub.callback !== callback && sub.origin !== callback)
+                    return;
+                listening.emitter.off(sub.eventName, sub.callback, this);
+                const index = listening.subscriptions.indexOf(sub);
                 if (index >= 0)
-                    source.events.splice(index, 1);
+                    listening.subscriptions.splice(index, 1);
             });
-            if (!source.events.length && source.emmiter._listenId && this._listeningTo)
-                delete this._listeningTo[source.emmiter._listenId];
+            if (!listening.subscriptions.length && listening.emitter._listenId)
+                delete this._listeningTo[listening.emitter._listenId];
         });
         if (!this._listeningTo || Object.keys(this._listeningTo).length === 0)
             delete this._listeningTo;
         return this;
     }
-    _addListeningTo(source, eventName) {
+    _addListeningTo(source, eventName, callback, origin) {
         const listeningTo = this._listeningTo || (this._listeningTo = {});
         const listenId = source._listenId || (source._listenId = `l${ListenCounter++}`);
-        const listenTo = listeningTo[listenId] || (listeningTo[listenId] = { emmiter: source, events: [] });
+        const listenTo = listeningTo[listenId] || (listeningTo[listenId] = { emitter: source, subscriptions: [] });
+        // one entry per subscription (not per event name) so each can be removed
+        // independently — e.g. a listenToOnce dropping itself without disturbing
+        // a co-registered persistent listenTo on the same source+event.
+        listenTo.subscriptions.push({ eventName: eventName.toLowerCase(), callback, origin });
+    }
+    /** Remove a single tracked subscription (matched by event + registered callback). @internal */
+    _removeListeningSubscription(source, eventName, callback) {
+        const listenId = source._listenId;
+        if (!this._listeningTo || !listenId)
+            return;
+        const listening = this._listeningTo[listenId];
+        if (!listening)
+            return;
         eventName = eventName.toLowerCase();
-        if (listenTo.events.indexOf(eventName) !== -1)
-            throw new Error(`Event ${eventName} already listening.`);
-        listenTo.events.push(eventName);
+        const index = listening.subscriptions.findIndex(s => s.eventName === eventName && s.callback === callback);
+        if (index >= 0)
+            listening.subscriptions.splice(index, 1);
+        if (!listening.subscriptions.length)
+            delete this._listeningTo[listenId];
+        if (Object.keys(this._listeningTo).length === 0)
+            delete this._listeningTo;
     }
     stopAllListeners() {
         if (!this._events)
@@ -115,8 +171,10 @@ class EventEmitter {
     _triggerEvent(events, ...args) {
         if (!events || !events.length)
             return;
-        for (let i = 0; i < events.length; i++) {
-            const event = events[i];
+        // snapshot so callbacks added/removed during dispatch don't affect this trigger
+        const snapshot = events.slice();
+        for (let i = 0; i < snapshot.length; i++) {
+            const event = snapshot[i];
             event.callback.apply(event.ctx, args);
         }
     }
@@ -133,12 +191,463 @@ class EventEmitter {
             return;
         return events[eventName];
     }
+    /** Release every subscription: both events this emitter listens to and listeners registered on it. */
     stopEvents() {
         this.stopListening();
         this.stopAllListeners();
     }
 }
 
+/** Key used to track iteration/length dependencies (object key enumeration, array growth). */
+const ITERATE_KEY = Symbol("iterate");
+/**
+ * A reactive effect: a function whose reactive reads are tracked, so it re-runs
+ * whenever any of those reactive dependencies change.
+ */
+class ReactiveEffect {
+    __fn;
+    /** Dependency sets this effect is currently subscribed to. @internal */
+    deps = [];
+    __active = true;
+    /** Called instead of `run` when a dependency changes (used by `computed`). */
+    scheduler;
+    /** Invoked once when the effect is stopped. */
+    onStop;
+    constructor(__fn, scheduler) {
+        this.__fn = __fn;
+        this.scheduler = scheduler;
+        activeScope?.add(this);
+    }
+    /** Whether the effect is still active (not stopped). */
+    get active() { return this.__active; }
+    /** Run the effect, (re)collecting its dependencies. */
+    run() {
+        if (!this.__active)
+            return this.__fn();
+        cleanupEffect(this);
+        const prevEffect = activeEffect;
+        activeEffect = this;
+        try {
+            return this.__fn();
+        }
+        finally {
+            activeEffect = prevEffect;
+        }
+    }
+    /** Stop the effect: remove its subscriptions and run `onStop`. */
+    stop() {
+        if (!this.__active)
+            return;
+        cleanupEffect(this);
+        this.__active = false;
+        this.onStop?.();
+    }
+}
+let activeEffect;
+let activeScope;
+const targetMap = new WeakMap();
+/** Record the active effect (if any) as depending on `target[key]`. @internal */
+function track(target, key) {
+    if (!activeEffect)
+        return;
+    let depsMap = targetMap.get(target);
+    if (!depsMap)
+        targetMap.set(target, depsMap = new Map());
+    let dep = depsMap.get(key);
+    if (!dep)
+        depsMap.set(key, dep = new Set());
+    if (!dep.has(activeEffect)) {
+        dep.add(activeEffect);
+        activeEffect.deps.push(dep);
+    }
+}
+/** Re-run (or schedule) every effect that depends on `target[key]`. @internal */
+function trigger(target, key) {
+    const depsMap = targetMap.get(target);
+    if (!depsMap)
+        return;
+    const dep = depsMap.get(key);
+    if (!dep)
+        return;
+    // copy first: running an effect re-collects deps and would mutate the live set
+    const effects = new Set();
+    dep.forEach(e => { if (e !== activeEffect)
+        effects.add(e); });
+    effects.forEach(e => {
+        if (e.scheduler)
+            e.scheduler();
+        else
+            queueEffect(e);
+    });
+}
+const jobQueue = new Set();
+const resolvedPromise = Promise.resolve();
+let isFlushPending = false;
+let currentFlush = null;
+/** Queue an effect to run on the next microtask, deduplicated so multiple sync changes batch into one run. */
+function queueEffect(effect) {
+    jobQueue.add(effect);
+    if (!isFlushPending) {
+        isFlushPending = true;
+        currentFlush = resolvedPromise.then(flushJobs);
+    }
+}
+function flushJobs() {
+    isFlushPending = false;
+    let guard = 0;
+    while (jobQueue.size) {
+        if (++guard > 10000) {
+            jobQueue.clear();
+            throw new Error("Reactive effect flush exceeded the iteration limit (cyclic update?).");
+        }
+        const jobs = Array.from(jobQueue);
+        jobQueue.clear();
+        for (const effect of jobs) {
+            if (effect.active)
+                effect.run();
+        }
+    }
+    currentFlush = null;
+}
+/**
+ * Resolves after the currently pending batch of reactive effects has flushed.
+ * Effect re-runs (and the DOM updates they drive) are batched on the microtask queue,
+ * so await `nextTick()` to observe their results.
+ */
+function nextTick(fn) {
+    const p = currentFlush || resolvedPromise;
+    return fn ? p.then(fn).then(() => { }) : p.then(() => { });
+}
+/**
+ * Execute `fn` without tracking any reactive reads.
+ * Use inside a reactive context when you want to read state without creating a dependency.
+ */
+function untrack(fn) {
+    const prev = activeEffect;
+    activeEffect = undefined;
+    try {
+        return fn();
+    }
+    finally {
+        activeEffect = prev;
+    }
+}
+function cleanupEffect(effect) {
+    const { deps } = effect;
+    deps.forEach(dep => dep.delete(effect));
+    deps.length = 0;
+}
+/** Create and immediately run a reactive effect. Returns the {@link ReactiveEffect}. */
+function effect(fn, scheduler) {
+    const e = new ReactiveEffect(fn, scheduler);
+    e.run();
+    return e;
+}
+/** A disposable container that collects effects (and nested scopes) so they can be stopped together. */
+class EffectScope {
+    __effects = [];
+    __scopes = [];
+    __active = true;
+    /** Whether the scope is still active (not stopped). */
+    get active() { return this.__active; }
+    /** @internal */
+    add(effect) { this.__effects.push(effect); }
+    /** @internal */
+    addScope(scope) { this.__scopes.push(scope); }
+    /** Run `fn` with this scope active; effects created during the call register to it. */
+    run(fn) {
+        const prev = activeScope;
+        activeScope = this;
+        try {
+            return fn();
+        }
+        finally {
+            activeScope = prev;
+        }
+    }
+    /** Stop all effects and nested scopes collected by this scope. */
+    stop() {
+        if (!this.__active)
+            return;
+        this.__active = false;
+        this.__effects.forEach(e => e.stop());
+        this.__effects.length = 0;
+        this.__scopes.forEach(s => s.stop());
+        this.__scopes.length = 0;
+    }
+}
+/** Create a new {@link EffectScope}, nested in the current scope if one is active. */
+function effectScope() {
+    const scope = new EffectScope();
+    activeScope?.addScope(scope);
+    return scope;
+}
+
+const RAW = Symbol("raw");
+const reactiveMap = new WeakMap();
+function isObject(value) {
+    return value !== null && typeof value === "object";
+}
+function isIntegerKey(key) {
+    return typeof key === "string" && /^\d+$/.test(key);
+}
+/** Whether a value is a reactive proxy created by {@link reactive}. */
+function isReactive(value) {
+    return isObject(value) && !!value[RAW];
+}
+/** Return the underlying raw (non-reactive) object behind a reactive proxy, or the value itself. */
+function toRaw(value) {
+    const raw = isObject(value) && value[RAW];
+    return raw ? raw : value;
+}
+const handlers = {
+    get(target, key, receiver) {
+        if (key === RAW)
+            return target;
+        const result = Reflect.get(target, key, receiver);
+        // don't track symbol keys (well-known symbols, internal lookups)
+        if (typeof key === "symbol")
+            return result;
+        track(target, key);
+        // deep: wrap nested objects/arrays lazily on read
+        return isObject(result) ? reactive(result) : result;
+    },
+    set(target, key, value, receiver) {
+        const isArray = Array.isArray(target);
+        const isIndex = isArray && isIntegerKey(key);
+        const oldLength = isArray ? target.length : 0;
+        const hadKey = isIndex
+            ? Number(key) < oldLength
+            : Object.prototype.hasOwnProperty.call(target, key);
+        const oldValue = target[key];
+        const result = Reflect.set(target, key, toRaw(value), receiver);
+        if (!result)
+            return result;
+        if (!hadKey) {
+            trigger(target, key);
+            trigger(target, ITERATE_KEY);
+        }
+        else if (!Object.is(oldValue, toRaw(value))) {
+            trigger(target, key);
+        }
+        if (isArray && key === "length") {
+            // shrinking the array drops indices [newLength, oldLength) — notify
+            // effects that read them, plus iteration; growing only changes iteration
+            const newLength = Number(value);
+            for (let i = newLength; i < oldLength; i++)
+                trigger(target, String(i));
+            if (newLength !== oldLength)
+                trigger(target, ITERATE_KEY);
+        }
+        else if (isIndex && Number(key) >= oldLength) {
+            // a new index extended the array, so its length changed
+            trigger(target, "length");
+        }
+        return result;
+    },
+    deleteProperty(target, key) {
+        const hadKey = Object.prototype.hasOwnProperty.call(target, key);
+        const result = Reflect.deleteProperty(target, key);
+        if (hadKey && result) {
+            trigger(target, key);
+            trigger(target, ITERATE_KEY);
+        }
+        return result;
+    },
+    has(target, key) {
+        if (typeof key !== "symbol")
+            track(target, key);
+        return Reflect.has(target, key);
+    },
+    ownKeys(target) {
+        track(target, ITERATE_KEY);
+        return Reflect.ownKeys(target);
+    }
+};
+/**
+ * Wrap an object or array in a deep reactive proxy. Reads are tracked and writes
+ * notify effects. Returns the same proxy for the same target, and non-objects unchanged.
+ */
+function reactive(target) {
+    if (!isObject(target))
+        return target;
+    if (target[RAW])
+        return target; // already reactive
+    const existing = reactiveMap.get(target);
+    if (existing)
+        return existing;
+    const proxy = new Proxy(target, handlers);
+    reactiveMap.set(target, proxy);
+    return proxy;
+}
+
+/** A lazily-evaluated, cached reactive value derived from other reactive state. */
+class ComputedRef {
+    __value;
+    __dirty = true;
+    __effect;
+    constructor(getter) {
+        this.__effect = new ReactiveEffect(getter, () => {
+            // a dependency changed: mark dirty and notify effects that read this computed
+            if (!this.__dirty) {
+                this.__dirty = true;
+                trigger(this, "value");
+            }
+        });
+    }
+    /** The current value; recomputed on read only when its dependencies have changed. */
+    get value() {
+        if (this.__dirty) {
+            this.__value = this.__effect.run();
+            this.__dirty = false;
+        }
+        track(this, "value");
+        return this.__value;
+    }
+}
+/** Create a {@link ComputedRef} from a getter. */
+function computed(getter) {
+    return new ComputedRef(getter);
+}
+
+// UIElements are located via the data attribute `UIElement.setElement` already sets
+// (`elem.dataset.uiElement` → `data-ui-element`), so no extra marker is needed for them.
+const UIELEM_SELECTOR = "[data-ui-element]";
+// Marker placed on every element a reactive binding renders into, so a removed
+// subtree can be queried for affected bindings instead of scanning all of them.
+const BINDING_ATTR = "data-bui-binding";
+const BINDING_SELECTOR = "[data-bui-binding]";
+// node → UIElement auto-destroy entry
+const trackedElements = new Map();
+// container element → bindings rendered into it (one marker per container)
+const bindingsByContainer = new Map();
+let observer;
+function ensureObserver() {
+    if (typeof MutationObserver !== "undefined" && !observer) {
+        observer = new MutationObserver(onMutations);
+        observer.observe(document, { childList: true, subtree: true });
+    }
+}
+function disconnectIfEmpty() {
+    if (trackedElements.size === 0 && bindingsByContainer.size === 0 && observer) {
+        observer.disconnect();
+        observer = undefined;
+    }
+}
+/**
+ * React only to *removed* nodes (insertions never disconnect anything), and within each
+ * removed subtree dispose only the tracked UIElements/bindings that ended up disconnected.
+ * Work is proportional to the removed subtree, not to the total number tracked.
+ */
+function onMutations(mutations) {
+    for (const mutation of mutations) {
+        mutation.removedNodes.forEach(node => {
+            // Bindings/UIElements are tracked by their (element) container, so a removed
+            // text/comment node can neither be one nor contain one — only elements matter.
+            if (node instanceof HTMLElement)
+                disposeDisconnectedWithin(node);
+        });
+    }
+    disconnectIfEmpty();
+}
+/** Apply `fn` to `root` itself (when it matches) and every descendant matching `selector`. */
+function forEachSelfAndMatches(root, selector, fn) {
+    if (root.matches(selector))
+        fn(root);
+    root.querySelectorAll(selector).forEach(el => fn(el));
+}
+/** Destroy/stop tracked entries inside a removed subtree that are no longer in the document. */
+function disposeDisconnectedWithin(removed) {
+    // UIElements first: destroying one cascades to its nested UIElements and bindings.
+    forEachSelfAndMatches(removed, UIELEM_SELECTOR, el => {
+        // `isConnected` guards against moves (removed from one place, re-inserted in another).
+        if (!el.isConnected) {
+            const entry = trackedElements.get(el);
+            if (entry)
+                entry.destroy(); // destroy() untracks itself, cascades, and disposes its bindings
+        }
+    });
+    // Bindings not already cleaned by a UIElement destroy above (e.g. standalone containers).
+    forEachSelfAndMatches(removed, BINDING_SELECTOR, container => {
+        if (!container.isConnected)
+            stopContainerBindings(container);
+    });
+}
+function stopContainerBindings(container) {
+    const set = bindingsByContainer.get(container);
+    if (!set)
+        return;
+    bindingsByContainer.delete(container);
+    container.removeAttribute(BINDING_ATTR);
+    set.forEach(binding => binding.effect.stop());
+}
+/**
+ * Track a binding so its reactive effect is stopped automatically once the element it renders
+ * into has been mounted and then removed from the document (via a shared `MutationObserver`),
+ * and so {@link disposeBindingsWithin} can stop it when its owning UIElement is destroyed.
+ *
+ * Containers that are never mounted are not auto-disposed; the `MutationObserver` part is a
+ * no-op where it is unavailable, but `disposeBindingsWithin` still works.
+ *
+ * @param container Element the binding renders its node(s) into (its connectivity drives disposal).
+ * @param effect The reactive effect to stop on disposal.
+ */
+function autoDisposeBinding(container, effect) {
+    let set = bindingsByContainer.get(container);
+    if (!set) {
+        bindingsByContainer.set(container, set = new Set());
+        container.setAttribute(BINDING_ATTR, "");
+    }
+    set.add({ container, effect });
+    ensureObserver();
+}
+/**
+ * Register a `UIElement`'s DOM node for auto-destroy: once the node has been mounted
+ * into the document and then removed, `destroy` is called automatically.
+ * @internal — called by `UIElement.setElement`.
+ */
+function trackAutoDestroy(node, destroy) {
+    trackedElements.set(node, { node, destroy });
+    ensureObserver();
+}
+/**
+ * Remove a node from auto-destroy tracking (called when `UIElement.destroy` is
+ * invoked explicitly so the entry does not linger).
+ * @internal — called by `UIElement.destroy`.
+ */
+function untrackAutoDestroy(node) {
+    trackedElements.delete(node);
+    disconnectIfEmpty();
+}
+/**
+ * Destroy every tracked `UIElement` nested within `root` (excluding `root` itself),
+ * deepest first. Located via the `data-ui-element` marker, so the cost is proportional
+ * to the subtree rather than to the total number of tracked elements.
+ * @internal — called by `UIElement.destroy`.
+ */
+function destroyUIElementsWithin(root) {
+    const victims = [];
+    root.querySelectorAll(UIELEM_SELECTOR).forEach(el => {
+        if (trackedElements.has(el))
+            victims.push(el);
+    });
+    // querySelectorAll yields document order (ancestors before descendants);
+    // iterate in reverse so deeper / nested elements are destroyed first.
+    for (let i = victims.length - 1; i >= 0; i--)
+        trackedElements.get(victims[i])?.destroy();
+}
+/**
+ * Stop and forget every tracked binding rendered within `root` (used when a UIElement is
+ * destroyed). Unlike the observer path this is unconditional — it does not check connectivity,
+ * because the owner is being torn down.
+ */
+function disposeBindingsWithin(root) {
+    if (root instanceof HTMLElement)
+        forEachSelfAndMatches(root, BINDING_SELECTOR, stopContainerBindings);
+    disconnectIfEmpty();
+}
+
+/** Default constant values used across the library. */
 const constants = {
     ElemAttributeName: "uiElement",
     ElemPropertyName: "uielement",
@@ -151,13 +660,24 @@ var constants$1 = /*#__PURE__*/Object.freeze({
     default: constants
 });
 
+/**
+ * Wraps an `HTMLElement` and binds business logic, commands and events to it.
+ *
+ * The optional `TEvents` event map is merged with {@link UIElementEvents}, so subclasses
+ * can declare their own typed events in addition to the built-in `command`/`destroy`.
+ */
 class UIElement extends EventEmitter {
     __element;
     __events;
     __commands;
     __destroyed;
     // Element members
+    /** The bound DOM element, or `undefined` until `setElement` is called. */
     get element() { return this.__element; }
+    /**
+     * Bind a DOM element to this instance and run render logic. Can be called only once.
+     * @param elem Element to bind; throws if already bound or owned by another `UIElement`.
+     */
     setElement(elem) {
         if (!elem)
             throw new Error("Not set value elem.");
@@ -166,36 +686,56 @@ class UIElement extends EventEmitter {
         this.__element = elem;
         elem[constants.ElemPropertyName] = this;
         elem.dataset[constants.ElemAttributeName] = this.typeName;
+        trackAutoDestroy(elem, () => this.destroy());
         this._onRenderElement(elem);
+        this.__raise("rendered", this);
     }
     // static members
+    /**
+     * Whether the given element is already bound to a `UIElement`.
+     * @param elem Element to test.
+     */
     static hasElement(elem) {
         return !!elem.dataset[constants.ElemAttributeName];
     }
     // Command members
+    /**
+     * Register a handler for a command declared in markup via the `data-command` attribute.
+     * @param name Command name (case-insensitive); throws if already registered.
+     * @param execute Handler run when the command fires; may return a `Promise` for async commands.
+     * @param canExecute Optional predicate gating whether the command may run.
+     * @returns This instance for chaining.
+     */
     registerCommand(name, execute, canExecute) {
         if (this.__destroyed)
             return this;
         const commands = this.__commands || (this.__commands = {});
-        const nornalizedName = name.toLowerCase();
-        if (nornalizedName in commands)
+        const normalizedName = name.toLowerCase();
+        if (normalizedName in commands)
             throw new Error(`Command "${name}" already registered.`);
-        commands[nornalizedName] = {
+        commands[normalizedName] = {
             name: name,
             execute,
             canExecute
         };
         return this;
     }
+    /**
+     * Whether a command with the given name is registered.
+     * @param name Command name (case-insensitive).
+     */
     hasCommand(name) {
-        return this.__commands && name.toLowerCase() in this.__commands;
+        return !!this.__commands && name.toLowerCase() in this.__commands;
     }
-    /** @internal */
+    /**
+     * Execute a registered command against a target element.
+     * @internal
+     */
     __execCommand(name, target) {
-        if (this.__destroyed || !this.__element || !this.__commands)
-            throw new Error("UIElement is not set HTMLElement.");
+        if (this.__destroyed || !this.__element)
+            throw new Error("UIElement is destroyed or has no element.");
         const key = name.toLowerCase();
-        const command = this.__commands[key];
+        const command = this.__commands?.[key];
         if (!command)
             throw new Error(`Command "${name}" is not registered.`);
         const context = {
@@ -205,59 +745,75 @@ class UIElement extends EventEmitter {
         if (command.isExecuting)
             return { status: "already", context };
         command.isExecuting = true;
-        if (!this._onCanExecCommand(name, target)) {
-            delete command.isExecuting;
-            return { status: "disallow", context };
-        }
-        if (command.canExecute && !command.canExecute(context)) {
-            delete command.isExecuting;
-            return { status: "disallow", context };
-        }
-        this.trigger("command", { element: this, name: command.name });
-        let isAsync;
+        // keep isExecuting cleanup inside finally so a throw in the
+        // guards/trigger/execute can never leave the command stuck.
+        let isAsync = false;
         try {
+            if (!this._onCanExecCommand(name, target))
+                return { status: "disallow", context };
+            if (command.canExecute && !command.canExecute(context))
+                return { status: "disallow", context };
+            this.__raise("command", { element: this, name: command.name });
             const commandResult = command.execute(context);
-            if (commandResult && commandResult instanceof Promise) {
+            if (commandResult instanceof Promise) {
                 isAsync = true;
                 target.classList.add(constants.CommandExecutingCssClassName);
                 commandResult
+                    // command owns its errors; log so failures aren't silent, and avoid unhandled rejection
+                    .catch((reason) => console.error(`Command "${command.name}" failed.`, reason))
                     .finally(() => {
                     target.classList.remove(constants.CommandExecutingCssClassName);
                     delete command.isExecuting;
                 });
             }
+            return { status: "success", context };
         }
         finally {
             if (!isAsync)
                 delete command.isExecuting;
         }
-        return { status: "success", context: context };
+    }
+    /**
+     * Hook invoked when an element is bound via `setElement`. Override to render or wire up the element.
+     * @param _elem The newly bound element.
+     */
+    /** Trigger a built-in event. Typed by {@link UIElementEvents}; bypasses the generic trigger overload internally. */
+    __raise(name, ...args) {
+        this.trigger(name, ...args);
     }
     _onRenderElement(_elem) { }
+    /**
+     * Hook deciding whether a command may execute. Override to add element-wide gating.
+     * @param _name Command name being executed.
+     * @param _elem Target element of the command.
+     * @returns `true` to allow execution (default), `false` to disallow.
+     */
     _onCanExecCommand(_name, _elem) {
         return true;
     }
-    onDestroy(callback) {
-        if (!this.__element || !callback)
-            return;
-        if (callback instanceof UIElement)
-            callback.listenTo(this, "destroy", () => callback.destroy());
-        else if (callback instanceof Element)
-            this.on("destroy", () => callback.remove());
-        else if (typeof callback === "function")
-            this.on("destroy", () => callback());
-        else
-            throw new Error("Unsupported callback type.");
+    /**
+     * Create an {@link EffectScope} whose reactive effects are stopped automatically when
+     * this element is destroyed. Use it to scope `bind`/`effect` to the element's lifetime.
+     */
+    effectScope() {
+        const scope = effectScope();
+        this.on("destroy", () => scope.stop());
+        return scope;
     }
+    /** Returns the `typeName` of this element. */
     toString() { return this.typeName; }
+    /** Destroy the element: trigger the `destroy` event, release events/commands and detach from the DOM element. */
     destroy() {
         if (this.__destroyed)
             return;
         this.__destroyed = true;
-        this.trigger("destroy", this);
+        this.__raise("destroy", this);
         super.stopEvents();
         const elem = this.__element;
         if (elem) {
+            destroyUIElementsWithin(elem); // cascade to nested UIElements, deepest first
+            untrackAutoDestroy(elem);
+            disposeBindingsWithin(elem);
             delete elem.dataset[constants.ElemAttributeName];
             delete elem[constants.ElemPropertyName];
         }
@@ -266,6 +822,26 @@ class UIElement extends EventEmitter {
         delete this.__commands;
     }
 }
+/**
+ * A {@link UIElement} whose DOM element is bound in the constructor, so its `element`
+ * is always defined (typed `HTMLElement`, never `undefined`). Subclasses pass their
+ * `typeName` and the element to `super`.
+ *
+ * Use {@link UIElement} directly when the element is bound later (e.g. an application
+ * that binds its element on run).
+ */
+class UIElementBound extends UIElement {
+    __typeName;
+    /** @param typeName Unique type name of this element. @param elem Element to bind. */
+    constructor(typeName, elem) {
+        super();
+        this.__typeName = typeName; // set before setElement (no field-initializer race)
+        this.setElement(elem);
+    }
+    get typeName() { return this.__typeName; }
+    /** The bound DOM element; always defined since it is set in the constructor. */
+    get element() { return super.element; }
+}
 const findUiElementByCommand = (elem, commandName) => {
     let current = elem;
     while (current) {
@@ -279,37 +855,578 @@ const findUiElementByCommand = (elem, commandName) => {
     return null;
 };
 const commandClickHandler = (e) => {
+    // walk up from the clicked element to the nearest ancestor declaring a command
     let commandElem = e.target;
-    while (commandElem) {
-        if (commandElem.dataset[constants.CommandAttributeName])
-            break;
-        if (commandElem === e.currentTarget)
-            return;
+    while (commandElem && !commandElem.dataset[constants.CommandAttributeName])
         commandElem = commandElem.parentElement;
-    }
     if (!commandElem)
         return;
     const commandName = commandElem.dataset[constants.CommandAttributeName];
     if (!commandName)
-        throw new Error("Command data attribute is not have value.");
+        throw new Error("Command data attribute does not have a value.");
     const uiElem = findUiElementByCommand(commandElem, commandName);
-    if (uiElem) {
-        const result = uiElem.__execCommand(commandName, commandElem);
-        if (result.status == "success" && result.context.transparent)
-            return;
+    // A click on a data-command element is owned by the library: prevent the element's
+    // default action (e.g. <a> navigation) and stop the click chain — UNLESS the command
+    // completed successfully and asked to stay transparent. This runs in `finally`, so a
+    // throwing command can never skip preventDefault and let the page navigate/reload.
+    let transparent = false;
+    try {
+        if (uiElem) {
+            const result = uiElem.__execCommand(commandName, commandElem);
+            transparent = result.status === "success" && !!result.context.transparent;
+        }
+        else
+            console.warn(`Not find handler for command "${commandName}".`);
+    }
+    catch (reason) {
+        console.error(`Command "${commandName}" failed.`, reason);
+    }
+    finally {
+        if (!transparent) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        }
+    }
+};
+// Guarded so importing the module does not throw in a non-DOM environment (SSR/Node).
+if (typeof window !== "undefined")
+    window.addEventListener("click", commandClickHandler);
+/** Remove the global click handler registered by brandup-ui. Call on app teardown or HMR disposal. */
+function destroyUI() {
+    if (typeof window !== "undefined")
+        window.removeEventListener("click", commandClickHandler);
+}
+
+// Guarded so importing the module does not throw in a non-DOM environment (SSR/Node).
+if (typeof HTMLElement !== "undefined") {
+    HTMLElement.prototype.ui = function (factory) {
+        factory(this);
+        return this;
+    };
+}
+
+/**
+ * A reactive binding for use as a {@link tag} child. Its `compute` function is
+ * re-evaluated and re-rendered whenever the reactive state it reads changes.
+ */
+class Binding {
+    compute;
+    constructor(compute) {
+        this.compute = compute;
+    }
+}
+/**
+ * Create a reactive {@link Binding} that can be passed as a `tag` child. The
+ * compute function is tracked: it re-runs (updating the DOM in place) whenever
+ * any reactive value it reads changes.
+ *
+ * @example
+ * const state = reactive({ name: "Alice" });
+ * DOM.tag("div", null, "Hi, ", bind(() => state.name));
+ * state.name = "Bob"; // the text updates in place
+ */
+function bind(compute) {
+    return new Binding(compute);
+}
+
+/** A keyed-list binding produced by {@link bindEach}; handled by `appendChild` in `tag.ts`. */
+class BindingEach {
+    getItems;
+    getKey;
+    render;
+    constructor(getItems, getKey, render) {
+        this.getItems = getItems;
+        this.getKey = getKey;
+        this.render = render;
+    }
+}
+/**
+ * Create a reactive keyed-list binding for use as a {@link tag} child.
+ *
+ * The `getItems` function is tracked; the list is reconciled whenever the array
+ * changes (push, splice, reassignment, etc.). Items are matched by `getKey` so
+ * unchanged nodes stay in place — only new, removed, or reordered nodes are touched.
+ *
+ * `render` is called **once per key** and runs **untracked**. Use `bind()` inside
+ * the render function for item properties that should update independently:
+ *
+ * ⚠️ The item object passed to `render` is captured at first render for that key.
+ * Mutate items in place (`item.name = "..."`) so `bind()` reactions fire. Replacing
+ * the array with **new objects that reuse the same keys** keeps the cached node bound
+ * to the *old* object, so per-item `bind()`s won't update — change the key, or mutate
+ * the existing item, when its identity should change.
+ *
+ * @example
+ * DOM.tag("ul", null,
+ *     bindEach(() => state.users, u => u.id, u =>
+ *         DOM.tag("li", null, bind(() => u.name))
+ *     )
+ * );
+ */
+function bindEach(getItems, getKey, render) {
+    return new BindingEach(getItems, getKey, render);
+}
+/**
+ * Mount a {@link BindingEach} into `container` and start tracking.
+ * Called by `appendChild` in `tag.ts`; not intended for direct use.
+ * @internal
+ */
+function appendBindingEach(container, binding) {
+    const nodes = new Map();
+    // Anchor comment marks the start of the managed region inside the container.
+    // Using an anchor (rather than container.firstChild) lets other children coexist.
+    const anchor = document.createComment("");
+    container.append(anchor);
+    const eff = effect(() => {
+        const items = binding.getItems();
+        const nextKeys = new Set();
+        for (let i = 0; i < items.length; i++)
+            nextKeys.add(binding.getKey(items[i], i));
+        // Remove nodes whose keys are no longer present
+        for (const [key, node] of nodes) {
+            if (!nextKeys.has(key)) {
+                node.remove();
+                nodes.delete(key);
+            }
+        }
+        // Insert new nodes and restore order in a single pass starting after the anchor.
+        // If the node is already at the expected position we advance; otherwise insertBefore moves it.
+        let cursor = anchor.nextSibling;
+        for (let i = 0; i < items.length; i++) {
+            const key = binding.getKey(items[i], i);
+            let node = nodes.get(key);
+            if (!node) {
+                // Render untracked so item-property reads don't create dependencies on
+                // this list effect — use bind() inside render for fine-grained updates.
+                node = untrack(() => binding.render(items[i]));
+                nodes.set(key, node);
+            }
+            if (cursor !== node)
+                container.insertBefore(node, cursor);
+            else
+                cursor = cursor.nextSibling;
+        }
+    });
+    autoDisposeBinding(container, eff);
+}
+
+/**
+ * @internal
+ * Adds one or more CSS classes to a single element. A string is split on spaces. No-op when `cssClass` is falsy.
+ */
+const addCssClass = (elem, cssClass) => {
+    if (!cssClass)
+        return;
+    const tokens = (Array.isArray(cssClass) ? cssClass : cssClass.split(' ')).filter(Boolean);
+    if (tokens.length)
+        elem.classList.add(...tokens);
+};
+/**
+ * @internal
+ * Removes one or more CSS classes from a single element. A string is split on spaces. No-op when `cssClass` is falsy.
+ */
+const removeCssClass = (elem, cssClass) => {
+    if (!cssClass)
+        return;
+    const tokens = (Array.isArray(cssClass) ? cssClass : cssClass.split(' ')).filter(Boolean);
+    if (tokens.length)
+        elem.classList.remove(...tokens);
+};
+var helpers = {
+    addCssClass,
+    removeCssClass
+};
+
+/**
+ * Finds an element by its `id` within the whole document.
+ * @param id The element id to look up.
+ * @returns The matching element, or `null` if none exists.
+ */
+function getById(id) {
+    return document.getElementById(id);
+}
+/**
+ * Returns the first descendant of `container` that has the given class.
+ * @param container Element to search within.
+ * @param className Single class name to match.
+ * @returns The first matching element, or `null` if none found.
+ */
+function getByClass(container, className) {
+    const elements = container.getElementsByClassName(className);
+    if (elements.length === 0)
+        return null;
+    return elements.item(0);
+}
+/**
+ * Returns the first element in the document with the given `name` attribute.
+ * @param name The `name` attribute value to look up.
+ * @returns The first matching element, or `null` if none found.
+ */
+function getByName(name) {
+    const elements = document.getElementsByName(name);
+    if (elements.length === 0)
+        return null;
+    return elements.item(0);
+}
+/**
+ * Returns the first descendant of `container` with the given tag name.
+ * @param container Element to search within.
+ * @param tagName Tag name to match (e.g. `"input"`).
+ * @returns The first matching element, or `null` if none found.
+ */
+function getElementByTagName(container, tagName) {
+    const elements = container.getElementsByTagName(tagName);
+    if (elements.length === 0)
+        return null;
+    return elements.item(0);
+}
+/**
+ * Returns all descendants of `container` with the given tag name as a live collection.
+ * @param container Element to search within.
+ * @param tagName Tag name to match (e.g. `"li"`).
+ * @returns A live `HTMLCollection` of matching elements.
+ */
+function getElementsByTagName(container, tagName) {
+    return container.getElementsByTagName(tagName);
+}
+/**
+ * Returns the first descendant of `container` matching the CSS selector.
+ * @param container Element to search within.
+ * @param query CSS selector.
+ * @returns The first matching element, or `null` if none found.
+ */
+function queryElement(container, query) {
+    return container.querySelector(query);
+}
+/**
+ * Returns all descendants of `container` matching the CSS selector.
+ * @param container Element to search within.
+ * @param query CSS selector.
+ * @returns A static `NodeList` of matching elements.
+ */
+function queryElements(container, query) {
+    return container.querySelectorAll(query);
+}
+/**
+ * Walks forward through the following siblings of `current` and returns the first one that has the given class.
+ * @param current Element to start from.
+ * @param className Class name to match.
+ * @returns The first matching following sibling, or `null` if none found.
+ */
+function nextElementByClass(current, className) {
+    let elem = current.nextSibling;
+    while (elem) {
+        if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement && elem.classList.contains(className))
+            return elem;
+        elem = elem.nextSibling;
+    }
+    return null;
+}
+/**
+ * Walks backward through the preceding siblings of `current` and returns the first one that has the given class.
+ * @param current Element to start from.
+ * @param className Class name to match.
+ * @returns The first matching preceding sibling, or `null` if none found.
+ */
+function prevElementByClass(current, className) {
+    let elem = current.previousSibling;
+    while (elem) {
+        if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement && elem.classList.contains(className))
+            return elem;
+        elem = elem.previousSibling;
+    }
+    return null;
+}
+/**
+ * Returns the nearest preceding sibling element of `current`, skipping non-element nodes (e.g. text nodes).
+ * @param current Element to start from.
+ * @returns The previous sibling element, or `null` if none found.
+ */
+function prevElement(current) {
+    let elem = current.previousSibling;
+    while (elem) {
+        if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement)
+            return elem;
+        elem = elem.previousSibling;
+    }
+    return null;
+}
+/**
+ * Returns the nearest following sibling element of `current`, skipping non-element nodes (e.g. text nodes).
+ * @param current Element to start from.
+ * @returns The next sibling element, or `null` if none found.
+ */
+function nextElement(current) {
+    let elem = current.nextSibling;
+    while (elem) {
+        if (elem.nodeType === Node.ELEMENT_NODE && elem instanceof HTMLElement)
+            return elem;
+        elem = elem.nextSibling;
+    }
+    return null;
+}
+/**
+ * Adds the given CSS class(es) to every descendant of `container` matching the selector. No-op when `container` or `cssClass` is falsy.
+ * @param container Element to search within (ignored when null/undefined).
+ * @param selectors CSS selector for the elements to modify.
+ * @param cssClass Class name(s) to add.
+ */
+function addClass(container, selectors, cssClass) {
+    if (!container || !cssClass)
+        return;
+    const nodes = container.querySelectorAll(selectors);
+    nodes.forEach(node => helpers.addCssClass(node, cssClass));
+}
+/**
+ * Removes the given CSS class(es) from every descendant of `container` matching the selector. No-op when `container` or `cssClass` is falsy.
+ * @param container Element to search within (ignored when null/undefined).
+ * @param selectors CSS selector for the elements to modify.
+ * @param cssClass Class name(s) to remove.
+ */
+function removeClass(container, selectors, cssClass) {
+    if (!container || !cssClass)
+        return;
+    const nodes = container.querySelectorAll(selectors);
+    nodes.forEach(elem => helpers.removeCssClass(elem, cssClass));
+}
+/**
+ * Removes all child nodes from `container`, leaving it empty. No-op when `container` is null/undefined.
+ * @param container Element to clear.
+ */
+function empty(container) {
+    if (!container)
+        return;
+    while (container.hasChildNodes()) {
+        if (container.firstChild)
+            container.removeChild(container.firstChild);
+    }
+}
+
+var DomHelpers = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    addClass: addClass,
+    empty: empty,
+    getByClass: getByClass,
+    getById: getById,
+    getByName: getByName,
+    getElementByTagName: getElementByTagName,
+    getElementsByTagName: getElementsByTagName,
+    nextElement: nextElement,
+    nextElementByClass: nextElementByClass,
+    prevElement: prevElement,
+    prevElementByClass: prevElementByClass,
+    queryElement: queryElement,
+    queryElements: queryElements,
+    removeClass: removeClass
+});
+
+/** Returns `true` when `value` should be treated as options (or absent options), `false` when it is the first child. */
+const isOptionsArg = (value) => {
+    if (value === null || value === undefined)
+        return true;
+    if (typeof value !== "object")
+        return false; // string, number, boolean, function → child
+    if (Array.isArray(value))
+        return false; // array → children
+    if (value instanceof Element || value instanceof UIElement || value instanceof Binding || value instanceof BindingEach || value instanceof Promise)
+        return false;
+    return true; // plain object → ElementOptions
+};
+/**
+ * Creates an HTML element, optionally applying options and appending children.
+ *
+ * The second argument is **options** when it is `null` or a plain {@link ElementOptions} object.
+ * It is treated as the **first child** for any {@link TagFirstChild} value — strings, numbers,
+ * elements, bindings, arrays, etc. — so `tag("div", "hello")` appends "hello" as HTML text,
+ * and `tag("ul", bindEach(...))` works without a leading `null`.
+ * To apply a CSS class use `{ class: "name" }` in options.
+ */
+function tag(tagName, optionsOrChild, ...rest) {
+    const elem = document.createElement(tagName);
+    if (isOptionsArg(optionsOrChild)) {
+        applyOptions(elem, optionsOrChild);
+        appendChild(elem, rest);
+    }
+    else {
+        appendChild(elem, optionsOrChild !== undefined ? [optionsOrChild, ...rest] : rest);
+    }
+    return elem;
+}
+/**
+ * Applies element options to an existing element. A string or array is treated as a {@link CssClass}; otherwise each {@link ElementOptions} key is applied (`id`, `styles`, `class`, `command`, `dataset`, `events`, or a plain attribute). `undefined` values are skipped.
+ * @param elem Target element to mutate.
+ * @param options Options object, {@link CssClass} shorthand, or `null`/`undefined` for none.
+ */
+const applyOptions = (elem, options) => {
+    if (!options)
+        return;
+    if (typeof options === "string" || Array.isArray(options))
+        helpers.addCssClass(elem, options);
+    else {
+        for (const key in options) {
+            const value = options[key];
+            if (value === undefined)
+                continue;
+            switch (key) {
+                case "id":
+                    elem.id = value;
+                    break;
+                case "styles": {
+                    if (value) {
+                        for (const sKey in value)
+                            elem.style[sKey] = value[sKey];
+                    }
+                    break;
+                }
+                case "class": {
+                    helpers.addCssClass(elem, value);
+                    break;
+                }
+                case "command": {
+                    elem.dataset["command"] = value;
+                    break;
+                }
+                case "dataset": {
+                    if (value) {
+                        for (const dataName in value)
+                            elem.dataset[dataName] = value[dataName];
+                    }
+                    break;
+                }
+                case "events": {
+                    if (value) {
+                        for (const eventName in value)
+                            elem.addEventListener(eventName, value[eventName]);
+                    }
+                    break;
+                }
+                default: {
+                    if (value === null)
+                        elem.setAttribute(key, "");
+                    else if (typeof value === "object")
+                        elem.setAttribute(key, JSON.stringify(value));
+                    else
+                        elem.setAttribute(key, String(value));
+                    break;
+                }
+            }
+        }
     }
-    else
-        console.warn(`Not find handler for command "${commandName}".`);
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
 };
-window.addEventListener("click", commandClickHandler, false);
+/**
+ * Appends one or more children to a container, recursively resolving arrays, promises and factory functions. Elements are appended as-is; a {@link UIElement} appends its bound element (or defers until `setElement` binds one); a reactive {@link Binding} renders and live-updates in place; strings/numbers/booleans are inserted as HTML; `null`/`undefined` are ignored.
+ * @param container Element to append the children to.
+ * @param children Child or children to append. See {@link TagChildrenLike}.
+ * @throws Error When a child resolves to an unsupported type.
+ */
+const appendChild = (container, children) => {
+    if (children === null || children === undefined)
+        return;
+    if (children instanceof Array)
+        children.forEach(child => appendChild(container, child));
+    else if (children instanceof Element)
+        container.append(children);
+    else if (children instanceof UIElement) {
+        if (children.element)
+            container.append(children.element);
+        else {
+            // reserve the position now; replace the placeholder once setElement
+            // binds the element (after _onRenderElement), keeping child order
+            const placeholder = document.createComment("");
+            container.append(placeholder);
+            children.once("rendered", () => {
+                if (children.element)
+                    placeholder.replaceWith(children.element);
+            });
+        }
+    }
+    else if (children instanceof Binding)
+        appendBinding(container, children);
+    else if (children instanceof BindingEach)
+        appendBindingEach(container, children);
+    else if (children instanceof Promise)
+        children.then((child) => appendChild(container, child));
+    else {
+        const typeName = typeof children;
+        let html;
+        switch (typeName) {
+            case "string":
+                html = children;
+                break;
+            case "number":
+            case "boolean":
+                html = children.toString();
+                break;
+            case "function":
+                const child = children(container);
+                appendChild(container, child);
+                return;
+            default:
+                throw new Error(`Not support child type of ${typeName}.`);
+        }
+        container.insertAdjacentHTML("beforeend", html);
+    }
+};
+/**
+ * Renders a reactive {@link Binding} child and keeps it up to date: a reactive
+ * effect re-evaluates the binding and updates the DOM in place — reusing a text
+ * node for text values and swapping the node when an element/UIElement is returned.
+ */
+const appendBinding = (container, binding) => {
+    let current = document.createTextNode("");
+    let textNode = current;
+    container.append(current);
+    const eff = effect(() => {
+        const value = binding.compute();
+        if (value instanceof Element || value instanceof UIElement) {
+            const next = (value instanceof UIElement ? value.element : value) ?? document.createComment("");
+            current.replaceWith(next);
+            current = next;
+            textNode = null;
+            // deferred UIElement: its element is bound later — swap the placeholder
+            // for the real element once setElement raises "rendered"
+            if (value instanceof UIElement && !value.element) {
+                const placeholder = next;
+                value.once("rendered", () => {
+                    // skip if the binding has since re-rendered to a different node
+                    if (value.element && current === placeholder) {
+                        placeholder.replaceWith(value.element);
+                        current = value.element;
+                    }
+                });
+            }
+        }
+        else {
+            // null/undefined/false render as empty text
+            const text = (value === null || value === undefined || value === false) ? "" : String(value);
+            if (textNode && textNode === current) {
+                textNode.textContent = text;
+            }
+            else {
+                const next = document.createTextNode(text);
+                current.replaceWith(next);
+                current = next;
+                textNode = next;
+            }
+        }
+    });
+    // stop the effect when the container is removed from the document
+    autoDisposeBinding(container, eff);
+};
+
+var TagHelpers = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    appendChild: appendChild,
+    applyOptions: applyOptions,
+    tag: tag
+});
 
-HTMLElement.prototype.ui = function (factory) {
-    factory(this);
-    return this;
+/** Collection of DOM helper functions: element queries/traversal ({@link getById}, {@link queryElement}, {@link nextElement}, ...), class manipulation ({@link addClass}, {@link removeClass}), {@link empty}, and element creation via {@link tag}. */
+const DOM = {
+    ...DomHelpers,
+    ...TagHelpers
 };
 
-export { EventEmitter, constants$1 as UICONSTANTS, UIElement };
+export { Binding, BindingEach, ComputedRef, DOM, EffectScope, EventEmitter, ITERATE_KEY, ReactiveEffect, constants$1 as UICONSTANTS, UIElement, UIElementBound, appendBindingEach, bind, bindEach, computed, destroyUI, effect, effectScope, isReactive, nextTick, reactive, toRaw, track, trigger, untrack };
 //# sourceMappingURL=index.js.map