Timeline animation clips (#122)

This is a super initial version of animation clips in timeline.


https://github.com/storytold/storyteller-bevy/assets/10376144/b649162b-8758-4662-bfb9-6a492563b9f7


https://github.com/storytold/storyteller-bevy/assets/10376144/a5815685-bf52-4413-8828-d86051bf850a

---------

Co-authored-by: Danny McGee <dannymcgee@gmail.com>

studio/src/debug.rs

@@ -80,6 +80,14 @@ impl Plugin for DebugPlugin {
             Update,
             update_editor_ui_mode.run_if(resource_changed::<DebugMode>()),
         );
+
+        #[cfg(feature = "wasm")]
+        {
+            app.add_systems(
+                PostUpdate,
+                wasm::notify_debug_mode_toggle.map(bevy::utils::error),
+            );
+        }
     }
 }
 
@@ -209,3 +217,45 @@ fn sync_editor_camera(
         cmd.entity(ent).insert(EditorCameraMarker);
     }
 }
+
+#[cfg(feature = "wasm")]
+mod wasm {
+    use super::DebugMode;
+    use bevy::{prelude::*, window::PrimaryWindow};
+    use serde_json::json;
+    use wasm_bindgen::prelude::*;
+
+    #[wasm_bindgen(typescript_custom_section)]
+    const DEBUG_TYPES: &str = r#"
+    export interface DebugModeToggled extends CustomEvent {
+        type: "debug-mode-toggled",
+        detail: {
+            debugModeActive: boolean
+        }
+    }
+    
+    declare global {
+        export interface GlobalEventHandlersEventMap {
+            "debug-mode-toggled": DebugModeToggled
+        }
+    }
+    "#;
+
+    pub fn notify_debug_mode_toggle(
+        q_window: Query<&Window, With<PrimaryWindow>>,
+        r_debug_mode: Res<DebugMode>,
+    ) -> Result<(), String> {
+        if !r_debug_mode.is_changed() {
+            return Ok(());
+        }
+        let Ok(window) = q_window.get_single() else {
+            return Ok(());
+        };
+
+        crate::wasm::dispatch_to_js(
+            window,
+            "debug-mode-toggled",
+            &json!({ "debugModeActive": r_debug_mode.0 }),
+        )
+    }
+}