@retoo/scena 0.0.1 → 0.0.2

package/dist/scena.es.js

@@ -58,6 +58,7 @@ const MAYBE_DIRTY = 1 << 12;
 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;
@@ -138,6 +139,11 @@ function svelte_boundary_reset_onerror() {
     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`);
@@ -203,6 +209,10 @@ function push(props, runes = false, fn) {
     e: null,
     s: props,
     x: null,
+    r: (
+      /** @type {Effect} */
+      active_effect
+    ),
     l: legacy_mode_flag && !runes ? { s: null, u: null, $: [] } : null
   };
 }
@@ -322,29 +332,44 @@ function defer_effect(effect2, dirty_effects, maybe_dirty_effects) {
   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();
   /**
@@ -353,19 +378,36 @@ class Batch {
    */
   #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>}
@@ -384,10 +426,36 @@ class Batch {
    * @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
@@ -397,58 +465,99 @@ class Batch {
     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
@@ -457,7 +566,7 @@ class Batch {
    * @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) {
@@ -501,132 +610,189 @@ class Batch {
   /**
    * 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);
   }
@@ -634,48 +800,67 @@ class Batch {
   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() {
@@ -773,27 +958,8 @@ function depends_on(reaction, sources, checked) {
   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) {
@@ -811,6 +977,14 @@ function reset_branch(effect2, tracked) {
     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);
@@ -949,7 +1123,6 @@ class Boundary {
       var anchor = create_text();
       fragment.append(anchor);
       this.#main_effect = this.#run(() => {
-        Batch.ensure();
         return branch(() => this.#children(anchor));
       });
       if (this.#pending_count === 0) {
@@ -962,7 +1135,10 @@ class Boundary {
             this.#pending_effect = null;
           }
         );
-        this.#resolve();
+        this.#resolve(
+          /** @type {Batch} */
+          current_batch
+        );
       }
     });
   }
@@ -983,24 +1159,21 @@ class Boundary {
         );
         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
@@ -1031,6 +1204,7 @@ class Boundary {
     set_active_reaction(this.#effect);
     set_component_context(this.#effect.ctx);
     try {
+      Batch.ensure();
       return fn();
     } catch (e) {
       handle_error(e);
@@ -1045,17 +1219,18 @@ class Boundary {
    * 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;
@@ -1072,9 +1247,10 @@ class Boundary {
    * 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;
@@ -1094,11 +1270,24 @@ class Boundary {
   }
   /** @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;
@@ -1111,6 +1300,8 @@ class Boundary {
       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 = () => {
@@ -1128,7 +1319,6 @@ class Boundary {
         });
       }
       this.#run(() => {
-        Batch.ensure();
         this.#render();
       });
     };
@@ -1142,7 +1332,6 @@ class Boundary {
       }
       if (failed) {
         this.#failed_effect = this.#run(() => {
-          Batch.ensure();
           try {
             return branch(() => {
               var effect2 = (
@@ -1217,26 +1406,39 @@ function flatten(blockers, sync, async, fn) {
     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) {
@@ -1246,30 +1448,29 @@ function unset_context(deactivate_batch = true) {
   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;
   }
@@ -1287,7 +1488,7 @@ function derived(fn) {
       UNINITIALIZED
     ),
     wv: 0,
-    parent: parent_derived ?? active_effect,
+    parent: active_effect,
     ac: null
   };
   return signal;
@@ -1313,6 +1514,10 @@ function async_derived(fn, label, location) {
   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 {
@@ -1326,18 +1531,35 @@ function async_derived(fn, label, location) {
       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;
@@ -1349,9 +1571,7 @@ function async_derived(fn, label, location) {
           d2.reject(STALE_REACTION);
         }
       }
-      if (decrement_pending) {
-        decrement_pending();
-      }
+      batch.deactivate();
     };
     d.promise.then(handler, (e) => handler(null, e || "unknown"));
   });
@@ -1398,23 +1618,15 @@ function destroy_derived_effects(derived2) {
     }
   }
 }
-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;
@@ -1431,7 +1643,11 @@ function update_derived(derived2) {
   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;
@@ -1498,19 +1714,13 @@ function set(source2, value, should_proxy = false) {
     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} */
@@ -1519,10 +1729,12 @@ function internal_set(source2, value) {
       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]);
@@ -1551,7 +1763,7 @@ function flush_eager_effects() {
 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();
@@ -1571,22 +1783,24 @@ function mark_reactions(signal, status) {
       );
       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);
+      }
     }
   }
 }
@@ -1911,7 +2125,7 @@ function push_effect(effect2, parent_effect) {
     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;
@@ -1932,22 +2146,27 @@ function create_effect(type, fn, sync) {
     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) {
@@ -1969,7 +2188,7 @@ function effect_tracking() {
   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;
@@ -1992,15 +2211,15 @@ function user_effect(fn) {
   }
 }
 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) {
@@ -2016,29 +2235,29 @@ function component_root(fn) {
   };
 }
 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;
@@ -2094,9 +2313,9 @@ function destroy_effect(effect2, remove_dom = true) {
     );
     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) {
@@ -2104,11 +2323,13 @@ function destroy_effect(effect2, remove_dom = true) {
     }
   }
   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) {
@@ -2159,11 +2380,13 @@ function pause_children(effect2, transitions, local) {
   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;
   }
 }
@@ -2175,7 +2398,7 @@ function resume_children(effect2, local) {
   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) {
@@ -2439,7 +2662,9 @@ function remove_reaction(signal, dependency) {
       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);
   }
@@ -3056,11 +3281,10 @@ class BranchManager {
     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} */
@@ -3173,7 +3397,7 @@ class BranchManager {
       batch.oncommit(this.#commit);
       batch.ondiscard(this.#discard);
     } else {
-      this.#commit();
+      this.#commit(batch);
     }
   }
 }
@@ -3226,7 +3450,7 @@ function if_block(node, fn, elseif = false) {
       update_branch(key, fn2);
     });
     if (!has_branch) {
-      update_branch(false, null);
+      update_branch(-1, null);
     }
   }, flags2);
 }
@@ -3735,6 +3959,14 @@ function is_bound_this(bound_value, element_or_component) {
   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;
@@ -3751,25 +3983,24 @@ function bind_this(element_or_component = {}, update, get_value, get_parts) {
       });
     });
     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;
@@ -3887,7 +4118,7 @@ function prop(props, key, flags2, fallback) {
     }
     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);
@@ -3982,7 +4213,6 @@ function prop(props, key, flags2, fallback) {
   );
 }
 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";
@@ -4138,6 +4368,9 @@ const formatComponentStyles = (styles) => {
   }
   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)) {
@@ -4192,7 +4425,7 @@ var root$g = /* @__PURE__ */ from_html(`<div><!></div>`);
 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(() => [
@@ -4203,7 +4436,7 @@ function ScenaContainer($$anchor, $$props) {
   ]);
   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();
@@ -4219,7 +4452,7 @@ function ScenaContainer($$anchor, $$props) {
       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)));
@@ -4308,10 +4541,10 @@ function ScenaButton($$anchor, $$props) {
     $$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();
@@ -4342,7 +4575,7 @@ function ScenaButton($$anchor, $$props) {
       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);
 }
@@ -4350,17 +4583,17 @@ var root$9 = /* @__PURE__ */ from_svg(`<svg fill="none" focusable="false" aria-h
 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)));
