@retoo/scena 0.0.1 → 0.0.2

package/dist/scena.umd.js

@@ -62,6 +62,7 @@
   const INERT = 1 << 13;
   const DESTROYED = 1 << 14;
   const REACTION_RAN = 1 << 15;
+  const DESTROYING = 1 << 25;
   const EFFECT_TRANSPARENT = 1 << 16;
   const EAGER_EFFECT = 1 << 17;
   const HEAD_EFFECT = 1 << 18;
@@ -142,6 +143,11 @@
       throw new Error(`https://svelte.dev/e/svelte_boundary_reset_onerror`);
     }
   }
+  function derived_inert() {
+    {
+      console.warn(`https://svelte.dev/e/derived_inert`);
+    }
+  }
   function select_multiple_invalid_value() {
     {
       console.warn(`https://svelte.dev/e/select_multiple_invalid_value`);
@@ -207,6 +213,10 @@
       e: null,
       s: props,
       x: null,
+      r: (
+        /** @type {Effect} */
+        active_effect
+      ),
       l: legacy_mode_flag && !runes ? { s: null, u: null, $: [] } : null
     };
   }
@@ -326,29 +336,44 @@
     clear_marked(effect2.deps);
     set_signal_status(effect2, CLEAN);
   }
+  let is_store_binding = false;
+  function capture_store_binding(fn) {
+    var previous_is_store_binding = is_store_binding;
+    try {
+      is_store_binding = false;
+      return [fn(), is_store_binding];
+    } finally {
+      is_store_binding = previous_is_store_binding;
+    }
+  }
   const batches = /* @__PURE__ */ new Set();
   let current_batch = null;
   let batch_values = null;
-  let queued_root_effects = [];
   let last_scheduled_effect = null;
-  let is_flushing = false;
+  let is_processing = false;
+  let collected_effects = null;
+  let legacy_updates = null;
+  var flush_count = 0;
+  let uid = 1;
   class Batch {
+    id = uid++;
     /**
-     * The current values of any sources that are updated in this batch
+     * The current values of any signals that are updated in this batch.
+     * Tuple format: [value, is_derived] (note: is_derived is false for deriveds, too, if they were overridden via assignment)
      * They keys of this map are identical to `this.#previous`
-     * @type {Map<Source, any>}
+     * @type {Map<Value, [any, boolean]>}
      */
     current = /* @__PURE__ */ new Map();
     /**
-     * The values of any sources that are updated in this batch _before_ those updates took place.
+     * The values of any signals (sources and deriveds) that are updated in this batch _before_ those updates took place.
      * They keys of this map are identical to `this.#current`
-     * @type {Map<Source, any>}
+     * @type {Map<Value, any>}
      */
     previous = /* @__PURE__ */ new Map();
     /**
      * When the batch is committed (and the DOM is updated), we need to remove old branches
      * and append new ones by calling the functions added inside (if/each/key/etc) blocks
-     * @type {Set<() => void>}
+     * @type {Set<(batch: Batch) => void>}
      */
     #commit_callbacks = /* @__PURE__ */ new Set();
     /**
@@ -357,19 +382,36 @@
      */
     #discard_callbacks = /* @__PURE__ */ new Set();
     /**
-     * The number of async effects that are currently in flight
+     * Callbacks that should run only when a fork is committed.
+     * @type {Set<(batch: Batch) => void>}
+     */
+    #fork_commit_callbacks = /* @__PURE__ */ new Set();
+    /**
+     * Async effects that are currently in flight
+     * @type {Map<Effect, number>}
      */
-    #pending = 0;
+    #pending = /* @__PURE__ */ new Map();
     /**
-     * The number of async effects that are currently in flight, _not_ inside a pending boundary
+     * Async effects that are currently in flight, _not_ inside a pending boundary
+     * @type {Map<Effect, number>}
      */
-    #blocking_pending = 0;
+    #blocking_pending = /* @__PURE__ */ new Map();
     /**
      * A deferred that resolves when the batch is committed, used with `settled()`
      * TODO replace with Promise.withResolvers once supported widely enough
      * @type {{ promise: Promise<void>, resolve: (value?: any) => void, reject: (reason: unknown) => void } | null}
      */
     #deferred = null;
+    /**
+     * The root effects that need to be flushed
+     * @type {Effect[]}
+     */
+    #roots = [];
+    /**
+     * Effects created while this batch was active.
+     * @type {Effect[]}
+     */
+    #new_effects = [];
     /**
      * Deferred effects (which run after async work has completed) that are DIRTY
      * @type {Set<Effect>}
@@ -388,10 +430,36 @@
      * @type {Map<Effect, { d: Effect[], m: Effect[] }>}
      */
     #skipped_branches = /* @__PURE__ */ new Map();
+    /**
+     * Inverse of #skipped_branches which we need to tell prior batches to unskip them when committing
+     * @type {Set<Effect>}
+     */
+    #unskipped_branches = /* @__PURE__ */ new Set();
     is_fork = false;
     #decrement_queued = false;
+    /** @type {Set<Batch>} */
+    #blockers = /* @__PURE__ */ new Set();
     #is_deferred() {
-      return this.is_fork || this.#blocking_pending > 0;
+      return this.is_fork || this.#blocking_pending.size > 0;
+    }
+    #is_blocked() {
+      for (const batch of this.#blockers) {
+        for (const effect2 of batch.#blocking_pending.keys()) {
+          var skipped = false;
+          var e = effect2;
+          while (e.parent !== null) {
+            if (this.#skipped_branches.has(e)) {
+              skipped = true;
+              break;
+            }
+            e = e.parent;
+          }
+          if (!skipped) {
+            return true;
+          }
+        }
+      }
+      return false;
     }
     /**
      * Add an effect to the #skipped_branches map and reset its children
@@ -401,58 +469,99 @@
       if (!this.#skipped_branches.has(effect2)) {
         this.#skipped_branches.set(effect2, { d: [], m: [] });
       }
+      this.#unskipped_branches.delete(effect2);
     }
     /**
      * Remove an effect from the #skipped_branches map and reschedule
      * any tracked dirty/maybe_dirty child effects
      * @param {Effect} effect
+     * @param {(e: Effect) => void} callback
      */
