@brandup/ui 2.0.1 → 2.0.3

package/dist/cjs/index.js

@@ -1,1458 +1,43 @@
 'use strict';
 
-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;
-    _listeningTo;
-    on(eventName, callback, context) {
-        const events = this._getOrCreateEvents(eventName);
-        events.push({ callback, context: context || undefined, ctx: context || this });
-        return this;
-    }
-    once(eventName, callback, context) {
-        const wrapper = (...args) => {
-            this.off(eventName, wrapper, context);
-            callback.apply(context || this, args);
-        };
-        return this.on(eventName, wrapper, context);
-    }
-    off(eventName, callback, context) {
-        if (!eventName && !callback && !context)
-            throw new Error("Require off arguments.");
-        const events = this._events;
-        if (!events)
-            return this;
-        callback = callback || undefined;
-        context = context || undefined;
-        const eventNames = eventName ? [eventName.toLowerCase()] : Object.keys(events);
-        for (let i = 0; i < eventNames.length; i++) {
-            const name = eventNames[i];
-            const currentCallbacks = events[name];
-            if (!currentCallbacks)
-                continue;
-            // reset callback list
-            const newCallbacks = events[name] = [];
-            if (callback || context) {
-                currentCallbacks.forEach(c => {
-                    const callbackMatch = !callback || c.callback === callback;
-                    const contextMatch = !context || c.context === context;
-                    if (callbackMatch && contextMatch)
-                        return;
-                    newCallbacks.push(c);
-                });
-            }
-            if (!newCallbacks.length)
-                delete events[name];
-        }
-        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, 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) {
-        // 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;
-        // 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)
-                    listening.subscriptions.splice(index, 1);
-            });
-            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, callback, origin) {
-        const listeningTo = this._listeningTo || (this._listeningTo = {});
-        const listenId = source._listenId || (source._listenId = `l${ListenCounter++}`);
-        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();
-        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)
-            return;
-        Object.values(this._events).forEach(callbacks => {
-            callbacks.forEach(callback => {
-                if (callback.context instanceof EventEmitter)
-                    callback.context.stopListening(this);
-            });
-        });
-        delete this._events;
-    }
-    trigger(eventName, ...args) {
-        eventName = eventName.toLowerCase();
-        if (eventName === "all")
-            throw new Error('Not allow trigger all event.');
-        if (!this._events)
-            return this;
-        const events = this._getEvents(eventName);
-        const allEvents = this._getEvents("all");
-        this._triggerEvent(events, ...args);
-        this._triggerEvent(allEvents, ...args);
-        return this;
-    }
-    _triggerEvent(events, ...args) {
-        if (!events || !events.length)
-            return;
-        // 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);
-        }
-    }
-    _getOrCreateEvents(eventName) {
-        eventName = eventName.toLowerCase();
-        const events = this._events || (this._events = {});
-        return events[eventName] || (events[eventName] = []);
-    }
-    _getEvents(eventName) {
-        if (!eventName)
-            return;
-        const events = this._events;
-        if (!events)
-            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",
-    CommandAttributeName: "command",
-    CommandExecutingCssClassName: "executing"
-};
-
-var constants$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    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.");
-        if (this.__element || UIElement.hasElement(elem))
-            throw new Error("UIElement already defined");
-        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 normalizedName = name.toLowerCase();
-        if (normalizedName in commands)
-            throw new Error(`Command "${name}" already registered.`);
-        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;
-    }
-    /**
-     * Execute a registered command against a target element.
-     * @internal
-     */
-    __execCommand(name, target) {
-        if (this.__destroyed || !this.__element)
-            throw new Error("UIElement is destroyed or has no element.");
-        const key = name.toLowerCase();
-        const command = this.__commands?.[key];
-        if (!command)
-            throw new Error(`Command "${name}" is not registered.`);
-        const context = {
-            target,
-            uiElem: this
-        };
-        if (command.isExecuting)
-            return { status: "already", context };
-        command.isExecuting = true;
-        // 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 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;
-        }
-    }
-    /**
-     * 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;
-    }
-    /**
-     * 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.__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];
-        }
-        delete this.__element;
-        delete this.__events;
-        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) {
-        if (current.dataset[constants.ElemAttributeName]) {
-            const uiElem = current[constants.ElemPropertyName];
-            if (uiElem.hasCommand(commandName))
-                return uiElem;
-        }
-        current = current.parentElement;
-    }
-    return null;
-};
-const commandClickHandler = (e) => {
-    // walk up from the clicked element to the nearest ancestor declaring a command
-    let commandElem = e.target;
-    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 does not have a value.");
-    const uiElem = findUiElementByCommand(commandElem, commandName);
-    // 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;
-                }
-            }
-        }
-    }
-};
-/**
- * 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
-});
-
-/** 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
-};
-
-exports.Binding = Binding;
-exports.BindingEach = BindingEach;
-exports.ComputedRef = ComputedRef;
-exports.DOM = DOM;
-exports.EffectScope = EffectScope;
-exports.EventEmitter = EventEmitter;
-exports.ITERATE_KEY = ITERATE_KEY;
-exports.ReactiveEffect = ReactiveEffect;
-exports.UICONSTANTS = constants$1;
-exports.UIElement = UIElement;
-exports.UIElementBound = UIElementBound;
-exports.appendBindingEach = appendBindingEach;
-exports.bind = bind;
-exports.bindEach = bindEach;
-exports.computed = computed;
-exports.destroyUI = destroyUI;
-exports.effect = effect;
-exports.effectScope = effectScope;
-exports.isReactive = isReactive;
-exports.nextTick = nextTick;
-exports.reactive = reactive;
-exports.toRaw = toRaw;
-exports.track = track;
-exports.trigger = trigger;
-exports.untrack = untrack;
+var events = require('./events.js');
+var element = require('./element.js');
+var ext = require('./ext.js');
+var effect = require('./reactive/effect.js');
+var reactive = require('./reactive/reactive.js');
+var computed = require('./reactive/computed.js');
+var index = require('./dom/index.js');
+var constants = require('./constants.js');
+var bind = require('./dom/bind.js');
+var bindEach = require('./dom/bind-each.js');
+
+
+
+exports.EventEmitter = events.EventEmitter;
+exports.UIElement = element.UIElement;
+exports.UIElementBound = element.UIElementBound;
+exports.destroyUI = element.destroyUI;
+exports.initUICommands = element.initUICommands;
+exports.enableElementExtensions = ext.enableElementExtensions;
+exports.EffectScope = effect.EffectScope;
+exports.ITERATE_KEY = effect.ITERATE_KEY;
+exports.ReactiveEffect = effect.ReactiveEffect;
+exports.effect = effect.effect;
+exports.effectScope = effect.effectScope;
+exports.nextTick = effect.nextTick;
+exports.track = effect.track;
+exports.trigger = effect.trigger;
+exports.untrack = effect.untrack;
+exports.isReactive = reactive.isReactive;
+exports.reactive = reactive.reactive;
+exports.toRaw = reactive.toRaw;
+exports.ComputedRef = computed.ComputedRef;
+exports.computed = computed.computed;
+exports.DOM = index.DOM;
+exports.UICONSTANTS = constants;
+exports.Binding = bind.Binding;
+exports.bind = bind.bind;
+exports.BindingEach = bindEach.BindingEach;
+exports.appendBindingEach = bindEach.appendBindingEach;
+exports.bindEach = bindEach.bindEach;
 //# sourceMappingURL=index.js.map