@@ -4375,9 +4608,9 @@ function ScenaCloseButton($$anchor, $$props) {
   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()}`,
@@ -4395,9 +4628,9 @@ function ScenaCloseButton($$anchor, $$props) {
   }
   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 };
@@ -4445,18 +4678,18 @@ function ScenaCloseButton($$anchor, $$props) {
                 },
                 $$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)));
@@ -4479,8 +4712,8 @@ function ScenaCtaButton($$anchor, $$props) {
   }));
   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)}`,
@@ -4494,7 +4727,10 @@ function ScenaCtaButton($$anchor, $$props) {
     }
   }
   function getElements() {
-    return { root: rootElement, button: buttonElement?.getElements() };
+    return {
+      root: get(rootElement),
+      button: resolveElements(get(buttonElement))
+    };
   }
   var $$exports = { getElements };
   var div = root$7();
@@ -4527,11 +4763,11 @@ function ScenaCtaButton($$anchor, $$props) {
         },
         $$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)));
@@ -4829,7 +5065,7 @@ function ScenaVideo($$anchor, $$props) {
   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);
@@ -4845,7 +5081,7 @@ function ScenaVideo($$anchor, $$props) {
     }
   });
   function getElements() {
-    return { root: rootElement, video: mediaElement };
+    return { root: get(rootElement), video: mediaElement };
   }
   var $$exports = { controller, getElements };
   var div = root$6();