-    unskip_effect(effect2) {
+    unskip_effect(effect2, callback = (e) => this.schedule(e)) {
       var tracked = this.#skipped_branches.get(effect2);
       if (tracked) {
         this.#skipped_branches.delete(effect2);
         for (var e of tracked.d) {
           set_signal_status(e, DIRTY);
-          schedule_effect(e);
+          callback(e);
         }
         for (e of tracked.m) {
           set_signal_status(e, MAYBE_DIRTY);
-          schedule_effect(e);
+          callback(e);
         }
       }
+      this.#unskipped_branches.add(effect2);
     }
-    /**
-     *
-     * @param {Effect[]} root_effects
-     */
-    process(root_effects) {
-      queued_root_effects = [];
+    #process() {
+      if (flush_count++ > 1e3) {
+        batches.delete(this);
+        infinite_loop_guard();
+      }
+      if (!this.#is_deferred()) {
+        for (const e of this.#dirty_effects) {
+          this.#maybe_dirty_effects.delete(e);
+          set_signal_status(e, DIRTY);
+          this.schedule(e);
+        }
+        for (const e of this.#maybe_dirty_effects) {
+          set_signal_status(e, MAYBE_DIRTY);
+          this.schedule(e);
+        }
+      }
+      const roots = this.#roots;
+      this.#roots = [];
       this.apply();
-      var effects = [];
+      var effects = collected_effects = [];
       var render_effects = [];
-      for (const root2 of root_effects) {
-        this.#traverse_effect_tree(root2, effects, render_effects);
+      var updates = legacy_updates = [];
+      for (const root2 of roots) {
+        try {
+          this.#traverse(root2, effects, render_effects);
+        } catch (e) {
+          reset_all(root2);
+          throw e;
+        }
+      }
+      current_batch = null;
+      if (updates.length > 0) {
+        var batch = Batch.ensure();
+        for (const e of updates) {
+          batch.schedule(e);
+        }
       }
-      if (this.#is_deferred()) {
+      collected_effects = null;
+      legacy_updates = null;
+      if (this.#is_deferred() || this.#is_blocked()) {
         this.#defer_effects(render_effects);
         this.#defer_effects(effects);
         for (const [e, t] of this.#skipped_branches) {
           reset_branch(e, t);
         }
       } else {
-        for (const fn of this.#commit_callbacks) fn();
-        this.#commit_callbacks.clear();
-        if (this.#pending === 0) {
-          this.#commit();
+        if (this.#pending.size === 0) {
+          batches.delete(this);
         }
-        current_batch = null;
-        flush_queued_effects(render_effects);
-        flush_queued_effects(effects);
         this.#dirty_effects.clear();
         this.#maybe_dirty_effects.clear();
+        for (const fn of this.#commit_callbacks) fn(this);
+        this.#commit_callbacks.clear();
+        flush_queued_effects(render_effects);
+        flush_queued_effects(effects);
         this.#deferred?.resolve();
       }
-      batch_values = null;
+      var next_batch = (
+        /** @type {Batch | null} */
+        /** @type {unknown} */
+        current_batch
+      );
+      if (this.#roots.length > 0) {
+        const batch2 = next_batch ??= this;
+        batch2.#roots.push(...this.#roots.filter((r2) => !batch2.#roots.includes(r2)));
+      }
+      if (next_batch !== null) {
+        batches.add(next_batch);
+        next_batch.#process();
+      }
     }
     /**
      * Traverse the effect tree, executing effects or stashing
@@ -461,7 +570,7 @@
      * @param {Effect[]} effects
      * @param {Effect[]} render_effects
      */
-    #traverse_effect_tree(root2, effects, render_effects) {
+    #traverse(root2, effects, render_effects) {
       root2.f ^= CLEAN;
       var effect2 = root2.first;
       while (effect2 !== null) {
@@ -505,132 +614,189 @@
     /**
      * Associate a change to a given source with the current
      * batch, noting its previous and current values
-     * @param {Source} source
+     * @param {Value} source
      * @param {any} value
+     * @param {boolean} [is_derived]
      */
-    capture(source2, value) {
-      if (value !== UNINITIALIZED && !this.previous.has(source2)) {
-        this.previous.set(source2, value);
+    capture(source2, value, is_derived = false) {
+      if (source2.v !== UNINITIALIZED && !this.previous.has(source2)) {
+        this.previous.set(source2, source2.v);
       }
       if ((source2.f & ERROR_VALUE) === 0) {
-        this.current.set(source2, source2.v);
-        batch_values?.set(source2, source2.v);
+        this.current.set(source2, [value, is_derived]);
+        batch_values?.set(source2, value);
+      }
+      if (!this.is_fork) {
+        source2.v = value;
       }
     }
     activate() {
       current_batch = this;
-      this.apply();
     }
     deactivate() {
-      if (current_batch !== this) return;
       current_batch = null;
       batch_values = null;
     }
     flush() {
-      this.activate();
-      if (queued_root_effects.length > 0) {
-        flush_effects();
-        if (current_batch !== null && current_batch !== this) {
-          return;
-        }
-      } else if (this.#pending === 0) {
-        this.process([]);
+      try {
+        is_processing = true;
+        current_batch = this;
+        this.#process();
+      } finally {
+        flush_count = 0;
+        last_scheduled_effect = null;
+        collected_effects = null;
+        legacy_updates = null;
+        is_processing = false;
+        current_batch = null;
+        batch_values = null;
+        old_values.clear();
       }
-      this.deactivate();
     }
     discard() {
       for (const fn of this.#discard_callbacks) fn(this);
       this.#discard_callbacks.clear();
+      this.#fork_commit_callbacks.clear();
+      batches.delete(this);
+    }
+    /**
+     * @param {Effect} effect
+     */
+    register_created_effect(effect2) {
+      this.#new_effects.push(effect2);
     }
     #commit() {
-      if (batches.size > 1) {
-        this.previous.clear();
-        var previous_batch_values = batch_values;
-        var is_earlier = true;
-        for (const batch of batches) {
-          if (batch === this) {
-            is_earlier = false;
-            continue;
-          }
-          const sources = [];
-          for (const [source2, value] of this.current) {
-            if (batch.current.has(source2)) {
-              if (is_earlier && value !== batch.current.get(source2)) {
-                batch.current.set(source2, value);
-              } else {
-                continue;
-              }
+      for (const batch of batches) {
+        var is_earlier = batch.id < this.id;
+        var sources = [];
+        for (const [source3, [value, is_derived]] of this.current) {
+          if (batch.current.has(source3)) {
+            var batch_value = (
+              /** @type {[any, boolean]} */
+              batch.current.get(source3)[0]
+            );
+            if (is_earlier && value !== batch_value) {
+              batch.current.set(source3, [value, is_derived]);
+            } else {
+              continue;
             }
-            sources.push(source2);
           }
-          if (sources.length === 0) {
-            continue;
+          sources.push(source3);
+        }
+        var others = [...batch.current.keys()].filter((s) => !this.current.has(s));
+        if (others.length === 0) {
+          if (is_earlier) {
+            batch.discard();
           }
-          const others = [...batch.current.keys()].filter((s) => !this.current.has(s));
-          if (others.length > 0) {
-            var prev_queued_root_effects = queued_root_effects;
-            queued_root_effects = [];
-            const marked = /* @__PURE__ */ new Set();
-            const checked = /* @__PURE__ */ new Map();
-            for (const source2 of sources) {
-              mark_effects(source2, others, marked, checked);
+        } else if (sources.length > 0) {
+          if (is_earlier) {
+            for (const unskipped of this.#unskipped_branches) {
+              batch.unskip_effect(unskipped, (e) => {
+                if ((e.f & (BLOCK_EFFECT | ASYNC)) !== 0) {
+                  batch.schedule(e);
+                } else {
+                  batch.#defer_effects([e]);
+                }
+              });
             }
-            if (queued_root_effects.length > 0) {
-              current_batch = batch;
-              batch.apply();
-              for (const root2 of queued_root_effects) {
-                batch.#traverse_effect_tree(root2, [], []);
+          }
+          batch.activate();
+          var marked = /* @__PURE__ */ new Set();
+          var checked = /* @__PURE__ */ new Map();
+          for (var source2 of sources) {
+            mark_effects(source2, others, marked, checked);
+          }
+          checked = /* @__PURE__ */ new Map();
+          var current_unequal = [...batch.current.keys()].filter(
+            (c) => this.current.has(c) ? (
+              /** @type {[any, boolean]} */
+              this.current.get(c)[0] !== c
+            ) : true
+          );
+          for (const effect2 of this.#new_effects) {
+            if ((effect2.f & (DESTROYED | INERT | EAGER_EFFECT)) === 0 && depends_on(effect2, current_unequal, checked)) {
+              if ((effect2.f & (ASYNC | BLOCK_EFFECT)) !== 0) {
+                set_signal_status(effect2, DIRTY);
+                batch.schedule(effect2);
+              } else {
+                batch.#dirty_effects.add(effect2);
               }
-              batch.deactivate();
             }
-            queued_root_effects = prev_queued_root_effects;
+          }
+          if (batch.#roots.length > 0) {
+            batch.apply();
+            for (var root2 of batch.#roots) {
+              batch.#traverse(root2, [], []);
+            }
+            batch.#roots = [];
+          }
+          batch.deactivate();
+        }
+      }
+      for (const batch of batches) {
+        if (batch.#blockers.has(this)) {
+          batch.#blockers.delete(this);
+          if (batch.#blockers.size === 0 && !batch.#is_deferred()) {
+            batch.activate();
+            batch.#process();
           }
         }
-        current_batch = null;
-        batch_values = previous_batch_values;
       }
-      this.#skipped_branches.clear();
-      batches.delete(this);
     }
     /**
-     *
      * @param {boolean} blocking
+     * @param {Effect} effect
      */
-    increment(blocking) {
-      this.#pending += 1;
-      if (blocking) this.#blocking_pending += 1;
+    increment(blocking, effect2) {
+      let pending_count = this.#pending.get(effect2) ?? 0;
+      this.#pending.set(effect2, pending_count + 1);
+      if (blocking) {
+        let blocking_pending_count = this.#blocking_pending.get(effect2) ?? 0;
+        this.#blocking_pending.set(effect2, blocking_pending_count + 1);
+      }
     }
     /**
-     *
      * @param {boolean} blocking
+     * @param {Effect} effect
+     * @param {boolean} skip - whether to skip updates (because this is triggered by a stale reaction)
      */
-    decrement(blocking) {
-      this.#pending -= 1;
-      if (blocking) this.#blocking_pending -= 1;
-      if (this.#decrement_queued) return;
+    decrement(blocking, effect2, skip) {
+      let pending_count = this.#pending.get(effect2) ?? 0;
+      if (pending_count === 1) {
+        this.#pending.delete(effect2);
+      } else {
+        this.#pending.set(effect2, pending_count - 1);
+      }
+      if (blocking) {
+        let blocking_pending_count = this.#blocking_pending.get(effect2) ?? 0;
+        if (blocking_pending_count === 1) {
+          this.#blocking_pending.delete(effect2);
+        } else {
+          this.#blocking_pending.set(effect2, blocking_pending_count - 1);
+        }
+      }
+      if (this.#decrement_queued || skip) return;
       this.#decrement_queued = true;
       queue_micro_task(() => {
         this.#decrement_queued = false;
-        if (!this.#is_deferred()) {
-          this.revive();
-        } else if (queued_root_effects.length > 0) {
-          this.flush();
-        }
+        this.flush();
       });
     }
-    revive() {
-      for (const e of this.#dirty_effects) {
-        this.#maybe_dirty_effects.delete(e);
-        set_signal_status(e, DIRTY);
-        schedule_effect(e);
+    /**
+     * @param {Set<Effect>} dirty_effects
+     * @param {Set<Effect>} maybe_dirty_effects
+     */
+    transfer_effects(dirty_effects, maybe_dirty_effects) {
+      for (const e of dirty_effects) {
+        this.#dirty_effects.add(e);
       }
-      for (const e of this.#maybe_dirty_effects) {
-        set_signal_status(e, MAYBE_DIRTY);
-        schedule_effect(e);
+      for (const e of maybe_dirty_effects) {
+        this.#maybe_dirty_effects.add(e);
       }
-      this.flush();
+      dirty_effects.clear();
+      maybe_dirty_effects.clear();
     }
-    /** @param {() => void} fn */
+    /** @param {(batch: Batch) => void} fn */
     oncommit(fn) {
       this.#commit_callbacks.add(fn);
     }
@@ -638,48 +804,67 @@
     ondiscard(fn) {
       this.#discard_callbacks.add(fn);
     }
+    /** @param {(batch: Batch) => void} fn */
+    on_fork_commit(fn) {
+      this.#fork_commit_callbacks.add(fn);
+    }
+    run_fork_commit_callbacks() {
+      for (const fn of this.#fork_commit_callbacks) fn(this);
+      this.#fork_commit_callbacks.clear();
+    }
     settled() {
       return (this.#deferred ??= deferred()).promise;
     }
     static ensure() {
       if (current_batch === null) {
         const batch = current_batch = new Batch();
-        batches.add(current_batch);
-        {
-          queue_micro_task(() => {
-            if (current_batch !== batch) {
-              return;
-            }
-            batch.flush();
-          });
+        if (!is_processing) {
+          batches.add(current_batch);
+          {
+            queue_micro_task(() => {
+              if (current_batch !== batch) {
+                return;
+              }
+              batch.flush();
+            });
+          }
         }
       }
       return current_batch;
     }
     apply() {
-      return;
+      {
+        batch_values = null;
+        return;
+      }
     }
-  }
-  function flush_effects() {
-    is_flushing = true;
-    var source_stacks = null;
-    try {
-      var flush_count = 0;
-      while (queued_root_effects.length > 0) {
-        var batch = Batch.ensure();
-        if (flush_count++ > 1e3) {
-          var updates, entry;
-          if (DEV) ;
-          infinite_loop_guard();
+    /**
+     *
+     * @param {Effect} effect
+     */
+    schedule(effect2) {
+      last_scheduled_effect = effect2;
+      if (effect2.b?.is_pending && (effect2.f & (EFFECT | RENDER_EFFECT | MANAGED_EFFECT)) !== 0 && (effect2.f & REACTION_RAN) === 0) {
+        effect2.b.defer_effect(effect2);
+        return;
+      }
+      var e = effect2;
+      while (e.parent !== null) {
+        e = e.parent;
+        var flags2 = e.f;
+        if (collected_effects !== null && e === active_effect) {
+          if ((active_reaction === null || (active_reaction.f & DERIVED) === 0) && true) {
+            return;
+          }
+        }
+        if ((flags2 & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
+          if ((flags2 & CLEAN) === 0) {
+            return;
+          }
+          e.f ^= CLEAN;
         }
-        batch.process(queued_root_effects);
-        old_values.clear();
-        if (DEV) ;
       }
-    } finally {
-      queued_root_effects = [];
-      is_flushing = false;
-      last_scheduled_effect = null;
+      this.#roots.push(e);
     }
   }
   function infinite_loop_guard() {
@@ -777,27 +962,8 @@
     checked.set(reaction, false);
     return false;
   }
-  function schedule_effect(signal) {
-    var effect2 = last_scheduled_effect = signal;
-    var boundary2 = effect2.b;
-    if (boundary2?.is_pending && (signal.f & (EFFECT | RENDER_EFFECT | MANAGED_EFFECT)) !== 0 && (signal.f & REACTION_RAN) === 0) {
-      boundary2.defer_effect(signal);
-      return;
-    }
-    while (effect2.parent !== null) {
-      effect2 = effect2.parent;
-      var flags2 = effect2.f;
-      if (is_flushing && effect2 === active_effect && (flags2 & BLOCK_EFFECT) !== 0 && (flags2 & HEAD_EFFECT) === 0 && (flags2 & REACTION_RAN) !== 0) {
-        return;
-      }
-      if ((flags2 & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
-        if ((flags2 & CLEAN) === 0) {
-          return;
-        }
-        effect2.f ^= CLEAN;
-      }
-    }
-    queued_root_effects.push(effect2);
+  function schedule_effect(effect2) {
+    current_batch.schedule(effect2);
   }
   function reset_branch(effect2, tracked) {
     if ((effect2.f & BRANCH_EFFECT) !== 0 && (effect2.f & CLEAN) !== 0) {
@@ -815,6 +981,14 @@
       e = e.next;
     }
   }
+  function reset_all(effect2) {
+    set_signal_status(effect2, CLEAN);
+    var e = effect2.first;
+    while (e !== null) {
+      reset_all(e);
+      e = e.next;
+    }
+  }
   function createSubscriber(start) {
     let subscribers = 0;
     let version = source(0);
@@ -953,7 +1127,6 @@
         var anchor = create_text();
         fragment.append(anchor);
         this.#main_effect = this.#run(() => {
-          Batch.ensure();
           return branch(() => this.#children(anchor));
         });
         if (this.#pending_count === 0) {
@@ -966,7 +1139,10 @@
               this.#pending_effect = null;
             }
           );
-          this.#resolve();
+          this.#resolve(
+            /** @type {Batch} */
+            current_batch
+          );
         }
       });
     }
@@ -987,24 +1163,21 @@
           );
           this.#pending_effect = branch(() => pending(this.#anchor));
         } else {
-          this.#resolve();
+          this.#resolve(
+            /** @type {Batch} */
+            current_batch
+          );
         }
       } catch (error) {
         this.error(error);
       }
     }
-    #resolve() {
+    /**
+     * @param {Batch} batch
+     */
+    #resolve(batch) {
       this.is_pending = false;
-      for (const e of this.#dirty_effects) {
-        set_signal_status(e, DIRTY);
-        schedule_effect(e);
-      }
-      for (const e of this.#maybe_dirty_effects) {
-        set_signal_status(e, MAYBE_DIRTY);
-        schedule_effect(e);
-      }
-      this.#dirty_effects.clear();
-      this.#maybe_dirty_effects.clear();
+      batch.transfer_effects(this.#dirty_effects, this.#maybe_dirty_effects);
     }
     /**
      * Defer an effect inside a pending boundary until the boundary resolves
@@ -1035,6 +1208,7 @@
       set_active_reaction(this.#effect);
       set_component_context(this.#effect.ctx);
       try {
+        Batch.ensure();
         return fn();
       } catch (e) {
         handle_error(e);
@@ -1049,17 +1223,18 @@
      * Updates the pending count associated with the currently visible pending snippet,
      * if any, such that we can replace the snippet with content once work is done
      * @param {1 | -1} d
+     * @param {Batch} batch
      */
-    #update_pending_count(d) {
+    #update_pending_count(d, batch) {
       if (!this.has_pending_snippet()) {
         if (this.parent) {
-          this.parent.#update_pending_count(d);
+          this.parent.#update_pending_count(d, batch);
         }
         return;
       }
       this.#pending_count += d;
       if (this.#pending_count === 0) {
-        this.#resolve();
+        this.#resolve(batch);
         if (this.#pending_effect) {
           pause_effect(this.#pending_effect, () => {
             this.#pending_effect = null;
@@ -1076,9 +1251,10 @@
      * and controls when the current `pending` snippet (if any) is removed.
      * Do not call from inside the class
      * @param {1 | -1} d
+     * @param {Batch} batch
      */
-    update_pending_count(d) {
-      this.#update_pending_count(d);
+    update_pending_count(d, batch) {
+      this.#update_pending_count(d, batch);
       this.#local_pending_count += d;
       if (!this.#effect_pending || this.#pending_count_update_queued) return;
       this.#pending_count_update_queued = true;
@@ -1098,11 +1274,24 @@
     }
     /** @param {unknown} error */
     error(error) {
-      var onerror = this.#props.onerror;
-      let failed = this.#props.failed;
-      if (!onerror && !failed) {
+      if (!this.#props.onerror && !this.#props.failed) {
         throw error;
       }
+      if (current_batch?.is_fork) {
+        if (this.#main_effect) current_batch.skip_effect(this.#main_effect);
+        if (this.#pending_effect) current_batch.skip_effect(this.#pending_effect);
+        if (this.#failed_effect) current_batch.skip_effect(this.#failed_effect);
+        current_batch.on_fork_commit(() => {
+          this.#handle_error(error);
+        });
+      } else {
+        this.#handle_error(error);
+      }
+    }
+    /**
+     * @param {unknown} error
+     */
+    #handle_error(error) {
       if (this.#main_effect) {
         destroy_effect(this.#main_effect);
         this.#main_effect = null;
@@ -1115,6 +1304,8 @@
         destroy_effect(this.#failed_effect);
         this.#failed_effect = null;
       }
+      var onerror = this.#props.onerror;
+      let failed = this.#props.failed;
       var did_reset = false;
       var calling_on_error = false;
       const reset = () => {
@@ -1132,7 +1323,6 @@
           });
         }
         this.#run(() => {
-          Batch.ensure();
           this.#render();
         });
       };
@@ -1146,7 +1336,6 @@
         }
         if (failed) {
           this.#failed_effect = this.#run(() => {
-            Batch.ensure();
             try {
               return branch(() => {
                 var effect2 = (
@@ -1221,26 +1410,39 @@
       blocker_promise.then(() => finish(sync.map(d)));
       return;
     }
+    var decrement_pending = increment_pending();
     function run() {
-      restore();
-      Promise.all(async.map((expression) => /* @__PURE__ */ async_derived(expression))).then((result) => finish([...sync.map(d), ...result])).catch((error) => invoke_error_boundary(error, parent));
+      Promise.all(async.map((expression) => /* @__PURE__ */ async_derived(expression))).then((result) => finish([...sync.map(d), ...result])).catch((error) => invoke_error_boundary(error, parent)).finally(() => decrement_pending());
     }
     if (blocker_promise) {
-      blocker_promise.then(run);
+      blocker_promise.then(() => {
+        restore();
+        run();
+        unset_context();
+      });
     } else {
       run();
     }
   }
   function capture() {
-    var previous_effect = active_effect;
+    var previous_effect = (
+      /** @type {Effect} */
+      active_effect
+    );
     var previous_reaction = active_reaction;
     var previous_component_context = component_context;
-    var previous_batch = current_batch;
+    var previous_batch = (
+      /** @type {Batch} */
+      current_batch
+    );
     return function restore(activate_batch = true) {
       set_active_effect(previous_effect);
       set_active_reaction(previous_reaction);
       set_component_context(previous_component_context);
-      if (activate_batch) previous_batch?.activate();
+      if (activate_batch && (previous_effect.f & DESTROYED) === 0) {
+        previous_batch?.activate();
+        previous_batch?.apply();
+      }
     };
   }
   function unset_context(deactivate_batch = true) {
@@ -1250,30 +1452,29 @@
     if (deactivate_batch) current_batch?.deactivate();
   }
   function increment_pending() {
+    var effect2 = (
+      /** @type {Effect} */
+      active_effect
+    );
     var boundary2 = (
       /** @type {Boundary} */
-      /** @type {Effect} */
-      active_effect.b
+      effect2.b
     );
     var batch = (
       /** @type {Batch} */
       current_batch
     );
     var blocking = boundary2.is_rendered();
-    boundary2.update_pending_count(1);
-    batch.increment(blocking);
-    return () => {
-      boundary2.update_pending_count(-1);
-      batch.decrement(blocking);
+    boundary2.update_pending_count(1, batch);
+    batch.increment(blocking, effect2);
+    return (skip = false) => {
+      boundary2.update_pending_count(-1, batch);
+      batch.decrement(blocking, effect2, skip);
     };
   }
   // @__NO_SIDE_EFFECTS__
   function derived(fn) {
     var flags2 = DERIVED | DIRTY;
-    var parent_derived = active_reaction !== null && (active_reaction.f & DERIVED) !== 0 ? (
-      /** @type {Derived} */
-      active_reaction
-    ) : null;
     if (active_effect !== null) {
       active_effect.f |= EFFECT_PRESERVED;
     }
@@ -1291,7 +1492,7 @@
         UNINITIALIZED
       ),
       wv: 0,
-      parent: parent_derived ?? active_effect,
+      parent: active_effect,
       ac: null
     };
     return signal;
@@ -1317,6 +1518,10 @@
     var should_suspend = !active_reaction;
     var deferreds = /* @__PURE__ */ new Map();
     async_effect(() => {
+      var effect2 = (
+        /** @type {Effect} */
+        active_effect
+      );
       var d = deferred();
       promise = d.promise;
       try {
@@ -1330,18 +1535,35 @@
         current_batch
       );
       if (should_suspend) {
-        var decrement_pending = increment_pending();
-        deferreds.get(batch)?.reject(STALE_REACTION);
-        deferreds.delete(batch);
+        if ((effect2.f & REACTION_RAN) !== 0) {
+          var decrement_pending = increment_pending();
+        }
+        if (
+          /** @type {Boundary} */
+          parent.b.is_rendered()
+        ) {
+          deferreds.get(batch)?.reject(STALE_REACTION);
+          deferreds.delete(batch);
+        } else {
+          for (const d2 of deferreds.values()) {
+            d2.reject(STALE_REACTION);
+          }
+          deferreds.clear();
+        }
         deferreds.set(batch, d);
       }
       const handler = (value, error = void 0) => {
+        if (decrement_pending) {
+          var skip = error === STALE_REACTION;
+          decrement_pending(skip);
+        }
+        if (error === STALE_REACTION || (effect2.f & DESTROYED) !== 0) {
+          return;
+        }
         batch.activate();
         if (error) {
-          if (error !== STALE_REACTION) {
-            signal.f |= ERROR_VALUE;
-            internal_set(signal, error);
-          }
+          signal.f |= ERROR_VALUE;
+          internal_set(signal, error);
         } else {
           if ((signal.f & ERROR_VALUE) !== 0) {
             signal.f ^= ERROR_VALUE;
@@ -1353,9 +1575,7 @@
             d2.reject(STALE_REACTION);
           }
         }
-        if (decrement_pending) {
-          decrement_pending();
-        }
+        batch.deactivate();
       };
       d.promise.then(handler, (e) => handler(null, e || "unknown"));
     });
@@ -1402,23 +1622,15 @@
       }
     }
   }
-  function get_derived_parent_effect(derived2) {
-    var parent = derived2.parent;
-    while (parent !== null) {
-      if ((parent.f & DERIVED) === 0) {
-        return (parent.f & DESTROYED) === 0 ? (
-          /** @type {Effect} */
-          parent
-        ) : null;
-      }
-      parent = parent.parent;
-    }
-    return null;
-  }
   function execute_derived(derived2) {
     var value;
     var prev_active_effect = active_effect;
-    set_active_effect(get_derived_parent_effect(derived2));
+    var parent = derived2.parent;
+    if (!is_destroying_effect && parent !== null && (parent.f & (DESTROYED | INERT)) !== 0) {
+      derived_inert();
+      return derived2.v;
+    }
+    set_active_effect(parent);
     {
       try {
         derived2.f &= ~WAS_MARKED;
@@ -1435,7 +1647,11 @@
     if (!derived2.equals(value)) {
       derived2.wv = increment_write_version();
       if (!current_batch?.is_fork || derived2.deps === null) {
-        derived2.v = value;
+        if (current_batch !== null) {
+          current_batch.capture(derived2, value, true);
+        } else {
+          derived2.v = value;
+        }
         if (derived2.deps === null) {
           set_signal_status(derived2, CLEAN);
           return;
@@ -1502,19 +1718,13 @@
       state_unsafe_mutation();
     }
     let new_value = should_proxy ? proxy(value) : value;
-    return internal_set(source2, new_value);
+    return internal_set(source2, new_value, legacy_updates);
   }
-  function internal_set(source2, value) {
+  function internal_set(source2, value, updated_during_traversal = null) {
     if (!source2.equals(value)) {
-      var old_value = source2.v;
-      if (is_destroying_effect) {
-        old_values.set(source2, value);
-      } else {
-        old_values.set(source2, old_value);
-      }
-      source2.v = value;
+      old_values.set(source2, is_destroying_effect ? value : source2.v);
       var batch = Batch.ensure();
-      batch.capture(source2, old_value);
+      batch.capture(source2, value);
       if ((source2.f & DERIVED) !== 0) {
         const derived2 = (
           /** @type {Derived} */
@@ -1523,10 +1733,12 @@
         if ((source2.f & DIRTY) !== 0) {
           execute_derived(derived2);
         }
-        update_derived_status(derived2);
+        if (batch_values === null) {
+          update_derived_status(derived2);
+        }
       }
       source2.wv = increment_write_version();
-      mark_reactions(source2, DIRTY);
+      mark_reactions(source2, DIRTY, updated_during_traversal);
       if (is_runes() && active_effect !== null && (active_effect.f & CLEAN) !== 0 && (active_effect.f & (BRANCH_EFFECT | ROOT_EFFECT)) === 0) {
         if (untracked_writes === null) {
           set_untracked_writes([source2]);
@@ -1555,7 +1767,7 @@
   function increment(source2) {
     set(source2, source2.v + 1);
   }
-  function mark_reactions(signal, status) {
+  function mark_reactions(signal, status, updated_during_traversal) {
     var reactions = signal.reactions;
     if (reactions === null) return;
     var runes = is_runes();
@@ -1575,22 +1787,24 @@
         );
         batch_values?.delete(derived2);
         if ((flags2 & WAS_MARKED) === 0) {
-          if (flags2 & CONNECTED) {
+          if (flags2 & CONNECTED && (active_effect === null || (active_effect.f & REACTION_IS_UPDATING) === 0)) {
             reaction.f |= WAS_MARKED;
           }
-          mark_reactions(derived2, MAYBE_DIRTY);
+          mark_reactions(derived2, MAYBE_DIRTY, updated_during_traversal);
         }
       } else if (not_dirty) {
-        if ((flags2 & BLOCK_EFFECT) !== 0 && eager_block_effects !== null) {
-          eager_block_effects.add(
-            /** @type {Effect} */
-            reaction
-          );
-        }
-        schedule_effect(
+        var effect2 = (
           /** @type {Effect} */
           reaction
         );
+        if ((flags2 & BLOCK_EFFECT) !== 0 && eager_block_effects !== null) {
+          eager_block_effects.add(effect2);
+        }
+        if (updated_during_traversal !== null) {
+          updated_during_traversal.push(effect2);
+        } else {
+          schedule_effect(effect2);
+        }
       }
     }
   }
@@ -1915,7 +2129,7 @@
       parent_effect.last = effect2;
     }
   }
-  function create_effect(type, fn, sync) {
+  function create_effect(type, fn) {
     var parent = active_effect;
     if (parent !== null && (parent.f & INERT) !== 0) {
       type |= INERT;
@@ -1936,22 +2150,27 @@
       wv: 0,
       ac: null
     };
-    if (sync) {
+    current_batch?.register_created_effect(effect2);
+    var e = effect2;
+    if ((type & EFFECT) !== 0) {
+      if (collected_effects !== null) {
+        collected_effects.push(effect2);
+      } else {
+        Batch.ensure().schedule(effect2);
+      }
+    } else if (fn !== null) {
       try {
         update_effect(effect2);
       } catch (e2) {
         destroy_effect(effect2);
         throw e2;
       }
-    } else if (fn !== null) {
-      schedule_effect(effect2);
-    }
-    var e = effect2;
-    if (sync && e.deps === null && e.teardown === null && e.nodes === null && e.first === e.last && // either `null`, or a singular child
-    (e.f & EFFECT_PRESERVED) === 0) {
-      e = e.first;
-      if ((type & BLOCK_EFFECT) !== 0 && (type & EFFECT_TRANSPARENT) !== 0 && e !== null) {
-        e.f |= EFFECT_TRANSPARENT;
+      if (e.deps === null && e.teardown === null && e.nodes === null && e.first === e.last && // either `null`, or a singular child
+      (e.f & EFFECT_PRESERVED) === 0) {
+        e = e.first;
+        if ((type & BLOCK_EFFECT) !== 0 && (type & EFFECT_TRANSPARENT) !== 0 && e !== null) {
+          e.f |= EFFECT_TRANSPARENT;
+        }
       }
     }
     if (e !== null) {
@@ -1973,7 +2192,7 @@
     return active_reaction !== null && !untracking;
   }
   function teardown(fn) {
-    const effect2 = create_effect(RENDER_EFFECT, null, false);
+    const effect2 = create_effect(RENDER_EFFECT, null);
     set_signal_status(effect2, CLEAN);
     effect2.teardown = fn;
     return effect2;
@@ -1996,15 +2215,15 @@
     }
   }
   function create_user_effect(fn) {
-    return create_effect(EFFECT | USER_EFFECT, fn, false);
+    return create_effect(EFFECT | USER_EFFECT, fn);
   }
   function user_pre_effect(fn) {
     validate_effect();
-    return create_effect(RENDER_EFFECT | USER_EFFECT, fn, true);
+    return create_effect(RENDER_EFFECT | USER_EFFECT, fn);
   }
   function component_root(fn) {
     Batch.ensure();
-    const effect2 = create_effect(ROOT_EFFECT | EFFECT_PRESERVED, fn, true);
+    const effect2 = create_effect(ROOT_EFFECT | EFFECT_PRESERVED, fn);
     return (options = {}) => {
       return new Promise((fulfil) => {
         if (options.outro) {
@@ -2020,29 +2239,29 @@
     };
   }
   function effect(fn) {
-    return create_effect(EFFECT, fn, false);
+    return create_effect(EFFECT, fn);
   }
   function async_effect(fn) {
-    return create_effect(ASYNC | EFFECT_PRESERVED, fn, true);
+    return create_effect(ASYNC | EFFECT_PRESERVED, fn);
   }
   function render_effect(fn, flags2 = 0) {
-    return create_effect(RENDER_EFFECT | flags2, fn, true);
+    return create_effect(RENDER_EFFECT | flags2, fn);
   }
   function template_effect(fn, sync = [], async = [], blockers = []) {
     flatten(blockers, sync, async, (values) => {
-      create_effect(RENDER_EFFECT, () => fn(...values.map(get)), true);
+      create_effect(RENDER_EFFECT, () => fn(...values.map(get)));
     });
   }
   function block(fn, flags2 = 0) {
-    var effect2 = create_effect(BLOCK_EFFECT | flags2, fn, true);
+    var effect2 = create_effect(BLOCK_EFFECT | flags2, fn);
     return effect2;
   }
   function managed(fn, flags2 = 0) {
-    var effect2 = create_effect(MANAGED_EFFECT | flags2, fn, true);
+    var effect2 = create_effect(MANAGED_EFFECT | flags2, fn);
     return effect2;
   }
   function branch(fn) {
-    return create_effect(BRANCH_EFFECT | EFFECT_PRESERVED, fn, true);
+    return create_effect(BRANCH_EFFECT | EFFECT_PRESERVED, fn);
   }
   function execute_effect_teardown(effect2) {
     var teardown2 = effect2.teardown;
@@ -2098,9 +2317,9 @@
       );
       removed = true;
     }
+    set_signal_status(effect2, DESTROYING);
     destroy_effect_children(effect2, remove_dom && !removed);
     remove_reactions(effect2, 0);
-    set_signal_status(effect2, DESTROYED);
     var transitions = effect2.nodes && effect2.nodes.t;
     if (transitions !== null) {
       for (const transition of transitions) {
@@ -2108,11 +2327,13 @@
       }
     }
     execute_effect_teardown(effect2);
+    effect2.f ^= DESTROYING;
+    effect2.f |= DESTROYED;
     var parent = effect2.parent;
     if (parent !== null && parent.first !== null) {
       unlink_effect(effect2);
     }
-    effect2.next = effect2.prev = effect2.teardown = effect2.ctx = effect2.deps = effect2.fn = effect2.nodes = effect2.ac = null;
+    effect2.next = effect2.prev = effect2.teardown = effect2.ctx = effect2.deps = effect2.fn = effect2.nodes = effect2.ac = effect2.b = null;
   }
   function remove_effect_dom(node, end) {
     while (node !== null) {
@@ -2163,11 +2384,13 @@
     var child2 = effect2.first;
     while (child2 !== null) {
       var sibling2 = child2.next;
-      var transparent = (child2.f & EFFECT_TRANSPARENT) !== 0 || // If this is a branch effect without a block effect parent,
-      // it means the parent block effect was pruned. In that case,
-      // transparency information was transferred to the branch effect.
-      (child2.f & BRANCH_EFFECT) !== 0 && (effect2.f & BLOCK_EFFECT) !== 0;
-      pause_children(child2, transitions, transparent ? local : false);
+      if ((child2.f & ROOT_EFFECT) === 0) {
+        var transparent = (child2.f & EFFECT_TRANSPARENT) !== 0 || // If this is a branch effect without a block effect parent,
+        // it means the parent block effect was pruned. In that case,
+        // transparency information was transferred to the branch effect.
+        (child2.f & BRANCH_EFFECT) !== 0 && (effect2.f & BLOCK_EFFECT) !== 0;
+        pause_children(child2, transitions, transparent ? local : false);
+      }
       child2 = sibling2;
     }
   }
@@ -2179,7 +2402,7 @@
     effect2.f ^= INERT;
     if ((effect2.f & CLEAN) === 0) {
       set_signal_status(effect2, DIRTY);
-      schedule_effect(effect2);
+      Batch.ensure().schedule(effect2);
     }
     var child2 = effect2.first;
     while (child2 !== null) {
@@ -2443,7 +2666,9 @@
         derived2.f ^= CONNECTED;
         derived2.f &= ~WAS_MARKED;
       }
-      update_derived_status(derived2);
+      if (derived2.v !== UNINITIALIZED) {
+        update_derived_status(derived2);
+      }
       freeze_derived_effects(derived2);
       remove_reactions(derived2, 0);
     }
@@ -3060,11 +3285,10 @@
       this.anchor = anchor;
       this.#transition = transition;
     }
-    #commit = () => {
-      var batch = (
-        /** @type {Batch} */
-        current_batch
-      );
+    /**
+     * @param {Batch} batch
+     */
+    #commit = (batch) => {
       if (!this.#batches.has(batch)) return;
       var key = (
         /** @type {Key} */
@@ -3177,7 +3401,7 @@
         batch.oncommit(this.#commit);
         batch.ondiscard(this.#discard);
       } else {
-        this.#commit();
+        this.#commit(batch);
       }
     }
   }
@@ -3230,7 +3454,7 @@
         update_branch(key, fn2);
       });
       if (!has_branch) {
-        update_branch(false, null);
+        update_branch(-1, null);
       }
     }, flags2);
   }
@@ -3739,6 +3963,14 @@
     return bound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component;
   }
   function bind_this(element_or_component = {}, update, get_value, get_parts) {
+    var component_effect = (
+      /** @type {ComponentContext} */
+      component_context.r
+    );
+    var parent = (
+      /** @type {Effect} */
+      active_effect
+    );
     effect(() => {
       var old_parts;
       var parts;
@@ -3755,25 +3987,24 @@
         });
       });
       return () => {
-        queue_micro_task(() => {
+        let p = parent;
+        while (p !== component_effect && p.parent !== null && p.parent.f & DESTROYING) {
+          p = p.parent;
+        }
+        const teardown2 = () => {
           if (parts && is_bound_this(get_value(...parts), element_or_component)) {
             update(null, ...parts);
           }
-        });
+        };
+        const original_teardown = p.teardown;
+        p.teardown = () => {
+          teardown2();
+          original_teardown?.();
+        };
       };
     });
     return element_or_component;
   }
-  let is_store_binding = false;
-  function capture_store_binding(fn) {
-    var previous_is_store_binding = is_store_binding;
-    try {
-      is_store_binding = false;
-      return [fn(), is_store_binding];
-    } finally {
-      is_store_binding = previous_is_store_binding;
-    }
-  }
   const rest_props_handler = {
     get(target, key) {
       if (target.exclude.includes(key)) return;
@@ -3891,7 +4122,7 @@
       }
       return fallback_value;
     };
-    var setter;
+    let setter;
     if (bindable) {
       var is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
       setter = get_descriptor(props, key)?.set ?? (is_entry_props && key in props ? (v) => props[key] = v : void 0);
@@ -3986,7 +4217,6 @@
     );
   }
   var ScenaEvent = /* @__PURE__ */ ((ScenaEvent2) => {
-    ScenaEvent2["ON_SCENA_MOUNT"] = "scena:on-mount";
     ScenaEvent2["ON_SCENA_DESTROY"] = "scena:on-destroy";
     ScenaEvent2["ON_VIDEO_READY"] = "video:on-ready";
     ScenaEvent2["ON_VIDEO_PLAY"] = "video:on-play";
@@ -4142,6 +4372,9 @@
     }
     return Object.entries(styles).map(([property, value]) => `${formatComponentStyleProperty(property)}: ${value}`).join("; ") + ";";
   };
+  const resolveElements = (instance) => {
+    return instance?.getElements() ?? null;
+  };
   const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
   const isPlainObject = (value) => {
     if (typeof value !== "object" || value === null || Array.isArray(value)) {
@@ -4196,7 +4429,7 @@
   function ScenaContainer($$anchor, $$props) {
     push($$props, true);
     let position = prop($$props, "position", 19, () => ComponentPosition.FIXED), placement = prop($$props, "placement", 19, () => ComponentPlacement.BOTTOM_END);
-    let rootElement;
+    let rootElement = /* @__PURE__ */ state(null);
     const customPlacements = [ComponentPosition.ABSOLUTE, ComponentPosition.FIXED];
     const isCustomPlacement = /* @__PURE__ */ user_derived(() => customPlacements.includes(position()));
     const rootClasses = /* @__PURE__ */ user_derived(() => [
@@ -4207,7 +4440,7 @@
     ]);
     const rootStyles = /* @__PURE__ */ user_derived(() => formatComponentStyles($$props.customStyles?.root));
     function getElements() {
-      return { root: rootElement };
+      return { root: get(rootElement) };
     }
     var $$exports = { getElements };
     var div = root$g();
@@ -4223,7 +4456,7 @@
         if ($$props.children) $$render(consequent);
       });
     }
-    bind_this(div, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(div, ($$value) => set(rootElement, $$value), () => get(rootElement));
     template_effect(() => {
       set_attribute(div, "id", $$props.id);
       set_class(div, 1, clsx(get(rootClasses)));
@@ -4312,10 +4545,10 @@
       $$props.autosize ? "rs-button--autosize" : `rs-button--${size()}`,
       $$props.customClasses?.root
     ]);
-    let rootElement;
+    let rootElement = /* @__PURE__ */ state(null);
     const rootStyles = /* @__PURE__ */ user_derived(() => formatComponentStyles($$props.customStyles?.root));
     function getElements() {
-      return { root: rootElement };
+      return { root: get(rootElement) };
     }
     var $$exports = { getElements };
     var button = root$a();
@@ -4346,7 +4579,7 @@
         if ($$props.children) $$render(consequent);
       });
     }
-    bind_this(button, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(button, ($$value) => set(rootElement, $$value), () => get(rootElement));
     append($$anchor, button);
     return pop($$exports);
   }
@@ -4354,17 +4587,17 @@
   function ScenaIcon($$anchor, $$props) {
     push($$props, true);
     let viewBox = prop($$props, "viewBox", 3, "0 0 16 16"), size = prop($$props, "size", 19, () => ComponentSize.MD);
-    let rootElement;
+    let rootElement = /* @__PURE__ */ state(null);
     const rootClasses = /* @__PURE__ */ user_derived(() => ["rs-icon", `rs-icon--${size()}`, $$props.customClasses?.root]);
     const rootStyles = /* @__PURE__ */ user_derived(() => formatComponentStyles($$props.customStyles?.root));
     function getElements() {
-      return { root: rootElement };
+      return { root: get(rootElement) };
     }
     var $$exports = { getElements };
     var svg = root$9();
     var node = child(svg);
     snippet(node, () => $$props.children ?? noop);
-    bind_this(svg, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(svg, ($$value) => set(rootElement, $$value), () => get(rootElement));
     template_effect(() => {
       set_attribute(svg, "id", $$props.id);
       set_class(svg, 0, clsx(get(rootClasses)));
@@ -4379,9 +4612,9 @@
     push($$props, true);
     let size = prop($$props, "size", 19, () => ComponentSize.MD), shape = prop($$props, "shape", 19, () => ComponentShape.CIRCLE), aria = prop($$props, "aria", 19, () => ({ ariaLabel: "Close" }));
     const { eventEmitter, unmount: unmount2 } = getScenaContext();
-    let rootElement;
-    let buttonElement;
-    let crossElement;
+    let rootElement = /* @__PURE__ */ state(null);
+    let buttonElement = /* @__PURE__ */ state(null);
+    let crossElement = /* @__PURE__ */ state(null);
     const rootClasses = /* @__PURE__ */ user_derived(() => [
       "rs-close-button",
       `rs-close-button--${size()}`,
@@ -4399,9 +4632,9 @@
     }
     function getElements() {
       return {
-        root: rootElement,
-        button: buttonElement?.getElements(),
-        cross: crossElement?.getElements()
+        root: get(rootElement),
+        button: resolveElements(get(buttonElement)),
+        cross: resolveElements(get(crossElement))
       };
     }
     var $$exports = { getElements };
@@ -4449,18 +4682,18 @@
                   },
                   $$slots: { default: true }
                 }),
-                ($$value) => crossElement = $$value,
-                () => crossElement
+                ($$value) => set(crossElement, $$value, true),
+                () => get(crossElement)
               );
             }
           },
           $$slots: { default: true }
         }),
-        ($$value) => buttonElement = $$value,
-        () => buttonElement
+        ($$value) => set(buttonElement, $$value, true),
+        () => get(buttonElement)
       );
     }
-    bind_this(div, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(div, ($$value) => set(rootElement, $$value), () => get(rootElement));
     template_effect(() => {
       set_attribute(div, "id", $$props.id);
       set_class(div, 1, clsx(get(rootClasses)));
@@ -4483,8 +4716,8 @@
     }));
     const { eventEmitter } = getScenaContext();
     const currentPlacement = /* @__PURE__ */ user_derived(() => adaptive() && adaptive().sizes.includes(size()) ? adaptive().placement : placement());
-    let rootElement;
-    let buttonElement;
+    let rootElement = /* @__PURE__ */ state(null);
+    let buttonElement = /* @__PURE__ */ state(null);
     const rootClasses = /* @__PURE__ */ user_derived(() => [
       "rs-cta-button",
       `rs-cta-button--${get(currentPlacement)}`,
@@ -4498,7 +4731,10 @@
       }
     }
     function getElements() {
-      return { root: rootElement, button: buttonElement?.getElements() };
+      return {
+        root: get(rootElement),
+        button: resolveElements(get(buttonElement))
+      };
     }
     var $$exports = { getElements };
     var div = root$7();
@@ -4531,11 +4767,11 @@
           },
           $$slots: { default: true }
         }),
-        ($$value) => buttonElement = $$value,
-        () => buttonElement
+        ($$value) => set(buttonElement, $$value, true),
+        () => get(buttonElement)
       );
     }
-    bind_this(div, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(div, ($$value) => set(rootElement, $$value), () => get(rootElement));
     template_effect(() => {
       set_attribute(div, "id", $$props.id);
       set_class(div, 1, clsx(get(rootClasses)));
@@ -4833,7 +5069,7 @@
     push($$props, true);
     let preload = prop($$props, "preload", 19, () => ScenaVideoPreload.METADATA), crossorigin = prop($$props, "crossorigin", 19, () => ScenaVideoCrossOrigin.ANONYMOUS), autoplay = prop($$props, "autoplay", 3, true), playsinline = prop($$props, "playsinline", 3, true), loop = prop($$props, "loop", 3, true), muted = prop($$props, "muted", 3, true), controls = prop($$props, "controls", 3, false), volume = prop($$props, "volume", 3, 1), startTime = prop($$props, "startTime", 3, 0);
     const { eventEmitter } = getScenaContext();
-    let rootElement;
+    let rootElement = /* @__PURE__ */ state(null);
     let mediaElement;
     const controller = useVideoController({ getVideoElement: () => mediaElement, eventEmitter });
     setScenaVideoContext(controller);
@@ -4849,7 +5085,7 @@
       }
     });
     function getElements() {
-      return { root: rootElement, video: mediaElement };
+      return { root: get(rootElement), video: mediaElement };
     }
     var $$exports = { controller, getElements };
     var div = root$6();
@@ -4868,7 +5104,7 @@
         if ($$props.children) $$render(consequent);
       });
     }
-    bind_this(div, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(div, ($$value) => set(rootElement, $$value), () => get(rootElement));
     template_effect(() => {
       set_attribute(div, "id", $$props.id);
       set_class(div, 1, clsx(get(rootClasses)));
@@ -4937,7 +5173,7 @@
     push($$props, true);
     let size = prop($$props, "size", 19, () => ComponentSize.MD), shape = prop($$props, "shape", 19, () => ComponentShape.CIRCLE);
     const { eventEmitter } = getScenaContext();
-    let rootElement;
+    let rootElement = /* @__PURE__ */ state(null);
     const rootClasses = /* @__PURE__ */ user_derived(() => [
       "rs-video-container",
       `rs-video-container--${size()}`,
@@ -4955,7 +5191,7 @@
       }
     }
     function getElements() {
-      return { root: rootElement };
+      return { root: get(rootElement) };
     }
     var $$exports = { getElements };
     var div = root$5();
@@ -4971,7 +5207,7 @@
         if ($$props.children) $$render(consequent);
       });
     }
-    bind_this(div, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(div, ($$value) => set(rootElement, $$value), () => get(rootElement));
     template_effect(() => {
       set_attribute(div, "id", $$props.id);
       set_class(div, 1, clsx(get(rootClasses)));
@@ -5010,10 +5246,10 @@
     function getElements() {
       return {
         root: get(rootElement),
-        pauseButton: get(pauseButtonElement)?.getElements(),
-        pauseIcon: get(pauseIconElement)?.getElements(),
-        playButton: get(playButtonElement)?.getElements(),
-        playIcon: get(playIconElement)?.getElements()
+        pauseButton: resolveElements(get(pauseButtonElement)),
+        pauseIcon: resolveElements(get(pauseIconElement)),
+        playButton: resolveElements(get(playButtonElement)),
+        playIcon: resolveElements(get(playIconElement))
       };
     }
     var $$exports = { getElements };
@@ -5164,7 +5400,7 @@
   function ScenaLoader($$anchor, $$props) {
     push($$props, true);
     let size = prop($$props, "size", 19, () => ComponentSize.MD);
-    let rootElement;
+    let rootElement = /* @__PURE__ */ state(null);
     const rootClasses = /* @__PURE__ */ user_derived(() => [
       "rs-loader",
       `rs-loader--${size()}`,
@@ -5172,11 +5408,11 @@
     ]);
     const rootStyles = /* @__PURE__ */ user_derived(() => formatComponentStyles($$props.customStyles?.root));
     function getElements() {
-      return { root: rootElement };
+      return { root: get(rootElement) };
     }
     var $$exports = { getElements };
     var svg = root$4();
-    bind_this(svg, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(svg, ($$value) => set(rootElement, $$value), () => get(rootElement));
     template_effect(() => {
       set_attribute(svg, "id", $$props.id);
       set_class(svg, 0, clsx(get(rootClasses)));
@@ -5190,14 +5426,14 @@
     push($$props, true);
     let size = prop($$props, "size", 19, () => ComponentSize.MD);
     const scenaVideoContext = getScenaVideoContext();
-    let rootElement;
+    let rootElement = /* @__PURE__ */ state(null);
     let loaderElement = /* @__PURE__ */ state(null);
     const rootClasses = /* @__PURE__ */ user_derived(() => ["rs-video-loader", $$props.customClasses?.root]);
     const rootStyles = /* @__PURE__ */ user_derived(() => formatComponentStyles($$props.customStyles?.root));
     function getElements() {
       return {
-        root: rootElement,
-        loader: get(loaderElement)?.getElements()
+        root: get(rootElement),
+        loader: resolveElements(get(loaderElement))
       };
     }
     var $$exports = { getElements };
@@ -5229,7 +5465,7 @@
         if (scenaVideoContext.state === ScenaVideoState.LOADING) $$render(consequent);
       });
     }
-    bind_this(div, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(div, ($$value) => set(rootElement, $$value), () => get(rootElement));
     template_effect(() => {
       set_attribute(div, "id", $$props.id);
       set_class(div, 1, clsx(get(rootClasses)));
@@ -5542,7 +5778,7 @@
   function ScenaProgressCircle($$anchor, $$props) {
     push($$props, true);
     let size = prop($$props, "size", 19, () => ComponentSize.MD), buffer = prop($$props, "buffer", 3, 0), progress = prop($$props, "progress", 3, 0), aria = prop($$props, "aria", 19, () => ({ ariaLabel: "Progress" }));
-    let rootElement;
+    let rootElement = /* @__PURE__ */ state(null);
     let trackElement = /* @__PURE__ */ state(null);
     let bufferElement = /* @__PURE__ */ state(null);
     let progressElement = /* @__PURE__ */ state(null);
@@ -5559,7 +5795,7 @@
     const progressClasses = /* @__PURE__ */ user_derived(() => ["rs-progress__progress", $$props.customClasses?.progress]);
     const progressStyles = /* @__PURE__ */ user_derived(() => formatComponentStyles($$props.customStyles?.progress));
     const progressCircle = useProgressCircle({
-      getRootElement: () => rootElement,
+      getRootElement: () => get(rootElement),
       getProgress: () => progress(),
       getBuffer: () => buffer(),
       getSize: () => size(),
@@ -5573,7 +5809,7 @@
     });
     function getElements() {
       return {
-        root: rootElement,
+        root: get(rootElement),
         track: get(trackElement),
         buffer: get(bufferElement),
         progress: get(progressElement)
@@ -5668,7 +5904,7 @@
         if (progressCircle.radialSize) $$render(consequent_1);
       });
     }
-    bind_this(svg, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(svg, ($$value) => set(rootElement, $$value), () => get(rootElement));
     template_effect(
       ($0) => {
         set_attribute(svg, "id", $$props.id);
@@ -5691,7 +5927,7 @@
   function ScenaProgressLine($$anchor, $$props) {
     push($$props, true);
     let size = prop($$props, "size", 19, () => ComponentSize.MD), buffer = prop($$props, "buffer", 3, 0), progress = prop($$props, "progress", 3, 0), aria = prop($$props, "aria", 19, () => ({ ariaLabel: "Progress" }));
-    let rootElement;
+    let rootElement = /* @__PURE__ */ state(null);
     let trackElement;
     let bufferElement = /* @__PURE__ */ state(null);
     let progressElement;
@@ -5709,14 +5945,14 @@
     const progressStyles = /* @__PURE__ */ user_derived(() => formatComponentStyles($$props.customStyles?.progress));
     function getElements() {
       return {
-        root: rootElement,
+        root: get(rootElement),
         track: trackElement,
         buffer: get(bufferElement),
         progress: progressElement
       };
     }
     const progressLine = useProgressLine({
-      getRootElement: () => rootElement,
+      getRootElement: () => get(rootElement),
       getProgress: () => progress(),
       getSize: () => size(),
       onSeek: (progress2, event2) => $$props.onSeek?.(progress2, event2),
@@ -5758,7 +5994,7 @@
     let styles_1;
     bind_this(div_3, ($$value) => progressElement = $$value, () => progressElement);
     bind_this(div_1, ($$value) => trackElement = $$value, () => trackElement);
-    bind_this(div, ($$value) => rootElement = $$value, () => rootElement);
+    bind_this(div, ($$value) => set(rootElement, $$value), () => get(rootElement));
     template_effect(
       ($0) => {
         set_attribute(div, "id", $$props.id);
@@ -5808,7 +6044,7 @@
       set(previousState, null);
     }
     function getElements() {
-      return get(rootElement)?.getElements() ?? null;
+      return { root: get(rootElement)?.getElements() ?? null };
     }
     var $$exports = { getElements };
     var fragment = comment();
@@ -5929,10 +6165,10 @@
     function getElements() {
       return {
         root: get(rootElement),
-        unmuteButton: get(unmuteButtonElement)?.getElements(),
-        unmuteIcon: get(unmuteIconElement)?.getElements(),
-        muteButton: get(muteButtonElement)?.getElements(),
-        muteIcon: get(muteIconElement)?.getElements()
+        unmuteButton: resolveElements(get(unmuteButtonElement)),
+        unmuteIcon: resolveElements(get(unmuteIconElement)),
+        muteButton: resolveElements(get(muteButtonElement)),
+        muteIcon: resolveElements(get(muteIconElement))
       };
     }
     var $$exports = { getElements };
@@ -5954,7 +6190,7 @@
           };
           if_block(node_1, ($$render) => {
             if (scenaVideoContext.isMuted) $$render(consequent);
-            else $$render(alternate, false);
+            else $$render(alternate, -1);
           });
         }
         var node_2 = sibling(span, 2);
@@ -6059,7 +6295,7 @@
           };
           if_block(node_2, ($$render) => {
             if (scenaVideoContext.isMuted) $$render(consequent_1);
-            else $$render(alternate_1, false);
+            else $$render(alternate_1, -1);
           });
         }
         bind_this(div, ($$value) => set(rootElement, $$value), () => get(rootElement));
@@ -6155,7 +6391,6 @@
     };
     onMount(() => {
       $$props.mount();
-      $$props.eventEmitter.emit(ScenaEvent.ON_SCENA_MOUNT);
     });
     onDestroy(() => {
       $$props.eventEmitter.emit(ScenaEvent.ON_SCENA_DESTROY);
@@ -6428,7 +6663,7 @@
         await unmount(instance.component);
       }
     }
-    return { NAME: "@retoo/scena", VERSION: "0.0.0", mount: mount$1, unmount: unmount$1 };
+    return { NAME: "@retoo/scena", VERSION: "0.0.1", mount: mount$1, unmount: unmount$1 };
   }
   function useScenaConfig(initial) {
     let config = /* @__PURE__ */ state(proxy(deepClone(initial)));
@@ -6485,8 +6720,7 @@
       var sources = this.#sources;
       var s = sources.get(key);
       if (s === void 0) {
-        var ret = super.get(key);
-        if (ret !== void 0) {
+        if (super.has(key)) {
           s = this.#source(0);
           sources.set(key, s);
         } else {
@@ -6510,8 +6744,7 @@
       var sources = this.#sources;
       var s = sources.get(key);
       if (s === void 0) {
-        var ret = super.get(key);
-        if (ret !== void 0) {
+        if (super.has(key)) {
           s = this.#source(0);
           sources.set(key, s);
         } else {
@@ -6559,8 +6792,10 @@
       var res = super.delete(key);
       if (s !== void 0) {
         sources.delete(key);
-        set(this.#size, super.size);
         set(s, -1);
+      }
+      if (res) {
+        set(this.#size, super.size);
         increment(this.#version);
       }
       return res;
@@ -6911,9 +7146,7 @@
   }
   function defineScenaElement() {
     const customElement = getScenaElement();
-    if (customElement) {
-      return;
-    }
+    if (customElement) return;
     customElements.define(ScenaElement.tagName, ScenaElement);
   }
   if (isBrowser) {