@@ -4864,7 +5100,7 @@ function ScenaVideo($$anchor, $$props) {
       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)));
@@ -4933,7 +5169,7 @@ function ScenaVideoContainer($$anchor, $$props) {
   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()}`,
@@ -4951,7 +5187,7 @@ function ScenaVideoContainer($$anchor, $$props) {
     }
   }
   function getElements() {
-    return { root: rootElement };
+    return { root: get(rootElement) };
   }
   var $$exports = { getElements };
   var div = root$5();
@@ -4967,7 +5203,7 @@ function ScenaVideoContainer($$anchor, $$props) {
       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)));
@@ -5006,10 +5242,10 @@ function ScenaVideoControls($$anchor, $$props) {
   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 };
@@ -5160,7 +5396,7 @@ var root$4 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" xmlns="http://ww
 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()}`,
@@ -5168,11 +5404,11 @@ function ScenaLoader($$anchor, $$props) {
   ]);
   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)));
@@ -5186,14 +5422,14 @@ function ScenaVideoLoader($$anchor, $$props) {
   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 };
@@ -5225,7 +5461,7 @@ function ScenaVideoLoader($$anchor, $$props) {
       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)));
@@ -5538,7 +5774,7 @@ var root$2 = /* @__PURE__ */ from_svg(`<svg role="slider" xmlns="http://www.w3.o
 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);
@@ -5555,7 +5791,7 @@ function ScenaProgressCircle($$anchor, $$props) {
   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(),
@@ -5569,7 +5805,7 @@ function ScenaProgressCircle($$anchor, $$props) {
   });
   function getElements() {
     return {
-      root: rootElement,
+      root: get(rootElement),
       track: get(trackElement),
       buffer: get(bufferElement),
       progress: get(progressElement)
@@ -5664,7 +5900,7 @@ function ScenaProgressCircle($$anchor, $$props) {
       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);
@@ -5687,7 +5923,7 @@ var root$1 = /* @__PURE__ */ from_html(`<div role="slider"><div><!> <div></div><
 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;
@@ -5705,14 +5941,14 @@ function ScenaProgressLine($$anchor, $$props) {
   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),
@@ -5754,7 +5990,7 @@ function ScenaProgressLine($$anchor, $$props) {
   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);
@@ -5804,7 +6040,7 @@ function ScenaVideoProgress($$anchor, $$props) {
     set(previousState, null);
   }
   function getElements() {
-    return get(rootElement)?.getElements() ?? null;
+    return { root: get(rootElement)?.getElements() ?? null };
   }
   var $$exports = { getElements };
   var fragment = comment();
@@ -5925,10 +6161,10 @@ function ScenaVideoVolume($$anchor, $$props) {
   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 };
@@ -5950,7 +6186,7 @@ function ScenaVideoVolume($$anchor, $$props) {
         };
         if_block(node_1, ($$render) => {
           if (scenaVideoContext.isMuted) $$render(consequent);
-          else $$render(alternate, false);
+          else $$render(alternate, -1);
         });
       }
       var node_2 = sibling(span, 2);
@@ -6055,7 +6291,7 @@ function ScenaVideoVolume($$anchor, $$props) {
         };
         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));
@@ -6151,7 +6387,6 @@ function Scena($$anchor, $$props) {
   };
   onMount(() => {
     $$props.mount();
-    $$props.eventEmitter.emit(ScenaEvent.ON_SCENA_MOUNT);
   });
   onDestroy(() => {
     $$props.eventEmitter.emit(ScenaEvent.ON_SCENA_DESTROY);
@@ -6424,7 +6659,7 @@ function useScena() {
       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)));
@@ -6481,8 +6716,7 @@ class SvelteMap extends Map {
     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 {
@@ -6506,8 +6740,7 @@ class SvelteMap extends Map {
     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 {
@@ -6555,8 +6788,10 @@ class SvelteMap extends Map {
     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;
@@ -6907,9 +7142,7 @@ function getScenaElement() {
 }
 function defineScenaElement() {
   const customElement = getScenaElement();
-  if (customElement) {
-    return;
-  }
+  if (customElement) return;
   customElements.define(ScenaElement.tagName, ScenaElement);
 }
 if (isBrowser) {